/* ============================================================
   Parkla — typsnittsväljare, förfrågningar, foto, betyg
   ============================================================ */

/* ---------- välj typsnitt ---------- */
.fontpick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:520px){.fontpick{grid-template-columns:1fr}}
.fontcard{text-align:left;padding:15px 16px;border:1.5px solid var(--rule);border-radius:var(--r-md);
  background:var(--card);transition:all .22s var(--ease)}
.fontcard:hover{border-color:var(--ink-25)}
.fontcard.on{border-color:var(--green);background:var(--green-wash);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.fontcard b{display:block;font-size:.95rem;font-weight:600;letter-spacing:-.015em}
.fontcard span{display:block;font-family:var(--sans);font-size:.76rem;color:var(--ink-45);margin-top:2px}
.fontcard i{display:block;font-style:normal;font-size:1.25rem;font-weight:600;letter-spacing:-.028em;
  margin-top:12px;color:var(--ink)}

/* ---------- förfrågningar ---------- */
.reqcard{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--card);padding:18px;
  box-shadow:var(--lift);animation:fadeUp .4s var(--ease) both}
.reqcard .av{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--pine);color:var(--on-dark);
  display:grid;place-items:center;font-size:.95rem;font-weight:600}

/* ---------- foto in och ut ---------- */
.photoblock{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule);text-align:left}
.photogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
@media(max-width:520px){.photogrid{grid-template-columns:repeat(3,1fr)}}
.photo{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--rule);
  background:var(--paper-2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .when{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font-size:.66rem;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.photo .del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px)}
.photo.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  border-style:dashed;border-color:var(--rule-2);color:var(--ink-45);transition:all .22s var(--ease)}
.photo.add:hover{border-color:var(--green);color:var(--green);background:var(--green-wash)}
.photo.add span{font-size:.74rem;font-weight:500}

/* ---------- betygsätt ---------- */
.stars{display:flex;gap:6px;justify-content:center;margin:8px 0 4px}
.star{color:var(--rule-2);transition:transform .2s var(--ease),color .2s;line-height:0;padding:4px}
.star:hover{transform:scale(1.14)}
.star:active{transform:scale(.94)}
.star.on{color:var(--brass)}

/* ---------- platsväljare ---------- */
.placebtn{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:12px 16px;
  border:1px solid var(--rule-2);border-radius:var(--r-md);background:var(--card);
  font-size:1rem;font-weight:500;transition:border-color .2s,background .2s}
.placebtn:hover{border-color:var(--ink-25);background:var(--paper-2)}
.placebtn>span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.placebtn svg:first-child{color:var(--green);flex:0 0 auto}
.placebtn .flip90{color:var(--ink-25);transform:rotate(90deg);flex:0 0 auto}

/* ---------- vinterförvar ---------- */
.seasonbar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--r-md);
  background:var(--pine);color:var(--on-dark);flex-wrap:wrap}
.seasonbar .ic{color:var(--green-lift);flex:0 0 auto}
.seasonbar .t{flex:1;min-width:200px}
.seasonbar .t b{display:block;font-size:.98rem;font-weight:600}
.seasonbar .t span{display:block;font-size:.82rem;color:rgba(244,241,233,.62);margin-top:2px}
.seasonbar .seg{background:rgba(244,241,233,.1);border-color:rgba(244,241,233,.2)}
.seasonbar .seg button{color:rgba(244,241,233,.66)}
.seasonbar .seg button.on{background:var(--on-dark);color:var(--pine)}
.seasonbar .btn{border-color:rgba(244,241,233,.3);color:var(--on-dark)}
.seasonbar .btn:hover{background:rgba(244,241,233,.1)}

.seasoncard{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;text-align:left;
  border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--card);
  transition:all .22s var(--ease)}
