/* =============================================================================
   cams_site_chaturbate theme — Chaturbate-inspired live cam site (LIGHT mode)
   Matches Chaturbate's light theme: white body, dark-teal #113844 header,
   signature orange #f47321 CTA, medium-blue #2f85ac links, gold #f0bd22 tips.
   ============================================================================= */

:root {
    /* Chaturbate light body — near-white with a very cool blue-gray tint */
    --bg-0: #f2f3f5;        /* page background — pale cool gray */
    --bg-1: #ffffff;        /* card / content surface */
    --bg-2: #f7f8fa;        /* secondary surface (sidebars, panels) */
    --bg-3: #eceff3;        /* input / hover surface */
    --bg-4: #dde2e9;        /* deeper hover */
    --border: #d7dce3;
    --border-strong: #b6bdc8;

    /* Text — dark on light */
    --text: #1c2834;        /* near-black with cool blue undertone to match header */
    --text-dim: #4a5968;
    --text-mute: #7a8594;

    /* Header — Chaturbate's dark-teal brand bar stays dark even in light mode */
    --header-bg: #113844;
    --header-bg-2: #0c6a93;
    --header-text: #ffffff;
    --header-text-dim: #cfd9e1;
    --header-hover: #f47321;   /* orange hover on dark teal header */

    /* Primary accent — Chaturbate's signature orange #f47321 */
    --accent: #f47321;
    --accent-hov: #ff8a3d;
    --accent-dim: #c85a14;
    --accent-soft: rgba(244, 115, 33, 0.10);

    /* Secondary — Chaturbate medium blue (link color, info) */
    --secondary: #2f85ac;
    --secondary-hov: #0c6a93;
    --secondary-dim: #0c6a93;

    /* Live red — bright crimson, distinct from orange */
    --live: #e53935;
    --online: #4caf50;
    /* Chaturbate gold — tips, token counters, premium */
    --gold: #e6a817;

    --radius: 4px;
    --radius-lg: 6px;
    --shadow-lg: 0 8px 24px rgba(17, 56, 68, 0.18);
    --shadow-sm: 0 1px 3px rgba(17, 56, 68, 0.10);

    --header-h: 56px;
    --subnav-h: 42px;
    --sidebar-w: 210px;

    /* Chaturbate uses a clean Helvetica/Arial sans-serif stack */
    --font: "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100%;
}

a { color: var(--secondary); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--text); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }

/* =============================================================================
   LAYOUT PRIMITIVES
   ============================================================================= */

.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 12px 16px 40px;
}

.page-header {
    padding: 14px 4px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.page-title { font-size: 20px; font-weight: 700; color: var(--text); font-family: var(--font); }
.page-subtitle { font-size: 13px; color: var(--text-mute); margin-top: 4px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mt-3 { margin-top: 16px; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.flex-wrap { flex-wrap: wrap; }

.grid { display: grid; gap: 10px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Dense live performer grid — Chaturbate uses tight spacing and many columns */
.cam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}
@media (max-width: 1400px) { .cam-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 5px; } }
@media (max-width: 900px)  { .cam-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; } }
@media (max-width: 520px)  { .cam-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; } }

/* =============================================================================
   BUTTONS
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    background: var(--bg-3);
    color: var(--text);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius);
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font);
}
.btn:hover { background: var(--bg-4); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Primary = Chaturbate signature orange */
.btn-primary { background: var(--accent); border-color: var(--accent-dim); color: #fff; }
.btn-primary:hover { background: var(--accent-hov); border-color: var(--accent); color: #fff; }

/* Secondary = Chaturbate medium blue */
.btn-secondary {
    background: var(--secondary);
    border: 1px solid var(--secondary-dim);
    color: #fff;
}
.btn-secondary:hover {
    background: var(--secondary-hov);
    border-color: var(--secondary);
    color: #fff;
}

.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--bg-2); border-color: var(--accent); color: var(--text); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--bg-2); text-decoration: none; }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* =============================================================================
   CARDS
   ============================================================================= */

.card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}
.card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(244, 115, 33, 0.28); }
.card-body { padding: 10px 12px; }

/* =============================================================================
   HEADER
   ============================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: linear-gradient(180deg, var(--header-bg) 0%, #0c2a36 100%);
    color: var(--header-text);
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    height: var(--header-h);
}

.header-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}
.site-logo-icons { display: none; }
.site-logo-text { display: flex; align-items: center; gap: 8px; }

/* Chaturbate orange "CB" badge — pill-shaped orange with white letters */
.site-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 5px 10px;
    border-radius: 3px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(244, 115, 33, 0.5);
    text-transform: uppercase;
    font-family: var(--font);
}

