/*
 * TravelHuge — Mobile Fix v2.0
 * Comprehensive responsive/mobile fixes for all pages
 * ─────────────────────────────────────────────────────
 * Issues fixed:
 *  1. Mobile menu — close button, hamburger animation, backdrop
 *  2. Hero section — layout, padding, overflow clipping
 *  3. Notification panel — overflow on small screens
 *  4. Toast — responsive width
 *  5. iOS safe-area — FAB, scroll-top, chat window
 *  6. Form inputs — prevent zoom on iOS (font-size ≥ 16px)
 *  7. Hero stats — overflow on small screens
 *  8. Hero H1 accent-line — letter-spacing fix
 *  9. Auth modal — scroll on small screens
 * 10. General overflow-x prevention
 * 11. Hamburger X animation when menu is open
 * 12. Nav bell — overflow on mobile
 * 13. Section containers — even padding
 * 14. Cursor — disable custom cursor on touch devices
 */

/* ─── 1. MOBILE MENU ──────────────────────────────── */

/* Close button inside mobile menu */
.mobile-close-btn {
  position: absolute;
  top: 28px;
  right: 28px;
  background: rgba(201,169,110,0.08);
  border: 1px solid rgba(201,169,110,0.25);
  color: var(--gold, #c9a96e);
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  z-index: 10;
  font-family: 'DM Sans', sans-serif;
  line-height: 1;
}
.mobile-close-btn:hover,
.mobile-close-btn:active {
  background: rgba(201,169,110,0.2);
  border-color: var(--gold, #c9a96e);
  transform: rotate(90deg);
}

/* Mobile menu relative positioning for close btn */
.mobile-menu {
  position: relative !important;
}

/* Hamburger → X animation */
.hamburger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile menu backdrop overlay (close on tap outside) */
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 899;
  background: transparent;
}
.mobile-menu-backdrop.open {
  display: block;
}

/* Smooth open/close animation for mobile menu */
.mobile-menu {
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  opacity: 0;
  transform: translateX(-16px);
}
.mobile-menu.open {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Sign In / Sign Up buttons inside mobile menu */
.mobile-menu-auth {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.mobile-menu-auth .btn-gold,
.mobile-menu-auth .btn-ghost {
  flex: 1;
  justify-content: center;
  font-size: 12px !important;
  padding: 12px 16px !important;
}


/* ─── 2. HERO SECTION ──────────────────────────────── */
@media (max-width: 1100px) {
  /* Override inline styles on hero-left and hero-right */
  .hero-left[style] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hero-right[style] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
  }
  /* Give the form full width on tablet */
  .hero-form-card {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* Hero must NOT clip absolutely-positioned dropdowns */
  #hero {
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Hero left — tighter top padding, use container padding for sides */
  .hero-left[style] {
    padding: 100px 0 32px 0 !important;
  }

  /* Hero right — no side padding, card is full-width */
  .hero-right[style] {
    padding: 0 0 60px 0 !important;
    align-items: stretch;
  }
  .hero-form-card {
    border-radius: 20px !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Hero headline letter-spacing fix */
  .hero-h1 .accent-line {
    letter-spacing: 4px !important;
    font-size: 11px !important;
  }

  /* Hero stats — compact on mobile */
  .hero-stats {
    gap: 0;
    justify-content: space-between;
  }
  .hs-item {
    padding: 0 12px !important;
  }
  .hs-item:first-child {
    padding-left: 0 !important;
  }

  /* Hero globe canvas — hide on mobile for performance */
  #globe-canvas {
    display: none !important;
  }

  /* Hero eyebrow pill — wrap if needed */
  .hero-eyebrow {
    flex-wrap: wrap;
    font-size: 10px !important;
    padding: 6px 14px 6px 12px !important;
  }

  /* Hero actions — stack nicely */
  .hero-actions {
    gap: 10px !important;
    margin-bottom: 36px !important;
  }
  .hero-actions .btn-gold,
  .hero-actions .btn-ghost {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .hero-left[style] {
    padding-top: 88px !important;
  }
  .hs-item {
    padding: 0 8px !important;
  }
  .hero-sub {
    font-size: 14px !important;
    margin-bottom: 28px !important;
  }
}


/* ─── 3. NOTIFICATION PANEL ───────────────────────── */
@media (max-width: 420px) {
  #notificationsPanel {
    min-width: unset !important;
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
  }
}
@media (max-width: 768px) {
  #notificationsPanel {
    min-width: unset !important;
    width: min(340px, calc(100vw - 32px)) !important;
    right: 16px !important;
  }
}


/* ─── 4. TOAST ────────────────────────────────────── */
@media (max-width: 480px) {
  #toast {
    right: 12px !important;
    left: 12px !important;
    min-width: unset !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ─── 5. iOS SAFE AREA — FAB / SCROLL-TOP ─────────── */
#chat-fab {
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
}
#scroll-top {
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}
#chat-win {
  bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 768px) {
  #chat-win {
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    max-height: 60vh;
  }
}


