/* Background blob styling for both index and marketing-embed pages */

/* Common background styling */
.background-blob {
  position: relative;
  z-index: 0;
}

.background-blob::before {
  content: "";
  position: absolute;
  top: 5%;
  bottom: 5%;
  right: 5%; /* Add 5% padding from the right edge */
  width: 95%; /* Adjust width to maintain proportions */
  background-image: url('/img/background-blob.svg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
  z-index: -1;
  pointer-events: none; /* Allow clicking through the background */
  opacity: 0.33; /* 33% opacity as requested */
}

/* Specific styling for marketing-embed (full page) */
.marketing-embed-blob {
  position: fixed;
  top: 0%;
  bottom: 0%;
  right: 0%; /* Add 5% padding from the right edge */
  width: 100%; /* Adjust width to maintain proportions */
  z-index: 0;
  background-image: url('/img/background-blob.svg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
  pointer-events: none; /* Allow clicking through the background */
  opacity: 0.33; /* 33% opacity as requested */
}

/* Ensure all content appears above the blob */
#embedPageContainer, 
#resultsContainer,
#leadFormModal {
  position: relative;
  z-index: 1;
}

/* For smaller screens, adjust the background size */
@media (max-width: 768px) {
  .background-blob::before {
    background-size: auto 90%;
  }
  
  .marketing-embed-blob {
    background-size: auto 90%;
  }
}