/* =============================================================
   GigVault — responsive.css
   All media queries & mobile-first responsive overrides
   ============================================================= */

/* ── Fixed bottom nav (mobile only, hidden on desktop) ── */
.mob-bottom-nav {
    display: none;
}
@media (max-width: 1024px) {
    .mob-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 62px;
        background: var(--bg-card);
        border-top: 1px solid var(--border-light);
        z-index: 9000;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mob-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: color 0.15s;
        padding: 0.5rem 0.25rem;
    }
    .mob-bottom-nav__item svg {
        stroke: currentColor;
        transition: stroke 0.15s;
        flex-shrink: 0;
    }
    .mob-bottom-nav__item.active,
    .mob-bottom-nav__item:hover { color: var(--theme); }
    /* Push page content above the bar */
    body { padding-bottom: 62px; }
    .hero-scroll-hint {display: none;}
    .hero {min-height: auto; padding: 8rem 6% 5rem;}
}

/* ── Mobile nav burger (hidden on desktop) ── */
.nav-burger {
    display: none;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 0.4rem; flex-shrink: 0;
}
.nav-burger span {
    display: block; width: 22px; height: 2px;
    background: var(--text-primary); border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile nav: theme toggle row ── */
.mobile-nav-theme {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
}
.mobile-nav-theme-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.92rem; font-weight: 600; color: var(--text-primary);
}
.mobile-nav-theme-label .icon-sun { display: none; }
[data-theme="light"] .mobile-nav-theme-label .icon-moon { display: none; }
[data-theme="light"] .mobile-nav-theme-label .icon-sun { display: block; }
.mobile-nav-theme-text::before { content: 'Dark mode'; }
[data-theme="light"] .mobile-nav-theme-text::before { content: 'Light mode'; }

/* Toggle switch — off (dark mode), on (light mode) */
.mobile-theme-switch {
    position: relative; width: 44px; height: 24px;
    border-radius: 99px; border: none; cursor: pointer;
    background: rgba(255,255,255,0.15); transition: background 0.2s;
    flex-shrink: 0; padding: 0;
}
[data-theme="light"] .mobile-theme-switch { background: var(--accent); }
.mobile-theme-switch-knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform 0.2s;
    display: block;
}
[data-theme="light"] .mobile-theme-switch-knob { transform: translateX(20px); }

/* ── Mobile nav panel (hidden on desktop) ── */
.mobile-nav {
    display: none;
    position: fixed;
    top: 80px; left: 0; right: 0;
    bottom: 0;
    z-index: 9999;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 0.75rem 1.25rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Stop at the bottom nav bar */
    padding-bottom: calc(62px + env(safe-area-inset-bottom) + 1rem);
}
.mobile-nav.open { display: block; }
.mobile-nav-links {
    list-style: none; display: flex; flex-direction: column;
    gap: 0.15rem; margin-bottom: 0.75rem;
}
.mobile-nav-link {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 0.9rem; color: var(--text-primary);
    font-size: 0.95rem; font-weight: 600;
    border-radius: var(--radius-sm); transition: background 0.15s;
    text-decoration: none;
}
.mobile-nav-link:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .mobile-nav-link:hover { background: rgba(0,0,0,0.04); }
.mobile-nav-divider { border: none; border-top: 1px solid var(--border); margin: 0.5rem 0; }
.mobile-nav-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mobile-nav-section-title {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
    padding: 0.25rem 0.9rem 0.1rem;
}

/* =============================================================
   1600px — Hide booking reference column
   ============================================================= */
@media (max-width: 1600px) {
    .col-ref { display: none; }
}

/* =============================================================
   1440px — Switch bookings to accordion
   ============================================================= */
@media (max-width: 1440px) {
    .bk-desktop-table { display: none; }
    .bk-accordion { display: block; }
}

@media (max-width: 1150px) {
    .hero-video-browser {width: 93%;}
}

/* =============================================================
   768px — Booking: icon-only status, filter dropdown, accordion adjustments
   ============================================================= */
@media (max-width: 768px) {
    /* Filter: hide pill buttons, show select */
    .bk-filter-pills { display: none; }
    .bk-filter-select { display: block; min-width: 160px; }

    /* Status badge: hide text, show icon only */
    .bk-acc-status .bk-status-text { display: none; }
    .bk-acc-status svg { margin-right: 0 !important; }

    /* Accordion layout */
    .bk-acc-dl { grid-template-columns: repeat(2, 1fr); }
    .bk-btn-menu-drop { position: fixed; right: 1rem; left: 1rem; width: auto; top: auto; bottom: 70px; }

    /* Hero join — center on tablet */
    .hero-join { text-align: center; }
    .hero-join-dot { display: inline-block; animation: eyeDot 2s ease-in-out infinite; margin: 0 5px 1px 0; }
    .artists-carousel {padding-bottom: 3rem;}
}

/* =============================================================
   640px — Hero video: portrait phone frame (9:16, centred)
   ============================================================= */
