/* spark template kit: styles for the widgets in kit.js. Colours come from each theme's tokens. */

/* Calendar */
.cal{--cal-cell:40px;user-select:none}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cal-nav{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
.cal-nav:hover{border-color:var(--brand)}
.cal-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.cal-title{font-weight:700;text-transform:capitalize;text-align:center;margin:-38px 0 12px;pointer-events:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{font-size:.72rem;font-weight:700;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase}
.cal-day{height:var(--cal-cell);border:0;border-radius:10px;background:transparent;color:var(--text);font:600 .92rem var(--font-body);cursor:pointer;position:relative}
.cal-day:hover:not(:disabled){background:color-mix(in srgb,var(--brand) 12%,transparent)}
.cal-day:disabled{color:color-mix(in srgb,var(--muted) 55%,transparent);cursor:default}
.cal-day.is-booked{text-decoration:line-through;background:repeating-linear-gradient(-45deg,transparent 0 4px,color-mix(in srgb,var(--muted) 14%,transparent) 4px 6px)}
.cal-day.is-in{background:color-mix(in srgb,var(--brand) 14%,transparent);border-radius:0}
.cal-day.is-edge{background:var(--brand);color:var(--brand-ink)}
.cal-legend{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);margin:14px 0 0}
.cal-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.cal-legend .lg-free{border:1px solid var(--line)}
.cal-legend .lg-booked{margin-left:12px;background:repeating-linear-gradient(-45deg,transparent 0 3px,color-mix(in srgb,var(--muted) 30%,transparent) 3px 5px)}

/* Lightbox */
[data-lightbox] img{cursor:zoom-in}
[data-lightbox] img:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,10,14,.94);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.lb.open{display:flex;animation:lbin .2s ease}
@keyframes lbin{from{opacity:0}}
.lb figure{margin:0;max-width:min(1200px,92vw);text-align:center}
.lb img{max-width:100%;max-height:82vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb figcaption{color:#cfd3da;font:500 .9rem system-ui,sans-serif;margin-top:12px}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:50%;width:48px;height:48px;font-size:1.8rem;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.2)}
.lb-x{top:18px;right:18px}.lb-p{left:18px;top:50%;transform:translateY(-50%)}.lb-n{right:18px;top:50%;transform:translateY(-50%)}

/* Before / after */
.compare-ba{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:16/10;--pos:50%}
.compare-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-ba img:last-of-type{clip-path:inset(0 0 0 var(--pos))}
.compare-ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4);transform:translateX(-50%);pointer-events:none}
.compare-ba .cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare-ba .cmp-knob{position:absolute;top:50%;left:var(--pos);width:46px;height:46px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 4px 16px rgba(0,0,0,.35);display:grid;place-items:center;font-weight:800;color:#222;pointer-events:none;z-index:2}
.compare-ba .cmp-tag{position:absolute;top:14px;z-index:2;background:rgba(0,0,0,.6);color:#fff;font:700 .72rem system-ui;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;pointer-events:none}
.compare-ba .cmp-tag.l{left:14px}.compare-ba .cmp-tag.r{right:14px}
.compare-ba:has(.cmp-range:focus-visible){outline:3px solid var(--brand);outline-offset:3px}

/* Stepper */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);overflow:hidden}
.stepper button{width:40px;height:40px;border:0;background:transparent;color:var(--text);font-size:1.2rem;cursor:pointer}
.stepper button:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.stepper input{width:44px;text-align:center;border:0;background:transparent;font:700 1rem var(--font-body);color:var(--text);-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}

/* Filter buttons */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:.5em 1.1em;font:600 .9rem var(--font-body);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}

/* Wizard */
.wiz{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:30px;box-shadow:var(--shadow)}
.wiz-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;font-size:.85rem;color:var(--muted);font-weight:600}
.wiz-bar{flex:1;height:6px;border-radius:999px;background:color-mix(in srgb,var(--muted) 18%,transparent);overflow:hidden}
.wiz-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:inherit;transition:width .35s ease}
.wiz h3{font-size:1.45rem;margin-bottom:.8em}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0}
.choice span{display:flex;flex-direction:column;gap:6px;height:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:16px;cursor:pointer;font-weight:700;transition:border-color .15s,background .15s}
.choice span small{font-weight:500;color:var(--muted);font-size:.84rem}
.choice span b{font-size:1.6rem;line-height:1}
.choice input:checked+span{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.choice input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.wiz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:24px}
.wiz-nav .btn--ghost:only-child{margin-left:auto}

/* Count-up numbers keep their width */
[data-count]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.lb.open{animation:none}.wiz-bar i{transition:none}}
.wiz h2{font-size:1.45rem;margin-bottom:.8em}
[hidden]{display:none!important}

/* Appointment slots */
.sl-days{display:grid;grid-auto-flow:column;grid-auto-columns:76px;gap:8px;overflow-x:auto;padding-bottom:8px}
.sl-days button,.sl-times button{border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;font:600 .9rem var(--font-body)}
.sl-days button{padding:10px 4px;text-align:center}
.sl-days small{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;font-weight:700}
.sl-days b{display:block;font-size:1.4rem;line-height:1.2}
.sl-days button[aria-pressed=true],.sl-times button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.sl-days button[aria-pressed=true] small{color:inherit}
.sl-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-top:14px}
.sl-times button{padding:.6em 0}
.sl-days button:disabled,.sl-times button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.sl-hint{color:var(--muted);margin:12px 0 0}
[data-slots]{min-height:150px}