/* ===========================================================
   Shared theme system — toggle button + light-mode overrides
   Works with theme.js (sets html[data-theme]). Dark is default.
   =========================================================== */

/* ---- Theme toggle button (visible in both modes) ---- */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:34px;min-width:38px;padding:0;line-height:1;
  border-radius:9px;cursor:pointer;color:#9aa0b4;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:background .2s,color .2s,border-color .2s;
}
.theme-btn:hover{color:#eef0f7;border-color:rgba(255,255,255,.25)}
.theme-btn svg{width:17px;height:17px;display:block}

/* Pages where the language button is pinned to a top corner (checkout,
   thank-you): pin the theme button right beside it. */
body > .theme-btn{position:fixed;top:16px;inset-inline-end:60px;z-index:50}

/* ===================== LIGHT MODE ===================== */
html[data-theme="light"]{
  /* void family (legal / checkout / account / thank-you) */
  --void:#F4F5FA;
  --text:#1b1e2a;
  --muted:#565A70;
  --line:rgba(16,18,40,.12);
  /* ultimate-tools family */
  --bg:#F4F5FA;
  --surface:#ffffff;
  --panel:#ffffff;
  --border:rgba(16,18,40,.12);
  /* index / product family */
  --ink:#161822;
  --muted-2:#7B7F95;
  --glass:rgba(16,18,40,.035);
  --glass-line:rgba(16,18,40,.10);
  --glass-line-2:rgba(16,18,40,.16);
  /* ultimate-tools deep surfaces — the dark end of the gradients on the
     problem card / price card, plus the FAQ band + faint tool-card borders.
     Without light values these stayed dark and killed contrast on light. */
  --bg-2:#EEF0F7;
  --surface-2:#ffffff;
  --border-soft:rgba(16,18,40,.06);
  --panel-2:#F7F8FC;
  --panel2:#F7F8FC;
  --sidebar:#ffffff;
  /* guide family (already light — keep) */
  --content-bg:#ffffff;
}

html[data-theme="light"] body{
  background:var(--void,#F4F5FA);
  color:var(--text,#1b1e2a);
}

/* nav / header surfaces */
html[data-theme="light"] header,
html[data-theme="light"] nav.nav{
  background:rgba(255,255,255,.82)!important;
  border-bottom-color:rgba(16,18,40,.10)!important;
}

/* primary surfaces / cards / panels */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .surface,
html[data-theme="light"] .dl-card,
html[data-theme="light"] .lic,
html[data-theme="light"] .keyrow,
html[data-theme="light"] .box,
html[data-theme="light"] .tool,
html[data-theme="light"] .prod-card,
html[data-theme="light"] .feature-card{
  background:#ffffff!important;
  border-color:rgba(16,18,40,.10)!important;
}
html[data-theme="light"] .card{box-shadow:0 24px 60px rgba(16,18,40,.10)!important}

/* form fields */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{
  background:#ffffff!important;
  border-color:rgba(16,18,40,.16)!important;
  color:#1b1e2a!important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#8a8fa3!important}

/* small controls (lang + theme buttons) */
html[data-theme="light"] .lang,
html[data-theme="light"] .lang-dd-btn,
html[data-theme="light"] .theme-btn{
  background:rgba(16,18,40,.04)!important;
  border-color:rgba(16,18,40,.12)!important;
  color:#565A70!important;
}
html[data-theme="light"] .theme-btn:hover,
html[data-theme="light"] .lang:hover{color:#161822!important;border-color:rgba(16,18,40,.30)!important}
html[data-theme="light"] .nav-item:hover{background:rgba(16,18,40,.05)!important}

/* keep accent gradient text vivid on light */
html[data-theme="light"] .accent,
html[data-theme="light"] .grad,
html[data-theme="light"] h1 .grad{
  background:linear-gradient(110deg,#5a5cf0,#1f95cc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* muted helpers */
html[data-theme="light"] .sub,
html[data-theme="light"] .muted{color:var(--muted)!important}

/* plain content text (legal pages, docs, etc.) — .accent/.grad keep their
   gradient because their class selector out-specifies these element rules */
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4{color:#1b1e2a!important}
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] td,
html[data-theme="light"] dd{color:#3a3e4f!important}
html[data-theme="light"] strong,
html[data-theme="light"] b{color:#161822!important}
html[data-theme="light"] a:not(.btn):not(.brand):not(.nav-item){color:#4b4ee0}

/* ultimate-tools: secondary hero button text was near-white (low contrast on light) */
html[data-theme="light"] .hero-secondary{
  background:rgba(16,18,40,.04)!important;
  color:#3a3d4d!important;
  border-color:rgba(138,140,255,.50)!important;
}
html[data-theme="light"] .hero-secondary:hover{ color:#161822!important; }

/* pricing card: feature rows used a fixed dark-mode lavender (#d8d3ec) that
   vanished on the now-light card — give them readable body text on light */
html[data-theme="light"] .price-feats li{color:#3a3e4f!important}

/* ===========================================================
   One global status bar — populated by site-global.js
   =========================================================== */
.up-status-bar{
  min-height:38px;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:115;padding:8px 44px;text-align:center;
  background:linear-gradient(90deg,rgba(138,140,255,.20),rgba(94,200,232,.18)),rgba(8,8,12,.96);
  border-bottom:1px solid rgba(255,255,255,.10);color:#eef0f7;
  font:700 12.5px/1.45 "Inter","Tajawal",system-ui,sans-serif;
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)
}
.up-status-link{color:inherit!important;text-decoration:none}
.up-status-link:hover{color:#fff!important}
.up-status-close{
  position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  padding:2px 5px;border:0;background:transparent;color:#a8aabc;
  font-size:19px;line-height:1;cursor:pointer
}
.up-status-close:hover{color:#fff}
html[data-theme="light"] .up-status-bar{
  background:linear-gradient(90deg,rgba(138,140,255,.14),rgba(94,200,232,.14)),#fff;
  border-bottom-color:rgba(16,18,40,.10);color:#202231
}
html[data-theme="light"] .up-status-link:hover{color:#000!important}
html[data-theme="light"] .up-status-close{color:#6d7083}

/* Floating fallback used only on pages that do not provide a theme control. */
.up-floating-theme{position:fixed!important;top:52px!important;inset-inline-end:16px!important;z-index:108!important}

/* Ultimate Create Layers product + guide light surfaces. */
html[data-theme="light"] .topbar,
html[data-theme="light"] .sidebar{background:rgba(255,255,255,.94)!important}
html[data-theme="light"] .quick-card,
html[data-theme="light"] .option,
html[data-theme="light"] .action,
html[data-theme="light"] .shortcut,
html[data-theme="light"] .step,
html[data-theme="light"] .shot,
html[data-theme="light"] .compare-card,
html[data-theme="light"] .feature,
html[data-theme="light"] .stat{
  background:#fff!important;border-color:rgba(16,18,40,.11)!important
}
html[data-theme="light"] .compare-card.good,
html[data-theme="light"] .download-box,
html[data-theme="light"] .support,
html[data-theme="light"] .side-card{
  background:linear-gradient(145deg,rgba(138,140,255,.11),rgba(94,200,232,.055))!important
}
html[data-theme="light"] .panel-shell,
html[data-theme="light"] .showcase-shot{
  background:linear-gradient(145deg,rgba(16,18,40,.08),rgba(16,18,40,.025))!important;
  border-color:rgba(16,18,40,.13)!important
}
html[data-theme="light"] .chip,
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .pill{
  background:rgba(16,18,40,.035)!important;color:#303344!important;border-color:rgba(16,18,40,.12)!important
}
html[data-theme="light"] .panel-label{background:rgba(255,255,255,.94)!important;color:#565A70!important}
html[data-theme="light"] .side-title,
html[data-theme="light"] .nav-label{color:#65697c!important}
html[data-theme="light"] .side-link:hover,
html[data-theme="light"] .side-link.active{color:#171925!important;background:rgba(138,140,255,.11)!important}
html[data-theme="light"] kbd{background:#fff!important;color:#272a38!important;border-color:rgba(16,18,40,.18)!important}

/* Admin page light-mode details. */
html[data-theme="light"] .savebar{background:rgba(255,255,255,.90)!important;border-top-color:rgba(16,18,40,.12)!important}
html[data-theme="light"] .sec-item,
html[data-theme="light"] .sec-block,
html[data-theme="light"] .navtoggles label{background:rgba(16,18,40,.025)!important}