/* =====================================================================
   ACA Quote-Engine Theme Skins
   ---------------------------------------------------------------------
   Six self-contained visual systems for the ACA Health / Dental quote
   wizard, the App-Request (finalize) step and the Thank-You step.

   Each skin is a `.aca-skin-{name}` class placed alongside the
   `.aca-skinned` flag on a wrapper element. The skin only sets CSS
   custom properties + a handful of signature overrides; the shared
   component rules below consume those tokens, so the wizard's HTML
   structure and its JavaScript hooks never change.

   Result-card themes (the plan comparison cards) are styled inline in
   their own Blade views and intentionally do NOT depend on this file.

   Skins:  lumina · hearth · obsidian · vivid · zenith · chronicle
   ===================================================================== */

/* ───────────────────────── Palette tokens ───────────────────────── */

.aca-skin-lumina {
    --primary:#0052FF; --primary-d:#003ECC; --accent:#E5EFFF; --success:#00C853;
    --page:#F8FAFC; --card:#FFFFFF; --border:#E2E8F0; --text:#0F172A; --muted:#64748B;
    --head-font:'Outfit',sans-serif; --body-font:'Inter',sans-serif;
    --radius:10px; --radius-sm:8px; --btn-radius:10px;
    --shadow:0 1px 2px rgba(15,23,42,.05); --card-shadow:none; --card-border-w:1px;
}
.aca-skin-hearth {
    --primary:#2D5A27; --primary-d:#234A1F; --accent:#F4A261; --success:#7FB069;
    --page:#FFFBF5; --card:#FFFFFF; --border:#E9E3D8; --text:#3C2F2F; --muted:#8D8172;
    --head-font:'Plus Jakarta Sans',sans-serif; --body-font:'Plus Jakarta Sans',sans-serif;
    --radius:22px; --radius-sm:16px; --btn-radius:9999px;
    --shadow:0 10px 24px -12px rgba(60,47,47,.25); --card-shadow:0 12px 30px -18px rgba(60,47,47,.30); --card-border-w:1px;
}
.aca-skin-obsidian {
    --primary:#6366F1; --primary-d:#4F46E5; --accent:#A5B4FC; --success:#10B981;
    --page:#0F172A; --card:#1E293B; --border:#334155; --text:#F8FAFC; --muted:#94A3B8;
    --head-font:'Sora',sans-serif; --body-font:'IBM Plex Sans',sans-serif;
    --radius:14px; --radius-sm:10px; --btn-radius:12px;
    --shadow:0 20px 25px -5px rgba(0,0,0,.5); --card-shadow:0 20px 40px -12px rgba(0,0,0,.55); --card-border-w:1px;
}
.aca-skin-vivid {
    --primary:#111111; --primary-d:#000000; --accent:#FFB400; --success:#16A34A;
    --page:#FFFEF7; --card:#FFFFFF; --border:#111111; --text:#111111; --muted:#555555;
    --head-font:'Space Grotesk',sans-serif; --body-font:'Space Grotesk',sans-serif;
    --radius:6px; --radius-sm:4px; --btn-radius:6px;
    --shadow:none; --card-shadow:5px 5px 0 #111111; --card-border-w:2px;
}
.aca-skin-zenith {
    --primary:#7C3AED; --primary-d:#6D28D9; --accent:#F5F3FF; --success:#34D399;
    --page:#FAF5FF; --card:#FFFFFF; --border:#EDE9FE; --text:#1E1B4B; --muted:#8B86A8;
    --head-font:'Quicksand',sans-serif; --body-font:'Quicksand',sans-serif;
    --radius:18px; --radius-sm:14px; --btn-radius:9999px;
    --shadow:0 10px 15px -3px rgba(124,58,237,.12); --card-shadow:0 18px 40px -16px rgba(124,58,237,.22); --card-border-w:1px;
}
.aca-skin-chronicle {
    --primary:#1B263B; --primary-d:#0D1B2A; --accent:#415A77; --success:#415A77;
    --page:#F0EFEB; --card:#FFFFFF; --border:#1B263B; --text:#0D1B2A; --muted:#778DA9;
    --head-font:'Playfair Display',serif; --body-font:'Montserrat',sans-serif;
    --radius:2px; --radius-sm:2px; --btn-radius:2px;
    --shadow:none; --card-shadow:0 1px 0 #1B263B; --card-border-w:1px;
}

