/*
 * DTF Global Mobile Responsive Stylesheet
 * Loaded on every page via shared/gtm_head.php
 * Breakpoints: 768px (tablet), 480px (mobile)
 */

/* BASE */
* { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

/* Hamburger hidden on desktop */
.hamburger, .nav-toggle, .menu-toggle, .navbar-toggler { display: none; }
.mobile-only { display: none; }

/* ══════════════════════════════════════════
   TABLET  ≤ 768px
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

  body { font-size: 14px !important; overflow-x: hidden; }

  /* Hamburger button */
  .hamburger, .nav-toggle, .menu-toggle, .navbar-toggler {
    display: flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; cursor: pointer; background: transparent;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: #fff; font-size: 20px;
  }

  /* Navbar */
  .navbar, .nav-container, header nav {
    flex-wrap: wrap !important; padding: 10px 16px !important;
  }
  .nav-links, .navbar-menu, .nav-menu {
    display: none !important; width: 100% !important; flex-direction: column !important;
    background: #0d1117 !important; padding: 12px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
  .nav-links.open, .navbar-menu.open, .nav-menu.open,
  .nav-links.active, .navbar-menu.active { display: flex !important; }
  .nav-links a, .navbar-menu a, .nav-menu a, .nav-links li, .navbar-menu li {
    padding: 10px 20px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    width: 100% !important; display: block !important;
  }
  .logo, .navbar-brand, .site-logo { font-size: 18px !important; max-width: 60% !important; }

  /* Hero */
  .hero, .hero-section, .banner-section { padding: 60px 16px 40px !important; text-align: center !important; }
  .hero h1, .hero-title, .banner-title { font-size: clamp(24px,6vw,40px) !important; line-height:1.2 !important; }
  .hero p, .hero-subtitle { font-size: 15px !important; }

  /* Search widget */
  .search-widget, .search-box, .search-container, #searchWidget, .flight-search-widget {
    padding: 16px !important; margin: 0 8px !important; border-radius: 16px !important;
  }
  .search-tabs, .tab-container, .search-type-tabs {
    overflow-x: auto !important; white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    display: flex !important; flex-wrap: nowrap !important;
  }
  .search-tabs::-webkit-scrollbar { display: none; }
  .tab-btn, .search-tab, .tab-link { flex-shrink: 0 !important; padding: 8px 14px !important; font-size:13px !important; }

  /* Forms */
  .form-row, .form-grid, .input-row, .search-fields, .booking-fields {
    flex-direction: column !important; gap: 10px !important;
  }
  .form-col, .form-group, .input-group-row, .field-group { width: 100% !important; min-width: unset !important; }
  .airport-input-wrap, .route-inputs { flex-direction: column !important; gap: 8px !important; }
  .swap-btn, .route-swap { transform: rotate(90deg) !important; align-self: center !important; margin: 0 !important; }

  /* Inputs - 16px prevents iOS zoom */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="password"], select, textarea {
    font-size: 16px !important; min-height: 44px !important;
  }

  /* Buttons */
  .btn, button.submit, .search-btn, .cta-btn, .btn-primary, .btn-secondary {
    width: 100% !important; min-height: 48px !important; font-size: 15px !important;
    padding: 12px 20px !important; touch-action: manipulation !important;
  }
  .btn-icon, .icon-btn, .btn-sm { width: auto !important; min-height: 36px !important; }

  /* Flight cards */
  .result-card, .flight-card, .flight-item, .result-item {
    flex-direction: column !important; padding: 14px !important; gap: 10px !important;
  }
  .flight-card-left, .flight-info, .airline-info {
    width: 100% !important; flex-direction: row !important;
    justify-content: space-between !important; align-items: center !important;
    flex-wrap: wrap !important; gap: 8px !important;
  }
  .flight-card-right, .price-section, .book-section {
    width: 100% !important; text-align: left !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 10px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
  }
  .flight-card-right .btn, .price-section .btn { width: auto !important; min-width: 120px !important; }

  /* Hotel cards */
  .hotel-card, .hotel-result-card { flex-direction: column !important; }
  .hotel-card-image, .hotel-thumb { width: 100% !important; height: 200px !important; object-fit: cover !important; }

  /* Booking form */
  .booking-form, #bookingForm, .pax-form { padding: 16px !important; }
  .pax-row, .passenger-details-row { grid-template-columns: 1fr !important; }
  .booking-detail-layout, .detail-container { flex-direction: column !important; gap: 16px !important; }
  .booking-summary-sidebar, .price-summary-box { width: 100% !important; order: -1 !important; }

  /* Tables */
  .table-responsive-wrapper, .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table th, table td { padding: 8px 10px !important; font-size: 12px !important; white-space: nowrap !important; }
  .admin-table, .booking-table, .agent-table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; }

  /* Dashboard */
  .dashboard-layout, .dash-wrapper { flex-direction: column !important; }
  .dashboard-sidebar, .dash-sidebar, .side-panel {
    width: 100% !important; position: static !important; height: auto !important;
    border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  .dash-main, .dashboard-main, .main-content { width: 100% !important; padding: 16px !important; }
  .stats-grid, .dashboard-stats, .metric-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card, .metric-card, .kpi-card { padding: 14px !important; }

  /* Pricing */
  .pricing-grid, .plans-grid, .package-cards { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Modal */
  .modal-content, .dialog-box { width: 94vw !important; max-width: 94vw !important; margin: 20px auto !important; padding: 20px 16px !important; }

  /* B2B */
  .b2b-layout, .b2b-hero-content { flex-direction: column !important; text-align: center !important; }
  .b2b-features-grid, .features-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Blog */
  .blog-grid, .posts-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Footer */
  footer, .footer { padding: 30px 16px !important; }
  .footer-grid, .footer-columns, .footer-layout { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }

  /* GDS/PDF */
  .gds-sheet, .sheet { padding: 20px 16px !important; margin: 0 8px !important; }
  .gds-flight-box, .flight-box { grid-template-columns: 1fr 1fr !important; }

  /* Section headings */
  .section-title, .section-heading, h2.title { font-size: clamp(22px,5vw,36px) !important; }
  h3 { font-size: clamp(18px,4vw,26px) !important; }
  h4 { font-size: clamp(15px,3.5vw,20px) !important; }

  /* Containers */
  .container, .page-container, .content-wrap { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
  .section, .py-section { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Grid utilities */
  .grid-2, .col-2, .two-col { grid-template-columns: 1fr !important; }
  .grid-3, .col-3, .three-col { grid-template-columns: 1fr 1fr !important; }
  .grid-4, .col-4, .four-col { grid-template-columns: 1fr 1fr !important; }

  /* Utility classes */
  .mobile-only { display: block !important; }
  .desktop-only, .hidden-mobile { display: none !important; }
  .mobile-flex { display: flex !important; }
  .mobile-full-w { width: 100% !important; }
  .mobile-center { text-align: center !important; }
  .mobile-p-0 { padding: 0 !important; }
}

/* ══════════════════════════════════════════
   MOBILE  ≤ 480px
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
  body { font-size: 13px !important; }

  .hero h1, .hero-title { font-size: clamp(22px,7vw,32px) !important; }
  .hero-cta-row, .hero-actions { flex-direction: column !important; gap: 10px !important; }

  .stats-grid, .dashboard-stats, .metric-cards { grid-template-columns: 1fr !important; }
  .footer-grid, .footer-columns, .footer-layout { grid-template-columns: 1fr !important; }

  .total-box, .price-total-bar { flex-direction: column !important; gap: 6px !important; text-align: center !important; }

  /* GDS 1-col */
  .gds-flight-box, .flight-box { grid-template-columns: 1fr !important; }
  .gds-col, .gcol { border-left: none !important; border-top: 1px dashed #ccc !important; padding: 10px 0 !important; }
  .gds-col:first-child, .gcol:first-child { border-top: none !important; }

  /* Admin table → card layout */
  .admin-table thead { display: none !important; }
  .admin-table tr { display: block !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 8px !important; margin-bottom: 12px !important; padding: 10px !important; }
  .admin-table td {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    white-space: normal !important; border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 8px 4px !important; font-size: 12px !important;
  }
  .admin-table td:last-child { border-bottom: none !important; }
  .admin-table td::before {
    content: attr(data-label); font-weight: 600; font-size: 11px;
    color: #aaa; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; margin-right: 8px;
  }

  h2 { font-size: clamp(18px,5vw,26px) !important; }
  h3 { font-size: clamp(16px,4vw,20px) !important; }

  /* Sticky bottom booking bar */
  .sticky-book-bar, .mobile-book-cta {
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 9999 !important; background: #0d1117 !important; padding: 12px 16px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
  }
}

/* Safe area (iPhone notch) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .sticky-book-bar, .mobile-book-cta { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
}