/* =============================================================
   GigVault — app.css
   Global application styles
   ============================================================= */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Design tokens ── */
:root {
    --bg-primary:    #181824;
    --bg-secondary:  #1e1f2e;
    --bg-card:       #24253a;
    --bg-card-hover: #2d2e47;
    --bg-elevated:   #2d2e47;
    --text-primary:  #f0f0fa;
    --text-secondary:#8e8da0;
    --text-muted:    #dbdbdd;
    --accent:        #f0f0fa;
    --primary:       #ffffff;
    --accent-glow:   rgba(255,58,39,0.25);
    --accent-hover:  #ff6652;
    --accent-2:      #4ae5ef;
    --accent-2-glow: rgba(74,229,239,0.2);
    --success:       #33b887;
    --warning:       #fbe74e;
    --pending:       #F29339;
    --danger:        #FF5722;
    --info:          #2590f1;
    --border:        rgba(255,255,255,0.07);
    --border-light:  rgba(255,255,255,0.11);
    --radius:        20px;
    --radius-sm:     10px;
    --radius-lg:     30px;
    --shadow:        0 8px 40px rgba(0,0,0,0.5);
    --theme:         #B38481;
    --theme-light:   #fabbb6;
    --font-theme:    #fff;
    --font-theme-2:  #181824;
}

/* ── Light theme ── */
[data-theme="light"] {
    --bg-primary:    #f4f5fa;
    --bg-secondary:  #eaecf5;
    --bg-card:       #ffffff;
    --bg-card-hover: #f0f2fb;
    --bg-elevated:   #e8eaf3;
    --text-primary:  #0f0f1a;
    --text-secondary:#4a4860;
    --text-muted:    #6b6885;
    --accent:        #B38481;
    --primary:       #000000;
    --accent-glow:   rgba(229,45,26,0.15);
    --accent-hover:  #c52010;
    --accent-2:      #0091a0;
    --accent-2-glow: rgba(0,145,160,0.15);
    --success:       #008000;
    --border:        rgba(0,0,0,0.08);
    --border-light:  rgba(0,0,0,0.13);
    --shadow:        0 8px 40px rgba(0,0,0,0.1);
    --warning:       var(--accent);
    --theme:         #B38481;
    --danger:        #ef4444;
    --font-theme:    #181824;
    --font-theme-2:  #fff;
}

/* Light mode: override hardcoded dark values */
[data-theme="light"] .nav {
    background: rgba(244,245,250,0.92);
}
[data-theme="light"] .nav-logo-icon svg,
[data-theme="light"] .auth-logo-icon svg { fill: #fff; }
[data-theme="light"] .nav-link:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .nav-link.active { background: rgba(0,0,0,0.07); }
[data-theme="light"] .btn-secondary { background: rgba(0,0,0,0.06); }
[data-theme="light"] .btn-secondary:hover { opacity: 0.7; background: rgba(255,255,255,0.07); }
[data-theme="light"] .btn-ghost:hover { opacity: 0.7; background: transparent; }
[data-theme="light"] thead { background: rgba(0,0,0,0.04); }
[data-theme="light"] .fc-daygrid-day:not(.fc-day-past):hover .fc-daygrid-day-frame { background: rgba(0,0,0,0.02); }
[data-theme="light"] .fc-day-past .fc-daygrid-day-frame { background: #fff !important; }
[data-theme="light"] .badge-info { background: rgba(59,130,246,0.12); color: #2563eb; }
[data-theme="light"] .pagination-btn { background: rgba(0,0,0,0.04); }
[data-theme="light"] a.pagination-btn:hover { background: rgba(0,0,0,0.08); }
[data-theme="light"] .gig-row:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .booking-row-mock { background: rgba(0,0,0,0.03); }
[data-theme="light"] .booking-row-mock:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .app-url-bar { background: rgba(0,0,0,0.05); }
[data-theme="light"] .app-sidebar-mock { background: rgba(0,0,0,0.04); }
[data-theme="light"] .app-detail-mock { background: rgba(0,0,0,0.03); }
[data-theme="light"] .chat-b.them { background: rgba(0,0,0,0.06); }
[data-theme="light"] .detail-action.secondary { background: rgba(0,0,0,0.06); }
[data-theme="light"] .hero-mic-bg { color: rgba(0,0,0,0.03); }
[data-theme="light"] .hero-eyebrow { border-color: rgba(0,0,0,0.15); color: var(--text-secondary); }
[data-theme="light"] .btn-hero-outline { border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .btn-hero-outline:hover { border-color: rgba(0,0,0,0.35); }
[data-theme="light"] body::before { opacity: 0.15; }
[data-theme="light"] .venue-card-badge .badge-neutral { background: rgba(0,0,0,0.08); color: var(--text-secondary); }
/* Artist/venue detail profile card — always uses cover-image dark styling regardless of theme */
.detail-layout .profile .detail-header h1,
.detail-layout .profile .detail-header { color: #fff; }
.detail-layout .profile .detail-header .badge-info { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.detail-layout .profile .detail-header .badge-location { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.2); }
.detail-layout .profile .detail-header .artist-rating-num,
.detail-layout .profile .detail-header .artist-rating-stars { color: #fff; }
.detail-layout .profile .detail-header .artist-rating-count { color: rgba(255,255,255,0.65); }
.address.text-secondary { font-size: 0.9rem; margin-top: -7px; }
[data-theme="light"] .social-follower-label { color: var(--text-muted); }
[data-theme="light"] .social-follower-count { color: var(--text-primary); }

/* Light mode: warning/yellow → accent */
[data-theme="light"] .badge-warning { background: rgb(255, 228, 196); color: rgb(165, 42, 42); }
[data-theme="light"] .artist-footer-rating { color: var(--accent) !important; }
[data-theme="light"] .alert-warning { background: rgba(229,45,26,0.08); border-color: rgba(229,45,26,0.2); color: var(--accent); }
[data-theme="light"] .payment-row .fee-label { color: var(--accent); }
[data-theme="light"] .bb-pending { background: rgba(229,45,26,0.1); color: var(--accent); }
[data-theme="light"] .testimonial-stars { color: var(--accent); }
[data-theme="light"] .t-yellow { color: var(--accent); }

/* ── Theme toggle button ── */
.theme-toggle {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.07); border: 1px solid var(--border-light);
    color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
[data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.13); }
[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.1); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── Base ── */
html { scroll-behavior: smooth; overflow-x: hidden; }
/* Standard: all elements with onclick get pointer cursor */
[onclick] { cursor: pointer; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
    /* Offset for fixed nav on all pages */
    padding-top: 85px;
}
/* Hero page: nav is absolute so the hero handles its own top spacing */
body:has(.hero-bg-photo) {
    padding-top: 0;
}

body::before {
    content: '';
    position: absolute;
    inset: 0;
    min-height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}
h1, h2 { font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -1px; line-height: 2rem; }
h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.3px; }

a { color: var(--font-theme); text-decoration: none; transition: color 0.2s; }

/* ── Navigation ── */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 2000;
    background: rgba(18,17,28,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0 2.5rem;
}
/* Added by JS after navSlideIn completes so transition never fights the animation */
.nav--slide-ready {
    transition: transform 0.3s ease;
}
.nav--hidden {
    transform: translateY(-100%);
}
/* Desktop: never hide the nav regardless of scroll direction */
@media (min-width: 641px) {
    .nav--hidden { transform: none; }
}
/* Hero section: absolute so the nav scrolls away with the page naturally */
body:has(.hero-bg-photo) .nav:not(.nav--stuck) {
    position: absolute;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
/* Entering hero-visual: switch to fixed and slide in from above */
body:has(.hero-bg-photo) .nav.nav--stuck {
    position: fixed;
    animation: navSlideIn 0.35s ease forwards;
}
@keyframes navSlideIn {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
[data-theme="light"] .nav {
    background: rgba(244,245,250,0.92);
}
.nav-inner {
    max-width: 1300px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 85px;
}
.nav-actions .btn,
.detail-layout .btn-primary {
    padding: 0.8rem 1.2rem;
    font-weight: 800;
}
.nav-logo {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
.nav-logo:hover { color: var(--text-primary); }
.nav-logo-icon {
    width: 36px; height: 36px;
    background: linear-gradient(145deg, #C4908A 0%, #8B5D59 100%);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.nav-logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}
.nav-logo-name {
    font-weight: 900;
    letter-spacing: -0.5px;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: baseline;
}
.nav-logo-name .uk {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 1px 0;
}
.nav-logo-tagline {
    font-size: 0.47rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1;
    margin: 1px 1px 0;
}
.nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; }
.nav-links li:not(:last-child)::after,
.footer-links.guest li:not(:last-child)::after {
    content: ''; display: inline-block;
    width: 1px; height: 0.9rem;
    background: var(--border-light);
    margin-left: 0.5rem; vertical-align: middle;
}
.footer-links.guest {
    display: inline-flex; 
    flex-direction: row; 
    position: absolute;
    bottom: 95px;
}
.nav-link {
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    color: var(--text-primary); font-size: 0.9rem; font-weight: 700;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nav-link.active { color: var(--text-primary); background: rgba(255,255,255,0.07); }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.4rem; border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem; font-weight: 600;
    border: none; cursor: pointer; transition: all 0.2s;
    text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn-primary { background: var(--primary); color: #000; }
[data-theme="light"] .btn-primary {color: #fff;}
.btn-primary:hover { opacity: 0.7; }
.btn-secondary { background: rgba(255,255,255,0.07); color: var(--text-primary); border: 1px solid var(--border-light); }
.btn-secondary:hover { opacity: 0.7; }
.btn-success { background: var(--success); color: #fff; border-radius: 50px; }
.btn-success:hover { opacity: 0.7; }
.btn-danger { background: var(--danger); color: #fff; border-radius: 50px; }
.btn-danger:hover { opacity: 0.7; }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid rgba(255,58,39,0.4); }
.btn-outline:hover { opacity: 0.7; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid transparent; }
.btn-ghost:hover { opacity: 0.7; }
.btn-sm { font-size: 0.8rem; }
.btn-lg { padding: 0.85rem 2rem; font-size: 1rem; }
.btn-icon { padding: 0.5rem; border-radius: var(--radius-sm); }

/* ── Cards ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color 0.2s;
}
.card:hover { border-color: var(--border-light); }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem; padding-bottom: 1rem;
}
.card-header h3 { font-size: 1.05rem; }

/* ── Forms ── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
    display: block; margin-bottom: 1rem;
    font-size: 0.82rem; font-weight: 500; color: var(--text-secondary);
}
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 0.7rem 1rem;
    background: var(--bg-secondary); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-family: 'Inter', sans-serif; font-size: 0.875rem;
    transition: border-color 0.2s;
    color-scheme: dark;
}
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea { color-scheme: light; }
.form-select {
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
}
.form-select:disabled { opacity: 0.45; cursor: not-allowed; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: var(--theme);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-error { color: var(--danger); font-size: 0.78rem; margin-top: 0.25rem; }

.password-field-wrap { position: relative; }
.password-field-wrap .form-input { padding-right: 2.75rem; }
.password-toggle-btn {
    position: absolute; top: 50%; right: 0.65rem; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; padding: 0; border: none; background: none;
    color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm);
}
.password-toggle-btn:hover { color: var(--text-primary); }
.password-toggle-btn svg { width: 18px; height: 18px; }
.password-toggle-btn .icon-eye-off { display: none; }
.password-toggle-btn.is-visible .icon-eye { display: none; }
.password-toggle-btn.is-visible .icon-eye-off { display: block; }

.bio-clamp {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
    overflow: hidden;
}
.bio-clamp.is-expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.bio-readmore-btn {
    margin-top: 0.5rem; background: none; border: none; padding: 0;
    color: var(--theme); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.bio-readmore-btn:hover { text-decoration: underline; }
.form-hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.25rem; }
.input-prefix-wrap { display: flex; align-items: stretch; }
.input-prefix { display: flex; align-items: center; padding: 0 0.65rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--text-muted); font-size: 0.875rem; white-space: nowrap; }
.input-with-prefix { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Drop Shadow ── */
.card, .city-card, .venue-card, .artist-card
{ box-shadow: 0 1px 44px rgba(0, 0, 0, 0.15); }
/* ── Tables ── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
thead { background: rgba(0,0,0,0.2); }
th {
    padding: 0.75rem 1rem; text-align: left;
    font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
}
td { padding: 0.85rem 1rem; border-top: 1px solid var(--border); font-size: 0.875rem; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ── Badges ── */
.badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.65rem; border-radius: 7px;
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2px;
}
.badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.badge-success { background: rgba(51,184,135,0.15); color: var(--success); }
.badge-warning { background: rgba(251,231,78,0.12); color: var(--warning); }
.badge-danger  { background: rgba(239,68,68,0.15);  color: var(--danger); }
.badge-info    { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.badge-neutral { background: rgba(83,86,118,0.25);  color: var(--text-secondary); }
.badge-location { color: var(--text-primary); border: 1px solid var(--border-light); }
.badge.price {
    position: absolute;
    bottom: 5px;
    left: 10px; 
}
.badge.price.badge-default {
    color: #fff;
    border: 1px solid var(--border-light);
    background: rgba(0, 0, 0, 0.6);
}
.badge-default { color: var(--text-primary); border: 1px solid var(--border-light); }
.artist-card-badge .badge,
.venue-card-badge .badge {
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
}
.venue.card .share-button { position: absolute; top: 1rem; right: 1rem; }
.venue-header-badges .btn-primary { padding: 0.5rem; gap: 0.3rem; }
.artist-card-badge .badge-warning  {
    background: linear-gradient(145deg, #C4908A 0%, #8B5D59 100%);
    color: #fff;
    font-weight: 800; }
#artists-grid.list-view .badge-warning {background: none;}
.artist-card-badge .badge-success,
.venue-card-badge .badge-success  { background: rgba(51,184,135,0.3); color: #4dd9a8; }
.artist-card-badge .badge-neutral,
.venue-card-badge .badge-neutral  { background: rgba(30,31,46,0.6); color: var(--text-secondary); }
.venue-card-badge .badge-warning  { background: rgba(251,231,78,0.25); color: #f5e040; }

.verified-badge { color: var(--info); flex-shrink: 0; vertical-align: -2px; }

/* ── Stats ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; transition: background 0.15s, border-color 0.15s; }
.stat-card:hover { border-color: var(--border-light); }
a.stat-card:hover { background: var(--bg-card-hover); border-color: var(--border-light); }
.stat-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.25rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -1px; }
.stat-value.accent { color: var(--pending); }

/* ── Quick action cards ── */
.quick-action-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text-primary);
}
.quick-action-card:hover {
    border-color: var(--border-light);
    background: var(--bg-card-hover);
}

/* ── Layout ── */
.container { max-width: 1300px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.page-header {
    padding: 2rem 0 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
}
.page-header h1 { font-size: 1.75rem; letter-spacing: -0.5px; }
.page-content { padding-bottom: 3rem; }


/* ── Inline alerts (used within page content) ── */
.alert {
    padding: 0.875rem 1.25rem; border-radius: var(--radius-sm);
    margin-bottom: 1.5rem; font-size: 0.875rem; align-items: center; gap: 0.75rem;
    background: rgba(255, 58, 39, 0.08);
    border: 1px solid rgba(255, 58, 39, 0.3); line-height: 1.5rem;
}
.alert.alert-warning svg {margin: -3px 5px;}
.alert-success { background: rgba(51,184,135,0.1); border: 1px solid rgba(51,184,135,0.2); color: var(--success); }
.alert-error   { background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.2);  color: var(--danger); }
.alert-info    { background: rgba(37,144,241,0.1); border: 1px solid rgba(37,144,241,0.2); color: var(--info); }
.alert-warning { background: rgba(251,231,78,0.1); border: 1px solid rgba(251,231,78,0.2); color: #e8d840; }

/* ── Toast notifications (flash messages) ── */
#toast-stack {
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.2);
    width: 340px;
    max-width: calc(100vw - 40px);
    pointer-events: all;
    position: relative;
    overflow: hidden;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
[data-theme="light"] .toast {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
}
.toast.toast-in {
    transform: translateX(0);
    opacity: 1;
}
.toast.toast-out {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.25s ease-in, opacity 0.2s ease;
}

/* Coloured left accent bar */
.toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 4px 0 0 4px;
}
.toast-success::before { background: var(--success); }
.toast-error::before   { background: var(--danger); }
.toast-info::before    { background: var(--info); }
.toast-warning::before { background: var(--warning); }

.toast-icon {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.toast-success .toast-icon { background: rgba(51,184,135,0.12); }
.toast-error   .toast-icon { background: rgba(239,68,68,0.12); }
.toast-info    .toast-icon { background: rgba(37,144,241,0.12); }
.toast-warning .toast-icon { background: rgba(251,231,78,0.1); }

.toast-body { flex: 1; min-width: 0; padding-top: 1px; }
.toast-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
}
.toast-success .toast-title { color: var(--success); }
.toast-error   .toast-title { color: var(--danger); }
.toast-info    .toast-title { color: var(--info); }
.toast-warning .toast-title { color: var(--warning); }
[data-theme="light"] .toast-warning .toast-title { color: var(--text-primary); }

.toast-msg {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.toast-dismiss {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 2px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
}
.toast-dismiss:hover { color: var(--text-primary); background: var(--bg-elevated); }

/* Timer bar at bottom of toast */
.toast-timer {
    position: absolute;
    bottom: 0; left: 3px; right: 0; height: 2px;
    border-radius: 0 0 4px 0;
    transform-origin: left;
}
.toast-success .toast-timer { background: var(--success); }
.toast-error   .toast-timer { background: var(--danger); }
.toast-info    .toast-timer { background: var(--info); }
.toast-warning .toast-timer { background: var(--warning); }

/* ── Pagination ── */
.pagination-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 0; width: 100%; text-align: center; }
.pagination { display: flex; align-items: center; gap: 0.25rem; margin-top: 1rem; }
.pagination-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding: 0 0.6rem;
    border-radius: 50px; font-size: 0.82rem; font-weight: 500;
    color: var(--text-secondary); border: 1px solid var(--border);
    text-decoration: none; transition: all 0.15s;
}
a.pagination-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); border-color: var(--border-light); }
.pagination-btn.active { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--accent); }
.pagination-btn.disabled { opacity: 0.35; cursor: default; }
.pagination-results { font-size: 0.78rem; color: var(--text-muted); }

/* ── Grid layouts ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }


/* ── Notification ── */
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; }
.notif-count { background: var(--danger); color: #fff; font-size: 0.65rem; padding: 0.1rem 0.5rem; border-radius: 50px; font-weight: 700; }
.nav-actions .notif-count {padding: 0.2rem 0.5rem; }

#notif-backdrop { position: fixed; inset: 0; z-index: 1099; }
#notif-dropdown {
    position: fixed;
    top: 90px;
    right: 2.5rem; /* matches nav right padding */
    width: 360px;
    max-height: 480px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
#notif-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
/* ≤1024px: nav right padding drops to 1rem — match it */
@media (max-width: 1024px) {
    #notif-dropdown {
        top: 85px;
        right: 1rem;
        width: min(360px, calc(100vw - 2rem));
    }
}
/* Small mobile: account for bottom nav height */
@media (max-width: 480px) {
    #notif-dropdown {
        max-height: calc(100dvh - 85px - 70px);
        border-radius: var(--radius-sm);
    }
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    cursor: pointer;
}
.notif-subtitle { color: var(--text-primary); font-weight: 400; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-card-hover); }
.notif-item.unread { background: rgba(255,58,39,0.05); }
.notif-item.unread:hover { background: rgba(255,58,39,0.09); }
.notif-icon { flex-shrink: 0; margin-top: 0.1rem; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.2rem; }
.notif-msg { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; margin-bottom: 0.25rem; }
.notif-time { font-size: 0.72rem; color: var(--text-muted); }
.notif-dot-right { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; margin-top: 0.35rem; }

/* ── Calendar overrides ── */
.fc {
    background: var(--bg-card); border-radius: var(--radius); padding: 1rem;
    --fc-button-bg-color: var(--bg-elevated);
    --fc-button-border-color: var(--border);
    --fc-button-text-color: var(--text-primary);
    --fc-button-hover-bg-color: var(--bg-card-hover);
    --fc-button-hover-border-color: var(--border-light);
    --fc-button-active-bg-color: var(--bg-secondary);
    --fc-button-active-border-color: var(--border-light);
    --fc-list-event-hover-bg-color: var(--bg-card-hover);
}
.fc .fc-highlight,
.fc-timegrid .fc-highlight { display: none !important; opacity: 0 !important; }
.fc-timegrid td:hover,
.fc-timegrid-col:hover,
.fc-timegrid-slot:hover,
.fc-timegrid-col-bg:hover { background-color: transparent !important; background: transparent !important; }
/* Booking event hover — opacity change */
.fc-timegrid-event:hover, .fc-daygrid-event:hover { opacity: 0.8; transition: opacity 0.15s; }
/* List view hover — darken for light theme */
[data-theme="light"] .fc { --fc-list-event-hover-bg-color: rgba(0,0,0,0.06); }
[data-theme="light"] .fc-theme-standard .fc-list-event:hover td { background-color: rgba(0,0,0,0.06) !important; }
/* List view — remove date nav links, style as plain text */
.fc .fc-list-day-text, .fc .fc-list-day-side-text { pointer-events: none; text-decoration: none !important; color: var(--text-primary) !important; font-weight: 600; }
.fc .fc-toolbar-title { font-family: 'Inter', sans-serif; color: var(--text-primary); }
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus { box-shadow: none !important; }
.fc .fc-button-group, button.fc-today-button.fc-button.fc-button-primary { font-size: 0.95rem; font-weight: 700; } 
.fc .fc-button-group .fc-button { border-radius: 0 !important; }
.fc .fc-button-group .fc-button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
.fc .fc-button-group .fc-button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.fc .fc-daygrid-day { background: var(--bg-secondary); border-color: var(--border) !important; }
.fc-day-past .fc-daygrid-day-frame { background: var(--bg-card-hover) !important; }
.fc-theme-standard .fc-list-day-cushion { background: var(--bg-elevated) }
.fc-theme-standard .fc-scrollgrid { border: 1px solid var(--fc-button-border-color); }
.fc-theme-standard .fc-list { border: 1px solid var(--accent-2-glow) }
[data-theme="light"] .fc .fc-daygrid-day { background: var(--bg-primary); }
.fc .fc-day-today { background: transparent !important; }
.fc .fc-col-header-cell, .fc-timegrid-axis { background: var(--bg-elevated) !important; color: var(--text-muted); }
[data-theme="light"] .fc .fc-col-header-cell { background: #fff; color: var(--text-muted);}
.fc .fc-daygrid-day-number { color: var(--text-secondary); }
/* Week & list view clickable cells/rows */
.fc-list-event, .fc-list-event td { cursor: pointer; }
.fc-timegrid-event, .fc-daygrid-event { cursor: pointer; }
.fc-theme-standard td, .fc-theme-standard th { border: solid 1px var(--fc-button-border-color) };

/* ── Diary — FullCalendar interaction overrides ── */
.fc-col-header-cell .fc-scrollgrid-sync-inner a { pointer-events: none; text-decoration: none; color: inherit; cursor: default; }
.fc-daygrid-day:not(.fc-day-past) { cursor: pointer; }
.fc-daygrid-day:not(.fc-day-past):hover .fc-daygrid-day-frame { background: rgba(255,255,255,0.07); }
.fc-day-past .fc-daygrid-day-frame { opacity: 0.5; }
.fc-day-past .fc-daygrid-event { cursor: pointer; opacity: 1; }
.fc .fc-scrollgrid-section-sticky > * { background: transparent !important; }
/* Time-grid compact sizing */
.fc-timegrid-slot { height: 2.2rem; }
.fc-timegrid-slot-label { font-size: 0.72rem; opacity: 0.7; }
.fc-timegrid-axis { width: 44px; }
.fc-col-header-cell-cushion { font-size: 0.8rem; padding: 0.3rem 0.2rem; }
.fc-timegrid-event .fc-event-title { font-size: 0.72rem; }
.fc-list-event-title a { color: inherit !important; text-decoration: none; }
/* Toolbar button icon injection */
.fc-button svg { display: inline; vertical-align: middle; margin-right: 3px; margin-top: -1px; pointer-events: none; }
/* Diary FAB (add to date on mobile list view) */
.diary-fab { display: none; position: fixed; bottom: 4.5rem; right: 1.5rem; z-index: 200; width: 52px; height: 52px; border-radius: 50%; background: var(--theme); color: #fff; border: 2px solid rgba(255,255,255,0.15); cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.3); overflow: hidden; }

/* ── Payment breakdown ── */
.payment-breakdown { background: var(--bg-secondary); border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--border); }
.payment-row { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.875rem; }
.payment-row.total { border-top: 2px solid var(--border); margin-top: 0.5rem; padding-top: 0.75rem; font-weight: 700; font-size: 1.05rem; }
.payment-row .label { color: var(--text-secondary); }
.payment-row .fee-label { color: var(--warning); font-size: 0.82rem; }

/* ── Search bar ── */
.search-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.search-input-wrap { flex: 1; min-width: 200px; position: relative; }
.search-input-wrap svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 16px; height: 16px; }
.search-input-wrap input {
    width: 100%; padding: 0.7rem 1rem 0.7rem 2.6rem;
    background: var(--bg-secondary); border: 1px solid var(--border-light);
    border-radius: 50px; color: var(--text-primary); font-size: 0.875rem;
}
.search-input-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ── Footer ── */
.footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 3rem 2.5rem 2rem; position: relative; z-index: 1; }
.footer-inner { max-width: 1300px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 3rem; margin-bottom: 4rem; }
.footer-brand-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; margin-top: 1.3rem; max-width: 230px; }
.footer-col-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-primary); margin-bottom: 1rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a { font-size: 0.95rem; color: var(--text-secondary); transition: color 0.15s; }
.footer-links a:hover { color: var(--text-primary); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-secondary); }
.footer-bottom a { color: var(--text-muted); }
.footer-bottom a:hover { color: var(--text-secondary); }

/* ── Modal ── */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
body:has(.modal-overlay.active) .nav,
body:has(.respond-modal-overlay.open) .nav,
body:has(.cancel-modal-overlay.open) .nav { z-index: 1; }
.modal { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; max-width: 560px; width: 90%; max-height: 80vh; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.modal-header h2 { font-size: 1.5em; font-weight: 800; }
.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.4rem; padding: 0.25rem; }

/* ── Page progress bar ── */
#gv-progress { position: fixed; top: 0; left: 0; z-index: 9999; height: 3px; width: 0; background: var(--accent); transition: width 0.2s ease, opacity 0.4s ease; pointer-events: none; opacity: 0; }
#gv-progress.active { opacity: 1; }

/* ── Skeleton ── */
.skeleton { position: relative; overflow: hidden; background: var(--bg-elevated); border-radius: var(--radius-sm); }

.scroll-load-more { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; height:120px; color:var(--text-secondary); font-size:.75rem; letter-spacing:.04em; opacity:.7; user-select:none; }
.scroll-load-more svg { animation: scrollBounce 1.2s ease-in-out infinite; }
.scroll-load-more.hidden { display:none; }
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: skeleton-shimmer 1.4s infinite;
}
[data-theme="light"] .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
}
@keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-text { height: 1rem; margin-bottom: 0.5rem; border-radius: 4px; }
.skeleton-text.short  { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.long   { width: 90%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card { height: 280px; border-radius: var(--radius); }
.skeleton-stat { height: 90px; border-radius: var(--radius); }
.skeleton-row  { height: 60px; margin-bottom: 0.5rem; border-radius: var(--radius-sm); }

/* ── Video lightbox ── */
.video-lightbox { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.8); backdrop-filter: blur(12px); align-items: center; justify-content: center; padding: 2rem; }
.video-lightbox.active { display: flex; }
.video-lightbox-inner { width: 90vw; max-width: 960px; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; position: relative; background: #000; }
.video-lightbox-inner iframe { width: 100%; height: 100%; border: none; }
.video-lightbox-close {
    position: absolute; top: 1rem; right: 1rem; z-index: 10;
    background: rgba(0,0,0,0.6); border: none; color: #fff;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; transition: background 0.2s;
}
.video-lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ── Image preview ── */
.current-image-preview { width: 100px; height: 100px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); border: 2px solid var(--border); flex-shrink: 0; }
.current-image-preview.circle { border-radius: 50%; }
.current-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.current-image-preview .placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }

