/* iOS Safari auto-zooms on focus when an input's font-size < 16px.
   Enforce a 16px floor on form fields at mobile breakpoints — keeps
   pinch-zoom intact without disabling user-scalable. */
@media (max-width: 991.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    select,
    textarea,
    [contenteditable="true"] {
        font-size: 16px;
    }
}

/* 🌈 Centralized color variables (First Set for Dashboard) */
:root {
    /* PRIMARY BRAND */
    --color-primary: #29B5A8;
    --color-primary-dark: #004E89;
    --color-accent: #29B5A8;
    --color-accent-dark: #21968a;
    /* TEXT */
    --c-text-primary: #282a32;
    --c-text-secondary: #686b87;
    /* BACKGROUNDS */
    --c-background-primary: #ffffff;
    --c-background-secondary: #fdfcff;
    --c-background-tertiary: #ecf3fe;
    /* BORDERS */
    --color-border-light: #e0e0e0;
    --c-border-primary: #eff1f6;

    /* Fixed bottom nav clearance for mobile bottom-sheet modals. Most pages
       have one (#dashMNav via global-mobile-nav.php, or #mTabBar on a
       club's own dash.php) and need 62px + safe-area reserved above it;
       pages with neither (dashboard.php removed its own nav) only need the
       safe-area. Every sheet-style modal should offset off this variable
       instead of hardcoding 62px, so removing/adding a page's nav doesn't
       require hunting down each modal's CSS individually. */
    --mnav-clearance: calc(62px + env(safe-area-inset-bottom, 0px));
}
/* No bottom nav: sheets run right to the bottom edge. This used to be
   env(safe-area-inset-bottom), which is 0 in a desktop browser's
   responsive mode but ~34px on an iPhone (and non-zero on edge-to-edge
   Android) inside the app — so every sheet stopped short and left a strip
   of page showing underneath. The home-indicator inset now goes INSIDE
   the sheet as padding instead. */