.site-logo-main {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--header-text);
    line-height: 1;
    font-family: var(--font);
}
.site-logo-main em {
    color: var(--accent);
    font-style: normal;
    font-weight: 800;
}
.site-logo-tagline { display: none; }
.site-logo-bar { display: none; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav > a,
.main-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    color: var(--header-text);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: color 0.12s, background 0.12s;
}
.main-nav > a:hover,
.main-nav .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}
.main-nav > a.active,
.main-nav .nav-link.active {
    color: #fff;
    background: var(--accent);
}

.dropdown-arrow { font-size: 9px; opacity: 0.7; }

/* Language dropdown trigger inside the dark header — white text, yellow hover */
.site-header .language-nav-dropdown > .nav-link,
.site-header .nav-dropdown > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: var(--header-text);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.1s;
}
.site-header .language-nav-dropdown > .nav-link:hover,
.site-header .nav-dropdown > .nav-link:hover {
    color: var(--header-hover);
    text-decoration: underline;
}

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    z-index: 210;
}
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown.menu-open > .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--text-dim);
    font-size: 13px;
    border-radius: var(--radius);
    white-space: nowrap;
}
.nav-dropdown-item:hover { background: var(--bg-3); color: var(--text); }
.nav-dropdown-item.active { color: var(--accent); }

.language-nav-dropdown .nav-dropdown-menu {
    right: 0;
    left: auto;
    max-height: 360px;
    overflow-y: auto;
}
.lang-flag { font-size: 14px; }
.lang-current { font-size: 12px; }

.user-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
/* Login / Register buttons inject into #userMenu by footer.php JS — they sit
   on the dark-teal Chaturbate header. Transparent outline for Login,
   solid orange for the Register CTA. */
.site-header .user-menu .btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
}
.site-header .user-menu .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
    text-decoration: none;
}
/* Primary CTA button (Register / Sign Up / Broadcast) — Chaturbate orange */
.site-header .user-menu .btn-primary {
    background: var(--accent);
    border-color: var(--accent-dim);
    color: #ffffff;
}
.site-header .user-menu .btn-primary:hover {
    background: var(--accent-hov);
    border-color: var(--accent);
    color: #ffffff;
}

/* =============================================================================
   LOGGED-IN USER DROPDOWN
   Injected by footer.php JS when authenticated. Classes must match what
   that JS writes: .user-dropdown, .user-avatar[-wrapper|-placeholder],
   .user-dropdown-menu, .user-dropdown-header, .user-dropdown-name,
   .user-dropdown-item, .user-dropdown-divider, .dropdown-icon.
   ============================================================================= */

.user-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.user-avatar-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    transition: box-shadow 0.15s;
}
.user-avatar-wrapper:hover {
    box-shadow: 0 0 0 2px var(--accent);
}

/* Hard size constraint — without this, images render at natural dimensions (huge) */
.user-avatar,
.user-dropdown img.user-avatar,
.user-menu .user-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--border-strong);
    background: var(--bg-3);
    transition: border-color 0.15s;
}
.user-avatar-wrapper:hover .user-avatar {
    border-color: var(--accent);
}

.user-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The dropdown panel */
.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    z-index: 220;
    display: none;
    animation: userDropdownFadeIn 0.14s ease-out;
}
.user-dropdown.menu-open .user-dropdown-menu {
    display: block;
}
@keyframes userDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Small arrow pointer at the top of the dropdown */
.user-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    transform: rotate(45deg);
}

.user-dropdown-header {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.user-dropdown-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
    cursor: pointer;
}
.user-dropdown-item:hover {
    background: var(--bg-3);
    color: var(--text);
}
.user-dropdown-item .dropdown-icon {
    font-size: 16px;
    line-height: 1;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.user-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* Token balance card inside the dropdown — don't let the generic item hover
   darken the magenta gradient */
.user-dropdown-item.token-balance-card:hover {
    background: linear-gradient(135deg, var(--accent-hov) 0%, var(--accent) 100%) !important;
    color: #fff;
}

/* Notification badges on the avatar (DM unread, orders, earnings). The JS
   injects these with inline styles, so we only need to override the border
   color to match our dark theme (inline uses #111 which is close enough) */
.dm-unread-badge,
.orders-unviewed-badge,
.earnings-unviewed-badge {
    border-color: var(--bg-1) !important;
}

.token-balance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-3);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
}
.token-balance::before { content: "\1FA99"; font-size: 13px; }

.header-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    padding: 0 10px;
    flex: 0 1 300px;
    min-width: 160px;
    height: 34px;
}
.header-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(244, 115, 33, 0.25);
    background: rgba(255, 255, 255, 0.12);
}
.header-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text);
    font-size: 13px;
    padding: 0 6px;
    font-family: var(--font);
}
.header-search input::placeholder { color: var(--header-text-dim); }
.header-search button {
    background: transparent;
    border: 0;
    color: var(--header-text-dim);
    font-size: 14px;
}
.header-search button:hover { color: var(--accent); }

