/* ── Bridal Glow Matchmaker – White Luxury Wedding ── */
:root {
    --gold: #b08d57;
    --gold-soft: #d4bc8e;
    --gold-pale: #f4ecdd;
    --rose: #c06c84;
    --ink: #2b2622;
    --muted: #8a8178;
    --ivory: #fdfcfa;
    --line: #ece5da;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;
}

body {
    background-color: var(--ivory);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    letter-spacing: .02em;
}

/* Typography */
h1, h2, h3, h4, h5, .serif { font-family: var(--serif); font-weight: 500; color: var(--ink); }
h1 em, .display-serif { font-style: italic; color: var(--gold); }
.eyebrow {
    font-family: var(--sans); text-transform: uppercase; letter-spacing: .35em;
    font-size: .72rem; color: var(--gold); font-weight: 400;
}
.divider-ornament {
    display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.25rem 0;
}
.divider-ornament::before, .divider-ornament::after {
    content: ""; height: 1px; width: 64px;
    background: linear-gradient(to right, transparent, var(--gold-soft));
}
.divider-ornament::after { background: linear-gradient(to left, transparent, var(--gold-soft)); }
.divider-ornament span { color: var(--gold); font-size: .8rem; }

/* Buttons */
.btn { border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; padding: .65rem 1.6rem; transition: all .25s; }
.btn-rose {
    background-color: var(--gold); color: #fff; border: 1px solid var(--gold);
}
.btn-rose:hover, .btn-rose:focus { background-color: #97753f; border-color: #97753f; color: #fff; }
.btn-outline-rose { color: var(--gold); border: 1px solid var(--gold); background: transparent; }
.btn-outline-rose:hover { background-color: var(--gold); color: #fff; }
.btn-outline-secondary { color: var(--muted); border-color: var(--line); }
.btn-outline-secondary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Navbar */
.navbar { border-bottom: 1px solid var(--line) !important; box-shadow: none !important; padding-block: 1rem; }
.navbar-brand {
    font-family: var(--serif); font-size: 1.6rem; letter-spacing: .08em; font-weight: 500;
}
.text-rose { color: var(--gold) !important; }
.navbar .nav-link {
    color: var(--ink); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
    margin-inline: .4rem; position: relative;
}
.navbar .nav-link::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 1px;
    background: var(--gold); transition: all .3s; transform: translateX(-50%);
}
.navbar .nav-link:hover { color: var(--gold); }
.navbar .nav-link:hover::after { width: 60%; }
.navbar-toggler { border-color: var(--line); }

/* Hero */
.hero {
    background: linear-gradient(180deg, #fff 0%, var(--gold-pale) 55%, var(--ivory) 100%);
    border-bottom: 1px solid var(--line);
    padding: 4.5rem 1rem 3.5rem;
    text-align: center;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 500; }
.hero p { color: var(--muted); max-width: 560px; margin-inline: auto; }

/* Wizard card */
.bg-rose-soft { background-color: #fff !important; }
.card, .card.shadow-sm {
    border: 1px solid var(--line) !important;
    box-shadow: 0 20px 50px -30px rgba(43,38,34,.25) !important;
    border-radius: 2px;
}
.card-footer { background: transparent; }

.progress { background-color: var(--gold-pale); border-radius: 0; }
.progress-bar.bg-rose { background: linear-gradient(to right, var(--gold-soft), var(--gold)) !important; }

.wizard-step { display: none; animation: fadeStep .45s ease; }
.wizard-step.active { display: block; }
@keyframes fadeStep { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wizard-step h3 { font-size: 1.9rem; margin-bottom: 1.4rem; }
.wizard-step h3 .step-num { color: var(--gold-soft); font-style: italic; margin-right: .5rem; }

/* Option cards */
.option-card {
    border: 1px solid var(--line); border-radius: 2px; background: #fff;
    padding: 1.1rem .5rem; cursor: pointer; text-align: center;
    transition: all .25s; height: 100%;
    font-size: .9rem; letter-spacing: .05em;
}
.option-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 10px 24px -18px rgba(43,38,34,.4); }
.option-card.selected { border-color: var(--gold); background-color: var(--gold-pale); color: var(--ink); }

.hair-swatch {
    width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid #fff; outline: 1px solid var(--line);
    cursor: pointer; transition: all .2s; margin-inline: auto;
}
.hair-swatch:hover { transform: scale(1.08); }
.hair-swatch.selected { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Form controls */
.form-control, .form-select {
    border-radius: 2px; border-color: var(--line); background-color: #fff;
    padding: .6rem .9rem; font-weight: 300;
}
.form-control:focus, .form-select:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 .2rem rgba(176,141,87,.12); }
.form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.form-label { text-transform: uppercase; font-size: .72rem; letter-spacing: .2em; color: var(--muted); }
textarea.form-control { border-radius: 2px; }

/* Alerts / misc */
.alert-light.border { background: var(--ivory); border-color: var(--line) !important; }
.badge { font-weight: 400; letter-spacing: .08em; border-radius: 2px; }
.text-bg-light.border { border: 1px solid var(--line) !important; }
.text-muted { color: var(--muted) !important; }
.badge-category { background-color: var(--gold-pale); color: #97753f; }
.result-card img { width: 100%; border-radius: 2px; }

/* Catalog cards */
.card-img-top { border-radius: 2px 2px 0 0; }
.card-title { font-family: var(--serif); font-size: 1.4rem; }

/* Table */
.table { --bs-table-bg: transparent; }
.table thead th {
    text-transform: uppercase; font-size: .72rem; letter-spacing: .2em;
    color: var(--muted); border-color: var(--line);
}
.table td { border-color: var(--line); }

/* Footer */
footer {
    border-top: 1px solid var(--line) !important;
    font-family: var(--serif); letter-spacing: .25em; color: var(--muted);
}

/* Vipps-innlogging (2026-10-20) */
.btn-vipps { background-color: #ff5b24; border: 1px solid #ff5b24; color: #fff; font-weight: 500; letter-spacing: .02em; }
.btn-vipps:hover, .btn-vipps:focus { background-color: #e84a15; border-color: #e84a15; color: #fff; }
.nav-kunde { color: var(--gold) !important; font-weight: 400; }