/* ── Second wave: coral / sky / sand / mint / slate / berry ── */
.aca-skin-coral {
    --primary:#E11D48; --primary-d:#BE123C; --accent:#FFE4E6; --success:#15803D;
    --page:#FFF5F6; --card:#FFFFFF; --border:#FECDD3; --text:#4C0519; --muted:#9F1239;
    --head-font:'Plus Jakarta Sans',sans-serif; --body-font:'Plus Jakarta Sans',sans-serif;
    --radius:16px; --radius-sm:12px; --btn-radius:9999px;
    --shadow:0 8px 20px -14px rgba(225,29,72,.30); --card-shadow:0 12px 30px -18px rgba(225,29,72,.30); --card-border-w:1px;
}
.aca-skin-sky {
    --primary:#0284C7; --primary-d:#0369A1; --accent:#E0F2FE; --success:#0E9F6E;
    --page:#F0F9FF; --card:#FFFFFF; --border:#BAE6FD; --text:#0C2A3E; --muted:#5B7B91;
    --head-font:'Outfit',sans-serif; --body-font:'Inter',sans-serif;
    --radius:14px; --radius-sm:10px; --btn-radius:10px;
    --shadow:0 6px 16px -12px rgba(2,132,199,.30); --card-shadow:0 12px 28px -16px rgba(2,132,199,.28); --card-border-w:1px;
}
.aca-skin-sand {
    --primary:#92400E; --primary-d:#78350F; --accent:#FEF3C7; --success:#4D7C0F;
    --page:#FBF7F0; --card:#FFFFFF; --border:#E7DCC8; --text:#3F2D1A; --muted:#8A7A63;
    --head-font:'Montserrat',sans-serif; --body-font:'Montserrat',sans-serif;
    --radius:8px; --radius-sm:6px; --btn-radius:6px;
    --shadow:0 6px 16px -12px rgba(120,53,15,.28); --card-shadow:0 12px 28px -18px rgba(120,53,15,.30); --card-border-w:1px;
}
.aca-skin-mint {
    --primary:#0D9488; --primary-d:#0F766E; --accent:#CCFBF1; --success:#059669;
    --page:#F0FDFA; --card:#FFFFFF; --border:#99F6E4; --text:#134E4A; --muted:#5E8079;
    --head-font:'Quicksand',sans-serif; --body-font:'Quicksand',sans-serif;
    --radius:22px; --radius-sm:16px; --btn-radius:9999px;
    --shadow:0 8px 20px -14px rgba(13,148,136,.28); --card-shadow:0 14px 32px -18px rgba(13,148,136,.30); --card-border-w:1px;
}
.aca-skin-slate {
    --primary:#334155; --primary-d:#1E293B; --accent:#E2E8F0; --success:#0EA5E9;
    --page:#F8FAFC; --card:#FFFFFF; --border:#CBD5E1; --text:#0F172A; --muted:#64748B;
    --head-font:'Sora',sans-serif; --body-font:'IBM Plex Sans',sans-serif;
    --radius:10px; --radius-sm:8px; --btn-radius:8px;
    --shadow:0 6px 16px -12px rgba(51,65,85,.26); --card-shadow:0 12px 28px -16px rgba(51,65,85,.28); --card-border-w:1px;
}
.aca-skin-berry {
    --primary:#A21CAF; --primary-d:#86198F; --accent:#FCE7F3; --success:#16A34A;
    --page:#FDF4FF; --card:#FFFFFF; --border:#F5D0FE; --text:#4A044E; --muted:#86198F;
    --head-font:'Sora',sans-serif; --body-font:'Inter',sans-serif;
    --radius:18px; --radius-sm:14px; --btn-radius:9999px;
    --shadow:0 8px 20px -14px rgba(162,28,175,.30); --card-shadow:0 14px 32px -18px rgba(162,28,175,.30); --card-border-w:1px;
}