/* Gender tabs sub-nav — Chaturbate style: dark teal bar with orange underline on active */
.gender-tabs {
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    height: var(--subnav-h);
    position: sticky;
    top: var(--header-h);
    z-index: 190;
}
.gender-tabs-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.gender-tabs-inner::-webkit-scrollbar { display: none; }
.gender-tab {
    padding: 0 18px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    font-family: var(--font);
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.gender-tab:hover {
    color: var(--text);
    background: var(--bg-2);
    text-decoration: none;
}
.gender-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--bg-2);
}

/* Tag rail */
.tag-rail {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0 14px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.tag-rail::-webkit-scrollbar { height: 6px; }
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.12s;
}
.tag-pill:hover { background: var(--bg-3); color: var(--text); border-color: var(--border-strong); }
.tag-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-pill .count { color: var(--text-mute); font-weight: 500; }
.tag-pill.active .count { color: rgba(255,255,255,0.85); }

/* Banner zones */
.header-banner-zone:empty,
.footer-banner-zone:empty,
.content-banner-zone:empty { display: none; }
.header-banner-zone, .content-banner-zone, .footer-banner-zone {
    padding: 8px 16px;
    max-width: 1920px;
    margin: 0 auto;
    text-align: center;
}
.header-banner-zone > *,
.content-banner-zone > *,
.footer-banner-zone > * {
    display: inline-block;
    max-width: 100%;
}
.header-banner-zone img,
.content-banner-zone img,
.footer-banner-zone img { margin: 0 auto; }

/* =============================================================================
   MAIN LAYOUT WITH OPTIONAL SIDEBAR
   ============================================================================= */

.layout-with-sidebar {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: 14px;
    align-items: flex-start;
}
@media (max-width: 1100px) {
    .layout-with-sidebar { grid-template-columns: 1fr; }
    .filter-sidebar { display: none; }
    .filter-sidebar.open { display: block; position: fixed; inset: 0; z-index: 250; overflow-y: auto; }
}

.filter-sidebar {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    position: sticky;
    top: calc(var(--header-h) + var(--subnav-h) + 8px);
    max-height: calc(100vh - var(--header-h) - var(--subnav-h) - 16px);
    overflow-y: auto;
}
.filter-group { margin-bottom: 16px; }
.filter-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-mute);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: var(--radius);
}
.filter-option:hover { background: var(--bg-2); color: var(--text); }
.filter-option input[type="checkbox"],
.filter-option input[type="radio"] { accent-color: var(--accent); }
.filter-option .count { margin-left: auto; font-size: 11px; color: var(--text-mute); }

/* =============================================================================
   PERFORMER / CAM CARDS
   ============================================================================= */

.cam-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.cam-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(244, 115, 33, 0.35);
}
.cam-card a { display: block; color: inherit; }

.cam-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
.cam-thumb img,
.cam-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.cam-card:hover .cam-thumb img { transform: scale(1.04); }

.cam-live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--live);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cam-live-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: pulse-dot 1.4s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.cam-hd-badge {
    position: absolute;
    top: 8px;
    right: 40px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: 0.4px;
}

.cam-viewers {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cam-status-pvt,
.cam-status-grp {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: var(--gold);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}
.cam-status-grp { background: #8a2be2; color: #fff; }

.cam-info {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--bg-1);
}
.cam-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-family: var(--font);
}
.cam-card:hover .cam-name { color: var(--accent); }
.cam-age {
    font-size: 11px;
    color: var(--text-mute);
    font-weight: 600;
}

.cam-tags {
    padding: 0 10px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
    background: var(--bg-1);
}
.cam-tags .tag-mini {
    font-size: 10px;
    color: var(--secondary);
    background: var(--bg-2);
    padding: 2px 6px;
    border-radius: 3px;
}
.cam-tags .tag-mini:hover { color: var(--accent); background: var(--bg-3); }

/* Favorite heart — CSS-controlled color for consistent red/white across platforms */
.favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    backdrop-filter: blur(4px);
}
.favorite-btn:hover { background: rgba(0, 0, 0, 0.75); transform: scale(1.1); }

/* Heart icon — we override emoji text with CSS-colored Unicode ♥ for consistency.
   When .favorited class is present → solid red; otherwise → white outline */
.favorite-btn .heart-icon {
    font-size: 18px;
    line-height: 1;
    font-style: normal;
    font-family: Arial, sans-serif; /* avoid emoji font substitution */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: color 0.15s, transform 0.15s;
    display: inline-block;
}
.favorite-btn.favorited .heart-icon,
.favorite-btn[data-favorited="true"] .heart-icon {
    color: #ff2d55;
    text-shadow: 0 1px 4px rgba(255, 45, 85, 0.6);
}
.favorite-btn:hover .heart-icon { transform: scale(1.1); }

/* Watch-room "Add to favorites" button (cam_performer.php) — text + heart button */
#favBtn .heart-icon {
    color: #fff;
    font-size: 16px;
    margin-right: 4px;
    transition: color 0.15s;
}
#favBtn.favorited {
    border-color: var(--accent);
    color: var(--text);
}
#favBtn.favorited .heart-icon {
    color: #ff2d55;
}