/* ── Waveform ── */
.waveform { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.waveform span { display: block; width: 3px; border-radius: 2px; background: var(--theme); opacity: 0.7; animation: wave 1.2s ease-in-out infinite alternate; }
.waveform span:nth-child(2) { animation-delay: 0.1s; }
.waveform span:nth-child(3) { animation-delay: 0.2s; }
.waveform span:nth-child(4) { animation-delay: 0.3s; }
.waveform span:nth-child(5) { animation-delay: 0.2s; }
.waveform span:nth-child(6) { animation-delay: 0.1s; }
@keyframes wave { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

/* ── Page hero ── */
.page-hero {
    position: relative; padding: 60px 2.5rem 40px; text-align: center;
    z-index: 1; overflow: hidden;
}
.page-hero::before {
    content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 700px; height: 400px; pointer-events: none;
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -1.5px; margin-bottom: -0.5rem; }
.page-hero p { color: var(--text-secondary); font-size: 1rem; margin-top: 1rem;}

/* Notification bell button */
.btn-notif { position: relative; padding: 0.4rem 0.75rem !important; }
.notif-badge-float { position: absolute; top: -5px; right: -5px; }

/* Signup lightbox overlay */
.signup-lightbox-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.signup-lightbox-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); max-width: 480px; width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5); text-align: center; padding: 2.5rem 2rem;
}
.signup-lightbox-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(34,197,94,0.12); border: 2px solid rgba(34,197,94,0.25);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;
}
.signup-panel-success { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); }
.signup-panel-success-faint { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.2); }
.signup-panel-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); }
.signup-panel-danger  { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.25); }
.signup-panel-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.signup-panel-icon-success  { background: rgba(34,197,94,0.15); }
.signup-panel-icon-success-f{ background: rgba(34,197,94,0.12); }
.signup-panel-icon-warning   { background: rgba(245,158,11,0.12); }
.signup-panel-icon-danger    { background: rgba(239,68,68,0.12); }
.signup-panel-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; }
.signup-panel-body  { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }

/* Notification dropdown header */
.notif-dropdown-header {
    padding: 1rem 1.25rem 0.6rem; display: flex; align-items: center;
    justify-content: space-between; flex-shrink: 0;
}
.notif-dropdown-title { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.3px; }
.notif-mark-all {
    font-size: 0.75rem; color: var(--accent); background: none; border: none;
    cursor: pointer; font-weight: 600; padding: 0.2rem 0.4rem;
    border-radius: 4px; transition: opacity 0.15s;
}
.notif-mark-all:hover { opacity: 0.7; }
.notif-list-scroll { overflow-y: auto; padding: 0.4rem 0 0.6rem; flex: 1; }
.notif-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); font-size: 0.875rem; }
.notif-empty-icon { display: block; margin: 0 auto 0.75rem; opacity: 0.3; }

/* Logout inline form */
.form-inline { display: inline; }

/* ── Near me button ── */
.near-me-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600;
    border: 1px solid var(--border-light); background: var(--bg-elevated);
    color: var(--text-secondary); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.near-me-btn:hover { border-color: var(--accent); color: var(--accent); }
.near-me-btn.active { border-color: var(--border); background: rgba(51,184,135,0.15); color: var(--success); }
.near-me-btn svg { flex-shrink: 0; }

/* ── View toggle ── */
.view-toggle { display: inline-flex; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; flex-shrink: 0; margin-left: 2rem; }
.view-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; cursor: pointer; background: none; border: none; color: var(--text-muted); transition: all 0.15s; }
.view-toggle-btn:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.view-toggle-btn.active { background: var(--bg-elevated); color: var(--text-primary); }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 5rem 2rem; color: var(--text-muted); }
.empty-state svg { opacity: 0.3; margin-bottom: 1rem; display: block; margin-left: auto; margin-right: auto; }

/* =============================================================
   Auth pages
   ============================================================= */
.auth-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 64px); padding: 2rem;
    position: relative; z-index: 1;
}
.auth-wrap::before {
    content: ''; position: fixed;
    top: 64px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(255,58,39,0.08) 0%, transparent 65%);
    pointer-events: none;
}
.auth-card {
    max-width: 420px; width: 100%;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); padding: 2.5rem;
    box-shadow: 0 40px 80px rgba(0,0,0,0.4);
}
.auth-logo {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 1.6rem; font-weight: 900; letter-spacing: -0.5px;
    color: var(--text-primary); margin-bottom: 2rem; text-decoration: none;
}
.auth-logo:hover { color: var(--text-primary); }
.auth-logo-icon { width: 40px; height: 40px; background: linear-gradient(145deg, #C4908A 0%, #8B5D59 100%); border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-header { text-align: center; margin-bottom: 2rem; }
.auth-checkbox { accent-color: var(--accent); width: 15px; height: 15px; }
.auth-card-wide { max-width: 600px; }
.auth-inline-link { color: inherit; font-weight: 700; text-decoration: underline; }

/* Auth modal lightbox */
.auth-modal-overlay {
    position: fixed; inset: 0; z-index: 9400;
    background: rgba(0,0,0,0.72); backdrop-filter: blur(15px);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.auth-modal-card {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); padding: 3.5rem 2rem 1.75rem;
    width: 100%; max-width: 500px;
    max-height: 92vh; overflow-y: auto;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
    position: relative;
    cursor: auto;
}
.auth-modal-close {
    position: absolute; top: 1rem; right: 1rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 50%; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary); transition: color 0.15s;
    flex-shrink: 0;
}
.auth-modal-close:hover { color: var(--text-primary); }
.auth-modal-tabs {
    display: flex; gap: 0.25rem;
    background: var(--bg-elevated); border-radius: var(--radius-sm);
    padding: 0.25rem; margin-bottom: 1.75rem;
}
.auth-modal-tab {
    flex: 1; padding: 0.5rem 0.75rem; border: none; background: none;
    border-radius: calc(var(--radius-sm) - 2px); font-size: 0.875rem;
    font-weight: 600; color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.auth-modal-tab.active { background: var(--bg-card); color: var(--text-primary); }
.auth-modal-header { text-align: center; margin-bottom: 1.5rem; }
.auth-modal-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 0.25rem; }
.auth-modal-sub { font-size: 0.875rem; color: var(--text-secondary); }
.auth-modal-switch { text-align: center; margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-muted); }
.auth-modal-switch-btn { background: none; border: none; color: var(--accent); font-weight: 700; cursor: pointer; font-size: 0.85rem; padding: 0; }
.auth-modal-switch-btn:hover { text-decoration: underline; }

/* Footer logo — override mobile absolute positioning from nav-logo */
.footer-logo {
    position: static !important;
    transform: none !important;
    max-width: none !important;
    justify-content: flex-start;
}

/* =============================================================
   Home page
   ============================================================= */
.hero {
    position: relative; padding: 10rem 6%; text-align: left; overflow: hidden; z-index: 1;
    min-height: 85vh; display: flex; flex-direction: column; justify-content: center;
}

/* ── Photo background layers ── */
.hero-bg-photo {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center 28%;
    transform-origin: center;
    animation: heroBgDrift 24s ease-in-out infinite alternate;
    will-change: transform;
    background-color: #0e0b18; /* fallback until image placed */
}
@keyframes heroBgDrift {
    0%   { transform: scale(1.0) translate(0,0); }
    100% { transform: scale(1.06) translate(-1%,1%); }
}
.hero-bg-grade   { position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(18,8,28,0.28); }
.hero-bg-overlay {
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
        linear-gradient(to right, rgba(4,2,12,0.93) 0%,rgba(4,2,12,0.78) 30%,rgba(4,2,12,0.3) 58%,transparent 80%),
        linear-gradient(to bottom, rgba(4,2,12,0.55) 0%,transparent 22%),
        linear-gradient(to top,    rgba(4,2,12,0.97) 0%,rgba(4,2,12,0.5) 18%,transparent 42%);
}
.hero-bg-grain {
    position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px;
}