/* ─── 6. FORM INPUTS — prevent iOS zoom (≥16px) ───── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
    /* 16px prevents iOS from auto-zooming on focus */
  }
  /* But keep labels and small UI text small */
  .field label,
  .auth-field label,
  .bk-field-lbl {
    font-size: 10px !important;
  }
}


/* ─── 7. AUTH MODAL — scroll on small screens ──────── */
@media (max-width: 480px) {
  .auth-box {
    width: 96% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }
  .auth-header-bar,
  .auth-tabs,
  .auth-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .auth-tabs {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .auth-title {
    font-size: 24px !important;
  }
}


/* ─── 8. GENERAL OVERFLOW-X PREVENTION ──────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Prevent any direct child of body from overflowing */
body > * {
  max-width: 100vw;
}

/* Wide tables — horizontal scroll wrapper */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}


/* ─── 9. CURSOR — disable custom cursor on touch ───── */
@media (hover: none) and (pointer: coarse) {
  /* Touch device — restore default cursor */
  body {
    cursor: auto !important;
  }
  #cursor,
  #cursor-ring {
    display: none !important;
  }
  /* Restore pointer on interactive elements */
  a, button, [onclick], [role="button"],
  input[type="submit"], input[type="button"],
  select, label, .cursor-grow {
    cursor: pointer !important;
  }
  input[type="text"], input[type="email"],
  input[type="tel"], input[type="password"],
  textarea {
    cursor: text !important;
  }
}


/* ─── 10. NAV — notification bell on mobile ─────────── */
@media (max-width: 768px) {
  /* Keep only the bell and hamburger in nav on mobile */
  nav .nav-right > div:first-child {
    /* notification bell container */
    position: relative;
  }
  /* Shrink nav height on very small screens */
  nav {
    height: 64px !important;
    padding: 0 16px !important;
  }
  .mobile-menu {
    padding-top: 84px !important;
  }
}


/* ─── 11. SECTION PADDING — breathing room on mobile ── */
@media (max-width: 768px) {
  section {
    padding-left: 0;
    padding-right: 0;
  }
  /* Plan My Trip section card */
  #plan-my-trip > .container > div {
    border-radius: 20px !important;
  }
}


/* ─── 12. HERO BOOKING WIDGET (bk tabs / panels) ────── */
@media (max-width: 480px) {
  /* Booking tab buttons */
  .bk-tab-btn {
    font-size: 10px !important;
    padding: 14px 4px !important;
    gap: 4px !important;
  }

  /* Booking field rows inside hero form */
  .bk-field-row {
    flex-direction: column !important;
  }

  /* Swap city row */
  #bk-swap-btn {
    transform: rotate(90deg);
  }
}


/* ─── 13. FLIGHT TRACKER — map on mobile ────────────── */
@media (max-width: 768px) {
  #ft-map {
    height: 260px !important;
  }
  #ft-search-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #ft-search-row input,
  #ft-search-row button {
    width: 100% !important;
  }
}


/* ─── 14. FOOTER — prevent overflow ─────────────────── */
@media (max-width: 768px) {
  .footer-bottom {
    padding: 16px 20px !important;
  }
  footer .container {
    padding: 0 20px !important;
  }
}


/* ─── 15. MODALS — proper sizing on mobile ───────────── */
@media (max-width: 768px) {
  /* Insurance CTA modal */
  .ins-card {
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }
  /* Destination enquiry modal (bottom sheet on mobile) */
  .deq-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
  }
  /* Welcome modal */
  #welcome-modal-inner {
    padding: 28px 20px !important;
  }
}


/* ─── 16. PACKAGES / DESTINATIONS CAROUSEL ──────────── */
@media (max-width: 768px) {
  .pkg-carousel,
  .dest-carousel {
    padding-bottom: 16px !important;
  }
  .pkg-nav-prev,
  .dest-carousel-prev {
    left: 4px !important;
  }
  .pkg-nav-next,
  .dest-carousel-next {
    right: 4px !important;
  }
}


