.membership-perks-sidebar {
    font-size: 0.72rem;
}
.membership-perks-sidebar .sidebar-section-title {
    font-size: 0.75rem;
}
.membership-perks-sidebar .sidebar-section-subtitle {
    font-size: 0.65rem;
}
.membership-perks-sidebar-list {
    gap: 8px;
}
/* --- 1. CORE VARIABLES & RESET --- */
:root {
    --bg-color: #050505;       /* Deepest Charcoal */
    --bg-card: #111111;        /* Card Background */
    --text-main: #E0E0E0;      /* Off-White */
    --text-muted: #888888;     /* Grey text */
    --accent-lime: #D4FF00;    /* Acid Lime */
    --accent-purple: #8A2BE2;  /* Neon Purple */
    --border-color: #222222;
    --glass: rgba(255, 255, 255, 0.05);
    
    /* Typography */
    --font-head: 'Orbitron', 'Arial Black', sans-serif;
    --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: transparent;
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
    position: relative;
    padding-bottom: 120px; /* Space for fixed MP3 player */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: -1;
    pointer-events: none;
}

main {
    transition: padding 0.4s ease-in-out;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Utility Classes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 4vw, 4rem);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: white;
    letter-spacing: 1px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 2. NAVIGATION --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 5%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 10001;
    border-bottom: none;
    transition: background 0.3s ease, padding 0.3s ease;
}

nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-purple), var(--accent-lime), var(--accent-purple), transparent);
    opacity: 0.5;
}

nav.scrolled {
    padding: 12px 5%;
    background: rgba(5, 5, 5, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.logo {
    font-family: var(--font-head);
    font-size: 1.4rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: white;
    transition: all 0.2s ease;
}
.logo:hover { transform: scale(1.02); }
.logo span { 
    color: var(--accent-lime);
    text-shadow: 0 0 20px rgba(212, 255, 0, 0.3);
}

.nav-links { 
    display: flex; 
    gap: 4px;
    align-items: center;
}
.nav-links a { 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 1.2px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

/* Compact admin controls */
#admin-nav-controls {
    gap: 8px !important;
    margin-right: 6px !important;
    padding-right: 10px !important;
}
#admin-nav-controls select {
    height: 30px !important;
    font-size: 0.7rem !important;
    padding: 0 6px !important;
}
#admin-nav-controls .admin-portal-btn {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    clip-path: none !important;
    overflow: hidden;
}
#admin-nav-controls .admin-portal-btn::before {
    content: '\f013';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.85rem;
    color: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-lime);
    transition: all 0.2s ease;
    transform: translateX(-50%);
    border-radius: 1px;
}
.nav-links a:hover { 
    color: white;
    background: rgba(255, 255, 255, 0.05);
}
.nav-links a:hover::after {
    width: 20px;
}
.nav-links a.active {
    color: var(--accent-lime);
}
.nav-links a.active::after {
    width: 20px;
    background: var(--accent-lime);
}

.cta-nav {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    background: transparent;
    color: white;
    transition: all 0.25s ease;
}
.cta-nav:hover { 
    background: var(--accent-lime); 
    color: black; 
    border-color: var(--accent-lime);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 255, 0, 0.3);
}

/* Profile Dropdown */
.profile-dropdown {
    position: relative;
}

.profile-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.profile-dropdown-btn:hover {
    background: linear-gradient(135deg, rgba(212, 255, 0, 0.15), rgba(212, 255, 0, 0.05));
    border-color: rgba(212, 255, 0, 0.4);
    transform: translateY(-1px);
}

.profile-icon {
    font-size: 1rem;
    filter: grayscale(0.2);
}

.profile-arrow {
    font-size: 0.55rem;
    color: #666;
    transition: all 0.25s ease;
}

.profile-dropdown.open .profile-arrow {
    transform: rotate(180deg);
    color: var(--accent-lime);
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: rgba(15, 15, 15, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    min-width: 180px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.profile-dropdown.open .profile-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.profile-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: #aaa;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.profile-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: white;
    padding-left: 22px;
}

.profile-dropdown-menu a.active {
    color: var(--accent-lime);
}

.profile-dropdown-menu .dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 8px 15px;
}

.profile-dropdown-menu .logout-link {
    color: #666;
}

.profile-dropdown-menu .logout-link:hover {
    color: #ff6b6b;
    background: rgba(255, 100, 100, 0.08);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Mobile Menu Toggle */
.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }

/* --- 3. HERO SECTION --- */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 120px 20px 80px;
    position: relative;
    background: linear-gradient(to bottom, transparent 0%, transparent 30%, transparent 70%, #0a0a0a 100%), radial-gradient(circle at center top, rgba(138, 43, 226, 0.12) 0%, transparent 60%);
    overflow: hidden;
}

.hero:hover .hero-new .hero-services-showcase {
    border-color: #d4ff00;
    box-shadow: 0 20px 40px rgba(0,0,0,0.45), 0 0 20px rgba(212, 255, 0, 0.3);
}

.hero:hover .hero-new .showcase-title {
    color: #d4ff00;
    text-shadow: 0 0 8px rgba(212, 255, 0, 0.8);
}

/* Animated Grid Background Effect */
.hero::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    left: -10px; /* Offset to hide left edge line */
    background-image: 
        linear-gradient(var(--border-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.03;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    animation: gridMove 20s linear infinite;
    pointer-events: none;
}



@keyframes gridMove {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(40px) translateZ(-200px); }
}

.hero h1 {
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 6vw, 6rem);
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 18px;
    z-index: 2;
    word-break: break-word;
    overflow-wrap: break-word;
}

.outline-text {
    color: transparent;
    -webkit-text-stroke: 2px var(--text-main);
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: pointer;
    animation: blink-glow 0.4s ease-in-out 5;
}

.outline-text:hover {
    -webkit-text-stroke: 2px var(--accent-purple);
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--accent-purple)) drop-shadow(0 0 20px rgba(138, 43, 226, 0.6));
}

@keyframes bounce-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

@keyframes blink-glow {
    0%, 100% { opacity: 0.3; filter: none; }
    50% { opacity: 1; filter: drop-shadow(0 0 20px rgba(138, 43, 226, 1)) drop-shadow(0 0 40px rgba(138, 43, 226, 0.8)); }
}

.musicians-1 {
    cursor: pointer;
    display: inline-block;
    animation: bounce-scale 0.6s ease-in-out 3;
}

.musicians-1:hover {
    animation: bounce-scale 0.6s ease-in-out infinite;
}

.musicians-2 {
    cursor: pointer;
    display: inline-block;
    animation: wiggle 0.4s ease-in-out 5;
}

.musicians-2:hover {
    animation: wiggle 0.4s ease-in-out infinite;
}

/* Tribe button hover triggers all animations */
.outline-text.tribe-hover-active {
    -webkit-text-stroke: 2px var(--accent-purple);
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--accent-purple)) drop-shadow(0 0 20px rgba(138, 43, 226, 0.6));
    animation: blink-glow 0.4s ease-in-out infinite;
}

.musicians-1.tribe-hover-active {
    animation: bounce-scale 0.6s ease-in-out infinite;
    color: var(--accent-lime);
}

.musicians-2.tribe-hover-active {
    animation: wiggle 0.4s ease-in-out infinite;
    color: var(--accent-lime);
}

.hero p {
    max-width: 560px;
    font-size: 1rem;
    margin-bottom: 32px;
    color: var(--text-muted);
    z-index: 2;
}

.button-group {
    display: flex;
    gap: 20px;
    z-index: 2;
}

/* --- HERO REDESIGN --- */
.hero-new .hero-inner {
    width: min(1100px, 100%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    align-items: center;
    z-index: 2;
    margin-bottom: 60px;
}
.hero-new .hero-copy {
    text-align: left;
}
.hero-new .hero-eyebrow,
.hero-eyebrow {
    color: var(--accent-lime);
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.hero-main-text {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 3.8vw, 3.2rem);
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 10px;
    z-index: 2;
    font-weight: 800;
    word-break: break-word;
    overflow-wrap: break-word;
}
.hero-subtitle {
    font-family: var(--font-head);
    font-size: clamp(0.85rem, 2.2vw, 1.6rem);
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 20px;
    z-index: 2;
    color: var(--accent-lime);
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: break-word;
}
.hero-description {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 550px;
    z-index: 2;
}

/* Tribe button magnetic effect + styling (legacy) */
.tribe-btn {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1rem;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease, background-color 0.3s ease;
    will-change: transform;
}

.tribe-btn:hover {
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.4), 0 0 60px rgba(212, 255, 0, 0.15);
    background-color: #e6ff33;
}

/* Hero nav pills — animated link buttons */
.hero-nav-pill {
    display: inline-block;
    padding: 10px 22px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pill-color);
    border: 1.5px solid var(--pill-color);
    border-radius: 6px;
    background: transparent;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease, border-color 0.3s ease;
    will-change: transform;
}

.hero-nav-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pill-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.hero-nav-pill:hover::before {
    opacity: 0.12;
}

.hero-nav-pill:hover {
    box-shadow: 0 0 18px color-mix(in srgb, var(--pill-color) 40%, transparent),
                0 0 40px color-mix(in srgb, var(--pill-color) 15%, transparent);
    transform: translateY(-2px) scale(1.04);
    border-color: var(--pill-color);
}

.hero-new .hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    margin-top: -25px;
}
.hero-new .hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-new .hero-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.22);
    font-size: 0.7rem;
    color: #ddd;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.hero-new .hero-panel {
    display: flex;
    justify-content: center;
}
/* SERVICES SHOWCASE WIDGET */
.hero-services-showcase {
    width: 100%;
    max-width: 380px;
    background: rgba(10,10,10,0.4);
    border: 1px solid rgba(138,43,226,0.35);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
    backdrop-filter: blur(14px);
    transition: all 0.4s ease;
}

.showcase-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.showcase-tag {
    background: var(--accent-purple);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 6px;
}

.showcase-title {
    color: #f2f2f2;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.showcase-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.showcase-tile:hover {
    background: rgba(138,43,226,0.12);
    border-color: rgba(138,43,226,0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(138,43,226,0.2);
}

.showcase-tile:hover .tile-label {
    color: #d4ff00;
}

.showcase-tile:hover .tile-icon {
    transform: scale(1.15);
}

.tile-icon {
    font-size: 1.6rem;
    transition: transform 0.3s ease;
    line-height: 1;
}

.tile-label {
    color: #f2f2f2;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.tile-desc {
    color: #777;
    font-size: 0.6rem;
    line-height: 1.3;
}

.showcase-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.showcase-footer-text {
    color: #666;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.showcase-pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-lime);
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 0.4; box-shadow: none; }
    50% { opacity: 1; box-shadow: 0 0 8px var(--accent-lime); }
}

/* FEATURE STRIP */
.hero-feature-strip {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.feature-strip-track {
    display: flex;
    gap: 12px;
    animation: stripScroll 30s linear infinite;
    width: max-content;
}

@keyframes stripScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.strip-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(138,43,226,0.06);
    border: 1px solid rgba(138,43,226,0.25);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.strip-chip:hover {
    background: rgba(138,43,226,0.15);
    border-color: #d4ff00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212,255,0,0.3);
}

.strip-chip:hover .strip-chip-text {
    color: #d4ff00;
}

.strip-chip-icon {
    font-size: 1rem;
    line-height: 1;
}

.strip-chip-text {
    color: #ccc;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .hero-new .hero-copy {
        text-align: center;
    }
    .hero-main-text {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 1rem;
        white-space: normal;
    }
    .hero-description {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-new .hero-cta {
        justify-content: center;
    }
    .hero-nav-pill {
        padding: 8px 14px;
        font-size: 0.65rem;
        letter-spacing: 1.5px;
    }
    .hero-new .hero-badges {
        justify-content: center;
    }
    .hero-services-showcase {
        max-width: 100%;
    }
    .showcase-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .showcase-tile {
        padding: 12px 8px;
    }
    .tile-icon {
        font-size: 1.3rem;
    }
    .feature-strip-track {
        gap: 8px;
    }
    .strip-chip {
        padding: 8px 14px;
    }
    .strip-chip-text {
        font-size: 0.6rem;
    }
    .marquee {
        bottom: 2vh;
        font-size: 0.5rem;
        padding: 5px 0;
        margin: -50px 0 30px 0;
        transform: rotate(-2deg) scale(0.9);
        letter-spacing: 0.5px;
        max-width: 100%;
        overflow: hidden;
    }
}

.btn {
    padding: 16px 40px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
    max-width: 100%;
    box-sizing: border-box;
}

.btn-primary {
    background-color: var(--accent-lime);
    color: var(--bg-color);
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);
}
.btn-primary:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.3); 
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    clip-path: polygon(0 0, 90% 0, 100% 20%, 100% 100%, 10% 100%, 0 80%);
}
.btn-secondary:hover { background: var(--accent-purple); color: white; }

/* Marquee Strip */
.marquee {
    width: 100%;
    background: var(--accent-lime);
    color: black;
    padding: 12px 0;
    margin: -80px 0 40px 0;
    transform: rotate(-2deg) scale(1.1);
    overflow: hidden;
    white-space: nowrap;
    z-index: 3;
    font-weight: 900;
    font-family: var(--font-head);
    letter-spacing: 2px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    font-size: 0.85rem;
}

/* --- 4. EVENTS SECTION --- */
#events { padding: 100px 0; position: relative; }

.filter-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    padding: 10px 24px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 600;
}

.filter-btn.active, .filter-btn:hover {
    border-color: var(--accent-lime);
    color: var(--accent-lime);
    background: rgba(212, 255, 0, 0.05);
}

/* Free Events button — yellow accent */
.filter-btn-free {
    border-color: #FFD700;
    color: #FFD700;
}

.filter-btn-free:hover,
.filter-btn-free.active {
    border-color: #FFD700;
    color: #000;
    background: #FFD700;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); 
    gap: 25px;
}

.event-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure full height in grid */
}

.event-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-purple);
    box-shadow: 0 10px 40px rgba(138, 43, 226, 0.15);
}