/* Light theme — warm cream overlay, dark text */
[data-theme="light"] .hero-bg-overlay {
    background:
        linear-gradient(to right, rgba(248,240,236,0.93) 0%,rgba(248,240,236,0.78) 32%,rgba(248,240,236,0.28) 62%,transparent 82%),
        linear-gradient(to bottom, rgba(248,240,236,0.55) 0%,transparent 22%),
        linear-gradient(to top,    rgba(248,240,236,0.97) 0%,rgba(248,240,236,0.5) 18%,transparent 42%);
}
[data-theme="light"] .hero-bg-grade { background: rgba(255,245,240,0.15); }
[data-theme="light"] .hero h1 { color: #0f0e18; }
[data-theme="light"] .hero-sub { color: var(--text-secondary); }
[data-theme="light"] .hero-eyebrow { color: var(--theme); }
[data-theme="light"] .hero-eyebrow::before { background: var(--theme); }
[data-theme="light"] .hero-sp-text { color: var(--text-secondary); }
[data-theme="light"] .hero-sp-text strong { color: var(--text-primary); }
[data-theme="light"] .hero-sp-av { border-color: rgba(248,240,236,.9); }
[data-theme="light"] .bottom-cta::before { background: none; }

/* Hero content wrapper */
.hero-content { position:relative;z-index:6;max-width:640px; }

/* ── Hero entrance — staggered slide-up fade matching hero-4-band-photo ── */
@keyframes heroSlideUp {
    from { opacity:0; transform:translateY(22px); }
    to   { opacity:1; transform:translateY(0); }
}
.hero-content .hero-eyebrow       { opacity:0; animation: heroSlideUp .7s .10s ease forwards; }
.hero-content h1                  { opacity:0; animation: heroSlideUp .7s .20s ease forwards; }
.hero-content .hero-sub           { opacity:0; animation: heroSlideUp .7s .35s ease forwards; }
.hero-content .hero-join          { opacity:0; animation: heroSlideUp .7s .45s ease forwards; }
.hero-content .hero-ctas          { opacity:0; animation: heroSlideUp .7s .55s ease forwards; }
.hero-content .hero-social-proof  { opacity:0; animation: heroSlideUp .7s .65s ease forwards; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-content .hero-eyebrow,
    .hero-content h1,
    .hero-content .hero-sub,
    .hero-content .hero-ctas,
    .hero-content .hero-social-proof { opacity:1; animation:none; }
}

/* Bottom fade — blends the hero photo into the next section */
.hero::before {
    content:'';
    position:absolute;top:0;left:0;right:0;
    height:360px;
    background:linear-gradient(to top, transparent 0%, var(--bg-primary) 100%);
    z-index:5;pointer-events:none;
}
.hero::after {
    content:'';
    position:absolute;bottom:0;left:0;right:0;
    height:220px;
    background:linear-gradient(to bottom, transparent 0%, var(--bg-primary) 100%);
    z-index:5;pointer-events:none;
}

/* Eyebrow — line + dot style replacing pill */
.hero-eyebrow {
    display:inline-flex;align-items:center;gap:.6rem;
    font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(212,168,158,.9);margin-bottom:1.75rem;
    padding:0;background:none;border:none;border-radius:0;
}

.hero-join {
    display:inline-flex;align-items:center;gap:.55rem;
    font-size:.85rem;font-weight:700;
    color:var(--success);
    padding:0;background:none;border:none;border-radius:0;box-shadow:none;
    margin-bottom:1.25rem;
}
.hero-join--cta { margin-bottom:1.25rem; }
.hero-join > span {font-weight:700;font-size:.85rem;color:var(--text-primary);}
.hero-eyebrow::before { content:'';width:24px;height:1px;background:var(--theme);display:block;flex-shrink:0; }
.hero-eyebrow-dot { width:5px;height:5px;border-radius:50%;background:var(--theme);animation:eyeDot 2s ease-in-out infinite;flex-shrink:0; }
.hero-join-dot { width:6px;height:6px;border-radius:50%;background:var(--success);animation:eyeDot 2s ease-in-out infinite;flex-shrink:0;box-shadow:0 0 6px var(--success); }
@keyframes eyeDot{0%,100%{opacity:1}50%{opacity:.3}}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#16a34a;flex-shrink:0;animation:livePulse 1.2s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

.hero h1 { font-size:clamp(3.2rem,5.8vw,5rem);font-weight:900;line-height:.9;letter-spacing:-2px;color:#fff;max-width:820px;margin:0 0 1.75rem; }

/* Social proof */
.hero-social-proof { display:flex;align-items:center;gap:.75rem;margin-top:2.25rem; }
.hero-sp-avatars { display:flex; }
.hero-sp-av { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#C4908A,#6a4a48);border:2px solid rgba(4,2,12,.8);margin-right:-8px;font-size:.58rem;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;overflow:hidden; }
.hero-sp-av img { width:100%;height:100%;object-fit:cover;display:block; }
.hero-sp-text { font-size:.8rem;color:rgba(200,198,220,.75);margin-left:12px; }
.hero-sp-text strong { color:#fff; }

/* ── Scroll hint ── */
.hero-scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    opacity: 0;
    animation: heroSlideUp .6s .9s ease forwards;
    transition: opacity .4s ease;
    cursor: default;
}
.hero-scroll-hint.hint-hidden { opacity: 0 !important; pointer-events: none; }
.hero-scroll-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.hero-scroll-chevron {
    color: rgba(255,255,255,.35);
    animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}
/* Light theme */
[data-theme="light"] .hero-scroll-label  { color: rgba(0,0,0,.3); }
[data-theme="light"] .hero-scroll-chevron { color: rgba(0,0,0,.3); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-hint  { animation: none; opacity: 1; }
    .hero-scroll-chevron { animation: none; }
}

/* ── Act-type cycling word ── */
.hero-act-wrap {
    display: inline-block;
    vertical-align: bottom;
}
.hero-act-word {
    display: inline-block;
    vertical-align: bottom;
    /* Dark: blush → rose-gold → deep rose */
    -webkit-text-stroke:2px var(--theme);
    color:transparent;
    transition: opacity .3s ease;
    white-space: nowrap;
    padding: 10px 0 15px 0;
}

.hero-act-word.act-exit {
    opacity: 0;
    transition: opacity .25s ease;
}
.hero-act-word.act-enter {
    opacity: 0;
    transition: none;
}
.hero-sub { font-size: 1rem; color: rgba(200,198,220,.8); max-width: 460px; margin-bottom: 1rem; line-height: 1.6; font-weight: 400; }
.hero-ctas { display: flex; align-items: center; justify-content: flex-start; gap: 0.9rem; margin-bottom: 0; flex-wrap: wrap; }
.btn-hero-primary {
    padding: 0.85rem 2rem; font-size: 0.975rem; font-weight: 700;
    color: #000; background: var(--primary); border: none; border-radius: 50px;
    display: inline-flex; align-items: center; gap: 0.5rem;
    transition: background 0.15s, transform 0.1s; cursor: pointer;
    box-shadow: 0 0 32px var(--accent-glow); text-decoration: none;
}
[data-theme="light"] .btn-hero-primary {color: #fff;}
.btn-hero-primary:hover { opacity: 0.7; }
.btn-hero-outline {
    padding: 0.85rem 2rem; font-size: 0.975rem; font-weight: 600;
    color: var(--text-secondary); background: none;
    border: 1px solid var(--border-light); border-radius: 50px;
    display: inline-flex; align-items: center; gap: 0.5rem;
    transition: border-color 0.15s, color 0.15s; text-decoration: none;
}
.btn-hero-outline:hover { border-color: rgba(255,255,255,0.25); color: var(--text-primary); }
.hero-stats { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; margin: 4rem; }
.hero-stat { padding: 0 2.5rem 2.5rem; border-right: 1px solid var(--border-light); text-align: center; }
.hero-stat:last-child { border-right: none; }
.hero-stat-number { font-size: 1.9rem; font-weight: 900; letter-spacing: -1.5px; line-height: 1; color: var(--text-primary); }
.hero-stat-label  { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; font-weight: 500; }
.hero-visual { max-width: 1080px; margin: 0 auto; position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-app-label { text-align: center; margin: 0 auto; line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2rem 4rem; }
.hero-app-label-headline { display: block; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 900; letter-spacing: -0.5px; background: linear-gradient(90deg, #ff3a27 0%, #f866db 55%, #4ae5ef 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-app-label-sub { display: block; font-size: 0.78rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0.1px; }
.hero-app-frame { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 24px; overflow: hidden; box-shadow: 0 60px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); }

/* ── Hero video browser frame ── */
.hero-video-browser {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 60px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
.hero-video-wrap {
    position: relative;
    width: 100%;
    /* aspect-ratio keeps the frame responsive at any viewport width */
    aspect-ratio: 16 / 9;
    background: #0d0d17;
    overflow: hidden;
}
.hero-demo-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Placeholder shown while video hasn't loaded / no file yet */
.hero-video-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(179,132,129,0.06) 0%, rgba(74,229,239,0.04) 100%);
    pointer-events: none;
    z-index: 0;
}
.hero-demo-video + .hero-video-placeholder { display: none; }
.hero-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    z-index: 1;
}
.hero-video-placeholder svg { opacity: 0.3; }
.app-titlebar { display: flex; align-items: center; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); gap: 0.5rem; }
.phone-status-bar { display: none; }
.phone-home-bar { display: none; }
.hero-video-mobile { display: none; }
.app-dot { width: 11px; height: 11px; border-radius: 50%; }
.app-dot.red    { background: #ff5f57; }
.app-dot.yellow { background: #ffbd2e; }
.app-dot.green  { background: #28c840; }
.app-url-bar { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.75rem; font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; max-width: 280px; margin: 0 auto; }

/* Demo step dots shown below mobile phone frame */
.hero-demo-steps { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 1rem 0 0; }
.hds-active-label { font-size: 0.72rem; font-weight: 600; color: var(--theme-light); letter-spacing: 0.03em; min-height: 1.1em; transition: opacity 0.15s ease; }
.hds-track { display: flex; align-items: center; justify-content: center; }
.hds-node { display: flex; align-items: center; justify-content: center; width: 20px; }
.hds-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.28); display: block; transition: all 0.3s; flex-shrink: 0; }
.hds-node.done .hds-dot { background: rgba(179,132,129,0.5); border-color: rgba(179,132,129,0.7); }
.hds-node.active .hds-dot { background: var(--theme); border-color: var(--theme); box-shadow: 0 0 0 3px rgba(179,132,129,0.22); }
.hds-conn { width: 22px; height: 1.5px; background: rgba(255,255,255,0.12); flex-shrink: 0; transition: background 0.3s; }
.hds-conn.done { background: rgba(179,132,129,0.5); }
.app-layout { display: grid; grid-template-columns: 175px 1fr 280px; min-height: 440px; }
.app-sidebar-mock { border-right: 1px solid var(--border); padding: 0 0 1.25rem; background: rgba(0,0,0,0.15); }
.app-sidebar-profile { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
.app-sidebar-avi { width: 28px; height: 28px; border-radius: 6px; color: #fff; font-size: 0.58rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-sidebar-vname { font-size: 0.7rem; font-weight: 700; color: var(--text-primary); }
.app-sidebar-vmeta { font-size: 0.58rem; color: var(--text-muted); margin-top: 1px; }
.app-sidebar-section { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); padding: 0.65rem 1.25rem 0.35rem; }
.app-sidebar-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1.25rem; font-size: 0.75rem; color: var(--text-secondary); }
.app-sidebar-item.active { background: rgba(255, 58, 39, 0.08); color: var(--text-primary); }
.app-sidebar-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 0.58rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 50px; min-width: 17px; text-align: center; }
.app-main-mock { padding: 1.5rem 1.75rem; }
.app-main-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.app-main-title { font-size: 1rem; font-weight: 700; }
.booking-row-mock { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); margin-bottom: 0.45rem; font-size: 0.76rem; cursor: pointer; transition: background 0.1s; }
.booking-row-mock:hover { background: rgba(255,255,255,0.05); }
.b-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.b-name { font-weight: 600; color: var(--text-primary); font-size: 0.78rem; }
.b-venue { color: var(--text-muted); font-size: 0.66rem; margin-top: 0.05rem; }
.b-badge { flex-shrink: 0; font-size: 0.6rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 50px; letter-spacing: 0.2px; }
.bb-confirmed { background: rgba(51,184,135,0.15); color: #33b887; }
.bb-pending   { background: rgba(251,231,78,0.12); color: #d8ca30; }
.bb-accepted  { background: rgba(37,144,241,0.15); color: #2590f1; }
.app-detail-mock { border-left: 1px solid var(--border); padding: 1.5rem; background: rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 0.85rem; }
.detail-row-mock { display: flex; justify-content: space-between; font-size: 0.72rem; }
.detail-row-mock .dl { color: var(--text-muted); }
.detail-row-mock .dv { color: var(--text-primary); font-weight: 600; }
.detail-divider-mock { height: 1px; background: var(--border); }
.chat-b { padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.68rem; line-height: 1.45; max-width: 85%; }
.chat-b.them { background: rgba(255,255,255,0.06); color: var(--text-secondary); border-radius: 4px 10px 10px 10px; }
.chat-b.me   { background: var(--font-theme); color: var(--font-theme-2); border-radius: 10px 10px 4px 10px; margin-left: auto; }
.detail-action { width: 100%; padding: 0.55rem; font-size: 0.76rem; font-weight: 700; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; }
.detail-action.primary { background: var(--font-theme); color: var(--font-theme-2); }
.detail-action.secondary { background: rgba(255,255,255,0.06); color: var(--text-secondary); border: 1px solid var(--border); }
.logos-section { padding: 2.5rem; text-align: center; position: relative; z-index: 1; }
.logos-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 1.75rem; }
.logos-grid { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }
.logo-pill { display: flex; align-items: center; gap: 0.55rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 50px; padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); transition: border-color 0.15s, color 0.15s; }
.logo-pill:hover { border-color: var(--border-light); color: var(--text-primary); }
.logo-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.public-section { padding: 80px 2.5rem; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); margin-bottom: 0.4rem; }
.section-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-primary); display: inline-block; margin-right: 2px; }
.section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -2px; line-height: 1.0; color: var(--text-primary); margin-bottom: 1.1rem; }
.section-sub { font-size: 0.975rem; color: var(--text-secondary); max-width: 460px; line-height: 1.7; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 3.5rem; }
.feature-cell { background: var(--bg-primary); padding: 2.25rem 2rem; transition: background 0.2s; }
.feature-cell:hover { background: var(--bg-secondary); }
.feature-icon-wrap { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 1.1rem; }
.icon-orange,  .icon-bg-orange  { background: rgba(255,58,39,0.12); }
.icon-cyan,    .icon-bg-cyan    { background: rgba(74,229,239,0.1); }
.icon-green,   .icon-bg-green   { background: rgba(51,184,135,0.1); }
.icon-yellow,  .icon-bg-yellow  { background: rgba(251,231,78,0.1); }
.icon-magenta                   { background: rgba(248,102,219,0.1); }
.icon-blue                      { background: rgba(37,144,241,0.1); }
.feature-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.65rem; opacity: 0.65; }
.t-orange  { color: var(--text-secondary); }
.t-cyan    { color: #4ae5ef; }
.t-green   { color: #33b887; }
.t-yellow  { color: #d8ca30; }
.t-magenta { color: #f866db; }
.t-blue    { color: #2590f1; }
.b-avatar, .app-detail-artist-icon, .app-sidebar-avi { background: linear-gradient(145deg, #C4908A 0%, #8B5D59 100%); }
.t-theme   { color: var(--theme-light); }
[data-theme="light"] .t-theme   { color: var(--theme); font-weight: 900; }
.icon-theme   { color: var(--text-muted); background: var(--bg-card);}
.feature-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.45rem; letter-spacing: -0.2px; }
.feature-desc  { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; }
.full-divider { height: 1px; background: var(--border); max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; padding: 80px 2.5rem; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.split-section.reverse { direction: rtl; }
.split-section.reverse > * { direction: ltr; }
.split-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.1rem; color: var(--text-primary); }
.split-title { font-size: clamp(1.8rem, 3vw, 2.75rem); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; color: var(--text-primary); margin-bottom: 0.9rem; }
.split-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 1.5rem; }
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }
.check-icon { width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.check-cyan   { background: rgba(74,229,239,0.12); color: #4ae5ef; }
.check-success {color: #33b887; background: rgba(51, 184, 135, 0.1);}
.mini-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.mini-card + .mini-card { margin-top: 0.75rem; }
.testimonials-section { padding: 80px 2.5rem; position: relative; z-index: 1; }
.testimonials-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 400px; background: radial-gradient(ellipse, rgba(74,229,239,0.04) 0%, transparent 70%); pointer-events: none; }
.testimonials-header { text-align: center; max-width: 540px; margin: 0 auto 3rem; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 1200px; margin: 0 auto; }
.testimonial-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; transition: border-color 0.2s, transform 0.2s; }
.testimonial-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
.testimonial-card.featured { background: linear-gradient(135deg, rgba(255,58,39,0.08), rgba(248,102,219,0.04)); border-color: rgba(255,58,39,0.2); }
.testimonial-stars { color: #d8ca30; font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 1rem; }
.testimonial-quote { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.25rem; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.testimonial-name { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.testimonial-role { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }
.nearby-section { padding: 70px 2.5rem; position: relative; z-index: 1; }
.nearby-section.no-padding-bottom {padding-bottom: 0;}
.nearby-header { max-width: 1200px; margin: 0 auto 2rem; display: flex; align-items: flex-end; justify-content: space-between; }
.nearby-grid  { max-width: 1200px; margin: -12px auto; padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; overflow: visible; }
.artists-carousel-wrap { max-width: 1200px; margin: -12px auto; padding: 12px; position: relative; }
.artists-carousel { display: flex; gap: 1.25rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 5rem; }
.artists-carousel::-webkit-scrollbar { display: none; }
.artists-carousel .artist-card,
.artists-carousel .venue-card { flex: 0 0 calc((100% - 2 * 1.25rem) / 3); scroll-snap-align: start; }
.carousel-controls { display: flex; gap: 0.5rem; }
.carousel-btn { width: 2rem; height: 2rem; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.carousel-btn:hover { background: var(--bg-card); border-color: var(--border-light); }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
.nearby-grid-4 { max-width: 1200px; margin: -12px auto; padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; overflow: visible; }
.bottom-cta { position: relative; padding: 80px 2.5rem 100px; text-align: center; overflow: hidden; z-index: 1; }
.bottom-cta::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse, rgb(179, 132, 129, 0.12) 0%, transparent 65%); pointer-events: none; }
.bottom-cta h2 { font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 900; letter-spacing: -3px; line-height: 0.95; color: var(--text-primary); max-width: 680px; margin: 0 auto 1.25rem; }
.bottom-cta h2 em { font-style: normal; color: var(--theme); }
.bottom-cta p { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1rem; max-width: 420px; margin-left: auto; margin-right: auto; }

/* =============================================================
   Artists page
   ============================================================= */

/* Artist grid/list layout */
#artists-grid, .artists-grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.artist-grid-row { display: contents; }
.artist-list-item-wrap { display: none; }
/* List view — switch to search-item style */
#artists-grid.list-view { display: grid; flex-direction: column; gap: 0; grid-template-columns: 1fr 1fr; overflow: hidden;}
#artists-grid.list-view .artist-grid-row { display: contents; }
#artists-grid.list-view .artist-grid-card-wrap { display: none; }
#artists-grid.list-view .artist-list-item-wrap { display: block; }
#artists-grid.list-view .artist-name-rating { display: inline-flex !important; }
#artists-grid.list-view .artist-footer-rating { display: none; }
.avail-badge-list { display: none; }
#artists-grid.list-view .avail-badge-list { display: inline-flex; }
.book-btn-list { display: none; }
#artists-grid.list-view .book-btn-list { display: inline-flex; }

/* List view is a 2-column grid (grid-template-columns: 1fr 1fr above). The
   outer corners are computed in PHP (artists.blade.php) rather than via pure
   :nth-child CSS, because a :nth-child-only approach breaks whenever the
   result count is odd (the last row only has one item, shifting which item
   is actually in each corner) — these classes just apply whatever PHP decided. */
.list-corner-tl { border-top-left-radius: var(--radius); }
.list-corner-tr { border-top-right-radius: var(--radius); }
.list-corner-bl { border-bottom-left-radius: var(--radius); }
.list-corner-br { border-bottom-right-radius: var(--radius); }

.artist-card-areas { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-secondary); flex-wrap: wrap; margin-bottom: 0.4rem; }
.artist-card-price { display: flex; align-items: center; gap: 0.4rem; }
.artist-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: background 0.15s, transform 0.25s, border-color 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; }
.artist-card:hover, .venue-card:hover { transform: translateY(-3px); border-color: rgb(179, 132, 129, 0.3); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }

/* Top-featured card — the single nearest featured artist, highlighted within
   the combined nearest-to-furthest grid (grid view only). Same border as a
   regular card — only the glow box-shadow marks it as featured. */
.artist-card--top-featured {
    border: 1px solid var(--border);
    box-shadow: 0 0 0 1px rgba(196,144,138,0.2), 0 8px 30px rgba(196,144,138,0.18);
}
.artist-card--top-featured:hover {
    box-shadow: 0 0 0 1px rgba(196,144,138,0.25), 0 12px 40px rgba(0,0,0,0.35);
}

.artist-card-link { text-decoration: none; color: inherit; display: block; flex: 1; }
.artist-card-link:hover { color: inherit; }
/* Book button on browse card — no top radius, flush with card bottom */
.artist-card--venue .artist-card-book-btn {
    border-radius: 0 0 var(--radius) var(--radius);
    margin-bottom: 0;
}
.artist-card-img { height: 180px; background: var(--bg-elevated); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.artist-card-img.card-img-loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s infinite; z-index: 1; }
.artist-card-img::after, .venue-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); pointer-events: none; }
.artist-card-badge, .venue-card-badge { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; gap: 0.3rem; z-index: 1; }
.artist-card-body { padding: 1.25rem; }
.artist-card-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; letter-spacing: -0.2px; }
.artist-card-meta { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 1.25rem; flex-wrap: wrap; }
.artist-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.artist-footer-rating { font-size: 0.78rem; font-weight: 600; margin-left: auto; }
.artist-name-rating { font-size: 0.7rem; }
.artist-card-img-placeholder,
.venue-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); opacity: 0.3; }
.artist-meta-icon { display: inline-flex; align-items: center; }
.filter-count-badge { background: var(--bg-card-hover); color: var(--text-primary); border-radius: 999px; font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.45rem; line-height: 1.4; }
.filter-field-group { display: flex; flex-direction: column; gap: 0.3rem; min-width: 140px; }
.filter-field-group-wider { display: flex; flex-direction: column; gap: 0.3rem; min-width: 150px; }
.near-me-location { display: flex; align-items: center; gap: 0.4rem; padding-top: 1.75rem; font-size: 1rem; color: var(--text-primary); }
.layout-sidebar .near-me-location {padding: 0 0 1rem;}
.container.pb-4:has(.near-me-location) { padding-bottom: 0; }
/* =============================================================
   Venues page
   ============================================================= */

