/* ==========================================================================
   Karnataka Trekkers — Ultimate Responsive Stylesheet (Mobile-First)
   Breakpoints:
     - Extra small: <= 575px
     - Mobile:      <= 767px
     - Tablet:      <= 1024px
     - Laptop:      >= 1025px
     - Large:       >= 1441px
   ========================================================================== */

/* ==========================================================================
   0. Global Responsive Foundations
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.offcanvas-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Responsive images globally */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Accessible touch targets on ALL devices */
input, select, textarea, button, .btn {
    min-height: 46px;
}
.btn-sm, .form-control-sm, select.form-select-sm, .btn-group-sm > .btn {
    min-height: 34px !important;
}
.form-check-input {
    min-height: auto !important;
    min-width: 20px;
    min-height: 20px !important;
}

/* Prevent text overflow */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Lazy loading fade-in animation */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
    opacity: 1;
}

/* Mobile viewport height fix (Safari 100vh issue) */
.full-vh {
    min-height: 100vh;
    min-height: 100dvh;
}

/* ==========================================================================
   1. EXTRA SMALL PHONES (<= 575px)
   ========================================================================== */
@media (max-width: 575px) {
    /* Typography scale-down */
    .hero-content h1 {
        font-size: 1.6rem !important;
        line-height: 1.25;
    }
    .hero-content p {
        font-size: 0.9rem;
    }
    .section-title h2 {
        font-size: 1.5rem;
    }
    .section-title span {
        font-size: 0.75rem;
    }

    /* Category cards smaller */
    .category-card {
        height: 170px;
    }

    /* Gallery items landscape */
    .gallery-grid-item {
        aspect-ratio: 16 / 9;
    }

    /* Detail page header */
    .trek-detail-header-bg h1 {
        font-size: 1.5rem !important;
    }
    .trek-detail-header-bg .d-flex {
        flex-direction: column;
        gap: 6px !important;
    }
    .trek-detail-header-bg .d-flex span:nth-child(2) {
        display: none; /* Hide pipe separator */
    }

    /* Footer compact */
    .footer-section {
        padding: 40px 0 15px;
        text-align: center;
    }
    .footer-social-icons {
        justify-content: center;
    }
    .footer-bottom {
        margin-top: 30px;
        font-size: 0.8rem;
    }

    /* Booking widget compact */
    .booking-widget-card {
        padding: 18px !important;
    }
    .booking-widget-card h2 {
        font-size: 1.5rem !important;
    }

    /* Stats bar compact */
    .bg-white.py-4 h3 {
        font-size: 1.25rem;
    }

    /* Admin stat cards extra small */
    .stat-card {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 14px !important;
    }

    /* Admin login */
    .admin-login-card {
        padding: 25px !important;
        margin: 0 10px;
    }

    /* Trek leader attendance large touch targets */
    .form-check-input[type="radio"] {
        width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
    }

    /* Gallery filter buttons */
    .gallery-filter-btn {
        font-size: 0.8rem;
        padding: 6px 14px !important;
    }
}

