/* Popup Styles - Updated with higher specificity */
html body .popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  overflow: hidden !important;
}

html body .popup-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

html body .popup-container {
  position: relative !important;
  max-width: 90% !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3) !important;
  background-color: #fff !important;
  z-index: 1000000 !important;
}

html body .popup-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-y: auto !important;
  max-height: 90vh !important;
  position: relative !important;
}

html body .popup-image {
  width: 100% !important;
  max-width: 600px !important;
  height: auto !important;
  display: block !important;
}

html body .popup-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: pointer !important;
  z-index: 1000001 !important;
  transition: background-color 0.3s ease !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

html body .popup-close:hover {
  background-color: #fff !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

html body .popup-close::before,
html body .popup-close::after {
  content: "" !important;
  position: absolute !important;
  width: 15px !important;
  height: 2px !important;
  background-color: #333 !important;
}

html body .popup-close::before {
  transform: rotate(45deg) !important;
}

html body .popup-close::after {
  transform: rotate(-45deg) !important;
}

/* Navigation arrows */
html body .popup-nav-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: pointer !important;
  z-index: 1000001 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

html body .popup-nav-arrow:hover {
  background-color: #fff !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

html body .popup-nav-arrow.prev {
  left: 10px !important;
}

html body .popup-nav-arrow.next {
  right: 10px !important;
}

html body .popup-nav-arrow::before {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-top: 2px solid #333 !important;
  border-right: 2px solid #333 !important;
}

html body .popup-nav-arrow.prev::before {
  transform: rotate(-135deg) !important;
  margin-left: 4px !important;
}

html body .popup-nav-arrow.next::before {
  transform: rotate(45deg) !important;
  margin-right: 4px !important;
}

/* Image counter */
html body .popup-counter {
  position: absolute !important;
  bottom: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  padding: 5px 10px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  z-index: 1000001 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

html body .popup-navigation {
  display: flex !important;
  justify-content: center !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

html body .popup-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #ccc !important;
  margin: 0 5px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

html body .popup-dot.active {
  background-color: #d32838 !important;
}

/* CRITICAL: Footer and Background Scroll Prevention */
html.popup-active,
html.popup-active body {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Specifically target footer to prevent scrolling */
html.popup-active body footer,
body.popup-active footer,
html.popup-active footer {
  position: fixed !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Prevent all page elements from scrolling */
html.popup-active body *:not(.popup-overlay):not(.popup-overlay *),
body.popup-active *:not(.popup-overlay):not(.popup-overlay *) {
  pointer-events: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Specifically prevent footer container from scrolling */
html.popup-active .footer-container,
body.popup-active .footer-container,
html.popup-active .footer-content,
body.popup-active .footer-content,
html.popup-active .footer-section,
body.popup-active .footer-section {
  position: fixed !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Re-enable pointer events ONLY for popup elements */
html body .popup-overlay,
html body .popup-overlay *,
html.popup-active .popup-overlay,
html.popup-active .popup-overlay *,
body.popup-active .popup-overlay,
body.popup-active .popup-overlay * {
  pointer-events: auto !important;
}

/* Hide all scrollbars when popup is active */
html.popup-active::-webkit-scrollbar,
body.popup-active::-webkit-scrollbar,
html.popup-active *::-webkit-scrollbar,
body.popup-active *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.popup-active,
body.popup-active,
html.popup-active *,
body.popup-active * {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Prevent touch scrolling on mobile */
html.popup-active,
body.popup-active {
  touch-action: none !important;
  -webkit-overflow-scrolling: none !important;
}

/* Additional footer-specific fixes */
html.popup-active body .main-wrapper,
body.popup-active .main-wrapper {
  position: fixed !important;
  overflow: hidden !important;
}

html.popup-active body header,
body.popup-active header,
html.popup-active body main,
body.popup-active main {
  position: fixed !important;
  overflow: hidden !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  html body .popup-container {
    max-width: 95% !important;
  }

  html body .popup-nav-arrow {
    width: 35px !important;
    height: 35px !important;
  }

  /* Extra mobile footer prevention */
  html.popup-active body,
  body.popup-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 480px) {
  html body .popup-nav-arrow {
    width: 30px !important;
    height: 30px !important;
  }

  html body .popup-nav-arrow::before {
    width: 10px !important;
    height: 10px !important;
  }

  html body .popup-container {
    max-width: 98% !important;
  }
}