.event-card .btn-sm {
    padding: 8px 10px;
    font-size: 0.82rem;
    border-radius: 6px;
    background: #333;
    color: #fff;
    border: 1px solid #222;
    cursor: pointer;
}
.event-card .btn-sm:hover { background: var(--accent-lime); color: black; border-color: var(--accent-lime); }
.event-card .btn-danger { background: #8B0000; color: #fff; }
.event-card .card-image { min-height: 140px; }

/* Carousel Event Cards - Compact to match featured strip */
.carousel-track .event-card {
    width: 240px !important;
    margin: 0 10px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.carousel-track .event-card .card-image {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    flex-shrink: 0 !important;
}
.carousel-track .event-card .card-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.carousel-track .event-card .ticket-controls,
.carousel-track .event-card .ripped-ticket-container {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

/* Events page grid - same compact card size */
.events-grid .event-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.events-grid .event-card .card-image {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    flex-shrink: 0 !important;
}
.events-grid .event-card .card-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.events-grid .event-card .ticket-controls,
.events-grid .event-card .ripped-ticket-container {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}


.card-image {
    height: 220px;
    background-color: #222;
    background-size: cover;
    background-position: center;
    position: relative;
}

.date-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 800;
    border-bottom: 2px solid var(--accent-lime);
    color: white;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-tag {
    font-size: 0.7rem;
    color: var(--accent-lime);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 700;
}

.card-title {
    font-family: var(--font-head);
    font-size: 1.3rem;
    margin-bottom: 5px;
    line-height: 1.1;
    color: white;
    /* Limit lines to prevent layout shift */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3.4rem; /* Reserve space for 2 lines for uniform look */
}

.card-venue {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-ticket {
    margin-top: auto;
    background: #222;
    color: white;
    border: none;
    padding: 14px;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.event-card:hover .btn-ticket {
    background: var(--accent-lime);
    color: black;
}

.hide-card { display: none; }

/* --- 5. DIRECTORY SECTION (Musicians) --- */
/* (Legacy styles removed/overridden by .community-split-section below) */

/* NEW SPLIT LAYOUT STYLES - Left to Right on Desktop */
.community-split-section {
    display: flex; /* Removed !important to allow JS toggling */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    background: transparent;
    min-height: 80vh;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
    border: none !important;
    width: 100%;
}

/* Ensure hidden state works */
.community-split-section[style*="display: none"] {
    display: none !important;
}

.community-collage-container {
    /* Absolute position to span entire section (behind widget) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    
    /* Noticeboard "Pegboard" Pattern - LEFT SIDE ONLY */
    background-image: 
        radial-gradient(rgba(45, 45, 45, 0.4) 20%, transparent 20%),
        radial-gradient(rgba(45, 45, 45, 0.4) 20%, transparent 20%);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.community-info-container {
    /* Push to right */
    margin-left: auto;
    /* Increase width to hold larger widget */
    flex: 0 0 850px; 
    display: flex;
    flex-direction: column; /* Stack text and video */
    align-items: flex-end; /* Align to right */
    justify-content: center;
    padding: 40px;
    position: relative;
    z-index: 5;
    background: transparent; 
    pointer-events: none; /* Allow clicks to pass through transparent areas to the collage behind */
}

/* External Text Styling */
.community-text-group {
    text-align: right;
    width: auto; /* changed from 100% to auto to prevent blocking clicks on the left */
    max-width: 100%;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    pointer-events: none; /* Disable clicks on the wrapper... */
}

/* ...but enable them on the actual content elements */
.community-text-group > * {
    pointer-events: auto;
}

.community-sub-label {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--accent-lime);
    font-weight: 700;
    margin-bottom: 5px;
    display: inline-block;
}

.community-main-title {
    font-family: var(--font-head);
    font-size: clamp(2rem, 8vw, 5rem);
    text-transform: uppercase;
    color: white;
    margin: 0;
    line-height: 0.9;
    word-break: break-word;
    overflow-wrap: break-word;
}

.community-description {
    font-size: 1.25rem;
    color: #ddd;
    margin-top: 15px;
    margin-bottom: 25px;
}

.community-actions-external {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

/* DISCO LIGHT EFFECT FOR ARCHIVES TITLE */
.community-main-title span {
    transition: color 0.1s;
    display: inline-block;
}

@keyframes discoBlinkOdd {
    0%, 49% { color: var(--accent-lime); text-shadow: 0 0 15px rgba(212, 255, 0, 0.8); }
    50%, 100% { color: var(--accent-purple); text-shadow: 0 0 15px rgba(138, 43, 226, 0.8); }
}

@keyframes discoBlinkEven {
    0%, 49% { color: var(--accent-purple); text-shadow: 0 0 15px rgba(138, 43, 226, 0.8); }
    50%, 100% { color: var(--accent-lime); text-shadow: 0 0 15px rgba(212, 255, 0, 0.8); }
}

.community-main-title.disco-mode span:nth-child(odd) {
    animation: discoBlinkOdd 0.4s infinite step-end;
}

.community-main-title.disco-mode span:nth-child(even) {
    animation: discoBlinkEven 0.4s infinite step-end;
}

/* WIDGET STYLING - Theme Standard Match */
.archive-card {
    pointer-events: auto;
    /* Reduced Max Width for smaller video */
    max-width: 600px; 
    width: 100%;
    
    /* Reduced opacity to show background particles/dots */
    background: rgba(15, 10, 25, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border-radius: 12px;
    
    /* Theme Standard Border (Muted Purple) */
    border: 1px solid rgba(138, 43, 226, 0.25);
    
    /* Theme Standard Shadow */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    
    overflow: hidden;
    transition: all 0.3s ease;
    
    /* Remove padding to let video fill the glass container if desired */
    padding: 0;
    /* Or keep minimal padding? visual preference. "Just the video in the glass container" implies minimal padding. */
    display: flex;
    flex-direction: column;
}

/* Adjust video container inside card */
.archive-card #featured-archive-video {
    padding: 0 !important; /* Override inline padding */
    width: 100%;
}

.archive-card video {
    width: 100%;
    display: block;
    /* max-height: 400px;  Let it grow with container? default was 230px, layout is bigger now. */
    object-fit: cover; /* or contain */
    border: none !important;
    border-radius: 0 !important; /* Reset border radius as card handles it */
}

/* Video info bar at bottom of card */
.video-info-bar {
    padding: 15px 20px;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.archive-card:hover {
    /* Yellow Border on Hover */
    border-color: var(--accent-lime);
    
    /* Yellow Glow */
    box-shadow: 0 6px 30px rgba(212, 255, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Gradients for fusion */
.collage-shadow-right {
    /* Hidden because we now use a mask on the container itself for a cleaner fade */
    display: none;
}

.collage-shadow-bottom {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100px; 
    background: linear-gradient(to top, #050505, transparent); 
    pointer-events: none; 
    z-index: 2;
}

/* Mobile / Tablet Responsive Stack */
@media (max-width: 900px) {
    .community-split-section {
        flex-direction: column !important;
        height: auto;
        min-height: auto;
    }
    
    .community-collage-container {
        /* Reset absolute to relative for stacking */
        position: relative;
        flex: 0 0 400px;
        width: 100%;
        min-height: 400px;
    }
    
    .community-info-container {
        flex: 0 0 auto;
        width: 100%;
        padding: 40px 20px;
    }

    .community-actions-external {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 10px;
    }

    .community-actions-external .search-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 1rem !important;
        padding: 14px 16px !important;
    }

    .community-actions-external .btn {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    /* Make card fit mobile nicely */
    .archive-card {
        max-width: 100%;
    }
}

/* Original background for Directory Page (hidden by default, handled by JS show/hide) */
#directory-page {
    /* Keep any specific styles for the full directory page if needed here */
}

.search-container {
    max-width: 600px;
    margin: 0 auto 50px auto;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 15px 25px;
    background: #111;
    border: 1px solid #333;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-family: var(--font-body);
    outline: none;
    transition: 0.3s;
}

.search-input:focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.2);
}

/* --- File upload preview styles --- */
.file-upload-preview {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.file-upload-preview .thumb {
    position: relative;
    width: 110px;
    height: 72px;
    background: #0b0b0b;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-upload-preview .thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
.file-upload-preview .thumb .remove-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    background: rgba(0,0,0,0.5);
    border: 0;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* --- Horizontal gallery previews to prevent excessive vertical growth --- */
.file-upload-preview.gallery-horizontal {
    overflow-x: auto;
    flex-wrap: nowrap; /* keep items in one horizontal line */
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}
.file-upload-preview.gallery-horizontal .thumb {
    width: 160px;
    height: 100px;
    flex: 0 0 auto;
}
.file-upload-preview.gallery-horizontal .thumb img { object-fit: cover; }

/* Make the default event card listing use the existing card styles */
.event-card { max-width: 100%; }

/* Custom act preview (in-line in create/admin forms) */
.custom-act-preview { box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.custom-act-preview div[style] img { display: block; }
.custom-act-preview .btn { padding: 8px 12px; font-size: 0.9rem; }

/* --- Lineup autocomplete suggestions --- */
.lineup-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    background: #0b0b0b;
    border: 1px solid #333;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    z-index: 4000;
    max-height: 220px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px; /* small gap below the input */
}
.lineup-suggestions li { list-style: none; padding: 10px 12px; cursor: pointer; color: #ddd; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.02); }
.lineup-suggestions li:hover, .lineup-suggestions li.active { background: rgba(138,43,226,0.08); color: white; }
.lineup-suggestions li small { display: block; color: #999; font-size: 0.8rem; margin-top: 4px; }




.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* RPG Character Card Style */
.artist-card {
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(138, 43, 226, 0.15);
}

.artist-banner-wrapper {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    border: none;
    position: relative;
}

.artist-img-overlay {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    background: #222;
    position: absolute;
    bottom: -32px;
    left: 12px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.artist-info {
    padding: 40px 15px 15px 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.artist-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.artist-text {
    flex: 1;
    text-align: left;
}

.artist-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(138, 43, 226, 0.25);
}

.artist-card.malta:hover {
    border-color: var(--accent-lime);
}

.artist-card.non-malta:hover {
    border-color: var(--accent-purple);
}

.artist-card.malta:hover .artist-banner-wrapper,
.artist-card.malta:hover .artist-img-overlay {
    border-color: var(--accent-lime);
}

.artist-card.non-malta:hover .artist-banner-wrapper,
.artist-card.non-malta:hover .artist-img-overlay {
    border-color: var(--accent-purple);
}

.artist-card.malta {
    background: rgba(138, 43, 226, 0.12);
    border-color: rgba(138, 43, 226, 0.35);
}

.artist-card.non-malta {
    background: rgba(212, 255, 0, 0.08);
    border-color: rgba(212, 255, 0, 0.25);
}

.artist-card:hover {
    border-color: var(--text-main);
    background: #161616;
}

.artist-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: white;
    margin-bottom: 2px;
}

.artist-role {
    color: var(--accent-purple);
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
}

.artist-tags {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
}

.tag-pill {
    background: #222;
    color: #aaa;
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 12px;
}

.artist-social-icons {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-icon-link {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.social-icon-link:hover {
    background: var(--accent-lime);
    color: #000;
    transform: scale(1.15);
}

.artist-card.non-malta .social-icon-link:hover {
    background: var(--accent-purple);
    color: #fff;
}

/* ===== ARTIST DETAIL PAGE ===== */
.artist-cover {
    height: 55vh;
    border-radius: 12px;
    margin-bottom: -80px;
    position: relative;
    border: 1px solid #333;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .artist-cover {
        height: 35vh;
        border-radius: 8px;
        margin-bottom: -60px;
    }
    .artist-detail-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
    .artist-detail-header img {
        width: 140px !important;
        height: 140px !important;
    }
    .artist-detail-header .artist-social-links {
        justify-content: center;
    }
    .artist-genre-tags {
        justify-content: center;
    }
}

/* Artist social links — brand colours */
.artist-social-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    font-size: 0.8rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid;
}
.artist-social-brand:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}
.artist-social-brand.instagram { background: rgba(225,48,108,0.15); border-color: rgba(225,48,108,0.4); color: #E1306C; }
.artist-social-brand.instagram:hover { background: rgba(225,48,108,0.25); }
.artist-social-brand.facebook { background: rgba(24,119,242,0.15); border-color: rgba(24,119,242,0.4); color: #1877F2; }
.artist-social-brand.facebook:hover { background: rgba(24,119,242,0.25); }
.artist-social-brand.spotify { background: rgba(30,215,96,0.15); border-color: rgba(30,215,96,0.4); color: #1ED760; }
.artist-social-brand.spotify:hover { background: rgba(30,215,96,0.25); }
.artist-social-brand.soundcloud { background: rgba(255,85,0,0.15); border-color: rgba(255,85,0,0.4); color: #FF5500; }
.artist-social-brand.soundcloud:hover { background: rgba(255,85,0,0.25); }
.artist-social-brand.youtube { background: rgba(255,0,0,0.15); border-color: rgba(255,0,0,0.4); color: #FF0000; }
.artist-social-brand.youtube:hover { background: rgba(255,0,0,0.25); }
.artist-social-brand.bandcamp { background: rgba(99,154,169,0.15); border-color: rgba(99,154,169,0.4); color: #639AA9; }
.artist-social-brand.bandcamp:hover { background: rgba(99,154,169,0.25); }
.artist-social-brand.linktree { background: rgba(67,176,42,0.15); border-color: rgba(67,176,42,0.4); color: #43B02A; }
.artist-social-brand.linktree:hover { background: rgba(67,176,42,0.25); }
.artist-social-brand.website { background: rgba(163,230,53,0.15); border-color: rgba(163,230,53,0.4); color: #A3E635; }
.artist-social-brand.website:hover { background: rgba(163,230,53,0.25); }

/* Artist genre tags — button-style */
.artist-genre-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.artist-genre-tag {
    padding: 8px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ddd;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.artist-genre-tag:hover {
    border-color: var(--accent-lime);
    color: var(--accent-lime);
    background: rgba(163,230,53,0.08);
}

/* Artist detail footer nav */
.artist-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #222;
    gap: 20px;
}

.offer-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(138, 43, 226, 0.2);
    padding: 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.offer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4), inset 0 0 20px rgba(138, 43, 226, 0.1);
    border-color: var(--accent-lime);
}
.offer-card h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: white;
}
.offer-card p {
    color: var(--text-muted);
    flex-grow: 1;
}
.offer-card .partner-name {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
    font-weight: bold;
}

/* --- 6. MEMBERSHIP SECTION (NEW) --- */
#membership {
    padding: 100px 0;
    background: transparent;
    position: relative;
    z-index: 2;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 40px;
    margin-top: 50px;
}

.price-card {
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    position: relative;
    transition: 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.price-card:hover {
    border-color: var(--accent-lime);
    transform: translateY(-10px);
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.2);
}

.price-card.featured {
    border-color: var(--accent-purple);
    background: rgba(138, 43, 226, 0.05);
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.15);
}

.price-title {
    font-family: var(--font-head);
    font-size: 2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent-lime);
    margin-bottom: 20px;
    display: block;
}
.price-amount span { font-size: 1rem; color: #666; font-weight: normal; }

.feature-list li {
    margin-bottom: 15px;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-list li::before {
    content: '✓';
    color: var(--accent-lime);
    font-weight: bold;
}

.pricing-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 40px;
    margin-top: 50px;
}

.price-card-new {
    background: rgba(15, 15, 15, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    position: relative;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.price-card-new:hover {
    border-color: var(--accent-lime);
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.15), inset 0 0 20px rgba(212, 255, 0, 0.05);
}

.price-card-new.featured {
    border-color: var(--accent-purple);
    background: rgba(138, 43, 226, 0.08);
    box-shadow: 0 0 40px rgba(138, 43, 226, 0.2), inset 0 0 30px rgba(138, 43, 226, 0.05);
    transform: scale(1.05);
}
.price-card-new.featured:hover {
    transform: scale(1.05) translateY(-10px);
    box-shadow: 0 0 60px rgba(138, 43, 226, 0.4), inset 0 0 40px rgba(138, 43, 226, 0.1);
}

.price-description {
    color: #888;
    margin-bottom: 20px;
    flex-grow: 1;
}

.pricing-grid-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px;
    margin-top: 40px;
}

.price-card-secondary {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    text-align: center;
    border-radius: 12px;
    transition: 0.3s;
}
.price-card-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}
.price-title-secondary {
    font-family: var(--font-head);
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.price-card-secondary p {
    color: #888;
    font-size: 0.9rem;
}

/* --- 6b. TRIBE PAGE (Dynamic Membership) --- */

/* Hero */
.tribe-hero {
    text-align: center;
    padding: 60px 20px 40px;
}
.tribe-hero-badge {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: var(--accent-lime);
    border: 1px solid var(--accent-lime);
    padding: 8px 24px;
    border-radius: 100px;
    margin-bottom: 30px;
    text-transform: uppercase;
}
.tribe-hero-title {
    font-family: var(--font-head);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 20px;
}
.tribe-highlight-lime { color: var(--accent-lime); }
.tribe-highlight-purple { color: var(--accent-purple); }
.tribe-hero-sub {
    color: #999;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 35px;
    line-height: 1.6;
}
.tribe-hero-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.tribe-hero-btn {
    font-size: 1rem !important;
    padding: 14px 30px !important;
}
.tribe-hero-free {
    color: #666;
    font-size: 0.9rem;
}
.tribe-hero-free a {
    color: var(--accent-lime);
    text-decoration: underline;
}

/* Stats Strip */
.tribe-stats-strip {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 30px 20px;
    margin: 0 -20px 50px;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    background: rgba(255,255,255,0.01);
}
.tribe-stat {
    text-align: center;
}
.tribe-stat-num {
    display: block;
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-lime);
}
.tribe-stat-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Section titles */
.tribe-section {
    margin-bottom: 50px;
}
.tribe-section-title {
    font-family: var(--font-head);
    font-size: 1.3rem;
    color: white;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tribe-section-title i {
    color: var(--accent-lime);
    font-size: 1rem;
}
.tribe-section-sub {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

/* Benefits Grid (guest) */
.tribe-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.tribe-benefit-card {
    background: rgba(15,15,15,0.6);
    border: 1px solid #1a1a1a;
    border-radius: 14px;
    padding: 30px 24px;
    transition: transform 0.3s, border-color 0.3s;
}
.tribe-benefit-card:hover {
    transform: translateY(-4px);
    border-color: #333;
}
.tribe-benefit-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 18px;
    background: color-mix(in srgb, var(--bc) 12%, transparent);
    color: var(--bc);
    border: 1px solid color-mix(in srgb, var(--bc) 25%, transparent);
}
.tribe-benefit-card h4 {
    color: white;
    font-size: 1rem;
    margin-bottom: 8px;
}
.tribe-benefit-card p {
    color: #888;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Comparison Table */
.tribe-compare-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 25px 0;
    border: 1px solid #1a1a1a;
    border-radius: 14px;
    background: rgba(10,10,10,0.6);
}
.tribe-compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}
.tribe-compare-feature-head {
    text-align: left;
    padding: 18px 20px;
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #1a1a1a;
}
.tribe-compare-th {
    padding: 20px 15px;
    text-align: center;
    border-bottom: 1px solid #1a1a1a;
    border-left: 1px solid #1a1a1a;
}
.tribe-compare-th.highlight {
    background: color-mix(in srgb, var(--tier-color) 8%, transparent);
    border-bottom-color: var(--tier-color);
}
.tribe-compare-tier-name {
    display: block;
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tier-color);
    margin-bottom: 4px;
}
.tribe-compare-tier-price {
    display: block;
    font-size: 0.8rem;
    color: #888;
}
.tribe-compare-feature {
    padding: 14px 20px;
    font-size: 0.88rem;
    color: #ccc;
    border-bottom: 1px solid #0e0e0e;
}
.tribe-compare-td {
    text-align: center;
    padding: 14px 15px;
    border-bottom: 1px solid #0e0e0e;
    border-left: 1px solid #0e0e0e;
}
.tribe-compare-td.highlight {
    background: rgba(255,255,255,0.015);
}
.tribe-compare-ctas {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
    flex-wrap: wrap;
}

/* Dashboard layout */
.tribe-dashboard {
    max-width: 900px;
    margin: 0 auto;
}
.tribe-welcome {
    text-align: center;
    margin-bottom: 30px;
}
.tribe-welcome h1 {
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

/* Role & Status Badges */
.tribe-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--role-color);
    border: 1px solid var(--role-color);
    padding: 6px 18px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--role-color) 8%, transparent);
}
.tribe-status-badge {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-color) 30%, transparent);
    padding: 4px 14px;
    border-radius: 100px;
}

/* Status Card */
.tribe-status-card {
    background: rgba(15,15,15,0.6);
    border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 30px;
}
.tribe-status-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
}
.tribe-status-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 6px;
}
.tribe-status-value {
    display: block;
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Quick Links */
.tribe-quick-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
}
.tribe-quick-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #222;
    background: rgba(20,20,20,0.5);
    color: #ccc;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.tribe-quick-link:hover {
    border-color: var(--accent-lime);
    color: white;
    background: rgba(212,255,0,0.05);
}
.tribe-quick-link i {
    color: #666;
    font-size: 0.9rem;
}
.tribe-quick-link:hover i {
    color: var(--accent-lime);
}

/* Benefits List (logged in) */
.tribe-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #1a1a1a;
}
.tribe-benefit-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background: rgba(15,15,15,0.5);
    transition: background 0.2s;
}
.tribe-benefit-row:hover {
    background: rgba(25,25,25,0.8);
}
.tribe-benefit-row.locked {
    opacity: 0.45;
}
.tribe-benefit-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,255,0,0.08);
    color: var(--accent-lime);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.tribe-benefit-row.locked .tribe-benefit-icon {
    background: rgba(100,100,100,0.08);
    color: #555;
}
.tribe-benefit-row strong {
    display: block;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 2px;
}
.tribe-benefit-row p {
    color: #777;
    font-size: 0.8rem;
    margin: 0;
}
.tribe-benefit-check {
    margin-left: auto;
    color: var(--accent-lime);
    font-size: 0.85rem;
}
.tribe-benefit-lock {
    margin-left: auto;
    color: #444;
    font-size: 0.85rem;
}

/* Upgrade Cards (free member view) */
.tribe-upgrade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.tribe-upgrade-card {
    background: rgba(15,15,15,0.6);
    border: 1px solid color-mix(in srgb, var(--card-accent) 20%, transparent);
    border-radius: 14px;
    padding: 30px 25px;
    text-align: center;
    transition: transform 0.3s, border-color 0.3s;
}
.tribe-upgrade-card:hover {
    transform: translateY(-4px);
    border-color: var(--card-accent);
}
.tribe-upgrade-card h4 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--card-accent);
    margin-bottom: 10px;
}
.tribe-upgrade-card h4 i {
    margin-right: 6px;
}
.tribe-upgrade-price {
    display: block;
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}
.tribe-upgrade-price small {
    font-size: 0.8rem;
    font-weight: 400;
    color: #666;
}
.tribe-upgrade-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
}
.tribe-upgrade-card ul li {
    padding: 8px 0;
    color: #ccc;
    font-size: 0.88rem;
    border-bottom: 1px solid #111;
}
.tribe-upgrade-card ul li i {
    color: var(--card-accent);
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* Upgrade Banner (lover → musician) */
.tribe-upgrade-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
    background: color-mix(in srgb, var(--card-accent) 4%, rgba(15,15,15,0.6));
    margin-top: 30px;
    flex-wrap: wrap;
}
.tribe-upgrade-banner h3 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--card-accent);
    margin-bottom: 6px;
}
.tribe-upgrade-banner p {
    color: #999;
    font-size: 0.9rem;
    margin: 0;
}

/* Perks Grid */
.tribe-perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.tribe-perk-card {
    background: rgba(15,15,15,0.6);
    border: 1px solid #1a1a1a;
    border-radius: 14px;
    padding: 24px;
    transition: border-color 0.3s;
}
.tribe-perk-card:hover {
    border-color: #333;
}
.tribe-perk-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.tribe-perk-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
}
.tribe-perk-logo-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(212,255,0,0.1);
    color: var(--accent-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.tribe-perk-partner {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tribe-perk-header h4 {
    color: white;
    font-size: 0.95rem;
    margin-top: 2px;
}
.tribe-perk-desc {
    color: #888;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 16px;
}
.tribe-perk-code {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.4);
    border: 1px dashed #333;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.tribe-perk-code.locked {
    opacity: 0.6;
}
.tribe-perk-code-label {
    font-size: 0.65rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tribe-perk-code-value {
    font-family: var(--font-head);
    font-size: 0.9rem;
    color: var(--accent-lime);
    letter-spacing: 2px;
}
.tribe-perk-code-value.blurred {
    filter: blur(6px);
    user-select: none;
    color: #666;
}
.tribe-perk-redeem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-lime);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}
.tribe-perk-redeem:hover {
    opacity: 0.8;
}
.tribe-perk-locked-label {
    color: #555;
    font-size: 0.8rem;
}