@media (max-width: 640px) {
    .hero-video-browser {
        width: 252px;
        margin: 0 auto;
        border-radius: 44px;
        border: 3px solid rgba(255,255,255,0.14);
        box-shadow: 0 40px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06);
        overflow: hidden;
    }
    .app-titlebar { display: none; }
    .phone-status-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 22px 8px;
        background: var(--bg-primary);
        position: relative;
        flex-shrink: 0;
        color: var(--text-primary);
    }
    .phone-time { font-size: 0.7rem; font-weight: 700; }
    .phone-notch {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 6px;
        width: 86px;
        height: 24px;
        background: #000;
        border-radius: 100px;
    }
    .phone-indicators { display: flex; align-items: center; gap: 5px; }
    .hero-video-desktop { display: none; }
    .hero-video-mobile { display: block; aspect-ratio: 390 / 844; }
    .hero-demo-steps { display: flex; }
    .phone-home-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 26px;
        background: var(--bg-primary);
        flex-shrink: 0;
    }
    .phone-home-pill {
        display: block;
        width: 110px;
        height: 4px;
        background: rgba(255,255,255,0.3);
        border-radius: 100px;
    }
}

/* =============================================================
   1024px — Tablet landscape
   ============================================================= */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .layout-sidebar { grid-template-columns: 220px 1fr; }

    .detail-layout { grid-template-columns: 3fr 2fr; }

    .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-info-grid { grid-template-columns: repeat(2, 1fr); }

    /* Artist browse — 3 columns at tablet landscape */
    #venues-grid.list-view, #artists-grid.list-view { grid-template-columns: 1fr; }

    /* Reduce search bar padding */
    .sb-seg { padding: 0.65rem 0.9rem; }
    .sb-submit { padding: 0 2.5rem; }
}

/* =============================================================
   900px — Tablet portrait
   ============================================================= */
