/* Felles timebestilling for Komplett-eksemplene som bygger på malen (fra Salong Linde, 11.10.2026).
   Alt ligger under .bestill, så det ikke kolliderer med .steg og .skjema i malen. Farger fra tema.css. */
.bestill-seksjon{padding:clamp(28px,4vw,48px) 0 clamp(56px,8vw,96px)}
.bestill{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);align-items:start}
.bestill [hidden]{display:none!important}
.bestill .steg{padding:0 0 32px;margin:0 0 32px;border-bottom:1px solid var(--linje);border-top:0;display:block}
.bestill .steg::before{content:none}
.bestill .steg:last-child{border-bottom:0;margin-bottom:0}
.bestill .steg h2{font-size:clamp(1.5rem,2.6vw,2rem);display:flex;align-items:center;gap:14px;margin-bottom:6px}
.bestill .steg-nr{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--hoved);color:var(--hoved-tekst);font:600 1rem/1 var(--brod);flex:none}
.bestill .steg-hint{color:var(--tekst-2);margin:0 0 16px}
.bestill .laster,.bestill .ingen{color:var(--tekst-2)}
.bestill .kategori-valg{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.bestill .kategori-valg button,.bestill .frisor,.bestill .dag,.bestill .tid{font:inherit;color:var(--tekst);background:#fff;border:1.5px solid var(--linje);border-radius:999px;cursor:pointer;transition:border-color .15s,background-color .15s}
.bestill .kategori-valg button{padding:9px 18px;font-size:.98rem}
.bestill .kategori-valg button[aria-selected=true]{background:var(--tekst);border-color:var(--tekst);color:#fff}
.bestill .behandling-liste{display:grid;gap:8px}
.bestill .behandling{display:grid;grid-template-columns:minmax(0,1fr) auto 26px;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:var(--tekst);background:#fff;border:1.5px solid var(--linje);border-radius:12px;padding:14px 16px;cursor:pointer}
.bestill .behandling:hover,.bestill .frisor:hover,.bestill .dag:not(:disabled):hover,.bestill .tid:hover,.bestill .kategori-valg button:hover{border-color:var(--hoved)}
.bestill .behandling-navn strong{display:block;font-weight:600}
.bestill .behandling-navn small{color:var(--tekst-2);font-size:.9rem}
.bestill .behandling-pris{white-space:nowrap;font-weight:600}
.bestill .hake{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--linje);position:relative}
.bestill .behandling[aria-pressed=true]{border-color:var(--hoved);background:var(--flate)}
.bestill .behandling:disabled{cursor:default;opacity:.55}
.bestill .behandling[aria-pressed=true] .hake{background:var(--hoved);border-color:var(--hoved)}
.bestill .behandling[aria-pressed=true] .hake::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.bestill .frisor-valg,.bestill .sted-valg{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bestill .frisor{border-radius:12px;padding:12px 18px;text-align:left;min-width:150px}
.bestill .frisor strong{display:block;font-weight:600}
.bestill .frisor small{color:var(--tekst-2);font-size:.85rem}
.bestill .frisor[aria-pressed=true]{border-color:var(--hoved);background:var(--flate)}
.bestill .dag-rad-ramme{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;align-items:center;margin-top:16px}
.bestill .dag-pil{font:400 1.8rem/1 var(--brod);width:40px;height:40px;border-radius:50%;border:1.5px solid var(--linje);background:#fff;color:var(--hoved);cursor:pointer}
.bestill .dag-pil:disabled{opacity:.35;cursor:default}
.bestill .dag-rad{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bestill .dag{border-radius:12px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.bestill .dag-uke{font-size:.8rem;text-transform:capitalize;color:var(--tekst-2)}
.bestill .dag-dato{font-weight:600;font-size:.92rem;white-space:nowrap}
.bestill .dag:disabled{cursor:default;color:var(--tekst-2);opacity:.5;background:transparent}
.bestill .dag[aria-selected=true]{background:var(--tekst);border-color:var(--tekst);color:#fff}
.bestill .dag[aria-selected=true] .dag-uke{color:rgba(255,255,255,.75)}
.bestill .tid-dag{font-family:var(--brod);font-size:1.05rem;font-weight:600;margin:22px 0 12px}
.bestill .tid-dag::first-letter{text-transform:uppercase}
.bestill .tid-liste .tider{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:0}
.bestill .tid-liste .tider li{border:0;padding:0}
.bestill .tid{padding:11px 0;border-radius:10px;font-variant-numeric:tabular-nums}
.bestill .tid[aria-pressed=true]{background:var(--hoved);border-color:var(--hoved);color:var(--hoved-tekst)}
.bestill .skjema{display:grid;gap:16px;max-width:520px;margin-top:16px;background:none;border:0;padding:0}
.bestill .skjema label{display:grid;gap:6px;font-weight:600;font-size:.98rem}
.bestill .skjema label small{font-weight:400;color:var(--tekst-2);font-size:.88rem}
.bestill .skjema input,.bestill .skjema textarea{font:inherit;font-weight:400;padding:13px 14px;border:1.5px solid var(--felt-kant,var(--linje));border-radius:var(--felt-radius,8px);background:#fff;color:var(--tekst);width:100%}
.bestill .skjema input:focus,.bestill .skjema textarea:focus{outline:3px solid var(--aksent);outline-offset:1px;border-color:var(--tekst)}
.bestill .valgfritt{font-weight:400;color:var(--tekst-2)}
.bestill .skjema-feil{color:#A3361F;background:#FBEDE8;border-radius:8px;padding:10px 14px;margin:0}
.bestill .bestill-knapp{justify-self:start;min-width:220px}
.bestill .bestill-knapp:disabled{opacity:.7;cursor:wait}
.bestill .vilkar-tekst{color:var(--tekst-2);font-size:.92rem;margin:0}
.bestill .oppsummering{position:sticky;top:96px;background:var(--flate);border-radius:var(--radius);padding:24px 26px}
.bestill .oppsummering h2,.bestill .kvittering h2{font-size:1.7rem;margin-bottom:14px}
.bestill .oppsummering dl,.bestill .kvittering dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0}
.bestill .oppsummering dt,.bestill .kvittering dt{color:var(--tekst-2);font-size:.92rem}
.bestill .oppsummering dd,.bestill .kvittering dd{margin:0;font-weight:600}
.bestill .kvittering{grid-column:1/-1;max-width:640px;background:var(--flate);border-radius:var(--radius);padding:clamp(24px,4vw,40px);outline:none}
.bestill .kvittering dl{margin-bottom:24px}
.bestill .kvittering-knapper{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.bestill .kvittering .knapp{background:var(--hoved);color:var(--hoved-tekst)}
.bestill .kvittering .knapp-omriss{background:transparent;color:var(--hoved);border-color:currentColor}
.bestill .kvittering-hint{color:var(--tekst-2);font-size:.95rem;margin:0}
.bestill .mobil-oppsummering{display:none}
.bestill .turnstile{min-height:65px}
.flytt-banner{background:var(--flate);border-radius:12px;padding:14px 18px;margin:0 0 24px;font-weight:600}
.booking-ring{margin-top:40px;color:var(--tekst-2)}
@media (max-width:900px){
  .bestill{grid-template-columns:minmax(0,1fr)}
  .bestill .oppsummering{display:none}
  .bestill .mobil-oppsummering{display:block;background:var(--flate);border-radius:10px;padding:12px 16px;margin:12px 0 0;font-weight:600}
  .bestill .mobil-oppsummering:empty{display:none}
}
@media (max-width:640px){
  .bestill .dag-rad-ramme{grid-template-columns:32px minmax(0,1fr) 32px;gap:4px}
  .bestill .dag-pil{width:32px;height:32px;font-size:1.4rem}
  .bestill .dag-rad{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
  .bestill .dag-rad::-webkit-scrollbar{display:none}
  .bestill .dag{flex:0 0 64px;padding:8px 0}
  .bestill .behandling{grid-template-columns:minmax(0,1fr) auto 22px;gap:10px;padding:12px 14px}
  .bestill .hake{width:22px;height:22px}
  .bestill .bestill-knapp{width:100%}
}
@media (pointer:coarse){.bestill input,.bestill textarea,.bestill select{font-size:16px!important}}
.bestill .steg{scroll-margin-top:90px}