/* Artist Card (musician view) */
.tribe-artist-card {
    background: rgba(15,15,15,0.6);
    border: 1px solid rgba(138,43,226,0.2);
    border-radius: 14px;
    padding: 24px;
}
.tribe-artist-card.no-profile {
    border-style: dashed;
    text-align: center;
    color: #888;
}
.tribe-artist-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
}
.tribe-artist-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #333;
}
.tribe-artist-logo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(138,43,226,0.12);
    color: var(--accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.tribe-artist-card-header h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.tribe-artist-status {
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.tribe-artist-status.approved { color: var(--accent-lime); }
.tribe-artist-status.pending { color: #ffaa00; }

/* Admin / Curator stats */
.tribe-admin-stats,
.tribe-curator-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}
.tribe-admin-stat-card {
    background: rgba(15,15,15,0.6);
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.tribe-admin-stat-num {
    display: block;
    font-family: var(--font-head);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-lime);
    margin-bottom: 4px;
}
.tribe-admin-stat-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Curator event list */
.tribe-curator-event-list {
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
}
.tribe-curator-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #111;
    gap: 10px;
}
.tribe-curator-event-row:last-child {
    border-bottom: none;
}
.tribe-curator-event-name {
    color: white;
    font-size: 0.9rem;
    flex: 1;
}
.tribe-curator-event-date {
    color: #666;
    font-size: 0.8rem;
    font-family: var(--font-head);
}
.tribe-curator-event-status {
    font-size: 0.75rem;
}

/* CTA Box (bottom) */
.tribe-cta-box {
    text-align: center;
    padding: 40px;
    background: rgba(138,43,226,0.04);
    border: 1px solid rgba(138,43,226,0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}
.tribe-cta-box h2 {
    font-family: var(--font-head);
    color: var(--accent-purple);
    margin-bottom: 12px;
    font-size: 1.3rem;
}
.tribe-cta-box p {
    color: #999;
    max-width: 550px;
    margin: 0 auto 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Tribe Mobile Responsive --- */
@media (max-width: 768px) {
    .tribe-hero {
        padding: 40px 10px 30px;
    }
    .tribe-hero-title {
        font-size: 1.8rem;
    }
    .tribe-hero-btn {
        width: 100%;
        font-size: 0.9rem !important;
        padding: 12px 20px !important;
    }
    .tribe-stats-strip {
        gap: 20px;
        padding: 20px 10px;
    }
    .tribe-stat-num {
        font-size: 1.5rem;
    }
    .tribe-benefits-grid {
        grid-template-columns: 1fr;
    }
    .tribe-compare-wrapper {
        margin: 15px -10px;
        border-radius: 10px;
    }
    .tribe-status-row {
        gap: 15px;
    }
    .tribe-quick-links {
        gap: 8px;
    }
    .tribe-quick-link {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    .tribe-upgrade-cards {
        grid-template-columns: 1fr;
    }
    .tribe-perks-grid {
        grid-template-columns: 1fr;
    }
    .tribe-upgrade-banner {
        flex-direction: column;
        text-align: center;
    }
    .tribe-admin-stats,
    .tribe-curator-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .tribe-cta-box {
        padding: 30px 20px;
    }
}

/* --- 7. NEWS SECTION (NEW) --- */
#news {
    padding: 100px 0;
}

.news-view-all {
    display: none;
    text-align: center;
    margin-top: 20px;
    color: var(--accent-lime);
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.2s;
}

.news-view-all:hover {
    opacity: 0.7;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 25px;
}
.news-card {
    background: rgba(30, 100, 220, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.4s ease;
    position: relative;
    isolation: isolate;
}
@property --news-border-angle {
    syntax: '<angle>';
    initial-value: 135deg;
    inherits: false;
}
@keyframes news-border-spin {
    to { --news-border-angle: 495deg; }
}
.news-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(var(--news-border-angle), rgba(30, 100, 220, 0.4), rgba(0, 200, 255, 0.3), rgba(30, 100, 220, 0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    transition: padding 0.4s ease;
}
.news-card:hover {
    transform: translateY(-8px);
    background: rgba(30, 100, 220, 0.14);
}
.news-card:hover::before {
    background: linear-gradient(var(--news-border-angle), var(--accent-lime), rgba(0, 200, 255, 0.6), var(--accent-lime));
    padding: 1.5px;
    animation: news-border-spin 2.5s linear infinite;
}
.news-card .card-image {
    height: 200px;
    position: relative;
}
.news-card .card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(var(--news-border-angle), rgba(30, 100, 220, 0.4), rgba(0, 200, 255, 0.3), rgba(30, 100, 220, 0.15));
    transition: height 0.4s ease;
}
.news-card:hover .card-image::after {
    height: 1.5px;
    background: linear-gradient(var(--news-border-angle), var(--accent-lime), rgba(0, 200, 255, 0.6), var(--accent-lime));
    animation: news-border-spin 2.5s linear infinite;
}
/* Exclusives golden divider */
#exclusive-news .news-card .card-image {
    border-bottom: none !important;
}
#exclusive-news .news-card .card-image::after {
    background: linear-gradient(var(--news-border-angle), rgba(255, 140, 0, 0.5), rgba(255, 215, 0, 0.45), rgba(180, 100, 20, 0.25));
}
#exclusive-news .news-card:hover .card-image::after {
    background: linear-gradient(var(--news-border-angle), #ff8c00, gold, #fff5cc, gold, #ff8c00);
    animation: news-border-spin 2.5s linear infinite;
}
.news-card .card-content {
    padding: 25px;
}
.news-card .card-title {
    font-size: 1.4rem;
}
.news-card .card-snippet {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Member Exclusives — golden neon tint */
#exclusive-news .news-card {
    background: rgba(218, 165, 32, 0.08);
}
#exclusive-news .news-card::before {
    background: linear-gradient(var(--news-border-angle), rgba(255, 140, 0, 0.5), rgba(255, 215, 0, 0.45), rgba(180, 100, 20, 0.25));
}
#exclusive-news .news-card:hover {
    background: rgba(218, 165, 32, 0.14);
}
#exclusive-news .news-card:hover::before {
    background: linear-gradient(var(--news-border-angle), #ff8c00, gold, #fff5cc, gold, #ff8c00);
    animation: news-border-spin 2.5s linear infinite;
}

/* --- 8. ABOUT SECTION (NEW) --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text p { margin-bottom: 20px; color: #bbb; font-size: 1.1rem;}

.stat-box {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}
.stat-item h3 { font-size: 2.5rem; color: var(--accent-purple); font-family: var(--font-head); line-height: 1; }
.stat-item p { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }

/* --- 10. ADMIN DASHBOARD STYLES (NEW) --- */
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-group label {
    color: #888;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
}
.full-width {
    grid-column: 1 / -1;
}
.admin-table-container {
    background: #111;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid #333;
    margin-top: 40px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 2000px; /* Force horizontal scroll for detailed workflow */
}
.admin-table th, .admin-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #222;
    color: #ccc;
    font-size: 0.85rem;
    vertical-align: top;
}
.admin-table th {
    background: #1a1a1a;
    color: var(--accent-lime);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    white-space: nowrap;
}
.admin-table tr:hover {
    background: #161616;
}

.admin-row-incomplete {
    border-left: 3px solid orange;
    background: rgba(255, 165, 0, 0.05);
}
.admin-row-complete {
    border-left: 3px solid var(--accent-lime);
}

.btn-sm { padding: 6px 16px; font-size: 0.75rem; }
.admin-filter-bar { display: flex; gap: 10px; margin-bottom: 15px; }
.admin-filter-btn.active { 
    background: var(--accent-lime); color: black; border-color: var(--accent-lime); 
    box-shadow: 0 0 10px rgba(212, 255, 0, 0.2);
}

/* --- 11. CROPPER MODAL --- */
#cropModal {
    display: none; 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.95); z-index: 9999; 
    flex-direction: column; align-items: center; justify-content: center;
}
.cropper-container-box {
    width: 90%; max-width: 800px; height: 60vh; background: #000; margin-bottom: 20px;
}

/* --- 13. EVENT DETAIL VIEW (NEW) --- */
#event-details {
    padding-top: 80px; /* Adjusted to sit right under header */
    padding-bottom: 100px;
    display: none;
    width: 100%;
    min-height: 100vh;
}
.event-header-image {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #333;
    background-color: #111;
}
.event-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    background: #111;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #222;
}
.meta-item h4 { color: #888; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; }
.meta-item p { color: white; font-size: 1.1rem; font-weight: bold; }

.event-description {
    font-size: 1.1rem; color: #ccc; line-height: 1.8; margin-bottom: 40px; max-width: 800px;
}

.admin-details-panel {
    margin-top: 60px;
    border-top: 2px solid var(--accent-purple);
    padding-top: 30px;
    background: rgba(138, 43, 226, 0.05);
    padding: 30px;
    border-radius: 8px;
}
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.admin-card { background: #161616; padding: 15px; border: 1px solid #333; border-radius: 6px; }
.admin-card h5 { color: var(--accent-lime); font-size: 0.75rem; margin-bottom: 5px; text-transform: uppercase; }
.admin-card p { color: #ddd; font-size: 0.95rem; }

.back-btn { display: inline-flex; align-items: center; gap: 8px; color: #888; cursor: pointer; margin-bottom: 20px; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; transition:0.3s; }
.back-btn:hover { color: var(--accent-lime); }

/* --- 14. LINEUP STYLES (NEW) --- */
.lineup-builder { background: #1a1a1a; padding: 15px; border-radius: 6px; border: 1px solid #333; margin-bottom: 20px; }
.lineup-input-group { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lineup-list { display: flex; flex-direction: column; gap: 10px; }
.lineup-item { display: flex; align-items: center; gap: 10px; background: #222; padding: 8px; border-radius: 4px; border: 1px solid #333; }
.lineup-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lineup-item-info { flex-grow: 1; color: #ddd; font-size: 0.9rem; }
.lineup-item-remove { color: #ff4444; cursor: pointer; font-weight: bold; padding: 0 10px; }

.event-lineup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.lineup-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(140deg, rgba(9, 9, 18, 0.95), rgba(26, 0, 52, 0.92));
    border: 1px solid rgba(138, 43, 226, 0.38);
    border-radius: 12px;
    overflow: hidden;
    min-height: auto;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.lineup-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(212, 255, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.lineup-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 255, 0, 0.32);
    box-shadow: 0 20px 42px rgba(138, 43, 226, 0.32);
}

.lineup-card:hover::before {
    opacity: 1;
}

.lineup-card__hero {
    position: relative;
    height: 100px;
    background-size: cover;
    background-position: center;
}

.lineup-card__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 20, 0.05) 0%, rgba(8, 8, 20, 0.1) 40%, rgba(8, 8, 20, 0.9) 100%);
}

.lineup-card__meta {
    position: absolute;
    top: 16px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.lineup-card__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(9, 9, 20, 0.8);
    border: 1px solid rgba(212, 255, 0, 0.6);
    color: var(--accent-lime);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
}

.lineup-card__flag {
    width: 24px;
    height: auto;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.lineup-card__avatar {
    position: absolute;
    top: 75px;
    left: 12px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--accent-lime);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
    z-index: 3;
}

.lineup-card__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 35px 12px 12px;
}

.lineup-card__title {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.lineup-card__bio {
    color: #d0d0d0;
    font-size: 0.85rem;
    line-height: 1.55;
    min-height: 48px;
}

.lineup-card__feature {
    margin: 4px 0 16px;
}

.lineup-card__feature img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
    transform: rotate(-1.5deg);
    transition: transform 0.25s ease;
}

.lineup-card:hover .lineup-card__feature img {
    transform: rotate(0deg);
}

.lineup-card__action {
    margin-top: auto;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(138, 43, 226, 0.55);
    background: rgba(138, 43, 226, 0.18);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.6px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lineup-card__action:hover {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
}

/* --- 15. ARTIST PROFILE & REGISTRATION (NEW) --- */
.audio-track { background: #1a1a1a; padding: 15px; margin-bottom: 15px; border-radius: 6px; border: 1px solid #333; display: flex; flex-direction: column; gap: 10px; }
.audio-track h5 { color: #ccc; font-size: 0.9rem; font-weight: normal; }
.audio-track audio { width: 100%; height: 35px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; }
.gallery-img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: 0.3s; border: 1px solid #333; }
.gallery-img:hover { transform: scale(1.05); border-color: var(--accent-lime); }

.member-tag { display: inline-flex; align-items: center; gap: 8px; background: #222; padding: 8px 16px; border-radius: 50px; border: 1px solid #333; margin: 5px; font-size: 0.9rem; color: #ddd; }
.status-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; text-transform: uppercase; font-weight: bold; }

/* --- 15b. INSTRUMENT SELECTOR (NEW) --- */
.instrument-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
    max-height: 85px; /* Limit height to approx 2 rows */
    overflow-y: auto;
}
.instrument-option {
    background: #000;
    border: 1px solid #333;
    padding: 6px 14px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.75rem;
    color: #888;
    transition: all 0.2s ease;
    user-select: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.instrument-option:hover { border-color: var(--accent-purple); color: white; transform: translateY(-1px); }
.instrument-option.selected { background: var(--accent-purple); border-color: var(--accent-purple); color: white; box-shadow: 0 0 10px rgba(138, 43, 226, 0.4); }

/* --- 16. ADMIN PORTAL (NEW STRUCTURE) --- */
#admin-portal {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #050505; z-index: 10010;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
#admin-portal.active {
    display: block;
}
.admin-header {
    background: #000; padding: 15px 30px; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 10012;
}
.admin-sidebar {
    width: 250px; background: #080808; border-right: 1px solid #333;
    position: fixed; top: 70px; bottom: 0; left: 0; padding: 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.admin-content {
    margin-left: 250px; padding: 40px 40px 120px 40px; margin-top: 0;
}
.admin-nav-btn {
    text-align: left; padding: 12px 20px; background: transparent; border: none;
    color: #888; cursor: pointer; border-radius: 6px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-body);
}
.admin-nav-btn:hover, .admin-nav-btn.active {
    background: #1a1a1a; color: var(--accent-lime);
}
.badge-count {
    background: var(--accent-purple); color: white; font-size: 0.7rem;
    padding: 2px 6px; border-radius: 4px;
}

/* --- ADMIN SIDEBAR CATEGORIES --- */
.admin-sidebar-category {
    margin: 12px 0 8px;
}
.admin-sidebar-category-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #555;
    padding: 0 8px;
    margin-bottom: 6px;
    display: block;
    font-weight: 600;
}
.admin-sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, #333, transparent);
    margin: 16px 0;
}
.admin-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 120px;
}
.admin-nav-btn.child-item {
    padding-left: 32px;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
}
.admin-nav-btn.child-item::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #444;
    border-radius: 50%;
}
.admin-nav-btn.child-item.active::before,
.admin-nav-btn.child-item:hover::before {
    background: var(--accent-lime);
}

/* --- ADMIN TABLE SORTING --- */
.admin-table th.sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
}
.admin-table th.sortable::after {
    content: " \2195";
    color: #555;
    font-size: 0.7rem;
}
.admin-table th.sortable.sort-active[data-sort-dir="asc"]::after {
    content: " \25B2";
    color: var(--accent-lime);
}
.admin-table th.sortable.sort-active[data-sort-dir="desc"]::after {
    content: " \25BC";
    color: var(--accent-lime);
}

/* --- SIDEBAR MEMBER PERKS --- */
.sidebar-section-title {
    color: white;
    font-family: var(--font-head);
    font-size: 0.8rem;
    margin: 0 0 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.sidebar-perks-card {
    border: 1px solid rgba(212,255,0,0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
}
.sidebar-perks-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(212,255,0,0.18) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
}
.sidebar-perks-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0 0 6px 0;
}
.sidebar-perk-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 6px 8px;
    color: #d8d8d8;
    font-size: 0.75rem;
}
.sidebar-perk-logo .offer-logo,
.sidebar-perk-logo .offer-logo-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    padding: 2px;
    font-size: 0.55rem;
    letter-spacing: 0.5px;
}
.sidebar-perk-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,255,0,0.15);
    color: var(--accent-lime);
    font-weight: 800;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.sidebar-offers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-offer-item {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(138,43,226,0.25);
    border-radius: 8px;
    padding: 6px 8px;
}
.sidebar-offer-partner {
    color: var(--accent-purple);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.sidebar-offer-title {
    color: #eee;
    font-size: 0.75rem;
    margin-top: 4px;
}

/* --- OFFER LOGOS --- */
.offer-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.offer-logo,
.offer-logo-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0b0b0b;
    border: 1px solid #222;
    flex-shrink: 0;
}
.offer-logo {
    object-fit: contain;
    padding: 6px;
}
.offer-logo-placeholder {
    color: #999;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.offer-card .partner-name {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- MEMBERSHIP LEFT SIDEBAR --- */
body.page-with-membership-perks #current-member-perks {
    display: none;
}
.sidebar-section-subtitle {
    color: #888;
    font-size: 0.7rem;
    margin: -4px 0 12px 0;
}
.sidebar-muted {
    color: #666;
    font-size: 0.75rem;
    text-align: center;
    margin: 10px 0;
}
.membership-perks-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.membership-perk-card {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(138,43,226,0.25);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.membership-perk-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-lime);
    box-shadow: 0 12px 25px rgba(212, 255, 0, 0.15);
}

/* Hero Center Spinning Logo */
#hero-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

#spinning-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.6;
    filter: drop-shadow(0 0 15px rgba(212, 255, 0, 0.2));
    /* Removed heavy CSS transitions that conflict with JS updates */
    transform: scale(var(--logo-scale, 1)) translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    image-rendering: auto;
    will-change: transform, filter, opacity;
}

#spinning-logo-img.audio-active {
    opacity: 0.75;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(var(--logo-scale, 1)) translateZ(0); }
    50% { transform: scale(calc(var(--logo-scale, 1) * 1.04)) translateZ(0); }
}

#spinning-logo-img.audio-playing {
    animation: logoPulse var(--pulse-duration, 1.2s) ease-in-out infinite;
}

/* Hero code reveal on hover - blur effect */
.hero-code-reveal .code-value {
    filter: blur(5px);
    transition: filter 0.3s ease;
    user-select: none;
}
.membership-perk-card:hover .hero-code-reveal .code-value {
    filter: blur(0);
    user-select: auto;
}
.membership-perk-header {
    display: flex;
    gap: 8px;
    align-items: center;
}
.membership-perk-card .offer-logo,
.membership-perk-card .offer-logo-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    padding: 4px;
    font-size: 0.55rem;
}
.membership-perk-provider {
    color: var(--accent-purple);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
}
.membership-perk-title {
    color: #f1f1f1;
    font-size: 0.72rem;
    margin-top: 2px;
}
.membership-perk-desc {
    color: #bbb;
    font-size: 0.62rem;
    line-height: 1.3;
}
.membership-perk-code {
    background: #0b0b0b;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}
.membership-perk-code span {
    display: block;
    font-size: 0.55rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.membership-perk-code strong {
    display: block;
    color: var(--accent-lime);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-top: 4px;
}
.membership-perk-code.is-locked strong {
    color: #888;
    filter: blur(4px);
    user-select: none;
}
.membership-perk-btn {
    width: 100%;
    font-size: 0.68rem;
    padding: 6px 8px;
}

/* --- MEMBERSHIP LEFT SIDEBAR SCROLLBAR --- */
#sidebar-left-membership-container,
#sidebar-left-membership {
    direction: rtl;
    scrollbar-width: thin;
    scrollbar-color: rgba(138,43,226,0.7) rgba(10,10,10,0.6);
}
#sidebar-left-membership-container *,
#sidebar-left-membership * {
    direction: ltr;
}
#sidebar-left-membership-container::-webkit-scrollbar,
#sidebar-left-membership::-webkit-scrollbar {
    width: 8px;
}
#sidebar-left-membership-container::-webkit-scrollbar-track,
#sidebar-left-membership::-webkit-scrollbar-track {
    background: rgba(10,10,10,0.6);
    border-radius: 10px;
}
#sidebar-left-membership-container::-webkit-scrollbar-thumb,
#sidebar-left-membership::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(138,43,226,0.9), rgba(57,255,180,0.65));
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
}
#sidebar-left-membership-container::-webkit-scrollbar-thumb:hover,
#sidebar-left-membership::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(160,90,255,0.95), rgba(57,255,180,0.85));
}

/* --- MAIN PAGE SCROLLBAR --- */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(138,43,226,0.75) rgba(10,10,10,0.85);
    overflow-x: hidden;
}
html::-webkit-scrollbar {
    width: 10px;
}
html::-webkit-scrollbar-track {
    background: rgba(10,10,10,0.85);
}
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(138,43,226,0.9), rgba(57,255,180,0.6));
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
}
html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(160,90,255,0.95), rgba(57,255,180,0.85));
}

/* --- MEMBERSHIP DISCOUNT HINT --- */
.discount-hint {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.discount-hint-text {
    color: #39ffb4;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 8px rgba(57, 255, 180, 0.7), 0 0 18px rgba(57, 255, 180, 0.35);
    animation: discountGlow 2.2s ease-in-out infinite;
}
.discount-hint-arrow {
    color: #39ffb4;
    font-size: 1rem;
    text-shadow: 0 0 10px rgba(57, 255, 180, 0.7);
    animation: discountBounce 1.6s ease-in-out infinite;
}
@keyframes discountGlow {
    0%, 100% { opacity: 0.65; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}
@keyframes discountBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* --- 17. ROLE SELECTION MODAL --- */
#role-selection-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 3000;
    display: none; align-items: center; justify-content: center; flex-direction: column;
}
.role-grid { display: flex; gap: 20px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }

/* --- Artist Registration Modal --- */
.reg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

.reg-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.reg-modal-content {
    position: relative;
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 30px 40px 40px;
    max-width: 800px;
    width: 100%;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 255, 0, 0.05);
    animation: regModalIn 0.3s ease;
}

