:root {
    --wizard-ink: #172033;
    --wizard-muted: #64748b;
    --wizard-line: #dfe5ef;
    --wizard-brand: #4f46e5;
}

.wizard-page {
    color: var(--wizard-ink);
    background:
        radial-gradient(circle at 10% 3%, rgba(99, 102, 241, .12), transparent 25rem),
        radial-gradient(circle at 95% 20%, rgba(14, 165, 233, .08), transparent 24rem),
        #f7f9fc;
}

.wizard-shell { max-width: 64rem; min-height: 48rem; }

.wizard-progress-card {
    padding: 1rem 1.15rem;
    border: 1px solid var(--wizard-line);
    border-radius: 1.25rem;
    background: rgba(255,255,255,.94);
    box-shadow: 0 20px 48px -42px #0f172a;
}

.wizard-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.wizard-progress-copy span { color: #6366f1; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.wizard-progress-copy strong { color: #334155; font-size: .82rem; }
.step-indicator { margin-inline: .35rem; }
.step-indicator::before { background: #dbe1ea; }
.step-dot { width: 2rem; height: 2rem; border: 3px solid white; color: #475569; box-shadow: 0 0 0 1px #dbe1ea; }
.step-dot.active { color: white; background: linear-gradient(145deg, #6366f1, #4338ca); box-shadow: 0 6px 16px -9px #312e81, 0 0 0 2px #c7d2fe; }
.step-dot.completed { color: white; background: #059669; box-shadow: 0 0 0 1px #a7f3d0; }
.progress-bar { background: linear-gradient(90deg, #4f46e5, #7c3aed); }
.wizard-skip a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .55rem .9rem; border-radius: 999px; background: rgba(255,255,255,.75); }
.wizard-skip a:hover { background: white; }

.wizard-step > .bg-white {
    overflow: hidden;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--wizard-line);
    border-radius: 1.5rem;
    box-shadow: 0 30px 75px -52px rgba(15,23,42,.8);
}

#step-1 > .bg-white { position: relative; padding-block: clamp(2rem, 7vw, 4.25rem); }
#step-1 > .bg-white::before { content: ""; position: absolute; width: 20rem; height: 20rem; right: -11rem; top: -13rem; border-radius: 50%; background: rgba(99,102,241,.11); }
.wizard-welcome-badge { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1px solid #c7d2fe; border-radius: 999px; color: #4338ca; background: #eef2ff; font-size: .75rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.wizard-welcome-title { position: relative; max-width: 17ch; margin: 1rem auto 0; color: #172033; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
#step-1 > .bg-white > div:first-child > p { max-width: 42rem; margin-inline: auto; line-height: 1.65; }
#step-1 .grid > div { padding: 1.15rem; border: 1px solid #e0e7ff; border-radius: 1rem; background: linear-gradient(145deg, #f8faff, #eef2ff); }
#step-1 .grid i { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: 0 auto .65rem; border-radius: .75rem; color: white; background: linear-gradient(145deg, #6366f1, #4338ca); font-size: 1rem; }

.wizard-step h2 { letter-spacing: -.025em; }
.wizard-step h2::after { content: ""; display: block; width: 2.75rem; height: .22rem; margin-top: .65rem; border-radius: 999px; background: linear-gradient(90deg, #4f46e5, #a78bfa); }
.country-option, .duration-option, .activity-option { border-color: #dfe5ef !important; border-radius: 1rem !important; background: #fff; box-shadow: 0 10px 26px -26px #0f172a; }
.country-option:hover, .duration-option:hover { transform: translateY(-2px); border-color: #818cf8 !important; background: #f8faff; box-shadow: 0 16px 28px -24px #312e81; }
.country-option.selected, .duration-option.selected { border-color: #4f46e5 !important; background: #eef2ff; box-shadow: 0 0 0 2px rgba(79,70,229,.11); }
.activity-option { transition: border-color .2s, background .2s, box-shadow .2s; }
.activity-option:has(input:checked) { border-color: #818cf8 !important; background: #f8faff; box-shadow: 0 0 0 2px rgba(79,70,229,.1); }
.activity-option input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: #4f46e5; }
.data-estimator { position: relative; overflow: hidden; background: linear-gradient(125deg, #312e81, #4f46e5 60%, #6366f1); }
.data-estimator::after { content: ""; position: absolute; width: 12rem; height: 12rem; right: -6rem; top: -7rem; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
#data-recommendation { border: 1px solid #c7d2fe; border-radius: 1rem; }

.wizard-step button:not(.country-option):not(.duration-option), .wizard-step a.compatibility-btn { min-height: 2.8rem; border-radius: .8rem; font-weight: 800; }
.wizard-step button:focus-visible, .wizard-step a:focus-visible, .wizard-step input:focus-visible, .wizard-step select:focus-visible, .country-option:focus-visible, .duration-option:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
#destination-results { padding: .35rem; border-color: #dfe5ef; border-radius: .85rem; }
#destination-results .search-result-item { width: 100%; border: 0; border-radius: .65rem; text-align: left; background: white; }
#destination-results .search-result-item:hover, #destination-results .search-result-item:focus-visible { outline: none; background: #eef2ff; }

@media (max-width: 767px) {
    .wizard-shell { padding-top: 1rem; padding-bottom: 2.5rem; }
    .wizard-progress-card { padding: .8rem; border-radius: 1rem; }
    .step-indicator { margin-bottom: .65rem; }
    .step-dot { width: 1.85rem; height: 1.85rem; }
    .wizard-skip { margin-bottom: .75rem; }
    .wizard-step > .bg-white { padding: 1.15rem; border-radius: 1.15rem; }
    #step-1 > .bg-white { padding-block: 1.75rem; }
    .wizard-welcome-title { font-size: 2.35rem; }
    #step-1 .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
    #step-1 .grid > div { padding: .7rem .35rem; }
    #step-1 .grid i { width: 2rem; height: 2rem; font-size: .8rem; }
    #step-1 .grid h3 { font-size: .72rem; line-height: 1.2; }
    #step-1 .grid p { margin-top: .25rem; font-size: .62rem; line-height: 1.35; }
    #step-2 .grid, #step-3 .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .country-option, .duration-option { min-height: 6.2rem; padding: .8rem !important; }
    .country-option h4, .duration-option h4 { font-size: .83rem; line-height: 1.25; }
    .country-option p, .duration-option p { font-size: .68rem; line-height: 1.35; }
    .activity-option { padding: .9rem !important; }
    #step-5 > .bg-white > .flex:first-child { align-items: stretch; flex-direction: column; }
    #step-5 > .bg-white > .flex:first-child > .flex { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-page *, .wizard-page *::before, .wizard-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}