#venues-grid, .venues-grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
#venues-grid.list-view { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
#venues-grid.list-view .venue-card { background: none; border: none; border-bottom: 1px solid var(--border); box-shadow: none; display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; }
#venues-grid.list-view .venue-card-img { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--border); }
#venues-grid.list-view .venue-card-badge { display: none; }
#venues-grid.list-view .venue-card-img > div > svg { width: 20px; height: 20px; }
#venues-grid.list-view .venue-card-body { padding: 0; flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 1rem; }
#venues-grid.list-view .venue-status-row { display: none; }
#venues-grid.list-view .venue-card-name { grid-column: 1; grid-row: 1; margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#venues-grid.list-view .venue-card-meta { grid-column: 1; grid-row: 2; margin-bottom: 0; flex-wrap: nowrap; overflow: hidden; }
#venues-grid.list-view .venue-card-footer { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.venue-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: background 0.15s, transform 0.25s, border-color 0.25s, box-shadow 0.25s; text-decoration: none; color: inherit; display: block; }
.venue-card-img { height: 180px; background: var(--bg-elevated); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.venue-card-img.card-img-loading { background: var(--bg-elevated); }
.venue-card-img.card-img-loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s infinite; z-index: 1; }
.venue-card-body { padding: 1.25rem; }
.venue-card-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; letter-spacing: -0.2px; }
.venue-card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 1.25rem; flex-wrap: wrap; }
.venue-card-footer { display: flex; align-items: center; gap: 0.5rem; }

/* =============================================================
   Gigs near me
   ============================================================= */