/* Legacy thumb-card classes kept for compatibility */
.thumb-card { position: relative; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.thumb-card:hover { border-color: var(--accent); }
.thumb-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.thumb-overlay { padding: 8px 10px; }
.thumb-title { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-mute); margin-top: 4px; }
.thumb-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
}
.thumb-ppv-badge,
.thumb-subscription-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--gold);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}
.thumb-subscription-badge { background: var(--accent); color: #fff; }
.mosaic-blur { filter: blur(14px) brightness(0.7); }

/* =============================================================================
   FEATURED HERO RAIL
   ============================================================================= */

.hero-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
@media (max-width: 1200px) { .hero-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .hero-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .hero-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Your Favorites / Most Popular rail — 7 cols × 2 rows on desktop (14 cards) */
.favorites-rail {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
@media (max-width: 1400px) { .favorites-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .favorites-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .favorites-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .favorites-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
@media (max-width: 480px)  { .favorites-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } }

/* =============================================================================
   SECTION HEADINGS
   ============================================================================= */

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 12px;
}
.section-head h2 {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.section-head h2::before {
    content: "";
    width: 6px;
    height: 18px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(244, 115, 33, 0.5);
}
.section-head .section-meta {
    font-size: 12px;
    color: var(--text-mute);
}

/* =============================================================================
   WATCH ROOM (cam_performer.php)
   ============================================================================= */

/* Single-column watch layout (chat sidebar removed) */
.watch-single {
    max-width: 1280px;
    margin: 0 auto;
}

.watch-player {
    background: #000;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    position: relative;
}
.watch-player iframe,
.watch-player video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.watch-meta {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-top: 12px;
}
.watch-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.watch-meta-name { font-size: 22px; font-weight: 800; color: var(--text); }
.watch-meta-stats { display: flex; gap: 14px; color: var(--text-mute); font-size: 13px; }
.watch-meta-stats span { display: inline-flex; align-items: center; gap: 5px; }

.watch-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Chat panel */
.chat-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-h) - var(--subnav-h) - 40px);
    min-height: 520px;
    position: sticky;
    top: calc(var(--header-h) + var(--subnav-h) + 8px);
    overflow: hidden;
}
.chat-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}
.chat-tab {
    flex: 1;
    padding: 12px 10px;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid transparent;
}
.chat-tab.active { color: var(--text); border-bottom-color: var(--accent); background: var(--bg-1); }
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-msg {
    display: flex;
    gap: 6px;
    align-items: baseline;
    line-height: 1.4;
}
.chat-msg .user { font-weight: 700; color: var(--accent); flex-shrink: 0; }
.chat-msg .text { color: var(--text-dim); word-break: break-word; }
.chat-msg.tip { background: rgba(245,183,0,0.08); border-left: 3px solid var(--gold); padding: 6px 8px; border-radius: 3px; }
.chat-msg.tip .user { color: var(--gold); }

.chat-input-bar {
    border-top: 1px solid var(--border);
    padding: 10px;
    background: var(--bg-2);
    display: flex;
    gap: 6px;
}
.chat-input-bar input {
    flex: 1;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    font-size: 13px;
    border-radius: var(--radius);
    outline: 0;
}
.chat-input-bar input:focus { border-color: var(--accent); }