.seasoncard:hover{border-color:var(--ink-25)}
.seasoncard.on{border-color:var(--green);background:var(--green-wash);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.seasoncard .t{flex:1;min-width:0}
.seasoncard .t b{display:block;font-size:1rem;font-weight:600}
.seasoncard .t span{display:block;font-size:.82rem;color:var(--ink-45);margin-top:2px}
.seasoncard .p{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.028em;
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* försäkringsintyg */
.attest{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  border:1.5px dashed var(--rule-2);cursor:pointer;transition:all .22s var(--ease)}
.attest:hover{border-color:var(--ink-25)}
.attest.on{border-style:solid;border-color:var(--green);background:var(--green-wash)}
.attest .box{width:24px;height:24px;flex:0 0 auto;border-radius:6px;border:1.5px solid var(--rule-2);
  display:grid;place-items:center;color:transparent;background:var(--card);transition:all .2s var(--ease)}
.attest.on .box{background:var(--green);border-color:var(--green);color:#fff}
.attest .t{flex:1;min-width:0}
.attest .t b{display:block;font-size:.95rem;font-weight:600}
.attest .t span{display:block;font-size:.82rem;color:var(--ink-45);margin-top:5px;line-height:1.5}

/* lägesväljaren rymmer sex lägen */
#modeSeg{overflow-x:auto;scrollbar-width:none}
#modeSeg::-webkit-scrollbar{display:none}
#modeSeg button{flex:0 0 auto;min-width:72px}
@media(min-width:760px){#modeSeg button{flex:1}}

/* ---------- större tryckytor på pekskärm ---------- */
@media (pointer: coarse){
  .chip{min-height:44px;padding-top:10px;padding-bottom:10px}
  .btn-sm{min-height:44px;padding-top:10px;padding-bottom:10px}
  .seg button{min-height:42px}
  .tabbar button{min-height:52px}
  .x{width:40px;height:40px}
  .fav{width:38px;height:38px}
  .mbtn{width:50px;height:50px}
  .mseg button{min-height:42px;padding-inline:17px}
  .star{padding:7px}
  .stepper button{width:52px;height:52px}
}


/* ---------- fält måste vara 16 px, annars zoomar iOS in vid fokus ---------- */
.inp.sortsel{font-size:max(16px,1rem)}
.inp.dump{font-size:13px}
@media (pointer: coarse){
  .inp,.inp.sortsel,input,select,textarea{font-size:max(16px,1rem)}
  .inp.dump{font-size:max(16px,1rem)}
  .inp.plate{font-size:1.35rem}
}
@media(min-width:760px){.inp.sortsel{font-size:.86rem}}

/* ---------- trygghetsraden i hero ---------- */
.trustrow{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;padding-top:26px;
  border-top:1px solid var(--rule)}
.trustrow>span,.trustrow>.asbtn{display:inline-flex;align-items:center;gap:8px;
  font-size:.88rem;color:var(--ink-70);line-height:1.4}
.trustrow svg{color:var(--green);flex:0 0 auto}
.trustrow .asbtn{border:0;background:none;padding:0;text-align:left;transition:color .2s}
.trustrow .asbtn:hover{color:var(--ink)}
.trustrow .asbtn b{font-weight:600;color:var(--ink)}
.trustrow .asbtn svg:last-child{color:var(--ink-25);transition:transform .3s var(--ease)}
.trustrow .asbtn:hover svg:last-child{transform:translateX(3px)}
@media(max-width:560px){.trustrow{gap:12px;flex-direction:column;margin-top:26px}}

/* hero-siffrorna behöver luft under trygghetsraden */
.hero .figures{margin-top:34px}

/* kronor som liten efterställd enhet, inte i displaystorlek */
.figures b .u{font-style:normal;font-size:.5em;font-weight:500;color:var(--ink-45);
  margin-left:.22em;letter-spacing:0;vertical-align:baseline}


/* ---------- två tydliga dörrar ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.doors{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:26px 24px;border:1.5px solid var(--rule);border-radius:var(--r-lg);background:var(--card);
  transition:border-color .25s var(--ease),transform .15s var(--ease),box-shadow .25s}
.door:hover{border-color:var(--green);box-shadow:var(--lift)}
.door:active{transform:scale(.99)}
.door .ic{color:var(--green);margin-bottom:6px}
.door b{font-size:1.25rem;font-weight:600;letter-spacing:-.022em;line-height:1.25}
.door .d{font-size:.95rem;color:var(--ink-70);line-height:1.5}
.door .go{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:.95rem;
  font-weight:600;color:var(--green)}
.door .arw{transition:transform .3s var(--ease)}
.door:hover .arw{transform:translateX(4px)}
.door.alt{background:var(--pine);color:var(--on-dark);border-color:transparent}
.door.alt .ic,.door.alt .go{color:var(--green-lift)}
.door.alt .d{color:rgba(244,241,233,.7)}
@media(max-width:560px){.door{padding:22px 20px}.door b{font-size:1.15rem}}

/* ---------- fråga ovanför tidsvalen ---------- */
.askrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:16px;flex-wrap:wrap}
.askrow b{font-size:1rem;font-weight:600;letter-spacing:-.014em}
.helplink{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--green);font-weight:500}
.helplink:hover{text-decoration:underline}

/* ---------- hjälpknappen ---------- */
/* Med aktiv parkering ligger sessionsraden dar hjalpknappen bor — lyft den. */
body.harsession .helpfab{bottom:calc(148px + env(safe-area-inset-bottom))}
.helpfab{position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:66;
  transition:bottom .18s var(--ease),transform .18s var(--ease);
  display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:.9rem;font-weight:600;
  box-shadow:var(--lift-2);transition:transform .18s var(--ease)}
.helpfab:hover{transform:translateY(-2px)}
.helpfab:active{transform:scale(.96)}
@media(min-width:981px){.helpfab{bottom:24px}}
@media(max-width:420px){.helpfab span{display:none}.helpfab{padding:14px;border-radius:50%}}

.helpcard{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:18px;
  border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--card);
  transition:border-color .2s,background .2s}
.helpcard:hover{border-color:var(--green);background:var(--green-wash)}
.helpcard .ic{color:var(--green);flex:0 0 auto}
.helpcard .t{flex:1;min-width:0}
.helpcard .t b{display:block;font-size:1.02rem;font-weight:600}
.helpcard .t span{display:block;font-size:.86rem;color:var(--ink-45);margin-top:2px}

/* ---------- lite större text på pekskärm ---------- */
@media (pointer: coarse){
  html{font-size:17px}
  .lede{font-size:1.06rem}
  .door .d{font-size:1rem}
}


/* ---------- valbara rader som syns ---------- */
.pickrows{display:flex;flex-direction:column;gap:8px}
.pickrow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px 16px;
  border:2px solid var(--rule);border-radius:var(--r-md);background:var(--card);
  transition:border-color .2s,background .2s}