@media (max-width: 900px) {
    /* Home page */
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .split-section { grid-template-columns: 1fr; gap: 2.5rem; }
    .split-section.reverse { direction: ltr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .app-layout { grid-template-columns: 500px 1fr; }
    .nearby-grid { grid-template-columns: repeat(2, 1fr); }
    .nearby-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .app-sidebar-mock { display: none; }

    /* Detail pages — stack */
    .detail-layout { grid-template-columns: 1fr; }

    /* Notifications dropdown */
    #notif-dropdown { right: 1rem; left: 1rem; width: auto; }

    /* Hero */
    .hero h1 { font-size: clamp(2.8rem, 9vw, 5rem); letter-spacing: -2.5px; }

    /* Gigs near me — stack map over list */
    .gigs-split {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .gigs-map-pane {
        order: -1;
        height: 45vh;
        min-height: 220px;
        width: 100%;
        flex: none;
    }
    .gigs-list-pane {
        width: 100%;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid var(--border);
        max-height: none;
        height: auto;
        overflow-y: visible;
    }
    .gigs-split.list-mode { height: auto; overflow: visible; }
    .gigs-split.list-mode .gigs-list-pane { max-height: none; height: auto; }
    .gigs-split.list-mode .gigs-map-pane { display: none; }

        /* ── Home page carousels — wrap like search grid ── */

    .artists-carousel .artist-card,
    .artists-carousel .venue-card { flex: 0 0 calc(50% - 0.375rem); }

        /* Section paddings */
    .features-grid { grid-template-columns: 1fr 1fr;}
    .nearby-grid, .nearby-grid-4 { grid-template-columns: 1fr; }
    .public-section,
    .split-section,
    .nearby-section,
    .testimonials-section { padding: 2rem; }
    .mt-20 { margin-top: 0; }
    .card, 
    .city-card, 
    .venue-card, 
    .artist-card, 
    .hero-app-frame, 
    .mini-card, 
    .sb-bar {
        box-shadow: none;
    }
    .detail-layout {gap: 0;}
    .page-hero p {margin-top: 0.5rem;}
}

@media (max-width: 800px) {
    .app-layout { grid-template-columns: 1fr; }
    .hero-app-frame { margin: 0px 20px; }
    .app-main-mock { padding: 1.5rem 0.75rem; }
}

/* =============================================================
   1200px — Sidebar-present grids start to cramp
   ============================================================= */
@media (max-width: 1200px) {
    /* With 250px sidebar eating space, 2-col dashboard grids get too narrow.
       Stack them and let quick-actions drop to 2 cols. */
    .layout-sidebar .main-content .grid-2 { grid-template-columns: 1fr; }
    .layout-sidebar .main-content .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   1024px — Burger menu appears; sidebar collapses into burger
             Auth buttons (Sign in, Signup, theme) still visible
   ============================================================= */
@media (max-width: 1024px) {
    /* ── Nav: show burger, collapse nav-links, keep auth actions visible ── */
    .nav { padding: 0 1rem; }
    .nav-inner { height: 80px; position: relative; }
    .nav-links { display: none; }
    .nav-burger { display: flex; order: -1; }
   .nav-desktop-only { display: none !important; }
   .hero-stats { margin: 6rem 2rem; }
   .hero {padding: 7rem 6%;}

    /* ── Sidebar is now hidden — restore grids to use full viewport width ── */
    .layout-sidebar .main-content .quick-actions-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   768px — Mobile (hide auth buttons too, everything in burger)
   ============================================================= */

@media (max-width: 768px) {

    .detail-name-row h1 {font-size: 1.8rem;}
    .hero::before { background: none; }
    body .layout-sidebar { background-color: var(--bg-primary); }
    h1 { font-size: 1.5rem; }
    .page-header h1
    /* Logo can be wider now that auth buttons are hidden */
    .nav-logo { max-width: calc(100% - 140px); }

    /* ── Main content ── */
    .main-content { padding: 0.75rem 1rem 2rem; }

    /* ── Grids ── */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .grid-2-auto { grid-template-columns: 1fr; }
    .grid-3-auto { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
    .booking-detail-grid { grid-template-columns: 1fr; }
    .fee-builder-grid { grid-template-columns: 1fr; }
    .payment-choice-grid { grid-template-columns: 1fr; }
    .pricing-type-grid { grid-template-columns: 1fr; }
    .book-success-grid { grid-template-columns: 1fr; }
    .rating-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-info-grid { grid-template-columns: 1fr; }
    .venue-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .video-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { grid-template-columns: 1fr; display: grid; text-align: center; }

    /* ── Artist browse grid — 2 columns on mobile ── */
    #artists-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    /* List view — single column */
    #artists-grid.list-view { grid-template-columns: 1fr; }
    #artists-grid.list-view .artist-card--venue .artist-card-link { padding-bottom: 0.9rem; }
    #artists-grid.list-view .artist-card-book-btn {
        position: static;
        margin: 0 1rem 0.75rem;
        width: calc(100% - 2rem);
        border-radius: var(--radius);
    }

    /* ── Artist card grid view adjustments ── */
    .artist-card-img { height: 140px; }
    .artist-card-body { padding: 0.75rem; }
    .artist-card-name { font-size: 0.88rem; }
    .artist-card, .venue-card { border-radius: 10px; margin-bottom: 5px; }

    /* ── Forms ── */
    .form-row { grid-template-columns: 1fr; }

    /* ── Layout helpers ── */
    .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .card-header { flex-wrap: wrap; gap: 0.75rem; }
    .mb-6 { margin-bottom: 1.25rem; }

    /* ── Auth ── */
    .auth-card { padding: 1.5rem; }
    .auth-wrap { padding: 1.5rem 0; }

    /* ── Hero ── */
    .hero { padding: 4.5rem 1.25rem 1.75rem; text-align: center; }
    .hero-eyebrow { justify-content: center; font-size: 0.72rem; margin: 1rem 0; }
    .hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); letter-spacing: -1.5px; margin: 0 0 0.85rem; }
    .hero-sub { font-size: 0.88rem; padding: 0; margin-bottom: 1rem; max-width: 100%; }
    .hero-join { margin-bottom: 1.25rem; padding: 0 2.5rem; display: inline-block;}
    .hero-ctas { flex-direction: row; gap: 0.5rem; flex-wrap: nowrap; margin-bottom: 1.5rem; padding: 0; }
    .hero-ctas .btn-hero-primary,
    .hero-ctas .btn-hero-outline { flex: 1; justify-content: center; padding: 0.9rem 0.5rem; font-size: 0.9rem; }
    .hero-social-proof { justify-content: center; margin-top: 1rem; }
    /* Stats — 2×2 grid */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin: 2rem;
    }
    .hero-stat {
        padding: 2rem 0.5rem 2rem;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        text-align: center;
    }
    .hero-stat:nth-child(odd) { border-right: 1px solid var(--border-light); }
    .hero-stat:nth-child(3),
    .hero-stat:nth-child(4) { border-bottom: none; }

    /* ── Detail pages — clean stack layout on mobile ── */
    .detail-name-row { flex-direction: column; }
    .detail-cover { height: 180px; margin-bottom: 0 !important; }
    .booking-status-available {background: none; }
    .detail-layout .profile .detail-header .artist-rating-stars { font-size: 0.85rem; }
    .detail-layout .profile .detail-header .artist-rating-num { font-size: 1.2rem; }
    /* Reset forced-white text (designed for dark cover overlay) back to normal below cover */
    .detail-layout .profile .detail-header,
    .detail-layout .profile .detail-header h1, .detail-layout .venue h1 { color: var(--text-primary) !important; }
    .detail-header { padding: 1rem 0 0.5rem; align-items: flex-start; }
    .artist-rating-block { position: absolute; top: 85px; right: 20px; }
    .social-follower-label { display: none; }
    .detail-layout .venue .d-flex { padding: 0 !important; }

    /* ── Filter pills row — horizontal scroll ── */
    .sb-pills-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.4rem;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .sb-pills-row::-webkit-scrollbar { display: none; }
    .sb-pills { flex-wrap: nowrap; flex-shrink: 0; gap: 0.35rem; }
    .sb-pill, .sb-pill-select, .sb-clear { flex-shrink: 0; }
    .view-toggle { flex-shrink: 0; }

    /* ── Gigs near me controls ── */
    .gigs-filters-row { flex-wrap: nowrap; gap: 0.4rem; }
    .gigs-filter-btn, .gigs-filter-select { flex-shrink: 0; }
    .gigs-date-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.3rem;
    }
    .gigs-date-tabs::-webkit-scrollbar { display: none; }

    /* Gigs popup — wider on mobile */
    .gigs-map-popup {
        width: 92vw;
        max-width: none;
    }

    /* ── Booking modal ── */
    .modal { width: 92vw; max-width: none; }
    .modal-header { padding: 1.1rem 1.1rem 0; }
    .modal-body { padding: 1rem 1.1rem; }

    /* ── Footer ── */
    .footer-top { grid-template-columns: 1fr; gap: 2rem; }

    /* ── Page hero ── */
    .page-hero { padding: 2rem 1.25rem; }

    /* ── Travel tabs ── */
    .travel-type-tabs { flex-direction: column; }

    /* ── Diary ── */
    .diary-legend { flex-wrap: wrap; gap: 0.5rem; }
    .near-me-banner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

    /* ── FullCalendar — wrap toolbar so buttons don't overflow ── */
    .fc-header-toolbar { flex-wrap: wrap; gap: 0.5rem 0; }
    .fc-toolbar-title { font-size: 1.1rem !important; }
    .fc-button { padding: 0.3rem 0.55rem !important; font-size: 0.82rem !important; }
    .fc-button-group .fc-button { padding: 0.3rem 0.5rem !important; }

    /* ── Admin grids not covered by generic rules ── */
    .dispute-grid-2col { grid-template-columns: 1fr; }
    .address-city-grid { grid-template-columns: 1fr; }

    /* ── Date group columns — compact on mobile ── */
    .vgig-date-col { width: 44px; }
    .vgig-date-day { font-size: 1.6rem; }
    .vgig-group { gap: 0.85rem; padding: 0.85rem 0; }

    .gig-date-left { width: 44px; }
    .gig-date-left-day { font-size: 1.6rem; }
    .agig-date-group { gap: 0.85rem; padding: 0.85rem 0; }

    .gnm-date-col { width: 46px; }
    .gnm-date-day { font-size: 1.5rem; }

    .near-me-location { padding: 1.25rem 0 0; font-size: 0.9rem;}
}