/* ───────────────────────── Shared shell ─────────────────────────── */

.aca-skinned {
    font-family:var(--body-font);
    color:var(--text);
}
.aca-skinned * { font-family:inherit; }

/* Outer "card" Bootstrap wraps the whole wizard — neutralise it so the
   skin owns the background. */
.aca-skinned.aca-skin-wrap,
.aca-skinned .aca-outer-card {
    background:var(--page) !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Header band (title + subtitle) */
.aca-skinned .aca-head {
    background:var(--primary);
    border-radius:var(--radius);
    padding:1.5rem 1.25rem;
    margin-bottom:1.25rem;
    text-align:center;
    position:relative;
}
.aca-skinned .aca-head h4 {
    font-family:var(--head-font);
    font-weight:700;
    color:#fff;
    margin:0 0 .25rem;
    letter-spacing:-.01em;
}
.aca-skinned .aca-head p { color:rgba(255,255,255,.85); margin:0; font-size:1rem; }

/* Wizard panel that surrounds the step cards */
.aca-skinned .aca-wizard-shell { background:var(--page) !important; padding:.5rem 0 !important; }

/* Step cards */
.aca-skinned .aca.card,
.aca-skinned .aca-step-card {
    background:var(--card);
    color:var(--text);
    border:var(--card-border-w) solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--card-shadow);
}
.aca-skinned .aca.card .card-body { color:var(--text); }

/* Typography inside steps */
.aca-skinned label,
.aca-skinned .form-label,
.aca-skinned .form-check-label { color:var(--text); }
.aca-skinned .card-body > p,
.aca-skinned .text-muted { color:var(--muted) !important; }
.aca-skinned h4, .aca-skinned h5, .aca-skinned h6 { font-family:var(--head-font); }

