/* ---------------------------------------------------------------------------
 * theme-ljcam.css — ljcam.com only (config site.theme.css).
 *
 * Loaded LAST, after every shared sheet. Two palettes, keyed on
 * html[data-theme], switched by the header's lights on / lights off button
 * (assets/js/theme.js). The shared CSS is dark-first and uses variables for
 * almost everything, so each palette is mostly a variable set; the rules
 * further down fix the handful of places that hardcode a dark-only colour.
 *
 * LIGHT is the default: it is what ljcam.com has always looked like (white,
 * red logo), and brand searches are half this site's clicks — returning
 * visitors should land on something they recognise. DARK is the same engine
 * look as the sister sites, recoloured to ljcam red.
 *
 * Nothing here touches livesexcam.me or liveporncamx.com: they do not load
 * this file.
 * ------------------------------------------------------------------------ */

/* ---------- LIGHTS OFF (dark) ---------- */
:root, html[data-theme="dark"]{
  --bg:#0F1115; --panel:#15181E; --card:#1A1E26; --header:#12151A;
  --sidebar:#0C0E12; --border:#2A2F3A; --bg-2:#0A0C0F;
  --text:#E8EAEE; --muted:#949AA6;
  --accent:#E5262B; --accent2:#FF4B4F; --accent-deep:#B81D22;
  --live:#FF3B3F; --gold:#F0A035;
  --pink:var(--accent); --pink2:var(--accent2);
  --name:#E8EAEE; --shadow:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}

/* ---------- LIGHTS ON (light, default) ---------- */
html[data-theme="light"]{
  --bg:#FFFFFF; --panel:#FFFFFF; --card:#FFFFFF; --header:#FFFFFF;
  --sidebar:#F6F7F9; --border:#E4E6EB; --bg-2:#EEF0F3;
  --text:#16181D; --muted:#5F6673;
  /* accent2 is DARKER than accent on white (it is the link/hover tone, and a
     light red on white fails contrast); on dark it is the lighter one. */
  --accent:#E5262B; --accent2:#C81E23; --accent-deep:#B81D22;
  --live:#E5262B; --gold:#D98A1C;
  --pink:var(--accent); --pink2:var(--accent2);
  /* Model names in blue, like the WordPress ljcam always had them. */
  --name:#1565C0; --shadow:0 1px 3px rgba(16,24,40,.08);
  color-scheme:light;
}

/* ---------- logo ---------- */
.logo{gap:0}
.logo .logo-img{height:52px;width:auto;display:block}
.top{padding-top:8px;padding-bottom:8px}
.lg-d{display:none !important}
html[data-theme="dark"] .lg-l{display:none !important}
html[data-theme="dark"] .lg-d{display:block !important}
.ft-logo .logo-img{height:40px;width:auto;display:block}
.mb-menu-logo .logo-img{height:34px;width:auto;display:block}
.ag-brand-img{justify-content:center}
.ag-brand-img .logo-img{height:44px;width:auto}

/* ---------- lights toggle ---------- */
.theme-tog{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;border:0;background:none;color:var(--muted);cursor:pointer;padding:0;
  transition:color .15s,background .15s}
.theme-tog:hover{color:var(--accent);background:rgba(229,38,43,.08)}
.theme-tog svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.theme-tog .ti-moon{display:none}
/* In the dark the button offers to turn the lights back ON: show the bulb lit. */
html[data-theme="dark"] .theme-tog .ti-bulb{fill:#F5C542;stroke:#F5C542}

.mb-theme{display:flex;align-items:center;gap:12px;width:100%;margin:8px 0 2px;padding:11px 12px;
  border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);
  font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-align:left}
.mb-theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .mb-theme svg{fill:#F5C542;stroke:#F5C542}

/* ---------- grid: 5 across on desktop ----------
   The WordPress ljcam showed five cards a row and regulars are used to it.
   Fixed counts per band rather than auto-fill, so it is exactly five at any
   normal desktop width; per_page is 50 so every page ends on a full row
   (50 = 10 rows of 5, 25 rows of 2 on phones). */
@media (min-width:1200px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:901px) and (max-width:1199px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- cards ---------- */
.card{box-shadow:var(--shadow)}
.name{color:var(--name)}

/* ---------- fixes for colours the shared CSS hardcodes ---------- */
/* top-models.css reads --txt (not --text) with a near-white fallback, which
   made the active tab and region chip vanish on white. */
:root{--txt:var(--text)}

/* "100% FREE" tab on the performer CTA was the liveporncamx green. */
.pf-badge{background:#16181D !important;color:#fff !important;border-color:#16181D !important}
html[data-theme="dark"] .pf-badge{background:#fff !important;color:#16181D !important;border-color:#fff !important}

/* Age gate: backdrop washes were green; Enter button text used --bg, which is
   near-black in the dark theme (dark text on red). */
.ag-root{background:radial-gradient(1200px 700px at 18% 30%, rgba(229,38,43,.28), transparent 60%),
                    radial-gradient(900px 600px at 85% 80%, rgba(120,20,24,.30), transparent 60%),
                    rgba(10,11,14,.92) !important}
html[data-theme="light"] .ag-root{background:radial-gradient(1200px 700px at 18% 30%, rgba(229,38,43,.14), transparent 60%),
                    rgba(240,242,245,.94) !important}
.ag-enter{color:#fff !important}
.ag-live-dot{background:var(--live) !important;box-shadow:0 0 0 4px rgba(229,38,43,.16) !important}
.ag-promises svg{stroke:var(--accent) !important}
html[data-theme="light"] .ag-card{box-shadow:0 30px 80px rgba(16,24,40,.18) !important}

/* World map ramp — red, dark to bright. world_map.php reads --map-b1..5 from
   THIS file for the country fills (they are data, not CSS), so edit them here
   only. b0 (empty land), hover and stroke are pure CSS and differ per theme. */
:root{
  /* Light-first: more models = deeper red (light is the default theme, and on
     white "paler = fewer" is how people read it). Still separates cleanly from
     the grey land in the dark theme. */
  --map-b1:#F9B4B6; --map-b2:#F27A7D; --map-b3:#E5262B; --map-b4:#B81D22; --map-b5:#7F1418;
  --map-b0:#262A33; --map-hover:#FFFFFF; --map-stroke:#0F1115;
}
html[data-theme="light"]{--map-b0:#E3E6EB; --map-hover:#16181D; --map-stroke:#FFFFFF}

/* ---------- mobile (≤900px) ---------- */
@media (max-width:900px){
  .top .logo{flex:1;display:flex;justify-content:center}
  .top .logo .logo-img{height:38px}
  .theme-tog{width:34px;height:34px}
}
@media (min-width:700px) and (max-width:900px){ .top .logo .logo-img{height:46px} }

/* mobilebar.css was written for dark only: its panels are hardcoded navy and
   its borders are white-alpha, which vanish on white. Lights-on versions: */
@media (max-width:900px){
  html[data-theme="light"] .mb-bar{background:#FFFFFF;border-color:var(--border);
    box-shadow:0 -4px 20px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.12)}
  html[data-theme="light"] .mb-fab-c{border-color:#FFFFFF}
  html[data-theme="light"] .top-icon,
  html[data-theme="light"] .mb-sheet-head-row button,
  html[data-theme="light"] .mb-close,
  html[data-theme="light"] .mb-gender{background:var(--bg-2);border-color:var(--border)}
  html[data-theme="light"] .mb-sheet-head{border-bottom-color:var(--border)}
  html[data-theme="light"] .mb-scrim{background:rgba(16,24,40,.45)}
  html[data-theme="light"] .mb-drawer{border-color:var(--border);box-shadow:0 -10px 30px rgba(16,24,40,.15)}
  html[data-theme="light"] .mb-drawer::before{background:rgba(16,24,40,.2)}
  html[data-theme="light"] .mb-drawer .side-sec{border-color:var(--border);background:#FFFFFF}
  html[data-theme="light"] .mb-drawer .side-list a,
  html[data-theme="light"] .mb-drawer .chip,
  html[data-theme="light"] .mb-sheet-clear{background:var(--bg-2);border-color:var(--border)}
  html[data-theme="light"] .mb-sheet-foot{border-top-color:var(--border)}
  html[data-theme="light"] .mb-menu{border-right-color:var(--border)}
  html[data-theme="light"] .mb-menu-top,
  html[data-theme="light"] .mb-menu-foot{border-color:var(--border)}
  html[data-theme="light"] .mb-menu-body a:active,
  html[data-theme="light"] .mb-gender-menu a:active{background:var(--bg-2)}
  html[data-theme="light"] .mb-gender-menu{border-color:var(--border);box-shadow:0 12px 30px rgba(16,24,40,.15)}
  html[data-theme="light"] .mb-account .mb-login{background:var(--bg-2);border-color:var(--border)}
}
/* The shared mobile CSS tints active/picked states with the sister site's pink
   (rgba 255,45,120). Same effect, ljcam red, both themes. */
@media (max-width:900px){
  .mb-drawer .side-list a.on,
  .mb-menu-body a.is-active,
  .mb-gender-menu a.is-active{background:rgba(229,38,43,.12)}
  .mb-gender.is-picked,
  .mb-chip{background:rgba(229,38,43,.10);border-color:rgba(229,38,43,.5)}
  .mb-account .mb-join{box-shadow:0 8px 20px -6px rgba(229,38,43,.55)}
}
.top-fav:hover{background:rgba(229,38,43,.08)}
@media (max-width:900px){
  /* Selected states must beat the light-mode resets above (same specificity + 1). */
  html[data-theme="light"] .mb-drawer .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
  html[data-theme="light"] .mb-drawer .side-list a.on{background:rgba(229,38,43,.12);border-color:var(--accent);color:var(--accent)}
}

/* Log In hover: header.css turns the text white, which vanished on the white
   header. Red text + red border instead, both themes. */
.btn-login:hover{color:var(--accent);border-color:var(--accent)}
html[data-theme="dark"] .btn-login:hover{color:#fff}

/* Sidebar Gender + Age chips as matching 2x2 grids (desktop sidebar only; the
   mobile filters sheet keeps its own wrapping chip rows). Without this, Age's
   four chips wrapped 3 + 1 and left "40+" alone on a line. */
@media (min-width:901px){
  .sidebar .chipwrap:has(> .chip[data-fkey="gender"]),
  .sidebar .chipwrap:has(> .chip[data-fkey="age"]){display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .sidebar .chipwrap:has(> .chip[data-fkey="gender"]) .chip,
  .sidebar .chipwrap:has(> .chip[data-fkey="age"]) .chip{text-align:center}
}

/* "More countries →" — site.css asks for text-align:center, but .side-list a is
   a flex row with space-between, which wins and pins the text left. */
.side-list a.side-more{justify-content:center}

/* SEO block lists (content/categories.php uses numbered steps and bullet lists
   rather than the sister sites' headed paragraphs). */
.seo-text ol,.seo-text ul{margin:0 0 14px;padding-left:22px}
.seo-text li{margin:0 0 7px}
.seo-text li::marker{color:var(--accent);font-weight:700}
.seo-text b{color:var(--text);font-weight:700}

/* Control bar under the player (performer-player.css hardcodes a navy #12121a).
   Dark: ljcam's neutral panel greys. Light: a light grey strip that joins the
   video to the white page, with white buttons like the rest of the light UI. */
html[data-theme="dark"] .pf-bar{background:#15181E;color:#C9CDD5}
html[data-theme="dark"] .pf-bar-btn{background:#1F242D;color:#E8EAEE}
html[data-theme="light"] .pf-bar{background:#F6F7F9;color:#5F6673;border:1px solid #E4E6EB;border-top:0}
html[data-theme="light"] .pf-bar-btn{background:#FFFFFF;color:#16181D;border-color:#E4E6EB}
html[data-theme="light"] .pf-bar-btn:hover,
html[data-theme="light"] .pf-bar-btn:active{border-color:var(--accent);color:var(--accent)}
/* keep the saved-heart state red (the rules above outrank the shared ones) */
html[data-theme] .pf-bar-fav:is(.is-fav,.faved,.active,[aria-pressed="true"]){border-color:var(--accent);color:var(--accent)}