/**
 * Modal Components
 * Modal dialogs, overlays, and popup animations
 * Extracted from components.css for better organization
 */

/* ============================================================================
   MODAL ANIMATIONS
   ============================================================================ */

/**
 * Modal Animation System
 * Smooth modal entrance and exit animations
 */
.animate-modal-slide-in {
  animation: modal-slide-in 0.2s ease-out;
}

.animate-modal-slide-out {
  animation: modal-slide-out 0.2s ease-out;
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-slide-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
}

/* ============================================================================
   ENHANCED MODAL STYLING FROM CUSTOM.CSS
   ============================================================================ */

/* Enhanced modal backdrop - Professional & Darker */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--transition-base);
}

@media (hover: none) and (pointer: coarse) {
  .modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Enhanced modal styling */
.modal {
  background: var(--surface-raised, white);
  border-radius: var(--radius-modal, var(--border-radius-lg));
  box-shadow: var(--shadow-popover, var(--shadow-xl));
  border: 1px solid var(--border-ui, #cbd5e1);
  transform: scale(0.95);
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.dark .modal {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.modal.show {
  transform: scale(1);
}

/* Modal fade effects */
.modal-fade-out {
  animation: fadeOut 0.3s ease-in-out;
}

/* ============================================================================
   MODAL RESPONSIVE BEHAVIOR
   ============================================================================ */

/* Booking Gate Modal Styles — flat dim sibling pattern (no parent blur) */
.booking-gate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: var(--z-maximum);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  opacity: 0;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
}

.booking-gate-overlay.show {
  opacity: 1;
}

.booking-gate-modal {
  background: var(--surface-raised, white);
  border-radius: var(--radius-modal, 14px);
  box-shadow: var(--shadow-popover, var(--shadow-xl));
  max-width: 380px;
  width: 100%;
  max-height: min(90dvh, calc(100dvh - 2rem));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(0.75rem) scale(0.98);
  transition: transform var(--transition-base, 0.2s ease);
  position: relative;
}

.booking-gate-modal.show {
  transform: translateY(0) scale(1);
}

.dark .booking-gate-modal {
  background: var(--color-gray-800);
  color: var(--color-gray-50);
}

/* Override global dark mode blue text rules for booking gate modal */
/* Light mode: blue-600 */
.booking-gate-modal .text-blue-600 {
  color: rgb(37, 99, 235) !important; /* blue-600 */
}

/* Dark mode: blue-400 (lighter for better contrast) */
html.dark .booking-gate-modal .text-blue-600,
html.dark .booking-gate-modal .text-blue-400,
.dark .booking-gate-modal .text-blue-600,
.dark .booking-gate-modal .text-blue-400 {
  color: rgb(96, 165, 250) !important; /* blue-400 for dark mode */
}

/* Phone: bottom sheet (wins over inline align-items from BookingGateModal.js) */
@media (max-width: 767px) {
  .modal {
    margin: 1rem;
    border-radius: var(--radius-modal, var(--border-radius-lg));
  }

  .booking-gate-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }

  .booking-gate-modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem)) !important;
    border-radius: var(--radius-sheet, 1.25rem) var(--radius-sheet, 1.25rem) 0 0 !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }

  .booking-gate-modal.show {
    transform: translateY(0);
  }

  #booking-gate-verification-modal {
    align-items: flex-end !important;
    padding: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }

  #booking-gate-verification-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }
}

