/* ─── Beställ (bestall.html) — page-only styles ─────────────────────────────
   Loaded in addition to css/style.css (shared). */

/* ─── Step rail (order flow) ──────────────────────────────────────────────── */
.step-rail{display:flex;align-items:center;justify-content:center;margin-bottom:52px;flex-wrap:wrap}
.step-node{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;font-family:var(--font-body);border:1.5px solid var(--tertiary);color:var(--primary-tint);background:var(--white)}
.step-node.active{background:var(--primary);border-color:var(--primary);color:var(--white)}
.step-node.done{background:var(--accent);border-color:var(--accent);color:var(--primary)}
.step-label{font-size:11px;color:var(--primary-tint);white-space:nowrap;font-weight:600}
.step-label.active{color:var(--primary)}
.step-line{width:clamp(24px,5vw,72px);height:2px;background:var(--tertiary);margin:0 10px 22px;flex-shrink:0;border-radius:2px}
.step-line.done{background:var(--accent)}

.swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;border:2px solid var(--tertiary);transition:all .18s}
.swatch.sel{box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--accent);transform:scale(1.06)}

.toggle{display:flex;border:1.5px solid var(--tertiary);border-radius:var(--r-full);overflow:hidden}
.toggle button{flex:1;padding:13px 16px;border:none;background:transparent;font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;color:var(--primary-tint);display:flex;align-items:center;gap:8px;justify-content:center}
.toggle button.on{background:var(--primary);color:var(--white)}