/* ==============================================================================
   Core Stylesheet & Responsive Device Matrix Handlers — EstateMind (املاک‌یار)
   ==============================================================================
   Architecture Guidelines & Governance:
     - iOS Safari Anti-Zoom Enforcement (16px minimum font size on touch inputs)
     - Dynamic Viewport Height (dvh with --vh fallback) for mobile browser chrome
     - Responsive SweetAlert2 modal constraints (desktop clamped to 420px max-width)
     - Custom scrollbars, glassmorphism, 3D card flips and tour spotlight engine
     - Strict isolation for print factsheets and ticket chatbot collision avoidance
   ============================================================================== */

* {
  font-family: 'Vazirmatn', sans-serif !important;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* Persian Numerical Digits Styling */
.nums-fa {
  font-feature-settings: 'ss01';
}

/* ==============================================================================
   1. iOS Safari Anti-Zoom & Touch Ergonomics
   ============================================================================== */

input, select, textarea {
  font-size: 16px !important; /* Prevents auto-zoom on iOS Safari when tapping inputs */
  touch-action: manipulation;
}

button, a {
  touch-action: manipulation;
  user-select: none;
}

.smooth-scroll,
.overflow-y-auto,
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Dynamic Viewport Height for Mobile Browser Toolbars */
html, body {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}

@supports (min-height: 100dvh) {
  html, body {
    min-height: 100dvh;
  }
}

/* ==============================================================================
   2. Custom Scrollbar Layer
   ============================================================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.custom-chat-scroll::-webkit-scrollbar {
  width: 4px;
}
.custom-chat-scroll::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 4px;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* PWA / iPhone Notch & Safe Areas */
.safe-pb {
  padding-bottom: env(safe-area-inset-bottom, 1rem);
}
.safe-pt {
  padding-top: env(safe-area-inset-top, 0.5rem);
}

/* ==============================================================================
   3. SweetAlert2 Responsive Matrix & Dark Mode Constraints (Desktop Clamped)
   ============================================================================== */

.swal2-container {
  z-index: 2000000 !important;
  padding: 1rem !important;
}

/* Clamps popup width to prevent giant, stretched alerts on Desktop & High-Res screens */
.swal2-popup {
  width: 90% !important;
  max-width: 420px !important;
  margin: auto !important;
  box-sizing: border-box !important;
  border-radius: 1.5rem !important;
  padding: 1.75rem 1.25rem !important;
}

.swal2-icon {
  width: 3.75rem !important;
  height: 3.75rem !important;
  margin: 0.5rem auto 1rem auto !important;
}

.swal2-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  margin-bottom: 0.5rem !important;
}

.swal2-html-container {
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
  margin: 0.5rem 0 1.25rem 0 !important;
}

.swal2-actions {
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}

/* Dark Theme Overrides for SweetAlert2 */
.dark .swal2-popup {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85) !important;
}
.dark .swal2-title {
  color: #ffffff !important;
}
.dark .swal2-html-container {
  color: #94a3b8 !important;
}
.dark .swal2-input, 
.dark .swal2-textarea {
  background-color: #020617 !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
  border-radius: 0.75rem !important;
}

/* Mobile Constraints for Alert Modals (< 640px) */
@media (max-width: 640px) {
  .swal2-popup {
    width: 94% !important;
    max-width: 360px !important;
    padding: 1.25rem 1rem !important;
  }
  .swal2-title {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
  }
  .swal2-html-container {
    font-size: 0.82rem !important;
    margin: 0.5rem 0 1rem 0 !important;
  }
  .swal2-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.5rem !important;
    margin: 0.75rem auto 0 auto !important;
  }
  .swal2-confirm, 
  .swal2-cancel {
    width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
    border-radius: 0.75rem !important;
  }
}

/* ==============================================================================
   4. Modal Layers & Viewport Boundaries
   ============================================================================== */

div[id$="-modal"]:not(.hidden),
div[id*="modal"]:not(.hidden) {
  z-index: 1000000 !important;
}

@supports (height: 100dvh) {
  div[id$="-modal"]:not(.hidden),
  div[id*="modal"]:not(.hidden) {
    max-height: 100dvh !important;
  }
}

div[id$="-modal"] > div,
div[id*="modal"] > div {
  max-height: calc(100vh - 2rem) !important;
  max-height: calc(var(--vh, 1vh) * 100 - 2rem) !important;
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .custom-scrollbar,
  .overflow-y-auto {
    padding-bottom: 2rem !important;
  }
}

/* ==============================================================================
   5. Animations & Keyframes
   ============================================================================== */

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out forwards;
}

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

/* ==============================================================================
   6. Tour Spotlight & Onboarding Guidance Overrides
   ============================================================================== */

#tour-spotlight-container {
  pointer-events: none !important;
}

.tour-highlighted-el {
  position: relative !important;
  z-index: 999992 !important;
  pointer-events: auto !important;
}

#tour-spotlight-box {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 999990 !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.88), 0 0 35px rgba(16, 185, 129, 0.6) !important;
  border: 2.5px solid #10b981 !important;
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.3s ease,
              height 0.3s ease !important;
}

#tour-spotlight-box::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 1.6rem;
  border: 2px dashed #10b981;
  animation: tourBeaconPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none !important;
}

@keyframes tourBeaconPulse {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.06); }
}

#tour-popover-card {
  position: fixed !important;
  pointer-events: auto !important;
  z-index: 999995 !important;
  width: calc(100vw - 2rem) !important;
  max-width: 410px !important;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.9)) !important;
}

/* ==============================================================================
   7. 3D Flip Cards & Holographic Effects (NFC & Digital Showcase)
   ============================================================================== */

.perspective-1000 {
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.flip-card-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
}

.flip-card-3d.flipped {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 1.5rem;
}

.flip-card-front {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

.flip-card-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.hologram-card {
  position: relative;
  overflow: hidden;
}
.hologram-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(16, 185, 129, 0.2) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(30deg);
  pointer-events: none;
  transition: transform 0.8s ease;
}
.hologram-card:hover::after {
  transform: rotate(30deg) translate(20%, 20%);
}

.card-3d-lift {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.card-3d-lift:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.25);
}

/* ==============================================================================
   8. Audio Seek Sliders & Page Constraints
   ============================================================================== */

.voice-seek-slider {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  height: 4px;
  border-radius: 2px;
  outline: none;
}
.voice-seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  cursor: pointer;
}

body:has(.page-tickets) #chatbot-widget-root,
body[data-page="tickets"] #chatbot-widget-root,
.page-tickets #chatbot-widget-root {
  display: none !important;
}

/* Device Matrix Visibility */
.device-mobile .hide-on-mobile { display: none !important; }
.device-desktop .hide-on-desktop { display: none !important; }

/* ==============================================================================
   9. Print Media Styling (Official Property Dossiers & Factsheets)
   ============================================================================== */

@media print {
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  .no-print {
    display: none !important;
  }
  .print-box {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}