/* ── Gigs grid (legacy — kept for potential reuse) ── */
.gigs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }
.city-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.city-card-header { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.city-card-header-left { display: flex; align-items: center; gap: 0.55rem; }
.city-card-header-left span { font-weight: 700; font-size: 1rem; }
.city-card-distance { font-size: 0.75rem; color: var(--text-muted); }
.city-card-body { padding: 0.35rem 0; }
.gig-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 1.4rem; transition: background 0.12s; text-decoration: none; color: inherit; }
.gig-row:hover { background: rgba(255,255,255,0.04); }
.gig-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; }
.gig-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gig-info { flex: 1; min-width: 0; }
.gig-artist { font-weight: 800; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gig-venue { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gig-date { text-align: right; flex-shrink: 0; }
.gig-date-day { font-weight: 700; color: var(--accent); font-size: 0.8rem; }
.gig-date-today { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: #16a34a; }
.gig-date-tomorrow { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: #d97706; }

/* ── Leaflet map overrides ── */
.leaflet-tile-pane { filter: brightness(0.85) saturate(0.9); }
/* Force dark bg on container AND tile pane so Leaflet's default #ddd never shows */
.leaflet-container { background: #0d0c18 !important; font-family: inherit; }
.leaflet-map-pane,
.leaflet-tile-pane { background: #0d0c18; }
.leaflet-control-zoom a { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
.leaflet-control-zoom a:hover { background: var(--bg-card) !important; }
.leaflet-control-attribution { background: rgba(13,14,26,0.75) !important; color: var(--text-muted) !important; font-size: 0.6rem !important; }
.leaflet-control-attribution a { color: var(--text-muted) !important; }
/* Each tile fades in so there's no white pop during zoom */
.leaflet-tile { animation: tileReveal 0.18s ease forwards; }
@keyframes tileReveal { from { opacity: 0; } to { opacity: 1; } }
[data-theme="light"] .leaflet-tile-pane { filter: saturate(0.72) sepia(0.28) brightness(1.02); }
[data-theme="light"] .leaflet-container { background: #f4ede9 !important; }
[data-theme="light"] .leaflet-map-pane,
[data-theme="light"] .leaflet-tile-pane { background: #f4ede9; }
[data-theme="light"] .leaflet-control-attribution { background: rgba(255,255,255,0.8) !important; color: #666 !important; }
[data-theme="light"] .leaflet-control-attribution a { color: #666 !important; }
/* ── Light theme: warm cream overlay on map — real DOM element above tile pane ── */
.gigs-map-light-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 450;
    pointer-events: none;
}
[data-theme="light"] .gigs-map-light-overlay {
    display: block;
    background: linear-gradient(160deg, rgba(248,240,236,0.55) 0%, rgba(248,240,236,0.25) 50%, rgba(248,240,236,0.48) 100%);
}

/* ── Gigs Near Me — Option C Split Layout ── */
.gigs-split {
    display: flex;
    height: calc(100vh - 100px); /* 100px = nav height */
    overflow: hidden;
}

/* ── List pane ── */
.gigs-list-pane {
    width: 500px; flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}
/* Sidebar header */
.gigs-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.gigs-pane-title {
    display: flex; align-items: center; gap: 0.2rem;
    font-size: 1.1rem; font-weight: 800; letter-spacing: -0.3px;
}
.gigs-view-toggle {
    display: flex; gap: 0.3rem;
}
.gigs-view-btn {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.7rem; border-radius: 8px;
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); transition: all 0.15s;
}
.gigs-view-btn:hover { color: var(--text-primary); border-color: var(--border-light); }
.gigs-view-btn.active {
    background: var(--bg-elevated); color: var(--text-primary);
    border-color: var(--border-light);
}

/* Search bar */
.gigs-search-wrap {
    position: relative; padding: 0.65rem 1.1rem; flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.gigs-search-icon {
    position: absolute; left: 1.75rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.gigs-search-input {
    width: 100%; padding: 0.55rem 0.9rem 0.55rem 2.2rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 10px; font-size: 0.8rem; color: var(--text-primary);
    transition: border-color 0.15s;
}
.gigs-search-input:focus { outline: none; border-color: var(--accent-2); }
.gigs-search-input::placeholder { color: var(--text-muted); }

/* Filter row */
.gigs-filters-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.1rem; flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
}
.gigs-filters-row::-webkit-scrollbar { display: none; }
.gigs-filter-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0;
    padding: 0.4rem 0.8rem; border-radius: 99px;
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-elevated);
    color: var(--text-muted); transition: all 0.15s; white-space: nowrap;
}
.gigs-filter-btn:hover { color: var(--text-primary); border-color: var(--border-light); }
.gigs-filter-btn.active { background: var(--font-theme); color: var(--font-theme-2) }
.gigs-filter-select {
    flex-shrink: 0; padding: 0.4rem 0.65rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 99px; font-size: 0.72rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.6rem center;
    padding-right: 1.6rem; font-size: 12px !important;
}
.gigs-filter-select:focus { outline: none; border-color: var(--accent-2); }
.gigs-filter-select option { background: var(--bg-card); }
/* Icon-wrap: desktop — transparent wrapper, select shows normally */
.gf-icon-wrap { position: relative; display: inline-flex; align-items: center; }
.gf-icon { display: none; }

/* Results count bar */
.gigs-results-bar {
    padding: 0.35rem 1.1rem;
    font-size: 0.7rem; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Date tabs */
.gigs-date-tabs {
    display: flex; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-primary);
}
.gigs-date-tabs::-webkit-scrollbar { display: none; }
.gigs-date-tab {
    flex-shrink: 0; padding: 0.8rem 1rem;
    font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
    background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 0.35rem;
    transition: color 0.15s, border-color 0.15s;
}
.gigs-date-tab:hover { color: var(--text-primary); }
.gigs-date-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.gigs-tab-count {
    background: rgba(255,255,255,0.07); border-radius: 99px;
    font-size: 0.6rem; padding: 0.05rem 0.4rem;
}
.gigs-date-tab.active .gigs-tab-count { background: rgba(255,58,39,0.18); color: var(--accent); }
.gigs-date-tab-select-wrap {
    flex-shrink: 0; position: relative;
    display: flex; align-items: center;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s;
}
.gigs-date-tab-select-wrap.active { border-bottom-color: var(--accent); }
.gigs-date-tab-select {
    padding: 0.8rem;
    font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
    background: none; border: none; border-bottom: none;
    cursor: pointer; white-space: nowrap;
    transition: color 0.15s;
    appearance: none; -webkit-appearance: none;
    outline: none;
}
.gigs-date-tab-select:hover { color: var(--text-primary); }
.gigs-date-tab-select.active { color: var(--accent); }
.gigs-date-tab-select option { background: var(--bg-card); color: var(--text-primary); }
.gigs-date-tab-select-arrow {
    position: absolute; right: 0rem; pointer-events: none;
    color: var(--text-muted); flex-shrink: 0;
    transition: color 0.15s;
}
.gigs-date-tab-select-wrap:hover .gigs-date-tab-select-arrow,
.gigs-date-tab-select-wrap.active .gigs-date-tab-select-arrow { color: var(--accent); }
[data-theme="light"] .gigs-date-tab-select-arrow { color: var(--text-secondary); }
[data-theme="light"] .gigs-date-tab-select-wrap:hover .gigs-date-tab-select-arrow,
[data-theme="light"] .gigs-date-tab-select-wrap.active .gigs-date-tab-select-arrow { color: var(--accent); }

/* List scroll area */
.gigs-list-scroll {
    flex: 1; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent; padding: 15px;
}
.gigs-list-scroll::-webkit-scrollbar { width: 4px; }
.gigs-list-scroll::-webkit-scrollbar-track { background: transparent; }
.gigs-list-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Date group wrappers */
.gnm-date-group { display: flex; border-bottom: 1px solid rgba(255,255,255,0.05); }
.gnm-date-group:last-child { border-bottom: none; }
.gnm-date-col {
    flex-shrink: 0; width: 54px; text-align: center;
    padding: 0.75rem 1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    color: var(--text-muted);
}
.gnm-date-day { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.gnm-date-month { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.1rem; }
.gnm-date-weekday { font-size: 0.62rem; margin-top: 0.15rem; display: flex; align-items: center; gap: 0.25rem; }
.gnm-date-weekday--today    { color: #16a34a; }
.gnm-date-weekday--tomorrow { color: #d97706; }
.gnm-group-items { flex: 1; min-width: 0; display: flex; flex-direction: column; }
[data-theme="light"] .gnm-date-group { border-bottom-color: var(--border); }
[data-theme="light"] .gnm-date-weekday--today    { color: #15803d; }
[data-theme="light"] .gnm-date-weekday--tomorrow { color: #b45309; }

/* Gig list item */
.gigs-split-item {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: background 0.12s;
}
.gigs-split-item:hover { background: var(--bg-secondary); }
.gigs-split-item.active {
    background: rgba(99,102,241,0.07);
}

/* Thumbnail */
.gigs-split-thumb {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.07); overflow: hidden;
    color: rgba(255,255,255,0.25); background: var(--bg-elevated);
}
.gigs-split-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Genre-based thumbnail tints */
.gigs-thumb--rock        { background: linear-gradient(135deg,#2a1010,#7a2020); }
.gigs-thumb--jazz        { background: linear-gradient(135deg,#0e2e1e,#1a5c35); }
.gigs-thumb--soul        { background: linear-gradient(135deg,#1e1040,#4a2060); }
.gigs-thumb--indie       { background: linear-gradient(135deg,#102030,#183060); }
.gigs-thumb--electronic  { background: linear-gradient(135deg,#001830,#004060); }
.gigs-thumb--blues       { background: linear-gradient(135deg,#1a0a2a,#5a1560); }
.gigs-thumb--pop         { background: linear-gradient(135deg,#2a0a20,#7a1550); }
.gigs-thumb--folk        { background: linear-gradient(135deg,#201808,#604818); }
.gigs-thumb--classical   { background: linear-gradient(135deg,#1a180a,#504a18); }
.gigs-thumb--default     { background: var(--bg-elevated); }

/* Item info */
.gigs-split-info { flex: 1; min-width: 0; }
.gigs-split-band { font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.15rem; }
.gigs-split-venue { font-size: 0.71rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.25rem; }
.gigs-split-tags { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.gigs-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 5px; white-space: nowrap; }
.gigs-tag--act, .gigs-tag--genre, .gigs-map-popup-chip { border: 1px solid var(--border-light); color: var(--text-primary); }
/* Chips sitting on the hero image need to be legible over any photo */
.gigs-map-popup-hero-tags .gigs-map-popup-chip {
    background: var(--fc-neutral-bg-color); border-color: rgba(255,255,255,0.18);
    color: #fff; backdrop-filter: blur(4px); gap: 0.2rem;
}
.gigs-tag--rating,
.gigs-map-popup-chip--rating { 
    background: none; color: #d8ca30; 
}
/* Item right column */
.gigs-split-right { text-align: right; flex-shrink: 0; }
.gigs-info-time { display: none; }
.gst-end { display: none; }
.list-mode .gst-end { display: inline; }
.gigs-item-date { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.1rem; }
.gigs-item-date--today    { color: #16a34a; display: inline-flex; align-items: center; gap: 0.3rem; }
.gigs-item-date--tomorrow { color: #d97706; display: inline-flex; align-items: center; gap: 0.3rem; }
.gigs-item-time, .gigs-split-time { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.gigs-item-dist { font-size: 0.65rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.25rem; }

/* Empty state */
.gigs-empty { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.gigs-empty svg { opacity: 0.3; margin-bottom: 0.75rem; }
.gigs-empty p { font-size: 0.85rem; }

/* ── Map pane ── */
.gigs-map-pane {
    flex: 1; position: relative; overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.gigs-map-pane.map-ready { opacity: 1; }
#gigsMap { width: 100%; height: 100%; }

/* ── Map blur overlay ── */
.gigs-map-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.gigs-map-overlay.active { opacity: 1; pointer-events: auto; }

/* ── In-map popup card ── */
.gigs-map-popup {
    position: fixed; top: 50%; left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0.97);
    width: 350px; z-index: 5000;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.gigs-map-popup.active {
    opacity: 1; transform: translateY(-50%) translateX(-50%) scale(1);
    pointer-events: auto;
}
.gigs-map-popup-close {
    position: absolute; top: 0.6rem; right: 0.6rem; z-index: 10;
    width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0,0,0,0.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.gigs-map-popup-close:hover { background: rgba(255,255,255,0.2); }
.gigs-map-popup-hero {
    position: relative; height: 180px; overflow: hidden;
    background: var(--bg-elevated);
    display: flex; align-items: center; justify-content: center;
}
.gigs-map-popup-img { width: 100%; height: 100%; }
.gigs-map-popup-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gigs-map-popup-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 45%, transparent 75%);
}
.gigs-map-popup-hero-tags {
    position: absolute; bottom: 0.65rem; left: 0.7rem; right: 0.7rem;
    display: flex; gap: 0.3rem; flex-wrap: wrap; z-index: 2; align-items: center;
}
.gigs-map-popup-hero-tags .gigs-map-popup-chip--rating { margin-left: auto; }
.gigs-map-popup-body { padding: 0.9rem 1rem 0.6rem; }
.gigs-map-popup-artist {
    font-size: 1.05rem; font-weight: 800; margin-bottom: 0.2rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gigs-map-popup-meta {
    font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.65rem;
    display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
}
.gigs-map-popup-sep { color: var(--border-light); }
/* Date rows */
.gigs-map-popup-dates {
    margin-bottom: 0.65rem;
    display: flex; flex-direction: column; gap: 0;
}
/* Tag chips row — used both in hero overlay and as fallback */
.gigs-map-popup-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.gigs-map-popup-chip {
    display: inline-flex; align-items: center;
    font-size: 0.69rem; font-weight: 700; padding: 0.2rem 0.6rem;
    border-radius: 99px; white-space: nowrap;
}
.gigs-map-popup-footer {
    padding: 0.6rem 1rem 0.9rem;
    display: flex; gap: 0.5rem; align-items: center;
}
.gigs-map-popup-footer .btn { flex: 1; justify-content: center; }
.gigs-popup-share-btn {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-elevated);
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.gigs-popup-share-btn:hover { color: var(--text-primary); border-color: var(--border-light); background: var(--bg-card); }

/* Share toast */
.gigs-share-toast {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(12px);
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    color: var(--text-primary); font-size: 0.8rem; font-weight: 600;
    padding: 0.55rem 1.25rem; border-radius: 99px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none; z-index: 9999;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.gigs-share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* List-only mode */
.gigs-controls-wrap { display: contents; } /* transparent by default */

.gigs-split.list-mode {
    height: auto; overflow: visible; min-height: 0;
}
.gigs-split.list-mode .gigs-map-pane { display: none; }
.gigs-split.list-mode .gigs-list-pane {
    width: 100%; max-width: 100%; border-right: none;
    align-items: center; overflow: visible; height: auto;
}
.gigs-split.list-mode .gigs-controls-wrap {
    display: block;
    width: 100%; max-width: 760px;
    margin: 1.5rem auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}
.gigs-split.list-mode .gigs-list-scroll {
    width: 100%; max-width: 760px;
    padding: 0.5rem 1rem;
    overflow-y: visible; height: auto; flex: none;
}
.gigs-split.list-mode .gigs-split-item {
    max-width: 100%; margin: 0; width: 100%;
}
.gigs-split.list-mode .gnm-date-group { max-width: 760px; margin: 0 auto; width: 100%; }
.gigs-endtime { display: none; }
.gigs-split.list-mode .gigs-endtime { display: inline; }

/* Light mode adjustments */

[data-theme="light"] .gigs-split-item.active { background: rgba(99,102,241,0.05); }
[data-theme="light"] .gigs-split-item:hover { background: rgba(0,0,0,0.03); border-radius: 20px; }
[data-theme="light"] .gigs-date-tab.active .gigs-tab-count { background: rgba(229,45,26,0.1); }
[data-theme="light"] .gigs-map-popup { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .gigs-filter-select { background: #f3f4f6; border-color: #e5e7eb; }
[data-theme="light"] .gigs-tag--rating,
[data-theme="light"] .gigs-map-popup-chip--rating { background: none; color: var(--danger); }
[data-theme="light"] .gigs-item-date--today    { color: #16a34a; }
[data-theme="light"] .gigs-item-date--tomorrow { color: #d97706; }

/* Filter-empty placeholder */
.gigs-filter-empty {
    display: none; flex-direction: column; align-items: center;
    justify-content: center; padding: 3rem 1.5rem; text-align: center;
}
.gigs-filter-empty.visible { display: flex; }
.gigs-filter-empty-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--bg-elevated); display: flex; align-items: center;
    justify-content: center; margin-bottom: 1.25rem; border: 1px solid var(--border);
}
.gigs-filter-empty-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.4rem; }
.gigs-filter-empty-sub   { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }

/* Popup date rows */
.popup-date-row { display: flex; align-items: center; font-size: 0.82rem; padding: 0.1rem 0; color: var(--text-primary); }
.popup-date-row--today    { color: #16a34a; font-weight: 700; }
.popup-date-row--tomorrow { color: #d97706; font-weight: 700; }
.popup-date-row--sep { border-bottom: 1px solid var(--border-light); }
.popup-date-dot { flex-shrink: 0; margin-right: 0.35rem; margin-top: 1px; }
.popup-date-dot--plain {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: var(--border-light);
    flex-shrink: 0; margin-right: 0.35rem; margin-top: 1px;
}
.popup-date-row.popup-date-row:first-child {padding-top: 0.5rem;}
.popup-date-row.popup-date-row:last-child {padding-bottom: 0.5rem;}
.popup-date-time { color: var(--text-muted); font-weight: 400; margin-left: 0.3rem; display:inline-flex; align-items:center; gap:0.25rem; }

/* SVG icon utilities used in gigs list */
.gigs-icon-fill     { fill: currentColor; flex-shrink: 0; }
.gigs-icon-no-shrink { flex-shrink: 0; }

/* =============================================================
   Artist detail
   ============================================================= */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.media-carousel-header { display: flex; align-items: center; justify-content: space-between; }
.detail-media-carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.detail-media-carousel::-webkit-scrollbar { display: none; }
.detail-media-carousel .video-thumb { flex: 0 0 calc(50% - 0.5rem); scroll-snap-align: start; }
.detail-media-carousel--gallery .gallery-thumb { flex: 0 0 calc(33.333% - 0.667rem); scroll-snap-align: start; }
.video-thumb { border-radius: var(--radius-sm); overflow: hidden; background: #000; aspect-ratio: 16/9; border: 1px solid var(--border); cursor: pointer; position: relative; }
.video-thumb img.video-thumb-bg { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s, transform 0.3s; opacity: 0.85; }
.video-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.82) 100%); pointer-events: none; z-index: 1; }
.video-thumb:hover img.video-thumb-bg { opacity: 1; transform: scale(1.03); }
.video-thumb-play { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 1; transition: opacity 0.2s; }
/* Bottom info row: avatar + title */
.video-thumb-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.6rem 0.6rem 0.55rem; pointer-events: none; }
.video-thumb-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.3); background: var(--bg-elevated); }
.video-thumb-title { flex: 1; font-size: 0.72rem; font-weight: 600; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.video-thumb-title:empty { display: none; }
/* Duration badge bottom-right */
.video-thumb-duration { position: absolute; top: 0.45rem; right: 0.5rem; z-index: 2; display: flex; align-items: center; gap: 0.25rem; background: rgba(0,0,0,0.75); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.68rem; font-weight: 700; color: #fff; pointer-events: none; letter-spacing: 0.02em; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.75rem; }
.gallery-thumb { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; cursor: pointer; border: 1px solid var(--border); transition: all 0.25s; position: relative; }
.gallery-thumb:hover { transform: scale(1.03); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 50%, transparent 100%); pointer-events: none; }
.lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); align-items: center; justify-content: center; cursor: pointer; padding: 2rem; }
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: var(--radius); box-shadow: 0 8px 48px rgba(0,0,0,0.6); object-fit: contain; }
.lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; background: rgba(255,255,255,0.1); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: background 0.2s; }
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: background 0.2s; }
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
.details { font-size: 0.9rem; }
 
/* =============================================================
   Venue detail
   ============================================================= */
.venue-gallery-thumb { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; position: relative; background: none; padding: 0; }
.venue-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.venue-gallery-thumb:hover img { transform: scale(1.05); }
.venue-gallery-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 50%, transparent 100%); pointer-events: none; }

/* =============================================================
   Diary (shared between artist and venue)
   ============================================================= */
.diary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.diary-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.85rem; }
.diary-stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.diary-stat-val { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.diary-stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }
.diary-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; align-items: center; }
.diary-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); }
.diary-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.time-scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin-bottom: 0.25rem; }
.time-scope-btn { padding: 0.5rem 0.25rem; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--bg-elevated); cursor: pointer; text-align: center; transition: all 0.15s; color: var(--text-secondary); }
.time-scope-btn .ts-label { font-size: 0.82rem; font-weight: 600; display: block; }
.time-scope-btn .ts-sub { font-size: 0.68rem; color: var(--text-muted); display: block; margin-top: 0.1rem; }
.time-scope-btn:hover:not(.selected) { border-color: var(--accent); }
.time-scope-btn.selected { border-color: var(--accent); background: rgba(99,102,241,0.12); color: var(--accent); }
.upcoming-gigs-list { display: flex; flex-direction: column; gap: 0; }
.upcoming-gig-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s; }
.upcoming-gig-row:last-child { border-bottom: none; }
.upcoming-gig-row:hover { background: var(--bg-card-hover); }

/* Shared base for availability / block status button grids */
.avail-status-btn, .block-status-btn {
    padding: 0.65rem 0.5rem; border-radius: var(--radius-sm);
    border: 2px solid var(--border); background: var(--bg-elevated);
    cursor: pointer; text-align: center; transition: all 0.15s; color: var(--text-secondary);
}

/* Artist availability status buttons */
.avail-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.avail-status-btn .asb-icon { font-size: 1.1rem; display: block; margin-bottom: 0.2rem; }
.avail-status-btn .asb-label { font-size: 0.82rem; font-weight: 600; display: block; }
.avail-status-btn .asb-sub { font-size: 0.7rem; color: var(--text-muted); display: block; margin-top: 0.1rem; }
.avail-status-btn:hover { border-color: var(--accent); }
.avail-status-btn.selected[data-value="available"]  { border-color: var(--success); background: rgba(16,185,129,0.1); color: var(--success); }
.avail-status-btn.selected[data-value="tentative"]  { border-color: #f59e0b; background: rgba(245,158,11,0.1); color: #f59e0b; }
.avail-status-btn.selected[data-value="unavailable"] { border-color: var(--danger); background: rgba(239,68,68,0.1); color: var(--danger); }

/* Venue block status buttons */
.block-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.block-status-btn .bsb-icon { font-size: 1.1rem; display: block; margin-bottom: 0.2rem; }
.block-status-btn .bsb-label { font-size: 0.82rem; font-weight: 600; display: block; }
.block-status-btn.selected[data-value="0"] { border-color: var(--success); background: rgba(16,185,129,0.1); color: var(--success); }
.block-status-btn.selected[data-value="1"] { border-color: var(--danger); background: rgba(239,68,68,0.1); color: var(--danger); }
.block-status-btn:hover:not(.selected) { border-color: var(--accent); }
.reason-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.reason-chip { padding: 0.3rem 0.75rem; border-radius: 20px; font-size: 0.78rem; border: 1px solid var(--border); background: var(--bg-elevated); cursor: pointer; transition: all 0.15s; color: var(--text-secondary); }
.reason-chip.selected { border-color: var(--danger); background: rgba(239,68,68,0.12); color: var(--danger); font-weight: 600; }
.upcoming-list { display: flex; flex-direction: column; gap: 0; }
.upcoming-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s; }
.upcoming-row:last-child { border-bottom: none; }
.upcoming-row:hover { background: var(--bg-card-hover); }
.booking-popup { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; min-width: 280px; }

/* =============================================================
   Gallery (shared between artist and venue)
   ============================================================= */
.gallery-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); aspect-ratio: 1; border: 1px solid var(--border); transition: all 0.2s; }
.gallery-item:hover { border-color: var(--accent); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .delete-overlay { position: absolute; top: 0.3rem; right: 0.3rem; }
.gallery-item .delete-overlay form { margin: 0; }
.gallery-item .delete-overlay .btn { width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; }
.gallery-item:hover .delete-overlay .btn { opacity: 1; }
.gallery-upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg-secondary); }
.gallery-upload-zone:hover,
.gallery-upload-zone.dragover { border-color: var(--accent); background: rgba(255,107,43,0.05); }
.gallery-upload-zone input[type="file"] { display: none; }
.gallery-count { font-size: 0.85rem; color: var(--text-muted); }
.gallery-count strong { color: var(--accent); }
.file-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.file-chip { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 50px; font-size: 0.8rem; color: var(--text-secondary); }

/* =============================================================
   Videos
   ============================================================= */
.video-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: all 0.2s; }
.video-row:hover { border-color: var(--border-light); }
.video-row .drag-handle { cursor: grab; color: var(--text-muted); flex-shrink: 0; }
.video-row input { flex: 1; }
.video-row .remove-btn { background: none; border: none; color: var(--danger); cursor: pointer; padding: 0.4rem; border-radius: var(--radius-sm); flex-shrink: 0; transition: background 0.2s; }
.video-row .remove-btn:hover { background: rgba(239,68,68,0.1); }
.video-preview { border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-primary); aspect-ratio: 16/9; }
.video-preview iframe { width: 100%; height: 100%; border: none; }
.video-count { font-size: 0.85rem; color: var(--text-muted); }
.video-count strong { color: var(--accent); }

/* =============================================================
   Opening hours
   ============================================================= */
.oh-row { display: grid; grid-template-columns: 110px 140px minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--bg-elevated); border-radius: 8px; }
.oh-times { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; min-width: 0; }
.oh-time-input { width: 0; flex: 1 1 100px; min-width: 90px; max-width: 130px; padding: 0.4rem 0.65rem; font-size: 0.85rem; height: auto; }
input[type="time"].oh-time-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: 0.4; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
/* Dark is default (no data-theme attr); set color-scheme so browser renders icons light */
:not([data-theme="light"]) input[type="date"],
:not([data-theme="light"]) input[type="time"],
:not([data-theme="light"]) input[type="datetime-local"],
:not([data-theme="light"]) input[type="month"],
:not([data-theme="light"]) input[type="week"] { color-scheme: dark; }
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="week"] { color-scheme: light; }

/* =============================================================
   FAQ
   ============================================================= */
.faq-container { max-width: 780px; }
.feedback-container { max-width: 680px; }
.feedback-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.4rem; }
.feedback-opt-label { cursor: pointer; border-radius: var(--radius); padding: 1rem; display: flex; align-items: flex-start; gap: 0.75rem; transition: border-color 0.15s; }
.feedback-opt-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feedback-opt-icon-suggestion { background: rgba(99,102,241,0.12); color: var(--primary); }
.feedback-opt-icon-issue { background: rgba(239,68,68,0.1); color: var(--danger, #ef4444); }
.feedback-opt-title { font-weight: 700; font-size: 0.9rem; }
.feedback-opt-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }

/* Opening hours */
.oh-google-warning { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.85rem 1rem; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--warning); }
.oh-day-label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.oh-type-select { padding: 0.4rem 0.65rem; font-size: 0.85rem; height: auto; border-radius: 6px; }
.oh-to-label { color: var(--text-muted); font-size: 0.85rem; flex-shrink: 0; }

/* Venue profile address display */
.address-display-grid { display: grid; gap: 0.4rem; font-size: 0.9rem; }
.address-meta-label { text-transform: uppercase; letter-spacing: 0.4px; }
.address-city-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; margin-top: 0.35rem; }
.address-field-val { margin-top: 0.15rem; }

/* Diary page */
.diary-legend-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.diary-legend-hint { font-size: 0.78rem; color: var(--text-muted); margin-left: auto; }
.diary-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--bg-elevated); border: 2px solid var(--border); }
.diary-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.diary-gig-name { font-weight: 600; font-size: 0.9rem; }
.diary-gig-sub { font-size: 0.8rem; }
.diary-gig-date { text-align: right; flex-shrink: 0; }
.diary-gig-date-main { font-weight: 700; font-size: 0.88rem; color: var(--accent); }
.diary-gig-date-time { font-size: 0.75rem; color: var(--text-muted); }
.modal-narrow { max-width: 440px; }
.modal-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }

/* Act type grid (profile edit — 6 act types) */
.act-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (max-width: 600px) {
    .act-type-grid { grid-template-columns: repeat(2, 1fr); }
}
.act-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.act-type-option svg { opacity: 0.55; transition: opacity 0.15s; flex-shrink: 0; }
.act-type-option:hover { color: var(--text-primary); border-color: var(--border-light); }
.act-type-option:hover svg { opacity: 0.8; }
.act-type-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255,58,39,0.06);
    color: var(--text-primary);
}
.act-type-option:has(input:checked) svg { opacity: 1; color: var(--accent); }
.act-type-option input[type="radio"] { display: none; }
.act-sub-type-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
.act-sub-type-option:has(input:checked) {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
}
.act-sub-type-option input[type="radio"] { display: none; }

/* Artist dashboard — profile completion */
.profile-completion-card { border: 1px solid rgba(255,58,39,0.25); background: var(--bg-card); overflow: hidden; border-radius: var(--radius); }
.profile-completion-header { background: rgba(255,58,39,0.07); padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(255,58,39,0.15); }
.profile-completion-body { padding: 1.1rem 1.5rem; }
.progress-bar-flat { height: 4px; border-radius: 0; }
.step-icon-done { width: 22px; height: 22px; background: var(--success); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-icon-optional { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,58,39,0.1); border: 2px dashed rgba(255,58,39,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-icon-pending { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--border); flex-shrink: 0; }
.line-through { text-decoration: line-through; }
.dashboard-payout-row { padding: 0.55rem 0; font-size: 0.875rem; }

/* Admin claims/disputes review */
.claim-data-grid { display: grid; gap: 0.5rem; font-size: 0.875rem; }
.claim-status-pill { font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; }
.claim-match-pill { font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; margin-left: 0.4rem; }
.claim-field-row { margin-bottom: 0.75rem; }
.claim-detail-note { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.82rem; }

/* Dispute review */
.dispute-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dispute-description { color: var(--text-secondary); background: var(--bg-secondary); padding: 1rem; border-radius: var(--radius-sm); margin-top: 0.5rem; }
.dispute-opt { cursor: pointer; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; display: flex; flex-direction: column; gap: 0.3rem; transition: border-color 0.15s; }
.dispute-opt-title { font-weight: 700; font-size: 0.9rem; }

/* Admin image remove button */
.admin-remove-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.1rem; line-height: 1; padding: 0.2rem; transition: color 0.15s; }
.admin-remove-btn:hover { color: var(--accent); }

/* Admin list rows */
.admin-list-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.admin-list-row-meta { font-size: 0.85rem; color: var(--text-muted); }
.admin-list-row-amount { font-weight: 700; }

/* Error pages */
.error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
.error-page-inner { text-align: center; max-width: 480px; width: 100%; }
.error-icon { width: 88px; height: 88px; border-radius: 50%; background: rgba(179,132,129,0.1); border: 2px solid rgba(179,132,129,0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; }
.error-code { font-size: 6rem; font-weight: 900; line-height: 1; color: var(--theme); letter-spacing: -4px; margin-bottom: 0.5rem; }
.error-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.error-hint { margin-top: 2.5rem; font-size: 0.8rem; color: var(--text-muted); }
.faq-card { padding: 0 1.5rem; }
.faq-section { margin-bottom: 2.5rem; }
.faq-section-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--text-primary); background: none; border: none; width: 100%; text-align: left; transition: color 0.15s; }
.faq-question:hover { color: var(--accent); }
.faq-question svg { flex-shrink: 0; transition: transform 0.2s; color: var(--text-muted); }
.faq-question.open svg { transform: rotate(180deg); color: var(--accent); }
.faq-answer { display: none; padding: 0 0 1rem; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; }
.faq-answer.open { display: block; }
.faq-answer a { color: var(--accent); }
.faq-answer a:hover { color: var(--accent-hover); }

/* =============================================================
   Legal pages (privacy, terms, cookies)
   ============================================================= */
.legal-hero { position: relative; padding: 60px 2.5rem 50px; text-align: center; border-bottom: 1px solid var(--border); overflow: hidden; }
.legal-hero::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 600px; height: 350px; background: radial-gradient(ellipse, rgba(74,229,239,0.06) 0%, transparent 65%); pointer-events: none; }
.legal-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; letter-spacing: -1px; margin-bottom: 0.5rem; }
.legal-hero p { color: var(--text-muted); font-size: 0.875rem; }
.legal-body { max-width: 760px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.legal-body h2 { font-size: 1.1rem; font-weight: 700; margin: 2.25rem 0 0.65rem; color: var(--text-primary); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75; }
.legal-body ul { padding-left: 1.4rem; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.legal-body a { color: var(--accent); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 1rem 0; }
.cookie-table th { text-align: left; padding: 0.6rem 0.85rem; background: var(--bg-elevated); color: var(--text-secondary); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
.cookie-table td { padding: 0.65rem 0.85rem; border-top: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }

/* =============================================================
   Utility classes (extracted from blade inline styles)
   ============================================================= */

/* ── Display ── */
.d-none    { display: none !important; }
.d-block   { display: block; }
.d-flex    { display: flex; gap: 0.4rem;}
.d-grid    { display: grid; }
.d-inline-flex { display: inline-flex; }

/* ── Flex ── */
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.flex-center    { align-items: center; }
.flex-start     { align-items: flex-start; }
.flex-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1         { flex: 1; min-width: 0; }
.flex-shrink-0  { flex-shrink: 0; }
.ml-1  { margin-left: 0.25rem; }
.ml-2  { margin-left: 0.5rem; }
.ml-auto        { margin-left: auto; }
.mr-auto        { margin-right: auto; }

/* ── Gap ── */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }

/* ── Margin ── */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-20 { margin-top: 80px; }

/* ── Padding ── */
.p-0      { padding: 0; }
.p-3      { padding: 0.75rem; }
.p-4      { padding: 1rem; }
.p-5      { padding: 1.25rem; }
.p-6      { padding: 1.5rem; }
.p-8      { padding: 2rem; }
.px-4     { padding-left: 1rem; padding-right: 1rem; }
.py-4     { padding-top: 1rem; padding-bottom: 1rem; }
.py-2     { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-8     { padding-top: 2rem; padding-bottom: 2rem; }
.py-10    { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-2     { padding-top: 0.5rem; }
.pt-3     { padding-top: 0.75rem; }
.pt-4     { padding-top: 1rem; }
.pt-6     { padding-top: 1.5rem; }
.pt-8     { padding-top: 2rem; }
.pt-10    { padding-top: 2.5rem; }
.pt-12    { padding-top: 3rem; }
.pb-0     { padding-bottom: 0; }
.pb-3     { padding-bottom: 0.75rem; }
.pb-4     { padding-bottom: 1rem; }
.pb-5     { padding-bottom: 1.25rem; }
.pb-8     { padding-bottom: 2rem; }
.pb-12    { padding-bottom: 3rem; }
.align-self-end { align-self: flex-end; }
.relative { position: relative; }

/* ── Borders ── */
.border-danger { border-color: var(--danger) !important; }
.border-b  { border-bottom: 1px solid var(--border); }
.border-t  { border-top: 1px solid var(--border); }
.border-t2 { border-top: 2px solid var(--border); }

/* ── Border-radius ── */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius); }
.rounded-full { border-radius: 50%; }

/* ── Text alignment ── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Font sizes ── */
.text-2xs { font-size: 0.72rem; }
.text-xs  { font-size: 0.78rem; }
.text-sm  { font-size: 0.875rem; }
.text-11  { font-size: 11px; }
.text-13  { font-size: 13px; }

/* ── Section label (uppercase category header) ── */
.label-section { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Font weights ── */
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }

/* ── Colour utilities ── */
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary-c { color: var(--text-primary); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-danger    { color: var(--danger); }
.text-info      { color: var(--info); }
.text-accent    { color: var(--theme); }
.text-accent-2  { color: var(--accent-2); }
.text-white     { color: #fff; }

/* ── Backgrounds ── */
.bg-elevated  { background: var(--bg-elevated); }
.bg-secondary { background: var(--bg-secondary); }
.bg-card      { background: var(--bg-card); }

/* ── Size utilities ── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-w-0 { min-width: 0; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

/* ── Cursor ── */
.cursor-pointer { cursor: pointer; }

/* ── Misc ── */
.whitespace-nowrap { white-space: nowrap; }
.truncate          { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no-decoration     { text-decoration: none; }
.opacity-50        { opacity: 0.5; }
.transition        { transition: all 0.15s; }

/* =============================================================
   Avatar component classes
   ============================================================= */
.avatar {
    border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: #fff; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.avatar-32 { width: 32px; height: 32px; }
.avatar-36 { width: 36px; height: 36px; }
.avatar-38 { width: 38px; height: 38px; border-width: 1px; }
.avatar-44 { width: 44px; height: 44px; }
.avatar-50 { width: 50px; height: 50px; }
.avatar-80 { width: 80px; height: 80px; }
.object-cover { object-fit: cover; }
.avatar img, .avatar-inner { width: 100%; height: 100%; object-fit: cover; }
.avatar-initial {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-weight: 800;
}

/* =============================================================
   Icon box component classes
   ============================================================= */
.icon-box {
    border-radius: var(--radius-sm); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-box-28 { width: 28px; height: 28px; }
.icon-box-32 { width: 32px; height: 32px; }
.icon-box-38 { width: 38px; height: 38px; }
.icon-box-42 { width: 42px; height: 42px; }
.icon-bg-white  { background: rgba(255,255,255,0.05); }
.icon-bg-primary{ background: rgba(255,255,255,0.07); }

/* =============================================================
   Booking / gig list row
   ============================================================= */
.booking-row {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border);
    cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s;
}
.booking-row:hover { background: var(--bg-card-hover); }
.booking-row:last-child { border-bottom: none; }

/* Past gig row (no cursor default) */
.past-gig-row {
    padding: 1.1rem 0.5rem; border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm); transition: background 0.15s;
}
.past-gig-row:hover { background: var(--bg-card-hover); }
.past-gig-row:last-child { border-bottom: none; }

/* Activity feed row */
.activity-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 4px; border-bottom: 1px solid var(--border);
    cursor: pointer; border-radius: var(--radius-sm); transition: background 0.12s;
}
.activity-row:hover { background: var(--bg-card-hover); }
.activity-row:last-child { border-bottom: none; }
.activity-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* =============================================================
   Rating form
   ============================================================= */
.rating-panel {
    margin-top: 1rem; padding: 1rem; background: var(--bg-elevated);
    border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.rating-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.rating-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.star-label {
    cursor: pointer; font-size: 1.6rem; color: var(--border);
    transition: color 0.1s; line-height: 1;
}

/* =============================================================
   Quick action icon sizes
   ============================================================= */
.quick-action-icon {
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; flex-shrink: 0;
}

/* =============================================================
   Stat card header row
   ============================================================= */
.stat-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.stat-icon {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.stat-sub a { text-decoration: none; font-weight: 600; }

/* =============================================================
   Empty state within card
   ============================================================= */
.card-empty { text-align: center; padding: 2.5rem 1rem; }
.card-empty svg { margin-bottom: 0.5rem; opacity: 0.5; }
.card-empty p   { color: var(--text-muted); }

/* =============================================================
   Page section helpers
   ============================================================= */
.section-card { margin-bottom: 2rem; }
.quick-actions-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-bottom: 2rem;
}
.quick-action-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.quick-action-sub   { font-size: 11px; color: var(--text-secondary); }

/* =============================================================
   Messages / conversations
   ============================================================= */
.conv-row {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.15s; text-decoration: none;
    color: inherit;
}
.conv-row:hover { background: var(--bg-card-hover); }
.conv-row:last-child { border-bottom: none; }
.border-b-0 { border-bottom: none !important; }
.conv-avatar-wrap { position: relative; flex-shrink: 0; }
.conv-unread-dot {
    position: absolute; top: 0; right: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--bg-card);
}
/* Row notification — red left border on the full item */
tr.row-has-notif { box-shadow: inset 3px 0 0 var(--danger,#ef4444); }
.bk-acc-item.row-has-notif { border-left: 3px solid var(--danger,#ef4444); }
.bk-acc-item.row-has-notif .bk-acc-header { background:rgba(239,68,68,0.04); }
.conv-row.row-has-notif { border-left: 3px solid var(--danger,#ef4444); background:rgba(239,68,68,0.04); }

/* =============================================================
   Info / warning boxes
   ============================================================= */
.info-box {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 1rem 1.25rem;
}
.info-box.verify {
    display: flex; align-items: center;
}
.info-box-warning {
    background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.2);
    border-radius: var(--radius-sm); padding: 1rem 1.25rem;
}
.info-box-success {
    background: rgba(51,184,135,0.08); border-color: rgba(51,184,135,0.25);
    border-radius: var(--radius-sm); padding: 1rem 1.25rem;
}
.info-box-info {
    background: rgba(37,144,241,0.08); border-color: rgba(37,144,241,0.2);
    border-radius: var(--radius-sm); padding: 1rem 1.25rem;
}

/* =============================================================
   Grid helpers
   ============================================================= */
.grid-3-auto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-2-auto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

/* =============================================================
   Booking show page components
   ============================================================= */
.btn-full { width: 100%; justify-content: center; }
.booking-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card-action-header {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
.card-intro {
    color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 1.25rem;
}
.payment-timeline { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; }
.payment-timeline-row { display: flex; justify-content: space-between; }
.payment-method-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
    background: var(--bg-secondary); border-radius: var(--radius-sm);
    border: 1px solid var(--border); font-size: 0.85rem;
}
.payment-method-value { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--text-primary); }
.payment-timeline-header { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 0.5rem; }

/* Stat card colour variants */
.stat-value.text-warning { color: var(--pending); }
.stat-value.text-success { color: var(--success); }
.stat-value.text-accent-2 { color: var(--accent-2); }

/* Rating display row */
.rating-display-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem;
}
.rating-stars { color: var(--warning); font-size: 1rem; letter-spacing: 1px; }

/* Payment row in show cards */
.payment-remaining-row { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* =============================================================
   Misc component helpers
   ============================================================= */
.progress-bar-wrap {
    background: var(--bg-elevated); border-radius: 50px;
    height: 6px; overflow: hidden; margin-top: 0.5rem;
}
.progress-bar { height: 100%; border-radius: 50px; background: var(--accent); }


.number-badge {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}

/* Table action buttons */
.btn-share-gig {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 0.35rem 0.5rem; cursor: pointer; color: var(--text-secondary);
    display: flex; align-items: center; flex-shrink: 0; transition: opacity 0.15s;
}
.btn-share-gig:hover { opacity: 0.7; }
.share-popover {
    position: absolute; z-index: 9999; background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); padding: 0.35rem; min-width: 160px;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.share-popover-item {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem;
    font-size: 0.85rem; color: var(--text); border-radius: var(--radius-sm);
    text-decoration: none; background: none; border: none; cursor: pointer;
    width: 100%; text-align: left; transition: background 0.15s;
}
.share-popover-item:hover { background: var(--border-light); }
.btn-msg-icon {
    position: relative; background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; cursor: pointer;
    color: var(--text-secondary); display: flex; align-items: center;
    transition: border-color 0.15s, color 0.15s;
}
.btn-msg-icon:hover { opacity: 0.7; }
.msg-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--danger); color: #fff; font-size: 0.65rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; line-height: 1;
}
.msg-section { margin-bottom: 1rem; }
.cancel-x-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid var(--danger); background: none; color: var(--danger);
    cursor: pointer; font-size: 0.85rem; padding: 0; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.cancel-x-btn:hover { background: var(--danger); color: #fff; }
.cancel-x-btn--disabled {
    border-color: var(--border); color: var(--text-muted);
    cursor: not-allowed; opacity: 0.5;
}
.cancel-x-btn--disabled:hover { background: none; color: var(--text-muted); }

/* Signup lightbox panels */
.signup-panel { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s; }
.signup-panel:hover { border-color: var(--border-light); }
.cookie-table tr:hover td { background: var(--bg-elevated); }

/* Accept/decline mini action buttons */
.btn-accept-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid var(--success); background: none; color: var(--success);
    cursor: pointer; font-size: 0.9rem; padding: 0; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.btn-accept-icon:hover { opacity: 0.7; }
.btn-decline-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid var(--danger); background: none; color: var(--danger);
    cursor: pointer; font-size: 0.9rem; padding: 0; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.btn-decline-icon:hover { opacity: 0.7; }

/* =============================================================
   Booking filter row
   ============================================================= */
.bk-filter-wrap { display: flex; align-items: center; gap: 0.5rem; }
.bk-filter-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bk-filter-select { display: none; }

/* =============================================================
   Booking accordion (≤1440px) + action dropdown (≤768px)
   ============================================================= */
.bk-desktop-table { display: block; }
.bk-accordion { display: none; }

.bk-acc-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: var(--bg-card);
}
.bk-acc-header {
    width: 100%; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.85rem 1rem; background: none; border: none; cursor: pointer;
    text-align: left; color: var(--text-primary);
    transition: background 0.15s;
}
.bk-acc-header:hover { background: var(--bg-card-hover); }
.bk-acc-name { font-weight: 700; font-size: 0.9rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-acc-date { font-size: 0.8rem; color: var(--text-secondary); flex-shrink: 0; }
.bk-acc-status { flex-shrink: 0; }
.bk-acc-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s; }
.bk-acc-item.open .bk-acc-chevron { transform: rotate(180deg); }

.bk-acc-body { display: none; border-top: 1px solid var(--border); padding: 0.85rem 1rem; }
.bk-acc-item.open .bk-acc-body { display: block; }

.bk-acc-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; margin-bottom: 0.85rem; }
.bk-acc-row { display: flex; flex-direction: column; gap: 0.1rem; }
.bk-acc-row dt { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.bk-acc-row dd { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.bk-acc-row dd a { color: var(--accent); text-decoration: none; }

.bk-acc-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Dropdown menu */
.bk-btn-menu { position: relative; }
.bk-btn-menu-trigger {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-elevated);
    color: var(--text-secondary); cursor: pointer; transition: background 0.15s;
}
.bk-btn-menu-trigger:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.bk-btn-menu-drop {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); min-width: 180px; z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25); overflow: hidden;
}
.bk-btn-menu.open .bk-btn-menu-drop { display: block; }
.bk-btn-menu-item {
    display: block; width: 100%; padding: 0.65rem 0.9rem;
    background: none; border: none; text-align: left;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    color: var(--text-primary); transition: background 0.12s;
}
.bk-btn-menu-item:hover { background: var(--bg-card-hover); }
.bk-btn-menu-item--danger { color: var(--danger); }
.bk-btn-menu-item--danger:hover { background: rgba(255,87,34,0.08); }
.bk-btn-menu-item--success { color: var(--success); }
.bk-btn-menu-item--success:hover { background: rgba(51,184,135,0.08); }

/* Respond modal lightbox */
.respond-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: 1rem;
}
.respond-modal-overlay.open { display: flex; }
.respond-modal-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); width: 100%; max-width: 460px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.respond-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.respond-modal-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
.respond-modal-body { padding: 1.5rem; }
.respond-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); padding: 0.25rem; line-height: 1;
}


/* Step list (how it works) */
.step-list { display: flex; flex-direction: column; gap: 1rem; font-size: 0.9rem; }
.step-item { display: flex; gap: 0.75rem; }
.step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--font-theme); color: var(--font-theme-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.step-num--muted { background: var(--bg-elevated); color: var(--text-muted); }

/* Travel type radio tab */
.travel-type-tabs { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.travel-type-tab {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    padding: 0.6rem 1rem; border: 2px solid var(--border);
    border-radius: var(--radius-sm); flex: 1; transition: border-color 0.15s;
    font-size: 0.9rem;
}
.travel-type-tab.active { border-color: var(--primary); }

/* County filter area */
.county-grid-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.county-details { border-bottom: 1px solid var(--border); }
.county-summary {
    padding: 0.5rem 0.9rem; font-weight: 600; font-size: 0.875rem;
    cursor: pointer; display: flex; align-items: center; gap: 0.65rem;
    user-select: none; background: var(--bg-elevated); list-style: none;
    transition: background 0.12s;
}
.county-summary:hover { background: var(--bg-secondary); }
details[open] .county-summary svg:last-child { transform: rotate(180deg); }
.county-summary svg { transition: transform 0.2s; }
.county-grid { padding: 0.75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 0.35rem; background: var(--bg); }
.county-label { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; font-size: 0.85rem; padding: 0.2rem 0; }
.county-count { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.county-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.county-clear-btn { font-size: 0.8rem; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }

/* Radius error/warning notice */
.radius-error { padding: 0.65rem 0.9rem; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius-sm); color: #ef4444; font-size: 0.85rem; margin-bottom: 0.75rem; }
.radius-warning { padding: 0.65rem 0.9rem; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); border-radius: var(--radius-sm); color: #b45309; font-size: 0.85rem; margin-bottom: 0.75rem; }
.radius-input-row { display: flex; align-items: center; gap: 0.75rem; }

/* Profile image preview row */
.image-preview-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }

/* Section divider */
.section-divider { border-top: 1px solid var(--border); margin: 1.5rem 0; padding-top: 1.5rem; }
.section-divider h3 { font-size: 1rem; }

/* Pricing model selector card */
.pricing-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pricing-type-card {
    cursor: pointer; border: 2px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.9rem 1rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    transition: border-color 0.15s;
}
.pricing-type-card.active { border-color: var(--accent); }
.pricing-type-card input[type="radio"] { display: none; }
.pricing-type-title { font-weight: 700; font-size: 0.9rem; }
.pricing-type-sub { font-size: 0.78rem; color: var(--text-muted); }

/* Pricing preview box */
.pricing-preview-box {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.pricing-preview-label {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-muted); margin-bottom: 0.6rem;
}
.pricing-preview-body { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; }

/* Artist search page */
.near-me-banner {
    background: rgba(255,58,39,0.07); border: 1px solid rgba(255,58,39,0.15);
    border-radius: var(--radius); font-size: 0.85rem; color: var(--accent);
    margin-bottom: 1rem; padding: 0.55rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.artist-search-form { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.artist-search-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.search-filter-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.9rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600;
    border: 1px solid var(--border-light); background: var(--bg-elevated);
    color: var(--text-secondary); cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.search-filter-btn.active { border-color: var(--primary); background: rgba(99,102,241,0.08); color: var(--primary); }
.search-near-me-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.55rem 0.9rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600;
    border: 1px solid var(--border-light); background: var(--bg-elevated);
    color: var(--text-secondary); cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.search-near-me-btn.active { border-color: var(--accent); background: rgba(255,58,39,0.1); color: var(--accent); }
.search-filter-panel { padding: 1rem;}
.search-filter-group { display: flex; flex-direction: column; gap: 0.3rem; min-width: 140px; }
.search-filter-group--wide { min-width: 150px; }
.filter-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-date-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.artist-search-list { margin-bottom: 2rem; border-radius: var(--radius); overflow: hidden; }
/* Single-column list — each row has its own border, so the first/last rows
   need matching corner radii or the container's overflow:hidden clip cuts
   their border off instead of curving it (the missing-radius bug). */
.artist-search-list .artist-search-item:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.artist-search-list .artist-search-item:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.artist-search-item {
    display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem;
    transition: background 0.15s; cursor: pointer; position: relative;
    border: 1px solid var(--border);
}
.artist-search-item:hover { background: var(--bg-secondary); }
.artist-search-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; text-align: right; }
.artist-search-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; flex-shrink: 0; position: relative; z-index: 1; }
.artist-search-badges { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.filter-active-count { background: var(--bg-card-hover); color: var(--text-primary); border-radius: 999px; font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.45rem; line-height: 1.4; }

/* Fee builder stepper */
.fee-builder-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.25rem; margin-bottom: 1.25rem; background: var(--bg-secondary); }
.fee-builder-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 1rem; }
.fee-builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.stepper-row { display: flex; align-items: center; gap: 0.5rem; }
.stepper-btn {
    width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-elevated); color: var(--text-primary); cursor: pointer;
    font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.15s;
}
.stepper-btn:hover { background: var(--bg-secondary); }
.stepper-input { text-align: center; max-width: 70px; }

/* Payment choice cards */
.payment-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.payment-choice-card {
    cursor: pointer; border: 2px solid var(--border); background: transparent;
    border-radius: var(--radius-sm); padding: 1rem; display: flex; flex-direction: column;
    gap: 0.35rem; text-align: left; transition: border-color 0.15s, background 0.15s;
}
.payment-choice-card:hover { border-color: var(--primary); }
.payment-choice-title { font-weight: 700; }
.payment-choice-amount { font-size: 1.15rem; font-weight: 900; color: var(--primary); }
.payment-choice-sub { font-size: 0.78rem; color: var(--text-muted); }
.payment-selected-card {
    border: 2px solid var(--primary); background: rgba(255,58,39,0.07);
    border-radius: var(--radius-sm); padding: 1rem; display: flex; flex-direction: column; gap: 0.35rem;
}
.payment-reset-btn { margin-top: 0.5rem; background: none; border: none; color: var(--text-muted); font-size: 0.8rem; cursor: pointer; padding: 0; text-decoration: underline; }
.book-error-msg { margin-top: 0.75rem; color: var(--danger); font-size: 0.85rem; text-align: center; }

/* Book success lightbox */
.book-success-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 1rem;
}
.book-success-overlay.open { display: flex; }
.book-success-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    width: 100%; max-width: 460px; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    overflow: hidden; position: relative;
}
.book-success-close {
    position: absolute; top: 0.75rem; right: 0.75rem;
    background: rgba(255,255,255,0.2); border: none; border-radius: 50%;
    width: 30px; height: 30px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 1;
    transition: background 0.15s;
}
.book-success-close:hover { background: rgba(255,255,255,0.35); }
.book-success-header { background: var(--success); padding: 2rem; text-align: center; }
.book-success-icon {
    width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem;
}
.book-success-body { padding: 1.5rem; }
.book-success-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem; }
.book-success-cell { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 0.85rem; }
.book-success-cell-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 0.25rem; }
.book-success-cell-val { font-weight: 700; font-size: 0.95rem; }