/* ─── 17. BOOKING WIDGET TABS — hero form ───────────── */
@media (max-width: 360px) {
  #bk-tabs button {
    font-size: 9px !important;
    letter-spacing: 0.8px !important;
    padding: 14px 4px !important;
  }
}


/* ─── 18. STATS COUNTER ROW ─────────────────────────── */
@media (max-width: 380px) {
  .hs-num {
    font-size: 22px !important;
  }
  .hs-lbl {
    font-size: 8px !important;
    letter-spacing: 1.5px !important;
  }
  .hs-item {
    padding: 0 6px !important;
  }
}


/* ─── 19. CONTACT GRID / ABOUT ───────────────────────── */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .about-layout {
    gap: 28px !important;
  }
}


/* ─── 20. BOOK.HTML / FLIGHTS.HTML / HOTELS.HTML ──────── */
@media (max-width: 768px) {
  /* Travelpayouts widget overflow */
  tp-widget-universal,
  tp-widget-hotel-search,
  tp-widget-flight-search {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* .container universal fix */
  .container {
    padding: 0 16px !important;
  }
}


/* ─── 21. PLAN MY TRIP FORM — chip groups ────────────── */
@media (max-width: 480px) {
  #hf-purpose-chips,
  .hf-chips-group {
    gap: 6px !important;
  }
  .hf-chip {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
}


/* ─── 22. SWIPE TO SIGN IN/UP ────────────────────────── */
@media (max-width: 480px) {
  .swipe-container {
    height: 48px !important;
  }
  .swipe-label {
    font-size: 11px !important;
  }
}


/* ─── 23. JOURNAL PAGE ───────────────────────────────── */
@media (max-width: 768px) {
  .j-nav {
    flex-wrap: wrap;
    height: auto !important;
    padding: 12px 16px !important;
  }
  .j-nav-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .j-hero-h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
}


/* ─── 24. ADMIN PANEL — table scroll ────────────────── */
@media (max-width: 768px) {
  .admin-table-wrap,
  #visitor-table,
  #bookings-table,
  #suppliers-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ─── 25. PAGE-WIDE FIXES ────────────────────────────── */

/* Remove tap highlight flash on iOS */
* {
  -webkit-tap-highlight-color: rgba(201, 169, 110, 0.15);
}

/* Smooth scrolling on iOS */
html {
  -webkit-overflow-scrolling: touch;
}

/* Prevent text size adjust on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Focus outline — gold for accessibility */
:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.6) !important;
  outline-offset: 2px !important;
}

/* Buttons — min touch target 44×44px */
@media (max-width: 768px) {
  button, [role="button"], a.btn-gold, a.btn-ghost, a.btn-outline-gold {
    min-height: 44px;
  }
  /* Exception: small icon buttons */
  .hamburger, .mobile-close-btn,
  .auth-close, .chat-hd-close {
    min-height: unset;
  }
}


/* ─── 26. BOOKING WIDGET — From/To grid fix on mobile ── */
@media (max-width: 480px) {
  /* From/To/Swap — stack vertically on very small screens */
  #bk-panel-flights > div > div[style*="grid-template-columns:1fr 44px 1fr"],
  #bk-panel-hotels > div > div[style*="grid-template-columns:1fr 44px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Swap button repositioned */
  .bk-swap-btn {
    position: static !important;
    transform: rotate(90deg) !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    display: flex !important;
  }
  /* Panel padding tighter */
  #bk-panel-flights,
  #bk-panel-hotels {
    padding: 18px 16px 20px !important;
  }
  /* Date + pax grid */
  #bk-panel-flights div[style*="grid-template-columns:1fr 1fr"],
  #bk-panel-hotels div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Booking CTA full width */
  .bk-cta-btn {
    padding: 14px !important;
    font-size: 12.5px !important;
  }
  .bk-input, .bk-select {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ─── 27. HERO CONTAINER — display:contents fix ────────── */
/* The hero .container uses display:contents which causes
   some browsers to lose padding context on mobile */
@media (max-width: 768px) {
  #hero .container[style*="display:contents"] {
    display: contents !important;
  }
  #hero .hero-left {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #hero .hero-right {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-form-card[style] {
    border-radius: 24px !important;
    margin: 0 !important;
  }
}

/* ─── 28. PACKAGES SECTION — section padding ────────────── */
@media (max-width: 768px) {
  #packages .container,
  #destinations .container,
  #services .container,
  #testimonials .container,
  #about .container,
  #contact .container,
  #flight-tracker .container,
  #plan-my-trip .container {
    padding: 0 16px !important;
  }
}

