/* ==========================================================================
   FMS Design System
   Distilled from the Oaken feedback / onboarding / wedding forms:
   forest + gold palette, Cormorant Garamond display + Jost body,
   card-style inputs, sidebar step navigation, progress bar.
   Every form on the platform inherits these tokens; branding overrides
   only --accent, --bg, logo and copy via CSS variables.
   ========================================================================== */

:root {
    /* Brand tokens (overridable per form via inline style on .fms) */
    --accent:        #1a3c2e;   /* forest */
    --accent-soft:   #243f31;
    --gold:          #b8956a;
    --gold-light:    #d4af82;
    --gold-pale:     #f5edd8;
    --cream:         #f7f3ec;
    --field-bg:      #faf6ee;
    --ink:           #1a1915;
    --muted:         #7a7468;
    --line:          rgba(184, 149, 106, 0.22);
    --line-strong:   #b8956a;
    --danger:        #c0392b;
    --radius:        4px;

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body:    "Jost", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Layout: sidebar + main ---------- */
.fms-shell { display: flex; min-height: 100vh; flex-direction: column; }
@media (min-width: 1024px) { .fms-shell { flex-direction: row; } }

.fms-aside {
    background: var(--accent);
    color: var(--gold-pale);
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .fms-aside { width: 360px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; }
}
.fms-brand-logo { max-width: 150px; height: auto; display: block; margin-bottom: 1rem; }
.fms-brand-name { font-family: var(--font-display); font-size: 2.2rem; color: var(--gold-light); line-height: 1.05; }
.fms-brand-tag { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(212,175,130,.5); margin-top: .5rem; }
.fms-rule { width: 2.25rem; height: 1px; background: rgba(184,149,106,.3); margin: 1.75rem 0; }

.fms-steps { display: flex; flex-direction: column; gap: 1rem; }
.fms-step-nav { display: flex; gap: .75rem; align-items: flex-start; opacity: .35; transition: opacity .3s; }
.fms-step-nav.active, .fms-step-nav.done { opacity: 1; }
.fms-step-num {
    width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(184,149,106,.3); display: flex; align-items: center; justify-content: center;
    font-size: .62rem; color: var(--gold-light); margin-top: .1rem;
}
.fms-step-nav.active .fms-step-num, .fms-step-nav.done .fms-step-num { background: var(--gold); color: var(--accent); border-color: var(--gold); }
.fms-step-label { font-family: var(--font-display); font-size: 1rem; color: var(--gold-light); }

.fms-main { flex: 1; background: #fff; display: flex; flex-direction: column; min-height: 100vh; }
.fms-progress { height: 3px; background: rgba(184,149,106,.12); }
.fms-progress-bar { height: 100%; background: var(--gold); width: 0; transition: width .45s cubic-bezier(.22,1,.36,1); }
.fms-body { flex: 1; padding: 2rem 1.5rem; max-width: 640px; width: 100%; }
@media (min-width: 1024px) { .fms-body { padding: 3.5rem 4rem; } }

/* ---------- Mobile header ---------- */
.fms-mobile-head { background: var(--accent); color: var(--gold-pale); padding: 1.25rem 1.5rem; }
@media (min-width: 1024px) { .fms-mobile-head { display: none; } }
.fms-mobile-dots { display: flex; gap: 6px; margin: .75rem 0 .35rem; }
.fms-mobile-dots span { height: 4px; flex: 1; background: rgba(184,149,106,.2); }
.fms-mobile-dots span.on { background: var(--gold); }

/* ---------- Step hero ---------- */
.fms-hero { background: var(--accent); color: #fff; padding: 2rem; margin-bottom: 2rem; position: relative; overflow: hidden; }
.fms-hero .eyebrow { font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(212,175,130,.6); }
.fms-hero h1 { font-family: var(--font-display); font-style: italic; color: var(--gold-light); font-size: 2rem; margin: .5rem 0; line-height: 1.15; }
.fms-hero p { font-size: .85rem; color: rgba(255,255,255,.6); }

.fms-section-title { font-family: var(--font-display); font-size: 2rem; color: var(--accent); margin: 0 0 .25rem; }
.fms-section-desc { color: var(--muted); font-size: .9rem; margin: 0 0 1.25rem; }

/* ---------- Fields ---------- */
.fms-field { margin-bottom: 1.5rem; }
.fms-label { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.fms-req { color: var(--gold); }
.fms-help { font-size: .78rem; color: var(--muted); margin: 0 0 .5rem; }
.fms-heading { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); margin: 1.5rem 0 .25rem; }
.fms-paragraph { font-size: .9rem; color: var(--muted); }

.fms-input {
    width: 100%; padding: 13px 16px; background: var(--field-bg);
    border: 1px solid var(--line); border-radius: var(--radius);
    font-family: var(--font-body); font-size: 15px; font-weight: 300; color: var(--ink);
    outline: none; transition: border-color .2s, background .2s;
}
.fms-input:focus { border-color: var(--line-strong); background: #fff; }
.fms-input::placeholder { color: #c4beb4; }
textarea.fms-input { resize: vertical; min-height: 96px; }

.fms-address { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.fms-address .fms-input:first-child, .fms-address .fms-input:nth-child(2) { grid-column: 1 / -1; }

.fms-options { display: grid; grid-template-columns: 1fr; gap: .625rem; }
@media (min-width: 640px) { .fms-options { grid-template-columns: 1fr 1fr; } }
.fms-option {
    display: flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none;
    border: 1px solid var(--line); background: var(--field-bg); padding: 12px 15px;
    border-radius: var(--radius); font-size: 14px; transition: all .2s;
}
.fms-option:hover { border-color: rgba(184,149,106,.55); background: #fffdf8; }
.fms-option input { accent-color: var(--gold); width: 16px; height: 16px; }
.fms-option.fms-selected { border-color: var(--gold); background: #fff; }
.fms-consent { grid-column: 1 / -1; }

.fms-error { color: var(--danger); font-size: .72rem; margin: .35rem 0 0; min-height: 0; }

/* ---------- Actions ---------- */
.fms-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.fms-btn {
    font-family: var(--font-body); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    padding: 14px 26px; border: none; border-radius: var(--radius); cursor: pointer; transition: opacity .2s, background .2s;
}
.fms-btn-primary { background: var(--accent); color: var(--gold-pale); }
.fms-btn-primary:hover { background: var(--accent-soft); }
.fms-btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.fms-btn:disabled { opacity: .6; cursor: not-allowed; }

.fms-alert { padding: 12px 16px; border-radius: var(--radius); font-size: .82rem; margin-bottom: 1.5rem; }
.fms-alert-error { background: #fdecea; border: 1px solid #f5c6c0; color: var(--danger); }
.fms-alert-success { background: #eafaf1; border: 1px solid #b7e4c7; color: #1e7e46; }

.fms-step { display: none; animation: fmsFade .35s ease forwards; }
.fms-step.active { display: block; }
@keyframes fmsFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Confirmation ---------- */
.fms-confirm { max-width: 560px; margin: 0 auto; text-align: center; padding: 4rem 1.5rem; }
.fms-confirm h1 { font-family: var(--font-display); color: var(--accent); font-size: 2.5rem; }
.fms-confirm .ref { display: inline-block; margin-top: 1rem; padding: 8px 18px; background: var(--gold-pale); color: var(--accent); letter-spacing: .1em; }