/* Tip quick buttons */
.tip-quick {
    padding: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--bg-1);
}
.tip-quick button {
    flex: 1;
    min-width: 56px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--gold);
    font-weight: 700;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: var(--radius);
}
.tip-quick button:hover { background: var(--gold); color: #000; border-color: var(--gold); }

/* =============================================================================
   FORMS
   ============================================================================= */

.form-group { margin-bottom: 14px; }
.form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
input[type="number"].form-control,
textarea.form-control,
select.form-control {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    border-radius: var(--radius);
    outline: 0;
    transition: border-color 0.12s;
}
.form-control:focus { border-color: var(--accent); }
.form-control::placeholder { color: var(--text-mute); }

/* =============================================================================
   ALERTS / LOADING
   ============================================================================= */

.alert {
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-dim);
    font-size: 13px;
}
.alert-error { background: #fdecea; border-color: var(--live); color: #8b1a15; }
.alert-success { background: #e8f5ea; border-color: var(--online); color: #1b5e20; }
.alert-info { background: #e6f2f8; border-color: var(--secondary); color: #0c3a56; }

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    grid-column: 1 / -1;
}
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bg-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================================================
   PAGINATION
   ============================================================================= */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 28px 0 16px;
    flex-wrap: wrap;
}

/* Link-style pagination (anchor-based, used in other parts of the theme) */
.pagination a,
.pagination span {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius);
    transition: all 0.12s;
}
.pagination a:hover {
    background: var(--bg-3);
    color: var(--text);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.pagination .current,
.pagination .active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Button-style pagination (favorites.php / history.php use <button class="pagination-btn">) */
.pagination .pagination-btn {
    min-width: 40px;
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
    white-space: nowrap;
}
.pagination .pagination-btn:hover:not(:disabled) {
    background: var(--bg-3);
    color: var(--text);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.pagination .pagination-btn:active:not(:disabled) {
    transform: translateY(0);
}
.pagination .pagination-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(244, 115, 33, 0.45);
}
.pagination .pagination-btn.active:hover {
    background: var(--accent-hov);
    border-color: var(--accent-hov);
    color: #fff;
}
.pagination .pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mobile — collapse the pagination bar into a tighter row */
@media (max-width: 640px) {
    .pagination { gap: 4px; padding: 20px 0 12px; }
    .pagination .pagination-btn {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 11px;
    }
    /* Hide the word-form buttons on mobile (First/Last), keep just arrows + numbers */
    .pagination .pagination-btn:first-child,
    .pagination .pagination-btn:last-child { display: none; }
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    margin-top: 40px;
    padding: 28px 16px 24px;
}
.footer-container {
    max-width: 1920px;
    margin: 0 auto;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    margin-bottom: 10px;
}
.footer-links a {
    color: var(--text-mute);
    font-size: 12px;
    padding: 4px 0;
}
.footer-links a:hover { color: var(--accent); }
.footer-copyright {
    text-align: center;
    font-size: 12px;
    color: var(--text-mute);
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.footer-powered-by a { color: var(--text-dim); }
.footer-powered-by a:hover { color: var(--accent); }

/* =============================================================================
   COOKIE CONSENT + MODALS
   ============================================================================= */

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: 14px 20px;
    z-index: 500;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.5);
}
.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-consent-text strong { color: var(--text); font-size: 14px; }
.cookie-consent-text p { color: var(--text-dim); font-size: 12px; margin: 4px 0 0; }
.cookie-consent-actions { display: flex; gap: 8px; }

.cookie-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cookie-modal-content {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cookie-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cookie-modal-header h2 { font-size: 17px; }
.cookie-modal-close {
    background: transparent;
    border: 0;
    color: var(--text-mute);
    font-size: 24px;
    line-height: 1;
}
.cookie-modal-close:hover { color: var(--accent); }
.cookie-modal-body { padding: 18px 20px; overflow-y: auto; }
.cookie-intro { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; }
.cookie-category {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.cookie-category h3 { font-size: 13px; margin-bottom: 4px; }
.cookie-category p { color: var(--text-mute); font-size: 12px; margin: 0; }

/* =============================================================================
   NOTIFICATIONS / UTILITY WIDGETS
   ============================================================================= */

.live-notifications-container {
    position: fixed;
    top: calc(var(--header-h) + 10px);
    right: 16px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.live-notifications-container > * { pointer-events: auto; }

/* Dark/light mode toggle — hidden on this theme (cams_site is dark-only) */
.dark-mode-toggle { display: none !important; }

/* =============================================================================
   CATEGORIES / TAG BROWSER
   ============================================================================= */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.cat-tile {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    text-align: center;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}
.cat-tile:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.cat-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, var(--accent-soft));
    opacity: 0;
    transition: opacity 0.2s;
}
.cat-tile:hover::before { opacity: 1; }
.cat-tile-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    position: relative;
}
.cat-tile-count {
    font-size: 11px;
    color: var(--text-mute);
    margin-top: 4px;
    position: relative;
}

/* =============================================================================
   AUTH / SETTINGS PAGES
   ============================================================================= */

.auth-wrapper {
    max-width: 420px;
    margin: 40px auto;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
}
.auth-wrapper h1 { font-size: 22px; margin-bottom: 16px; text-align: center; }
.auth-wrapper .btn-primary { width: 100%; padding: 11px; }

.settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    align-items: flex-start;
}
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } }

.settings-nav {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
}
.settings-nav a {
    display: block;
    padding: 10px 12px;
    color: var(--text-dim);
    font-size: 13px;
    border-radius: var(--radius);
    font-weight: 600;
}
.settings-nav a:hover { background: var(--bg-2); color: var(--text); }
.settings-nav a.active { background: var(--accent-soft); color: var(--accent); }

.settings-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

/* =============================================================================
   MOBILE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
    :root { --header-h: 52px; --subnav-h: 40px; }
    .container { padding: 8px 10px 40px; }
    .header-search { display: none; }
    .site-logo-main { font-size: 18px; }
    .main-nav > a, .main-nav .nav-link { padding: 6px 8px; font-size: 12px; }
    .page-title { font-size: 17px; }
    .section-head h2 { font-size: 15px; }
    .cam-info { padding: 6px 8px; }
    .cam-name { font-size: 12px; }
}

/* =============================================================================
   AUTH PAGES (login / register / forgot password)
   ============================================================================= */