/* ==========================================================================
   2. MOBILE DEVICES (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* --- Section Spacing --- */
    .section-padding {
        padding: 45px 0;
    }
    .section-title {
        margin-bottom: 30px;
    }
    .section-title h2 {
        font-size: 1.75rem;
    }
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* --- Hero Section --- */
    .hero-slider-section {
        height: auto;
        min-height: 480px;
        padding: 90px 0 50px;
    }
    .hero-content h1 {
        font-size: 1.85rem;
        line-height: 1.3;
    }
    .hero-content p {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    .hero-search-box {
        padding: 15px;
        border-radius: 10px;
    }
    .hero-search-box .row > div {
        margin-bottom: 8px;
    }
    .hero-search-box .col-md-5,
    .hero-search-box .col-md-3,
    .hero-search-box .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* --- Mobile Navigation Drawer --- */
    .w-100-mobile {
        width: 100% !important;
    }
    .w-100-mobile-nav {
        width: 100% !important;
        padding: 14px 16px !important;
        text-align: left !important;
        border-bottom: 1px solid #f1f3f1;
        border-radius: 0 !important;
        background-color: transparent !important;
        font-size: 1rem;
    }
    .w-100-mobile-nav:hover,
    .w-100-mobile-nav.active {
        background-color: rgba(45, 90, 39, 0.06) !important;
        color: var(--primary-color) !important;
    }
    .mt-2-mobile {
        margin-top: 12px !important;
    }
    .navbar {
        z-index: 1030 !important;
    }
    .offcanvas.offcanvas-start {
        width: 85% !important;
        max-width: 320px !important;
        z-index: 1055 !important;
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }
    .offcanvas-backdrop {
        z-index: 1050 !important;
        backdrop-filter: blur(4px) !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        transition: opacity 0.35s linear !important;
    }
    .offcanvas-header .btn-close {
        padding: 1rem !important;
        margin: -0.5rem -0.5rem -0.5rem auto !important;
        font-size: 1.25rem !important;
        opacity: 0.8;
    }
    .offcanvas-body {
        padding: 0 !important;
        overflow-y: auto;
    }
    .offcanvas-body .navbar-nav {
        padding: 10px 0;
    }
    /* Close on link click styling */
    .text-center-mobile {
        text-align: center;
    }
    .dropdown-menu.w-100-mobile {
        position: static !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .dropdown-menu.w-100-mobile .dropdown-item {
        padding: 12px 20px !important;
        border-bottom: 1px solid #f1f3f1;
    }

    /* --- Navbar Spacer --- */
    .navbar-custom {
        padding: 10px 0;
    }

    /* --- All Layouts Stack to 1 Column --- */
    .row > * {
        margin-bottom: 15px;
    }
    .row > *:last-child {
        margin-bottom: 0;
    }

    /* --- Trek Cards Single Column --- */
    .catalog-grid, .treks-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .trek-card {
        margin-bottom: 15px;
    }
    .trek-card-img,
    .trek-card-image {
        aspect-ratio: 16 / 9;
    }

    /* --- Trek Detail Page --- */
    .trek-detail-header-bg {
        padding: 80px 0 40px;
    }
    .trek-detail-header-bg h1 {
        font-size: 1.75rem;
    }

    /* Specs grid — 4-column compact row (all 4 visible, no swipe) */
    .trek-specs-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
        margin-top: -30px !important;
        border-radius: 12px !important;
        overflow-x: visible !important;
    }
    .spec-box {
        flex: unset !important;
        scroll-snap-align: unset !important;
        border-right: none !important;
        border-bottom: none !important;
        padding: 8px 4px !important;
        background: #fdfdfd;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
        text-align: center;
        min-width: 0;
    }
    .spec-box i {
        font-size: 1rem !important;
    }
    .spec-box span {
        font-size: 0.6rem !important;
        display: block;
    }
    .spec-box h5 {
        font-size: 0.7rem !important;
        margin-bottom: 0 !important;
        word-break: break-word;
    }
    .spec-box:last-child {
        border-right: none !important;
        border-bottom: none !important;
    }

    /* Booking widget de-sticky on mobile */
    .booking-widget-card {
        position: relative;
        top: 0;
        margin-top: 25px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    }

    /* Itinerary timeline compact */
    .itinerary-timeline {
        padding-left: 20px;
    }
    .itinerary-day-node::before {
        left: -19px;
        width: 12px;
        height: 12px;
    }

    /* Tabs (Inclusions/Exclusions) */
    .nav-tabs .nav-link {
        font-size: 0.85rem;
        padding: 8px 12px !important;
    }

    /* Review items */
    .review-item {
        padding: 15px;
    }

    /* --- Trek Listing Filters --- */
    .col-lg-3 .card.sticky-top {
        position: relative !important;
        top: 0 !important;
    }

    /* --- Booking Flow --- */
    .booking-flow-steps {
        flex-direction: column;
    }

    /* Form fields full width */
    .form-control, .form-select, textarea {
        width: 100% !important;
    }
    .col-md-5, .col-md-6, .col-md-4, .col-md-3, .col-md-8, .col-md-9 {
        /* Ensure mobile stacking for booking forms */
    }

    /* Checkout summary de-sticky */
    .col-lg-4 .card.sticky-top {
        position: relative !important;
        top: 0 !important;
    }

    /* Booking action buttons */
    .booking-widget-card .btn {
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* --- Gallery --- */
    .gallery-grid-item {
        aspect-ratio: 16 / 9;
    }
    .gallery-filter-btn {
        margin-bottom: 8px;
    }

    /* --- Footer --- */
    .footer-section {
        padding: 50px 0 15px;
    }
    .footer-section h4 {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 1.1rem;
    }
    .footer-links li {
        margin-bottom: 10px;
    }

    /* ==========================================================================
       RESPONSIVE TABLES → MOBILE CARD LAYOUT
       ========================================================================== */
    table.table,
    .table-custom,
    table.table-striped,
    table.table-hover {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }
    table.table thead,
    .table-custom thead,
    table.table-hover thead {
        display: none !important;
    }
    table.table tbody,
    .table-custom tbody,
    table.table-hover tbody,
    table.table tr,
    .table-custom tr,
    table.table-hover tr,
    table.table td,
    .table-custom td,
    table.table-hover td {
        display: block !important;
        width: 100% !important;
    }
    table.table tr,
    .table-custom tr,
    table.table-hover tr {
        background-color: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
        position: relative !important;
    }
    table.table td,
    .table-custom td,
    table.table-hover td {
        text-align: right !important;
        padding: 10px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 0.9rem !important;
        min-height: 40px;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    table.table td:last-child,
    .table-custom td:last-child,
    table.table-hover td:last-child {
        border-bottom: none !important;
    }
    table.table td::before,
    .table-custom td::before,
    table.table-hover td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        color: #475569 !important;
        text-align: left !important;
        padding-right: 15px !important;
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px;
        flex-shrink: 0;
    }

    /* ==========================================================================
       USER DASHBOARD — MOBILE NAVIGATION
       ========================================================================== */
    /* Profile card compact */
    .col-lg-3 .card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    .col-lg-3 .card .text-center {
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
        gap: 15px;
    }
    .col-lg-3 .card .text-center .bg-success {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    /* Horizontal scrollable tab navigation */
    .col-lg-3 .card .list-group {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 8px;
        width: 100%;
        scrollbar-width: none; /* Firefox */
    }
    .col-lg-3 .card .list-group::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    .col-lg-3 .card .list-group-item {
        white-space: nowrap !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 20px !important;
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
        display: inline-flex !important;
        align-items: center;
        background-color: #ffffff;
        width: auto !important;
        flex-shrink: 0;
    }
    .col-lg-3 .card .list-group-item.active {
        background-color: var(--primary-color) !important;
        color: #ffffff !important;
        border-color: var(--primary-color) !important;
    }
    .col-lg-3 .card .list-group-item.text-danger {
        margin-top: 0 !important;
    }

    /* User Dashboard Metric Cards 2×2 */
    .col-lg-9 .row.g-3 .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ==========================================================================
       ADMIN DASHBOARD — MOBILE SIDEBAR & LAYOUT
       ========================================================================== */
    /* Off-canvas sidebar */
    #sidebar-wrapper {
        margin-left: -260px !important;
        position: fixed;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050 !important;
        transition: margin 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0 !important;
    }
    /* Backdrop overlay on sidebar open */
    #wrapper.toggled::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1040;
        animation: fadeInBackdrop 0.3s ease;
    }
    @keyframes fadeInBackdrop {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    #page-content-wrapper {
        min-width: 100vw !important;
    }

    /* Admin navbar compact */
    .admin-navbar {
        padding: 12px 15px !important;
    }
    .admin-navbar .d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
    .admin-navbar .text-muted.small {
        font-size: 0.75rem;
    }

    /* Admin stat cards 2 per row */
    .col-md-3.col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Stat card spacing */
    .stat-card {
        padding: 16px !important;
        margin-bottom: 10px;
    }
    .stat-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
    .stat-card h3 {
        font-size: 1.2rem;
    }

    /* Admin cards compact */
    .admin-card {
        padding: 18px !important;
        margin-bottom: 20px !important;
    }

    /* Admin dashboard header */
    .container-fluid .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    /* Admin dashboard export button */
    .container-fluid .btn-success.btn-sm.shadow-sm {
        width: 100%;
        text-align: center;
    }

    /* ==========================================================================
       TREK LEADER PORTAL — MOBILE-FIRST
       ========================================================================== */
    /* Large touch-friendly attendance buttons */
    .attendance-btn {
        width: 100%;
        margin-top: 5px;
        min-height: 48px;
        font-size: 1.1rem;
    }

    /* Trek leader attendance radio buttons — large touch targets */
    .form-check-inline {
        margin-right: 0;
    }
    .form-check-input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        cursor: pointer;
    }

    /* Trek leader header compact */
    .container .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .container .d-flex.justify-content-between .btn-outline-secondary {
        align-self: flex-start;
    }

    /* Save attendance button full width */
    .mt-4.text-end {
        text-align: center !important;
    }
    .mt-4.text-end .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 1.05rem;
    }

    /* ==========================================================================
       FORMS — MOBILE OPTIMIZATION
       ========================================================================== */
    /* Full-width inputs with proper spacing */
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    .row.g-3 > div {
        margin-bottom: 5px;
    }

    /* Input group improvements */
    .input-group {
        flex-wrap: nowrap;
    }

    /* Form action buttons stack on mobile */
    .d-flex.justify-content-between.mt-4 {
        flex-direction: column;
        gap: 10px;
    }
    .d-flex.justify-content-between.mt-4 .btn {
        width: 100%;
        text-align: center;
    }

    /* ==========================================================================
       MODALS & MISCELLANEOUS
       ========================================================================== */
    .modal-dialog {
        margin: 10px;
    }
    .modal-body {
        padding: 20px;
    }

    /* Badge sizing */
    .badge {
        font-size: 0.7rem;
    }

    /* Alert compact */
    .alert {
        padding: 12px 15px;
        font-size: 0.9rem;
    }

    /* Breadcrumb compact */
    .breadcrumb {
        font-size: 0.85rem;
    }

    /* Card responsive padding */
    .card.p-4 {
        padding: 18px !important;
    }

    /* Coupon input section */
    .col-md-9.col-8 {
        flex: 0 0 65%;
        max-width: 65%;
    }
    .col-md-3.col-4 {
        flex: 0 0 35%;
        max-width: 35%;
    }
}