body:not(:has(#dashMNav)):not(:has(#mTabBar)) {
    --mnav-clearance: 0px;
}
@media (max-width: 991.98px) {
    body:not(:has(#dashMNav)):not(:has(#mTabBar)) .modal .modal-content {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* These paint their background on an inner element, so pad that
       instead or the inset would show as a see-through strip. */
    body:not(:has(#dashMNav)):not(:has(#mTabBar)) :is(#profileDataModal, #memberInfoModal, #bookExplorerModal, #albumInfoModal) .modal-content {
        padding-bottom: 0;
    }
    body:not(:has(#dashMNav)):not(:has(#mTabBar)) :is(#profileDataModal, #memberInfoModal, #bookExplorerModal, #albumInfoModal) .modal-content > :last-child {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}


/* General Layout */
html, body {
    height: 100%;
}

body {
    font-family: "Lato", arial;
    color: var(--c-text-primary);
    margin: 0 !important;
    padding: 0 !important;
    
}


    body a {
        text-decoration: none;
        color: #2b988f;
    }


/* Images */
img {
    max-width: 100%;
}

.grey-line {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/* Header */
.header {
    background-color: var(--c-background-primary);
    border-bottom: 1px solid var(--c-border-primary);
    position: relative;
    z-index: 1040;
}

.header-content {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Desktop: one flex row — logo left, nav+actions right */
.header-content {
    display: flex;
    align-items: center;
}

.header-top-row {
    display: flex;
    align-items: center;
    height: 90px;
    flex-shrink: 0;
}

/* Wordmark — a placeholder mark, then the whole word inside one green badge
   with the "About" half at a heavier weight. The mark is a Font Awesome icon; swap it in
   partials/logo.php, which is the only place it is named.
   This block is repeated in join-club.css, login-style.css, dash-mobile.css,
   index.php and verify-email.php: those pages don't all load style.css, so
   there is no single home for it. Change one, change them all. */
.ra-mark {
    font-size: 1.05em;
    vertical-align: -.04em;
    margin-right: .38em;
    color: #2b988f;
    flex-shrink: 0;
}
.ra-word {
    display: inline-block;
    padding: .1em .5em .16em;
    border-radius: 6px;
    border: 1px solid #40b2a8;
    background: #2b988f;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ra-word em {
    font-style: normal;
    font-weight: 900;
}
/* Hover: a touch darker. */
.ra-word {
    transition: background-color .25s ease-in-out, border-color .25s ease-in-out;
}
a:hover .ra-word,
a:focus-visible .ra-word {
    background: #23827a;
    border-color: #2b988f;
}


.header-desktop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    margin-left: 2rem;
    height: 90px;
}

.header-mobile-right {
    display: none; /* hidden on desktop */
}

.header-navigation-links {
    display: flex;
    align-items: center;
    margin-left: 0;
}

    .header-navigation-links a {
        text-decoration: none;
        color: var(--c-text-action);
        font-weight: 500;
        margin-right: 1rem;
        font-size: 0.95rem;
        line-height: 90px;
        height: 90px;
        transition: color 0.2s;
    }

        .header-navigation-links a.active {
            color: #2B988F;
            font-weight: 700;
            box-shadow: inset 0 -3px 0 0 #2B988F;
        }

        .header-navigation-links a:hover:not(.active) {
            color: #2B988F;
            box-shadow: inset 0 -2px 0 0 rgba(43, 152, 143, 0.35);
        }

/* Hairline between nav items. Short and centred rather than a full-height
   rule — the links are 90px tall, so a full divider would read as a table
   border. Sits half-way into the 1rem gap each link's margin-right makes. */
.header-navigation-links > * { position: relative; }
.header-navigation-links > * + *::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: rgba(17, 24, 39, 0.12);
    pointer-events: none;
}

/* "Create" in the desktop nav: a quiet call to action — a soft teal pill with
   a + — rather than one more text link. Hover only deepens the tint a
   shade; no solid fill, no shadow. It drops the 90px link box, the
   underline hover and the hairline divider before it, none of which suit
   a button. */
.header-navigation-links a.nav-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    line-height: 1;
    margin-left: 6px;
    padding: 0 14px 0 9px;
    border: 1px solid #cfe3e0;
    border-radius: 999px;
    background: #ecf8f6;
    color: #1b6b62;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}
.header-navigation-links a.nav-link-cta .material-icons {
    font-size: 18px;
    line-height: 1;
}
.header-navigation-links a.nav-link-cta:hover:not(.active) {
    background: #e0f2ef;
    border-color: #b9d8d3;
    color: #17625a;
}
.header-navigation-links a.nav-link-cta:active { transform: scale(0.97); }
.header-navigation-links a.nav-link-cta:focus-visible {
    outline: 2px solid rgba(43, 152, 143, 0.45);
    outline-offset: 2px;
}
.header-navigation-links > .nav-link-cta::before { display: none; }

/* ── Hamburger button ─────────────────────────────── */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: #f2f4f8;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.hamburger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.22s, opacity 0.22s;
}
.hamburger-btn.open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open .hamburger-bar:nth-child(2) { opacity: 0; }
.hamburger-btn.open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ────────────────────────────────── */
.mobile-nav {
    display: none; /* JS + CSS reveal on mobile */
    position: fixed;
    top: 0;
    right: -280px;
    width: 270px;
    height: 100dvh;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    padding: 1rem 0;
    overflow-y: auto;
    z-index: 9999;
    transition: right 0.25s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
}
.mobile-nav.open {
    right: 0;
}
/* Close control — the drawer covers the hamburger's X once open. */
.mobile-nav-head {
    display: flex;
    justify-content: flex-end;
    padding: 0 0.9rem 0.35rem;
}
.mobile-nav-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f2f4f8;
    border: none;
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    transition: background .15s;
}
.mobile-nav-close:hover,
.mobile-nav-close:focus-visible { background: #e6e9f0; }
.mobile-nav-close .material-icons { font-size: 22px; line-height: 1; }
.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
}
.mobile-nav-backdrop.open {
    display: block;
}
.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 13px 20px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.mobile-nav-link:hover { background: #f5f5f5; }
.mobile-nav-link--danger { color: #dc3545; }
.mobile-nav-link .material-icons { font-size: 19px; color: #6c757d; flex-shrink: 0; }
.mobile-nav-link--danger .material-icons { color: #dc3545; }
.mobile-nav-group-toggle { justify-content: space-between; }
.mobile-nav-caret { transition: transform 0.2s; font-size: 18px !important; color: #aaa !important; margin-left: auto; }
.mobile-nav-divider { height: 1px; background: #f0f0f0; margin: 6px 0; }

/* My Clubs accordion sub-list */
.mobile-nav-sub {
    display: none;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-sub.open { display: block; }
.mobile-nav-sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 10px 20px 10px 30px;
    font-size: 0.85rem;
    color: #333;
    text-decoration: none;
    transition: background 0.12s;
}
.mobile-nav-sub-item:hover { background: #f0f0f0; }
.mobile-nav-sub-item--muted { color: #888; font-size: 0.8rem; }
.mobile-nav-sub-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Medium badge (film/TV/music/book) beside each club. It takes over part of
   the old 44px indent so the names don't march further right. */
.mobile-nav-sub-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    color: #2B988F;
}
.mobile-nav-sub-empty { display: block; padding: 10px 20px 10px 57px; font-size: 0.82rem; color: #999; }

/* ── Responsive breakpoint ────────────────────────── */
@media (max-width: 991.98px) {
    .responsive-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    /* Reserve the fixed bottom nav's clearance as a MARGIN on the footer
       itself, not as body's padding-bottom. html,body{height:100%} above
       means body is height-constrained while its content overflows it —
       in that situation a padding-bottom on body doesn't reliably extend
       the scrollable area (a well-known overflow/percentage-height CSS
       quirk), so pages with a lot of content (dash.php's tabs, etc.) were
       leaving the footer sitting flush under the nav bar, or past the end
       of what could actually be scrolled to. Margin on the last real piece
       of flowing content isn't subject to that quirk. */
    /* Reserved on .main (footer's outermost non-body wrapper), not on the
       footer itself or on body. .main is auto-height, so padding here
       correctly grows its rendered height and the page's true scrollable
       length along with it. body has explicit height:100% (see html,body
       rule above) — padding-bottom OR margin-bottom placed on body itself,
       or on its last child, does not reliably extend scrollHeight once
       content already overflows a percentage-height box (a real CSS
       overflow/percentage-height quirk) — every earlier attempt to reserve
       this space on body or on the footer directly measurably failed to
       change scrollHeight, which is what sent this comment down here. */
    .main {
        padding-bottom: var(--mnav-clearance);
    }
    .header {
        height: auto;
        position: sticky;
        top: 0;
        z-index: 1040;
    }
    .current-pick-info {
        display: none !important;
    }
    /* Search bar row: no bottom margin, full width */
    .current-pick-header-row {
        margin-bottom: 0 !important;
    }
    .current-pick-header-row .ms-auto {
        flex: 1;
        margin-left: 0 !important;
    }
    .header-content {
        width: 100%;
        padding: 0 1rem;
        flex-direction: column;
        align-items: stretch;
    }
    .header-top-row {
        height: 64px;
        justify-content: space-between;
    }
    /* Hide desktop nav row */
    .header-desktop-row {
        display: none;
    }
    /* Show mobile right controls */
    .header-mobile-right {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    /* Show hamburger */
    .hamburger-btn {
        display: flex;
    }
    /* Mobile drawer visible but off-screen; .open slides it in */
    .mobile-nav {
        display: block;
    }
}

.icon-button {
    background: #f2f4f8;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-action);
    transition: background 0.2s, color 0.2s;
}

    .icon-button:hover {
        background: var(--c-background-tertiary);
        color: var(--c-accent-primary);
    }

.avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 5px;
}


.main-container {
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}


/* Desktop only. Unscoped, this sat below the full-width phone rule in the
   (max-width: 991.98px) block above and quietly beat it on source order. */
@media (min-width: 992px) {
    .responsive-wrapper {
        width: 90%;
        max-width: 1280px;
        margin: 0 auto;
    }
}

/* Section */
section {
    min-height: 60vh;
}

.main-content {
    flex: 1 0 auto;
}


/* Sidebar */
.content {
    display: flex;
    margin-top: 2rem;
}

.content-panel {
    flex: 0 0 250px;
}

.content-header-intro h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.content-header-intro p {
    font-size: 0.9rem;
    color: var(--c-text-secondary);
}

.vertical-tabs {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

    .vertical-tabs a {
        padding: 10px 12px;
        text-decoration: none;
        color: var(--c-text-action);
        font-weight: 500;
        border-radius: 8px;
        margin-bottom: 5px;
        transition: background 0.2s, color 0.2s;
    }

        .vertical-tabs a.active,
        .vertical-tabs a:hover {
            background: var(--c-background-tertiary);
            color: var(--c-accent-primary);
        }

/* Main Content */
.content-main {
    flex-grow: 1;
}

.main-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
}

.text-white-75 {
    opacity: .9 !important;
    color: white;
    font-size: 1rem;
}

/* Search */
.search-bar {
    background: #f2f4f8;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease, background 0.3s ease;
    overflow: hidden;
    position: relative;
}

    .search-bar:hover {
        background: var(--c-background-tertiary);
        color: var(--c-accent-primary);
        cursor: pointer;
    }

    .search-bar input {
        position: absolute;
        left: 0;
        height: 100%;
        width: 0;
        border: none;
        background: transparent;
        outline: none;
        padding: 0 10px;
        font-size: 0.9rem;
        color: var(--c-text-primary);
        opacity: 0;
        transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
        z-index: 1;
    }

    .search-bar:focus-within {
        width: 400px;
        background: var(--c-background-tertiary);
    }

        .search-bar:focus-within input {
            width: 100%;
            opacity: 1;
        }

.search-btn {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .search-btn img {
        width: 20px;
        height: 20px;
    }

.search-icon {
    width: 20px;
    height: 20px;
    z-index: 2;
    pointer-events: none;
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Buttons and Misc */
.button {
    background: var(--c-background-primary);
    border: 2px solid var(--c-border-primary);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--c-text-action);
    display: inline-flex;
    align-items: center;
    transition: border-color 0.2s, color 0.2s;
}

    .button:hover {
        border-color: var(--c-accent-primary);
        color: var(--c-accent-primary);
    }

        .button:hover img {
            filter: invert(28%) sepia(71%) saturate(4443%) hue-rotate(234deg) brightness(96%) contrast(95%);
        }

/* Slide Drawer Animation */
.slide-drawer {
    animation: slideDown 0.4s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chat Box */
.chat-box {
    height: 180px;
    overflow-y: auto;
    background: #f8f9fa;
    padding: 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.9rem;
}

/* --- Radio Cards --- */
.radio-card-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: left;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}



    .radio-card-group input[type="radio"] {
        display: none;
    }

.radio-card-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #ccc;
    border-radius: 04px;
    padding: 15px;
    width: 30%;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
    min-height: 50px;
}

    .radio-card-label:hover {
        border-color: var(--color-primary);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

.radio-card-group input[type="radio"]:checked + .radio-card-label {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Disabled Radio Cards */
.radio-card-label.disabled {
    background-color: #f8f9fa;
    color: #aaa;
    border-style: dashed;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}


.continue-btn {
    margin-top: 20px;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

    .continue-btn:hover {
        background-color: var(--color-primary-dark);
        box-shadow: 0px 17px 30px -16px rgba(0,0,0,0.43);
        transition: 0.5s;
    }

    .continue-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }


/* --- Preview Cards --- */
.preview-card {
    min-height: 300px;
    overflow: visible !important;
    position: relative;
    z-index: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 30px 18px -24px !important;
}

    .preview-card .dropdown {
        z-index: 9999999 !important;
    }

    .preview-card .dropdown-menu {
        z-index: 99999999 !important;
        position: absolute !important;
    }

.preview-image,
.preview-image.bg-cover {
    height: 200px;
    width: 100%;
    background-color: var(--color-preview-image-bg);
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 5px;
    border-bottom: 1px solid var(--color-border-light);
}

.card-item_type {
    position: absolute;
    top: 175px;
    right: -2px;
    padding: 12px 12px;
    font-size: 16px;
    color: white;
    font-weight: 400;
    background-color: #434CE8;
    border-radius: 3px;
    z-index: 20;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.08);
    border-right: 3px solid #323cc9;
    border-top: 1px solid #5962ea;
}

    .card-item_type.bg-warning {
        background-color: #ffc107;
        color: #5a4b00;
    }


.badge-edit-link {
    font-size: 0.65rem;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

    .badge-edit-link:hover {
        color: #f1f1f1;
        text-decoration: underline;
    }


/* --- Sidebar and Club Drawer --- */
.club-drawer {
    background: rgb(0, 0, 0, 0.02);
    border-radius: 0px 0px 8px 0px;
    box-shadow: 24px 0px 13px -19px rgba(0,0,0,0.05) inset;
}

.club-card {
    padding: 1em;
    background-color: white;
    border-left: 1px solid #C4C9CE;
    border-top: 1px solid #C4C9CE;
    border-bottom: 1px solid #C4C9CE;
    border-right: none;
    border-radius: 5px 0px 0px 5px;
}

/* --- Tabs (boxed) --- */
.boxed-tab-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    font-weight: 500;
    color: #333;
    border-right: 1px solid #dee2e6;
    border-bottom: 4px solid transparent;
    transition: all 0.2s ease-in-out;
    text-align: left;
    border-radius: 0px;
}

    .boxed-tab-btn:last-child {
        border-right: none;
    }

    .boxed-tab-btn:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .boxed-tab-btn.active {
        background-color: #fff;
        font-weight: 600;
    }

        .boxed-tab-btn.active.pick-tab {
            border-bottom: 4px solid #0d6efd;
            color: #0d6efd;
        }

        .boxed-tab-btn.active.discussion-tab {
            border-bottom: 4px solid #20c997;
            color: #20c997;
        }

        .boxed-tab-btn.active.members-tab {
            border-bottom: 4px solid #fd7e14;
            color: #fd7e14;
        }

        .boxed-tab-btn.active.settings-tab {
            border-bottom: 4px solid #6f42c1;
            color: #6f42c1;
        }

.pick-tab:hover, .discussion-tab:hover, .members-tab:hover, .settings-tab:hover {
    color: inherit;
}

/* --- Toggle Button --- */
button.btn-toggle {
    margin: 0 4rem;
    padding: 0;
    position: relative;
    border: none;
    height: 1.4rem;
    width: 3rem;
    border-radius: 1.5rem;
    background: #e9ecef;
    background-color: #e9ecef;
    color: #6b7381;
    transition: background-color 0.25s ease;
    box-shadow: none;
    outline: none;
}

button.btn-toggle .handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: white;
    transition: left 0.25s ease;
    z-index: 2;
}

button.btn-toggle.active {
    background: #29b5a8;
    background-color: #29b5a8;
}

button.btn-toggle.active .handle {
    left: calc(100% - 1.1rem - 2px);
}

button.btn-toggle::before,
button.btn-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: bold;
    color: #666;
    transition: opacity 0.2s ease;
}

button.btn-toggle::before {
    content: 'NO';
    left: -2.5rem;
    opacity: 1;
}

button.btn-toggle::after {
    content: 'YES';
    right: -2.2rem;
    opacity: 0.3;
}

button.btn-toggle.active::before {
    opacity: 0.3;
}

button.btn-toggle.active::after {
    opacity: 1;
}

button.btn-toggle:hover,
button.btn-toggle:focus,
button.btn-toggle:focus-visible,
button.btn-toggle:active {
    background: #d3d8de;
    background-color: #d3d8de;
    box-shadow: none;
    outline: none;
}

button.btn-toggle.active:hover,
button.btn-toggle.active:focus,
button.btn-toggle.active:focus-visible,
button.btn-toggle.active:active {
    background: #22a099;
    background-color: #22a099;
}

.btn-launch:disabled {
    background-color: #a3cfc9;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.65;
    pointer-events: none;
    box-shadow: none;
    transition: background-color 0.2s ease;
}


/* --- Avatar Upload --- */
.avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 0 auto;
}

    .avatar-upload .avatar-edit {
        position: absolute;
        right: -2px;
        top: -10px;
    }

    .avatar-upload .avatar-preview {
        width: 192px;
        height: 192px;
        border-radius: 10px;
        border: 6px solid #f8f8f8;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* --- Club Cards / Settings --- */
.settings-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .settings-summary {
        grid-template-columns: repeat(4, 1fr);
    }
}

.summary-item {
    background-color: #f8f9fa;
    border: 1px solid var(--color-border-light);
    padding: 8px 10px;
    border-radius: 6px;
    text-align: center;
}

    .summary-item small {
        font-size: 0.75rem;
        color: #6c757d;
    }

    .summary-item .fw-semibold {
        margin-top: 4px;
        font-size: 0.95rem;
    }

/* --- Chat Message --- */
.chat-message {
    margin-bottom: 8px;
}


.alert.fade {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.opacity-0 {
    opacity: 0;
    transition: opacity 0.5s ease;
}


.modal-dialog.custom-wide {
    min-width: 1000px;
}

.latest-posts-widget a:hover {
    color: var(--color-primary);
}

.latest-posts-widget li {
    border-bottom: 1px dashed #ddd;
    padding-bottom: 8px;
}

    .latest-posts-widget li:last-child {
        border-bottom: none;
    }

.footer--link a {
    font-size: .85rem;
    text-decoration: none;
}

.avatar.dropdown-toggle::after {
    display: none;
}


.profile-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
}

.upcoming-queue .list-group-item {
    font-size: 0.85rem;
}

.album-frame img {
    border-radius: 6px;
    border: 1px solid #ccc;
}

#launchBtn:hover {
    background-color: #21998d !important;
}

.btn-launch {
    background-color: #29B5A8;
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease;
}

    .btn-launch:hover {
        background-color: #21938A;
        color: white;
    }

.btn-outline-launch {
    background-color: transparent;
    color: #29B5A8;
    border: 1px solid #29B5A8;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-outline-launch:hover {
        background-color: #e6f7f6;
    }


/* 🌿 Flatpickr theme overrides */
.flatpickr-calendar {
    font-size: 11px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid #29B5A8;
    border-radius: 6px;
}

    .flatpickr-calendar .flatpickr-months {
        background-color: #29B5A8;
        color: white !important;
        border-bottom: 1px solid #29B5A8;
    }

        .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
        .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
            color: white;
        }

    .flatpickr-calendar .flatpickr-weekday {
        color: #444;
        font-weight: 600;
    }

.flatpickr-day.today {
    border: 1px solid #deeae9 !important;
    background: rgba(33, 147, 138,.1);
    color: #29B5A8;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: rgba(33, 147, 138,.1) !important;
    color: #66A9F6 !important;
    font-weight: bold;
}

.flatpickr-day.weekend {
    color: inherit !important; /* prevent red text */
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #29B5A8;
}

.album__show-more {
    background-color: transparent;
    border: 0px;
    color: #2B988F;
    font-size: .75rem;
}

.copy-btn:hover {
    background-color: #333333 !important;
    color: #35e0cf !important;
    transition: ease-in-out .3s;
}

    .copy-btn:hover i {
        color: #35e0cf !important;
        transition: ease-in-out .3s;
    }

/* Avatar Upload Section */
.profile-avatar-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
}

/* Avatar Preview */
.profile-avatar-upload {
    position: relative;
    display: inline-block;
    text-align: center;
}

/* Hide the default file input */
.profile-avatar-edit input[type="file"] {
    display: none;
}

/* Custom Pencil Icon Button Style for Avatar Upload */
.profile-avatar-edit-icon {
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    transition: background-color 0.3s ease;
    border: 2px solid white;
}

    .profile-avatar-edit-icon:hover {
        background-color: rgba(0, 0, 0, 1);
    }

/* Avatar Preview (circular) */
.profile-avatar-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: background-image 0.3s ease;
    display: inline-block;
}

/* Save Changes Button (for form submission) */
.profile-save-avatar-btn {
    background-color: #28a745;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

    .profile-save-avatar-btn:hover {
        background-color: #218838;
    }

/* Form input styling */
.profile-form-input {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* Fancy Tabs */
.profile-boxed-tab-btn {
    background-color: #f1f1f1;
    border: none;
    padding: 10px 20px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .profile-boxed-tab-btn.active {
        background-color: #007bff;
        color: white;
    }

    .profile-boxed-tab-btn:hover {
        background-color: #e0e0e0;
    }

/* Tab content */
.profile-tab-pane {
    display: none;
}

    .profile-tab-pane.active {
        display: block;
    }

/* Focused input */
.profile-focused .profile-form-input {
    border-color: #007bff;
}

.profile-focused label {
    color: #007bff;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .profile-avatar-preview {
        width: 120px;
        height: 120px;
    }

    .card {
        padding: 15px;
    }

    .profile-form-input {
        font-size: 14px;
    }
}

.feature-grid .material-icons {
    vertical-align: middle;
    line-height: 1;
}

.feature-grid .col {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}


.club-settings-table {
    font-size: 0.875rem;
    width: 100%;
    max-width: 600px;
}

    .club-settings-table th {
        width: 35%;
        font-weight: 600;
        color: #6c757d;
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        background-color: #f9f9f9;
    }

    .club-settings-table td {
        color: #333;
        padding: 0.5rem 0.75rem;
    }

#reviewPanel table {
    width: 100% !important;
}

.toggle-members-row:hover {
    background-color: #f8f9fa;
}

.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
}

.camera-icon {
    opacity: .5;
    color: white;
    transition: ease-in-out .3s;
}

    .camera-icon:hover {
        opacity: .9;
    }

/* --- Real Rocket Animation --- */
.launch-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #29B5A8;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

    .launch-btn:hover {
        background-color: #21998d;
    }

    .launch-btn .rocket {
        display: inline-block;
        transition: transform 0.3s ease;
        will-change: transform, opacity;
    }

    .launch-btn.launched .rocket {
        animation: rocketZoom 1.4s ease forwards;
    }

@keyframes rocketZoom {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    40% {
        transform: translateY(-40px) rotate(-10deg) scale(1.05);
    }

    70% {
        transform: translateY(-80px) rotate(-20deg) scale(1.1);
    }

    100% {
        transform: translateY(-150px) rotate(-45deg) scale(1.3);
        opacity: 0;
    }
}

.launch-btn.launched {
    background-color: white !important;
    color: #29B5A8 !important;
    border: 1px solid #29B5A8;
}

.screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
}

    .screen-overlay.show {
        display: flex;
    }

#reviewStars span {
    font-size: 1.2rem !important;
}

.close-btn {
    font-size: .8rem !important;
    text-decoration: none !important;
}

/* target the inner list in your accordion body */
.queue-item ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    /* if you want to be extra-safe, also reset any nested <li> */
    .queue-item ul li {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: .8rem;
    }

.queue-time-until {
    font-size: 0.72rem;
    color: #9ca3af;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.queue-date {
    width: 60px;
    height: 67px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #191919;
    font-size: 0.7rem;
    border-top: 2px solid white;
    color: white;
} 

    .queue-date .start,
    .queue-date .end {
        line-height: 1.1;
    }

.queue-empty-state {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 16px 28px;
    text-align: center;
    color: var(--rt-muted, #6b7280);
}

.queue-empty-icon {
    font-size: 48px !important;
    color: #2b988f;
    margin-bottom: 12px;
    opacity: 0.85;
}

.queue-empty-title {
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 6px;
    color: #374151;
}

.queue-empty-sub {
    font-size: 0.85rem;
    margin: 0 0 14px;
    color: var(--rt-muted, #6b7280);
}

.queue-empty-arrow {
    font-size: 28px !important;
    color: #2b988f;
    animation: queue-bounce 1.4s ease-in-out infinite;
}

@keyframes queue-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}


#newThreadForm,
#threadListView,
#forumView {
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Hide emoji-reaction button except on message hover */
.chat-messages .react-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s;
}

.chat-messages .group:hover .react-btn {
    opacity: 1;
    pointer-events: auto;
}

.tab-content,
.main-container,
.chat-box,
.chat-input {
    overflow: visible !important;
}

#gif-picker-root > div {
    position: fixed !important;
    z-index: 99999 !important;
}

/* Album Info Modal Styles */
.album-modal-cover-wrap {
    background: #222;
    min-height: 360px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.album-modal-bg {
    position: absolute;
    z-index: 1;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.72);
    opacity: 0.35;
}

.album-modal-cover-img {
    position: relative;
    z-index: 2;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 6px 24px rgba(40,40,70,0.19);
    margin: 36px 0 36px 0;
    max-height: 285px;
    object-fit: contain;
}

#albumInfoModal .modal-body {
    position: relative;
    min-height: 380px;
    font-size: .85rem;
}

#albumInfoShowMoreTracks, #albumInfoShowMoreDesc, #albumInfoShowMoreNote {
    cursor: pointer;
    text-decoration: underline;
    color: #1C5D99;
}

#albumInfoTitle {
    line-height: 1.1;
}

#albumInfoModal .modal-content {
    position: relative;
    overflow: visible;
    background: transparent;
}