body.login-page,
body.register-page {
    background: var(--bg-0);
    min-height: 100vh;
    padding: 40px 20px;
}

.login-container,
.register-container,
.auth-container {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}

/* Language switcher on auth pages (standalone link in top-right) */
.language-switcher {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 8px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
    z-index: 100;
}
.language-switcher:hover { background: var(--bg-3); color: var(--text); border-color: var(--accent); }

/* Demo notice banner on auth pages */
.demo-notice {
    background: rgba(245, 183, 0, 0.08);
    border: 1px solid rgba(245, 183, 0, 0.3);
    color: var(--gold);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    margin-bottom: 16px;
}
.demo-notice strong { display: block; margin-bottom: 2px; color: var(--gold); }

/* Password show/hide toggle */
.password-toggle { position: relative; }
.password-toggle .form-input { padding-right: 44px; }
.password-toggle-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--text-mute);
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
}
.password-toggle-btn:hover { color: var(--accent); }

/* Password recovery modal (hidden by default — only shown via JS .active) */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 600;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-content {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 18px; margin-bottom: 4px; }
.modal-header p { color: var(--text-mute); font-size: 13px; }
.modal-body { padding: 20px 24px; }
.modal-footer {
    padding: 14px 24px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
}
.modal-footer a { color: var(--accent); font-weight: 600; }

/* Recovery step container — only .active step visible */
.recovery-step { display: none; }
.recovery-step.active { display: block; }

.recovery-method {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}
.recovery-option {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.recovery-option:hover,
.recovery-option.selected {
    border-color: var(--accent);
    background: var(--bg-3);
}
.recovery-option-icon { font-size: 28px; margin-bottom: 6px; }
.recovery-option-title { font-weight: 700; font-size: 14px; color: var(--text); }
.recovery-option-desc { font-size: 12px; color: var(--text-mute); margin-top: 4px; }

.login-card,
.register-card,
.auth-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.login-header,
.register-header,
.auth-header {
    padding: 28px 28px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.login-header h1,
.register-header h1,
.auth-header h1 {
    font-size: 22px;
    margin-bottom: 6px;
}
.login-header p,
.register-header p,
.auth-header p {
    color: var(--text-mute);
    font-size: 13px;
}

.login-body,
.register-body,
.auth-body {
    padding: 24px 28px 28px;
}

.login-footer,
.register-footer,
.auth-footer {
    padding: 16px 28px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
    color: var(--text-mute);
}
.login-footer a,
.register-footer a,
.auth-footer a { color: var(--accent); font-weight: 600; }
.login-footer a:hover,
.register-footer a:hover,
.auth-footer a:hover { color: var(--accent-hov); }

/* Form inputs used across auth + settings */
.form-input,
input[type="text"].form-input,
input[type="email"].form-input,
input[type="password"].form-input,
input[type="number"].form-input,
input[type="search"].form-input,
input[type="tel"].form-input,
input[type="url"].form-input,
input[type="date"].form-input,
textarea.form-input,
select.form-input {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    border-radius: var(--radius);
    outline: 0;
    transition: border-color 0.12s;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-mute); }

.form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.form-row > .form-group { flex: 1; min-width: 200px; }
.form-help {
    font-size: 11px;
    color: var(--text-mute);
    margin-top: 4px;
}
.form-error {
    font-size: 12px;
    color: var(--accent);
    margin-top: 4px;
}

/* Checkbox + remember-me */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dim);
    margin: 8px 0;
}
.form-check input { accent-color: var(--accent); }

/* =============================================================================
   SCHEDULE HEATMAP (cam_performer.php)
   7-day x 24-hour grid of typical online activity
   ============================================================================= */

.schedule-loading,
.schedule-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--text-mute);
    font-size: 13px;
}

.schedule-heatmap {
    display: grid;
    grid-template-columns: 38px repeat(24, 1fr);
    gap: 2px;
    width: 100%;
    overflow-x: auto;
}

.schedule-heatmap .day-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.schedule-heatmap .hour-header {
    font-size: 9px;
    color: var(--text-mute);
    text-align: center;
    padding-bottom: 4px;
    font-weight: 600;
}

.schedule-heatmap .slot {
    aspect-ratio: 1 / 1;
    min-width: 14px;
    border-radius: 2px;
    background: var(--bg-3);
    transition: transform 0.1s;
    cursor: default;
}
.schedule-heatmap .slot:hover { transform: scale(1.25); z-index: 5; position: relative; }

/* Activity levels — using the accent magenta for consistency with theme */
.schedule-heatmap .slot.level-0 { background: var(--bg-3); }
.schedule-heatmap .slot.level-1 { background: rgba(244, 115, 33, 0.2); }
.schedule-heatmap .slot.level-2 { background: rgba(244, 115, 33, 0.45); }
.schedule-heatmap .slot.level-3 { background: rgba(244, 115, 33, 0.6); }
.schedule-heatmap .slot.level-4 { background: rgba(244, 115, 33, 0.8); }
.schedule-heatmap .slot.level-5 { background: rgba(244, 115, 33, 1); }

