/* فرم‌های چندمرحله‌ای — الهام از مرجع Fountain، با رنگ صورتی */
:root { --wz-card: rgba(255, 255, 255, .06); --wz-card-on: rgba(238, 111, 165, .12); --wz-pink: #e0577f; --wz-pink-2: #c9456f; }
html[data-theme="light"] { --wz-card: rgba(255, 255, 255, .72); --wz-card-on: #fff; --wz-pink: #e0577f; --wz-pink-2: #c9456f; }
html[data-theme="dark"] { --wz-pink: #f0789f; --wz-pink-2: #e0577f; }

.wz { display: grid; gap: 0; }
.wz-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.wz-ring { position: relative; width: 64px; height: 64px; flex: none; }
.wz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wz-ring circle { fill: none; stroke-width: 4; }
.wz-ring .bg { stroke: var(--lx-line-soft, rgba(0,0,0,.1)); }
.wz-ring .fg { stroke: var(--wz-pink); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset .7s cubic-bezier(.22,.75,.25,1); }
.wz-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 700; color: var(--lx-ink); text-align: center; line-height: 1; padding-top: 4px; }
.wz-ring b small { font-size: 9px; font-weight: 500; opacity: .6; position: absolute; top: 40%; left: 50%; transform: translate(14px, 6px); }
.wz-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.wz-steps li { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--lx-muted); padding: 5px 11px 5px 9px; border-radius: 999px; border: 1px solid transparent; transition: all .3s; }
.wz-steps li i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--lx-card); border: 1px solid var(--lx-line-soft); }
.wz-steps li.now { color: var(--lx-ink); border-color: var(--wz-pink); background: var(--wz-card); font-weight: 600; }
.wz-steps li.now i { background: var(--wz-pink); border-color: var(--wz-pink); color: #fff; }
.wz-steps li.done i { background: var(--wz-pink-2); border-color: transparent; color: #fff; }

.wz-q { text-align: center; font-size: 11px; letter-spacing: .12em; color: var(--lx-muted); }
.wz-title { text-align: center; font-size: clamp(20px, 2.1vw, 28px); font-weight: 700; margin: 8px 0 6px; color: var(--lx-ink); }
.wz-hint { text-align: center; font-size: 13px; color: var(--lx-muted); margin: 0 0 22px; }

.wz-step { display: none; }
.wz-step.on { display: block; }
.wz-step.in-r { animation: wzInR .5s cubic-bezier(.22,.75,.25,1); }
.wz-step.in-l { animation: wzInL .5s cubic-bezier(.22,.75,.25,1); }
@keyframes wzInR { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes wzInL { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.wz-step .sj-form-group { margin-bottom: 14px; }
.wz-step .sj-form-group:last-child { margin-bottom: 0; }
.wz-hide { display: none !important; }

/* کارت‌های انتخاب */
.wz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 12px; margin-bottom: 8px; }
.wz-card {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 112px; padding: 16px 10px;
    background: var(--wz-card); color: var(--lx-muted); border: 1px solid var(--lx-line-soft); border-radius: 14px; cursor: pointer;
    font: inherit; font-size: 13px; line-height: 1.6; transition: transform .25s, border-color .25s, background .25s, box-shadow .25s, color .25s;
}
.wz-card:hover { transform: translateY(-3px); border-color: var(--wz-pink); }
.wz-card .ic { opacity: .8; }
.wz-card .ck { position: absolute; top: 9px; left: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--wz-pink); display: grid; place-items: center; transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.wz-card.on { background: var(--wz-card-on); color: var(--lx-ink); border-color: var(--wz-pink); box-shadow: 0 0 0 3px rgba(224,87,127,.18), 0 14px 30px rgba(224,87,127,.16); font-weight: 600; }
.wz-card.on .ck { transform: scale(1); }
.wz-card.on .ic { color: var(--wz-pink); opacity: 1; }
.wz-has-cards { margin-bottom: 0; }

/* ناوبری */
.wz-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.wz-nav button { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 12px 26px; font-size: 14px; transition: transform .2s, background .2s, box-shadow .2s; }
.wz-prev { background: transparent; border: 0; color: var(--lx-muted); padding-inline: 14px !important; }
.wz-prev:hover { color: var(--lx-ink); }
.wz-next, .wz-submit { background: var(--wz-pink) !important; color: #fff !important; border: 0 !important; font-weight: 600; box-shadow: 0 12px 26px rgba(224,87,127,.32) !important; min-width: 150px; justify-content: center; }
.wz-next:hover, .wz-submit:hover { background: var(--wz-pink-2) !important; transform: translateY(-2px); }
.wz-submit { width: auto !important; margin: 0 !important; }
.wz-nav .wz-enter { display: none; }

form.wz-on #appointmentMessage, form.wz-on #clubMessage, form.wz-on #contactMessage { text-align: center; margin-top: 16px; }

@media (max-width: 640px) {
    .wz-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .wz-steps { gap: 4px; } .wz-steps li span { display: none; } .wz-steps li.now span { display: inline; }
    .wz-cards { grid-template-columns: repeat(2, 1fr); }
    .wz-nav button { padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) { .wz-step.in-r, .wz-step.in-l { animation: none; } }

/* ===== نوار پیشرفت (جایگزین حلقه و چیپ‌ها) ===== */
.wz-head { display: block; margin-bottom: 26px; }
.wz-bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; color: var(--lx-muted); }
.wz-bar-p { color: var(--lx-ink); font-weight: 700; }
.wz-bar-p b { font-size: 16px; }
.wz-track { height: 8px; border-radius: 99px; background: var(--lx-line-soft); overflow: hidden; }
.wz-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #e8708f, #c9456f); transition: width .6s cubic-bezier(.22,.75,.25,1); }
.wz-q { display: none; }