/* ═══════════════════════════════════════════════════════════════
   SITE THEME SYSTEM — CSS Variables + Preset Overrides
   Generated by admin/settings.php → theme_preset / theme_primary / theme_accent
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE DARK (default) ───────────────────────────────────── */
:root {
  /* Primary & Accent */
  --sp:         #6c5ce7;   /* site primary     */
  --sa:         #a29bfe;   /* site accent      */
  --sp-rgb:     108,92,231;
  --sa-rgb:     162,155,254;

  /* Backgrounds */
  --sb:         #13151f;   /* page background  */
  --sb2:        #1a1d2e;   /* card bg          */
  --sb3:        #222436;   /* elevated card    */
  --sb-input:   rgba(255,255,255,.04);
  --sb-hover:   rgba(255,255,255,.06);

  /* Text */
  --st:         #f0f2f8;   /* primary text     */
  --st2:        rgba(240,242,248,.65); /* secondary */
  --st3:        rgba(240,242,248,.35); /* muted     */
  --st4:        rgba(240,242,248,.18); /* faint     */

  /* Borders */
  --sbr:        rgba(255,255,255,.1);
  --sbr2:       rgba(255,255,255,.06);

  /* Shadows */
  --ssh:        rgba(0,0,0,.4);
  --ssh2:       rgba(0,0,0,.6);

  /* Buttons */
  --btn-txt:    #fff;
  --btn-primary-bg: linear-gradient(135deg,var(--sp),color-mix(in srgb,var(--sp) 70%,#4a3fb5));
  --btn-primary-sh: 0 4px 18px rgba(var(--sp-rgb),.45);

  /* Inputs */
  --inp-bg:     rgba(255,255,255,.04);
  --inp-border: rgba(255,255,255,.12);
  --inp-txt:    #f0f2f8;
  --inp-ph:     rgba(240,242,248,.3);
  --inp-focus:  rgba(var(--sp-rgb),.35);

  /* Contact page specific */
  --ct-hero-bg: rgba(var(--sp-rgb),.08);
  --ct-hero-txt: #f0f2f8;
  --ct-card-bg: rgba(255,255,255,.03);
  --ct-card-border: rgba(255,255,255,.08);
  --ct-icon-circle: rgba(var(--sp-rgb),.15);
  --ct-social-bg: rgba(255,255,255,.05);

  /* is-light flag — 0 = dark, 1 = light (used in JS checks) */
  --is-light: 0;
}

/* ── LIGHT THEME ───────────────────────────────────────────── */
body.theme-light {
  --sb:         #f0f4ff;
  --sb2:        #ffffff;
  --sb3:        #f7f8ff;
  --sb-input:   rgba(0,0,0,.025);
  --sb-hover:   rgba(var(--sp-rgb),.06);

  --st:         #1a1d2e;
  --st2:        rgba(26,29,46,.6);
  --st3:        rgba(26,29,46,.38);
  --st4:        rgba(26,29,46,.15);

  --sbr:        rgba(0,0,0,.1);
  --sbr2:       rgba(0,0,0,.06);

  --ssh:        rgba(0,0,0,.1);
  --ssh2:       rgba(0,0,0,.18);

  --inp-bg:     #ffffff;
  --inp-border: rgba(0,0,0,.15);
  --inp-txt:    #1a1d2e;
  --inp-ph:     rgba(26,29,46,.35);
  --inp-focus:  rgba(var(--sp-rgb),.2);

  --ct-hero-bg: linear-gradient(135deg,#eef3ff 0%,#e8efff 50%,#f0e8ff 100%);
  --ct-hero-txt: #1a1d2e;
  --ct-card-bg: #ffffff;
  --ct-card-border: rgba(0,0,0,.08);
  --ct-icon-circle: rgba(var(--sp-rgb),.12);
  --ct-social-bg: rgba(var(--sp-rgb),.06);

  --btn-primary-sh: 0 4px 18px rgba(var(--sp-rgb),.3);
  --is-light: 1;
}

/* ── BLUE THEME ─────────────────────────────────────────────── */
body.theme-blue {
  --sb:         #050d1f;
  --sb2:        #0c1830;
  --sb3:        #102040;
  --sbr:        rgba(0,120,255,.2);
  --sbr2:       rgba(0,120,255,.1);
  --ct-hero-bg: rgba(0,120,255,.1);
  --ct-icon-circle: rgba(0,120,255,.18);
}

/* ── GREEN THEME ────────────────────────────────────────────── */
body.theme-green {
  --sb:         #05160f;
  --sb2:        #0a2018;
  --sb3:        #0f2820;
  --sbr:        rgba(0,184,100,.2);
  --sbr2:       rgba(0,184,100,.1);
  --ct-hero-bg: rgba(0,184,100,.08);
  --ct-icon-circle: rgba(0,184,100,.18);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL ELEMENT OVERRIDES (apply to all themes via variables)
   ═══════════════════════════════════════════════════════════════ */

/* Page background */
body, .site-layout { background-color: var(--sb) !important; }
.site-bg-overlay { background-color: var(--sb) !important; }

/* Light theme: hide dark bg effects */
body.theme-light .site-bg-gif,
body.theme-light .site-bg-img,
body.theme-light .site-bg-seam { opacity: 0 !important; }

body.theme-light .site-bg-overlay {
  background: var(--sb) !important;
  opacity: 1 !important;
}

/* Sidebar */
body.theme-light .sidebar {
  background: #fff !important;
  border-right-color: rgba(0,0,0,.1) !important;
  box-shadow: 2px 0 20px rgba(0,0,0,.08) !important;
}
body.theme-light .sidebar * { color: var(--st) !important; }
body.theme-light .sb-brand-area { border-bottom-color: rgba(0,0,0,.08) !important; }
body.theme-light .sb-item { color: rgba(26,29,46,.7) !important; }
body.theme-light .sb-item:hover {
  background: rgba(var(--sp-rgb),.08) !important;
  color: var(--sp) !important;
  box-shadow: none !important;
  border-color: rgba(var(--sp-rgb),.2) !important;
}
body.theme-light .sb-item.active,
body.theme-light .sb-item.sb-active {
  background: rgba(var(--sp-rgb),.12) !important;
  color: var(--sp) !important;
}
body.theme-light .sb-item-icon {
  background: rgba(var(--sp-rgb),.1) !important;
  color: var(--sp) !important;
}
body.theme-light .sb-btn-login {
  background: rgba(var(--sp-rgb),.08) !important;
  color: var(--sp) !important;
  border-color: rgba(var(--sp-rgb),.25) !important;
}
body.theme-light .sb-btn-register {
  background: var(--sp) !important;
  color: #fff !important;
  border-color: var(--sp) !important;
  box-shadow: 0 3px 12px rgba(var(--sp-rgb),.35) !important;
}
body.theme-light .sb-user-name { color: #1a1d2e !important; }
body.theme-light .sb-user-email { color: rgba(26,29,46,.5) !important; }
body.theme-light .sb-balance-card {
  background: rgba(var(--sp-rgb),.06) !important;
  border-color: rgba(var(--sp-rgb),.2) !important;
}
body.theme-light .sb-balance-value { color: var(--st) !important; }

/* Topbar */
body.theme-light .topbar {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.08) !important;
}
body.theme-light .topbar-search input {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: #1a1d2e !important;
}
body.theme-light .topbar-search input::placeholder { color: rgba(26,29,46,.35) !important; }

/* Main content area */
body.theme-light .main-content { background: var(--sb) !important; }

/* Cards & product items */
body.theme-light .product-card,
body.theme-light .app-card,
body.theme-light .card,
body.theme-light [class*="card"],
body.theme-light .panel {
  background: var(--sb2) !important;
  border-color: var(--sbr) !important;
  box-shadow: 0 2px 12px var(--ssh) !important;
}
body.theme-light .product-card *, body.theme-light .app-card * { color: var(--st) !important; }
body.theme-light .price,
body.theme-light [class*="price"] { color: var(--sp) !important; }

/* Headings & text */
body.theme-light h1,body.theme-light h2,body.theme-light h3,
body.theme-light h4,body.theme-light h5,body.theme-light h6 { color: var(--st) !important; }
body.theme-light p,body.theme-light span:not([class*="badge"]) { color: var(--st2); }
body.theme-light a { color: var(--sp) !important; }

/* Inputs & forms */
body.theme-light input:not([type=color]):not([type=range]):not([type=radio]):not([type=checkbox]):not([type=submit]),
body.theme-light textarea,
body.theme-light select {
  background: var(--inp-bg) !important;
  border-color: var(--inp-border) !important;
  color: var(--inp-txt) !important;
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder { color: var(--inp-ph) !important; }

/* Buttons — primary stays branded */
body.theme-light .btn,
body.theme-light button:not([class*="adm"]):not([class*="icon"]):not([class*="ct-"]):not([class*="picker"]) {
  background: var(--sb3) !important;
  color: var(--st) !important;
  border-color: var(--sbr) !important;
  box-shadow: 0 2px 8px var(--ssh) !important;
}
body.theme-light .btn-primary,
body.theme-light [class*="btn-primary"],
body.theme-light .contact-submit-btn,
body.theme-light .ct2-submit {
  background: var(--sp) !important;
  color: #fff !important;
  border-color: var(--sp) !important;
  box-shadow: var(--btn-primary-sh) !important;
}

/* Tables */
body.theme-light table th { background: rgba(var(--sp-rgb),.06) !important; color: var(--st) !important; }
body.theme-light table td { color: var(--st) !important; border-color: var(--sbr) !important; }
body.theme-light table tr:hover td { background: rgba(var(--sp-rgb),.04) !important; }

/* Scrollbar */
body.theme-light ::-webkit-scrollbar-track { background: #eef0f8 !important; }
body.theme-light ::-webkit-scrollbar-thumb { background: rgba(var(--sp-rgb),.3) !important; }

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE v2 — Beautiful Layout (All Themes)
   ═══════════════════════════════════════════════════════════════ */

/* Page wrapper */
.ct2-page { max-width:1100px; margin:0 auto; padding:0 16px 60px; }

/* Hero */
.ct2-hero {
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; padding:44px 0 36px;
  background: var(--ct-hero-bg);
  border-radius:20px; margin-bottom:32px; padding:40px 48px;
}
.ct2-hero-left { flex:1; min-width:0; }
.ct2-hero-badge {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--sp); padding:5px 12px; border-radius:20px;
  background:rgba(var(--sp-rgb),.12); border:1px solid rgba(var(--sp-rgb),.25);
  margin-bottom:16px;
}
.ct2-hero-title {
  font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; line-height:1.25;
  color:var(--ct-hero-txt); margin-bottom:12px;
}
.ct2-hero-sub { font-size:.92rem; color:var(--st2); line-height:1.65; margin-bottom:20px; max-width:420px; }
.ct2-hero-line { display:flex; gap:6px; }
.ct2-hero-dot { width:28px; height:4px; border-radius:3px; background:var(--sp); }
.ct2-hero-dot2 { width:8px; height:4px; border-radius:3px; background:rgba(var(--sp-rgb),.3); }
.ct2-hero-dot3 { width:8px; height:4px; border-radius:3px; background:rgba(var(--sp-rgb),.15); }
.ct2-hero-right { flex-shrink:0; }
.ct2-hero-illo { width:200px; height:180px; opacity:.9; }

/* Main 2-column grid */
.ct2-main {
  display:grid; grid-template-columns:300px 1fr; gap:24px; margin-bottom:28px;
}

/* Info cards column */
.ct2-info-col {}
.ct2-info-card {
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 18px; border-radius:14px; margin-bottom:12px;
  background:var(--ct-card-bg); border:1px solid var(--ct-card-border);
  transition:transform .2s,box-shadow .2s;
}
.ct2-info-card:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--ssh); }
.ct2-info-icon {
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ct-icon-circle); font-size:.95rem;
}
.ct2-info-lbl { font-size:.74rem; color:var(--st3); font-weight:600; margin-bottom:3px; text-transform:uppercase; letter-spacing:.06em; }
.ct2-info-val { font-size:.88rem; font-weight:700; color:var(--st); line-height:1.35; }
.ct2-info-sub { font-size:.76rem; color:var(--st3); margin-top:2px; }

/* Form card */
.ct2-form-card {
  background:var(--ct-card-bg); border:1px solid var(--ct-card-border);
  border-radius:20px; padding:30px 28px;
}
.ct2-form-title { font-size:1.3rem; font-weight:800; color:var(--st); margin-bottom:4px; }
.ct2-form-sub { font-size:.83rem; color:var(--st3); margin-bottom:22px; }
.ct2-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.ct2-field { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.ct2-field:last-child { margin-bottom:0; }
.ct2-label { font-size:.77rem; font-weight:600; color:var(--st2); }
.ct2-input {
  padding:11px 14px; border-radius:10px; font-size:.88rem;
  background:var(--inp-bg); border:1.5px solid var(--inp-border);
  color:var(--inp-txt); outline:none; transition:.2s; width:100%; box-sizing:border-box;
}
.ct2-input::placeholder { color:var(--inp-ph); }
.ct2-input:focus { border-color:var(--sp); box-shadow:0 0 0 3px var(--inp-focus); }
.ct2-input-icon { position:relative; }
.ct2-input-icon .ct2-input { padding-left:38px; }
.ct2-input-icon i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--st3); font-size:.84rem; pointer-events:none; }
.ct2-textarea { min-height:126px; resize:vertical; }
.ct2-submit {
  width:100%; padding:13px 20px; border-radius:12px; border:none; cursor:pointer;
  font-size:.92rem; font-weight:700; letter-spacing:.03em;
  background:var(--sp); color:#fff; margin-top:2px;
  box-shadow:var(--btn-primary-sh); transition:transform .18s,box-shadow .18s,opacity .18s;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.ct2-submit:hover { transform:translateY(-2px); opacity:.92; }
.ct2-submit:active { transform:translateY(0); }
.ct2-submit-note { text-align:center; font-size:.74rem; color:var(--st3); margin-top:9px; display:flex; align-items:center; justify-content:center; gap:5px; }

/* Social section */
.ct2-social {
  text-align:center; padding:36px 28px; border-radius:20px; margin-bottom:24px;
  background:var(--ct-social-bg); border:1px solid var(--ct-card-border);
}
.ct2-social-title { font-size:1.05rem; font-weight:800; color:var(--st); margin-bottom:6px; }
.ct2-social-sub { font-size:.82rem; color:var(--st3); margin-bottom:22px; }
.ct2-social-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.ct2-soc-btn {
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; text-decoration:none; color:#fff; transition:.22s;
  box-shadow:0 3px 14px rgba(0,0,0,.25);
}
.ct2-soc-btn:hover { transform:translateY(-4px) scale(1.06); box-shadow:0 8px 24px rgba(0,0,0,.3); }

/* Channels cards (vertical) */
.ct2-channels { margin-bottom:28px; }
.ct2-ch-card {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-radius:14px; margin-bottom:10px;
  text-decoration:none; color:inherit; transition:.22s;
  background:var(--ct-card-bg); border:1px solid var(--ct-card-border);
}
.ct2-ch-card:hover { transform:translateX(4px); box-shadow:0 6px 24px var(--ssh); border-color:rgba(var(--sp-rgb),.25); }
.ct2-ch-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ct2-ch-name { font-size:.9rem; font-weight:700; color:var(--st); }
.ct2-ch-desc { font-size:.77rem; color:var(--st3); margin-top:2px; }
.ct2-ch-arrow { margin-left:auto; color:var(--st3); font-size:.8rem; flex-shrink:0; }

/* Badge channel layout */
.ct2-ch-badge-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.ct2-ch-badge {
  display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:30px;
  text-decoration:none; font-size:.84rem; font-weight:700; transition:.2s;
  border:1px solid; background:rgba(var(--sp-rgb),.04);
}
.ct2-ch-badge:hover { transform:translateY(-2px); opacity:.85; }

/* FAQ CTA */
.ct2-faq {
  display:flex; align-items:center; gap:16px; padding:20px 24px; border-radius:16px;
  background:var(--ct-card-bg); border:1px solid var(--ct-card-border);
}
.ct2-faq-illo { flex-shrink:0; width:56px; height:56px; }
.ct2-faq-title { font-size:.95rem; font-weight:800; color:var(--st); margin-bottom:3px; }
.ct2-faq-sub { font-size:.8rem; color:var(--st3); }
.ct2-faq-btn {
  margin-left:auto; flex-shrink:0; display:flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:10px; border:1.5px solid rgba(var(--sp-rgb),.4);
  color:var(--sp); font-size:.82rem; font-weight:700; text-decoration:none;
  background:rgba(var(--sp-rgb),.08); transition:.18s; white-space:nowrap;
}
.ct2-faq-btn:hover { background:rgba(var(--sp-rgb),.15); border-color:var(--sp); }

/* Responsive */
@media(max-width:768px) {
  .ct2-hero { flex-direction:column; padding:28px 20px; gap:16px; margin-bottom:20px; }
  .ct2-hero-right { display:none; }
  .ct2-hero-title { font-size:1.5rem; }
  .ct2-main { grid-template-columns:1fr; }
  .ct2-form-row { grid-template-columns:1fr; }
  .ct2-form-card { padding:20px 16px; }
  .ct2-faq { flex-wrap:wrap; }
  .ct2-faq-btn { margin-left:0; }
  .ct2-soc-btn { width:46px; height:46px; font-size:1rem; }
}
@media(max-width:480px) {
  .ct2-hero { padding:22px 16px; }
  .ct2-hero-title { font-size:1.3rem; }
  .ct2-form-card { padding:16px 14px; }
  .ct2-info-card { padding:14px 14px; }
}