/* Media explorer modal — wider on md (768–992px) where Bootstrap modal-xl still defaults to 500px */
@media (min-width: 768px) and (max-width: 991.98px) {
    #mediaExplorerModal .modal-dialog {
        max-width: 720px;
    }
}

.album-modal-close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1055;
    width: 40px !important;
    height: 40px !important;
    background-color: #17756D !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(20,20,20,0.15);
    color: #ffffff !important;
    opacity: 1 !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1 !important;
}

    .album-modal-close-btn:hover {
        background-color: #154B46 !important;
        box-shadow: 0 4px 16px rgba(20,20,20,0.25);
    }

    .album-modal-close-btn .material-icons {
        font-size: 20px;
        line-height: 1;
        padding: 0 !important;
        color: currentColor !important;
    }

.album-info-modal-body a {
    color: #17756D;
}

/* Filled brand buttons that happen to be <a> elements must not inherit the
   generic link colour above — .album-info-modal-body a is (0,2,0) and beats
   a plain button class, which paints the label dark teal on the brand fill.
   .queue-album-detail__spotify-btn is the music picker's "Open in Spotify";
   the film/TV pickers' .fp-imdb-btn already forces its own colour. */
.album-info-modal-body .btn-spotify,
.album-info-modal-body .btn-spotify:hover,
.album-info-modal-body .btn-spotify:focus,
.album-info-modal-body .btn-spotify:active,
.album-info-modal-body .queue-album-detail__spotify-btn,
.album-info-modal-body .queue-album-detail__spotify-btn:hover,
.album-info-modal-body .queue-album-detail__spotify-btn:focus,
.album-info-modal-body .queue-album-detail__spotify-btn:active {
    color: #fff !important;
    text-decoration: none;
}