/* Chat lightbox */
.chat-lightbox-overlay {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 1rem;
}
.chat-lightbox-overlay.open { display: flex; }
.chat-lightbox-card {
    background: var(--bg-card); border-radius: var(--radius);
    width: 100%; max-width: 540px; max-height: 60vh;
    display: flex; flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5); overflow: hidden;
}
.chat-lightbox-header {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.chat-lightbox-title { font-weight: 800; font-size: 1rem; }
.chat-lightbox-subtitle { font-size: 0.78rem; color: var(--text-muted); }
.chat-lightbox-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; font-size: 1.25rem; line-height: 1; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 200px; }
.chat-bubble-mine  { background: var(--border-light); color: var(--text); }
.chat-bubble-other { background: var(--border-light); color: var(--text); }
[data-theme="light"] .chat-bubble-mine  { color: var(--primary); }
[data-theme="light"] .chat-bubble-other { color: var(--primary); }
.chat-loading { text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 2rem 0; }
.chat-cancelled-notice {
    display: none; padding: 0.7rem 1.25rem;
    background: rgba(239,68,68,0.07); border-top: 1px solid rgba(239,68,68,0.2); flex-shrink: 0;
}
.chat-cancelled-text { margin: 0; font-size: 0.82rem; color: var(--danger); text-align: center; }
.chat-input-area { padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: 0.6rem; flex-shrink: 0; }
.chat-textarea {
    flex: 1; resize: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem; font-size: 0.875rem; background: var(--bg); color: var(--text);
    outline: none; line-height: 1.4; font-family: inherit; overflow: hidden;
}
.chat-send-btn {
    background: var(--primary); color: var(--bg-primary); border: none; border-radius: var(--radius-sm);
    padding: 0 1rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; flex-shrink: 0;
    transition: opacity 0.15s;
}

