/**
 * SSR Production CSS
 * Modal sizing, sticky video, and lightbox constraint styles
 * Served as a static file for better caching
 */

/* ===== SSR Container Layout Constraints ===== */
/* Reusable container class for module containment - SSR owns layout, not modules */
.cb-container {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* ===== SSR Modal/Lightbox Size Constraints ===== */

/* Form Modal - constrained width (targets SSR-generated #ssr-form-modal inner div) */
#ssr-form-modal > div,
.ssr-form-modal,
#form-modal,
[data-form-modal] {
  max-width: 500px !important;
  width: 90% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: auto !important;
}

/* Image Lightbox - responsive sizing (targets SSR-generated #ssr-image-lightbox img) */
#ssr-image-lightbox img,
#ssr-lightbox-image,
.ssr-image-lightbox img,
.image-lightbox-modal img,
[data-image-lightbox] img {
  max-width: 90vw !important;
  max-height: 85vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Video Lightbox - constrained width (targets SSR-generated #ssr-video-lightbox-container) */
#ssr-video-lightbox-container,
#ssr-video-lightbox > div,
.ssr-video-lightbox,
.video-lightbox-modal,
[data-video-lightbox] {
  max-width: 900px !important;
  width: 90% !important;
  margin: auto !important;
}

#ssr-video-lightbox-container iframe,
#ssr-lightbox-video,
.ssr-video-lightbox iframe,
.ssr-video-lightbox video,
.video-lightbox-modal iframe,
.video-lightbox-modal video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
}

/* Video Gate Form Modal */
#video-gate-form-modal,
.video-gate-modal,
[data-video-gate-modal] {
  max-width: 500px !important;
  width: 90% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: auto !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 24px !important;
}

/* ===== Exit Popup Modal Styles ===== */

/* Exit popup modal overlay */
#exit-popup-modal,
.exit-popup-modal {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  align-items: center !important;
  justify-content: center !important;
}

#exit-popup-modal[style*="display: flex"],
#exit-popup-modal.visible {
  display: flex !important;
}

/* Exit popup content container */
#exit-popup-modal .exit-popup-content,
.exit-popup-content {
  max-width: 500px !important;
  width: 90% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: auto !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 32px !important;
  position: relative !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Exit popup close button */
.exit-popup-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.1) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.exit-popup-close:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* ===== SSR Modal Close Button Styles ===== */
/* Universal close button styles for all SSR modals/lightboxes */
#ssr-modal-close,
#ssr-image-lightbox-close,
#ssr-video-lightbox-close,
#video-gate-form-modal .ssr-modal-close-btn,
#ssr-form-modal .ssr-modal-close-btn,
.ssr-modal-close-btn {
  position: absolute !important;
  z-index: 10001 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
  /* Ensure click events work */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

/* SSR Form Modal - ensure inner container doesn't block close button */
#ssr-form-modal > div {
  position: relative !important;
  overflow: visible !important;
}

#ssr-form-modal #ssr-modal-close,
#ssr-form-modal .ssr-modal-close-btn {
  z-index: 10002 !important;
}

/* Form modal close button */
#ssr-modal-close {
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 24px !important;
  background: rgba(0, 0, 0, 0.1) !important;
  color: #333 !important;
  border-radius: 50% !important;
}

#ssr-modal-close:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Lightbox close buttons (image and video) */
#ssr-image-lightbox-close,
#ssr-video-lightbox-close {
  top: 20px !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 28px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #333 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#ssr-image-lightbox-close:hover,
#ssr-video-lightbox-close:hover {
  background: #fff !important;
  transform: scale(1.05) !important;
}

/* ===== SSR Sticky Video Styles ===== */