/* =============================================================
   640px — Search bar: clean stacked card
   ============================================================= */
@media (max-width: 640px) {
    /* app.css already stacks sb-bar to column — refine here */
    .sb-bar { flex-direction: column; flex-wrap: nowrap; }
    .sb-seg-label { display: block; }
    .sb-seg { min-height: 60px; padding: 0.6rem 1rem; }
    .sb-seg-grow { flex: none; width: 100%; }
    .sb-seg-icon { width: 15px; height: 15px; }

    /* Reset any previous icon-only tap-target rules */
    .sb-bar .sb-seg:not(.sb-seg-grow) {
        position: static;
        width: 100%;
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        padding: 0.6rem 1rem;
    }

    /* Selects: visible with native arrow — users know it's interactive */
    .sb-seg select,
    .sb-bar .sb-seg:not(.sb-seg-grow) select,
    .sb-bar .sb-seg:not(.sb-seg-grow) input[type="date"] {
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        opacity: 1;
        font-size: 1rem;
        color: var(--text);
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        -webkit-appearance: auto;
        appearance: auto;
    }

    /* Date: native picker, simple */
    .sb-seg input[type="date"] {
        -webkit-appearance: auto;
        appearance: auto;
        font-size: 1rem;
        width: 100%;
    }

    /* Hide time on mobile — date is enough */
    .sb-avail-sep { display: none; }
    .sb-time-input { display: none; }

    /* Submit: prominent full-width card footer */
    .sb-submit {
        flex: none;
        width: 100%;
        border-radius: 0 0 10px 10px;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    /* Venue detail */
  

    /* Artist search item — clean mobile list layout */
    .artist-search-item { flex-wrap: wrap; padding: 0.7rem 0.875rem; gap: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); }
    .artist-search-item:last-child { border-bottom: none; }
    /* Prevent act-type · location · distance line from wrapping */
    .artist-search-item .text-2xs { flex-wrap: nowrap !important; overflow: hidden; max-width: 100%; }
    .artist-search-item .text-2xs .search-meta-distance { flex-shrink: 0; }
    /* Bottom action row: gig area left, price + Book right, always single line */
    .artist-search-actions { flex-direction: row; align-items: center; flex-wrap: nowrap; width: 100%; justify-content: space-between; gap: 0.4rem; }
    .artist-search-meta { text-align: left; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
    .artist-search-badges { justify-content: flex-end; flex-shrink: 0; flex-wrap: nowrap; gap: 0.35rem; }

    /* ── Opening hours — 2-col layout (day | select, times below) ── */
    .oh-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "day type" "times times";
        gap: 0.5rem 0.75rem;
    }
    .oh-day-label { grid-area: day; }
    .oh-type { grid-area: type; }
    .oh-times { grid-area: times; width: 100%; }

    /* ── FullCalendar — compact on phones ── */
    .fc-toolbar-chunk { justify-content: center; }
    .fc-header-toolbar { justify-content: center; }
    .fc-toolbar-title { font-size: 0.95rem !important; }
    .fc-button { padding: 0.25rem 0.45rem !important; font-size: 0.78rem !important; }
}

/* =============================================================
   600px — Small mobile
   ============================================================= */