/* ══════════════════════════════════════════════════════════
   Messenger split-panel layout (messages/index for venue & artist)
   ══════════════════════════════════════════════════════════ */

/* The shell fills the main-content area edge-to-edge */
.msg-shell {
    display: flex;
    height: calc(100svh - 85px); /* 85px = nav height */
    overflow: hidden;
    position: relative;
}

/* ── List panel ── */
.msg-list-panel {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-primary);
}

.msg-list-header {
    padding: 1.25rem 1.25rem 0.75rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.msg-list-title { font-size: 1.1rem; font-weight: 800; margin: 0 0 2px; }
.msg-list-sub   { font-size: 0.75rem; color: var(--text-secondary); margin: 0; }

.msg-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 0 0.25rem;
}
.msg-tab {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem; font-weight: 500;
    color: var(--text-secondary);
    background: none; border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
    white-space: nowrap;
}
.msg-tab:hover  { color: var(--text-primary); }
.msg-tab.active { color: var(--theme); border-bottom-color: var(--theme); font-weight: 600; }
.msg-tab-badge  { font-size: 0.6rem; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; }

.msg-list-scroll {
    flex: 1;
    overflow-y: auto;
}

/* ── Conversation rows ── */
.conv-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.conv-row:hover { background: rgba(255,255,255,0.03); }
.conv-row--active { background: rgba(179,132,129,0.08); border-left: 2px solid var(--theme); padding-left: calc(1rem - 2px); }
.row-has-notif { background: rgba(255,255,255,0.02); }
.conv-avatar-wrap { position: relative; flex-shrink: 0; }
.conv-unread-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--theme);
    border: 2px solid var(--bg-primary);
}
.conv-body { flex: 1; min-width: 0; }
.conv-top  { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 3px; }
.conv-name { font-size: 0.82rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0; }
.conv-preview {
    font-size: 0.75rem; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.conv-preview--unread { color: var(--text-primary); font-weight: 500; }
.conv-meta { display: flex; align-items: center; gap: 0.4rem; }
.conv-meta-ref { font-size: 0.65rem; color: var(--text-muted); }
.conv-unread-count { font-size: 0.6rem; min-width: 18px; height: 18px; line-height: 18px; flex-shrink: 0; }
.badge-xs { font-size: 0.58rem; padding: 0.1rem 0.4rem; }

.msg-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 1.5rem; gap: 0.6rem; text-align: center;
    color: var(--text-muted); opacity: 0.5;
}
.msg-empty-state p { font-size: 0.82rem; margin: 0; }

/* ── Chat panel ── */
.msg-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
    min-width: 0;
}

