/* ============================================================================
 * PlusRent — Modal/Popup UX Enhancements
 * Add to main stylesheet (or load after main CSS)
 * ========================================================================== */

/* Lock background scroll WITHOUT layout shift on iOS */
html.is-modal-open {
  /* Compensate for scrollbar width to avoid jump on desktop */
  scrollbar-gutter: stable;
}

/* ============================================================================
 * HIDE FLOATING ELEMENTS WHEN ANY MODAL IS OPEN
 * Smooth opacity fade + JS auto-detection in burger-menu-fix.js
 * Add `data-hide-on-modal` to any custom element to opt into this behavior.
 * ========================================================================== */

/* Prepare elements for smooth transition */
.floating-call-btn,
.floating-contact-btn,
.float-btn,
.sticky-cta,
.fixed-cta,
.call-now-floating,
.suna-acum,
.btn-suna,
.btn-call-now,
.scroll-to-top,
.back-to-top,
.contact-popup-trigger,
.popup-trigger,
.chat-widget,
.whatsapp-float,
[data-hide-on-modal],
header a[href^="tel:"],
header .btn-main-color,
header .de-btn,
header .btn-call {
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

/* When ANY modal is open — smoothly fade out floating CTAs */
html.is-modal-open .floating-call-btn,
html.is-modal-open .floating-contact-btn,
html.is-modal-open .float-btn,
html.is-modal-open .sticky-cta,
html.is-modal-open .fixed-cta,
html.is-modal-open .call-now-floating,
html.is-modal-open .suna-acum,
html.is-modal-open .btn-suna,
html.is-modal-open .btn-call-now,
html.is-modal-open .scroll-to-top,
html.is-modal-open .back-to-top,
html.is-modal-open .contact-popup-trigger,
html.is-modal-open .popup-trigger,
html.is-modal-open .chat-widget,
html.is-modal-open .whatsapp-float,
html.is-modal-open [data-hide-on-modal] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* "Sună Acum" CTA in header — hide ONLY when burger menu opens */
/* (but keep tel: links INSIDE the menu visible — those are part of the menu) */
header.menu-open > a[href^="tel:"],
header.menu-open > div > a[href^="tel:"],
header.menu-open > .btn-main-color,
header.menu-open > div > .btn-main-color,
header.menu-open > .de-btn,
header.menu-open > .btn-call,
header.menu-open .header-cta,
header.menu-open .header-phone-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease-out;
}

/* Allow internal scroll containers to scroll smoothly, but contain overscroll */
.contact-popup-body,
.modal-body,
.price-calculator-content,
#de-sidebar,
#mainmenu,
.mobile-filter-content,
[data-scrollable] {
  overscroll-behavior: contain;          /* iOS Safari: no rubber-band leakage */
  -webkit-overflow-scrolling: touch;     /* iOS: native momentum scroll */
}

/* Visible focus ring for keyboard navigation inside modals (WCAG 2.4.7) */
[aria-modal="true"] :focus-visible {
  outline: 2px solid #f59e0b;            /* PlusRent gold */
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect reduced-motion preference (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .popup,
  #mainmenu,
  #de-sidebar,
  .mobile-filter-content,
  #contactPopup,
  #price-calculator-modal {
    transition: none !important;
    animation: none !important;
  }
}

/* Hidden but accessible — for inert fallback on older browsers */
[inert] {
  pointer-events: none;
  cursor: default;
  user-select: none;
}

/* iOS Safari fix: when keyboard opens inside modal, prevent body shift */
@supports (-webkit-touch-callout: none) {
  html.is-modal-open body {
    /* Prevent iOS keyboard from pushing modal off-screen */
    height: 100%;
    position: fixed;
    width: 100%;
  }
}

/* Optional: smooth fade-in when opening modals */
[aria-modal="true"] {
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes modalFadeIn {
    from { opacity: 1; transform: none; }
    to   { opacity: 1; transform: none; }
  }
}