.schedule-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-mute);
    flex-wrap: wrap;
}
.schedule-legend .legend-label {
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.schedule-legend .legend-text { font-size: 11px; }
.schedule-legend .legend-scale {
    display: flex;
    gap: 2px;
}
.schedule-legend .legend-box {
    width: 14px;
    height: 14px;
    border-radius: 2px;
}
.schedule-legend .legend-box.level-0 { background: var(--bg-3); }
.schedule-legend .legend-box.level-1 { background: rgba(244, 115, 33, 0.2); }
.schedule-legend .legend-box.level-2 { background: rgba(244, 115, 33, 0.45); }
.schedule-legend .legend-box.level-3 { background: rgba(244, 115, 33, 0.6); }
.schedule-legend .legend-box.level-4 { background: rgba(244, 115, 33, 0.8); }
.schedule-legend .legend-box.level-5 { background: rgba(244, 115, 33, 1); }

.schedule-tz {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-mute);
    font-style: italic;
}

.heatmap-tooltip {
    position: fixed;
    background: var(--bg-4);
    color: var(--text);
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    pointer-events: none;
    z-index: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
}

/* =============================================================================
   PROFILE / SETTINGS PAGE (settings/profile.php)
   Stripchat-style dark tabs, cards, fieldsets, and form rows
   ============================================================================= */

/* Tab bar — sits under .page-header */
.tabs-container {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.tabs-nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
}
.tabs-nav::-webkit-scrollbar { display: none; }

.tab-btn {
    flex: 0 0 auto;
    padding: 14px 22px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    white-space: nowrap;
}
.tab-btn:hover {
    color: var(--text);
    background: var(--bg-2);
}
.tab-btn.active {
    color: var(--text);
    border-bottom-color: var(--accent);
    background: var(--bg-2);
}

/* Tab panel bodies — hidden by default, only .active shows */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Section wrapper inside a tab (`.profile-section`) */
.profile-section {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 16px;
}
.profile-section > h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}
.profile-section > .section-description,
.profile-section > p.section-description {
    color: var(--text-mute);
    font-size: 13px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* Fieldset groups — each logical block of inputs */
.form-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    padding: 20px 22px 22px;
    margin: 0 0 18px;
}

.form-legend {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent);
    padding: 0 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 99px;
    margin-left: -2px;
}

/* Multi-column row of form groups */
.form-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.form-row > .form-group {
    flex: 1 1 240px;
    min-width: 0;
}

/* Form group = label + input + help text */
.form-group { margin-bottom: 16px; }

.form-group .form-label,
.form-fieldset .form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.form-help,
.form-hint {
    font-size: 11px;
    color: var(--text-mute);
    margin-top: 6px;
    line-height: 1.5;
}

/* Read-only / disabled fields stand out differently */
.form-input:disabled,
.form-input[readonly],
.form-control:disabled,
.form-control[readonly] {
    background: var(--bg-3);
    color: var(--text-mute);
    cursor: not-allowed;
    opacity: 0.8;
}

/* Select dropdown arrow (dark theme) */
select.form-input,
select.form-control {
    appearance: none;
    padding-right: 32px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
        linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Avatar preview in profile section */
.avatar-preview,
.profile-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-strong);
    background: var(--bg-3);
    display: block;
}
.profile-section .avatar-wrapper {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}
.profile-section .avatar-wrapper .avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Save / submit button row at bottom of each section */
.profile-section .form-actions,
.profile-section .btn-row,
.profile-section .submit-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border);
}

/* Checkbox / radio rows (preferences, privacy toggles) */
.form-checkbox,
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-dim);
}
.form-checkbox input[type="checkbox"],
.form-checkbox input[type="radio"],
.form-check input { accent-color: var(--accent); }

/* Alert container area */
#alert-container:empty { display: none; }
#alert-container {
    margin: 0 0 16px;
}

/* Loading indicator used while the profile data fetches */
#loading-indicator {
    padding: 40px;
    text-align: center;
    color: var(--text-mute);
    font-size: 14px;
}

/* Data tables used in Security tab (login history, trusted devices) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 8px;
}
.data-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-3);
    color: var(--text-dim);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--bg-2); color: var(--text); }

/* Mobile */
@media (max-width: 720px) {
    .profile-section { padding: 18px 16px; }
    .form-fieldset { padding: 16px 14px 18px; }
    .tab-btn { padding: 12px 14px; font-size: 11px; }
    .form-row > .form-group { flex: 1 1 100%; }
}

/* =============================================================================
   FAVORITES & HISTORY PAGES (settings/favorites.php, settings/history.php)
   Dark theme, cam-first layout
   ============================================================================= */

