/* =============================================================================
   cams_site_myfreecams theme — MyFreeCams-inspired live cam site
   Matches MFC's actual palette: light gray body, black header,
   dark-green accent, RebeccaPurple buttons, yellow hover, Verdana type.
   ============================================================================= */

:root {
    /* MFC body — #DDDDDD light gray */
    --bg-0: #dddddd;        /* page background (MFC's actual body color) */
    --bg-1: #ffffff;        /* card / content surface */
    --bg-2: #f2f2f2;        /* secondary surface (sidebars, panels) */
    --bg-3: #e8e8e8;        /* input / hover surface */
    --bg-4: #d0d0d0;        /* deeper hover */
    --border: #bbbbbb;
    --border-strong: #888888;

    /* Text — black on light (MFC's default) */
    --text: #000000;
    --text-dim: #333333;
    --text-mute: #666666;

    /* Header — MFC's near-black bar with white text and yellow hover */
    --header-bg: #1a1a1a;
    --header-bg-2: #2a2a2a;
    --header-text: #ffffff;
    --header-text-dim: #cccccc;
    --header-hover: #ffff00;    /* MFC's signature yellow hover */

    /* Primary accent — MFC's #008000 dark green */
    --accent: #008000;
    --accent-hov: #00a000;
    --accent-dim: #006600;
    --accent-soft: rgba(0, 128, 0, 0.10);

    /* RebeccaPurple — MFC's button color for secondary actions */
    --secondary: #663399;
    --secondary-hov: #7a3fb3;

    /* Live red — distinct from green so LIVE badges pop */
    --live: #cc0000;
    --online: #008000;          /* same as accent — MFC uses green for online */
    --gold: #ffcc00;            /* used sparingly for premium/tip indicators */

    --radius: 4px;
    --radius-lg: 6px;
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);

    --header-h: 58px;
    --subnav-h: 40px;
    --sidebar-w: 210px;

    /* MFC explicitly uses Verdana — keep it first in the stack */
    --font: Verdana, Geneva, Tahoma, Arial, "Helvetica Neue", Helvetica, 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: 10px;
    border-bottom: 2px solid var(--accent);
}
.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 — MFC uses very 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 var(--border-strong);
    background: #ffffff;
    color: var(--text);
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    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-3); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Primary = MFC green */
.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-style "site button" = MFC RebeccaPurple */
.btn-secondary, .site-button, .site_button {
    background: var(--secondary);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 10px;
}
.btn-secondary:hover, .site-button:hover, .site_button:hover {
    background: var(--secondary-hov);
    color: #fff;
}

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

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--accent); background: transparent; text-decoration: underline; }

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

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

.card {
    background: #ffffff;
    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;
    box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 128, 0, 0.25); }
.card-body { padding: 10px 12px; }

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--header-bg);
    color: var(--header-text);
    border-bottom: 3px solid var(--accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    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; }

/* MFC green "badge" — bold square with white "MFC" letters */
.site-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.5px;
    padding: 6px 9px;
    border-radius: 3px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    font-family: Verdana, Arial, sans-serif;
}

.site-logo-main {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--header-text);
    line-height: 1;
    font-family: Verdana, Arial, sans-serif;
}
.site-logo-main em {
    color: var(--accent);
    font-style: normal;
    font-weight: 900;
}
.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 12px;
    color: var(--header-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 0;
    white-space: nowrap;
    transition: color 0.1s;
}
.main-nav > a:hover,
.main-nav .nav-link:hover {
    color: var(--header-hover);
    text-decoration: underline;
    background: transparent;
}
.main-nav > a.active,
.main-nav .nav-link.active {
    color: var(--header-hover);
    background: transparent;
}

.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 header, so override the default light .btn styling to be
   transparent-with-white-text like a classic MFC header link. */
.site-header .user-menu .btn {
    padding: 6px 14px;
    font-size: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
}
.site-header .user-menu .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--header-hover);
    color: var(--header-hover);
    text-decoration: none;
}
/* Primary CTA button (Register / Sign Up) — MFC green */
.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: #ffffff;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    padding: 0 10px;
    flex: 0 1 300px;
    min-width: 160px;
    height: 32px;
}
.header-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.25);
}
.header-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #000;
    font-size: 12px;
    padding: 0 6px;
    font-family: var(--font);
}
.header-search input::placeholder { color: #888; }
.header-search button {
    background: transparent;
    border: 0;
    color: #666;
    font-size: 13px;
}
.header-search button:hover { color: var(--accent); }

/* Gender tabs sub-nav — MFC-style: plain tabs with green underline on active */
.gender-tabs {
    background: #2a2a2a;
    border-bottom: 1px solid #1a1a1a;
    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: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    font-family: var(--font);
    transition: color 0.1s, border-color 0.1s;
}
.gender-tab:hover {
    color: var(--header-hover);
    text-decoration: none;
}
.gender-tab.active {
    color: var(--header-hover);
    border-bottom-color: var(--accent);
    background: #1a1a1a;
}

/* 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: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    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: #fff;
    background: var(--accent);
    margin: 0 -12px 8px;
    padding: 6px 12px;
}
.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: #f0f8f0; color: var(--accent); }
.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: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s, border-color 0.1s, box-shadow 0.12s;
}
.cam-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 4px 14px rgba(0, 128, 0, 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: 6px;
    left: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--accent-dim);
}
.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: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: #ffffff;
}
.cam-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);  /* MFC uses link-blue for usernames */
    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 8px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-height: 20px;
    background: #ffffff;
}
.cam-tags .tag-mini {
    font-size: 10px;
    color: #666;
    background: #eeeeee;
    padding: 2px 5px;
    border-radius: 2px;
}
.cam-tags .tag-mini:hover { color: var(--accent); background: #e0f0e0; }

/* 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(0, 128, 0, 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: #fde8e8; border-color: var(--live); color: #8a1010; }
.alert-success { background: rgba(18,192,106,0.12); border-color: var(--online); color: #c6f5db; }
.alert-info { background: rgba(58,123,213,0.12); border-color: #3a7bd5; color: #cfe0ff; }

.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(0, 128, 0, 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(0, 128, 0, 0.2); }
.schedule-heatmap .slot.level-2 { background: rgba(0, 128, 0, 0.45); }
.schedule-heatmap .slot.level-3 { background: rgba(0, 128, 0, 0.6); }
.schedule-heatmap .slot.level-4 { background: rgba(0, 128, 0, 0.8); }
.schedule-heatmap .slot.level-5 { background: rgba(0, 128, 0, 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(0, 128, 0, 0.2); }
.schedule-legend .legend-box.level-2 { background: rgba(0, 128, 0, 0.45); }
.schedule-legend .legend-box.level-3 { background: rgba(0, 128, 0, 0.6); }
.schedule-legend .legend-box.level-4 { background: rgba(0, 128, 0, 0.8); }
.schedule-legend .legend-box.level-5 { background: rgba(0, 128, 0, 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(0, 128, 0, 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(0, 128, 0, 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(0, 128, 0, 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;
}