@keyframes regModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.reg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #222;
}

.reg-modal-header h2 {
    font-family: var(--font-head);
    font-size: 1.4rem;
    color: var(--accent-lime);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 8px rgba(212, 255, 0, 0.2);
}

.reg-modal-header h2 i {
    font-size: 1.1rem;
    opacity: 0.8;
}

.reg-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reg-modal-close:hover {
    background: rgba(255, 50, 50, 0.15);
    border-color: rgba(255, 50, 50, 0.4);
    color: #ff5555;
}

@media (max-width: 600px) {
    .reg-modal-content {
        padding: 20px 16px 30px;
    }
    .reg-modal-overlay {
        padding: 20px 10px;
    }
}

/* --- 18. ADMIN DASHBOARD WIDGETS --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px;
}
.dashboard-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 150px;
}
.dashboard-card h3 {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
    letter-spacing: 1px;
    display: flex; justify-content: space-between;
}
.stat-number {
    font-size: 3rem;
    color: white;
    font-weight: bold;
    font-family: var(--font-head);
    line-height: 1;
}
.stat-label { color: #666; font-size: 0.9rem; margin-top: 5px; }
.dashboard-list-item {
    background: #1a1a1a; padding: 10px; border-radius: 4px; margin-bottom: 8px;
    border-left: 3px solid var(--accent-purple); font-size: 0.9rem;
    display: flex; justify-content: space-between; align-items: center;
}

/* --- 12. CUSTOM FORM ELEMENTS (NEW) --- */
.file-upload-group { display: flex; align-items: center; gap: 15px; }
.file-upload-label {
    background: #222; border: 1px solid #333; color: #ccc;
    padding: 10px 20px; border-radius: 4px; cursor: pointer;
    font-size: 0.9rem; transition: 0.3s; display: inline-block;
    text-transform: uppercase; font-weight: bold; letter-spacing: 1px;
}
.file-upload-label:hover { background: var(--accent-lime); color: black; border-color: var(--accent-lime); }
.file-status { font-size: 0.85rem; color: var(--accent-lime); font-style: italic; }

.checkbox-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px; margin-top: 10px;
}
.checkbox-card {
    background: #161616; border: 1px solid #333; padding: 15px;
    border-radius: 6px; display: flex; align-items: center; gap: 10px;
    cursor: pointer; transition: 0.2s;
}
.checkbox-card:hover { border-color: var(--accent-lime); }
.checkbox-card input { width: 18px; height: 18px; accent-color: var(--accent-lime); cursor: pointer; }
.checkbox-card label { cursor: pointer; margin: 0; font-size: 0.85rem; color: #ddd; font-weight: 600; text-transform: uppercase; }

.contacts-dropdown {
    background: #161616; border: 1px solid #333; border-radius: 6px;
    max-height: 200px; overflow-y: auto; padding: 15px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.contact-option {
    display: flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid #222;
}
.contact-option label { font-size: 0.9rem; color: #ccc; cursor: pointer; }

/* --- 9. MY TICKETS SECTION (NEW) --- */
#my-tickets {
    padding: 100px 0;
    background: #0a0a0a;
    border-bottom: 1px solid var(--border-color);
    display: none; /* Hidden by default */
}

.ticket-card {
    background: #161616;
    border: 1px solid #333;
    border-left: 4px solid var(--accent-lime);
    padding: 25px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.ticket-info h3 { color: white; font-family: var(--font-head); font-size: 1.5rem; letter-spacing: 1px; }
.ticket-info p { color: #888; margin-top: 5px; }
.ticket-id { font-family: monospace; color: var(--accent-purple); font-size: 0.9rem; margin-top: 10px; display: block; }

.ticket-qr {
    background: white;
    padding: 10px;
    border-radius: 4px;
}

/* --- 8. FOOTER --- */
footer {
    background: #020202;
    padding: 80px 0 30px 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    transition: padding 0.4s ease-in-out;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 60px;
}

.footer-brand {
    flex: 1;
    min-width: min(300px, 100%);
    max-width: 400px;
}

.footer-brand p {
    color: #888;
    margin: 20px 0;
    line-height: 1.6;
}

.footer-links-group {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    flex: 2;
    justify-content: flex-end;
}

.footer-col {
    min-width: 120px;
}

.footer-col h4 {
    color: white;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    font-family: var(--font-head);
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #666;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    color: var(--accent-lime);
    padding-left: 5px;
}

.socials {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: #111;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    transition: 0.3s;
    font-size: 0.9rem;
    font-weight: bold;
}

.social-icon:hover {
    background: var(--accent-lime);
    color: black;
    border-color: var(--accent-lime);
    transform: translateY(-3px);
}

.social-icon-footer {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
    flex-shrink: 0;
}

.social-icon-footer:hover {
    background: var(--accent-lime);
    color: #000;
    transform: scale(1.15);
}

.footer-bottom {
    border-top: 1px solid #111;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    color: #444;
    font-size: 0.8rem;
}

.mobile-only-link { display: none !important; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .mobile-only-link { display: block !important; }
    /* Nav styles handled by utils.js injection for consistency */
    .hero h1 { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.2rem; }
    .section-title { font-size: 2rem; }
    
    /* MP3 Player Mobile Optimization */
    #mp3-player-widget {
        height: 60px;
        padding: 0 12px;
        gap: 10px;
    }
    
    #mp3-player-widget img {
        width: 40px;
        height: 40px;
        margin-right: 8px;
    }
    
    .player-info {
        flex: 1;
        min-width: 0;
    }
    
    .player-info h4 {
        font-size: 0.75rem;
    }
    
    .player-info p {
        font-size: 0.65rem;
    }
    
    .player-controls {
        gap: 8px;
    }
    
    .player-controls button {
        font-size: 1.2rem;
    }
    
    #play-pause-btn {
        font-size: 1.6rem;
    }
    
    .volume-slider {
        width: 60px;
    }

    .control-btn {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .marquee { font-size: 1.5rem; }
    .about-grid { grid-template-columns: 1fr; }
    .footer-links-group {
        justify-content: flex-start;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* --- 19. RICH TEXT EDITOR --- */
.rich-text-editor { border: 1px solid #333; border-radius: 4px; overflow: hidden; }
.toolbar { background: #1a1a1a; padding: 8px; border-bottom: 1px solid #333; display: flex; gap: 5px; flex-wrap: wrap; }
.toolbar button { background: #333; color: #ccc; border: none; padding: 6px 12px; cursor: pointer; font-weight: bold; border-radius: 3px; font-size: 0.8rem; }
.toolbar button:hover { background: var(--accent-lime); color: black; }
.editor-content { background: #111; min-height: 300px; padding: 20px; color: #ddd; outline: none; overflow-y: auto; line-height: 1.6; }
.editor-content h2 { color: white; margin-top: 20px; margin-bottom: 10px; font-family: var(--font-head); }
.editor-content h3 { color: var(--accent-lime); margin-top: 15px; margin-bottom: 8px; }
.editor-content ul, .editor-content ol { margin-left: 20px; margin-bottom: 15px; color: #bbb; }
.editor-content p { margin-bottom: 15px; }
.editor-content b { color: white; }

/* --- 20. ARTICLE SLIDER --- */
.article-slider { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 15px; scroll-snap-type: x mandatory; margin-bottom: 30px; }
.article-slide { flex: 0 0 100%; scroll-snap-align: center; max-height: 60vh; background: #000; display: flex; align-items: center; justify-content: center; border: 1px solid #333; border-radius: 8px; overflow: hidden; }
.article-slide img, .article-slide video { max-width: 100%; max-height: 60vh; object-fit: contain; width: auto; }
.article-content-display { max-width: 800px; margin: 0 auto; font-size: 1.1rem; color: #ccc; line-height: 1.8; }
.article-content-display h2 { color: white; font-family: var(--font-head); font-size: 2rem; margin-top: 40px; margin-bottom: 20px; }

/* --- 21. ADMIN DASHBOARD REDESIGN --- */
.admin-dashboard-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 25px;
}

.stat-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.stat-card h3 {
    color: #888;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-big-number {
    font-size: 3rem;
    font-weight: 900;
    color: white;
    font-family: var(--font-head);
    line-height: 1;
    margin-bottom: 5px;
}

.stat-sub-text {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.stat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stat-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #222;
    font-size: 0.9rem;
    color: #ccc;
}
.stat-list-item:last-child { border-bottom: none; }
.stat-list-item span.highlight { color: var(--accent-lime); font-weight: bold; }

/* Admin Dashboard Responsive */
@media (max-width: 1400px) {
    #admin-inbox-view > div:nth-child(2) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
    #admin-inbox-view > div:nth-child(2) { grid-template-columns: 1fr; }
    #admin-inbox-view > div:nth-child(3) { grid-template-columns: 1fr; }
}
/* --- Admin Hamburger (hidden on desktop) --- */
.admin-hamburger {
    display: none;
    background: none;
    border: none;
    color: #ccc;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.admin-hamburger .hamburger-fallback { display: none; }
.admin-hamburger:hover { background: #222; color: var(--accent-lime); }

/* Overlay behind sidebar on mobile */
.admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10011;
}
.admin-sidebar-overlay.active { display: block; }

/* --- Tablet (sidebar narrows) --- */
@media (max-width: 1024px) {
    .admin-sidebar { width: 200px; padding: 15px; }
    .admin-content { margin-left: 200px; padding: 25px 20px 120px; }
    .admin-sidebar-category-label { font-size: 0.6rem; }
    .admin-nav-btn { padding: 10px 14px; font-size: 0.85rem; }
    .admin-nav-btn.child-item { padding-left: 24px; font-size: 0.8rem; }
}

/* ============================================================
   MOBILE ADMIN PORTAL — COMPLETE REDESIGN (≤768px)
   ============================================================ */
@media (max-width: 768px) {

    /* --- PORTAL SHELL (flex column — header stays, content scrolls) --- */
    #admin-portal.active {
        display: flex !important;
        flex-direction: column;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    /* --- HEADER (static flex child, no position:fixed) --- */
    #admin-portal .admin-hamburger,
    .admin-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.4rem;
        flex-shrink: 0;
        color: #fff !important;
        background: rgba(255,255,255,0.12) !important;
        border: 2px solid rgba(255,255,255,0.25) !important;
        border-radius: 8px;
        cursor: pointer;
    }
    .admin-hamburger .fa-bars { display: inline; }
    .admin-hamburger .hamburger-fallback { display: none; }
    /* If FA icon fails to render, show text fallback */
    .admin-hamburger .fa-bars:empty ~ .hamburger-fallback,
    .admin-hamburger:not(:has(.fa-bars::before)) .hamburger-fallback {
        display: inline;
        font-size: 1.4rem;
    }
    #admin-portal .admin-hamburger:active,
    .admin-hamburger:active {
        background: rgba(212,255,0,0.2) !important;
        border-color: var(--accent-lime) !important;
        color: var(--accent-lime) !important;
    }
    .admin-header {
        position: relative;
        flex-shrink: 0;
        padding: 10px 12px;
        gap: 8px;
        z-index: 10012;
    }
    .admin-header .logo {
        font-size: 0.72rem;
        letter-spacing: 1px;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .admin-header .btn {
        padding: 6px 14px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* --- SIDEBAR DRAWER --- */
    .admin-sidebar {
        position: fixed !important;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10013;
        top: 0;
        bottom: 0;
        padding: 60px 16px 100px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #080808;
    }
    .admin-sidebar.open {
        transform: translateX(0);
    }
    .admin-sidebar-overlay.active {
        display: block;
        z-index: 10012;
    }
    .admin-nav-btn {
        padding: 14px 16px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
    .admin-nav-btn.child-item {
        padding: 12px 16px 12px 28px;
        font-size: 0.85rem;
    }
    .admin-sidebar-category-label {
        font-size: 0.6rem;
    }

    /* --- MAIN CONTENT (scrollable flex child) --- */
    .admin-content {
        margin-left: 0;
        padding: 16px 12px 100px;
        overflow-x: hidden;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* --- FORCE ALL INLINE GRIDS TO SINGLE COLUMN --- */
    /* Dashboard top stats row (4-col inline grid) */
    #admin-inbox-view > div:nth-child(2) {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    /* Dashboard stat cards — smaller on mobile */
    #admin-inbox-view > div:nth-child(2) > div {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    #admin-inbox-view > div:nth-child(2) > div > div:nth-child(3) {
        font-size: 1.6rem !important;
    }

    /* Dashboard financial breakdown grid */
    #admin-inbox-view > div:nth-child(3) > div:last-child {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Dashboard main 2fr/1fr grid → stacked */
    #admin-inbox-view > div:nth-child(4) {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Dashboard header row */
    #admin-inbox-view > div:first-child {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    #admin-inbox-view > div:first-child h1 {
        font-size: 1.4rem !important;
    }
    #admin-inbox-view > div:first-child p {
        font-size: 0.85rem !important;
    }

    /* Community insights 2-col grid */
    #admin-inbox-view div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Financial breakdown section */
    #admin-inbox-view div[style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Payout summary cards */
    #payoutsSummary {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    #payoutsSummary > div {
        padding: 14px !important;
    }
    #payoutsSummary > div > div:last-child {
        font-size: 1.3rem !important;
    }

    /* Featured content 2-col grid → stacked */
    #admin-featured-view div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* --- TABLES: RESPONSIVE HORIZONTAL SCROLL --- */
    .admin-table-container {
        padding: 8px;
        margin-top: 16px;
        border-radius: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table {
        min-width: 600px !important;
        font-size: 0.78rem;
    }
    .admin-table th,
    .admin-table td {
        padding: 8px 10px;
        font-size: 0.78rem;
    }
    .admin-table th {
        font-size: 0.7rem;
        padding: 8px 10px;
    }
    /* Scroll hint indicator */
    .admin-table-container::after {
        content: "← Scroll →";
        display: block;
        text-align: center;
        color: #555;
        font-size: 0.7rem;
        padding: 6px 0 2px;
        letter-spacing: 1px;
    }

    /* --- FORMS --- */
    .admin-form-grid {
        grid-template-columns: 1fr !important;
    }
    /* All search inputs inside admin: constrain width */
    #admin-portal .search-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 14px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
    #admin-portal select.search-input {
        height: auto !important;
        min-height: 44px;
    }
    #admin-portal textarea.search-input {
        min-height: 80px;
    }
    /* Form containers */
    #admin-portal div[style*="background: #111"][style*="padding: 30px"] {
        padding: 16px !important;
        border-radius: 8px !important;
    }

    /* Fix the filter bar / search row inside table containers */
    .admin-filter-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .admin-filter-bar .search-input,
    .admin-filter-bar input,
    .admin-filter-bar select {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    /* Top bar rows in table views (flex rows with justify:space-between) */
    #admin-portal .admin-table-container > div[style*="display:flex"][style*="justify-content:space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    #admin-portal .admin-table-container > div[style*="display:flex"][style*="justify-content:space-between"] .admin-filter-bar {
        flex-direction: column;
    }
    #admin-portal .admin-table-container > div[style*="display:flex"][style*="justify-content:space-between"] > div[style*="display:flex"][style*="gap:8px"] {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Stats badges row (curator events, curators, third-party) */
    #admin-portal div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:16px"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #admin-portal div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:16px"] > span {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
        text-align: center;
    }

    /* Third-party events stats row */
    #admin-third-party-events-view > div[style*="display:flex"][style*="gap:15px"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    #admin-third-party-events-view > div[style*="display:flex"][style*="gap:15px"] > div {
        padding: 10px 14px !important;
    }

    /* Third-party events header */
    #admin-third-party-events-view > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    #admin-third-party-events-view > div:first-child > div:last-child {
        width: 100%;
        flex-direction: column !important;
    }
    #admin-third-party-events-view > div:first-child input,
    #admin-third-party-events-view > div:first-child select {
        width: 100% !important;
    }

    /* --- BUTTON ROWS --- */
    #admin-portal .full-width[style*="display: flex"][style*="gap: 10px"] {
        flex-direction: column !important;
    }
    #admin-portal .full-width[style*="display: flex"][style*="gap: 10px"] .btn {
        width: 100% !important;
    }

    /* Seed / import buttons at top of sections */
    #admin-portal > .admin-content > div > button.btn {
        width: 100%;
        margin-bottom: 8px !important;
        margin-left: 0 !important;
    }

    /* --- CHECKBOX GRID --- */
    .checkbox-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .checkbox-card {
        padding: 10px !important;
    }
    .checkbox-card label {
        font-size: 0.75rem !important;
    }

    /* --- LINEUP BUILDER --- */
    .lineup-builder {
        padding: 10px !important;
    }
    .lineup-input-group {
        flex-direction: column !important;
    }
    .lineup-input-group .search-input,
    .lineup-input-group input {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    /* Members builder flex row */
    #admin-portal .lineup-builder > div[style*="display: flex"][style*="gap: 20px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    #admin-portal .lineup-builder > div[style*="display: flex"][style*="gap: 20px"] > div {
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* --- RICH TEXT EDITOR --- */
    .toolbar {
        gap: 3px;
        padding: 6px;
    }
    .toolbar button {
        padding: 5px 8px;
        font-size: 0.7rem;
    }
    .editor-content {
        min-height: 200px;
        padding: 14px;
    }

    /* --- IMAGE UPLOAD CONTAINERS --- */
    #admin-portal div[style*="grid-template-columns: repeat(auto-fit, minmax(250px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* --- VIDEO INPUTS ROW --- */
    #admin-acts-view div[style*="display:flex"][style*="gap:10px"][style*="align-items:center"][style*="margin-bottom:8px"] {
        flex-wrap: wrap !important;
    }
    #admin-acts-view div[style*="display:flex"][style*="gap:10px"][style*="align-items:center"][style*="margin-bottom:8px"] input {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* --- GENRE SELECTOR ROW --- */
    #admin-portal div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"][style*="align-items:center"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #admin-portal div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"][style*="align-items:center"] select,
    #admin-portal div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"][style*="align-items:center"] input {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* --- ADMIN DASHBOARD (OLD STAT CARDS) --- */
    .admin-dashboard-container {
        grid-template-columns: 1fr !important;
    }
    .stat-card {
        padding: 16px;
    }
    .stat-big-number {
        font-size: 2rem;
    }

    /* --- ADMIN GRID --- */
    .admin-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- SECTION TITLES --- */
    .admin-content .section-title,
    .admin-content h2,
    .admin-content h3 {
        font-size: 1.15rem !important;
        word-break: break-word;
    }
    .admin-content h1 {
        font-size: 1.4rem !important;
    }

    /* --- NOTIFICATION ITEMS (Attention Required, Top Selling, etc.) --- */
    #admin-portal .admin-content div[style*="display:flex"][style*="justify-content:space-between"][style*="align-items:center"][style*="padding:12px"] {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* --- QUICK ACTIONS --- */
    #admin-portal .btn[style*="text-align:left"][style*="display:flex"][style*="align-items:center"] {
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
    }

    /* --- COLUMN PICKER DROPDOWN --- */
    .column-picker-dropdown {
        width: calc(100vw - 40px) !important;
        max-width: 280px;
        right: 10px !important;
        left: auto !important;
    }

    /* --- MAP PREVIEW --- */
    #admin-event-map-preview {
        height: 220px !important;
    }

    /* --- PREVIEW GRID (image thumbnails) --- */
    .preview-grid {
        gap: 6px;
    }
    .preview-item {
        width: 60px;
        height: 60px;
    }

    /* --- INSTRUMENT GRID (act form) --- */
    .instrument-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 6px !important;
    }

    /* --- CURATOR OVERRIDE SECTION --- */
    #adminCuratorOverrideFields > .admin-form-group {
        margin-bottom: 12px !important;
    }
    #adminCuratorOverrideFields div[style*="display: flex"][style*="gap: 15px"] {
        flex-direction: column !important;
    }

    /* --- FIX GENERAL OVERFLOW SOURCES --- */
    #admin-portal *[style*="width:200px"],
    #admin-portal *[style*="width:220px"],
    #admin-portal *[style*="width:140px"],
    #admin-portal *[style*="width:150px"],
    #admin-portal *[style*="width:160px"],
    #admin-portal *[style*="width:180px"] {
        width: 100% !important;
    }

    /* Prevent horizontal overflow from any child */
    #admin-portal,
    .admin-content,
    .admin-content > div {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* --- EVENTS FILTER BAR BUTTONS --- */
    .admin-filter-bar .btn,
    .admin-filter-bar .admin-filter-btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.75rem;
        padding: 8px 10px;
        text-align: center;
    }

    /* --- OFFERED LOGO PREVIEW --- */
    #offerLogoPreview img {
        width: 50px !important;
        height: 50px !important;
    }

    /* --- FILE UPLOAD GROUPS --- */
    .file-upload-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* --- CONTACTS DROPDOWN --- */
    .contacts-dropdown {
        grid-template-columns: 1fr !important;
    }
}