.favorites-container,
.history-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.favorites-header,
.history-header {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.favorites-header h1,
.history-header h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 4px;
}
.favorites-header p,
.history-header p {
    font-size: 13px;
    color: var(--text-mute);
    margin: 0;
}

/* Status filter bar (favorites.php) */
.cam-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.cam-filter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}
.cam-filter select.form-input {
    width: auto;
    min-width: 180px;
}

/* Action bar at top of history tab (count + clear button) */
.history-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.count-display {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 600;
}
.clear-history-btn {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.12s;
}
.clear-history-btn:hover {
    background: rgba(244, 115, 33, 0.12);
    border-color: var(--accent);
    color: var(--accent);
}

/* Content grid used by history render functions */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
@media (max-width: 1400px) { .content-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (max-width: 900px)  { .content-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; } }
@media (max-width: 520px)  { .content-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; } }

/* Card overlays used by history render functions */
.card .watch-count {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
}
.card .completion-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.card .live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--live);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.card .offline-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: var(--text-mute);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Card title + meta used by history render */
.card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-mute);
}

/* Empty state panel (used when the history/favorites list is empty) */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-mute);
}
.empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}
.empty-state h3 {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 6px;
}
.empty-state p {
    font-size: 13px;
    color: var(--text-mute);
    margin: 0;
}

/* Favorites-specific wrappers */
.favorites-content {
    min-height: 200px;
}
.favorites-content #loading {
    padding: 40px;
    text-align: center;
    color: var(--text-mute);
}
.favorites-content #error {
    padding: 16px;
    background: rgba(244, 115, 33, 0.12);
    border: 1px solid var(--accent);
    color: #ffc6d2;
    border-radius: var(--radius);
    font-size: 13px;
}
/* #favorites-list is a plain wrapper — the JS injects .favorites-grid inside
   it which does the actual grid layout. Don't make this a grid or the inner
   grid gets clamped to a single column. */
.favorites-content #favorites-list { display: block; }

/* Favorites grid wrapper — 5-col desktop, scales down responsively */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 1280px) { .favorites-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .favorites-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 680px)  { .favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }

/* Individual favorite card */
.favorite-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.favorite-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(244, 115, 33, 0.28);
}

/* Image wrapper — anchor for absolute-positioned badges */
.favorite-card .card-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
.favorite-card.model-card .card-image-wrapper {
    aspect-ratio: auto;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.favorite-card:hover .favorite-thumbnail {
    transform: scale(1.04);
}

/* Card info bar below the thumbnail */
.favorite-info {
    padding: 8px 10px 10px;
}
.favorite-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.favorite-title a {
    color: inherit;
    text-decoration: none;
}
.favorite-title a:hover { color: var(--accent); }
.favorite-meta {
    font-size: 11px;
    color: var(--text-mute);
    display: flex;
    gap: 8px;
}

/* Live / offline / HD / viewer badges on the favorite card thumbnail */
.favorite-card .badge-live {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--live);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 2;
}
.favorite-card .badge-offline {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-mute);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 2;
}
.favorite-card .badge-hd {
    position: absolute;
    top: 8px;
    right: 40px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: 0.4px;
    z-index: 2;
}
.favorite-card .badge-viewers {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    z-index: 2;
}

/* Remove-from-favorites heart button on cam/model/video cards (favorites.php).
   On this page every card is by definition a favorite, so hearts render red
   (.active) by default. Clicking removes the card from the list entirely. */
.favorite-btn-cam,
.favorite-btn-model,
.favorite-card .favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    backdrop-filter: blur(4px);
}
.favorite-btn-cam:hover,
.favorite-btn-model:hover,
.favorite-card .favorite-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.1);
}
.favorite-btn-cam .heart-icon,
.favorite-btn-model .heart-icon,
.favorite-card .favorite-btn .heart-icon {
    font-size: 18px;
    line-height: 1;
    font-style: normal;
    font-family: Arial, sans-serif; /* prevent emoji font substitution */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: color 0.15s, transform 0.15s;
}

/* Active = currently favorited → red heart */
.favorite-btn-cam.active .heart-icon,
.favorite-btn-model.active .heart-icon,
.favorite-card .favorite-btn.favorited .heart-icon {
    color: #ff2d55;
    text-shadow: 0 1px 4px rgba(255, 45, 85, 0.6);
}
.favorite-btn-cam:hover .heart-icon,
.favorite-btn-model:hover .heart-icon,
.favorite-card .favorite-btn:hover .heart-icon {
    transform: scale(1.1);
}

/* Empty / icon states used by favorites */
.favorite-card .empty-icon { display: none; } /* guard */
.favorites-content .empty-state {
    grid-column: 1 / -1;
}
.favorites-content .empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 10px 0 4px;
}
.favorites-content .empty-text {
    font-size: 13px;
    color: var(--text-mute);
}

/* Utility */
.hidden, [hidden] { display: none !important; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}