/* Sticky video sentinel - invisible scroll detection element */
.sticky-video-sentinel {
  width: 100% !important;
  height: 20px !important;
  pointer-events: none !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sticky video placeholder - maintains layout when video is sticky */
.sticky-video-placeholder {
  width: 100% !important;
  background-color: rgba(0,0,0,0.05) !important;
  border-radius: 8px !important;
}

/* Sticky video active state */
.ssr-sticky-active {
  position: fixed !important;
  z-index: 2147483647 !important;
  width: 320px !important;
  height: 180px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #000 !important;
}

/* Sticky video position variants */
.ssr-sticky-active[data-sticky-pos="bottom-right"] {
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
}

.ssr-sticky-active[data-sticky-pos="bottom-left"] {
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  top: auto !important;
}

.ssr-sticky-active[data-sticky-pos="top-right"] {
  top: 80px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
}

.ssr-sticky-active[data-sticky-pos="top-left"] {
  top: 80px !important;
  left: 20px !important;
  right: auto !important;
  bottom: auto !important;
}

/* Video element inside sticky container */
.ssr-sticky-active iframe,
.ssr-sticky-active video,
.ssr-sticky-video-element {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ===== Testimonial Star Ratings - Always Horizontal ===== */
/* Uses dedicated .testimonial-star-rating class for reliable targeting */
.testimonial-star-rating,
.testimonial-module .testimonial-star-rating,
[data-module-type="testimonial"] .testimonial-star-rating {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* ===== Gallery Module - Transform-based sliding ===== */
.gallery-scroll-row,
.gallery-module .gallery-scroll-row,
[data-module-type="gallery"] .gallery-scroll-row {
  overflow: hidden !important;
  width: 100% !important;
}

.gallery-slide-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  transition: transform 0.4s ease;
}

/* Gallery grid layout */
.gallery-grid,
.gallery-module .gallery-grid,
[data-module-type="gallery"] .gallery-grid {
  display: grid !important;
}

@media (max-width: 480px) {
  /* Mobile: Testimonial stars stay horizontal */
  .testimonial-star-rating,
  .testimonial-module .testimonial-star-rating,
  [data-module-type="testimonial"] .testimonial-star-rating {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  
  /* Mobile: Gallery scroll row stays hidden overflow */
  .gallery-scroll-row,
  .gallery-module .gallery-scroll-row,
  [data-module-type="gallery"] .gallery-scroll-row {
    overflow: hidden !important;
    width: 100% !important;
  }
  
  /* Mobile: Gallery grid maintains 2 columns */
  .gallery-grid,
  .gallery-module .gallery-grid,
  [data-module-type="gallery"] .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Prevent any .flex class from overriding these specific elements */
  .flex.testimonial-star-rating {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* Tablet: Gallery grid 2 columns */
  .gallery-grid,
  .gallery-module .gallery-grid,
  [data-module-type="gallery"] .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== Mobile Responsive Adjustments ===== */
@media (max-width: 768px) {
  .ssr-sticky-active {
    width: 200px !important;
    height: 113px !important;
    bottom: 10px !important;
    right: 10px !important;
  }
  
  .ssr-sticky-active[data-sticky-pos="bottom-left"],
  .ssr-sticky-active[data-sticky-pos="top-left"] {
    left: 10px !important;
    right: auto !important;
  }
  
  /* Mobile modal adjustments */
  #ssr-form-modal > div,
  .ssr-form-modal,
  #form-modal,
  [data-form-modal],
  #video-gate-form-modal,
  .video-gate-modal,
  .exit-popup-content {
    width: 95% !important;
    max-width: 95% !important;
    padding: 16px !important;
  }
  
  #ssr-video-lightbox-container,
  .ssr-video-lightbox,
  .video-lightbox-modal {
    width: 95% !important;
    max-width: 95% !important;
  }
}

/* ===== Quill Font Classes for SSR ===== */
/* These match the fonts available in the RichTextEditor */
.ql-font-playfair-display { font-family: 'Playfair Display', serif !important; }
.ql-font-source-sans-pro { font-family: 'Source Sans Pro', sans-serif !important; }
.ql-font-inter { font-family: 'Inter', sans-serif !important; }
.ql-font-merriweather { font-family: 'Merriweather', serif !important; }
.ql-font-roboto { font-family: 'Roboto', sans-serif !important; }
.ql-font-open-sans { font-family: 'Open Sans', sans-serif !important; }
.ql-font-pacifico { font-family: 'Pacifico', cursive !important; }
.ql-font-dancing-script { font-family: 'Dancing Script', cursive !important; }
.ql-font-crimson-text { font-family: 'Crimson Text', serif !important; }
.ql-font-poppins { font-family: 'Poppins', sans-serif !important; }
.ql-font-montserrat { font-family: 'Montserrat', sans-serif !important; }
.ql-font-pt-sans { font-family: 'PT Sans', sans-serif !important; }
.ql-font-lexend { font-family: 'Lexend', sans-serif !important; }
.ql-font-georgia { font-family: 'Georgia', serif !important; }
.ql-font-arial { font-family: 'Arial', sans-serif !important; }
.ql-font-helvetica { font-family: 'Helvetica', sans-serif !important; }
.ql-font-times-new-roman { font-family: 'Times New Roman', serif !important; }
.ql-font-lato { font-family: 'Lato', sans-serif !important; }
.ql-font-raleway { font-family: 'Raleway', sans-serif !important; }
.ql-font-oswald { font-family: 'Oswald', sans-serif !important; }
.ql-font-nunito { font-family: 'Nunito', sans-serif !important; }
.ql-font-quicksand { font-family: 'Quicksand', sans-serif !important; }
.ql-font-bebas-neue { font-family: 'Bebas Neue', cursive !important; }
.ql-font-work-sans { font-family: 'Work Sans', sans-serif !important; }
.ql-font-karla { font-family: 'Karla', sans-serif !important; }
.ql-font-courier-new { font-family: 'Courier New', monospace !important; }

/* ===== Mobile Responsive Heading Sizes ===== */
@media (max-width: 768px) {
  .divi-builder-renderer [data-module-type="text"] *,
  .divi-builder-renderer [data-module-type="heading"] *,
  .website-preview [data-module-type="text"] *,
  .website-preview [data-module-type="heading"] *,
  [data-module-type="text"] h1,
  [data-module-type="text"] h2,
  [data-module-type="text"] h3,
  [data-module-type="text"] h4,
  [data-module-type="text"] h5,
  [data-module-type="text"] h6,
  [data-module-type="text"] p,
  [data-module-type="text"] span,
  [data-module-type="heading"] h1,
  [data-module-type="heading"] h2,
  [data-module-type="heading"] h3,
  [data-module-type="heading"] h4,
  [data-module-type="heading"] h5,
  [data-module-type="heading"] h6,
  [data-module-type="heading"] p,
  [data-module-type="heading"] span {
    font-size: inherit !important;
  }

  .divi-builder-renderer [data-module-type="text"],
  .divi-builder-renderer [data-module-type="heading"],
  .website-preview [data-module-type="text"],
  .website-preview [data-module-type="heading"],
  [data-module-type="text"],
  [data-module-type="heading"] {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .divi-builder-renderer [data-module-type] h1,
  .website-preview [data-module-type] h1,
  [data-module-type="text"] h1,
  [data-module-type="heading"] h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .divi-builder-renderer [data-module-type] h2,
  .website-preview [data-module-type] h2,
  [data-module-type="text"] h2,
  [data-module-type="heading"] h2 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  .divi-builder-renderer [data-module-type] h3,
  .website-preview [data-module-type] h3,
  [data-module-type="text"] h3,
  [data-module-type="heading"] h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  .divi-builder-renderer [data-module-type] h4,
  .website-preview [data-module-type] h4,
  [data-module-type="text"] h4,
  [data-module-type="heading"] h4 {
    font-size: 1.125rem !important;
    line-height: 1.35 !important;
  }

  .divi-builder-renderer [data-module-type] h5,
  .divi-builder-renderer [data-module-type] h6,
  .website-preview [data-module-type] h5,
  .website-preview [data-module-type] h6,
  [data-module-type="text"] h5,
  [data-module-type="text"] h6,
  [data-module-type="heading"] h5,
  [data-module-type="heading"] h6 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .ql-size-72px { font-size: 32px !important; line-height: 1.15 !important; }
  .ql-size-64px { font-size: 28px !important; line-height: 1.15 !important; }
  .ql-size-56px { font-size: 26px !important; line-height: 1.2 !important; }
  .ql-size-48px { font-size: 24px !important; line-height: 1.2 !important; }
  .ql-size-42px { font-size: 22px !important; line-height: 1.25 !important; }
  .ql-size-36px { font-size: 20px !important; line-height: 1.25 !important; }
  .ql-size-32px { font-size: 18px !important; line-height: 1.3 !important; }
  .ql-size-28px { font-size: 16px !important; line-height: 1.35 !important; }
  .ql-size-24px { font-size: 16px !important; line-height: 1.4 !important; }

  .website-header-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px;
  }

  .gallery-scroll-row,
  .gallery-scroll-row.flex,
  .gallery-module .gallery-scroll-row,
  .divi-builder-renderer .gallery-scroll-row,
  .divi-builder-renderer .flex.gallery-scroll-row,
  [data-module-type="gallery"] .gallery-scroll-row {
    overflow: hidden !important;
    width: 100% !important;
  }

  .gallery-slide-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform 0.4s ease;
  }

  .gallery-module,
  [data-module-type="gallery"] > div {
    position: relative !important;
    overflow: hidden !important;
  }

  .gallery-image-container {
    flex-shrink: 0 !important;
  }

}

.gallery-scroll-row {
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.gallery-slide-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  transition: transform 0.4s ease;
}

.gallery-slide-track > .gallery-image-container {
  flex-shrink: 0;
}

.gallery-module,
[data-module-type="gallery"] > div {
  position: relative !important;
  overflow: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

.gallery-nav-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 10px 0 !important;
  width: 100% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  position: static !important;
}

.gallery-nav-bar button {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.gallery-nav-bar button:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
}

.gallery-nav-bar span {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  user-select: none !important;
}