.pickrow:hover{border-color:var(--ink-25)}
.pickrow.on{border-color:var(--green);background:var(--green-wash)}
.pickrow .mark{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:2px solid var(--rule-2);
  display:grid;place-items:center;color:transparent;background:var(--card);transition:all .2s var(--ease)}
.pickrow.on .mark{background:var(--green);border-color:var(--green);color:#fff}
.pickrow .t{flex:1;min-width:0}
.pickrow .t b{display:block;font-size:1rem;font-weight:600}
.pickrow .t span{display:block;font-size:.84rem;color:var(--ink-45);margin-top:1px}

/* ---------- direkt eller godkännande ---------- */
.bookmode{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);
  font-size:.9rem}
.bookmode.now{background:var(--green-wash);color:var(--ink-70)}
.bookmode.now svg{color:var(--green);flex:0 0 auto}
.bookmode.ask{background:var(--brass-wash);color:var(--ink-70)}
.bookmode.ask svg{color:var(--brass);flex:0 0 auto}
.bookmode b{display:block;color:var(--ink);font-weight:600}
.bookmode span{display:block;margin-top:2px}


/* ---------- ny version finns ---------- */
.updbar{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom));z-index:140;
  transform:translate(-50%,16px);opacity:0;transition:.35s var(--ease);
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;
  background:var(--green);color:#fff;font-size:.9rem;font-weight:500;box-shadow:var(--lift-2);
  max-width:92vw}