@media (max-width: 600px) {
    /* Venue cards: full width on mobile (matches artist search) */

    /* Filter pills → mobile dropdown swap */
    .sb-mobile-filter { display: block; width: 100%; margin-bottom: 0.5rem; }
    .sb-pills-row { display: none; }

    /* Venue cards: full width */


    /* Gigs Near Me: genre & distance selects become icon-only buttons */
    .gigs-filters-row { flex-direction: row; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
    .gf-icon-wrap {
        position: relative;
        width: 40px; height: 36px; flex-shrink: 0;
        border: 1px solid var(--border); border-radius: 99px;
        background: var(--bg-elevated);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .gf-icon { display: block; color: var(--text-muted); pointer-events: none; }
    .gf-icon-wrap .gigs-filter-select {
        position: absolute; inset: 0; width: 100%; height: 100%;
        opacity: 0; cursor: pointer; border: none; background: none;
        padding: 0; margin: 0; font-size: 16px; /* prevent iOS zoom */
    }
    .gf-icon-wrap.is-active { border-color: var(--accent); background: rgba(99,102,241,0.08); }
    .gf-icon-wrap.is-active .gf-icon { color: var(--accent); }

    /* Hero */
    .hero h1 { font-size: clamp(3rem, 10vw, 3rem); letter-spacing: -1.5px; }
    .hero-ctas .btn-hero-primary,
    .hero-ctas .btn-hero-outline { font-size: 0.82rem; padding: 0.7rem 0.4rem; }

    /* Reduce large top/bottom padding utilities on mobile */
    .pt-12 { padding-top: 1.75rem; }
    .pb-12 { padding-bottom: 1.75rem; }
    .pt-8  { padding-top: 1.5rem; }
    .pb-8  { padding-bottom: 1.5rem; }

    /* Grids */
    .stats-grid { grid-template-columns: 1fr; }
    .grid-3-auto { grid-template-columns: 1fr; }
    .rating-grid { grid-template-columns: 1fr; }
    .rating-breakdown-grid { grid-template-columns: repeat(2, 1fr); }
    .venue-gallery-grid { grid-template-columns: 1fr; }

    /* Artist grid + home carousels — single column */
    #artists-grid { grid-template-columns: 1fr; gap: 0.65rem; }
    .artists-carousel .artist-card,
    .artists-carousel .venue-card { flex: 0 0 100%; }
    .artist-card-img { height: 160px; }

    /* Card headers */
    .card-header { flex-direction: column; align-items: flex-start; }

    /* Diary */
    .diary-stats { grid-template-columns: 1fr 1fr; }
    .avail-status-grid { grid-template-columns: 1fr; }
    .block-status-grid { grid-template-columns: 1fr 1fr; }
    .time-scope-grid { grid-template-columns: repeat(2, 1fr); }

    /* Detail cover */
    .detail-cover { height: 155px; margin-bottom: 0 !important; }

    /* Page hero */
    .page-hero { padding: 1.5rem 1rem; }
    .page-hero h1 { font-size: 1.6rem; }

    /* Nav actions spacing */
    .nav-actions { gap: 0.3rem; }

    /* Modals — centred; overlay scrolls when content taller than viewport */
    .modal-overlay,
    .respond-modal-overlay,
    .cancel-modal-overlay { align-items: center; overflow-y: auto; padding: 1rem 0.75rem; }
    .modal { padding: 1rem; width: 92vw; max-width: none; border-radius: var(--radius-lg); }
    .respond-modal-card,
    .cancel-modal-card { width: 92vw; max-width: none; }
    .modal-header { padding: 1.25rem 1.1rem 0; }
    .modal-body,
    .cancel-modal-body,
    .respond-modal-body { padding: 1rem 1.1rem; }
    .cancel-modal-footer { padding: 0.75rem 1.1rem; }

    /* Gigs near me */
    .gigs-map-pane { height: 38vh; min-height: 200px; }
    .gigs-split-item { padding: 0.65rem 0.85rem; }

    /* Date groups — tighter on small phones */
    .vgig-date-day { font-size: 1.4rem; }
    .vgig-group { padding: 0.7rem 0; gap: 0.65rem; }
    .gig-date-left-day { font-size: 1.4rem; }
    .agig-date-group { padding: 0.7rem 0; gap: 0.65rem; }
    .gnm-date-day { font-size: 1.35rem; }

    .artist-card--venue .artist-card-book-btn { border-radius: 0; }

        /* Section paddings */
    .features-grid { grid-template-columns: 1fr; }
    .nearby-grid, .nearby-grid-4 { grid-template-columns: 1fr; }
    .public-section,
    .split-section,
    .nearby-section,
    .testimonials-section { padding: 2rem 1.25rem; }
    .split-section { gap: 1.5rem; }

    .hero-app-label { padding: 0.5rem 1.25rem 1rem; }
    .hero-social-proof { flex-wrap: wrap; gap: 0.5rem; }
    .bottom-cta { padding: 2.5rem 1.25rem 3rem; }
    .bottom-cta h2 { font-size: clamp(2rem, 8vw, 2.8rem); letter-spacing: -1.5px; }
    .bottom-cta-buttons { gap: 0.5rem; flex-wrap: nowrap; }
    .bottom-cta-buttons .btn-hero-primary,
    .bottom-cta-buttons .btn-hero-outline { flex: 1; justify-content: center; padding: 0.7rem 0.4rem; font-size: 0.82rem; }
    .mini-card { width: 100%; box-sizing: border-box; }
    .home-artist-item { gap: 1rem;}
    .home-artist-list .d-flex.flex-center.gap-2.flex-wrap { display: inline-grid; text-align: end; }
    div#calendar {padding: 0;}
}

/* =============================================================
   640px — Small phones: collapse dashboard grids
   ============================================================= */
@media (max-width: 640px) {
    /* Dashboard grid-2 (Upcoming/Past gigs) — stack at phone width.
       Uses high specificity to override the 1024px restore rule. */
    .layout-sidebar .main-content .grid-2 { grid-template-columns: 1fr; }
    .layout-sidebar .main-content .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   640px — Dashboard & diary list rows: icon-only badges + tidy layout
   ============================================================= */
@media (max-width: 640px) {

    /* ── Icon-only status badges across all list rows ── */
    .booking-row .bk-status-text,
    .activity-row .bk-status-text,
    .past-gig-row .bk-status-text,
    .upcoming-row .bk-status-text,
    .upcoming-gig-row .bk-status-text { display: none; }

    /* ── Upcoming bookings rows (dashboard + diary) ── */
    .booking-row { align-items: flex-start; }
    .upcoming-row,
    .upcoming-gig-row { align-items: flex-start; gap: 0.6rem; }
    /* Date block: stack day and time compactly */
    .diary-gig-date { text-align: right; min-width: 0; }
    .diary-gig-date .font-bold { font-size: 0.72rem; white-space: nowrap; }
    .diary-gig-date-time { font-size: 0.7rem; }

    /* ── Recent activity rows ── */
    .activity-row { gap: 0.5rem; }
    /* Hide the relative time-ago — date is already shown in the content */
    .activity-row > .whitespace-nowrap { display: none; }

    /* ── Past gig rows: wrap action buttons below the gig info ── */
    .past-gig-row > .d-flex.flex-center { flex-wrap: wrap; align-items: flex-start; }
    .past-gig-row .d-flex.gap-2.flex-shrink-0 {
        width: 100%;
        flex-shrink: 1;
        justify-content: flex-start;
        margin-top: 0.35rem;
    }

    /* ── Abbreviate Tomorrow → Tmrw in booking/upcoming rows only ──
       Hides the .gdt-label span and replaces via ::after on .gig-date-tomorrow.
       Excludes backend diary rows (.vgig-row, .agig-row). */
    .upcoming-row .gig-date-tomorrow .gdt-label,
    .upcoming-gig-row .gig-date-tomorrow .gdt-label,
    .booking-row .gig-date-tomorrow .gdt-label,
    .past-gig-row .gig-date-tomorrow .gdt-label,
    .gigs-split-item .gig-date-tomorrow .gdt-label { display: none; }

    .upcoming-row .gig-date-tomorrow::after,
    .upcoming-gig-row .gig-date-tomorrow::after,
    .booking-row .gig-date-tomorrow::after,
    .past-gig-row .gig-date-tomorrow::after,
    .gigs-split-item .gig-date-tomorrow::after { content: 'Tmrw'; font-size: 0.75rem; }

    /* Gigs Near Me date column label */
    .gnm-date-col .gnm-date-weekday--tomorrow .gdt-label { display: none; }
    .gnm-date-col .gnm-date-weekday--tomorrow::after { content: 'Tmrw'; font-size: 0.62rem; }

    /* Venue profile date column label */
    .vgig-date-col .vgig-date-weekday--tomorrow .gdt-label { display: none; }
    .vgig-date-col .vgig-date-weekday--tomorrow::after { content: 'Tmrw'; font-size: 0.62rem; }

    /* Artist profile date column label */
    .gig-date-left .gig-date-left-label--tomorrow .gdt-label { display: none; }
    .gig-date-left .gig-date-left-label--tomorrow::after { content: 'Tmrw'; font-size: 0.6rem; }

    /* ── Venue upcoming gigs (booking-row) — prevent overflow on narrow screens ── */
    .booking-row .flex-1 { min-width: 0; }
    .booking-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

    /* ── Gigs-split-item layout ──
       Default mobile (venue/artist pages): right col hidden, inline time visible
       Gigs-near-me map view (#gigsSplit not .list-mode): right col shown, inline time hidden
       Gigs-near-me list view (#gigsSplit.list-mode): inherits default        ── */
    .gigs-split-tags { flex-wrap: nowrap; }
    .gigs-split-item { align-items: flex-start; }
    .gigs-split-right { display: none; }
    .gigs-info-time { display: block; font-size: 0.75rem; font-weight: 700; color: var(--text-primary); margin: 0.1rem 0 0.2rem; }
    #gigsSplit:not(.list-mode) .gigs-split-item { align-items: center; }
    #gigsSplit:not(.list-mode) .gigs-split-right { display: block; }
    #gigsSplit:not(.list-mode) .gigs-info-time { display: none; }

}

/* =============================================================
   1440px — FullCalendar diary: icon-only view-switcher buttons
   ============================================================= */
@media (max-width: 1440px) {
    .fc-dayGridMonth-button,
    .fc-timeGridWeek-button,
    .fc-listMonth-button { font-size: 0 !important; padding: 0.35rem 0.55rem !important; }
}

/* =============================================================
   600px — FullCalendar diary: show FAB
   ============================================================= */
@media (max-width: 1025px) { .diary-fab { display: flex; }}

/* =============================================================
   640px — FullCalendar list view: stacked event layout
   ============================================================= */
@media (max-width: 640px) {
    .fc-list-table, .fc-list-table tbody { display: block; width: 100%; }
    .fc-list-day { display: block; }
    .fc-list-day > th { display: block; }
    .fc-list-day-cushion { padding: 0.5rem 0.85rem 0.3rem; font-size: 0.8rem; }
    .fc-list-event { display: block; padding: 0.55rem 0.85rem; }
    .fc-list-event + .fc-list-event { border-top: 1px solid var(--border); }
    .fc-list-event-graphic { display: none; }
    .fc-list-event-time { display: block; font-size: 0.75rem; opacity: 0.6; margin-bottom: 0.15rem; }
    .fc-list-event-title { display: block; font-size: 0.88rem; font-weight: 600; }
    .fc-list-event-title a { color: inherit !important; text-decoration: none; }

    /* Full-width calendar list — remove outer border, strip card padding */
    .fc-theme-standard .fc-list { border: none !important; border-radius: 0 !important; }
    .card.calendar { padding: 0; }
    .card.calendar .fc-header-toolbar { padding: 0.75rem 1rem; }
}

/* =============================================================
   480px — Extra small phones
   ============================================================= */
@media (max-width: 480px) {

    .claim-venue-text { display: none; }

    .hero-ctas { padding: 0.5rem; }
    /* Collapse quick-actions */
    .quick-actions-grid { grid-template-columns: 1fr; }
    .layout-sidebar .main-content .quick-actions-grid { grid-template-columns: 1fr; }


    /* Diary */
    .diary-stats { grid-template-columns: 1fr; }
    .block-status-grid { grid-template-columns: 1fr; }

    /* Rating */
    .rating-breakdown-grid { grid-template-columns: 1fr; }

    /* Auth */
    .auth-card { padding: 1.25rem 1rem; }

    /* Page header buttons full width */
    .page-header .btn { width: 100%; justify-content: center; }

    /* ── FullCalendar — stack into column on very small phones ── */
    .fc-header-toolbar { flex-direction: column; align-items: center; gap: 0.4rem; }
    .fc-toolbar-chunk:nth-child(2) { order: -1; }  /* title row first */
    .fc-button { padding: 0.2rem 0.4rem !important; font-size: 0.75rem !important; }

    /* Booking detail */
    .booking-detail-grid { grid-template-columns: 1fr; }
    .card.calendar, .card.calendar .fc-list-event {padding: 0;}

    /* Modal */


    /* Reduce nav button size */
    .nav-actions .btn-sm { padding: 0.38rem 0.6rem; font-size: 0.8rem; }

    /* Artist card refinements */
    .artist-card-name, .venue-card-name { font-size: 0.95rem; }
    .artist-card-meta { font-size: 0.7rem; }
    .artist-card-price .badge { font-size: 0.65rem; padding: 0.15rem 0.5rem; }

    /* Gigs list items */
    .gigs-split-item { padding: 0.6rem 0.75rem; gap: 0.6rem; }
    .gigs-split-thumb { width: 40px; height: 40px; border-radius: 6px; }
    .gigs-split-band { font-size: 0.82rem; }
    .gigs-split-venue { font-size: 0.7rem; }

    /* Date group columns even smaller */
    .vgig-date-col { width: 38px; }
    .gig-date-left { width: 38px; }
    .gnm-date-col { width: 38px; }
    .gig-date-left { width: 38px; }

    /* Page hero */
    .page-hero h1 { font-size: 1.4rem; }
    .page-hero p { font-size: 0.85rem; }

    .detail-media-carousel .video-thumb {
        flex: 0 0 calc(100% - 0.5rem);
    }
    .detail-media-carousel--gallery .gallery-thumb {
        flex: 0 0 calc(50% - 0.667rem);
    }
    .nearby-header {display: block;}
    .section-title {margin-bottom: 1rem;}
    .section-label {margin-bottom: 0;}
    .nearby-controls .btn.btn-secondary {margin-left: auto;}

    .bottom-cta { padding: 2rem 1.25rem 2.5rem; }

    .venue-header-badges {position: static; align-items: center;}
    .detail-layout .venue .d-flex {align-items: flex-start;}
    .info-box.verify {display: grid;}
    .feedback-opt-label {display: block ;}
}

/* =============================================================
   Mobile search — Design 2: Slim Bar + Slide-in Panel
   ============================================================= */
.mob-search-form { display: none; }

/* Panel must be fixed and off-screen regardless of viewport */
.mob-filter-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}
.mob-filter-panel .mob-panel-inner {
    transform: translateX(100%);
}
.mob-filter-panel.open { pointer-events: auto; }
.mob-filter-panel.open .mob-panel-inner { transform: translateX(0); }

@media (max-width: 640px) {
    .mob-search-form { display: block; margin-bottom: 0.75rem; }
    .sb-bar          { display: none !important; }
    .sb-mobile-filter{ display: none !important; }
    .sb-pills-row    { display: none !important; }

    /* Single unified search bar — input + filter button share one border */
    .mob-search-bar { margin-bottom: 0.5rem; }
    .mob-search-wrap {
        display: flex; align-items: center; gap: 0.5rem;
        background: var(--bg-elevated); border: 1.5px solid var(--border);
        border-radius: 12px; padding: 0 0 0 0.875rem; height: 50px;
        overflow: hidden; transition: border-color 0.2s;
    }
    .mob-search-wrap:focus-within { border-color: var(--accent); }
    .mob-search-wrap > svg { flex-shrink: 0; color: var(--text-muted); }
    .mob-search-wrap > input {
        flex: 1; min-width: 0; background: none; border: none; outline: none;
        color: var(--text-primary); font-size: 0.95rem;
    }
    .mob-search-wrap > input::placeholder { color: var(--text-muted); }

    /* Filter button sits inside the bar, separated by a hairline */
    .mob-filter-btn {
        display: flex; align-items: center; gap: 0.35rem;
        background: none; border: none; border-left: 1.5px solid var(--border);
        padding: 0 0.875rem; align-self: stretch;
        cursor: pointer; font-size: 0.8rem; font-weight: 600;
        color: var(--text-muted); flex-shrink: 0; position: relative;
        white-space: nowrap; -webkit-tap-highlight-color: transparent;
        transition: color 0.2s;
    }
    .mob-filter-btn.has-filters { color: var(--accent); }
    .mob-filter-badge {
        display: none; position: absolute; top: 7px; right: 7px;
        width: 15px; height: 15px; background: var(--text-secondary); border-radius: 50%;
        font-size: 0.58rem; font-weight: 800; align-items: center; justify-content: center;
        color: var(--bg-card-hover);
    }
    .mob-filter-badge.show { display: flex; }

    /* Active filter chips */
    .mob-active-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; }
    .mob-chip {
        display: inline-flex; align-items: center; gap: 0.3rem;
        background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.35);
        border-radius: 999px; padding: 0.22rem 0.65rem;
        font-size: 0.75rem; font-weight: 600; color: var(--accent); text-decoration: none;
    }
    .mob-chip-x { opacity: 0.55; font-size: 0.75rem; line-height: 1; }

    /* Panel — slides from right, starts below the nav bar */
    .mob-filter-panel {
        top: 80px;
    }
    .mob-panel-overlay {
        position: absolute; inset: 0; background: rgba(0,0,0,0.45);
        opacity: 0; transition: opacity 0.3s;
    }
    .mob-filter-panel.open .mob-panel-overlay { opacity: 1; }
    .mob-panel-inner {
        position: absolute; top: 0; right: 0; bottom: 0;
        width: 82%; max-width: 320px; background: rgba(30, 31, 46, 0.95);
        display: flex; flex-direction: column;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        overflow: hidden;
    }

    .mob-panel-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .mob-panel-header h3 { font-size: 1rem; font-weight: 700; margin: 0; }
    .mob-panel-close {
        background: none; border: none; color: var(--text-muted);
        font-size: 1.25rem; cursor: pointer; padding: 0.25rem; line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-panel-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; -webkit-overflow-scrolling: touch; }
    .mob-panel-group { margin-bottom: 1.25rem; }
    .mob-panel-group label {
        display: block; font-size: 0.68rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--text-muted); margin-bottom: 0.5rem;
    }
    .mob-panel-group select,
    .mob-panel-group input[type="date"],
    .mob-panel-group input[type="time"] {
        width: 100%; background: var(--bg-elevated); border: 1.5px solid var(--border);
        border-radius: 10px; color: var(--text-primary); padding: 0.7rem 0.9rem;
        font-size: 1rem; outline: none;
        -webkit-appearance: auto; appearance: auto;
    }
    .mob-panel-group select:focus,
    .mob-panel-group input[type="date"]:focus,
    .mob-panel-group input[type="time"]:focus { border-color: var(--accent); }

    .mob-panel-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0; }
    .mob-panel-apply {
        width: 100%; background: #fff; border: none;
        border-radius: 12px; padding: 0.9rem; font-size: 0.95rem; font-weight: 700;
        cursor: pointer; -webkit-tap-highlight-color: transparent; color: #000;
    }
}