/* ─── 29. FIXED MODALS — centering on mobile ────────────── */
@media (max-width: 480px) {
  /* WHO WE ARE modal */
  #who-we-are > div,
  .ins-card {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 24px 16px !important;
  }
}

/* ─── 30. PHONE CODE SELECTOR — mobile ──────────────────── */
@media (max-width: 480px) {
  .phone-code-sel {
    min-width: 72px !important;
    font-size: 12px !important;
    padding: 13px 6px !important;
  }
  .intl-phone-wrap input[type="tel"] {
    font-size: 16px !important;
  }
}

/* ─── 31. PLAN MY TRIP — form card ──────────────────────── */
@media (max-width: 768px) {
  #plan-my-trip > .container > .reveal > div {
    padding: 28px 20px 32px !important;
    border-radius: 20px !important;
  }
  .hf-btn-row {
    flex-wrap: wrap;
  }
  .hf-btn-row .btn-gold {
    flex: 1;
    justify-content: center;
  }
}

/* ─── 32. FLIGHT TRACKER — section layout ───────────────── */
@media (max-width: 768px) {
  #flight-tracker {
    padding: 60px 0 !important;
  }
  #ft-main-layout {
    flex-direction: column !important;
    gap: 16px !important;
  }
  #ft-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─── 33. TOUR PACKAGES (fixed price) — card grid ───────── */
@media (max-width: 480px) {
  .tp-grid {
    grid-template-columns: 1fr !important;
  }
  .tp-card {
    max-width: 100% !important;
  }
}

/* ─── 34. TESTIMONIALS — card padding on mobile ─────────── */
@media (max-width: 480px) {
  .testi-card {
    padding: 24px 18px !important;
  }
}

/* ─── 35. SIGN IN / AUTH MODAL — swipe thumb ────────────── */
@media (max-width: 480px) {
  .swipe-container {
    height: 50px !important;
    border-radius: 100px !important;
  }
  .swipe-thumb {
    width: 42px !important;
    height: 42px !important;
    top: 4px !important;
  }
}


/* ─── 36. GLOBAL INPUT FONT-SIZE — prevent iOS zoom ────────
   Note: inputs without type="" don't match input[type="text"]
   This broader rule catches all inputs ──────────────────── */
@media (max-width: 768px) {
  input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .sg-input,
  .bk-input,
  .auth-field input,
  .field input,
  .hf-input,
  .cnt-input {
    font-size: 16px !important;
    /* Prevents iOS Safari from auto-zooming on focus */
  }
  select,
  .sg-select,
  .bk-select {
    font-size: 16px !important;
  }
}


/* ─── 37. BOOK.HTML — extra mobile polish ───────────────── */
@media (max-width: 768px) {
  /* Swap button in search grid */
  .swap-btn {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Tab row scroll on mobile */
  .tab-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tab-row::-webkit-scrollbar { display: none; }
}

@media (max-width: 480px) {
  /* Route summary compact */
  #route-summary {
    font-size: 12px !important;
  }
  .rs-route {
    gap: 8px !important;
  }
  /* Results area padding */
  #results-area .container {
    padding: 0 12px !important;
  }
}


/* ─── 38. FLIGHTS.HTML — search band ───────────────────── */
@media (max-width: 768px) {
  .search-band-inner {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .sb-field {
    min-width: unset !important;
    flex: 1 1 calc(50% - 8px) !important;
  }
  .sb-field-full {
    flex: 1 1 100% !important;
  }
}


/* ─── 39. HOTELS.HTML — hotel cards mobile ──────────────── */
@media (max-width: 640px) {
  .hotel-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .hotel-card {
    max-width: 100% !important;
  }
}


/* ─── 40. JOURNAL.HTML — article grid ──────────────────── */
@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-card-featured {
    grid-column: 1 !important;
  }
}


/* ─── LOGO RESPONSIVE ───────────────────────────────── */
.nav-logo svg { height: 44px; width: auto; }

@media (max-width: 768px) {
  .nav-logo svg { height: 36px; }
  .th-logo-wrap { height: 36px !important; }
}

@media (max-width: 480px) {
  .nav-logo svg { height: 30px; }
  .th-logo-wrap { height: 30px !important; }
}

/* ─── CDD MOBILE ADJUSTMENTS ────────────────────────── */
@media (max-width: 480px) {
  .cdd-btn {
    padding: 12px 12px !important;
    font-size: 12px !important;
  }
  .cdd-menu {
    border-radius: 10px !important;
  }
}