.updbar.on{opacity:1;transform:translate(-50%,0)}
.updbar b{font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(min-width:981px){.updbar{bottom:90px}}


/* ---------- kalender man kan läsa och klicka i ---------- */
.cal2{border:1px solid var(--rule);border-radius:var(--r-md);padding:16px;background:var(--card)}
.cal2-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cal2-h b{font-size:1.02rem;font-weight:600;letter-spacing:-.014em}
.cal2-h .nav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule);color:var(--ink-70);transition:all .2s}
.cal2-h .nav svg{transform:rotate(180deg)}
.cal2-h .nav.next svg{transform:none}
.cal2-h .nav:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.cal2-h .nav:disabled{opacity:.28;pointer-events:none}
.cal2-w{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal2-w span{text-align:center;font-size:.74rem;color:var(--ink-45);font-weight:500;padding:2px 0}
.cal2-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal2-g .d{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;font-variant-numeric:tabular-nums;border:1.5px solid transparent}
.cal2-g .d.tom{visibility:hidden}
.cal2-g .d.ledig{background:var(--green-wash);color:var(--green);cursor:pointer;
  transition:transform .14s var(--ease),background .18s,border-color .18s}
button.d.ledig:hover{border-color:var(--green);transform:scale(1.06)}
button.d.ledig:active{transform:scale(.94)}
.cal2-g .d.vald{background:var(--green);color:#fff;border-color:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.cal2-g .d.upptagen{background:var(--paper-2);color:var(--ink-25);text-decoration:line-through;
  text-decoration-thickness:1.5px}
.cal2-g .d.passerad{color:var(--ink-25);opacity:.4}
.cal2-sum{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:.88rem;color:var(--ink-70)}
.cal2-sum b{color:var(--ink);font-weight:600}
.cal2-l{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.8rem;color:var(--ink-45)}
.cal2-l i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.cal2-l .l-ledig{background:var(--green-wash);border:1.5px solid var(--green)}
.cal2-l .l-upptagen{background:var(--paper-2);border:1.5px solid var(--rule-2)}
.cal2-l .l-vald{background:var(--green)}
@media (pointer: coarse){.cal2-g .d{font-size:1rem}.cal2-h .nav{width:44px;height:44px}}


/* ---------- värdens stängda dagar ---------- */
.cal2-g .d.stangd{background:var(--clay-wash);color:var(--clay);border-color:transparent;
  text-decoration:line-through;text-decoration-thickness:1.5px;cursor:pointer;
  transition:transform .14s var(--ease)}
button.d.stangd:hover{border-color:var(--clay);transform:scale(1.06)}
button.d.stangd:active{transform:scale(.94)}
.cal2-l .l-upptagen{background:var(--paper-2);border:1.5px solid var(--rule-2)}


/* ---------- kalender med priser ---------- */
.calmode{margin-bottom:14px}
.cal2-g .d.medpris{aspect-ratio:auto;min-height:52px;flex-direction:column;gap:1px;padding:5px 2px;
  display:flex;align-items:center;justify-content:center}
.cal2-g .d.medpris i{font-style:normal;font-size:.9rem;font-weight:600;line-height:1}
.cal2-g .d.medpris u{text-decoration:none;font-size:.63rem;opacity:.7;font-variant-numeric:tabular-nums;
  line-height:1}
.cal2-g .d.special{background:var(--brass-wash);color:var(--brass);
  border-color:color-mix(in srgb,var(--brass) 45%,transparent)}
button.d.special:hover{border-color:var(--brass)}
.cal2-l .l-special{background:var(--brass-wash);border:1.5px solid var(--brass)}
.calquick{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}

/* "från" framför priset i listan */
.spot .price .fran{display:block;font-style:normal;font-size:.7rem;color:var(--ink-45);margin-bottom:1px}


/* ---------- evenemang i kalendern ---------- */
.cal2-g .d.harevent{position:relative}
.cal2-g .d .evdot{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;
  background:var(--clay);box-shadow:0 0 0 2px var(--card)}
.cal2-l .l-event{background:var(--clay);border:0}

.evtips{border:1px solid color-mix(in srgb,var(--clay) 35%,transparent);border-radius:var(--r-md);
  padding:16px;background:var(--clay-wash)}
.evtips .ic{color:var(--clay);flex:0 0 auto}
.evtips>.row>div>b{display:block;font-size:.98rem;font-weight:600}
.evtips>.row>div>span{display:block;font-size:.86rem;color:var(--ink-70);margin-top:3px;line-height:1.5}
.evtips>.row>div>span b{display:inline;font-size:inherit;font-weight:600;color:var(--ink)}
.evlist{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.evrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--clay) 22%,transparent)}
.evrow .t{flex:1;min-width:0}
.evrow .t b{display:block;font-size:.9rem;font-weight:600}
.evrow .t span{display:block;font-size:.78rem;color:var(--ink-45);margin-top:1px}