/* ConfirmModal.js overlays — native sheet on phone */
#custom-confirm-modal.confirm-modal-overlay {
  box-sizing: border-box;
  background-color: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 767px) {
  #custom-confirm-modal.confirm-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }

  #custom-confirm-modal .confirm-modal-panel {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================================
   MODAL ACCESSIBILITY
   ============================================================================ */

/* Modal focus management */
.modal:focus {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: -2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .modal {
    border: 3px solid currentColor;
  }

  .modal-backdrop {
    background: rgb(0 0 0 / 70%);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .modal {
    transition: none;
  }

  .modal-backdrop {
    transition: none;
  }

  .modal-fade-out {
    animation: none;
  }
}

/* ============================================================================
   SHARED OVERLAY MODAL (logout confirm, host action dialogs, payment modal)
   Use with js/shared/ui/overlayModal.js — open adds .is-open, close animates out.

   Safe-area SOT (do not re-apply via inline style= on overlays/panels):
   - ≥768: padding on the overlay root (max(1rem, inset))
   - ≤767: L/R inset on overlay; bottom inset on __panel / safe-area panel
   Overlays that still toggle .hidden without overlayModal.js: add
   .swiftspot-safe-area-overlay (+ optional __panel) for the same inset recipe
   without opacity/enter animation.
   ============================================================================ */

/* Desktop / tablet: overlay owns all four insets (single application). */
.swiftspot-overlay-modal,
.swiftspot-safe-area-overlay {
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.swiftspot-overlay-modal {
  /* Above site tab (z-40) and any content stacking traps; Tailwind z-50 is not enough. */
  z-index: var(--z-modal, 1040) !important;
  opacity: 0;
  transition: opacity var(--transition-base, 0.2s ease);
}

#emailSupportModal.swiftspot-safe-area-overlay {
  z-index: var(--z-modal, 1040) !important;
}

.swiftspot-overlay-modal.is-open {
  opacity: 1;
}

/*
 * Open overlays: hide site tab paint + hits so sheet CTAs are fully free.
 * visibility:hidden keeps box size — mobile-bottom-nav-offset.js intentionally
 * ignores visibility so clearance/iOS chrome do not tear down mid-dialog.
 * (Never animate opacity on the bar here; that caused open/close flicker.)
 */
body:has(.swiftspot-overlay-modal.is-open) #mobile-bottom-nav,
body:has(.swiftspot-overlay-modal.swiftspot-overlay-modal--boot-open) #mobile-bottom-nav {
  pointer-events: none !important;
  visibility: hidden !important;
}

.swiftspot-overlay-modal__backdrop {
  opacity: 0;
  transition: opacity var(--transition-base, 0.2s ease);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.swiftspot-overlay-modal.is-open .swiftspot-overlay-modal__backdrop {
  opacity: 1;
}

.swiftspot-overlay-modal__panel {
  transform: scale(0.96) translateY(6px);
  opacity: 0;
  /* Soft viewport cap; pages that need scroll should set overflow-y-auto (or a scrollable body region). */
  max-height: min(90dvh, calc(100dvh - 1.5rem));
  transition:
    transform var(--transition-slow, 0.3s ease),
    opacity var(--transition-base, 0.2s ease);
}

.swiftspot-overlay-modal.is-open .swiftspot-overlay-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Phone: dock as bottom sheets. Tab bar is hidden while open, so dock to home indicator only. */
@media (max-width: 767px) {
  .swiftspot-overlay-modal,
  .swiftspot-safe-area-overlay {
    padding: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-bottom: 0 !important;
  }

  .swiftspot-overlay-modal {
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .swiftspot-overlay-modal__panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    max-height: min(
      92dvh,
      calc(100dvh - env(safe-area-inset-top, 0px) - 0.75rem)
    ) !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }

  .swiftspot-overlay-modal.is-open .swiftspot-overlay-modal__panel {
    transform: translateY(0);
  }

  .swiftspot-safe-area-overlay__panel {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    margin-bottom: 0;
  }
}

/*
 * Fallback if is-open is missing (legacy toggle): keep panels clear of a still-visible tab.
 * Prefer panel margin so the flex-end edge holds without fighting opacity enter animation.
 */
@media (max-width: 767px) {
  body:has(#mobile-bottom-nav) .swiftspot-overlay-modal:not(.is-open):not(.hidden) .swiftspot-overlay-modal__panel,
  body:has(#mobile-bottom-nav) .swiftspot-safe-area-overlay:not(.hidden) .swiftspot-safe-area-overlay__panel {
    margin-bottom: max(
      var(--swiftspot-mobile-bottom-clearance, 5.5rem),
      var(--swiftspot-mobile-bottom-nav-offset, 0px),
      var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem)
    ) !important;
  }
}

/* Host tablet (768–1023): tab bar still active; hide while modal open (global rule). */
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(#mobile-bottom-nav.mobile-bottom-nav--host-tablet)
    .swiftspot-overlay-modal:not(.is-open):not(.hidden)
    .swiftspot-overlay-modal__panel {
    margin-bottom: max(
      1rem,
      var(--swiftspot-mobile-bottom-clearance, 5.5rem),
      var(--swiftspot-mobile-bottom-nav-offset, 0px),
      var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem)
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swiftspot-overlay-modal,
  .swiftspot-overlay-modal__backdrop,
  .swiftspot-overlay-modal__panel {
    transition: none !important;
  }

  .swiftspot-overlay-modal__panel {
    transform: none !important;
  }
}

/* Dark overlay/text contrast: themes/dark-mode.css */