/* =============================================================
   640px — Profile image upload: stack image above file input
   ============================================================= */
@media (max-width: 640px) {
    .image-preview-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .image-preview-row .current-image-preview { margin-bottom: 0.25rem; }
}

/* =============================================================
   640px — Wallet payout history: stack table rows as cards
   ============================================================= */
@media (max-width: 640px) {
    .payout-history-wrap table,
    .payout-history-wrap thead,
    .payout-history-wrap tbody,
    .payout-history-wrap tr,
    .payout-history-wrap td { display: block; }
    .payout-history-wrap thead { display: none; }
    .payout-history-wrap tr {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0; border-bottom: 1px solid var(--border);
        padding: 0.75rem 1rem;
    }
    .payout-history-wrap td { padding: 0.15rem 0; border: none; font-size: 0.85rem; }
    .payout-history-wrap td[colspan] { grid-column: 1 / -1; }
    .payout-history-wrap td:nth-child(5) { grid-column: 1 / -1; }

    /* Column labels */
    .payout-history-wrap td:nth-child(1)::before,
    .payout-history-wrap td:nth-child(2)::before,
    .payout-history-wrap td:nth-child(3)::before,
    .payout-history-wrap td:nth-child(4)::before,
    .payout-history-wrap td:nth-child(5)::before {
        display: block; font-size: 0.68rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--text-muted); margin-bottom: 0.2rem;
    }
    .payout-history-wrap td:nth-child(1)::before { content: "Date"; }
    .payout-history-wrap td:nth-child(2)::before { content: "Amount"; }
    .payout-history-wrap td:nth-child(3)::before { content: "Method"; }
    .payout-history-wrap td:nth-child(4)::before { content: "Status"; }
    .payout-history-wrap td:nth-child(5)::before { content: "Ref"; }
}

