/* ═══════════════════════════════════════════════════════
   ElitCV — Shared candidate-facing component library
   Parallel to admin/admin.css, but for the candidate side
   (marketing, auth, dashboard, settings, cv-builder, ats,
   support), which previously had no shared stylesheet at
   all — every page hand-rolled its own buttons/cards/inputs.

   Load AFTER theme.css and BEFORE a page's own <style> block,
   so page-specific overrides (rare, once migrated) still win.
   Every value here comes from theme.css tokens only — nothing
   page-local — so it renders correctly on any page that links
   it, in any theme/accent/direction.
   ═══════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────
   One primary (accent gradient) and one secondary/ghost
   (bordered, no fill) recipe, converging the ~10 primary and
   ~9 secondary button recipes found across the site. Pattern
   itself is unchanged — it's dashboard.php/settings.php's
   existing, already-closest-to-shared treatment, now with one
   real source instead of two near-identical copies. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  border-radius:var(--radius-lg);
  font-family:inherit;
  font-size:var(--text-button-size); font-weight:var(--text-button-weight); line-height:var(--text-button-line);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:all .25s var(--ease, ease);
}
.btn svg{width:16px; height:16px; flex-shrink:0}
/* Focus and active were missing entirely — every button variant below
   inherits these from the shared base, same --focus-ring every input
   already uses, plus a subtle press-down for :active so clicking gives
   feedback distinct from :hover. */
.btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none}

.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-deep));
  color:var(--ink-on-accent);
  box-shadow:var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 14px 48px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
}

/* .btn-ghost is the same recipe under the name several pages already use
   in their markup (dashboard.php, settings.php) — one rule, two selectors,
   so existing class="btn btn-ghost" usages don't need an HTML rename. */
.btn-secondary, .btn-ghost{
  background:var(--bg-alt);
  border:1px solid var(--line-2);
  color:var(--ink);
}
.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}

.btn-danger{
  background:transparent;
  color:var(--text-mute);
  border:1px solid var(--line-2);
}
.btn-danger:hover:not(:disabled){border-color:var(--danger); color:var(--danger); background:color-mix(in srgb, var(--danger) 8%, transparent)}

/* ── Icon button ──────────────────────────────────────────
   The floating circular theme/language toggle, independently
   authored 4x (login/register/pricing/checkout's .fab-btn,
   support.php's .tb-btn). One shared shape; callers still
   decide their own position (fixed corner, inline, etc). */
.icon-btn{
  width:44px; height:44px; border-radius:50%;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  border:1px solid var(--line-2);
  color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  cursor:pointer;
  transition:all .3s var(--ease, ease);
}
:root[data-theme="dark"] .icon-btn{
  background:color-mix(in srgb, var(--paper-2) 85%, transparent);
  border-color:var(--line-2);
  color:var(--accent-bright);
}
.icon-btn:hover{
  border-color:var(--accent); color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 12px 32px color-mix(in srgb, var(--accent) 35%, transparent);
}
.icon-btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.icon-btn:active{transform:translateY(-1px)}
:root[data-theme="dark"] .icon-btn:hover{color:var(--accent-bright)}

/* Small inline pill toggle (language/theme switch living inline in a
   top bar, not floating) — a second, smaller sibling of .icon-btn for
   the same "toggle" idea in a denser context. Two selectors, one
   recipe: .lang-btn is forgot.php/reset.php's name, .tb-btn is
   support.php's. */
.lang-btn, .tb-btn{
  font-size:11px; font-weight:700;
  color:var(--text-mute);
  background:transparent;
  border:.5px solid var(--line-2);
  padding:5px 12px;
  border-radius:var(--radius-full);
  cursor:pointer;
  font-family:inherit;
  display:inline-flex; align-items:center;
  transition:all .2s;
}
.lang-btn:hover, .tb-btn:hover{border-color:var(--accent); color:var(--accent)}
.lang-btn:focus-visible, .tb-btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.lang-btn:active, .tb-btn:active{transform:scale(.96)}

/* ── Cards ────────────────────────────────────────────────
   Glass-elevated tier for marketing/auth surfaces (frosted,
   heavy shadow) — matches login.php/register.php's existing
   .auth-card, now token-driven instead of hardcoded rgba so
   it actually themes correctly. */
.card-glass{
  background:color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-3);
  position:relative;
}