/* ==========================================================================
   3. TABLETS & SMALL LAPTOPS (768px — 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .offcanvas.offcanvas-start {
        width: 350px !important;
        z-index: 1055 !important;
    }
    /* Hero section */
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-slider-section {
        min-height: 520px;
    }

    /* Specs grid 2-column */
    .trek-specs-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 15px;
    }
    .spec-box:nth-child(2n) {
        border-right: none;
    }

    /* Trek grid 2-column */
    .catalog-grid, .treks-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Gallery 2-column */
    .gallery-grid-item {
        aspect-ratio: 16 / 9;
    }

    /* Admin sidebar collapsible on tablet */
    #sidebar-wrapper {
        margin-left: -260px !important;
        position: fixed;
        height: 100%;
        z-index: 1050;
    }
    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0 !important;
    }
    #page-content-wrapper {
        min-width: 100vw !important;
    }

    /* Admin stat cards */
    .stat-card {
        padding: 18px !important;
    }

    /* Booking flow */
    .col-lg-4 .card.sticky-top {
        position: sticky !important;
    }

    /* Section padding */
    .section-padding {
        padding: 60px 0;
    }

    /* Category cards */
    .category-card {
        height: 220px;
    }

    /* Footer layout */
    .footer-section .col-lg-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ==========================================================================
   4. LAPTOPS (1025px — 1440px)
   ========================================================================== */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
    }

    /* Trek listing grid — 2 columns in the filtered section */
    .col-lg-9 .row .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Admin sidebar visible by default */
    #sidebar-wrapper {
        position: relative;
        margin-left: 0;
    }
    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   5. LARGE DESKTOPS (1441px+)
   ========================================================================== */