/* --- 22. IMAGE PREVIEWS (ACT EDITOR) --- */
.preview-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.preview-item { 
    width: 80px; height: 80px; border: 2px solid #333; border-radius: 4px; 
    overflow: hidden; cursor: pointer; position: relative; transition: 0.2s;
}
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item:hover { border-color: #666; }
.preview-item.selected { border-color: var(--accent-lime); box-shadow: 0 0 10px rgba(212, 255, 0, 0.2); }
.preview-badge {
    position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.8);
    color: var(--accent-lime); font-size: 0.6rem; text-align: center; padding: 2px 0; font-weight: bold;
}

/* --- 23. COMMUNITY COLLAGE --- */

.collage-item {

    position: absolute;

    border: 5px solid white;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0s;

    cursor: pointer;

    overflow: hidden;

    background: #000;

}



.collage-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.collage-overlay {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0,0,0,0.7);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: opacity 0.3s ease;

    padding: 15px;

    text-align: center;

}



.collage-text { color: white; font-family: var(--font-head); text-transform: uppercase; font-size: 1.2rem; line-height: 1; margin-bottom: 5px; transform: translateY(10px); transition: 0.3s; }

.collage-arrow { font-size: 1.5rem; transform: translateY(10px); transition: 0.3s 0.1s; }



.collage-item:hover { transform: scale(1.3) rotate(0deg) !important; z-index: 100; }

.collage-item:hover .collage-overlay { opacity: 1; }

.collage-item:hover .collage-text, .collage-item:hover .collage-arrow { transform: translateY(0); }



.collage-item.hover-lime:hover { border-color: var(--accent-lime); }

.collage-item.hover-lime .collage-arrow { color: var(--accent-lime); }



.collage-item.hover-purple:hover { border-color: var(--accent-purple); }

.collage-item.hover-purple .collage-arrow { color: var(--accent-purple); }

.collage-item.hover-lime:hover { border-color: var(--accent-lime); }

/* --- 24. TICKET BUTTON STYLING --- */
.ticket-btn {
    display: inline-flex;
    align-items: stretch;
    background: var(--accent-lime);
    color: #000;
    border: none;
    padding: 0;
    font-family: var(--font-head);
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    margin: 10px 0;
    transition: transform 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    overflow: visible;
    text-decoration: none;
}

.ticket-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: stretch;
    margin-top: auto;
}

.qty-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent;
    border-radius: 6px;
    padding: 0;
    width: 100%;
    border: none;
    height: 32px;
}

.qty-btn {
    background: rgba(255,255,255,0.06);
    color: #888;
    border: 1px solid rgba(255,255,255,0.1);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.qty-btn:hover {
    background: rgba(212,255,0,0.12);
    color: var(--accent-lime);
    border-color: rgba(212,255,0,0.3);
}

.qty-input {
    width: 44px;
    text-align: center;
    background: transparent;
    border: none;
    color: white;
    font-weight: 700;
    font-family: var(--font-head);
    font-size: 1.1rem;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Override ticket button margins/width when inside controls */
.ticket-controls .ticket-btn {
    margin: 0;
    width: 100%;
}

.ticket-btn:hover:not(:disabled),
.hero-card:hover .ticket-btn:not(:disabled) {
    transform: scale(1.05) rotate(-1deg);
    filter: brightness(1.1);
}

.ticket-btn:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
}

.ticket-stub {
    padding: 12px 15px;
    border-right: 2px dashed rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: bold;
    position: relative;
}

.ticket-main {
    padding: 12px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    font-size: 0.8rem;
    font-weight: 800;
}

/* Perforation Holes (Top/Bottom) */
.ticket-stub::before,
.ticket-stub::after {
    content: '';
    position: absolute;
    right: -8px;
    width: 14px;
    height: 14px;
    background: var(--bg-card);
    border-radius: 50%;
    z-index: 3;
}
.ticket-stub::before { top: -7px; }
.ticket-stub::after { bottom: -7px; }

/* Side Notches (Left/Right) */
.ticket-btn::before,
.ticket-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 16px;
    background: var(--bg-card);
    z-index: 3;
    transform: translateY(-50%);
}
.ticket-btn::before { left: -5px; border-radius: 0 10px 10px 0; }
.ticket-btn::after { right: -5px; border-radius: 10px 0 0 10px; }

/* --- 25. RIPPED/USED TICKET STYLING (for past events) --- */
.ripped-ticket-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    margin: 10px 0;
    margin-top: auto; /* Push to bottom of card */
    transition: transform 0.3s ease;
    opacity: 0.8;
    width: 100%;
}

.ripped-ticket-container:hover, 
.event-card:hover .ripped-ticket-container,
.hero-card:hover .ripped-ticket-container {
    transform: scale(1.02);
    opacity: 1;
}

.ripped-ticket-main {
    background: #262626;
    color: #555;
    padding: 12px 20px;
    font-family: var(--font-head);
    text-transform: uppercase;
    border-radius: 0 4px 4px 0;
    transition: all 0.3s ease;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    transform: rotate(1deg);
    transform-origin: left center;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.ripped-ticket-stub {
    position: relative;
    width: 40px;
    height: 44px;
    background: #262626;
    border-radius: 4px 0 0 4px;
    border-right: 2px dashed #333;
    transform: rotate(-3deg) translateY(2px);
    transform-origin: right center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 0;
}

.ripped-ticket-main .text-hover { display: none; }

.ripped-ticket-container:hover .ripped-ticket-main,
.event-card:hover .ripped-ticket-main,
.hero-card:hover .ripped-ticket-main {
    background: var(--accent-lime);
    color: #000;
    transform: rotate(3deg) translateX(3px);
}
.ripped-ticket-container:hover .ripped-ticket-stub,
.event-card:hover .ripped-ticket-stub,
.hero-card:hover .ripped-ticket-stub {
    transform: rotate(-8deg) translateX(-4px);
    background: var(--accent-lime);
    border-right-color: rgba(0,0,0,0.3);
}

.ripped-ticket-container:hover .text-default,
.event-card:hover .text-default,
.hero-card:hover .text-default { display: none; }
.ripped-ticket-container:hover .text-hover,
.event-card:hover .text-hover,
.hero-card:hover .text-hover { display: inline; }

/* Add perforation holes and notches to ripped ticket pieces */
.ripped-ticket-stub::before, .ripped-ticket-stub::after { content: ''; position: absolute; z-index: 3; border-radius: 50%; background: var(--bg-card); right: -7px; width: 14px; height: 14px; }
.ripped-ticket-stub::before { top: -7px; right: -8px; width: 14px; height: 14px; } /* Top hole */
.ripped-ticket-stub::after { bottom: -7px; right: -8px; width: 14px; height: 14px; } /* Bottom hole */

.ripped-ticket-main::after { content: ''; position: absolute; top: 50%; right: -5px; width: 10px; height: 16px; background: var(--bg-card); z-index: 3; transform: translateY(-50%); border-radius: 10px 0 0 10px; }

/* Override for details page background */
#event-details .ticket-btn::before, #event-details .ticket-btn::after,
#event-details .ticket-stub::before, #event-details .ticket-stub::after,
#event-details .ripped-ticket-stub::before, #event-details .ripped-ticket-stub::after,
#event-details .ripped-ticket-main::after {
    background: var(--bg-color);
}

/* --- 26. CONCLUDED EVENT WATERMARK (Event Details Page) --- */
#event-detail-content {
    position: relative;
    overflow: hidden;
}

#event-detail-content > * {
    position: relative;
    z-index: 2;
}

#event-detail-content .concluded-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg) scale(1.5);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.04;
    pointer-events: none;
    white-space: nowrap;
    filter: grayscale(1);
}

.watermark-main {
    background: #fff;
    color: #000;
    padding: 20px 50px;
    font-family: var(--font-head);
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 0 10px 10px 0;
    display: flex;
    align-items: center;
    position: relative;
}

.watermark-stub {
    width: 60px;
    align-self: stretch;
    background: #fff;
    border-radius: 10px 0 0 10px;
    border-right: 4px dashed #000;
    position: relative;
    transform: rotate(-5deg) translateX(2px);
    margin-right: 2px;
}

.watermark-stub::before, .watermark-stub::after {
    content: ''; position: absolute; right: -10px; width: 20px; height: 20px; background: var(--bg-color); border-radius: 50%; z-index: 1;
}
.watermark-stub::before { top: -10px; }
.watermark-stub::after { bottom: -10px; }

.watermark-main::after {
    content: ''; position: absolute; top: 50%; right: -8px; width: 16px; height: 24px; background: var(--bg-color); border-radius: 16px 0 0 16px; transform: translateY(-50%);
}
/* --- 27. SPINNER ANIMATION --- */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- 28. REVIEWS & ENDORSEMENTS --- */
.reviews-section, .endorsements-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #222;
}
.review-grid, .endorsement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.review-card {
    background: #111;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
}
.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #888;
}
.star-rating { color: var(--accent-lime); font-weight: bold; }
.review-text { color: #ccc; font-size: 0.95rem; line-height: 1.5; }

.endorsement-card {
    background: #161616;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
    border-left: 3px solid var(--accent-purple);
    display: flex;
    gap: 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.endorsement-card:hover {
    background-color: rgba(138, 43, 226, 0.15);
    border-color: var(--accent-purple);
}
.endorsement-img {
    width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--accent-purple);
}
.endorsement-content h5 { color: white; margin-bottom: 5px; font-size: 1rem; }
.endorsement-content p { color: #bbb; font-size: 0.9rem; font-style: italic; }

.feedback-form {
    background: #0a0a0a;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
    margin-top: 20px;
}

/* --- Event Page Filters --- */
.event-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 16px;
}

.event-filter-input,
.event-filters .filter-btn {
    border-radius: 24px !important;
    height: 42px;
    font-size: 0.85rem;
    padding: 0 18px;
    box-sizing: border-box;
}

.event-filter-input {
    flex: 1;
    min-width: 0;
}

#event-search {
    max-width: 220px;
}

#event-date-range {
    max-width: 160px;
    flex: 0 0 160px;
    cursor: pointer;
}

/* Flatpickr generates an altInput — target it directly */
.flatpickr-date-alt {
    max-width: 160px !important;
    flex: 0 0 160px !important;
    cursor: pointer;
}

#event-status-sort {
    max-width: 160px;
    flex: 0 0 160px;
}

/* --- Category Buttons (Scrollable) --- */
.category-buttons-scroll {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.category-btn {
    background: #161616;
    border: 1px solid #333;
    color: #888;
    padding: 6px 14px;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease;
}

.category-btn:hover, .category-btn.active {
    background: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}

/* --- Pagination --- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.pagination-btn {
    background: #222;
    color: #888;
    border: 1px solid #333;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}

.pagination-btn.active, .pagination-btn:hover {
    background: var(--accent-lime);
    color: black;
    border-color: var(--accent-lime);
}

/* --- REAL TICKET ROW STYLES --- */
.real-ticket-card {
    display: flex;
    background: #161616;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 160px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
    margin-bottom: 20px;
}
.real-ticket-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-lime);
}

.ticket-image-section {
    width: 220px;
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

.ticket-status-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: rgba(0,0,0,0.8);
    color: var(--accent-lime);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(212, 255, 0, 0.3);
}

.ticket-content-section {
    flex-grow: 1;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 2px dashed #333;
    position: relative;
}

/* Notch effect for perforation */
.ticket-content-section::after {
    content: ''; position: absolute; top: -10px; right: -11px; width: 20px; height: 20px;
    background: var(--bg-color); border-radius: 50%; z-index: 1; border: 1px solid #333;
}
.ticket-content-section::before {
    content: ''; position: absolute; bottom: -10px; right: -11px; width: 20px; height: 20px;
    background: var(--bg-color); border-radius: 50%; z-index: 1; border: 1px solid #333;
}

.ticket-event-title {
    font-family: var(--font-head); font-size: 1.8rem; color: white; margin-bottom: 10px; line-height: 1.1;
}
.ticket-event-details {
    color: #aaa; font-size: 0.9rem; display: flex; flex-direction: column; gap: 5px;
}

.ticket-action-section {
    width: 180px; background: #111; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 20px; gap: 15px; flex-shrink: 0;
}

.ticket-qr-preview {
    background: white; padding: 5px; border-radius: 4px; width: 80px; height: 80px;
}

.ticket-buttons { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.btn-ticket-action {
    background: transparent; border: 1px solid #444; color: #ccc; padding: 8px;
    font-size: 0.75rem; text-transform: uppercase; cursor: pointer; border-radius: 4px;
    transition: 0.2s; text-align: center; width: 100%; font-weight: bold;
}
.btn-ticket-action:hover { background: var(--accent-lime); color: black; border-color: var(--accent-lime); }

@media (max-width: 768px) {
    .real-ticket-card { flex-direction: column; height: auto; }
    .ticket-image-section { width: 100%; height: 150px; }
    .ticket-content-section { border-right: none; border-bottom: 2px dashed #333; padding: 20px; }
    .ticket-content-section::after { top: auto; bottom: -11px; right: -10px; }
    .ticket-content-section::before { top: auto; bottom: -11px; left: -10px; right: auto; }
    .ticket-action-section { width: 100%; flex-direction: row; justify-content: space-between; padding: 15px 20px; }
    .ticket-qr-preview { width: 60px; height: 60px; }
    .ticket-buttons { width: auto; min-width: 140px; }
}

/* --- 29. FLATPICKR CUSTOM THEME --- */
.flatpickr-calendar {
    background: rgba(15, 10, 25, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--accent-purple) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 15px rgba(138, 43, 226, 0.2) !important;
    border-radius: 12px !important;
    color: var(--text-main) !important;
}

.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--accent-purple) !important;
}
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--accent-purple) !important;
}

.flatpickr-months .flatpickr-month {
    background: transparent !important;
    color: white !important;
    fill: white !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
    color: white !important;
    font-weight: bold;
}

.flatpickr-current-month input.cur-year {
    color: white !important;
    font-weight: bold;
}

.flatpickr-weekdays {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

span.flatpickr-weekday {
    color: white !important;
    font-weight: bold !important;
}

.flatpickr-day {
    color: #ccc !important;
    border-radius: 50% !important;
}

.flatpickr-day:hover {
    background: rgba(212, 255, 0, 0.2) !important;
    border-color: transparent !important;
    color: white !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: transparent !important;
    color: var(--accent-lime) !important;
    border: 1px solid var(--accent-lime) !important;
    font-weight: bold !important;
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.4) !important;
}

.flatpickr-day.today {
    border-color: transparent !important;
}

.flatpickr-day.today:hover {
    background: rgba(212, 255, 0, 0.2) !important;
    border-color: transparent !important;
    color: white !important;
}

.flatpickr-prev-month, .flatpickr-next-month {
    width: 28px !important;
    height: 28px !important;
    padding: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.flatpickr-next-month svg, .flatpickr-prev-month svg {
    width: 14px !important;
    height: 14px !important;
    fill: var(--accent-purple) !important;
}
.flatpickr-next-month:hover svg, .flatpickr-prev-month:hover svg {
    fill: var(--accent-lime) !important;
}

/* --- 30. PARTICLE BACKGROUND --- */
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.particle-wrapper {
    position: absolute;
    will-change: transform;
}

.particle {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 80%);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* --- 31. FEATURES SECTION --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--accent-purple);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    pointer-events: none;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    background: -webkit-linear-gradient(45deg, var(--accent-lime), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-card h3 {
    color: white;
    font-family: var(--font-head);
    font-size: 1.5rem;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.feature-card p {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Features slider: invisible on desktop, active on mobile */
.features-slider {
    display: contents;
}

.features-slider-nav {
    display: none;
}

/* --- 32. CONTRIBUTE PROMO MOCKUP --- */
.glass-mockup {
    width: 300px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-5deg);
    transition: transform 0.5s ease;
}
.glass-mockup:hover { transform: rotate(0deg) scale(1.05); }

.mockup-content { display: flex; flex-direction: column; gap: 15px; text-align: center; }
.mockup-content span {
    background: rgba(0,0,0,0.6); color: var(--accent-lime); padding: 8px 20px; border-radius: 50px;
    font-weight: bold; font-family: var(--font-head); letter-spacing: 1px; border: 1px solid var(--accent-lime);
}

/* Desktop Grid Layout for Features (9 items) */
@media (min-width: 1200px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .feature-card:nth-child(5),
    .feature-card:nth-child(6),
    .feature-card:nth-child(7) {
        grid-column: span 2;
    }
}

/* --- 33. SIDEBAR LAYOUT --- */
.page-with-sidebar {
    position: relative;
}

@media (min-width: 993px) {
    /* Sidebars are fixed overlays — they do not push or shrink page content */
     .page-with-sidebar #directory-page.container,
     .page-with-left-sidebar #directory-page.container,
     .page-with-sidebar #event-details.container,
     .page-with-left-sidebar #event-details.container,
     .page-with-sidebar #article-details.container,
     .page-with-left-sidebar #article-details.container {
         max-width: 100%;
     }

    /* Artist details: break out of centered container, fill space between sidebar tab strips */
    body.page-with-sidebar #artist-details,
    body.page-with-left-sidebar #artist-details {
        max-width: calc(100% - 96px) !important;
        width: calc(100% - 96px) !important;
        margin-left: 48px !important;
        margin-right: 48px !important;
        box-sizing: border-box !important;
    }
}

.sidebar-widget {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.sidebar-widget h3 {
    color: white;
    font-family: var(--font-head);
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    letter-spacing: 1px;
}

@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-20px) translateX(10px); }
    50% { transform: translateY(0) translateX(20px); }
    75% { transform: translateY(20px) translateX(10px); }
}

@keyframes sidebarFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

.sidebar-glass-mockup {
    /* Default Yellow Glow */
    border: 1px solid rgba(212, 255, 0, 0.3);
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.1);
    
    /* Animation & Transition */
    animation: sidebarFloat 5s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sidebar-glass-mockup:hover {
    /* Purple on Hover */
    border-color: var(--accent-purple);
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
    
    transform: rotate(0deg) scale(1.05) !important;
    animation-play-state: paused;
}

.sidebar-scattered-photos {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
}
.sidebar-photo {
    position: absolute;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 4px solid white;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0s;
    cursor: pointer;
    transform-origin: center;
}

.sidebar-photo:hover {
    transform: scale(1.2) rotate(0deg) !important;
    border-color: var(--accent-lime);
    z-index: 100 !important;
}

.video-featured-card {
    border: 1px solid var(--accent-purple);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.15);
    transition: 0.3s;
}
.video-featured-card:hover {
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.3);
}

/* Ensure left sidebar sections are translucent to show the glass effect */
#sidebar-left .sidebar-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.video-wrapper {
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    border-radius: 6px; 
    border: 1px solid #333; 
    margin-bottom: 15px;
}

.band-name-btn {
    width: 100%; 
    margin-bottom: 10px; 
    border-color: var(--accent-lime); 
    color: var(--accent-lime);
    font-size: 0.9rem;
    padding: 10px;
}
.band-name-btn:hover {
    background: var(--accent-lime);
    color: black;
}

.genre-tags-container {
    display: flex; 
    flex-wrap: wrap; 
    gap: 5px; 
    justify-content: center;
}

