/*
Theme Name: FlipIt Vemdalen
Theme URI: https://flipitvemdalen.se
Author: KBK Vemdalen
Description: FlipIts frontend enligt den godkända designen V1.1. All affärslogik ligger i pluginet KBK Core, inte här.
Version: 0.5.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: flipit
*/

:root{
  --pink:#ff04a5; --purple:#7900bf; --navy:#1f1c6e; --blue:#1f6eb0; --orange:#fc642e;
  --ink:#11111a; --muted:#6b6b79; --line:#e7e7ee; --paper:#ffffff; --soft:#f5f4f8;
  --radius:26px; --radius-sm:18px; --shadow:0 18px 50px rgba(31,28,110,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.display{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;letter-spacing:-.055em;line-height:.92;text-transform:uppercase}
.kicker{font-size:12px;letter-spacing:.17em;font-weight:900;text-transform:uppercase;color:var(--purple)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;padding:15px 22px;font-weight:900;cursor:pointer;transition:.18s ease}
.btn.primary{background:var(--pink);color:white;box-shadow:0 10px 24px rgba(255,4,165,.28)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.dark{background:var(--navy);color:white}
.btn.ghost{background:white;color:var(--navy);border:1px solid rgba(31,28,110,.13)}
.tag{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:800;background:rgba(255,255,255,.9)}

/* header */
header{height:78px;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(31,28,110,.08)}
.nav{height:100%;display:flex;align-items:center;gap:26px}
.logo{width:106px;flex:none}
.logo img{width:100%}
nav{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:14px;font-weight:800}
.openToday{font-size:12px;font-weight:800;color:var(--navy);white-space:nowrap}
.langSelect{position:relative;flex:none}
.langBtn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:900;cursor:pointer;color:var(--navy)}
.langMenu{display:none;position:absolute;right:0;top:calc(100% + 9px);min-width:160px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:7px;box-shadow:0 15px 35px rgba(31,28,110,.16)}
.langMenu.open{display:block}
.langMenu button{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:10px;padding:9px 10px;font-size:12px;font-weight:800;text-align:left;cursor:pointer}
.langMenu button:hover{background:var(--soft)}
.nav .btn{padding:12px 17px}
.mobileMenu{display:none;margin-left:auto;font-size:26px;font-weight:900}

/* hero */
.hero{position:relative;min-height:650px;display:flex;align-items:flex-end;overflow:hidden;background:#090913}
.hero:before{content:"";position:absolute;inset:0;background:url('assets/img/hero.jpg') center 45%/cover no-repeat;transform:scale(1.01);filter:brightness(1.08) saturate(1.13) contrast(1.03)}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 18%,rgba(31,110,176,.18),transparent 30%),radial-gradient(circle at 58% 70%,rgba(255,4,165,.12),transparent 35%),linear-gradient(90deg,rgba(7,5,28,.80) 0%,rgba(7,5,28,.47) 41%,rgba(7,5,28,.10) 72%,rgba(7,5,28,.14) 100%),linear-gradient(0deg,rgba(7,5,28,.66) 0%,transparent 50%)}
.heroContent{position:relative;z-index:2;color:white;padding:88px 0 115px}
.heroContent .tag{color:var(--navy);margin-bottom:18px}
.hero h1{font-size:clamp(50px,6.2vw,90px);max-width:820px;margin:0 0 18px}
.hero p{font-size:19px;max-width:600px;margin:0 0 28px;color:rgba(255,255,255,.9)}
.heroActions{display:flex;gap:12px;flex-wrap:wrap}
.heroBadge{position:absolute;right:55px;bottom:64px;z-index:2;background:rgba(121,0,191,.9);color:white;border-radius:20px;padding:15px 18px;font-weight:900;font-size:13px;backdrop-filter:blur(10px)}

/* info strip */
.quick{display:none}
.quickbar{background:white;border-radius:22px;box-shadow:var(--shadow);padding:18px 22px;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:14px;align-items:center}
.quickitem{display:flex;gap:12px;align-items:center;padding:8px 14px;border-right:1px solid var(--line)}
.quickitem:last-of-type{border-right:0}
.qicon{width:38px;height:38px;border-radius:13px;background:var(--soft);display:grid;place-items:center;font-size:18px}
.quickitem b{display:block;font-size:13px}
.quickitem span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* booking */
.bookSec{padding:72px 0 44px;background:linear-gradient(#fff,#f8f7fb)}
.sectionHead{display:block;margin-bottom:28px}
.sectionHead h2{font-size:clamp(36px,4.2vw,56px);margin:4px 0 0;color:var(--navy);white-space:nowrap}
.sectionHead p{max-width:none;margin:10px 0 0;color:var(--muted)}
.booking{display:grid;grid-template-columns:1.22fr .78fr;gap:22px;align-items:start}
.panel{background:white;border:1px solid #ecebf2;border-radius:var(--radius);box-shadow:0 12px 40px rgba(31,28,110,.08);overflow:hidden}
.panelInner{padding:28px}
.stepTitle{display:flex;align-items:center;gap:10px;font-weight:900;margin-bottom:16px}
.stepLank{margin-left:auto;border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:800;color:var(--purple);text-decoration:underline;cursor:pointer}
.stepLank:hover,.stepLank.active{color:var(--pink)}
.stepNum{width:28px;height:28px;border-radius:50%;background:var(--navy);color:white;display:grid;place-items:center;font-size:12px}
.dateRow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-bottom:28px}
.dateRow .chip{padding:9px 4px;text-align:center;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden}
.dateRow .chip b{display:block;font-weight:800}
.dateRow .chip span{display:block;font-weight:700;color:var(--muted);font-size:11px}
.dateRow .chip.active span{color:rgba(255,255,255,.75)}
@media(max-width:560px){.dateRow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.chip{border:1px solid var(--line);background:white;border-radius:999px;padding:10px 14px;font-weight:800;font-size:13px;cursor:pointer}
.chip.active{background:var(--navy);border-color:var(--navy);color:white}
.people{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
.counter{background:var(--soft);border-radius:17px;padding:14px;display:flex;align-items:center;justify-content:space-between}
.counter label{font-weight:900;font-size:13px}.counter small{display:block;color:var(--muted);font-weight:500;margin-top:2px}
.counterBtns{display:flex;align-items:center;gap:10px}.counterBtns button{width:31px;height:31px;border-radius:50%;border:0;background:white;font-size:18px;font-weight:900;cursor:pointer}.count{width:18px;text-align:center;font-weight:900}

.nonJump{border:1px solid #e7e4ef;background:#fbfaff;border-radius:17px;padding:15px 16px;margin:0 0 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.nonJumpText b{display:block;font-size:13px;color:var(--navy)}
.nonJumpText span{display:block;color:var(--muted);font-size:12px;max-width:430px;margin-top:3px}
.nonJump .counterBtns button{border:1px solid var(--line)}
.familyConfirm{display:none;margin-top:10px;font-size:11px;font-weight:800;gap:8px;align-items:center}
.familyConfirm.show{display:flex}
.familyConfirm button{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:white;border-radius:999px;padding:6px 10px;font-weight:900;cursor:pointer}

.family{display:none;background:linear-gradient(125deg,var(--purple),var(--pink));color:white;border-radius:19px;padding:18px 18px;margin-bottom:22px;align-items:center;justify-content:space-between;gap:18px}
.family.show{display:flex}.family b{font-size:15px}.family span{font-size:12px;display:block;opacity:.88;margin-top:3px}.family .btn{padding:10px 14px;background:white;color:var(--navy);white-space:nowrap;font-size:12px}
.duration{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:22px}
.dur{border:2px solid #ecebf2;border-radius:17px;padding:17px;cursor:pointer;position:relative}.dur.active{border-color:var(--pink);background:#fff5fb}.dur b{display:block;font-size:17px}.dur strong{font-size:23px;color:var(--navy)}.dur span{font-size:12px;color:var(--muted)}.dur .best{position:absolute;right:10px;top:10px;background:var(--pink);color:white;border-radius:999px;font-size:9px;padding:5px 8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.times{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.time{border:1px solid var(--line);border-radius:13px;padding:11px 6px;text-align:center;font-weight:900;font-size:13px;background:white}.time.active{background:var(--navy);color:white;border-color:var(--navy)}.time.limited{border-color:#ff9e4e}.time small{display:block;font-size:9px;font-weight:700;color:var(--orange);margin-top:2px}.time.active small{color:white}.time.off{opacity:.38;text-decoration:line-through}
.panelFoot{padding:16px 28px;background:#f7f6fa;border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.panelFoot b{color:var(--navy)}

.summary{background:var(--navy);color:white;border-radius:var(--radius);padding:28px;position:sticky;top:102px;box-shadow:var(--shadow)}
.summary .kicker{color:#ffc4e9}.summary h3{font-size:34px;margin:7px 0 22px}
.sumrow{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:13px}.sumrow span{opacity:.72}.sumrow b{text-align:right}.sumTotal{display:flex;justify-content:space-between;align-items:end;padding:22px 0}.sumTotal span{font-size:12px;opacity:.7}.sumTotal strong{font-size:29px}.summary .btn{width:100%}.yearlink{text-align:center;font-size:12px;margin-top:15px;color:#e9c8ff;font-weight:800}

/* events */
.events{padding:82px 0;background:white}
.cards{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:18px}
.eventCard{min-height:370px;border-radius:26px;overflow:hidden;position:relative;color:white;background:#111}
.eventCard:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,5,28,.92),rgba(8,5,28,.05) 72%)}
.eventCard img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:brightness(1.04) contrast(1.03) saturate(.96)}.eventContent{position:absolute;z-index:2;left:22px;right:22px;bottom:22px}.eventContent .date{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#ffd3f0}.eventContent h3{font-size:31px;margin:4px 0 6px}.eventContent p{font-size:13px;margin:0 0 14px;opacity:.9}.eventContent .btn{padding:10px 13px;font-size:12px;background:white;color:var(--navy)}
.eventCard.graphic{background:linear-gradient(140deg,var(--purple),var(--navy));}.eventCard.graphic:before{content:"";position:absolute;inset:-20%;background:repeating-conic-gradient(from 20deg,transparent 0 8deg,rgba(255,255,255,.045) 8deg 16deg);transform:rotate(-10deg)}

/* promos */
.promos{padding:25px 0 86px}
.promoGrid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.promo{border-radius:28px;min-height:330px;position:relative;overflow:hidden;padding:34px;color:white}.promo h3{font-size:clamp(34px,4vw,57px);margin:8px 0 11px;max-width:620px}.promo p{max-width:520px;margin:0 0 22px;color:rgba(255,255,255,.88)}
.promo.kalas{background:linear-gradient(120deg,var(--pink),var(--purple))}.promo.kalas:after{content:"";position:absolute;right:-90px;top:-90px;width:360px;height:360px;border:1px solid rgba(255,255,255,.35);border-radius:40px;transform:rotate(25deg)}
.promo.glass{background:linear-gradient(145deg,var(--blue),#36a9d3)}

/* visit + activities */
.activities{padding:86px 0;background:#0c0b26;color:white}.activities .sectionHead h2{color:white}.activities .sectionHead p{color:#aaa9c5}.activityGrid{display:grid;grid-template-columns:1.1fr .9fr .9fr;grid-template-rows:250px 250px;gap:16px}.photoTile{border-radius:22px;overflow:hidden;position:relative}.photoTile:first-child{grid-row:1 / 3}.photoTile img{width:100%;height:100%;object-fit:cover;filter:brightness(1.05) contrast(1.03) saturate(.96)}.photoTile:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,4,25,.8),transparent 60%)}.tileLabel{position:absolute;z-index:2;left:18px;bottom:16px;font-size:17px;font-weight:900}.tileLabel small{display:block;font-size:10px;opacity:.75;margin-top:2px;text-transform:uppercase;letter-spacing:.08em}

.visit{padding:84px 0}.visitGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.visitCard{border:1px solid var(--line);border-radius:22px;padding:24px}.visitIcon{width:46px;height:46px;border-radius:15px;background:#f6edf9;display:grid;place-items:center;font-size:22px;margin-bottom:20px}.visitCard h3{margin:0 0 7px;color:var(--navy)}.visitCard p{font-size:13px;color:var(--muted);margin:0 0 13px}.visitCard a{font-size:12px;font-weight:900;color:var(--purple)}

footer{background:#08071d;color:white;padding:48px 0 30px}.footgrid{display:grid;grid-template-columns:1.2fr repeat(3,.7fr);gap:36px}.footlogo{width:110px;margin-bottom:14px}.footgrid h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 13px;color:#c6c4df}.footgrid a,.footgrid p{display:block;font-size:13px;color:#f1efff;margin:7px 0}.footend{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;font-size:11px;color:#9693b4}
.mobileBook{display:none}

@media(max-width:900px){
  .sectionHead h2{white-space:normal}
  .openToday{display:none}
  nav,.lang{display:none}.mobileMenu{display:block}.hero{min-height:580px}.heroContent{padding:66px 0 100px}.hero h1{font-size:60px}.heroBadge{display:none}.hero .outline{inset:18px}
  .quickbar{grid-template-columns:1fr 1fr}.quickitem:nth-child(2){border-right:0}.quickbar>.btn{grid-column:1/-1}.booking{grid-template-columns:1fr}.summary{position:static}.cards{grid-template-columns:1fr 1fr}.cards .eventCard:first-child{grid-column:1/-1}.promoGrid{grid-template-columns:1fr}.activityGrid{grid-template-columns:1fr 1fr;grid-template-rows:250px 210px}.photoTile:first-child{grid-column:1/-1;grid-row:auto}.visitGrid{grid-template-columns:1fr 1fr}.footgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .wrap{width:min(100% - 26px,1180px)}header{height:66px}.logo{width:92px}.hero{min-height:550px}.hero:before{background-position:57% center}.hero:after{background:linear-gradient(0deg,rgba(7,5,28,.91) 0%,rgba(7,5,28,.47) 70%,rgba(7,5,28,.2) 100%)}.heroContent{padding:58px 0 76px}.hero h1{font-size:47px;max-width:430px}.hero p{font-size:16px}.heroActions .btn.ghost{display:none}
  .quick{margin-top:-28px}.quickbar{padding:13px;grid-template-columns:1fr 1fr;gap:6px}.quickitem{padding:8px;border:0}.quickitem:nth-child(3){grid-column:1/-1}.qicon{width:34px;height:34px}.quickbar>.btn{display:none}
  .bookSec{padding-top:54px}.sectionHead{display:block}.sectionHead p{margin-top:12px}.sectionHead h2{font-size:45px}.panelInner{padding:20px}.people{grid-template-columns:1fr}.family{align-items:flex-start;flex-direction:column}.duration{grid-template-columns:1fr 1fr}.times{grid-template-columns:repeat(3,1fr)}.summary{padding:22px}.summary h3{font-size:28px}
  .events{padding:64px 0}.cards{grid-template-columns:1fr}.cards .eventCard:first-child{grid-column:auto}.eventCard{min-height:310px}.promo{min-height:290px;padding:26px}.activityGrid{display:grid;grid-template-columns:1fr;grid-template-rows:none}.photoTile,.photoTile:first-child{min-height:230px;grid-column:auto}.visitGrid{grid-template-columns:1fr}.footgrid{grid-template-columns:1fr 1fr}.footgrid>div:first-child{grid-column:1/-1}
  .mobileBook{display:flex;position:fixed;z-index:80;left:12px;right:12px;bottom:12px;background:var(--pink);color:white;border-radius:999px;height:56px;align-items:center;justify-content:center;font-weight:900;box-shadow:0 14px 35px rgba(255,4,165,.35)}body{padding-bottom:74px}
}


/* --- tillägg för den riktiga bokningen, samma formspråk som V1.1 --- */
.times.laddar{opacity:.4}
.time[disabled]{opacity:.35;cursor:not-allowed}
.bokFel{margin-top:14px;background:#fff1f5;border:1px solid #ffd3e2;color:#a1004f;border-radius:14px;padding:12px 14px;font-size:13px;font-weight:700}
.bokFel:empty{display:none}
.footlegal{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;font-size:12px}
.footlegal a{color:#c6c4df;text-decoration:underline}
.footlegal a:hover{color:#fff}
.takText{margin:-6px 0 14px;font-size:12px;color:var(--purple);font-weight:800}
.sumrow.spec{font-size:12px;opacity:.92}
.sumrow.spec span{opacity:.72}
.sumLines:empty{display:none}
/* Korten är knappar hos oss, V1.1 ritade dem som divar. Knappar centrerar
   text som standard — texten ska ligga i vänsterkant som i designen. */
.dur,.dur.active{text-align:left}
.dur .best.tom{display:none}
.tomTider{grid-column:1/-1;color:var(--muted);font-size:13px;padding:6px 2px}
.sumrow.dold{display:none}
.rules{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:12px;color:rgba(255,255,255,.86)}
.rules input{margin-top:2px;width:16px;height:16px;flex:none}
.rules a{text-decoration:underline;color:#ffc4e9;font-weight:800}
.summary .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* Rabattkoden. Hopfälld till en rad tills kunden har en kod — den ska inte
   ta plats från tid, pris och FORTSÄTT, och inte tigga om en kod. */
.kod{margin:-8px 0 2px}
.kodLank{background:none;border:0;padding:4px 0;min-height:24px;font:inherit;font-size:12px;font-weight:800;color:#e9c8ff;text-decoration:underline;cursor:pointer}
.kodLank:hover{color:#fff}
.kodFalt{display:flex;gap:8px;margin-top:10px}
/* display:flex slår ut webbläsarens egen regel för hidden — utan den här
   raden står fältet alltid öppet och rutan blir dubbelt så hög. */
.kodFalt[hidden]{display:none}
.kodFalt input{flex:1;min-width:0;padding:9px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.kodFalt input::placeholder{color:rgba(255,255,255,.45);letter-spacing:normal}
.kodBtn{flex:none;padding:9px 14px;border-radius:10px;border:0;background:#ffc4e9;color:var(--navy);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.kodBtn:hover{background:#fff}
/* Koder som skiljer på stora och små bokstäver, som årskortskoden. Fältet
   får aldrig visa versaler över något kunden skrivit med gemener: det hon
   ser ska vara det hon har skickat. */
.kodFalt input.exakt{text-transform:none;letter-spacing:.02em}
.kodSvar{font-size:12px;margin-top:8px;font-weight:800}
.kodSvar.ok{color:#b9f5c8}
.kodSvar.fel{color:#ffc4e9}
.kodSvar:empty{display:none}

/* Koder som lagts till listas med vad de är, aldrig med koden själv. En rad
   per kod med innehavaren och en väg att ta bort den igen. Raden bryter
   långa namn i stället för att tvinga fram en sidled i telefonen. */
.kodLista{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.kodLista:empty{display:none}
.kodRad{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.1);font-size:12px;font-weight:800}
.kodRad span{min-width:0;overflow-wrap:anywhere}
.kodRadBort{flex:none;background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:800;color:#ffc4e9;text-decoration:underline;cursor:pointer}
.kodRadBort:hover{color:#fff}

/* --- mobilen får flytta innehåll, aldrig ta bort det --- */
@media(max-width:900px){
  /* Menyn göms bakom knappen, men knappen öppnar den på riktigt. */
  header nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(31,28,110,.14);
    padding:8px 20px 14px;margin-left:0;
  }
  header nav.open{display:flex}
  header nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:15px}
  header nav a:last-child{border-bottom:0}
  .mobileMenu{display:block;margin-left:auto;border:0;background:transparent;cursor:pointer;line-height:1}

  /* Öppettiderna är praktisk information och ska synas även i telefon. */
  .openToday{display:inline-block;font-size:11px;margin-left:auto}
  .nav .btn.primary{padding:10px 13px;font-size:12px}

  /* Badgen flyttar ner i flödet i stället för att försvinna. */
  .heroBadge{
    display:inline-block;position:static;right:auto;bottom:auto;
    margin-top:18px;align-self:flex-start;
  }
  .hero{flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .hero .wrap.heroContent{width:min(1180px,calc(100% - 40px))}
}

@media(max-width:640px){
  /* Andraknappen i hero får radbrytas i stället för att döljas. */
  .heroActions .btn.ghost{display:inline-flex}
  .heroActions{gap:10px}
  .heroActions .btn{padding:13px 18px;font-size:13px}
  .openToday{display:none}
  .heroMobilOppet{display:block}
  /* Öppettiderna flyttar in i mobilmenyn i stället för att försvinna. */
  header nav a.navOppet{display:block;font-weight:800;color:var(--navy)}
}

/* I sidhuvudet står öppettiderna bredvid menyn. Menyns egen rad behövs bara i telefon. */
header nav .navOppet{display:none}

/* Öppettiderna når även den minsta skärmen, via fotens praktiska ruta. */
.visitCard .oppetIdag{display:block;margin:0 0 8px;font-weight:900;color:var(--navy);font-size:13px}

/* --- telefonen: samma innehåll, men utan krockar --- */
@media(max-width:640px){
  /* Huvudraden sprack vid 360 px. Inget tas bort, allt krymper. */
  .nav{gap:8px}
  .logo{width:82px}
  .langBtn{padding:7px 8px;font-size:11px;gap:5px}
  .nav .btn.primary{padding:9px 11px;font-size:11px;white-space:nowrap}
  .mobileMenu{font-size:22px;padding:0 2px}

  /* Non-Jumping: texten och räknaren låg bredvid varandra och klämde
     ihop varandra. De får varsin rad i stället. */
  .nonJump{flex-direction:column;align-items:stretch;gap:12px}
  .nonJumpText span{max-width:none}
  .nonJump .counterBtns{align-self:flex-end}

  /* Familjepaketets knapp får hela bredden i stället för att stå och
     hänga i vänsterkanten. */
  .family .btn{align-self:stretch;width:100%}

  /* Populär-märket låg ovanpå längdrubriken. Det flyttar in i flödet,
     och priset får enheten på egen rad i stället för att brytas mitt i. */
  .dur{padding:15px 13px}
  .dur .best{position:static;display:inline-block;margin:0 0 7px}
  .dur .best.tom{display:inline-block;visibility:hidden}
  .dur strong{display:block;margin-top:2px}
  .dur span{display:block}
}


/* ===================================================================
   Innehållssidorna (page.php). Samma formspråk som V1.1: navyrubriker,
   rosa accent, rundade kort. Ingenting göms i mobilen — det som inte
   får plats bredvid varandra lägger sig under i stället.
   =================================================================== */

.sidaHero{background:linear-gradient(125deg,var(--purple),var(--navy));color:#fff;padding:64px 0 58px;position:relative;overflow:hidden}
.sidaHero:before{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border:1px solid rgba(255,255,255,.22);border-radius:48px;transform:rotate(24deg)}
.sidaHero .wrap{position:relative;z-index:2}
.sidaHero .kicker{color:#ffc4e9}
.sidaHero h1{font-size:clamp(38px,5.4vw,68px);margin:8px 0 0;max-width:900px}
.sidaIngress{font-size:18px;max-width:640px;margin:18px 0 0;color:rgba(255,255,255,.9)}

.sidaBody{padding:58px 0 20px}
.sida{max-width:820px}
.sida > *:first-child{margin-top:0}
.sida h2{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;letter-spacing:-.04em;text-transform:uppercase;font-size:clamp(24px,2.6vw,32px);color:var(--navy);margin:44px 0 14px;line-height:1.05}
.sida h3{font-size:18px;color:var(--navy);margin:30px 0 8px}
.sida p{margin:0 0 15px;font-size:16px}
.sida ul,.sida ol{margin:0 0 18px;padding-left:22px}
.sida li{margin:0 0 9px;font-size:16px}
.sida a{color:var(--purple);font-weight:800;text-decoration:underline}
.sida a:hover{color:var(--pink)}
.sida strong,.sida b{color:var(--navy)}
.sida em{color:var(--muted)}
.sida hr{border:0;border-top:1px solid var(--line);margin:34px 0}

.sidaLead{font-size:19px !important;line-height:1.5;color:var(--navy);font-weight:600;margin:0 0 26px !important}

/* Numrerade regelkort */
.regelGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 30px}
.regelKort{border:1px solid var(--line);border-radius:20px;padding:20px 20px 18px;background:#fff;position:relative}
.regelKort .regelNr{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:900;letter-spacing:.06em;color:var(--pink);display:block;margin-bottom:9px}
.regelKort b{display:block;font-size:16px;color:var(--navy);line-height:1.25;margin-bottom:5px}
.regelKort span{display:block;font-size:13.5px;color:var(--muted)}

/* Faktaruta — används för det praktiska: tider, adress, villkor */
.faktaRuta{border:1px solid #e7e4ef;background:#fbfaff;border-radius:20px;padding:22px 24px;margin:0 0 26px}
.faktaRuta h3{margin:0 0 12px;color:var(--navy);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.faktaRuta p:last-child,.faktaRuta ul:last-child{margin-bottom:0}

/* QR-ruta — en kodsymbol med etikett, t.ex. årskortet på /k/<kod>.
   Symbolen kommer som SVG med egna pixelmått. Utan reglerna här blir en kod
   för ett långt domännamn bredare än innehållsytan på en 360 px-skärm, och
   sidan får sidscroll. */
.qrRuta{margin:0 0 26px;text-align:center}
.qrRuta svg{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
.qrRuta .kicker{margin:12px 0 0}

/* Prisrader */
.prislista{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line)}
.prislista li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 2px;border-bottom:1px solid var(--line);margin:0;font-size:16px}
.prislista li b{color:var(--navy)}
.prislista li .pris{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;color:var(--navy);white-space:nowrap;letter-spacing:-.02em}
.prislista li small{display:block;color:var(--muted);font-weight:500;font-size:13px;margin-top:3px}

/* Kortrutor — årskort, paket, alternativ */
.kortGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 30px}
.kortRuta{border:2px solid #ecebf2;border-radius:22px;padding:24px 22px;display:flex;flex-direction:column;background:#fff}
.kortRuta.vald{border-color:var(--pink);background:#fff5fb}
.kortRuta .kicker{margin-bottom:8px}
.kortRuta h3{margin:0 0 4px;font-size:19px;color:var(--navy)}
.kortRuta .kortPris{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:27px;font-weight:900;letter-spacing:-.04em;color:var(--navy);margin:8px 0 12px}
.kortRuta p{font-size:14px;color:var(--muted);margin:0 0 14px}
.kortRuta ul{padding-left:18px;margin:0 0 16px}
.kortRuta li{font-size:13.5px;margin-bottom:7px}
.kortRuta .btn{margin-top:auto;width:100%;font-size:13px;padding:13px 16px}

/* Enkel taggrad, t.ex. glassmaker */
.taggar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.taggar li{border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:800;color:var(--navy);margin:0}

/* Avslutande bokningsband */
.sidaSlut{padding:20px 0 84px}
.sidaSlutKort{background:linear-gradient(120deg,var(--pink),var(--purple));color:#fff;border-radius:28px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sidaSlutKort h2{font-size:clamp(28px,3.4vw,44px);margin:6px 0 8px}
.sidaSlutKort p{margin:0;color:rgba(255,255,255,.9);font-size:15px}
.sidaSlutKort .btn.primary{background:#fff;color:var(--navy);box-shadow:none;white-space:nowrap}

@media(max-width:900px){
  .regelGrid{grid-template-columns:1fr}
  .kortGrid{grid-template-columns:1fr}
  .sidaSlutKort{flex-direction:column;align-items:flex-start}
  .sidaSlutKort .btn.primary{width:100%}
}

@media(max-width:640px){
  .sidaHero{padding:44px 0 40px}
  .sidaIngress{font-size:16px}
  .sidaBody{padding:40px 0 14px}
  .sida h2{margin:34px 0 12px}
  .prislista li{flex-direction:column;gap:4px}
  .prislista li .pris{align-self:flex-start}
  .sidaSlutKort{padding:26px}
}

/* Årskortsvalet i bokningen: en tydlig länk, inte en död text. */
.panelFoot a{color:var(--purple);font-weight:900;text-decoration:underline}
.panelFoot a:hover{color:var(--pink)}
a.yearlink{display:block;text-decoration:underline}
a.yearlink:hover{color:#fff}

/* Menyn fick två punkter till (Årskort, Händer). Under 1150 px krymper
   avstånden i stället för att raden spricker. Ingenting tas bort. */
@media(max-width:1150px) and (min-width:901px){
  .nav{gap:16px}
  nav{gap:15px;font-size:13px}
  .nav .btn.primary{padding:11px 14px;font-size:12px}
  .openToday{font-size:11px}
}

/* ---------------------------------------------------------------------------
   Dagvalet: stangda dagar i chipsraden, och kalendern bakom "Fler dagar".
   Ligger sist sa att den kan laggas till utan att rora resten av filen.
--------------------------------------------------------------------------- */
.chip.stangd{opacity:.42;text-decoration:line-through;cursor:not-allowed}

.kalender{margin:-16px 0 26px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:white;box-shadow:0 10px 30px rgba(31,28,110,.10);max-width:360px}
.kalenderHuvud{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.kalenderHuvud strong{font-size:14px;color:var(--navy);text-transform:capitalize}
.kalenderPil{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:white;font-size:17px;font-weight:900;line-height:1;cursor:pointer;color:var(--navy)}
.kalenderPil:disabled{opacity:.3;cursor:not-allowed}
.kalenderRutnat{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kalenderVeckodag{text-align:center;font-size:11px;font-weight:900;text-transform:uppercase;color:var(--muted);padding-bottom:4px}
.kalenderDag{aspect-ratio:1;border:1px solid var(--line);background:white;border-radius:11px;font-weight:800;font-size:13px;cursor:pointer;padding:0;color:var(--ink)}
.kalenderDag:hover:not(:disabled){border-color:var(--navy)}
.kalenderDag.active{background:var(--navy);border-color:var(--navy);color:white}
.kalenderDag.stangd{background:var(--soft);color:#b9b9c6;text-decoration:line-through;cursor:not-allowed}
.kalenderDag.utanfor{background:transparent;border-color:transparent;color:#dcdce4;cursor:not-allowed}
.kalenderStang{margin-top:8px;width:100%;border:0;background:var(--soft);border-radius:999px;padding:9px;font-weight:800;font-size:13px;cursor:pointer;color:var(--navy)}
.kalenderLaddar{margin:0 0 4px;color:var(--muted);font-size:13px}

/* Pa liten skarm ska veckan rymmas utan att nagot doljs eller scrollar i sidled. */
@media(max-width:640px){
  .kalender{max-width:100%;padding:12px}
  .kalenderRutnat{gap:3px}
  .kalenderDag{border-radius:9px;font-size:12px}
}

/* ---- Tillägg för säljsidor. Allt är komponenter, ingen sida äger något ---- */

/* Bredare block i brödtexten. Textkolumnen är 820 px, vilket är rätt att läsa
   men för trångt för tre priskort. Bredden ligger nu på barnen i stället för
   på .sida, så ett block kan välja bort den utan att sidan får eget stilark. */
.sida{max-width:none}
/* Knappar arver understrykningen fran .sida a och ser ut som lankar. */
.sida .btn{text-decoration:none}
.sida > *{max-width:820px}
.sida > .bred{max-width:none}

/* Mörk variant av bokningsbandet, för ett band mitt på en sida där det rosa
   redan står i sidfoten. Två likadana band under varandra läser som ett fel.
   Rubrikfärgen måste sättas här: .sida h2 är navy och vinner annars på
   specificitet, så rubriken blev navy på navy och försvann. */
.sidaSlutKort.mork{background:var(--navy);padding:26px 30px}
.sida .sidaSlutKort h2{color:#fff;margin:0 0 6px}
.sida .sidaSlutKort.mork h2{font-size:clamp(22px,2.3vw,27px)}
.sida .sidaSlutKort p{color:rgba(255,255,255,.88)}

/* Foto bredvid en punktlista. Bilden ensam över hela bredden tar över sidan. */
.sidaSplit{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:center;margin:0 0 30px}
.sidaSplit .regelGrid{grid-template-columns:1fr;margin:0;gap:10px}
.sidaBild{margin:0}
.sidaBild img{width:100%;height:auto;border-radius:20px}
.sidaBild figcaption{font-size:12.5px;color:var(--muted);margin-top:9px}

/* Faktarutor i rad, och ett stort tal i en faktaruta. */
.faktaGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 30px}
.faktaGrid .faktaRuta{margin:0}
.sida .faktaTal{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:26px;font-weight:900;letter-spacing:-.04em;color:var(--navy);line-height:1.12;margin:0 0 11px}
.sida .faktaTal small{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;color:var(--muted)}

/* Köpkorten står tre i bredd på ett brett block och får då lite mer luft. */
.bred .kortRuta{padding:26px 24px}
.bred .kortRuta .kortPris{font-size:33px;margin:10px 0 4px}
.bred .kortRuta h3{font-size:21px}

@media(max-width:900px){
  .faktaGrid{grid-template-columns:1fr}
  .sidaSplit{grid-template-columns:1fr;gap:20px}
  .sidaSlutKort.mork{padding:22px}
}

/* ---- Steg 2: tilläggen, och steg 3: kassan --------------------------------
   Två egna sidor i bokningsflödet. Stilarna ligger här och inte i ett eget
   stilark: samma linje som årskortssidan, ett ställe att leta på. */

.steg2 { padding: 34px 0 70px; }

.steg2 .dold { display: none !important; }

/* Var i flödet kunden står. Tre ord, inget mer. */
.steg2Stegen {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 30px; padding: 0; list-style: none;
  font-size: 13px; font-weight: 800; color: var(--muted);
}

.steg2Stegen li { display: flex; align-items: center; gap: 12px; }
.steg2Stegen li::after { content: ""; width: 22px; height: 2px; background: var(--line); }
.steg2Stegen li:last-child::after { display: none; }
.steg2Stegen .klar { color: var(--navy); }
.steg2Stegen .klar a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--line); }
.steg2Stegen .klar a:hover { color: var(--pink); border-color: var(--pink); }
.steg2Stegen .nu { color: var(--pink); }

.steg2Laddar { color: var(--muted); padding: 60px 0; }

.steg2Rutor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start; }

.steg2Rubrik { margin-bottom: 24px; }
.steg2Rubrik h1 { font-size: clamp(32px, 4.4vw, 52px); margin: 8px 0 0; color: var(--navy); }
.steg2Rubrik .rosa { color: var(--pink); }
.steg2Rubrik p { margin: 14px 0 0; color: var(--muted); max-width: 560px; }

.steg2GruppRubrik { font-size: 15px; font-weight: 900; color: var(--navy); margin: 28px 0 12px; }

/* --- korten -------------------------------------------------------------- */

.steg2Kort {
  display: flex; gap: 24px;
  border: 1px solid var(--line); border-radius: 26px;
  padding: 24px; background: var(--paper);
  margin-bottom: 18px;
}

.steg2Bild {
  width: 190px; height: 190px; flex: none;
  object-fit: cover; border-radius: 18px; background: var(--soft);
}

.steg2KortText { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.steg2KortHuvud { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.steg2KortHuvud h3 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.01em; }
.steg2Pris { margin-left: auto; font-size: 18px; font-weight: 900; color: var(--navy); white-space: nowrap; }

.steg2Marke {
  font-size: 12px; font-weight: 800; color: var(--orange);
  border: 1px solid rgba(252, 100, 46, .35); background: rgba(252, 100, 46, .08);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}

.steg2KortText p { margin: 10px 0 0; font-size: 14px; color: var(--muted); max-width: 430px; }

/* --- valet: ett styck i taget, med egen storlek -------------------------- */

.steg2Stycken { margin-top: 16px; }
.steg2StyckLista { display: flex; flex-direction: column; gap: 8px; }

.steg2Styck {
  display: flex; align-items: center; gap: 12px;
  background: var(--soft); border-radius: 14px; padding: 10px 10px 10px 16px;
}

.steg2StyckNr { font-size: 13px; font-weight: 800; width: 52px; flex: none; }

.steg2Storlek {
  flex-grow: 1; max-width: 170px;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}

.steg2Bort {
  width: 44px; height: 44px; flex: none; margin-left: auto;
  border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); font-size: 18px; font-weight: 700; cursor: pointer;
}

.steg2Bort:hover { color: var(--pink); border-color: var(--pink); }

.steg2Lagg {
  align-self: flex-start; margin-top: 12px;
  border: 1px dashed rgba(121, 0, 191, .4); background: rgba(121, 0, 191, .05);
  color: var(--purple); border-radius: 999px;
  padding: 12px 20px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}

.steg2Lagg:hover { background: rgba(121, 0, 191, .1); }
.steg2Lagg:disabled { opacity: .45; cursor: default; }

/* --- valet: antal -------------------------------------------------------- */

.steg2Antal { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 14px; }

.steg2Rund {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  font: inherit; font-size: 20px; font-weight: 900; color: var(--navy); cursor: pointer;
}

.steg2Rund:hover:not(:disabled) { border-color: var(--pink); color: var(--pink); }
.steg2Rund:disabled { opacity: .35; cursor: default; }

.steg2Siffra { min-width: 28px; text-align: center; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* --- kvittot ------------------------------------------------------------- */

.steg2Kvitto { position: sticky; top: 24px; }

.steg2KvittoInner {
  background: var(--navy); color: var(--paper);
  border-radius: 26px; padding: 28px;
  box-shadow: 0 18px 50px rgba(31, 28, 110, .16);
}

.steg2KvittoInner .kicker { color: var(--pink); }

.steg2Fakta, .steg2Rader { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.steg2Fakta { margin-top: 14px; }

.steg2Rad { display: flex; justify-content: space-between; gap: 14px; }
.steg2Rad span:first-child { opacity: .7; }
.steg2Rad b { font-weight: 800; text-align: right; }

.steg2Linje { margin: 18px 0; height: 1px; background: rgba(255, 255, 255, .16); }

.steg2Summa {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex; justify-content: space-between; align-items: baseline;
}

.steg2Summa span { font-size: 15px; font-weight: 800; }
.steg2Summa strong {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 32px; letter-spacing: -.04em; font-weight: 900;
}

.steg2Betala { margin-top: 20px; width: 100%; }
.steg2Betala:disabled { opacity: .6; cursor: default; transform: none; }

.steg2Kvar { margin-top: 12px; text-align: center; font-size: 12px; opacity: .65; min-height: 16px; }

.steg2Tillbaka { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: #ffc4e9; }

/* --- fel och slut -------------------------------------------------------- */

.steg2Fel {
  border: 1px solid rgba(252, 100, 46, .35); background: rgba(252, 100, 46, .08);
  color: var(--ink); border-radius: 18px; padding: 16px 18px; margin-bottom: 20px; font-size: 14px;
}

.steg2Fel.steg2Slut { border: 0; background: none; padding: 60px 0; text-align: left; }
.steg2Fel.steg2Slut h1 { font-size: clamp(30px, 4vw, 46px); color: var(--navy); margin: 0; }
.steg2Fel.steg2Slut p { color: var(--muted); margin: 14px 0 26px; max-width: 480px; }

/* --- mobilen ------------------------------------------------------------- */

@media (max-width: 960px) {
  .steg2Rutor { grid-template-columns: minmax(0, 1fr); }

  /* Kvittot ligger sist på mobilen, men knappen ska alltid vara nära.
     Sticky längst ner ger samma sak som en fast fot utan att täcka korten. */
  .steg2Kvitto { position: static; }
}

@media (max-width: 620px) {
  .steg2Kort { flex-direction: column; gap: 16px; padding: 18px; }
  .steg2Bild { width: 100%; height: 190px; }
  .steg2KortText p { max-width: none; }
  .steg2Storlek { max-width: none; }
  .steg2Antal { padding-top: 12px; }
}

/* --- kassan (steg 3) ------------------------------------------------------
   Betalsidan ritas av KBK Core, men den ska se ut som resten av FlipIt.
   Stegraden är samma komponent som i steg 2 och har sina stilar ovan. */
.kassaSida{padding:34px 0 70px}
.kbkBetala{display:grid;grid-template-columns:340px minmax(0,1fr);gap:34px;align-items:start}
.kbkBetalaSum{background:var(--soft);border-radius:26px;padding:26px;position:sticky;top:24px}
.kbkBetalaSum h2{margin:0 0 16px;font-size:17px;font-weight:900;color:var(--navy)}
.kbkBetalaRader{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.kbkBetalaRader li{display:flex;justify-content:space-between;gap:14px}
.kbkBetalaRader li span:first-child{color:var(--muted)}
.kbkBetalaTotal{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.kbkBetalaTotal span{font-size:15px;font-weight:800;color:var(--navy)}
.kbkBetalaTotal strong{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:28px;letter-spacing:-.04em;color:var(--navy)}
.kbkBetalaFot{margin:18px 0 0;font-size:12px;color:var(--muted)}
.kbkBetalaKassa{min-height:420px}
.kbkBetalaFel{padding:20px;border:1px solid rgba(252,100,46,.35);background:rgba(252,100,46,.08);border-radius:18px}

@media(max-width:960px){
  .kbkBetala{grid-template-columns:minmax(0,1fr)}
  .kbkBetalaSum{position:static;order:2}
  .kbkBetalaKassa{order:1}
}

/* Tack-sidan efter köpet. Samma komponenter som betalsidan. */
.kbkTack{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start}
.kbkTackText h1{margin:6px 0 16px;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--navy)}
.kbkTackText p{font-size:17px;line-height:1.5;color:var(--navy);max-width:560px}
.kbkTackText .btn{margin-top:8px}
.kbkTackSum{position:static}
.kbkTackUppgifter{margin:20px 0 10px;padding-top:18px;border-top:1px solid var(--line);font-size:15px}
@media(max-width:960px){
  .kbkTack{grid-template-columns:minmax(0,1fr)}
  .kbkTackText h1{font-size:34px}
}

/* Ett utbud med eget tidsfönster — ministuds ligger i en timme utanför
   parkens öppettider och är inte en längd bland de andra. */
.dur.egetFonster[aria-pressed="true"],.dur.egetFonster.active{border-color:var(--purple);background:#faf3ff}
.dur .best.lugn{background:var(--purple)}
/* Ett kort med eget fönster har ett längre namn ("Spökhopp - 1 timme") och ett längre märke ("29 oktober"). Uppe i hörnet la sig märket över namnet, så här ligger det i flödet ovanför, som i telefon. */
.dur.egetFonster .best{position:static;display:inline-block;margin:0 0 7px}
.dur .villkor{display:block;font-size:11.5px;color:var(--purple);font-weight:700;margin-top:6px;line-height:1.35}
.nonJump .counterBtns[hidden]{display:none}

/* Klättringen i bokningswidgeten. Den är ingen hopplängd och ska inte
   konkurrera med hoppkorten: en dämpad rad över hela bredden under dem,
   namnet till vänster och priset till höger, tunn streckad ram och ingen
   stor prissiffra (Björn 2026-09-19, variant B). Raden bryts i telefon
   i stället för att döljas — priset hamnar under namnet. */
.klatterKort{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;border:1px dashed #d8d5e6;border-radius:17px;background:#fbfaff;padding:13px 16px;text-align:left;cursor:pointer}
.klatterKort b{font-size:15px;font-weight:800;color:#4a4770}
.klatterKort .klatterPris{font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}
.klatterKort:hover{border-color:var(--purple)}
.klatterKort.active{border-style:solid;border-color:var(--purple);background:#faf3ff}
.klatterKort.active b,.klatterKort.active .klatterPris{color:var(--purple)}

/* Bandet hör till hoppet. Vid klättring döljs hela rutan, och då måste
   display:flex från .nonJump ge vika för hidden-attributet. */
.nonJump[hidden]{display:none}

/* ---- Formulär på en innehållssida ----------------------------------------
   Köpet av årskort är det första formuläret utanför bokningswidgeten. Allt
   här är generellt och heter efter vad det är, inte efter vilken sida som
   råkar använda det: nästa sida som behöver ett fält tar samma komponenter.

   hidden-attributet gäller före allt annat. En komponent med display i sin
   egen regel visas annars trots att den är dold, och det är ett av de fel
   som kostar mest tid att hitta. */
[hidden]{display:none !important}

.formRuta{border:1px solid #e7e4ef;background:#fbfaff;border-radius:22px;padding:26px 28px;margin:0 0 30px}
.sida .formRuta > *:first-child{margin-top:0}
.sida .formRuta h2{margin:6px 0 10px}
.sida .formRuta h3{margin:26px 0 10px}
.formLaddar{color:var(--muted);margin:0 0 26px}

/* Ett kort i taget i ett köp som kan gälla flera. */
.formKort{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px 20px;margin:0 0 14px}
.formKortHuvud{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.formKortHuvud b{color:var(--navy);font-size:15px}
.formLagg{margin:0 0 10px}
.sida .formLagg .btn{font-size:13px;padding:12px 18px}

/* Fälten. Två i bredd på skärm, under varandra i telefon. */
.faltGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
.falt{display:flex;flex-direction:column;gap:6px;min-width:0}
.falt > span{font-size:13px;font-weight:800;color:var(--navy)}
.falt input,.falt select,.falt textarea{font:inherit;font-size:15px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);min-width:0;width:100%;box-sizing:border-box}
.falt input:focus,.falt select:focus,.falt textarea:focus{outline:2px solid var(--purple);outline-offset:1px;border-color:var(--purple)}
.sida .faltHjalp{font-size:13px;color:var(--muted);margin:0 0 20px}

/* Kryssruta med en text som får vara flera rader. Intyget är ett villkor
   och ska stå helt, inte klippas till en rad. */
.kryss{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px}
.kryss input{width:18px;height:18px;flex:none;margin-top:2px}
.kryss span{font-size:14px;line-height:1.45}

/* En knapp som ser ut som en länk, på ljus botten. */
.lankKnapp{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:800;color:var(--purple);text-decoration:underline;cursor:pointer}
.lankKnapp:hover{color:var(--pink)}

/* Besked till kunden, i ruta. Fel är orange som i steg 2, inte rött: det
   är sällan kundens fel och ska inte skrika. */
.meddelande{border-radius:18px;padding:16px 18px;margin:0 0 26px;font-size:14px}
.meddelande.fel{border:1px solid rgba(252,100,46,.35);background:rgba(252,100,46,.08)}
.meddelande.ok{border:1px solid rgba(46,168,100,.35);background:rgba(46,168,100,.08)}
.sida .meddelande b{display:block;font-size:16px;margin-bottom:4px}
.sida .meddelande p{margin:0;font-size:14px}

/* Fotofältet: förhandsvisning till vänster, väljaren och texten till höger. */
.fotoFalt{display:flex;gap:16px;align-items:flex-start;margin:4px 0 0}
.fotoBild{width:112px;height:112px;flex:none;border-radius:16px;border:1px dashed #d8d5e6;background:var(--soft);display:grid;place-items:center;overflow:hidden;font-size:12px;font-weight:700;color:var(--muted);text-align:center;padding:6px;box-sizing:border-box}
.fotoBild img{width:100%;height:100%;object-fit:cover}
.sida .fotoFalt .fotoText{min-width:0;font-size:13px;color:var(--muted);margin:0}
.sida .fotoFalt .btn{font-size:12px;padding:11px 16px;margin-bottom:8px}
.sida .fotoStatus{font-size:13px;font-weight:800;color:var(--navy);margin:0 0 6px}
.sida .fotoStatus:empty{display:none}
.sida .fotoStatus.fel{color:var(--orange)}
.sida .fotoForklaring{font-size:13px;color:var(--muted);margin:0;max-width:520px}

/* Beskärningen: en fyrkantig ram som kunden drar bilden i, och ett reglage
   för zoom. Ramen är fyrkantig som fotorutan men större — en bild som ska
   dras med fingret måste gå att träffa. touch-action:none är det som gör att
   telefonen låter fingret flytta bilden i stället för att rulla sidan. */
.fotoBeskar{margin:12px 0 0;max-width:260px}
.fotoRam{position:relative;width:100%;aspect-ratio:1/1;border-radius:16px;border:1px solid var(--line);background:var(--soft);overflow:hidden;touch-action:none;cursor:grab}
.fotoRam canvas{display:block;width:100%;height:100%}
.fotoRam.drar{cursor:grabbing}
.fotoReglage{display:flex;align-items:center;gap:10px;margin:10px 0 8px}
.fotoReglage > span{font-size:13px;font-weight:800;color:var(--navy);flex:none}
.fotoReglage input[type=range]{flex:1;min-width:0;accent-color:var(--purple)}

/* En rad kunden kan fälla ut. Innehållet finns alltid, det är bara hopfällt:
   ingenting tas bort, varken på skärm eller i telefon. */
.fallUt{margin:0 0 14px}
.fallUt > summary{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--purple);cursor:pointer;list-style:none}
.fallUt > summary::-webkit-details-marker{display:none}
.fallUt > summary::before{content:"+";font-size:16px;line-height:1}
.fallUt[open] > summary::before{content:"\2013"}
.fallUt > summary:hover{color:var(--pink)}
.fallUt > summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:6px}
.fallUt .faltGrid{margin-top:12px}

/* Filväljaren är ful men får inte tas bort: den ska gå att nå med tangent-
   bord och läsas av en skärmläsare. Den flyttas undan, inte bort. */
.visuelltDold{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Ett pris som ersätter ett annat: det gamla överstruket, det nya stort. */
.sida .storPris{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:14px 0 4px}
.storPris .overstruket{text-decoration:line-through;color:var(--muted);font-size:17px;font-weight:700}
.storPris b{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:32px;font-weight:900;letter-spacing:-.04em;color:var(--navy)}
.sida .formHallare{font-size:16px;font-weight:800;color:var(--navy);margin:0 0 4px}
.sida .formPeriod{font-weight:800;color:var(--navy);margin:12px 0 10px}

@media(max-width:640px){
  .formRuta{padding:20px 18px;border-radius:18px}
  .formKort{padding:16px 15px}
  .faltGrid{grid-template-columns:minmax(0,1fr)}
  /* Fotot får ligga över texten i telefon. Ingenting tas bort, det byter
     bara riktning. */
  .fotoFalt{flex-direction:column}
  .fotoBild{width:190px;height:190px}
}