/* =============================================================
   380px — Very small phones (iPhone SE, Galaxy A)
   ============================================================= */
@media (max-width: 380px) {
    .container { padding: 0.75rem; }
    .nav { padding: 0 0.75rem; }
    .main-content { padding: 0.5rem 0.75rem 2rem; }

    .hero { padding: 4rem 1rem 1.5rem; }
    .hero h1 { letter-spacing: -1px; font-size: 3rem;}
    .hero-stat { padding: 0.85rem 0.3rem; }
    .hero-stat-number { font-size: 1.5rem; }

    .mobile-nav-actions { flex-direction: column; }
    .mobile-nav-actions .btn { width: 100%; justify-content: center; }

    .card { border-radius: var(--radius-sm); }
    .card > .card { border-radius: calc(var(--radius-sm) - 4px); }

    .btn-sm { padding: 0.38rem 0.65rem; font-size: 0.8rem; }

    /* Artist grid stays single column, tighten gap */
    #artists-grid { gap: 0.5rem; }
    .artist-card-img { height: 130px; }

    /* Gigs near me — prioritise list on very small screens */
    .gigs-map-pane { height: 34vh; }
}

/* =============================================================
   iOS — prevent auto-zoom on input focus (requires font-size ≥ 16px)
   ============================================================= */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}