.shiny-cta {
    position: relative;
    overflow: hidden;
    background: var(--accent-purple);
    color: white;
    border: none;
    width: 100%;
    font-size: 0.9rem;
    padding: 15px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    clip-path: none; /* Override default btn clip-path if needed */
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
}

.shiny-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 3s infinite;
}

.shiny-cta:hover {
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.8);
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

@import url("sidebar.css");

/* --- 34. PULSE / ABOUT HERO STATS --- */
.about-hero {
    padding: 100px 0;
    background: linear-gradient(to bottom, #050505 0%, transparent 20%, transparent 80%, #050505 100%), radial-gradient(circle at center, rgba(138, 43, 226, 0.1) 0%, #050505 70%);
    text-align: center;
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.live-stat-card {
    background: #111;
    border: 1px solid #333;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.live-stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-lime);
}
.stat-value {
    font-family: var(--font-head);
    font-size: 3.5rem;
    color: white;
    line-height: 1;
    margin-bottom: 10px;
}
.stat-label {
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}
/* --- MP3 PLAYER WIDGET --- */
#mp3-player-widget {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: rgba(20, 10, 40, 0.95);
    border-top: 2px solid rgba(138, 43, 226, 0.8);
    border-bottom: 2px solid rgba(138, 43, 226, 0.8);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 10000;
    box-shadow: 0 -5px 30px rgba(138, 43, 226, 0.2), inset 0 0 20px rgba(138, 43, 226, 0.1);
    transition: left 0.4s ease-in-out, width 0.4s ease-in-out, transform 0.3s ease, opacity 0.3s ease;
    gap: 15px;
}

body.page-with-sidebar #mp3-player-widget {
    width: calc(100% - 250px);
}

body.page-with-left-sidebar #mp3-player-widget {
    width: calc(100% - 250px);
    left: 250px;
}

body.page-with-sidebar.page-with-left-sidebar #mp3-player-widget {
    width: calc(100% - 500px);
    left: 250px;
}

body.directory-mode #mp3-player-widget {
    transform: translateY(4px);
    opacity: 0.98;
}

#sidebar-left-container,
#sidebar-left {
    transition: transform 0.4s ease-in-out;
}

body.directory-mode #sidebar-left-container,
body.directory-mode #sidebar-left {
    transform: translateX(0);
}

#mp3-player-widget img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border: 1px solid #333;
}

.player-artist-thumb {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.player-artist-thumb:hover {
    transform: scale(1.08) rotate(-1deg);
    border-color: #D4FF00;
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.45);
    animation: neonPulse 1.1s ease-in-out infinite;
}

.player-artist-link {
    transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
    display: inline-block;
    padding-left: 2px;
    transform-origin: left center;
}

.player-artist-link:hover {
    transform: translateY(-1px) scale(1.06);
    color: #D4FF00;
    text-shadow: 0 0 6px rgba(212, 255, 0, 0.35);
}

#mp3-player-widget .player-artist-link:hover {
    color: #D4FF00 !important;
}

@keyframes neonPulse {
    0% {
        box-shadow: 0 0 8px rgba(212, 255, 0, 0.35), 0 0 16px rgba(212, 255, 0, 0.25);
    }
    50% {
        box-shadow: 0 0 14px rgba(212, 255, 0, 0.7), 0 0 28px rgba(212, 255, 0, 0.45);
    }
    100% {
        box-shadow: 0 0 8px rgba(212, 255, 0, 0.35), 0 0 16px rgba(212, 255, 0, 0.25);
    }
}


.player-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0; /* Prevents text overflow issues */
}

#player-title {
    color: #eee;
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#player-title a:hover {
    color: var(--accent-lime);
    text-decoration: underline;
}

#player-filename {
    color: #888;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-container {
    background: rgba(255, 255, 255, 0.1);
    height: 4px;
    width: 100%;
    cursor: pointer;
    border-radius: 2px;
    margin-top: 5px;
}

.progress-bar {
    background: var(--accent-lime);
    height: 100%;
    width: 0%;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--accent-lime);
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 20px;
}

.player-controls button {
    background: none;
    border: none;
    color: transparent; /* keep inner fill transparent so stroke shows like an outline */
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.12s ease, text-shadow 0.12s ease;
    padding: 4px;
    border-radius: 50%;
    -webkit-text-stroke: 1.6px rgba(212,255,0,1); /* outline */
    text-shadow: 0 0 6px rgba(212,255,0,0.9);
}

.player-controls button:hover {
    transform: scale(1.06);
    text-shadow: 0 0 12px rgba(212,255,0,1);
    -webkit-text-stroke-width: 2px;
}

#play-pause-btn {
    font-size: 2.2rem;
    color: transparent;
    -webkit-text-stroke: 2px rgba(212,255,0,1);
    text-shadow: 0 0 10px rgba(212,255,0,0.95);
}
#play-pause-btn:hover {
    transform: scale(1.06);
    -webkit-text-stroke-width: 2.6px;
    text-shadow: 0 0 16px rgba(212,255,0,1), 0 0 6px rgba(138,43,226,0.25);
}

.volume-knob-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    order: -1; /* Place at the beginning */
    position: relative;
}

.volume-label {
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 22px;
    text-align: center;
}

.volume-knob {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #111;
    border: 2px solid #444;
    position: relative;
    cursor: grab;
    transform: rotate(0deg); /* Initial position */
}

.volume-slider {
    --slider-glow-alpha: 0.6;
    --slider-glow-size: 12px;
    --slider-track-alpha: 0.15;
    width: 120px;
    height: 5px;
    cursor: pointer;
    background: var(--accent-lime);
    border-radius: 5px;
    outline: none;
    margin: 0 10px;
    border: none;
}

.volume-slider::-webkit-slider-runnable-track {
    background: var(--accent-lime);
    border-radius: 5px;
    height: 5px;
    border: none;
    box-shadow: 0 0 12px var(--accent-lime);
}

.volume-slider::-moz-range-track {
    background: var(--accent-lime);
    border-radius: 5px;
    height: 5px;
    border: none;
    box-shadow: 0 0 12px var(--accent-lime);
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-lime);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 var(--slider-glow-size) var(--accent-lime), 0 0 20px var(--accent-lime);
    border: none;
    margin-top: -5.5px;
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent-lime);
    cursor: pointer;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 var(--slider-glow-size) var(--accent-lime), 0 0 20px var(--accent-lime);
}

.volume-knob:active {
    cursor: grabbing;
}

.volume-knob::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 8px;
    background: var(--accent-lime);
    border-radius: 1px;
    box-shadow: 0 0 5px var(--accent-lime);
}

/* Aggressive Particle Changes */
.giant-particle-wrapper {
    position: absolute;
    will-change: transform;
    transition: opacity 1s linear;
}
.giant-particle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
}
.player-track-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    overflow: hidden;
}

#player-title {
    color: #eee;
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0; /* Prevent the title from shrinking */
}

#player-filename {
    color: #888;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* Volume Knob Ticks */
.volume-knob-container::before,
.volume-knob-container::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #444;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

/* Min volume tick (below-left of knob) */
.volume-knob-container::before {
    transform: translateX(-12px);
}

/* Max volume tick (below-right of knob) */
.volume-knob-container::after {
    transform: translateX(12px);
    background-color: var(--accent-lime);
    box-shadow: 0 0 5px var(--accent-lime);
}

/* ===== ARTIST DETAILS — AUDIO SNIPPET PLAYER ===== */
.artist-audio-section {
    margin-top: 40px;
}

.artist-audio-tracks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.artist-audio-track {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(20, 10, 40, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(138, 43, 226, 0.35);
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
}
.artist-audio-track:hover {
    border-color: rgba(138, 43, 226, 0.7);
    background: rgba(30, 15, 55, 0.6);
}

.artist-track-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.artist-track-play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(212, 255, 0, 0.8);
    background: transparent;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(212, 255, 0, 1);
    text-shadow: 0 0 8px rgba(212, 255, 0, 0.7);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.2s;
    flex-shrink: 0;
}
.artist-track-play:hover {
    transform: scale(1.1);
    border-color: rgba(212, 255, 0, 1);
}

.artist-track-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.artist-track-name {
    color: #eee;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.artist-track-time {
    color: #777;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
}

.artist-track-progress-wrap {
    flex: 1;
    min-width: 60px;
    cursor: pointer;
    padding: 6px 0;
}

.artist-track-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.artist-track-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-lime, #D4FF00);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(212, 255, 0, 0.5);
    transition: width 0.1s linear;
}

.artist-track-load-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(138, 43, 226, 0.5);
    background: rgba(138, 43, 226, 0.15);
    color: rgba(212, 255, 0, 0.85);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.artist-track-load-btn:hover {
    background: rgba(138, 43, 226, 0.35);
    border-color: rgba(138, 43, 226, 0.8);
    color: #D4FF00;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}

/* ===== ARTIST DETAILS — MEMBERS CHIPS ===== */
.artist-members-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding: 0 20px;
}
.artist-members-label {
    color: #666;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 4px;
    white-space: nowrap;
}
.artist-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.82rem;
    color: #ddd;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s;
}
.artist-member-chip:hover {
    border-color: var(--accent-lime);
    background: rgba(212, 255, 0, 0.04);
}
.artist-member-chip i.fas {
    color: var(--accent-lime);
    font-size: 0.72rem;
    opacity: 0.8;
}
.artist-member-chip strong {
    color: #fff;
    font-weight: 600;
}
.artist-member-role {
    color: #888;
    font-size: 0.75rem;
    padding-left: 6px;
    border-left: 1px solid rgba(255,255,255,0.1);
}

/* ===== ARTIST DETAILS — VIDEO PLAYER ===== */
/* === ARTIST GALLERY GRID === */
.artist-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 20px;
    max-height: 420px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease;
}
.artist-gallery-grid.expanded {
    max-height: none;
}
.artist-gallery-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.artist-gallery-img:hover {
    transform: scale(1.03);
    border-color: var(--accent-lime);
}
.artist-gallery-show-more {
    text-align: center;
    margin-top: 14px;
}
.artist-gallery-show-more button {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--accent-lime);
    padding: 8px 24px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: 0.3s ease;
}
.artist-gallery-show-more button:hover {
    background: rgba(212, 255, 0, 0.08);
    border-color: var(--accent-lime);
}

/* === ARTIST LIGHTBOX === */
.artist-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 20000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.artist-lightbox.active { display: flex; }

.artist-lb-stage {
    position: relative;
    width: 90%;
    max-width: 1100px;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    perspective: 1200px;
}
.artist-lb-stage img {
    position: absolute;
    max-width: 85%;
    max-height: 78%;
    object-fit: contain;
    border: 8px solid #f0ece4;
    border-bottom-width: 38px;
    border-radius: 2px;
    background: #f0ece4;
    box-shadow: 3px 4px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
    will-change: transform, opacity;
}
.artist-lb-stage img.alb-current {
    transform: rotate(var(--lb-rot, 0deg)) translateZ(0);
    opacity: 1;
    z-index: 10;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.artist-lb-stage img.alb-stack {
    opacity: 0.55;
    z-index: 5;
    transition: transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}
.artist-lb-stage img.alb-slam-enter {
    transform: rotate(calc(var(--lb-rot, 0deg) + 14deg)) scale(1.15) translateY(-120%) translateZ(100px);
    opacity: 0;
    z-index: 10;
    transition: none;
}
.artist-lb-stage img.alb-lift-exit {
    transform: rotate(calc(var(--lb-rot, 0deg) - 10deg)) scale(1.1) translateY(-130%) translateZ(80px);
    opacity: 0;
    z-index: 15;
    transition: transform 0.5s cubic-bezier(0.4, 0, 1, 1), opacity 0.45s ease;
}
.artist-lb-stage img.alb-reveal-enter {
    transform: rotate(var(--lb-rot, 0deg)) scale(0.97);
    opacity: 0.5;
    z-index: 5;
    transition: none;
}
.artist-lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 20002;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.artist-lb-arrow:hover {
    background: rgba(212, 255, 0, 0.12);
    border-color: var(--accent-lime);
    color: var(--accent-lime);
    transform: translateY(-50%) scale(1.1);
}
.artist-lb-arrow:active {
    transform: translateY(-50%) scale(0.95);
}
.artist-lb-arrow-left { left: 20px; }
.artist-lb-arrow-right { right: 20px; }
.artist-lightbox .close-alb {
    position: absolute;
    top: 20px;
    right: 30px;
    color: rgba(255,255,255,0.6);
    font-size: 2rem;
    cursor: pointer;
    z-index: 20003;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}
.artist-lightbox .close-alb:hover {
    color: #fff;
    background: rgba(255, 60, 60, 0.2);
    border-color: rgba(255, 60, 60, 0.4);
}
.artist-lb-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    z-index: 20002;
}
@media (max-width: 768px) {
    .artist-lb-arrow {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .artist-lb-arrow-left { left: 10px; }
    .artist-lb-arrow-right { right: 10px; }
    .artist-lb-stage { width: 96%; height: 70vh; }
    .artist-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        max-height: 340px;
    }
    .artist-gallery-img {
        height: 130px;
    }
}

.artist-video-section {
    margin-top: 40px;
}

.artist-video-player-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(138, 43, 226, 0.4);
    background: #000;
}

/* Video title/description overlay — sits in bottom-left corner over the player */
.artist-video-overlay {
    position: absolute;
    bottom: 50px; /* above the info-bar */
    left: 0;
    right: 0;
    padding: 10px 14px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s;
}
.artist-video-overlay-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artist-video-overlay-desc {
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-video-player {
    width: 100%;
    max-height: 500px;
    display: block;
    background: #000;
}

.artist-video-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px;
    background: rgba(20, 10, 40, 0.6);
    backdrop-filter: blur(10px);
}

.artist-video-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(212, 255, 0, 0.7);
    background: transparent;
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(212, 255, 0, 1);
    text-shadow: 0 0 8px rgba(212, 255, 0, 0.7);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.2s;
}
.artist-video-nav-btn:hover {
    transform: scale(1.1);
    border-color: rgba(212, 255, 0, 1);
}

.artist-video-counter {
    color: #aaa;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.artist-video-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(20, 10, 40, 0.9);
    border-top: 1px solid rgba(138, 43, 226, 0.3);
}

.artist-video-info-bar span:first-child {
    color: white;
    font-size: 0.88rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.artist-video-info-bar #artist-video-counter {
    color: #888;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-left: 10px;
    font-weight: 400;
    letter-spacing: 1px;
}

.artist-video-playlist {
    margin-top: 8px;
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(10, 5, 20, 0.5);
}

.artist-video-playlist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-left-color 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
}

.artist-video-playlist-item:last-child {
    border-bottom: none;
}

.artist-video-playlist-item:hover {
    background: rgba(138, 43, 226, 0.1);
    border-left-color: rgba(138, 43, 226, 0.4);
}

.artist-video-playlist-item.active {
    background: rgba(138, 43, 226, 0.18);
    border-left-color: var(--accent-purple);
}

.artist-video-playlist-play-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(138, 43, 226, 0.25);
    border: 1px solid rgba(138, 43, 226, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-purple);
    font-size: 0.65rem;
    transition: background 0.2s ease;
}

.artist-video-playlist-item.active .artist-video-playlist-play-btn {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: white;
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.5);
}

.artist-video-playlist-name {
    flex: 1;
    color: #aaa;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.artist-video-playlist-item.active .artist-video-playlist-name {
    color: white;
    font-weight: 500;
}

.artist-video-playlist-num {
    color: #444;
    font-size: 0.75rem;
    flex-shrink: 0;
    min-width: 18px;
    text-align: right;
}

/* ===== RESPONSIVE — AUDIO/VIDEO SECTIONS ===== */
@media (max-width: 600px) {
    .artist-audio-track {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
    }
    .artist-track-progress-wrap {
        order: 3;
        width: 100%;
        flex: unset;
    }
    .artist-track-name {
        max-width: 140px;
    }
    .artist-video-player {
        max-height: 300px;
    }
}

/* Google Maps Autocomplete Styling */
.pac-container {
    background-color: #111;
    border: 1px solid #333;
    color: #eee;
    font-family: 'Inter', sans-serif;
    z-index: 999999 !important;
}
.pac-item {
    border-top: 1px solid #222;
    color: #ccc;
    padding: 10px;
    cursor: pointer;
}
.pac-item:hover, .pac-item-selected {
    background-color: #222;
}
.pac-item-query {
    color: white;
    font-weight: bold;
}
.pac-matched {
    color: var(--accent-lime);
}

/* Neon Map Styling */
.neon-map-border {
    border: 2px solid var(--accent-lime) !important;
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.25);
    transition: all 0.3s ease;
}

.neon-map-border:hover {
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.5);
    border-color: #d4ff00 !important;
}

/* --- NEW HERO LAYOUT (Split) --- */
.hero-layout-new {
    display: flex;
    flex-direction: column;
    padding: 80px 0 0 0 !important; /* Only nav height padding at top, no side padding */
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0 !important;
    border: none;
    align-items: stretch; /* Override center alignment */
    text-align: left;
    width: 100%;
}

@media (min-width: 900px) {
    .hero-layout-new {
        flex-direction: row;
        align-items: stretch;
        height: 100vh; /* Fixed height viewport */
        overflow: visible;
        margin: 0 !important;
        padding: 80px 0 0 0 !important;
        width: 100%;
    }
}

/* Left Column */
.hero-left-col {
    flex: 1.3; /* Balanced width */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Match right column alignment */
    padding: 2rem 3rem 2rem 5%;
    position: relative;
    z-index: 2;
    background: radial-gradient(circle at top left, rgba(138, 43, 226, 0.15), transparent 50%);
}

.hero-text-content {
    margin-bottom: 0;
    margin-top: 0;
    max-width: 700px;
    text-align: left;
    margin-left: 0;
}

/* Ensure CTA buttons align left in the new layout */
.hero-layout-new .hero-cta {
    justify-content: flex-start;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hero-offers-area {
    margin-top: 2rem;
    margin-bottom: 40px; /* Push offers section up by adding bottom margin */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 15px;
    padding-bottom: 15px;
    max-width: 700px; /* Match hero text width */
}

/* Right Column */
.hero-right-col {
    flex: 1; /* Equal width */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push acts to top, events to bottom */
    padding: 0 2rem 0 1rem;
    margin: 0 !important;
    background: transparent;
    backdrop-filter: none;
    border: none;
    overflow-y: visible;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(138,43,226,0.5) transparent;
    position: relative;
    z-index: 2;
}

.hero-right-col::-webkit-scrollbar {
    width: 6px;
}
.hero-right-col::-webkit-scrollbar-track {
    background: transparent;
}
.hero-right-col::-webkit-scrollbar-thumb {
    background: rgba(138,43,226,0.5);
    border-radius: 3px;
}

/* Sections as separate containers */
.dashboard-section {
    width: 100%;
    background: linear-gradient(135deg, rgba(15, 10, 25, 0.85) 0%, rgba(30, 15, 45, 0.75) 100%);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* First section (acts) - push down */
.dashboard-section:first-child {
    margin-top: 40px;
}

/* Second section (events) - push up */
.dashboard-section:last-child {
    margin-bottom: 80px;
}

.dashboard-section:hover {
    border-color: rgba(138, 43, 226, 0.5);
    box-shadow: 0 6px 25px rgba(138, 43, 226, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Grid for larger cards */
.grid-3-col-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 1400px) {
    .grid-3-col-events { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .grid-3-col-events { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-3-col-events { grid-template-columns: 1fr; }
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--accent-purple);
    padding-left: 10px;
}

.section-header-row h3 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: white;
    letter-spacing: 1px;
    margin: 0;
}

.view-all-link {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.view-all-link:hover { color: white; text-decoration: underline; }

/* Grids */
.grid-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.grid-3-col-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 1400px) {
    .grid-3-col-events { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-2-col, .grid-3-col-events { grid-template-columns: 1fr; }
}


/* New Card Styles */
.hero-card {
    background: #0f0f0f;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.hero-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-lime);
    box-shadow: 0 8px 25px rgba(212, 255, 0, 0.25), 0 0 15px rgba(212, 255, 0, 0.15);
}

/* Lazy Loading Background Images */
.lazy-bg {
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    transition: opacity 0.4s ease-out, background-image 0.3s ease-out;
}

.lazy-bg.bg-loaded {
    opacity: 1;
}

/* Act Cards (Rectangular/Landscape) */
.act-card {
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 120px;
}

.act-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.4) 60%, transparent 100%);
    padding: 12px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.act-card-title {
    font-family: var(--font-head);
    font-size: 1.1rem;
    text-transform: uppercase;
    color: white;
    line-height: 1;
    margin-bottom: 5px;
}

.act-card-subtitle {
    font-size: 0.8rem;
    color: #ddd; 
    margin-bottom: 8px;
}

.act-card-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.act-tag {
    font-size: 0.65rem;
    background: rgba(138, 43, 226, 0.8); /* Purple */
    color: white;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Event Cards (Vertical / Poster Style) */
.event-card-vert {
    min-height: 0 !important;
    max-height: none;
    height: auto !important;
    display: flex;
    flex-direction: column;
    background: #141414;
}

.event-card-img {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0 !important;
    height: 140px !important;
    padding-top: 0 !important;
    background-size: cover;
    background-position: center;
    position: relative;
}

.event-card-body {
    flex: 0 0 auto !important;
    padding: 12px;
    display: flex;
    flex-direction: column;
    background: #141414;
    border-top: 1px solid #222;
}

.event-card-body .ticket-controls {
    margin-top: 8px;
}

.event-card-float-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent-lime);
    color: black;
    font-weight: 800;
    font-size: 0.65rem;
    padding: 4px 8px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    border-radius: 2px;
}

.event-card-title {
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.25;
    color: white;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card-meta {
    font-size: 0.75rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Offer Card */
.offer-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}
.offer-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-lime);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(212, 255, 0, 0.15);
}