.evbanner{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--clay-wash);border:1px solid color-mix(in srgb,var(--clay) 30%,transparent)}
.evbanner .ic{color:var(--clay);flex:0 0 auto}
.evbanner div{flex:1;min-width:0}
.evbanner b{display:block;font-size:.94rem;font-weight:600}
.evbanner span{display:block;font-size:.79rem;color:var(--ink-45);margin-top:2px}


/* ---------- tidig tillgång ---------- */
.livebar{display:flex;align-items:flex-start;gap:13px;padding:14px 22px;
  background:var(--pine);color:var(--on-dark)}
.livebar svg{color:var(--green-lift);flex:0 0 auto;margin-top:2px}
.livebar b{display:block;font-size:.95rem;font-weight:600}
.livebar span{display:block;font-size:.86rem;color:rgba(244,241,233,.72);margin-top:2px;max-width:70ch}
.callout.clay{background:var(--clay-wash)}


/* ---------- parkera nu ---------- */
.tag.nu{position:relative}
.tag.nu::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-lift);
  animation:nuPuls 2s var(--ease) infinite}
@keyframes nuPuls{0%,100%{opacity:1}50%{opacity:.25}}

#sessbox{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:75}
@media(min-width:981px){#sessbox{bottom:0}}
.sessbar{display:flex;align-items:center;gap:14px;padding:13px 18px;
  background:var(--pine);color:var(--on-dark);box-shadow:0 -6px 24px -14px rgba(0,0,0,.6);
  max-width:var(--maxw);margin:0 auto}
.sessbar.hold{background:var(--brass);color:#231703}
.sessbar .ic{flex:0 0 auto}
.sessbar .t{flex:1;min-width:0}
.sessbar .t b{display:block;font-size:.94rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sessbar .t span{display:block;font-size:.83rem;opacity:.75;font-variant-numeric:tabular-nums}
.sessbar .btn{flex:0 0 auto;border-color:rgba(255,255,255,.35);color:inherit}
.sessbar .btn-p{background:var(--on-dark);color:var(--pine);border-color:transparent}
.sessbar .btn-c{background:#fff;color:var(--clay);border-color:transparent}
body.harsession{padding-bottom:calc(128px + env(safe-area-inset-bottom))}
@media(min-width:981px){body.harsession{padding-bottom:70px}}

/* ============================================================
   Betalningsrutan — Stripe Payment Element
   ============================================================ */
.paysheet{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(10,15,14,.42);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
}
.paysheet.pa{ opacity:1 }
@media (min-width:640px){ .paysheet{ align-items:center } }

.paysheet-in{
  position:relative; width:100%; max-width:460px;
  background:var(--card); color:var(--ink);
  border-radius:24px 24px 0 0;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 48px rgba(10,15,14,.22);
  transform:translateY(14px); transition:transform .26s cubic-bezier(.22,1,.36,1);
  max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.paysheet.pa .paysheet-in{ transform:translateY(0) }
@media (min-width:640px){
  .paysheet-in{ border-radius:22px; box-shadow:0 22px 64px rgba(10,15,14,.26) }
}

.paysheet-in h2{
  font-family:var(--display); font-size:1.4rem; line-height:1.2;
  letter-spacing:-.015em; margin:0 40px 0 0;
}
.paysheet-sub{ margin-top:8px; color:var(--ink-55); font-size:.94rem; line-height:1.5 }

.paysheet-x{
  position:absolute; top:18px; right:16px;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink-55);
  cursor:pointer; transition:background .16s ease, color .16s ease, transform .16s ease;
}
.paysheet-x:hover{ background:var(--rule); color:var(--ink); transform:scale(1.05) }
.paysheet-x:active{ transform:scale(.94) }

#pay-el{ margin-top:20px; min-height:64px }

.paysheet-ok{
  width:100%; margin-top:18px; padding:16px;
  font-size:1.02rem; font-weight:600; border-radius:15px;
}
.paysheet-ok:disabled{ opacity:.6; cursor:progress }

.paysheet-trygg{
  margin-top:14px; text-align:center;
  color:var(--ink-45); font-size:.8rem; line-height:1.45;
}

.paysheet-fel{
  margin-top:12px; padding:11px 13px; border-radius:12px;
  background:color-mix(in srgb, var(--clay) 10%, transparent);
  color:var(--clay); font-size:.88rem; line-height:1.45;
  border:1px solid color-mix(in srgb, var(--clay) 24%, transparent);
}

/* Röd bricka: skarpt läge med riktiga pengar */
.tag.red{
  background:color-mix(in srgb, var(--clay) 12%, transparent);
  color:var(--clay);
  border-color:color-mix(in srgb, var(--clay) 26%, transparent);
}


/* ============================================================
   Lösenordsfältet med ögat
   ============================================================ */
.pwwrap{position:relative}
.pwwrap .inp{padding-right:52px;width:100%}
.pweye{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;
  border:0;background:none;border-radius:10px;cursor:pointer;
  color:var(--ink-45);transition:color .16s var(--ease),background .16s var(--ease);
}
.pweye:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pweye.on{color:var(--green)}
.pweye:active{transform:translateY(-50%) scale(.92)}

/* ============================================================
   Grundare-badge — guld, för de första värdarna
   ============================================================ */
.tag.grundare{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brass) 20%, transparent), color-mix(in srgb, var(--brass) 12%, transparent));
  color:var(--brass);
  border-color:color-mix(in srgb, var(--brass) 40%, transparent);
  font-weight:600;
}
.tag.grundare svg{ stroke:var(--brass) }
:root[data-theme="dark"] .tag.grundare{
  color:#E8C766;
  border-color:color-mix(in srgb, #E8C766 34%, transparent);
}
:root[data-theme="dark"] .tag.grundare svg{ stroke:#E8C766 }

/* ============================================================
   Samtyckesruta (cookie/pixel) — visas bara när pixel är satt
   ============================================================ */
.consentbar{
  position:fixed; left:0; right:0; z-index:80;
  bottom:calc(70px + env(safe-area-inset-bottom));
  display:flex; justify-content:center; padding:0 12px;
  pointer-events:none;
}
@media(min-width:981px){ .consentbar{ bottom:20px } }
.consent-in{
  pointer-events:auto; width:100%; max-width:560px;
  background:var(--card); border:1px solid var(--rule); border-radius:16px;
  box-shadow:var(--lift-2); padding:14px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.consent-in p{ flex:1; min-width:200px; margin:0; font-size:.86rem; line-height:1.45; color:var(--ink-70,var(--ink)) }
.consent-btns{ display:flex; gap:8px; flex:none }
.consent-btns .btn{ min-height:40px }
.consent-ok{ color:var(--green); border-color:color-mix(in srgb,var(--green) 40%,transparent) }
.consent-ok:hover{ background:var(--green-wash) }