.msg-chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-secondary);
    min-height: 62px;
}
.msg-back-btn {
    display: none; /* hidden on desktop */
    align-items: center; gap: 0.35rem;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 600;
    padding: 0.35rem 0.5rem; border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.msg-back-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.msg-chat-header-mid {
    display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0;
}
.msg-chat-header-av {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(145deg, var(--theme), #8B5D59);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; color: #181824;
}
.msg-chat-title    { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-chat-subtitle { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-chat-header-link {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 600; color: var(--theme);
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.msg-chat-header-link:hover { text-decoration: underline; }

.msg-chat-empty {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.85rem; color: var(--text-muted); opacity: 0.35;
    text-align: center; padding: 2rem;
    pointer-events: none;
}
.msg-chat-empty p { font-size: 0.85rem; margin: 0; line-height: 1.6; }
.msg-chat-empty span { font-size: 0.75rem; }

/* ── Mobile: full-screen switching ── */
@media (max-width: 767px) {
    .msg-shell { height: calc(100svh - 65px); }

    .msg-list-panel { width: 100%; border-right: none; }

    .msg-chat-panel {
        position: absolute;
        inset: 0;
        z-index: 20;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--bg-primary);
    }
    .msg-shell.chat-open .msg-chat-panel {
        transform: translateX(0);
    }
    /* hide the list on mobile when chat is open */
    .msg-shell.chat-open .msg-list-panel {
        visibility: hidden;
    }
    .msg-back-btn { display: flex; }
    .msg-chat-empty { display: none; }
}

/* ── Tablet: narrower list panel ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .msg-list-panel { width: 260px; }
}

/* Booking modal stepper buttons (small variant) */
.stepper-btn-sm {
    width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-elevated); color: var(--text-primary); cursor: pointer;
    font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.15s;
}
.stepper-btn-sm:hover { background: var(--bg-secondary); }
.stepper-display { min-width: 52px; text-align: center; font-weight: 700; font-size: 0.9rem; }

/* Booking modal payment option cards */
.bm-pay-card {
    cursor: pointer; border: 2px solid var(--border); background: transparent;
    border-radius: var(--radius-sm); padding: 0.85rem; display: flex;
    flex-direction: column; gap: 0.3rem; transition: border-color 0.15s, background 0.15s;
}
.bm-pay-card.active { border-color: var(--primary); background: rgba(255,58,39,0.07); }
.bm-pay-card input[type="radio"] { display: none; }
.bm-pay-amount { font-size: 1.3rem; font-weight: 900; color: var(--success); }

/* Cancel booking modal */
.cancel-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,0.65);
    align-items: center; justify-content: center; padding: 1rem;
}
.cancel-modal-overlay.open { display: flex; }
.cancel-modal-card {
    background: var(--bg-card); border-radius: var(--radius);
    width: 100%; max-width: 480px; box-shadow: 0 25px 60px rgba(0,0,0,0.45); overflow: hidden;
}
.cancel-modal-header {
    padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.cancel-modal-title { font-weight: 700; font-size: 1rem; color: #ef4444; }
.cancel-modal-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; }
.cancel-modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0.2rem; }
.cancel-modal-body { padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 1rem; }
.cancel-warning-std { padding: 0.7rem 0.9rem; background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.25); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--text-primary) }
.cancel-deposit-warning { padding: 0.85rem 0.9rem; background: rgba(0,0,0,0.08); border: 1px solid rgba(245,158,11,0.35); border-radius: var(--radius-sm); font-size: 0.85rem; }
.cancel-deposit-headline { font-weight: 700; color: #ef4444; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.4rem; }
.cancel-deposit-body { color: var(--text-primary); margin: 0; }
.cancel-modal-footer { padding: 1rem 1.35rem; border-top: 1px solid var(--border); display: flex; gap: 0.65rem; justify-content: flex-end; }

/* Artist/Venue detail pages */
.detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
.detail-layout .profile {position: relative;}
.detail-cover { height: 250px; margin: -1.5rem -1.5rem -7rem; border-radius: 0; background-size: cover; background-position: center; }
.detail-layout .profile.card { overflow: hidden; }
/* Book button attached to bottom of artist header card */
.artist-card-book-btn {
    display: block; width: 100%;
    padding: 0.85rem 1rem;
    background: var(--primary); color: var(--font-theme-2);
    border: none; cursor: pointer;
    font-size: 0.95rem; font-weight: 700; text-align: center;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: opacity 0.15s;
    margin-bottom: 1.5rem;
}
.artist-card-book-btn:hover { opacity: 0.88; }
.artist-card-book-btn--disabled { opacity: 0.4; cursor: not-allowed; }
.artist-card-book-btn--disabled:hover { opacity: 0.4; }
.artist-share-btn { position: absolute; top: 1rem; right: 1rem; z-index: 10; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.15s, border-color 0.15s; }
.artist-share-btn:hover { background: rgba(0,0,0,0.1); border-color: rgba(255,255,255,0.4); }
.detail-header { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.detail-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.artist-rating-block { flex-shrink: 0; text-align: right; }
.artist-rating-num { font-size: 1.6rem; font-weight: 800; color: var(--warning); line-height: 1; }
.artist-rating-stars { font-size: 0.95rem; color: var(--warning); letter-spacing: 2px; margin: 0.1rem 0; }
.artist-rating-count { font-size: 0.75rem; color: var(--text-muted); }
.section-icon { vertical-align: -3px; margin-right: 0.4rem; }
.video-placeholder { width: 100%; height: 100%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; }
.rating-breakdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; }
.rating-breakdown-cell { text-align: center; background: var(--bg-elevated); border-radius: var(--radius-sm); padding: 0.75rem 0.5rem; }
.rating-breakdown-score { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.rating-breakdown-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.05em; }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.6rem; gap: 0.5rem; flex-wrap: wrap; }
.review-author { display: flex; align-items: center; gap: 0.75rem; }
.review-name { font-weight: 600; }
.review-city { color: var(--text-muted); font-size: 0.82rem; }
.review-date { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; }
.review-score { font-weight: 700; color: var(--accent); font-size: 1rem; white-space: nowrap; }
.review-cats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.review-cat { font-size: 0.8rem; }
.review-cat-label { color: var(--text-muted); }
.review-cat-stars { color: var(--accent); }
.review-comment { color: var(--text-secondary); font-size: 0.9rem; margin: 0.4rem 0 0; }
.review-toggle-row { padding-top: 1.25rem; text-align: center; }
.review-count-label { color: var(--text-muted); font-size: 0.85rem; font-weight: 400; }
.detail-pricing-type { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.detail-pricing-amount { font-size: 1.15rem; font-weight: 800; }
.detail-pricing-locked {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--text-muted); font-size: 0.875rem; font-weight: 600;
    padding: 0.65rem 0.85rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-light);
}
.detail-pricing-locked svg { flex-shrink: 0; opacity: 0.7; }
.home-artist-fee--locked { display: inline-flex; align-items: center; gap: 0.2rem; }
.detail-pricing-unit { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); }
.detail-pricing-extra { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.2rem; }
.detail-book-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.artist-no-coverage { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.75rem; }
.area-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.area-tag { font-size: 0.75rem; padding: 0.2rem 0.55rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 5px; color: var(--text-secondary); }
.area-toggle-btn { font-size: 0.75rem; padding: 0.2rem 0.55rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 5px; color: var(--primary); cursor: pointer; font-weight: 600; }
.gig-count { font-size: 0.8rem; color: var(--text-muted); }
.gig-link { text-decoration: none; color: inherit; display: block; }
.gig-detail-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem; }
.gig-detail-row:hover { background: var(--bg-card-hover); border-radius: 20px;}
.gig-detail-row:last-child { border-bottom: none; }
/* Venue public page — grouped gig dates */
.vgig-group { display: flex; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.vgig-group:last-child { border-bottom: none; }
.vgig-date-col { flex-shrink: 0; width: 52px; text-align: center; padding-top: 0.1rem; color: var(--text-muted); }
.vgig-date-day { font-size: 2rem; font-weight: 800; line-height: 1; }
.vgig-date-month { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.vgig-date-weekday { font-size: 0.68rem; margin-top: 0.2rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.vgig-date-weekday--today    { color: #16a34a; }
.vgig-date-weekday--tomorrow { color: #d97706; }
.vgig-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vgig-rows .gig-detail-row:last-child { border-bottom: none; }
p.about.text-secondary {
    font-size: 0.875rem;
    color: var(--text-primary);
}
#venueGigList .gnm-group-items .gigs-split-item:last-child { border-bottom: none; }
[data-theme="light"] .vgig-date-weekday--today    { color: #15803d; }
[data-theme="light"] .vgig-date-weekday--tomorrow { color: #b45309; }
/* Inside .gig-item wrapper (artist detail), border lives on the wrapper instead */
/* Artist detail — grouped date layout */
.agig-date-group { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
.agig-date-group:last-child { border-bottom: none; }
.agig-date-group > .gig-date-left {
    flex-shrink: 0; padding: 1rem 0.5rem 0 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.agig-group-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agig-group-rows .gig-item { border-bottom: 1px solid rgba(255,255,255,0.04); }
.agig-group-rows .gig-item:last-child { border-bottom: none; }
.agig-group-rows .gig-item .gig-detail-row { border-bottom: none; }
[data-theme="light"] .agig-group-rows .gig-item:last-child { border-bottom: none; }
.gig-item { border-bottom: 1px solid var(--border); }
.gig-item:last-child { border-bottom: none; }
.gig-item .gig-detail-row { border-bottom: none; }
.gig-venue-info { flex: 1; min-width: 0; }
.gig-venue-name { font-weight: 600; font-size: 0.9rem; }
.gig-venue-city { font-size: 0.8rem; color: var(--text-muted); }
/* Artist-detail left date column (per-row, mirrors vgig-date-col) */
.gig-date-left { flex-shrink: 0; width: 48px; text-align: center; color: var(--text-muted); }
.gig-date-left-day { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.gig-date-left-month { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.gig-date-left-label { font-size: 0.6rem; margin-top: 0.15rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.gig-date-left-label--today    { color: #16a34a; }
.gig-date-left-label--tomorrow { color: #d97706; }
[data-theme="light"] .gig-date-left-label--today    { color: #15803d; }
[data-theme="light"] .gig-date-left-label--tomorrow { color: #b45309; }
.gig-date-col { text-align: right; flex-shrink: 0; }
.gig-date-num { font-weight: 600; font-size: 0.8rem; }
.gig-date-time { color: var(--text-muted); font-size: 0.75rem; }
.gig-empty { text-align: center; padding: 1.5rem 0.5rem; }
.gig-empty svg { margin-bottom: 0.5rem; opacity: 0.4; }
.gig-empty p { color: var(--text-muted); font-size: 0.85rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.social-icon-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: color 0.2s, border-color 0.2s; }
.social-icon-btn:hover { color: var(--text-primary); border-color: var(--text-primary); }
/* Social follower counts bar */
.social-followers-bar { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.5rem 1rem; background: var(--bg-card); margin: 1rem -1.5rem -1.5rem; border-radius: 0 0 var(--radius) var(--radius); border-top: 1px solid var(--border-light); }
.social-follower-item { display: flex; align-items: center; gap: 0.45rem; text-decoration: none; color: var(--text-secondary); font-size: 0.875rem; transition: color 0.15s; }
.social-follower-item:hover { color: var(--text-primary); }
.social-follower-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; background: transparent; border: 1px solid rgba(255,255,255,0.5); color: #fff; transition: color 0.2s, border-color 0.2s, background 0.2s; }
[data-theme="light"] .social-follower-icon { border-color: rgba(0,0,0,0.3); color: #111; }
.social-follower-item:hover .social-follower-icon--youtube  { color: #FF0000; border-color: #FF0000; }
.social-follower-item:hover .social-follower-icon--tiktok   { color: #69C9D0; border-color: #69C9D0; }
.social-follower-item:hover .social-follower-icon--spotify  { color: #1DB954; border-color: #1DB954; }
.social-follower-item:hover .social-follower-icon--facebook { color: #1877F2; border-color: #1877F2; }
.social-follower-item:hover .social-follower-icon--twitter  { color: #1D9BF0; border-color: #1D9BF0; }
.social-follower-item:hover .social-follower-icon--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border-color: transparent; color: #fff; }
.social-follower-count { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.social-follower-label { color: var(--text-muted); font-size: 0.8rem; }
.badge-icon { display: inline-flex; margin-right: 4px; }
.artist-review-item { padding: 2rem 0; border-top: 1px solid var(--border); }
.venue-review-item { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.venue-review-item:last-child { border-bottom: none; }
.admin-list-row:last-child { border-bottom: none; }
.border-b:last-child { border-bottom: none !important; }
.venue-header-badges { position: absolute; bottom: 30px; right: 20px;display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.gig-list { display: flex; flex-direction: column; }
.avatar-56 { width: 56px; height: 56px; }
.avatar-64 { width: 64px; height: 64px; }
.avatar-72 { width: 72px; height: 72px; }
.container-lg { max-width: 900px; }
.container-sm { max-width: 700px; }
.container-md { max-width: 800px; }
.accent-primary { accent-color: var(--primary); }
.accent-accent  { accent-color: var(--accent); }
.accent-info    { accent-color: var(--info); }
.accent-success { accent-color: var(--success); }
.gig-artist-info { flex: 1; min-width: 0; }
.gig-artist-name { font-weight: 600; font-size: 1rem; }
.gig-artist-event { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.15rem; }
.gig-date-main { font-weight: 600; font-size: 0.95rem; }
.gig-date-range { font-size: 0.8rem; margin-top: 0.15rem; }
.venue-contact-list { display: flex; flex-direction: column; gap: 0.6rem; }
.venue-contact-link { display: flex; align-items: center; gap: 0.65rem; font-size: 0.875rem; color: var(--text-primary); text-decoration: none; transition: color 0.15s; }
.venue-contact-link:hover { color: var(--accent); }
.venue-contact-icon { flex-shrink: 0; color: var(--text-muted); }
.venue-hours-row { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; }
.venue-hours-day { font-size: 0.85rem; }
.venue-hours-today { font-weight: 700; }
.venue-today-badge { font-size: 0.68rem; background: var(--success); color: #fff; padding: 0.1rem 0.4rem; border-radius: 999px; margin-left: 0.35rem; vertical-align: middle; }
.venue-hours-time { font-size: 0.82rem; }
.venue-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.venue-social-list { display: flex; flex-direction: column; gap: 0.5rem; }

/* Contact page */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; text-align: center; }
.contact-info-card { padding: 1.25rem; }
.contact-info-icon { color: var(--accent); margin-bottom: 0.5rem; }
.contact-info-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.contact-info-value { font-size: 0.85rem; font-weight: 600; }
.contact-upload-zone { border: 1.5px dashed var(--border-light); border-radius: var(--radius); padding: 1.75rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; flex-direction: column; align-items: center; }
.contact-upload-zone:hover, .contact-upload-zone.drag-over { border-color: var(--accent); background: rgba(255,58,39,0.04); }
.contact-upload-browse { color: var(--accent); text-decoration: underline; cursor: pointer; }
.contact-preview-grid { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.75rem; }
.contact-preview-item { position: relative; width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.contact-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-preview-remove { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; border: none; cursor: pointer; font-size: 0.75rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }

/* Home page — mock app UI */
.app-mock-controls { display: flex; gap: 0.5rem; align-items: center; }
.app-mock-new-btn {
    background: var(--font-theme); color: var(--font-theme-2); border: none; border-radius: 8px;
    padding: 0.3rem 0.7rem; font-size: 0.68rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.app-mock-tabs { display: flex; gap: 0.2rem; margin-bottom: 1rem; }
.app-mock-tab {
    padding: 0.28rem 0.7rem; font-size: 0.68rem; font-weight: 600;
    background: none; color: var(--text-muted); border: none; border-radius: 8px;
    cursor: pointer; font-family: inherit;
}
.app-mock-tab.active { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.b-fee { font-size: 0.72rem; color: var(--text-secondary); flex-shrink: 0; }
.app-detail-artist { display: flex; align-items: center; gap: 0.75rem; }
.app-detail-artist-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.app-detail-artist-name { font-size: 0.9rem; font-weight: 700; }
.app-detail-artist-meta { font-size: 0.68rem; color: var(--text-secondary); margin-top: 0.1rem; }
.app-detail-chat { display: flex; flex-direction: column; gap: 0.4rem; }
.dv-accent { color: var(--accent); }

/* Home page — mini-card artist list (split section) */
.mini-card-header {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 0.85rem;
}
.home-artist-list { display: flex; flex-direction: column; gap: 0.55rem; }
.home-artist-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 12px;
    text-decoration: none; color: inherit; transition: background .15s, border-color .15s; cursor: pointer;
}
.home-artist-item:hover { background: rgba(255,255,255,0.07); border-color: var(--border-light); }
.home-artist-avatar {
    width: 38px; height: 38px; border-radius: 10px; background: var(--bg-elevated);
    overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.home-artist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-artist-info { flex: 1; min-width: 0; }
.home-artist-name {
    font-size: 0.8rem; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-artist-meta { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.1rem; }
.home-artist-fee { font-size: 0.76rem; font-weight: 800; color: var(--accent); flex-shrink: 0; }
.home-stat-bubble {
    position: absolute; top: -18px; right: -18px;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 16px; padding: 1rem 1.25rem; box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.home-stat-bubble-num { font-size: 1.6rem; font-weight: 900; color: #33b887; letter-spacing: -1px; line-height: 1; }
.home-stat-bubble-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Home page — wallet mock card (split section) */
.wallet-mock-balance-label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 0.5rem;
}
.wallet-mock-amount { font-size: 2.4rem; font-weight: 900; color: var(--text-primary); letter-spacing: -2px; line-height: 1; margin-bottom: 0.2rem; }
.wallet-mock-amount-dec { color: #33b887; font-size: 1.2rem; }
.wallet-mock-subtitle { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.wallet-mock-divider { height: 1px; background: var(--border); margin-bottom: 1rem; }
.wallet-mock-tx-list { display: flex; flex-direction: column; gap: 0.5rem; }
.wallet-mock-tx { display: flex; justify-content: space-between; font-size: 0.75rem; }
.wallet-mock-tx-name { color: var(--text-secondary); }
.wallet-mock-tx-credit { color: #33b887; font-weight: 700; }
.wallet-mock-tx-debit { color: var(--accent); font-weight: 700; }
.wallet-mock-withdraw {
    margin-top: 1.1rem; width: 100%; padding: 0.55rem; font-size: 0.76rem; font-weight: 700;
    border-radius: 10px; border: 1px solid rgba(74,229,239,0.25);
    background: rgba(51, 184, 135, 0.1); color: #33b887; text-align: center; cursor: pointer;
}

/* Venue card footer */
.venue-card-footer-left { display: flex; align-items: center; gap: 0.3rem; }
.venue-card-cap { font-size: 0.75rem; color: var(--text-muted); }

/* Venue status line */
.venue-status-line { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; margin: 0.4rem 0; }

.venue-submit {
    background: var(--bg-elevated);
    border-color: var(--border-light);
    color: var(--text-primary);
}
/* Nearby / featured section header controls */
.nearby-controls { display: flex; align-items: center; gap: 0.75rem; }

/* Bottom CTA row */
.bottom-cta-buttons { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }
.bottom-cta-note { margin-top: 1rem; font-size: 0.75rem; color: var(--text-muted); }

/* =============================================================
   Genre tag input
   ============================================================= */
.genre-tag-wrap {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    min-height: 2.5rem; padding: 0.4rem 0.5rem;
    border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--input-bg, var(--surface)); cursor: text;
    transition: border-color 0.15s;
}
.genre-tag-wrap:focus-within { border-color: var(--primary); }
.genre-tags { display: contents; }
.genre-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem; background: var(--primary); color: #fff;
    border-radius: 999px; font-size: 0.8rem; font-weight: 500;
    white-space: nowrap; cursor: grab; user-select: none;
}
.genre-tag:active { cursor: grabbing; }
.genre-tag-remove {
    background: none; border: none; color: rgba(255,255,255,0.8);
    font-size: 1rem; line-height: 1; padding: 0; cursor: pointer;
    display: flex; align-items: center;
}
.genre-tag-remove:hover { color: #fff; }
.genre-tag-dragging { opacity: 0.4; }
.genre-tag-over { outline: 2px dashed var(--primary); outline-offset: 2px; }
.genre-text-input {
    border: none; outline: none; background: transparent;
    color: var(--text); font-size: 0.95rem; min-width: 120px; flex: 1; padding: 0;
}
.genre-add-btn {
    background: none; border: 1.5px solid var(--border); border-radius: 50%;
    width: 24px; height: 24px; font-size: 1.1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
}
.genre-add-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Genre overflow pill ("+N more" indicator on cards) */
.genre-more-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.4rem; height: 1.2em;
    background: var(--border-light); color: var(--font-theme);
    border-radius: 999px; font-size: 0.7em; font-weight: 600;
    vertical-align: middle; line-height: 1;
    margin-left: 0.2rem;
}
.profile .genre-more-pill { color: #fff; background: none; font-size: 0.6rem; }
.genre-more-pill-sm { font-size: 0.65em; }

/* Booking status badge (artist/venue profile header) */
.booking-status-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.75rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
}
.booking-status-available {
    color: #16a34a;
    border: 1px solid rgba(34,197,94,0.3);
    background: rgba(0,0,0,0.5);
}
.booking-status-unavailable {
    color: var(--danger);
    border: 1px solid rgba(239,68,68,0.25);
    background: rgba(0,0,0,0.3);
}
.booking-status-available, .booking-status-unavailable {
    margin-top: -8px;
    font-size: 0.7rem;
}
.booking-status-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.booking-status-dot-green { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }
.booking-status-dot-red   { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.25); }
@media (prefers-color-scheme: dark) {
    .booking-status-available   { background: rgba(34,197,94,0.15); color: #4ade80; }
    .booking-status-unavailable { background: rgba(239,68,68,0.15); color: #f87171; }
}

/* Distance in card meta: hidden in grid view, visible in list view */
.artist-meta-distance, .venue-meta-distance { display: none; }
.list-view .artist-meta-distance, .list-view .venue-meta-distance, .search-meta-distance { display: inline; font-weight: 800;}

/* =============================================================
   Search & Filter — modern chip bar (sf-*)
   ============================================================= */
.sf-search-bar {
    display: flex; align-items: center;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 999px; padding: 0.35rem 0.35rem 0.35rem 1.1rem;
    gap: 0.5rem; transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 0.75rem;
}
.sf-search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.sf-search-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.sf-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.95rem; color: var(--text); min-width: 0;
}
.sf-search-input::placeholder { color: var(--text-muted); }
.sf-search-submit {
    background: var(--primary); color: #fff; border: none;
    border-radius: 999px; padding: 0.5rem 1.25rem;
    font-size: 0.875rem; font-weight: 600; cursor: pointer;
    flex-shrink: 0; transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}
.sf-search-submit:hover { opacity: 0.88; }

.sf-filter-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
}
.sf-filter-chips { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1; }

/* Near Me / location chip */
.sf-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem; border-radius: 999px;
    border: 1.5px solid var(--border); background: var(--surface);
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.sf-chip:hover { border-color: var(--primary); color: var(--primary); }
.sf-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Select chip wrapper */
.sf-chip-select {
    position: relative; display: inline-flex; align-items: center;
    border: 1.5px solid var(--border); border-radius: 999px;
    background: var(--surface); padding: 0.4rem 0.75rem 0.4rem 0.85rem;
    gap: 0.3rem; cursor: pointer; transition: border-color 0.15s;
    white-space: nowrap;
}
.sf-chip-select:hover { border-color: var(--primary); }
.sf-chip-select.active { border-color: var(--primary); background: rgba(99,102,241,0.08); }
.sf-chip-select select {
    border: none; outline: none; background: transparent;
    color: var(--text); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    padding-right: 0.25rem;
}
.sf-chip-select.active select { color: var(--primary); font-weight: 600; }
.sf-chip-caret { color: var(--text-muted); flex-shrink: 0; pointer-events: none; }
.sf-chip-select.active .sf-chip-caret { color: var(--primary); }

/* Date chip */
.sf-chip-date {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1.5px solid var(--border); border-radius: 999px;
    background: var(--surface); padding: 0.4rem 0.85rem;
    transition: border-color 0.15s;
}
.sf-chip-date:focus-within, .sf-chip-date:hover { border-color: var(--primary); }
.sf-chip-date.active { border-color: var(--primary); background: rgba(99,102,241,0.08); }
.sf-chip-date svg { color: var(--text-muted); flex-shrink: 0; }
.sf-chip-date input[type="date"],
.sf-chip-date input[type="time"] {
    border: none; outline: none; background: transparent;
    color: var(--text); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; padding: 0;
}
.sf-chip-date.active input { color: var(--primary); font-weight: 600; }
.sf-chip-date-sep { font-size: 0.78rem; color: var(--text-muted); }

/* Clear button */
.sf-clear-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.75rem; border-radius: 999px;
    color: var(--text-muted); font-size: 0.8rem; font-weight: 500;
    text-decoration: none; border: 1.5px solid transparent;
    transition: all 0.15s; white-space: nowrap;
}
.sf-clear-btn:hover { color: var(--danger); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); }

/* =============================================================
   Search & Filter — segmented hero bar (sb-*)
   ============================================================= */
.sb-bar {
    display: flex; align-items: stretch;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    margin-bottom: 0.85rem;
    transition: box-shadow 0.2s;
}
/* Only deepen shadow on focus — no border colour change on whole bar */
.sb-bar:focus-within { box-shadow: 0 6px 32px rgba(0,0,0,0.14); }

.sb-seg {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0.7rem 1.1rem; min-width: 0; cursor: pointer;
    transition: background 0.18s;
}
.sb-seg:hover { background: rgba(0,0,0,0.03); }
/* Highlight only the segment that has focus or an active value */
.sb-seg:focus-within,
.sb-seg-active { background: rgba(99,102,241,0.07); }
.sb-seg:focus-within .sb-seg-label,
.sb-seg-active .sb-seg-label { color: var(--primary); }
.sb-seg:focus-within .sb-seg-icon,
.sb-seg-active .sb-seg-icon { color: var(--primary); }
/* Fade out the adjacent divider when a segment is active */
.sb-seg:focus-within + .sb-divider,
.sb-seg-active + .sb-divider { opacity: 0; }
.sb-divider + .sb-seg:focus-within,
.sb-divider + .sb-seg-active { margin-left: -1px; }
.sb-seg-grow { flex: 1; }

.sb-seg-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 0.2rem; white-space: nowrap;
    transition: color 0.18s;
}

.sb-seg-input-row {
    display: flex; align-items: center; gap: 0.4rem;
}
.sb-seg-icon { flex-shrink: 0; color: var(--text-muted); transition: color 0.18s; }

.sb-seg input[type="text"],
.sb-seg input[type="date"],
.sb-seg input[type="time"],
.sb-seg select {
    border: none; outline: none; background: transparent;
    font-size: 0.92rem; color: var(--text); min-width: 0;
    cursor: pointer; appearance: none; -webkit-appearance: none;
}
.sb-seg input[type="text"] { flex: 1; cursor: text; }
.sb-seg input[type="text"]::placeholder { color: var(--text-muted); opacity: 0.55; }
.sb-seg select { padding-right: 0; }

/* Availability: date + time inline */
.sb-avail-row { gap: 0.3rem; align-items: center; }
.sb-avail-row input[type="date"] { flex-shrink: 0; }
.sb-avail-sep {
    font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0;
    opacity: 0.7; user-select: none;
}
.sb-time-input { width: 5rem; flex-shrink: 0; }

.sb-seg input[type="date"]::-webkit-calendar-picker-indicator,
.sb-seg input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0.6; cursor: pointer;
}
/* Covered by global rule above */

/* Clear button inside search segment */
.sb-search-clear {
    background: none; border: none; cursor: pointer; flex-shrink: 0;
    color: var(--text-muted); border-radius: 50%;
    width: 20px; height: 20px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s; opacity: 0.7;
}
.sb-search-clear:hover { background: rgba(0,0,0,0.08); color: var(--text); opacity: 1; }

.sb-divider {
    width: 1px; background: var(--border); flex-shrink: 0;
    margin: 0.5rem 0; transition: opacity 0.18s;
}

.sb-submit {
    background: var(--primary); color: var(--font-theme-2); border: none;
    padding: 0 4rem; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; flex-shrink: 0; transition: background 0.15s, opacity 0.15s;
    white-space: nowrap; border-radius: 0 12px 12px 0;
}
.sb-submit:hover { opacity: 0.88; }

/* Quick filter pills row */
.sb-mobile-filter { display: none; }
.sb-pills-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.25rem;
}
.sb-pills { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; flex: 1; }
.sb-pills-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; }

.sb-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.32rem 0.8rem; border-radius: 999px;
    border: 1.5px solid var(--border); background: var(--surface);
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.sb-pill:hover { border-color: var(--primary); color: var(--primary); }
.sb-pill.active { background: var(--primary); border-color: var(--primary); color: var(--font-theme-2); }

.sb-pill-select {
    position: relative; display: inline-flex; align-items: center;
    border: 1.5px solid var(--border); border-radius: 999px;
    background: rgba(255,255,255,0.05); padding: 0.32rem 0.65rem 0.32rem 0.8rem;
    gap: 0.25rem; cursor: pointer; transition: border-color 0.15s;
    white-space: nowrap; color: var(--text-secondary);
}
.sb-pill-select:hover { border-color: var(--primary); }
.sb-pill-select.active { border-color: var(--primary); background: rgba(99,102,241,0.08); }
.sb-pill-select select {
    border: none; outline: none; background: transparent;
    color: var(--text); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    padding-right: 0.2rem;
}
.sb-pill-select.active select { color: var(--primary); font-weight: 600; }
.sb-pill-select svg { color: var(--text-muted); flex-shrink: 0; pointer-events: none; }
.sb-pill-select.active svg { color: var(--primary); }

.sb-clear {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.32rem 0.75rem; border-radius: 999px;
    color: var(--text-muted); font-size: 0.78rem; font-weight: 500;
    text-decoration: none; border: 1.5px solid transparent;
    transition: all 0.15s; white-space: nowrap;
}
.sb-clear:hover { color: var(--danger); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); }

@media (max-width: 640px) {
    .sb-bar { flex-direction: column; border-radius: 12px; }
    .sb-divider { width: auto; height: 1px; margin: 0 0.75rem; }
    .sb-submit { border-radius: 0 0 10px 10px; padding: 0.8rem; }
    .sb-seg { padding: 0.6rem 1rem; }
}

/* ── Venue Dashboard: Gigs + Calendar ─────────────────────────── */
.dash-gigs-cal { display:grid; grid-template-columns:1fr 350px; gap:1.5rem; align-items:start; }
@media (max-width:1024px) { .dash-gigs-cal { grid-template-columns:1fr; } }
.dash-gig-tab { background:none; border:none; padding:0.3rem 0.9rem; border-radius:99px; font-size:0.85rem; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:background 0.15s,color 0.15s; }
.dash-gig-tab.active { background:var(--bg-tertiary); color:var(--text-primary); }
.dash-gig-tab:hover:not(.active) { background:var(--bg-secondary); }
.dash-cal-nav { display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem 0.5rem; }
.dash-cal-month-label { font-weight:700; font-size:0.875rem; }
.dash-cal-nav-btn { background:none; border:none; cursor:pointer; color:var(--text-secondary); padding:0.25rem 0.4rem; border-radius:6px; display:flex; align-items:center; transition:background 0.15s; }
.dash-cal-nav-btn:hover { background:var(--bg-tertiary); }
.dash-cal-dow { display:grid; grid-template-columns:repeat(7,1fr); padding:0 0.75rem 0.35rem; text-align:center; }
.dash-cal-dow span { font-size:0.65rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; }
.dash-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:0 0.75rem 0.75rem; }
.cal-cell { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:0.25rem 0; gap:2px; border-radius:6px; min-height:36px; }
.cal-day-num { font-size:0.78rem; color:var(--text-primary); width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.cal-cell--today .cal-day-num { background:var(--theme); color:#fff; font-weight:700; }
.cal-dot { width:5px; height:5px; border-radius:50%; display:block; flex-shrink:0; }
.dash-cal-legend { display:flex; gap:0.75rem; padding:0.6rem 1rem; border-top:1px solid var(--border); font-size:0.72rem; color:var(--text-secondary); flex-wrap:wrap; }
.dash-cal-legend span { display:flex; align-items:center; gap:0.3rem; }

/* ── Calendar booking tooltip ──────────────────────────────────── */
.cal-cell--has-booking { cursor: pointer; }
.cal-cell--has-booking:hover .cal-day-num { background: var(--bg-tertiary); }
.cal-dot--half { background: linear-gradient(90deg, var(--success) 50%, var(--danger) 50%); }
.cal-tip {
    position: fixed;
    z-index: 300;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    padding: 0.5rem;
    min-width: 210px;
    max-width: 280px;
    pointer-events: auto;
    cursor: default;
}
.cal-tip-row { padding: 0.5rem 0.5rem; border-radius: 8px; }
.cal-tip-row + .cal-tip-row { border-top: 1px solid var(--border); margin-top: 0.25rem; padding-top: 0.6rem; }
.cal-tip-artist { font-weight: 700; font-size: 0.875rem; color: var(--text-primary); }
.cal-tip-event { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.1rem; }
.cal-tip-meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; flex-wrap: wrap; }
.cal-tip-status { color: var(--text-muted); font-style: italic; }
.cal-tip-link { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--theme); margin-top: 0.35rem; text-decoration: none; }
.cal-tip-link:hover { text-decoration: underline; }
.cal-tip-blocked { padding: 0.4rem 0.5rem; font-size: 0.78rem; color: var(--danger); font-style: italic; }

/* ── Past gigs: icon action buttons ───────────────────────────── */
.past-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    max-width: 36px;
}
.past-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
    max-width: 160px;
}
.past-action-btn--danger { color: var(--danger); border-color: rgba(239,68,68,0.3); }
.past-action-btn--danger:hover { background: rgba(239,68,68,0.08); color: var(--danger); border-color: rgba(239,68,68,0.5); }
.past-action-label {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.15s, width 0.15s;
    white-space: nowrap;
}
.past-action-btn:hover .past-action-label {
    opacity: 1;
    width: auto;
}

/* ── Booking filter icon-pills ─────────────────────────────────── */
.bk-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    max-width: 34px;
    transition: background 0.18s, color 0.18s, border-color 0.18s, max-width 0.22s ease, gap 0.22s ease;
    flex-shrink: 0;
}
.bk-filter-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
    max-width: 180px;
    gap: 0.35rem;
}
.bk-filter-btn.active {
    background: rgba(99,102,241,0.1);
    color: var(--text-primary);
    border-color: var(--text-primary);
    max-width: 180px;
    gap: 0.35rem;
}
.bk-filter-btn-label {
    font-size: 0.78rem;
    font-weight: 600;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.22s ease, opacity 0.18s;
    white-space: nowrap;
}
.bk-filter-btn:hover .bk-filter-btn-label,
.bk-filter-btn.active .bk-filter-btn-label {
    max-width: 140px;
    opacity: 1;
}