.offer-title {
    color: var(--accent-lime);
    font-family: var(--font-head);
    font-size: 1rem;
    margin-bottom: 4px;
}
.offer-desc {
    font-size: 0.75rem;
    color: #bbb;
    line-height: 1.4;
}

/* --- MARQUEE FIX FOR NEW HERO --- */
.hero-layout-new {
    position: relative;
    overflow: visible; /* Ensure marquee doesn't cause scrollbar */
}

.hero-layout-new .marquee {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    transform: rotate(-1deg);
    z-index: 20;
    background: var(--accent-lime);
    color: black;
    padding: 12px 0;
    font-family: var(--font-head);
    font-weight: 900;
    letter-spacing: 2px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* Ensure older styles don't conflict too much by being specific */


/* --- MARQUEE & SCROLL FIXES --- */
/* Adjust marquee position */
.hero-layout-new .marquee {
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 10px 0;
    pointer-events: none;
}

/* Fix marquee text vertical alignment */
.hero-layout-new .marquee-track {
    display: flex;
    align-items: center;
}


/* --- COMPACT EVENT CARD STYLES --- */

/* Custom scrollbar for right col (subtle purple) */
.hero-right-col {
    scrollbar-width: thin;
    scrollbar-color: rgba(138,43,226,0.4) transparent;
}
.hero-right-col::-webkit-scrollbar {
    width: 5px;
}
.hero-right-col::-webkit-scrollbar-track {
    background: transparent;
}
.hero-right-col::-webkit-scrollbar-thumb {
    background: rgba(138,43,226,0.4);
    border-radius: 3px;
}

/* Compact Controls for Minified Card */
.ticket-btn.compact {
    padding: 0;
    height: 32px;
    font-size: 0.75rem;
}
.ticket-btn.compact .ticket-stub {
    padding: 0 10px;
    font-size: 0.7rem;
    min-width: 40px;
}
.ticket-btn.compact .ticket-main {
    padding: 0 10px;
}
.date-badge-small {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.8);
    color: white;
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    font-weight: bold;
}

/* Ensure grid matches 3 items */
.grid-3-col-events {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1400px) {
    .grid-3-col-events {
         grid-template-columns: repeat(3, 1fr); /* Force 3 columns if space allows, or use auto-fit */
         /* Actually on smaller screens 3 might be tight. Let's keep it 3 but scale down */
    }
}
@media (max-width: 1100px) {
    .grid-3-col-events { grid-template-columns: repeat(2, 1fr); }
    .hero-card:nth-child(3) { display: none; } /* Hide 3rd on tablet if needed */
}
@media (max-width: 600px) {
    .grid-3-col-events { grid-template-columns: 1fr; }
    .hero-card:nth-child(3) { display: block; }
}


/* --- Updated Featured Event Card Styles --- */
.event-card-img {
    height: 140px !important;
    padding-top: 0 !important;
    background-size: cover;
    background-position: center center;
    flex: none;
}

.event-card-vert {
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
}

.event-card-body {
    text-align: left !important;
    align-items: flex-start !important;
    padding: 15px;
    flex: 0 0 auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Lineup Tags */
.lineup-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.lineup-tag-small {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: #ccc;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Swipe hint animation - defined at root level */
@keyframes swipeHintMobile {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(5px); opacity: 1; }
}

/* Desktop: ensure no swipe indicator shows */
.section-header-row::after {
    content: none;
    display: none;
}

/* --- MOBILE HOMEPAGE OPTIMIZATIONS --- */
@media (max-width: 900px) {
    /* Hero Section Fixes */
    .hero-layout-new {
        padding-top: 80px !important;
        height: auto !important; /* Allow growing tall */
        min-height: 100vh;
        overflow-y: visible !important;
        display: flex !important;
        flex-direction: column !important;
        background: radial-gradient(circle at center top, rgba(138, 43, 226, 0.18) 0%, transparent 50%) !important;
    }

    .hero-left-col {
        padding: 0 20px 10px 20px !important; /* Reduced bottom padding */
        flex: none;
        width: 100%;
        box-sizing: border-box;
        background: none !important; /* Remove left-col purple on mobile, use parent */
    }

    .hero-right-col {
        padding: 10px 0 20px 0 !important; /* No side padding - cards go edge to edge */
        flex: none;
        height: auto !important;
        overflow-y: visible !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Hero Text Sizing */
    .hero-main-text {
        font-size: 2rem !important; /* Smaller H1 */
        word-wrap: break-word;
        text-align: center;
    }
    
    .hero-eyebrow {
        display: none !important;
    }

    .hero-logo-col {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0 !important;
        margin-bottom: -10px;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        text-align: center;
        white-space: normal;
    }
    
    .hero-description {
        text-align: center;
        margin: 0 auto 30px auto;
    }
    
    .hero-cta {
        justify-content: center !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .hero-cta .hero-nav-pill {
        flex: 0 0 auto;
        padding: 6px 12px !important;
        font-size: 0.55rem !important;
        letter-spacing: 1px !important;
    }

    /* Spinning Logo - Relative on mobile */
    #hero-center-logo {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 55vw !important;
        height: 55vw !important;
        max-width: 320px !important;
        max-height: 320px !important;
        margin: 0 auto 10px auto !important;
        display: block;
        opacity: 0.8;
    }

    #spinning-logo-img {
        width: 100% !important;
        height: 100% !important;
    }

    /* Offers Section - Horizontal Scroll for Mobile */
    .hero-offers-area {
        display: flex !important;
        overflow-x: auto;
        padding-bottom: 10px; /* Reduced space */
        gap: 15px;
        scroll-snap-type: x mandatory;
        margin-right: -20px; /* Bleed to edge */
        padding-right: 20px; /* Pad end */
    }

    .membership-perk-card {
        min-width: 260px; /* Fixed card width for scroll */
        scroll-snap-align: start;
    }
    
    /* Marquee placement adjustment */
    .hero-layout-new .marquee {
        position: relative !important;
        width: 100% !important;
        transform: none !important;
        margin-top: 0;
    }
    
    /* Featured Acts/Events Cards - Switch to horizontal scroll */
    .grid-3-col-events {
        display: flex !important;
        overflow-x: auto;
        gap: 15px;
        scroll-snap-type: x mandatory;
        padding-bottom: 15px;
        margin-left: -15px !important; /* Pull past dashboard padding to screen edge */
        margin-right: -15px !important;
        padding-left: 15px; /* First card slight padding from edge */
        padding-right: 15px; /* Padding at end */
    }
    
    .grid-3-col-events .hero-card {
        min-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    
    /* Section headers on mobile - with swipe indicator */
    .section-header-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        position: relative;
    }
    
    .section-header-row h3 {
        font-size: 0.9rem;
    }
    
    /* Swipe indicator arrow - mobile only */
    .section-header-row::after {
        content: '→ swipe' !important;
        font-size: 0.65rem;
        color: rgba(212, 255, 0, 0.7);
        text-transform: uppercase;
        letter-spacing: 1px;
        animation: swipeHintMobile 1.5s ease-in-out infinite;
        margin-left: auto;
        display: inline-block !important;
        flex-shrink: 0;
        padding-right: 5px;
    }
    
    /* Hide view all link on mobile since we have swipe indicator */
    .section-header-row .view-all-link {
        display: none;
    }
    
    /* Dashboard sections - edge to edge */
    .dashboard-section {
        padding: 15px !important;
        margin-bottom: 15px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        overflow: visible !important;
    }
    
    .dashboard-section:first-child {
        margin-top: 0 !important;
    }
    
    /* Hero cards sizing */
    .hero-card.event-card-vert {
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .hero-card.event-card-vert .event-card-img {
        flex: 0 0 auto;
        min-height: 120px;
        padding-top: 45%;
    }

    .hero-card.event-card-vert .event-card-body {
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
    }
    
    .hero-card.act-card {
        min-height: 200px;
    }
    
    /* Event card body text */
    .event-card-body {
        padding: 12px !important;
    }
    
    .event-card-title {
        font-size: 1rem !important;
    }
    
    /* Ticket button compact */
    .ticket-btn.compact {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
    
    /* Hide scrollbar but allow scroll */
    .grid-3-col-events::-webkit-scrollbar,
    .hero-offers-area::-webkit-scrollbar {
        display: none;
    }
    
    .grid-3-col-events,
    .hero-offers-area {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* --- ADDITIONAL MOBILE STYLES (< 750px) --- */
@media (max-width: 750px) {
    /* Smaller text on very small screens */
    .hero-main-text {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .hero-eyebrow {
        font-size: 0.75rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }
    
    /* Spinning logo — match 900px breakpoint */
    #hero-center-logo {
        width: 55vw !important;
        height: 55vw !important;
        max-width: 320px !important;
        max-height: 320px !important;
    }
    
    /* Cards slightly narrower */
    .grid-3-col-events .hero-card {
        min-width: 250px;
    }
    
    .membership-perk-card {
        min-width: 230px;
    }
    
    /* Nav adjustments */
    nav {
        padding: 10px 15px;
    }
    
    nav .logo {
        font-size: 1rem;
        letter-spacing: 1.5px;
    }
    
    /* CTA buttons */
    .btn {
        padding: 12px 20px;
        font-size: 0.85rem;
    }
    
    /* Section titles */
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    /* Features grid — mobile: full-width slider with arrows */
    .features-grid {
        display: block !important;
    }

    .features-slider {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .features-slider::-webkit-scrollbar {
        display: none;
    }

    .features-slider {
        padding: 0 16px;
    }

    .features-slider .feature-card {
        flex: 0 0 calc(100% - 32px);
        max-width: calc(100% - 32px);
        scroll-snap-align: center;
        padding: 25px 20px;
        box-sizing: border-box;
        margin: 0 4px;
    }

    .features-slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 16px;
    }

    .features-slider-arrow {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #fff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
    }

    .features-slider-arrow:hover {
        background: rgba(212, 255, 0, 0.1);
        border-color: var(--accent-lime);
    }

    .features-slider-dots {
        display: flex;
        gap: 6px;
    }

    .features-slider-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transition: background 0.3s, transform 0.3s;
        cursor: pointer;
    }

    .features-slider-dot.active {
        background: var(--accent-lime);
        transform: scale(1.3);
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-links-group {
        flex-direction: column;
        gap: 20px;
    }
    
    /* === CRITICAL MOBILE FIXES === */
    
    /* Container padding - ONLY override horizontal padding */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Artist Directory Grid - 2x2 on mobile */
    .directory-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* Artist Card Adjustments for 2x2 */
    .artist-card {
        padding: 8px !important;
    }

    .artist-img-overlay {
        width: 50px !important;
        height: 50px !important;
        bottom: -25px !important;
    }

    .artist-info {
        padding-top: 30px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 6px !important;
    }

    .artist-name {
        font-size: 0.85rem !important;
    }

    .artist-role {
        font-size: 0.6rem !important;
    }

    .artist-card .tag-pill {
        font-size: 0.55rem !important;
        padding: 1px 5px !important;
    }

    .artist-social-icons {
        gap: 5px !important;
        padding-top: 5px !important;
    }

    .artist-card .social-icon-link {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.6rem !important;
    }

    /* Membership Specific Fixes */
    #membership-offers-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 15px !important;
        padding: 5px 15px 20px 15px !important;
        margin: 0 -15px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #membership-offers-grid::-webkit-scrollbar {
        display: none;
    }
    #membership-offers-grid .offer-card {
        flex: 0 0 280px !important;
        scroll-snap-align: start;
        padding: 15px !important;
    }
    #membership-offers-grid .offer-card h3 {
        font-size: 1.1rem !important;
    }
    #membership-offers-grid .offer-card p {
        font-size: 0.85rem !important;
    }
    
    .tribe-status-widget {
        min-width: 100% !important;
        width: 100% !important;
        padding: 25px 20px 15px 20px !important;
        box-sizing: border-box !important;
    }
    
    .tribe-status-role {
        font-size: 1.8rem !important;
        letter-spacing: 1px !important;
    }
    
    .discount-hint-text {
        font-size: 0.7rem !important;
    }
    
    /* Filter bar - horizontal scroll */
    .filter-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 8px;
        padding: 15px 5px !important; /* Extra padding for better touch area */
        -ms-overflow-style: none;
        scrollbar-width: none;
        justify-content: flex-start !important; /* Align left for scroll starting point */
    }
    
    .filter-bar::-webkit-scrollbar {
        display: none;
    }
    
    .filter-btn {
        flex-shrink: 0;
        font-size: 0.7rem !important;
        padding: 8px 12px !important;
        white-space: nowrap;
    }
    
    /* Events grid */
    .events-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    /* Event cards */
    .event-card {
        max-width: 100% !important;
    }
    
    .event-card h3 {
        font-size: 1.2rem !important;
    }
    
    .event-card p {
        font-size: 0.85rem !important;
    }
    
    /* Section titles */
    .section-title {
        font-size: 1.6rem !important;
    }
    
    .section-subtitle {
        font-size: 0.85rem !important;
    }
    
    /* MP3 Player Widget — mobile stacked layout */
    #mp3-player-widget {
        padding: 0 !important;
        font-size: 0.8rem !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
        height: auto !important;
        position: fixed !important;
        bottom: 0 !important;
        width: 100% !important;
        left: 0 !important;
        z-index: 99999 !important;
        gap: 0 !important;
        border-top: 1px solid rgba(138, 43, 226, 0.5) !important;
        border-bottom: none !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.5), 0 -1px 10px rgba(138,43,226,0.15) !important;
    }
    
    /* Row 1: Progress/slider bar — full width at top */
    .progress-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 4px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        order: 1 !important;
        flex: 0 0 100% !important;
        z-index: 2 !important;
        background: rgba(255,255,255,0.08) !important;
    }
    
    .progress-bar {
        height: 100% !important;
    }
    
    /* Row 2: Art + track info — full width row */
    #mp3-player-widget img {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        margin-left: 12px !important;
        margin-top: 10px !important;
        border-radius: 4px !important;
        order: 2 !important;
        flex-shrink: 0 !important;
        box-shadow: 0 0 6px rgba(0,0,0,0.4) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
    }
    
    .player-info {
        order: 3 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 10px 12px 2px 10px !important;
        gap: 1px !important;
    }
    
    .player-track-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
    }

    #player-title {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #player-filename {
        font-size: 0.55rem !important;
        opacity: 0.4;
        line-height: 1.2 !important;
    }
    
    .time-container {
        display: none !important;
    }
    
    /* Row 3: Controls — centered, full width row */
    .player-controls {
        order: 4 !important;
        flex: 0 0 100% !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 4px 0 8px !important;
        gap: 24px !important;
    }
    
    .player-controls button {
        font-size: 1.2rem !important;
        padding: 4px !important;
    }
    
    #play-pause-btn {
        font-size: 1.8rem !important;
    }
    
    /* Hide volume on mobile */
    .volume-knob-container {
        display: none !important;
    }
    
    .volume-slider {
        display: none !important;
    }
    
    /* Ticket buttons - no mobile overrides, keep exact desktop look */
    
    /* Price cards */
    .price-card {
        padding: 20px !important;
    }
    
    .price-amount {
        font-size: 2rem !important;
    }
    
    /* Community section */
    #musicians .container > div {
        padding: 25px !important;
    }
    
    /* Contribute promo */
    #contribute-promo .container {
        flex-direction: column;
        text-align: center;
    }
    
    #contribute-promo h2 {
        font-size: 1.5rem !important;
    }
}

