/* ════════════════════════════════════════════════════
   OnlineKit — base.css
   Single source of truth. Load AFTER nav.css.
   ════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── CSS Variables (light theme) ───────────────────── */
:root {
  --brand:        #2563EB;
  --brand-light:  #3B82F6;
  --brand-dark:   #1D4ED8;
  --brand-pale:   #EFF6FF;
  --brand-mid:    #DBEAFE;
  --brand-glow:   rgba(37,99,235,0.15);
  --indigo:       #6366F1;
  --blue:         #2563EB;
  --blue-light:   #3B82F6;
  --blue-dark:    #1D4ED8;
  --blue-glow:    rgba(37,99,235,0.15);
  --bg:           #FFFFFF;
  --bg-soft:      #F8FAFC;
  --bg2:          #F8FAFC;
  --bg3:          #F1F5F9;
  --card:         #FFFFFF;
  --bg-warm:      #FAFAFA;
  --border:         #E2E8F0;
  --border-subtle:  #F1F5F9;
  --border-light:   #F1F5F9;
  --text:       #0F172A;
  --text-body:  #334155;
  --text-muted: #64748B;
  --text-dim:   #94A3B8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow:    0 4px 16px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.09);
  /* Aliases used by nav.css */
  --brand-bg:   #EFF6FF;
  --body:       #334155;
  --muted:      #64748B;
  --surface:    #F8FAFC;
  --radius-xs:  6px;
  --r:     12px;
  --r-sm:  8px;
  --r-lg:  16px;
  --radius:    14px;
  --radius-sm: 8px;
}

/* ── Dark Mode ──────────────────────────────────────── */
html.dark, body.dark {
  --bg:           #0F172A;
  --bg-soft:      #1E293B;
  --bg2:          #1E293B;
  --bg3:          #1E293B;
  --card:         #1E293B;
  --bg-warm:      #1E293B;
  --border:         #334155;
  --border-subtle:  #1E293B;
  --border-light:   rgba(255,255,255,0.06);
  --text:       #F1F5F9;
  --text-body:  #CBD5E1;
  --text-muted: #94A3B8;
  --text-dim:   #64748B;
  --brand-pale:  rgba(37,99,235,0.12);
  --brand-mid:   rgba(37,99,235,0.2);
  --brand-glow:  rgba(37,99,235,0.25);
  --blue-glow:   rgba(37,99,235,0.25);
  --brand-bg:   rgba(37,99,235,0.12);
  --body:       #CBD5E1;
  --muted:      #94A3B8;
  --surface:    #1E293B;
}

/* ── Base Body ─────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background-color 0.2s, color 0.2s;
}

/* ── Footer ────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); padding: 28px 24px; background: var(--bg); }
.footer-row { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
footer p, footer a { font-size: 13px; color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: 20px; }

/* ── Share Modal ───────────────────────────────────── */
.share-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 400; align-items: center; justify-content: center; }
.share-overlay.open { display: flex; }
.share-modal { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px 20px; width: 90%; max-width: 380px; box-shadow: 0 24px 64px rgba(0,0,0,0.2); position: relative; }
.share-close-btn { position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; z-index: 10; }
.share-close-btn:hover { background: var(--border); }
.share-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 20px; text-align: center; }
.shr-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border: none; background: transparent; border-radius: 10px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--text); transition: background 0.12s; text-align: left; margin-bottom: 2px; }
.shr-row:hover { background: var(--bg-soft); }
.shr-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Select ────────────────────────────────────────── */
select { -webkit-appearance: none; appearance: none; background-color: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 40px 10px 14px; font-size: 14px; font-family: inherit; color: var(--text); cursor: pointer; width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.2s, box-shadow 0.2s; line-height: 1.5; outline: none; }
select:hover { border-color: var(--brand); }
select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
html.dark select, body.dark select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }

/* ── Inputs ────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="url"], input[type="number"], textarea { background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 14px; width: 100%; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
textarea { resize: vertical; }

/* ── FAQ Accordion ─────────────────────────────────── */
.faq-item { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.faq-q { width: 100%; background: none; border: none; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; transition: background 0.15s; }
.faq-q:hover { background: var(--bg-soft); }
.faq-arr, .arr { color: var(--text-dim); font-size: 11px; flex-shrink: 0; transition: transform 0.2s; }
.faq-q.open .faq-arr, .faq-q.open .arr { transform: rotate(180deg); }
.faq-a { font-size: 14px; color: var(--text-body); line-height: 1.7; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-a.open { max-height: 300px; padding: 0 22px 18px; }