#albumInfoTracklist li {
    margin-left: -20px;
    margin-bottom: 5px;
}

.spoiler:not(.revealed) {
    background: #222 !important;
    color: #222 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}

.spoiler.revealed {
    color: inherit !important;
    background: none !important;
    cursor: pointer !important;
}

.footer-bar {
    border-top: 1px solid rgba(0,0,0,0.06);
    border-radius: 4px;
    width: 100% !important;
}


.artist-popularity-wrap {
    margin-top: 6px;
    max-width: 260px;
    width: 100%;
}


.artist-popularity-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 4px;
    justify-content: flex-start;
}

.artist-header-bar .artist-popularity-wrap {
    margin-left: 0;
}


    .artist-popularity-label .material-icons {
        font-size: 16px;
        color: #ff6a00;
    }

.artist-popularity-bar {
    width: 100%;
    height: 6px;
    background: #e6e6e6;
    border-radius: 999px;
    overflow: hidden;
}

.artist-popularity-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6a00, #ff9f40);
    border-radius: 999px;
    transition: width .3s ease;
}


/* ----------------------------------------------------------------------------
   Coming Soon Ribbon
   Sources: style.css, wizard.css, embedded-pick-album.css
   ---------------------------------------------------------------------------- */
.coming-soon-ribbon {
    position: absolute;
    top: -8px; /* style.css */
    right: -8px; /* style.css */
    background: #dc3545;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 5px 8px;
    transform: rotate(45deg);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.coming-soon-ribbon /* wizard override */ {
    top: -3px;
    right: -19px;
}

/* ── My Clubs nav dropdown ──────────────────────────── */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 1px;
    user-select: none;
}
.nav-dropdown-caret {
    font-size: 1.1rem;
    opacity: .65;
    transition: transform .2s;
}
.nav-dropdown:hover .nav-dropdown-caret {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% - 16px);
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 0;
    z-index: 1050;
    white-space: nowrap;
}
.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px;
    font-size: .85rem;
    color: #1a1a1a;
    text-decoration: none;
    transition: background .12s;
}
.nav-dropdown-menu .nav-dropdown-item {
    height: auto;
    line-height: normal;
    margin-right: 0;
}
.nav-dropdown-item:hover {
    background: #f5f5f5;
}
/* Header nav has a global "underline on hover" effect for top-level links
   (.header-navigation-links a:hover) — that bleeds into dropdown items
   and adds a teal bottom-border + colour shift inside the menu. Override
   so dropdown rows stay clean (no faux border, no colour swap) — the
   row's own subtle background hover is enough on its own. */
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item:hover {
    box-shadow: none;
    color: inherit;
    background: transparent;
}
/* The row's own hover: a soft teal tile inset from the menu's edges, with
   the club name picking up the brand teal. The 6px side margin + 8px padding
   keep the text on the same 14px line it sat on as a full-width row. */
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item {
    margin: 0 6px;
    padding: 7px 8px;
    border-radius: 7px;
    transition: background .14s ease, color .14s ease;
}
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item:hover,
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item:focus-visible {
    background: #eef8f6;
    outline: none;
}
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item .nav-dropdown-item-name {
    transition: color .14s ease;
}
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item:hover .nav-dropdown-item-name,
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item:focus-visible .nav-dropdown-item-name {
    color: #1b6b62;
}
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item--muted:hover {
    color: #1b6b62;
}
/* Club rows: the club's media-type icon in a small rounded tile on the left
   (film, music, book, TV…), then name + type, then the Owner tag pushed to
   the far right. The tile fills teal when its row is hovered. */
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item--club {
    justify-content: flex-start;
    gap: 10px;
}
/* Two classes, not one: the icon font's own .material-icons rule
   (display: inline-block; line-height: 1; 24px) loads later and wins a
   one-class tie, which left the glyph sitting in the tile's top-left corner
   instead of centred. Centred by line-height + text-align as well, so it
   holds whichever display value ends up applying. */