/* Inputs */
.aca-skinned .form-control,
.aca-skinned .form-select {
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:.6rem .85rem;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.aca-skinned .form-control::placeholder { color:var(--muted); opacity:.7; }
.aca-skinned .form-control:focus,
.aca-skinned .form-select:focus {
    border-color:var(--primary);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
    outline:0;
}
.aca-skinned .input-group-text {
    background:var(--accent);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}

/* Radio / check rows rendered as tappable tiles */
.aca-skinned .form-check {
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:.6rem .75rem .6rem 2.25rem;
    margin-bottom:.5rem;
    transition:border-color .15s ease, background .15s ease;
}
.aca-skinned .form-check:hover { border-color:var(--primary); }
.aca-skinned .form-check-input:checked {
    background-color:var(--primary);
    border-color:var(--primary);
}
.aca-skinned .form-check-input:focus {
    box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
    border-color:var(--primary);
}

/* Buttons — the wizard mixes .btn-primary / .btn-success / .next / .prev */
.aca-skinned .btn {
    font-family:var(--head-font);
    font-weight:600;
    border-radius:var(--btn-radius);
    padding:.6rem 1.4rem;
    letter-spacing:.01em;
    transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.aca-skinned .btn-primary,
.aca-skinned .btn-success,
.aca-skinned .next {
    background:var(--primary);
    border:var(--card-border-w) solid var(--primary);
    color:#fff;
}
.aca-skinned .btn-primary:hover,
.aca-skinned .btn-success:hover,
.aca-skinned .next:hover { filter:brightness(.94); }
.aca-skinned .btn-secondary,
.aca-skinned .prev {
    background:transparent;
    border:1px solid var(--border);
    color:var(--muted);
}
.aca-skinned .btn-secondary:hover,
.aca-skinned .prev:hover { border-color:var(--primary); color:var(--primary); background:transparent; }

/* Validation helper text */
.aca-skinned .checkbox-radio-message,
.aca-skinned .text-danger { color:#DC2626; }

/* ── Finalize (App Request) + Thank-You blocks share the shell ── */
.aca-skinned .aca-finalize .card-body,
.aca-skinned .aca-thank-you .card-body { color:var(--text); }
.aca-skinned .aca-thank-you .aca-ty-emoji {
    width:84px;height:84px;border-radius:9999px;
    display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
    background:color-mix(in srgb, var(--success) 16%, var(--card));
    color:var(--success);font-size:2.5rem;
}
.aca-skinned .aca-thank-you h4 { font-family:var(--head-font); color:var(--success); }

/* ─────────────────── Per-skin signature overrides ───────────────── */

/* Lumina — slim accent bar under the header */
.aca-skin-lumina .aca-head {
    background:linear-gradient(135deg,#0052FF,#3B7BFF);
}
.aca-skin-lumina .aca.card { box-shadow:none; }

/* Hearth — squircle warmth, sand-coloured accents on buttons hover */
.aca-skin-hearth .aca-head { background:linear-gradient(135deg,#2D5A27,#3B7A33); }
.aca-skin-hearth .aca-head::after {
    content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
    width:64px;height:4px;border-radius:9999px;background:var(--accent);
}
.aca-skin-hearth .form-check { background:#FFFDFA; }

/* Obsidian — premium dark, glowing focus + pulsing primary */
.aca-skin-obsidian .aca-head { background:linear-gradient(135deg,#1E293B,#312E81); border:1px solid #334155; }
.aca-skin-obsidian .form-check { background:#172033; }
.aca-skin-obsidian .next,
.aca-skin-obsidian .btn-primary,
.aca-skin-obsidian .btn-success { box-shadow:0 0 0 0 rgba(99,102,241,.6); animation:acaObsidianPulse 2.4s infinite; }
@keyframes acaObsidianPulse {
    0%{box-shadow:0 0 0 0 rgba(99,102,241,.5);}
    70%{box-shadow:0 0 0 12px rgba(99,102,241,0);}
    100%{box-shadow:0 0 0 0 rgba(99,102,241,0);}
}
.aca-skin-obsidian .form-control:focus,
.aca-skin-obsidian .form-select:focus { box-shadow:0 0 0 3px rgba(99,102,241,.35); }

/* Vivid — neo-brutalist hard shadows + uppercase labels */
.aca-skin-vivid .aca-head { background:var(--accent); border:2px solid #111; box-shadow:5px 5px 0 #111; }
.aca-skin-vivid .aca-head h4 { color:#111; text-transform:uppercase; letter-spacing:.02em; }
.aca-skin-vivid .aca-head p  { color:#111; opacity:.8; }
.aca-skin-vivid .form-label { text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; font-weight:700; }
.aca-skin-vivid .btn-primary,
.aca-skin-vivid .btn-success,
.aca-skin-vivid .next { background:var(--accent); color:#111; box-shadow:4px 4px 0 #111; }
.aca-skin-vivid .btn-primary:hover,
.aca-skin-vivid .btn-success:hover,
.aca-skin-vivid .next:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 #111; filter:none; }
.aca-skin-vivid .form-check { border-width:2px; }

/* Zenith — full-pill, soft pastel surfaces */
.aca-skin-zenith .aca-head { background:linear-gradient(135deg,#7C3AED,#A855F7); }
.aca-skin-zenith .form-check { background:var(--accent); border-color:transparent; }
.aca-skin-zenith .form-check:hover { border-color:var(--primary); }
.aca-skin-zenith .form-control,
.aca-skin-zenith .form-select { background:#FCFAFF; }

/* Chronicle — editorial serif, rule lines, restrained */
.aca-skin-chronicle .aca-head { background:var(--primary); border-radius:2px; border-bottom:3px double var(--accent); }
.aca-skin-chronicle .aca-head h4 { font-style:normal; letter-spacing:.01em; }
.aca-skin-chronicle .aca.card { border-top:3px solid var(--primary); }
.aca-skin-chronicle .form-control,
.aca-skin-chronicle .form-select { border-radius:2px; border-width:0 0 1px 0; background:transparent; }
.aca-skin-chronicle .form-check { border:0; border-bottom:1px solid var(--border); border-radius:0; }
.aca-skin-chronicle .btn-primary,
.aca-skin-chronicle .next { background:var(--primary); }
