/* ==========================================================================
   ZIYARAT SYSTEM — GLOBAL MOBILE & TABLET RESPONSIVE STYLES (v3.4)
   Breakpoints: Mobile (< 576px), Tablet (< 768px), Medium (< 992px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SMALL MOBILE SCREENS (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Typography Scaling */
  h1, .display-4, .display-5 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  h2, .display-6 {
    font-size: 22px !important;
  }

  h3 { font-size: 20px !important; }
  h4 { font-size: 18px !important; }
  h5 { font-size: 16px !important; }

  /* Container Padding */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero Section Adjustments */
  .hero-section {
    min-height: auto !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .hero-section .btn {
    width: 100% !important;
    margin-bottom: 8px;
  }

  /* Navbar Brand Logo */
  .navbar-brand img {
    height: 34px !important;
  }

  /* Buttons & Tap Targets */
  .btn-lg {
    font-size: 15px !important;
    padding: 12px 18px !important;
  }

  /* Package Cards */
  .card-img-top {
    height: 160px !important;
  }

  /* QR Ticket Container */
  .qr-ticket-card {
    padding: 16px !important;
  }

  .qr-placeholder-box {
    width: 160px !important;
    height: 160px !important;
  }

  .qr-placeholder-box svg {
    width: 120px !important;
    height: 120px !important;
  }

  /* Tracking Map */
  #tracking-map {
    height: 50vh !important;
    min-height: 300px !important;
  }

  /* Timeline Item Mobile Gap */
  .stop-timeline-item {
    padding: 10px !important;
    gap: 10px !important;
  }

  .stop-badge-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
}

/* --------------------------------------------------------------------------
   2. TABLET SCREENS (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Navbar Mobile Menu Collapse Box */
  .navbar-collapse {
    background: var(--clr-white);
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
    box-shadow: 0 8px 24px rgba(27, 42, 74, 0.15);
    border: 1px solid var(--clr-border);
  }

  .navbar-nav .nav-link {
    padding: 10px 14px !important;
  }

  /* Filter Sidebar on Packages Page */
  .filter-card.sticky-top {
    position: static !important;
    margin-bottom: 20px;
  }
}

/* --------------------------------------------------------------------------
   3. MEDIUM TABLET / LAPTOP (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .sticky-top {
    position: static !important;
  }
}

/* --------------------------------------------------------------------------
   4. MEDIUM LAPTOPS / DESKTOPS (992px to 1399px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .navbar-custom .nav-link {
    font-size: 0.74rem !important;
    padding: 6px 10px !important;
    letter-spacing: 0.5px !important;
  }
  
  .navbar-custom .navbar-brand img {
    height: 36px !important;
  }

  .lang-switcher .dropdown-toggle {
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
  }

  .btn-login-ghost, .btn-register-gold {
    padding: 6px 14px !important;
    font-size: 0.72rem !important;
  }

  .navbar-collapse {
    gap: 8px !important;
  }
}