.nav-dropdown-item--club .nav-dropdown-item-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    background: #eef3f2;
    color: #2B988F;
    font-size: 17px;
    line-height: 30px;
    transition: background .14s ease, color .14s ease;
}
.nav-dropdown-item--club .nav-dropdown-item-info { flex: 1 1 auto; min-width: 0; }
.nav-dropdown-item--club .nav-dropdown-item-name {
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: #1a1d2e;
}
.nav-dropdown-item--club .nav-dropdown-item-badge { margin-left: auto; }
/* My Clubs menu: every text size 10% under the shared dropdown sizes. */
#myClubsDropdown .nav-dropdown-item-name  { font-size: .756rem; }
#myClubsDropdown .nav-dropdown-item-meta  { font-size: .648rem; }
#myClubsDropdown .nav-dropdown-item-badge { font-size: .585rem; }
#myClubsDropdown .nav-dropdown-item--muted { font-size: .72rem; }
#myClubsDropdown .nav-dropdown-empty      { font-size: .738rem; }
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item--club:hover .nav-dropdown-item-icon,
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item--club:focus-visible .nav-dropdown-item-icon {
    background: #2B988F;
    color: #fff;
}
.nav-dropdown-item-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.nav-dropdown-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    font-weight: 500;
}
.nav-dropdown-item-meta {
    font-size: .72rem;
    color: #999;
    white-space: nowrap;
}
.nav-dropdown-item-badge {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #2B988F;
    background: #e6f7f6;
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}
.nav-dropdown-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0;
}
.nav-dropdown-item--muted {
    color: #888;
    font-size: .8rem;
}
.nav-dropdown-item--muted:hover {
    color: #444;
}
.nav-dropdown-empty {
    padding: 8px 14px;
    font-size: .82rem;
    color: #999;
}