/* Solid-elevated tier — flat, no blur/heavy-shadow, for simpler forms
   (forgot/reset password) and app surfaces that don't want the glass
   treatment. Matches forgot.php/reset.php's existing card exactly. */
.card-solid{
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:40px;
}

/* ── Inputs ───────────────────────────────────────────────
   One field treatment + one focus-ring, replacing the 3
   incompatible focus treatments found (4px glow-ring on
   login/register/checkout/pricing; a 3px-different-opacity
   ring on settings.php; border-color-only with no ring at
   all on forgot/reset/support/admin). */
/* Two selectors, one recipe: .input is settings.php's existing class name,
   .field input is login.php/register.php/checkout.php/pricing.php's —
   rather than renaming either page's markup onto a third new name. */
.input, .select, .field input{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:var(--radius-md);
  padding:15px 18px;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  transition:all .25s var(--ease, ease);
}
.input::placeholder, .field input::placeholder{color:var(--text-mute)}
.input:focus, .select:focus, .field input:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--paper-2);
  box-shadow:var(--focus-ring);
}
.input[readonly]{opacity:.7; cursor:not-allowed}
.input:disabled, .select:disabled, .field input:disabled{opacity:.6; cursor:not-allowed; background:var(--bg-alt)}

/* ── Tabs / segmented control ─────────────────────────────
   settings.php's tab-btn/seg-btn family was already closest
   to shared across the site — promoted verbatim as the one
   "tabs within a panel" component. (admin's sidebar nav and
   the marketing topbar's underline nav are different
   navigation patterns, not this component, and stay as they
   are — see inventory §3.) */
.tabs{
  display:flex; flex-direction:column; gap:2px;
}
.tab-btn{
  width:100%;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:transparent; border:1px solid transparent;
  color:var(--text-soft);
  font-family:inherit; font-size:var(--text-button-size); font-weight:500; line-height:var(--text-button-line);
  cursor:pointer; text-align:start;
  transition:all .2s ease;
}
.tab-btn:hover{color:var(--ink); background:var(--bg-alt)}
.tab-btn.active{
  color:var(--ink);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border-color:color-mix(in srgb, var(--accent) 25%, transparent);
}

.segment{
  display:inline-flex;
  background:var(--bg-alt);
  border:1px solid var(--line-2);
  border-radius:var(--radius-md);
  padding:4px; gap:2px;
}
.seg-btn{
  padding:8px 16px;
  border-radius:calc(var(--radius-md) - 3px);
  background:transparent; border:none;
  color:var(--text-soft);
  font-family:inherit; font-size:var(--text-label-size); font-weight:600;
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:all .2s ease;
}
.seg-btn:hover:not(.active){color:var(--ink)}
.seg-btn.active{
  background:var(--accent-pale);
  color:var(--accent-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ── Confirm modal ────────────────────────────────────────
   settings.php's icon+header/body/footer structure, adopted
   as the one shared "destructive confirm" pattern site-wide
   (after fixing its light-mode bug in an earlier phase).
   admin's modal keeps its own simpler markup but takes this
   tier's radius/overlay values — see admin.css. */
.modal-bg{
  position:fixed; inset:0;
  background:rgba(5,8,15,.75);
  backdrop-filter:blur(8px);
  z-index:100;
  display:none; align-items:center; justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .25s ease;
}
.modal-bg.open{display:flex; opacity:1}
.modal{
  max-width:460px; width:100%;
  background:var(--paper-2);
  backdrop-filter:blur(24px);
  border:1px solid var(--line-2);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-3);
  transform:scale(.96);
  transition:transform .25s cubic-bezier(.2,.9,.25,1);
}
.modal-bg.open .modal{transform:scale(1)}
.modal-head{
  padding:24px 28px;
  border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; gap:14px;
}
.modal-icon{
  width:40px; height:40px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--danger) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  display:grid; place-items:center;
  color:var(--danger);
  flex-shrink:0;
}
.modal-icon svg{width:20px; height:20px}
.modal-title{font-family:var(--font-display); font-size:var(--text-h3-size); font-weight:var(--text-h3-weight); line-height:var(--text-h3-line)}
.modal-body{padding:24px 28px}
.modal-body p{color:var(--text-soft); margin-bottom:18px; font-size:14px}
.modal-foot{
  padding:16px 28px;
  background:rgba(0,0,0,.2);
  display:flex; gap:10px; justify-content:flex-end;
  flex-wrap:wrap;
}