/* === EXTRA SMALL DEVICES (< 400px) === */
@media (max-width: 400px) {
    /* Even smaller text */
    .hero-main-text {
        font-size: 1.6rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .section-title {
        font-size: 1.4rem !important;
    }
    
    /* Nav */
    nav .logo {
        font-size: 0.75rem !important;
        letter-spacing: 0.5px;
    }
    
    nav > div:last-child {
        gap: 6px !important;
    }
    
    .cta-nav {
        padding: 5px 10px !important;
        font-size: 0.6rem !important;
    }
    
    /* Cards even narrower */
    .grid-3-col-events .hero-card {
        min-width: 220px;
    }
    
    .membership-perk-card {
        min-width: 200px;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 16px !important;
        font-size: 0.8rem !important;
    }
    
    .cta-nav {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    
    /* Event cards */
    .event-card-title {
        font-size: 0.9rem !important;
    }
    
    .filter-btn {
        font-size: 0.65rem !important;
        padding: 6px 10px !important;
    }
}

/* === ULTRA SMALL DEVICES (≤ 325px) === */
@media (max-width: 325px) {
    /* Tighter container padding */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Section vertical padding — reduce excess whitespace */
    section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* Nav — compact further */
    nav {
        padding: 8px 10px !important;
        height: 60px !important;
    }

    nav .logo {
        font-size: 0.65rem !important;
        letter-spacing: 0;
    }

    nav > div:last-child {
        gap: 4px !important;
    }

    .cta-nav {
        padding: 4px 8px !important;
        font-size: 0.55rem !important;
    }

    .menu-toggle {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
    }

    /* Hero text */
    .hero-main-text {
        font-size: 1.3rem !important;
    }

    .hero-subtitle {
        font-size: 0.85rem !important;
    }

    .hero-description {
        font-size: 0.8rem !important;
    }

    .section-title {
        font-size: 1.2rem !important;
    }

    .section-subtitle {
        font-size: 0.8rem !important;
    }

    /* Cards — collapse all grids to single column */
    .news-grid,
    .events-grid,
    .directory-grid,
    .pricing-grid,
    .pricing-grid-new,
    .pricing-grid-secondary,
    .dashboard-grid,
    .admin-dashboard-container {
        grid-template-columns: 1fr !important;
    }

    /* News — show only 3 cards on mobile */
    .news-grid .news-card:nth-child(n+4) {
        display: none;
    }

    .news-view-all {
        display: block !important;
    }

    /* News card content padding */
    .news-card .card-content {
        padding: 15px !important;
    }

    .news-card .card-title {
        font-size: 1.1rem !important;
    }

    .news-card .card-snippet {
        font-size: 0.8rem !important;
    }

    /* Buttons — prevent overflow */
    .btn {
        padding: 8px 14px !important;
        font-size: 0.75rem !important;
        word-break: break-word;
    }

    /* Footer */
    .footer-top {
        gap: 30px !important;
    }

    .footer-brand {
        min-width: 100% !important;
    }

    /* Horizontal scroll strips — tighter */
    .grid-3-col-events .hero-card {
        min-width: 200px !important;
    }

    .membership-perk-card {
        min-width: 180px !important;
    }

    /* Featured strip cards */
    .featured-strip-block {
        padding: 0 10px !important;
    }

    /* About grid */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Stat box */
    .stat-box {
        gap: 15px !important;
    }

    .stat-item h3 {
        font-size: 1.8rem !important;
    }

    /* Prevent any element from exceeding viewport */
    img, video, iframe, table, pre, code {
        max-width: 100% !important;
        overflow-wrap: break-word;
    }
}

/* === MOBILE NAV FIX - PREVENT HORIZONTAL OVERFLOW === */
@media (max-width: 900px) {
    nav {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 8px;
    }

    /* Tighten right-side nav controls */
    nav > div:last-child {
        gap: 8px !important;
        flex-shrink: 0;
    }
    
    /* Ensure logo doesn't push controls off-screen */
    nav > a:first-child {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    /* Prevent body overflow */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Carousel Event Cards - Mobile sizing */
    .carousel-track .event-card {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 520px !important;
        min-height: 520px !important;
        max-height: 520px !important;
        margin: 0 10px !important;
    }
    
    .carousel-track .event-card .card-image {
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
    }
    
    .carousel-track .event-card .card-content {
        padding: 12px 16px 16px 16px !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .carousel-track .event-card .card-tag {
        margin-bottom: 8px !important;
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
    }

    .carousel-track .event-card .card-title-group {
        margin-bottom: 10px !important;
    }

    .carousel-track .event-card .card-venue {
        margin-bottom: 6px !important;
        font-size: 0.8rem !important;
        display: flex !important;
        align-items: center !important;
    }

    .carousel-track .event-card .card-price {
        margin-bottom: 10px !important;
        font-size: 0.9rem !important;
        color: var(--accent-lime) !important;
    }

    .carousel-track .event-card .card-lineup {
        margin-bottom: 10px !important;
        transform: none !important;
        gap: 4px !important;
    }

    .carousel-track .event-card .card-lineup span {
         font-size: 0.65rem !important;
         padding: 3px 8px !important;
    }
    
    .carousel-track .event-card h3 {
        font-size: 1.3rem !important;
        min-height: auto !important;
        margin-bottom: 4px !important;
    }
    
    .carousel-track .event-card p {
        font-size: 0.75rem !important;
    }

    .carousel-track .event-card .qty-selector {
        height: 28px !important;
        margin-bottom: 4px !important;
    }

    .carousel-track .event-card .qty-btn {
        width: 28px !important;
        height: 28px !important;
    }

    .carousel-track .event-card .qty-input {
        height: 28px !important;
        font-size: 0.9rem !important;
    }

    .carousel-track .event-card .ticket-btn {
        padding: 0 !important;
        font-size: 0.9rem !important;
        height: 42px !important;
    }

    .carousel-track .event-card .ticket-stub {
        padding: 0 12px !important;
        font-size: 1rem !important;
    }

    .carousel-track .event-card .ticket-main {
        padding: 0 16px !important; 
        font-size: 0.8rem !important;
    }
    
    .carousel-track .event-card .card-description {
        display: none !important;
    }
    
    .carousel-track .event-card .ticket-controls,
    .carousel-track .event-card .ripped-ticket-container {
        margin-top: auto !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 600px) {
    /* Even smaller carousel cards on phones */
    /* Mobile Height Adjustment */
    .carousel-track .event-card {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        height: 480px !important;
        min-height: 480px !important;
        max-height: 480px !important;
        margin: 0 8px !important;
    }
    
    .carousel-track .event-card .card-image {
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
    }
    
    .carousel-track .event-card .card-content {
        padding: 10px 14px 14px 14px !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .carousel-track .event-card .card-tag {
        margin-bottom: 6px !important;
        font-size: 0.65rem !important;
    }

    .carousel-track .event-card .card-title-group {
        margin-bottom: 8px !important;
    }

    .carousel-track .event-card .card-venue {
        margin-bottom: 5px !important;
        font-size: 0.75rem !important;
    }

    .carousel-track .event-card .card-price {
        margin-bottom: 8px !important;
        font-size: 0.8rem !important;
    }

    .carousel-track .event-card .card-lineup {
        margin-bottom: 10px !important;
        transform: none !important;
        gap: 3px !important;
    }

    .carousel-track .event-card .card-lineup span {
         font-size: 0.6rem !important;
         padding: 2px 6px !important;
    }
    
    .carousel-track .event-card h3 {
        font-size: 1.2rem !important;
        min-height: auto !important;
        margin-bottom: 2px !important;
    }
    
    .carousel-track .event-card p {
        font-size: 0.65rem !important;
    }

    .carousel-track .event-card .qty-selector {
        height: 24px !important;
        margin-bottom: 2px !important;
    }

    .carousel-track .event-card .qty-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
    }

    .carousel-track .event-card .qty-input {
        height: 24px !important;
        width: 32px !important;
        font-size: 0.8rem !important;
    }
    
    .carousel-track .event-card .ticket-btn {
        padding: 0 !important;
        font-size: 0.8rem !important;
        height: 36px !important;
    }

    .carousel-track .event-card .ticket-stub {
        padding: 0 10px !important;
        font-size: 0.9rem !important;
    }

    .carousel-track .event-card .ticket-main {
        padding: 0 12px !important; 
        font-size: 0.75rem !important;
    }
    
    .carousel-track .event-card .card-description {
        display: none !important;
    }
    
    .carousel-track .event-card .ticket-controls,
    .carousel-track .event-card .ripped-ticket-container {
        margin-top: auto !important;
        flex-shrink: 0 !important;
    }
}


/* =========================================
   MOBILE NAVIGATION FIXES
   ========================================= */
/* NOTE: Mobile nav dropdown is handled by utils.js injected styles at @media (max-width: 1550px).
   Only supplemental styles live here to avoid conflicts. */
@media (max-width: 900px) {
    /* Show Hamburger Menu Button (also handled by utils.js at 1550px) */
    .menu-toggle {
        display: block !important;
        z-index: 10002;
        background: transparent;
        border: none;
        color: white;
        padding: 5px;
    }
}

/* Legacy mobile musicians styles removed - handled by .community-split-section */

/* 6. Styles for Javascript Injected Items (Mobile Menu Footer) */
.mobile-nav-section {
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #222;
    display: flex;
    flex-direction: column;
}

.mobile-nav-item {
    width: 100%;
    padding: 16px 0;
    font-size: 1.1rem;
    color: #ccc;
    cursor: pointer;
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.mobile-nav-item:hover {
    color: var(--accent-lime);
    padding-left: 10px;
}

.mobile-nav-item span {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.mobile-nav-item.logout {
    color: #ff6b6b;
    margin-top: 20px;
    border-bottom: none;
}

/* Scroll Down Arrow for Event Banner */
.scroll-down-arrow {
    position: absolute;
    bottom: 180px;
    right: 40px;
    z-index: 20;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-down-arrow:hover {
    opacity: 1;
    transform: scale(1.1);
}

.scroll-down-arrow svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
    animation: arrowBounce 2s infinite;
}

@media (max-width: 768px) {
    .scroll-down-arrow {
        bottom: 120px;
        right: 20px;
    }
    .scroll-down-arrow svg {
        width: 28px;
        height: 28px;
    }
}

/* Echo Effect - Ghost Arrow */
.scroll-down-arrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4FF00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 13l5 5 5-5M7 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    opacity: 0;
    animation: arrowEcho 2s infinite;
}

@keyframes arrowBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes arrowEcho {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    100% { transform: translateY(15px) scale(1.5); opacity: 0; }
}
/* =========================================
   7. REVAMPED MOBILE NAVIGATION (2025 Refactor)
   ========================================= */
@media (max-width: 1550px) {
    /* Navbar Adjustment */
    nav {
        padding: 12px 20px;
        height: 70px;
        background: rgba(5, 5, 5, 0.95);
        justify-content: space-between;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        overflow: visible !important; /* Ensure drawer is not clipped */
    }

    /* Menu Toggle Button */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        font-size: 1.4rem;
        cursor: pointer;
        z-index: 10002;
        transition: all 0.3s ease;
    }

    .menu-toggle:hover,
    body.mobile-menu-open .menu-toggle {
        background: rgba(212, 255, 0, 0.1);
        border-color: var(--accent-lime);
        color: var(--accent-lime);
        box-shadow: 0 0 15px rgba(212, 255, 0, 0.2);
    }

    /* Drawer Container (formerly .nav-links) */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden off-screen */
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: linear-gradient(180deg, rgba(15, 15, 15, 0.98) 0%, rgba(5, 5, 5, 0.98) 100%);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        display: flex !important; /* Force flex since JS might have hidden it */
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 40px 24px 140px; /* Reduced top padding further */
        z-index: 10001;
        transition: right 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.9);
        gap: 0;
        overflow-y: auto;
    }

    /* Active State for Drawer */
    .nav-links.mobile-active {
        right: 0;
    }

    /* Individual Links */
    .nav-links a {
        font-family: var(--font-head);
        font-size: 1.35rem !important; /* Smaller size */
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #666 !important;
        padding: 14px 0 !important; /* Reduced padding */
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        width: 100%;
        text-align: left;
        transition: all 0.3s ease;
        background: transparent !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 0 !important;
    }

    /* Arrow icon for links */
    .nav-links a::after {
        content: '→';
        font-family: var(--font-body);
        font-size: 1.4rem;
        opacity: 0;
        transform: translateX(-15px);
        transition: all 0.3s ease;
        color: var(--accent-lime);
        width: auto !important; /* Override desktop underline */
        height: auto !important;
        position: static !important;
        background: none !important;
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: white !important;
        padding-left: 12px !important;
        background: none !important;
    }

    .nav-links a:hover::after,
    .nav-links a.active::after {
        opacity: 1;
        transform: translateX(0);
        width: auto !important;
    }

    /* Mobile Injected Section (Profile, Wallet, etc) */
    .mobile-nav-section {
        margin-top: 25px; /* Reduced */
        padding-top: 15px; /* Reduced */
        border-top: 2px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        gap: 8px; /* Reduced */
    }

    .mobile-nav-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 14px; /* Reduced */
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: #ccc;
        font-size: 0.95rem; /* Slightly smaller */
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-nav-item:hover {
        background: rgba(212, 255, 0, 0.15);
        border-color: rgba(212, 255, 0, 0.4);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    .mobile-nav-item span {
        font-size: 1.3rem;
    }

    .mobile-nav-item.logout {
        margin-top: 10px;
        border-color: rgba(255, 70, 70, 0.15);
        color: #ff8888;
    }
    
    .mobile-nav-item.logout:hover {
        background: rgba(255, 70, 70, 0.15);
        border-color: #ff4444;
        color: white;
    }

    /* Hide desktop admin controls + nav buttons on mobile (accessible via profile menu & hamburger) */
    #admin-nav-controls,
    #loginBtn,
    #organizerPortalBtn {
        display: none !important;
    }
    
    /* Ensure profile button IS visible on mobile (user requested) */
    /* Handled by .profile-btn styles in utils.js/base css, just don't hide it here */
}

/* =========================================
   8. EVENT DETAIL MODE OVERRIDES
   ========================================= */
body.event-mode #hero,
body.event-mode .marquee,
body.event-mode .hero-feature-strip,
body.event-mode #featured-strip,
body.event-mode .showcase-container,
body.event-mode #features,
body.event-mode #member-offers {
    display: none !important;
}
/* Universal sidebars remain visible in event-mode — old sidebar suppression removed */

/* Artist detail mode - keep sections hidden like event-mode */
body.artist-mode #hero, 
body.artist-mode .marquee, 
body.artist-mode .hero-feature-strip, 
body.artist-mode #featured-strip,
body.artist-mode .showcase-container,
body.artist-mode #features,
body.artist-mode #member-offers,
body.artist-mode #musicians,
body.artist-mode #events,
body.artist-mode #contribute-promo,
body.artist-mode #news,
body.artist-mode #about,
body.artist-mode #contact {
    display: none !important;
}

/* Directory mode - keep sections hidden when viewing archives */
body.directory-mode #hero, 
body.directory-mode .marquee, 
body.directory-mode .hero-feature-strip, 
body.directory-mode #featured-strip,
body.directory-mode .showcase-container,
body.directory-mode #features,
body.directory-mode #member-offers,
body.directory-mode #musicians,
body.directory-mode #events,
body.directory-mode #contribute-promo,
body.directory-mode #news,
body.directory-mode #about,
body.directory-mode #contact {
    display: none !important;
}
/*

---

CURATOR

PORTAL

RESPONSIVE

---

*/


/* --- CURATOR PORTAL RESPONSIVE --- */

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 35px;
}

.dashboard-row-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 35px;
}

.dashboard-revenue-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.dashboard-breakdown-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.dashboard-recent-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}

.dashboard-quick-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.portal-modal-container {
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

/* Mobile Adjustments */
@media (max-width: 900px) {
    #organizer-portal-content {
        padding: 15px !important;
    }

    .dashboard-row-2-col,
    .dashboard-revenue-stats,
    .dashboard-breakdown-stats,
    .dashboard-recent-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .dashboard-quick-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    
    .dashboard-quick-actions .btn {
        width: 100%;
        justify-content: center;
        margin-left: 0 !important; /* Reset margin-left: auto */
    }

    .organizer-header {
        padding: 10px 15px !important;
    }

    .organizer-header .btn {
        padding: 6px 12px !important;
        font-size: 0.8rem;
    }

    /* Fix modal specifics */
    .portal-modal-container {
        width: 95%;
        max-height: 85vh;
    }
}


.portal-form-container {
    background: #111;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #333;
}

@media (max-width: 900px) {
    .portal-form-container {
        padding: 15px !important;
    }
}


/* --- MOBILE OPTIMIZATIONS FOR CURATOR PORTAL --- */

/* 1. Portal Padding for MP3 Player */
#organizer-portal-content {
    padding-bottom: 200px !important; /* Extra bottom space for Fixed MP3 Player + UI margin */
}

/* 2. Smaller Fonts for Portal Forms on Mobile */
@media (max-width: 900px) {
    .portal-form-container label,
    .portal-form-container .form-group label {
        font-size: 0.75rem !important; /* Smaller label */
        margin-bottom: 4px;
    }
    
    .portal-form-container p,
    .portal-form-container span:not([class*='icon']) {
        font-size: 0.8rem;
    }

    .portal-form-container input.search-input, 
    .portal-form-container select.search-input, 
    .portal-form-container textarea.search-input {
        font-size: 0.9rem !important; /* Readable but smaller input text */
        padding: 8px 10px !important;
        height: auto;
    }

    .portal-form-container h2 {
        font-size: 1.5rem !important; /* Smaller Titles */
    }
    
    .portal-form-container h5 {
        font-size: 0.9rem !important;
    }

    /* 3. Event Card Optimization in Portal on Mobile */
    .portal-form-container .event-card {
        flex-direction: column; 
        height: auto !important;
    }
    
    .portal-form-container .event-card .card-image {
        min-height: 120px; /* Reduced image height */
    }

    .portal-form-container .event-card .card-content {
        padding: 12px;
    }

    .portal-form-container .event-card .card-title {
        font-size: 1rem;
    }

    .portal-form-container .event-card .card-venue {
        font-size: 0.8rem;
    }
    
    .portal-form-container .event-card .btn-sm {
        padding: 6px 10px;
        font-size: 0.75rem !important;
    }
}


/* --- NEON PULSE TEXT --- */
@keyframes neonPulseText {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 255, 0, 0.5), 0 0 20px rgba(212, 255, 0, 0.3);
        opacity: 1;
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 255, 0, 0.8), 0 0 30px rgba(212, 255, 0, 0.5), 0 0 40px rgba(212, 255, 0, 0.3);
        opacity: 0.9;
    }
}

.neon-pulse-text {
    color: var(--accent-lime) !important;
    animation: neonPulseText 2s infinite alternate ease-in-out;
}



/* --- ECHO PULSE TEXT --- */

.pulse-echo-text {

    position: relative;

    display: inline-block;

    color: white;

    z-index: 1;

}



.pulse-echo-text::before,

.pulse-echo-text::after {

    content: attr(data-text);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0.8;

    z-index: -1;

    color: inherit;

}



.pulse-echo-text::before {

    animation: pulseEcho 3s infinite ease-out;

}



.pulse-echo-text::after {

    animation: pulseEcho 3s 1.5s infinite ease-out;

}



@keyframes pulseEcho {

    0% {

        transform: scale(1);

        opacity: 0.8;

        filter: blur(0px);

    }

    100% {

        transform: scale(2);

        opacity: 0;

        filter: blur(4px);

    }

}



/* Update grid to support 4 items or 2x2. auto-fit with minmax 250px usually works, 

but if 300px minmax is preventing 4 in a row on large screens, we can lower it to 220px 

or force 4 columns on large screens. */

@media (min-width: 1200px) {

    .pricing-grid-new-4cols {

        grid-template-columns: repeat(4, 1fr) !important;

    }

}

/* For Member Perks Preview Styling */

.member-perks-preview-wrapper {

    background: #0f0f0f;

    border: 1px solid #222;

    border-radius: 12px;

    padding: 20px;

    margin-top: 20px;

}

.perks-cta-container {

    margin-top: 50px;

    text-align: center;

    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));

    padding: 30px;

}



/* Pulsing GIF styling */

.pulsing-logo-gif {

    height: 120px; /* Adjust size as needed, maybe larger based on screenshot */

    width: auto;

    filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.4));

    animation: logoGlowPulse 3s infinite alternate;

}



@keyframes logoGlowPulse {

    0% { filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.3)); transform: scale(0.98); }

    100% { filter: drop-shadow(0 0 25px rgba(212, 255, 0, 0.5)); transform: scale(1.02); }

}



/* --- HERO FIXES --- */

.about-hero-content {

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    gap: 40px;

}



.about-hero-text {

    flex: 1;

    text-align: center;

    z-index: 2;

}



.about-hero-logo {

    flex: 0 0 200px; /* Fixed width for logo area */

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 2;

}



/* Desktop: Show logo centered */

@media (min-width: 992px) {

    .about-hero-logo {

        display: block;

    }

    .about-hero-text {

        text-align: center;

    }

}



/* --- ROLES GRID FIXES --- */

/* Mobile: 1 column (default) */

/* Tablet: 2 columns (2x2 layout for 4 items) */

@media (min-width: 700px) and (max-width: 1199px) {

    .pricing-grid-new-4cols {

        grid-template-columns: repeat(2, 1fr) !important;

    }

}

/* Desktop: 4 columns */

@media (min-width: 1200px) {

    .pricing-grid-new-4cols {

        grid-template-columns: repeat(4, 1fr) !important;

    }

}



/* --- MEMBER PERKS SCROLLBAR --- */

.member-perks-preview-wrapper::-webkit-scrollbar {

    height: 8px;

}

.member-perks-preview-wrapper::-webkit-scrollbar-track {

    background: #222;

    border-radius: 4px;

}

.member-perks-preview-wrapper::-webkit-scrollbar-thumb {

    background: var(--accent-purple);

    border-radius: 4px;

}

.member-perks-preview-wrapper::-webkit-scrollbar-thumb:hover {

    background: var(--accent-lime);

}



/* --- MEMBER PERKS CARD STYLING (Override injected JS styles if needed) --- */

.perk-card-mini {

    flex: 0 0 300px; /* Fixed width for scrolling */

    background: #1a1a1a;

    border: 1px solid #333;

    border-radius: 8px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    transition: transform 0.2s;

}

.perk-card-mini:hover {

    border-color: var(--accent-lime);

    transform: translateY(-5px);

}



/* --- HERO LOGO CORNER FIX --- */

.about-hero-content {

    display: block; /* Stack on mobile, but allows absolute positioning relative to this */

    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    text-align: center; /* Ensure text is centered */

}



.about-hero-text {

    width: 100%;

    text-align: center; /* Center text always */

    z-index: 2;

    position: relative;

}



.about-hero-logo {

    position: absolute;

    top: -50px; /* Move it up a bit into the padding area */

    right: 0;

    display: none; /* Hidden on mobile */

    z-index: 1;

    opacity: 0.7; /* Translucent as requested */

    pointer-events: none; /* Don't interfere with clicks */

}



.pulsing-logo-gif {

    height: 80px; /* Much smaller */

    width: auto;

    filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.4));

    animation: logoGlowPulse 4s infinite alternate; /* Slower pulse */

}