/* ── NO TOOLTIPS ON TOUCH DEVICES ────────────────────────────────────────────
   Coarse pointer = touchscreen. Tooltips require hover; touch has none.
   This is a hard block that catches any tooltip regardless of how it fires. */
@media (pointer: coarse) {
    .tooltip,
    .rt-tooltip,
    .bs-tooltip-auto,
    .bs-tooltip-top,
    .bs-tooltip-bottom,
    .bs-tooltip-start,
    .bs-tooltip-end {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ── Media Explorer modals: wider dialog on desktop ──
   The album/film/tv/book explorer modals all ship as Bootstrap modal-lg
   (max-width 800px), which leaves them needlessly squished on desktop.
   Widen them above the mobile breakpoint only — the 991.98px-and-below
   bottom-sheet styling in dash-mobile.css is left completely untouched. */
@media (min-width: 992px) {
    #mediaExplorerModal .modal-dialog,
    #filmExplorerModal  .modal-dialog,
    #tvExplorerModal    .modal-dialog,
    #bookExplorerModal  .modal-dialog {
        max-width: min(969px, 80vw) !important;
    }
}

/* ── Messages dropdown: recent conversations ─────────────────────────────
   Rows built by initMessageBell() in notifications.js. A conversation with
   unread messages (.is-unread) gets a soft teal wash, bold name and preview,
   and a count pill. */
.message-item .msg-dd-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; white-space: normal;
}
.message-item .msg-dd-avatar {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.message-item .msg-dd-body { flex: 1 1 auto; min-width: 0; }
.message-item .msg-dd-top,
.message-item .msg-dd-bottom { display: flex; align-items: center; gap: 8px; }
.message-item .msg-dd-name {
    flex: 1 1 auto; min-width: 0; font-size: .875rem; font-weight: 500; color: #1f2937;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.message-item .msg-dd-time { flex: 0 0 auto; font-size: .72rem; color: #9ca3af; }
.message-item .msg-dd-preview {
    flex: 1 1 auto; min-width: 0; font-size: .8rem; color: #6b7280;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.message-item .msg-dd-count {
    flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #2B988F; color: #fff;
    font-size: .68rem; font-weight: 600; line-height: 1;
}
.message-item.is-unread .msg-dd-row { background: #f0f9f7; }
.message-item.is-unread .msg-dd-row:hover,
.message-item.is-unread .msg-dd-row:focus { background: #e3f3f0; }
.message-item.is-unread .msg-dd-name { font-weight: 700; }
.message-item.is-unread .msg-dd-preview { color: #1f2937; font-weight: 600; }
.message-item.is-unread .msg-dd-time { color: #2B988F; font-weight: 600; }

/* ── Notifications dropdown: recent rows ─────────────────────────────────
   Rows built by initNotificationBell() in notifications.js: unread ones
   (.is-unread) get the same soft teal wash as the messages dropdown plus a
   dot; already-read ones sit quieter. */
.notif-dd-item .notification-item { align-items: center; }
.notif-dd-item .notif-dd-meta {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
    margin-left: 8px;
}
.notif-dd-item .notif-dd-time { font-size: .72rem; color: #9ca3af; white-space: nowrap; }
.notif-dd-item .notif-dd-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.notif-dd-item:not(.is-unread) .notification-item { opacity: .8; }
.notif-dd-item:not(.is-unread) .notification-item:hover,
.notif-dd-item:not(.is-unread) .notification-item:focus-visible { background: #f3f6f8; opacity: 1; }
.notif-dd-item.is-unread .notification-item { background: #f0f9f7; }
.notif-dd-item.is-unread .notification-item:hover { background: #e3f3f0; }
.notif-dd-item.is-unread .notif-dd-time { color: #2B988F; font-weight: 600; }
.notif-dd-item.is-unread .notif-dd-dot { background: #2B988F; }

/* ── Phones: top-nav Notifications / Messages as a full-width panel ──────
   .ra-nav-panel is added by notifications.js, which also sets
   --ra-nav-panel-top to the header's bottom edge and toggles
   body.ra-nav-panel-open (the scrim + scroll lock). The toggles use
   data-bs-display="static", so Popper never writes inline positions. */
@media (max-width: 991.98px) {
    .dropdown-menu.ra-nav-panel {
        position: fixed !important;
        top: var(--ra-nav-panel-top, 64px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none;
        max-height: min(78dvh, calc(100dvh - var(--ra-nav-panel-top, 64px) - 24px));
        margin: 0 !important;
        padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0 0 22px 22px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .18) !important;
        z-index: 1045;
        transform-origin: top center;
    }
    .dropdown-menu.ra-nav-panel.show { animation: raNavPanelIn .32s cubic-bezier(.32, .72, 0, 1) both; }
    .dropdown-menu.ra-nav-panel.is-closing { animation: raNavPanelOut .2s ease-in both; pointer-events: none; }

    /* Rows cascade in just behind the panel. */
    .dropdown-menu.ra-nav-panel.show > li { animation: raNavRowIn .34s cubic-bezier(.32, .72, 0, 1) both; }
    .dropdown-menu.ra-nav-panel.show > li:nth-child(2) { animation-delay: .03s; }
    .dropdown-menu.ra-nav-panel.show > li:nth-child(3) { animation-delay: .06s; }
    .dropdown-menu.ra-nav-panel.show > li:nth-child(4) { animation-delay: .09s; }
    .dropdown-menu.ra-nav-panel.show > li:nth-child(5) { animation-delay: .12s; }
    .dropdown-menu.ra-nav-panel.show > li:nth-child(6) { animation-delay: .15s; }
    .dropdown-menu.ra-nav-panel.show > li:nth-child(n+7) { animation-delay: .18s; }

    /* Title row: a proper heading, "View all" as a pill. */
    .ra-nav-panel > li:first-child > .dropdown-header {
        padding: 10px 18px 8px;
        font-size: 1.05rem;
        font-weight: 800 !important;
        color: #1a1d2e !important;
    }
    .ra-nav-panel > li:first-child > .dropdown-header a {
        padding: 5px 12px;
        border-radius: 999px;
        background: #eef7f6;
        font-size: .8rem;
        font-weight: 600 !important;
    }
    .ra-nav-panel .dropdown-divider { margin: 4px 0; border-color: #eef0f4; }
    .ra-nav-panel > li.dropdown-header,
    .ra-nav-panel > li:not(:first-child) .dropdown-header { padding: 8px 18px 4px; }
    .ra-nav-panel .notification-item,
    .ra-nav-panel .msg-dd-row { padding: 12px 18px !important; gap: 12px; }
    .ra-nav-panel .msg-dd-avatar { width: 44px; height: 44px; }
    .ra-nav-panel .notification-item > img,
    .ra-nav-panel .notification-item > .material-icons { width: 40px !important; height: 40px !important; }
    .ra-nav-panel .notification-item:active,
    .ra-nav-panel .msg-dd-row:active { background: #e3f3f0; }
    /* Profile menu: the user card on top, then thumb-sized rows. */
    .ra-nav-panel > li.border-bottom { padding: 12px 18px 14px !important; border-color: #eef0f4 !important; }
    .ra-nav-panel > li.border-bottom img { width: 46px !important; height: 46px !important; }
    .ra-nav-panel > li.border-bottom .fw-semibold { font-size: 1rem !important; }
    .ra-nav-panel > li.border-bottom a { font-size: .8rem !important; }
    .ra-nav-panel .dropdown-item {
        padding: 13px 18px !important;
        gap: 14px !important;
        font-size: .95rem;
        font-weight: 500;
    }
    .ra-nav-panel .dropdown-item .material-icons { font-size: 21px !important; }
    .ra-nav-panel .dropdown-item:active { background: #e3f3f0; color: inherit; }
    .ra-nav-panel .dropdown-item.text-danger:active { background: #fdecec; color: #dc3545; }
    .ra-nav-panel [id^="notificationEmpty"],
    .ra-nav-panel [id^="messageEmpty"] { padding: 28px 18px !important; }

    /* Scrim under the header; tapping it closes the panel (Bootstrap's
       outside click). */
    body::after {
        content: '';
        position: fixed;
        inset: var(--ra-nav-panel-top, 64px) 0 0 0;
        background: rgba(15, 23, 42, .38);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility 0s linear .25s;
        z-index: 1039; /* below .header (1040), whose layer holds the panel */
    }
    body.ra-nav-panel-open { overflow: hidden; }
    body.ra-nav-panel-open::after {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease;
    }
}
@keyframes raNavPanelIn {
    from { opacity: 0; clip-path: inset(0 0 100% 0 round 0 0 22px 22px); }
    to   { opacity: 1; clip-path: inset(0 0 0 0 round 0 0 22px 22px); }
}
@keyframes raNavPanelOut {
    from { opacity: 1; clip-path: inset(0 0 0 0 round 0 0 22px 22px); }
    to   { opacity: 0; clip-path: inset(0 0 100% 0 round 0 0 22px 22px); }
}
@keyframes raNavRowIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.ra-nav-panel.show,
    .dropdown-menu.ra-nav-panel.show > li,
    .dropdown-menu.ra-nav-panel.is-closing { animation-duration: .01s; animation-delay: 0s; }
}

/* ── Club type tag (includes/media-icons.php club_type_tag) ──────────────
   The "▣ Film club" line under a club's name in the club switchers. Each
   medium has its own colour from the service it leans on; the icon sits on
   a tinted tile with a soft glow so it pops on the dark switcher menus. */
.ra-club-type {
    --ra-type: #2B988F;
    --ra-type-bg: rgba(43, 152, 143, .18);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: rgba(255, 255, 255, .62);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
.ra-club-type .material-icons {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--ra-type-bg);
    color: var(--ra-type);
    font-size: 12px;
    box-shadow: 0 0 10px var(--ra-type-bg);
}
.ra-club-type--music    { --ra-type: #1ed760; --ra-type-bg: rgba(30, 215, 96, .18); }   /* Spotify */
.ra-club-type--film     { --ra-type: #f5c518; --ra-type-bg: rgba(245, 197, 24, .18); }  /* IMDb */
.ra-club-type--youtube  { --ra-type: #ff3355; --ra-type-bg: rgba(255, 0, 51, .2); }     /* YouTube */
.ra-club-type--tv       { --ra-type: #01b4e4; --ra-type-bg: rgba(1, 180, 228, .18); }   /* TMDB */
.ra-club-type--books    { --ra-type: #f0a35e; --ra-type-bg: rgba(240, 163, 94, .18); }  /* warm paper-orange */
.ra-club-type--podcasts { --ra-type: #b26cff; --ra-type-bg: rgba(178, 108, 255, .2); }  /* Apple Podcasts */