/* ---- PAGE HEADER ---- */
.wizard-page-header {
    padding: var(--sp-12) 0 var(--sp-8);
    background: var(--nook-bg-page);
    border-bottom: var(--nook-border-50);
    margin-bottom: var(--sp-10);
}
.wizard-eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--nook-fs-small); font-weight: 600;
    color: var(--nook-c-primary); margin-bottom: var(--sp-3);
}
.wizard-eyebrow::before {
    content: ''; width: 16px; height: 2px;
    background: var(--nook-c-primary); border-radius: 2px;
}
.wizard-page-title {
    font-family: var(--nook-font-display);
    font-size: var(--nook-fs-h1); line-height: var(--nook-lh-h1);
    color: var(--nook-c-title); letter-spacing: 0.01em;
    margin-bottom: var(--sp-2);
}
@media (min-width: 1024px) {
    .wizard-page-title { font-size: var(--nook-fs-6); line-height: var(--nook-lh-6); }
}
.wizard-page-desc { font-size: var(--nook-fs-body); color: var(--nook-c-meta); }

/* ---- WIZARD WRAP ---- */
.wizard-wrap { max-width: 640px; margin: 0 auto; padding-bottom: var(--sp-16); }

/* ---- STEP BREADCRUMB ---- */
.step-breadcrumb {
    display: flex; align-items: center; gap: 0;
    margin-bottom: var(--sp-8);
}
.step-crumb {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--nook-fs-xsmall); font-weight: 700;
    color: var(--nook-c-meta); cursor: default;
}
.step-crumb-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--nook-c-border); color: var(--nook-c-meta);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--nook-fs-xsmall); font-weight: 800;
    flex-shrink: 0; transition: var(--nook-transition);
}
.step-crumb-label { display: none; }
@media (min-width: 400px) { .step-crumb-label { display: block; } }
.step-crumb.active .step-crumb-num { background: var(--nook-c-blue); color: var(--nook-c-white); }
.step-crumb.active .step-crumb-label { color: var(--nook-c-blue); font-weight: 700; }
.step-crumb.done .step-crumb-num { background: var(--nook-c-primary); color: var(--nook-c-white); }
.step-crumb.done .step-crumb-label { color: var(--nook-c-meta); }

.step-sep {
    flex: 1; height: 1px; background: var(--nook-c-border);
    margin: 0 var(--sp-3); min-width: var(--sp-4);
}
.step-sep.done { background: var(--nook-c-primary); opacity: 0.3; }

/* ---- PROGRESS BAR ---- */
.wizard-progress {
    height: 3px; background: var(--nook-c-border);
    border-radius: 2px; margin-bottom: var(--sp-8); overflow: hidden;
}
.wizard-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--nook-c-primary), var(--nook-c-blue));
    border-radius: 2px; transition: width 0.4s ease; width: 33%;
}

/* ---- FORM STEPS ---- */
.wizard-card {
    background: var(--nook-c-white); border: var(--nook-border-50);
    border-radius: var(--nook-radius); padding: var(--sp-8);
}
.form-step { display: none; animation: fadeUp 0.35s ease; }
.form-step.active { display: block; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.step-title {
    font-size: var(--nook-fs-h3); font-weight: 700;
    color: var(--nook-c-title); margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5); border-bottom: var(--nook-border-50);
}

/* ---- RADIO CARDS ---- */
.radio-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3); margin-bottom: var(--sp-6);
}
@media (min-width: 480px) { .radio-grid { grid-template-columns: repeat(3, 1fr); } }

.radio-card input[type="radio"] { display: none; }
.radio-card-inner {
    border: var(--nook-border-50); border-radius: var(--nook-radius-sm);
    padding: var(--sp-4) var(--sp-3); text-align: center;
    cursor: pointer; transition: var(--nook-transition);
    display: flex; flex-direction: column;
    align-items: center; gap: var(--sp-2);
    background: var(--nook-bg-page);
}
.radio-card input:checked + .radio-card-inner {
    border-color: var(--nook-c-primary);
    background: rgba(212,0,93,0.03);
    color: var(--nook-c-primary);
}
.radio-card-inner:hover { border-color: var(--nook-c-blue); }
.radio-card-emoji { font-size: 1.5rem; }
.radio-card-label { font-size: var(--nook-fs-xsmall); font-weight: 700; line-height: 1.3; }

/* ---- RANGE SLIDER ---- */
.range-wrap { margin-bottom: var(--sp-6); }
.range-header {
    display: flex; align-items: baseline;
    justify-content: space-between; margin-bottom: var(--sp-4);
}
.range-label {
    font-size: var(--nook-fs-xsmall); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--nook-c-meta);
}
.range-value {
    font-family: var(--nook-font-display);
    font-size: var(--nook-fs-h2); line-height: 1; color: var(--nook-c-blue);
}
.range-value span {
    font-size: var(--nook-fs-small); font-family: var(--nook-font);
    color: var(--nook-c-meta); margin-left: 2px;
}
input[type="range"] {
    width: 100%; accent-color: var(--nook-c-primary);
    cursor: pointer; height: 4px;
}
.range-limits {
    display: flex; justify-content: space-between;
    font-size: var(--nook-fs-xsmall); color: var(--nook-c-meta);
    margin-top: var(--sp-2);
}

/* ---- WIZARD BUTTONS ---- */
.wizard-actions {
    display: flex; align-items: center;
    justify-content: space-between; gap: var(--sp-4);
    margin-top: var(--sp-6); padding-top: var(--sp-6);
    border-top: var(--nook-border-50);
}
.wizard-actions--back { margin-top: var(--sp-4); }

.btn-prev {
    background: none; border: none;
    font-family: var(--nook-font);
    font-size: var(--nook-fs-small); font-weight: 700;
    color: var(--nook-c-meta); cursor: pointer;
    padding: var(--sp-3) 0; transition: var(--nook-transition);
}
.btn-prev:hover { color: var(--nook-c-text); }

.btn-next {
    flex: 1; max-width: 280px;
    padding: var(--sp-4) var(--sp-6);
    background: var(--nook-c-blue); color: var(--nook-c-white);
    border: none; border-radius: var(--nook-radius-sm);
    font-family: var(--nook-font);
    font-size: var(--nook-fs-body); font-weight: 700;
    cursor: pointer; transition: var(--nook-transition); text-align: center;
}
.btn-next:hover { filter: brightness(1.1); }

/* ---- SUCCESS ---- */
.wizard-success {
    display: none; text-align: center;
    padding: var(--sp-12) var(--sp-8);
}
.wizard-success.active { display: block; animation: fadeUp 0.4s ease; }
.success-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(34,197,94,0.1);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--sp-5); font-size: 1.5rem;
}
.success-title {
    font-family: var(--nook-font-display);
    font-size: var(--nook-fs-h1); color: var(--nook-c-title);
    margin-bottom: var(--sp-3);
}
.success-desc { font-size: var(--nook-fs-body); color: var(--nook-c-meta); }