@media (min-width: 1441px) {
    .container {
        max-width: 1400px;
    }

    /* Trek listing can go 3-column on very wide screens */
    .col-lg-9 .row .col-md-6 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    /* Hero bigger */
    .hero-content h1 {
        font-size: 4rem;
    }

    /* Gallery larger items */
    .gallery-grid-item {
        aspect-ratio: 16 / 9;
    }

    /* Category cards bigger */
    .category-card {
        height: 280px;
    }
}

/* ==========================================================================
   6. PRINT STYLES (for invoices)
   ========================================================================== */
@media print {
    .navbar-custom,
    .footer-section,
    #sidebar-wrapper,
    .admin-navbar,
    .btn,
    .offcanvas {
        display: none !important;
    }
    body {
        font-size: 12pt;
        color: #000;
    }
    .container {
        max-width: 100%;
    }
    table.table td::before {
        content: none !important;
    }
    table.table thead {
        display: table-header-group !important;
    }
    table.table tr {
        display: table-row !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    table.table td {
        display: table-cell !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   7. UTILITY CLASSES FOR RESPONSIVE BEHAVIOR
   ========================================================================== */

/* Swipeable gallery container on mobile only */
@media (max-width: 767px) {
    .gallery-swipe-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 15px !important;
        margin-right: -15px;
        margin-left: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .gallery-swipe-container > * {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 290px !important;
    }
}
.gallery-swipe-container::-webkit-scrollbar {
    height: 5px;
}
.gallery-swipe-container::-webkit-scrollbar-thumb {
    background: rgba(45, 90, 39, 0.3);
    border-radius: 3px;
}

/* Responsive table wrapper */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Mobile bottom CTA bar for trek details */
.mobile-bottom-cta {
    display: none;
}
@media (max-width: 767px) {
    .mobile-bottom-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
        z-index: 1030;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        border-top: 1px solid #E2E8F0;
    }
    .mobile-bottom-cta .price-display {
        font-size: 1.2rem;
        font-weight: 800;
        color: #2D5A27;
    }
    .mobile-bottom-cta .btn {
        flex-shrink: 0;
        min-width: 140px;
    }
    /* Add padding to body to account for fixed bottom bar */
    body.has-bottom-cta {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.has-bottom-cta .callback-float-btn {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: auto !important;
    }
}

/* Booking flow step indicator */
.booking-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 30px;
    padding: 0 15px;
}
.booking-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #94A3B8;
    font-weight: 600;
}
.booking-step.active {
    color: #2D5A27;
}
.booking-step .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.booking-step.active .step-number {
    background: #2D5A27;
    color: #fff;
}
.booking-step.completed .step-number {
    background: #2ECC71;
    color: #fff;
}
.booking-step-divider {
    width: 40px;
    height: 2px;
    background: #E2E8F0;
    margin: 0 5px;
}
@media (max-width: 767px) {
    .booking-steps {
        gap: 0;
        padding: 0 10px;
    }
    .booking-step span:not(.step-number) {
        display: none;
    }
    .booking-step-divider {
        width: 25px;
    }
}

/* Sticky payment summary for desktop */
@media (min-width: 1025px) {
    .payment-summary-sticky {
        position: sticky;
        top: 100px;
    }
}

/* Mobile Navbar Overrides - Premium Refactoring */
@media (max-width: 991px) {
    .navbar-custom {
        height: 64px !important; /* exact 64px mobile height */
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .navbar-brand {
        font-size: 1.5rem !important; /* scale brand text on mobile */
        height: 36px !important; /* logo height on mobile */
        display: inline-flex !important;
        align-items: center !important;
    }
    .navbar-brand i {
        font-size: 1.4rem !important;
    }
    .navbar-toggler {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .hero-mobile-gallery {
        margin-top: 16px !important; /* exact 16px gap on mobile */
    }
}

/* --- Mobile UX Audit & Refactoring Overrides --- */
@media (max-width: 767px) {
    .trek-header-title {
        font-size: 1.75rem !important; /* compact wrapping */
    }
    .trek-header-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .section-padding {
        padding: 40px 16px !important; /* enforce 16px margin */
    }
}


/* Touch Target for Accordions */
@media (max-width: 767px) {
    .itinerary-day-header {
        padding: 14px 16px !important;
        margin: -14px -16px !important;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* Pickup Points Timeline Scale */
@media (max-width: 480px) {
    .pickup-metro-timeline {
        padding-left: 24px !important;
    }
    .pickup-metro-timeline::before {
        left: 11px !important;
    }
    .pickup-timeline-node {
        left: -24px !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }
    .pickup-timeline-content {
        padding: 8px 12px !important;
    }
}

/* Horizontal Carousels Preview Ratios (Related & Reviews) */
@media (max-width: 767.98px) {
    .scroll-row-card {
        flex: 0 0 88% !important; /* unified peeking preview width */
        width: 88% !important;
    }
    .review-card-premium {
        flex: 0 0 85% !important;
        min-width: 260px !important;
    }
}

/* ==========================================================================
   Homepage Browse By Category Section Responsiveness
   ========================================================================== */
@media (max-width: 1199.98px) {
    .categories-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media (max-width: 991.98px) {
    .categories-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    .categories-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 10px 16px 24px 16px;
        margin-left: -16px;
        margin-right: -16px;
        scrollbar-width: none; /* Firefox */
        scroll-snap-type: x mandatory;
    }
    
    .categories-container::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .category-card-link {
        flex: 0 0 160px;
        scroll-snap-align: start;
        max-width: 160px;
    }
    
    .category-card {
        padding: 24px 12px;
        height: 165px;
        border-radius: 12px;
    }
    
    .category-icon-wrapper {
        width: 52px;
        height: 52px;
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .category-title {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }
    
    .category-count {
        font-size: 0.8rem;
    }
}