/* Pluggis – gjestesidene (forside, ladeside, betaling, lading, kvittering, min side, kart). Bygger på pluggis.css. */

/* ---------- Ramme ---------- */
.g-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.g-wrap { width: 100%; max-width: 30rem; margin: 0 auto; padding: 1rem max(1.125rem, env(safe-area-inset-right)) 2rem max(1.125rem, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: .875rem; flex: 1; }
.g-wrap > main, .g-main { display: flex; flex-direction: column; gap: .875rem; flex: 1; }
.g-wide { max-width: 64rem; }
.g-top { min-height: var(--tap); }
.g-top-nav { display: flex; align-items: center; gap: .25rem 1rem; flex-wrap: wrap; justify-content: flex-end; }
.g-top-nav .link { font-size: .9375rem; text-decoration: none; }
.g-top-nav .link:hover, .g-lang:hover { text-decoration: underline; }
.g-lang { background: none; border: 1.5px solid var(--line-strong); border-radius: 999px; min-height: 2.25rem; padding: 0 .75rem; font-size: .875rem; font-weight: 600; cursor: pointer; color: var(--ink); }
.g-enter { animation: genter .28s var(--ease); }
@keyframes genter { from { opacity: 0; transform: translateY(.375rem); } to { opacity: 1; transform: none; } }
.g-spacer { flex: 1; min-height: .25rem; }
.g-center { text-align: center; }
.g-foot { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: center; font-size: .875rem; color: var(--muted); padding-top: .5rem; }
.g-foot a, .g-foot .g-footlink { color: var(--muted); padding: .5rem 0; display: inline-block; min-height: 0; font-size: .875rem; font-weight: 400; }
.g-linkcol { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.g-linkcol .link { text-align: left; }
.g-hint { font-size: .8125rem; color: var(--muted); line-height: 1.45; margin: 0; }
.g-hint-c { text-align: center; }

/* ---------- Nattkortet (hovedkortet øverst) ---------- */
.g-hero { background: var(--night); color: var(--onnight); border-radius: var(--r-xl); padding: 1.375rem 1.5rem; display: flex; flex-direction: column; gap: .875rem; }
.g-hero .mut, .g-hero .g-sub { color: var(--onnight2); }
.g-hero-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.g-hero-code { font-size: .875rem; color: var(--onnight2); }
.g-hero-code .code { color: var(--onnight); font-size: .9375rem; }
.g-hero h1, .g-hero .g-title { font-size: 1.875rem; line-height: 1.05; margin: 0; color: var(--onnight); }
.g-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.g-price .big { font-size: 3.25rem; letter-spacing: -.04em; color: var(--spark); }
.g-price .unit { font-size: 1.0625rem; }
.g-sub { font-size: .875rem; color: var(--muted); line-height: 1.45; }
.g-hero .chip-free { background: var(--spark); color: var(--onspark); }
.g-hero .chip-off { border-color: var(--onnight2); color: var(--onnight2); }
.g-live { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--spark); }
.g-live::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.g-live.on::before { animation: gpulse 1.6s ease-in-out infinite; }
.g-live.wait { color: var(--onnight2); }
.g-live.bad { color: var(--warn); }
@keyframes gpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.g-hero-center { align-items: center; text-align: center; padding: 1.75rem 1.5rem; gap: 1.125rem; }
.g-hero-center h1, .g-hero-center h2 { font-size: 1.875rem; line-height: 1.1; margin: 0; color: var(--onnight); }
.g-hero-center p { margin: 0; color: var(--onnight2); line-height: 1.5; }

/* Tall i tre kolonner (kWh, kW, tid) */
.g-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.g-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .125rem; min-width: 0; }
.g-stats { align-items: start; }
.g-stats dt { font-size: .8125rem; color: var(--onnight2); }
.g-stats dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.g-bigkr { display: flex; align-items: baseline; gap: .5rem; }
.g-bigkr .big { font-size: 4.25rem; line-height: .95; color: var(--spark); letter-spacing: -.04em; }
.g-bigkr .unit { font-size: 1.25rem; }
.g-spark { display: block; width: 100%; height: 4.375rem; }
.g-spark path.l { stroke: var(--spark); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.g-spark path.a { fill: var(--spark); opacity: .12; }
.g-spark line { stroke: var(--nightline); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Nedtelling i ring (koble til kabelen) */
.g-ring { position: relative; width: min(11.25rem, 60vw); aspect-ratio: 1; height: auto; }
.g-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-ring .bg { stroke: var(--nightline); }
.g-ring .fg { stroke: var(--spark); transition: stroke-dashoffset 1s linear; }
.g-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; }
.g-ring-in .big { font-size: 2.75rem; color: var(--onnight); }
.g-ring-in span:last-child { font-size: .8125rem; color: var(--onnight2); }

/* ---------- Kort ---------- */
.g-card { background: var(--card); border-radius: var(--r-l); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .75rem; }
.g-card h2, .g-card h3 { margin: 0; }
.g-card-line { border: 2px solid var(--ink); }
.g-card-big { border-radius: var(--r-xl); padding: 1.5rem; }
.g-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; }
.g-row > :first-child { min-width: 0; }
.g-row .h { font-size: 1.375rem; }
.g-k { font-size: .8125rem; color: var(--muted); }
.g-strong { font-weight: 600; }
.g-rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.g-note { font-size: .875rem; line-height: 1.5; color: var(--soft); padding: 0 .25rem; margin: 0; }
.g-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; line-height: 1.45; color: var(--soft); }
.g-lines li { display: flex; gap: .625rem; align-items: baseline; }
.g-lines li::before { content: ''; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--ink); flex-shrink: 0; transform: translateY(-.125rem); }
.g-lines li[data-type='PARKING_TIME']::before { background: var(--warn); }

/* Prisgraf */
.g-chart { display: flex; flex-direction: column; gap: .75rem; }
.g-chart .seg { grid-auto-columns: auto; padding: .1875rem; }
.g-chart .seg button { min-height: 2.25rem; padding: 0 .875rem; font-size: .875rem; }
.g-chart .bars { margin-top: .5rem; }
.g-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; border-top: 1px solid var(--line); padding-top: .75rem; margin: 0; }
.g-trio > div { display: flex; flex-direction: column-reverse; gap: .125rem; }
.g-trio dt { font-size: .75rem; color: var(--muted); }
.g-trio dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.1875rem; font-variant-numeric: tabular-nums; }
.g-trio .cheap { background: var(--spark); color: var(--onspark); align-self: flex-start; padding: 0 .375rem; border-radius: .375rem; }
.g-chart details summary, .g-more summary { cursor: pointer; font-weight: 500; font-size: .9375rem; padding: .5rem 0; min-height: var(--tap); display: flex; align-items: center; }
.g-chart table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.g-chart td, .g-chart th { padding: .25rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.g-chart td:last-child, .g-chart th:last-child { text-align: right; }
.g-chart .tbl { max-height: 16rem; overflow: auto; }

/* Brukt av beløpsgrensen */
.g-meter { height: .625rem; background: var(--chip); border-radius: .3125rem; overflow: hidden; }
.g-meter > span { display: block; height: 100%; background: var(--ink); border-radius: .3125rem; transition: width .6s var(--ease); }
.g-meter.hot > span { background: var(--warn); }

/* Påfyll: tre store knapper */
.g-topups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.g-topups button { min-height: 4rem; border-radius: 1rem; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; padding: .25rem; }
.g-topups button:first-child { background: var(--spark); color: var(--onspark); border-color: var(--spark); }
.g-topups .h { font-size: 1.25rem; }
.g-topups small { font-size: .75rem; }
.g-topups button[disabled] { opacity: .5; cursor: progress; }

/* Hjelpe-boble med maskot */
.g-helper { background: var(--night); color: var(--onnight); border-radius: var(--r-l); padding: 1rem; display: flex; gap: .75rem; align-items: flex-start; }
.g-helper .mascot { margin: 0; flex-shrink: 0; color: var(--onnight); }
.g-helper strong { display: block; font-size: .8125rem; color: var(--spark); margin-bottom: .25rem; }
.g-helper p { margin: 0; font-size: .875rem; line-height: 1.45; }

/* Steg 1-2-3 */
.g-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; counter-reset: gs; }
.g-steps li { display: flex; gap: .875rem; align-items: center; font-size: 1rem; line-height: 1.4; }
.g-steps li::before { counter-increment: gs; content: counter(gs); width: 2rem; height: 2rem; border-radius: 50%; background: var(--night); color: var(--spark); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9375rem; flex-shrink: 0; }

/* Valg av beløpsgrense */
.g-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); gap: .5rem; }
.g-limits button { min-height: 3.5rem; border-radius: .875rem; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; }
.g-limits button[aria-pressed='true'] { background: var(--night); border-color: var(--night); color: var(--spark); }
.g-limits .h { font-size: 1.125rem; }
.g-limits small { font-size: .75rem; opacity: .85; }
.g-limitrow { display: flex; justify-content: space-between; align-items: center; gap: .25rem .75rem; flex-wrap: wrap; padding: 0 .25rem; font-size: .9375rem; }
.g-limitrow .link { text-align: left; }
.g-limitrow .link { font-weight: 600; text-decoration: underline; }

/* Ferdig */
.g-check { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--spark); color: var(--onspark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.g-done-head { display: flex; flex-direction: column; gap: .625rem; padding: .25rem .25rem 0; }
.g-done-head h1 { font-size: 2.125rem; margin: 0; }
.g-done-head p { margin: 0; color: var(--soft); }
.g-receipt { display: flex; flex-direction: column; gap: .625rem; }
.g-receipt .r { display: flex; justify-content: space-between; gap: .75rem; font-size: .9375rem; line-height: 1.4; }
.g-receipt .r > :first-child { color: var(--soft); }
.g-receipt .r > :last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-receipt .r.sum { font-weight: 600; font-size: 1.125rem; align-items: baseline; }
.g-receipt .r.sum > :first-child { color: var(--ink); }
.g-receipt .r.sum .h { font-size: 1.5rem; }
.g-receipt .r.mut > * { color: var(--muted); font-size: .875rem; }
.g-receipt .x { font-size: .8125rem; color: var(--muted); line-height: 1.45; margin: 0; }
.g-stamp { align-self: flex-start; }
.g-rate { display: flex; gap: .5rem; flex-wrap: wrap; }
.g-rate .btn { width: auto; flex: 1 1 8rem; }
.g-rate .btn[aria-pressed='true'] { background: var(--night); color: var(--spark); border-color: var(--night); }

/* Tilstander (feil, venter, låst) */
.g-state { background: var(--card); border-radius: var(--r-xl); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.g-state.warn { border: 2px solid var(--warn); }
.g-state.line { border: 2px solid var(--ink); }
.g-state h2 { font-size: 1.5rem; margin: 0; }
.g-state p { margin: 0; color: var(--soft); line-height: 1.5; }
.g-state ul { margin: 0; padding-left: 1.125rem; color: var(--soft); line-height: 1.5; display: flex; flex-direction: column; gap: .375rem; }
.g-state .chip { align-self: flex-start; }

/* Uten nett-banner */
.g-offline { position: sticky; top: 0; z-index: 30; background: var(--night); color: var(--onnight); padding: .625rem 1rem; font-size: .9375rem; font-weight: 500; text-align: center; }
.g-offline::before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--warn); margin-right: .5rem; vertical-align: middle; }
.g-stale .g-live { color: var(--onnight2); }

/* Skjema */
.g-field { display: flex; flex-direction: column; gap: .375rem; }
.g-field label { margin: 0; }
.g-sugg { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: var(--chip); border-radius: .75rem; padding: .625rem .75rem; font-size: .9375rem; }
.g-sugg .btn { width: auto; }
.g-inline-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.g-inline-form input { flex: 3 1 12rem; }
.g-inline-form .btn { flex: 1 0 auto; width: auto; }
.field-err { margin: .25rem 0 0; }
.g-codeform { display: flex; flex-direction: column; gap: .375rem; width: 100%; max-width: 24rem; text-align: left; }
.g-coderow { display: flex; gap: .5rem; flex-wrap: wrap; }
.g-coderow input { flex: 1 1 9rem; min-width: 0; }
.g-coderow .btn { flex: 0 0 auto; }

/* Detaljer */
.g-more { background: var(--card); border-radius: var(--r-l); padding: .25rem 1.125rem; }
.g-more[open] { padding-bottom: 1rem; }
.g-more > summary { font-weight: 600; list-style: none; justify-content: space-between; gap: .75rem; }
.g-more > summary::-webkit-details-marker { display: none; }
.g-more > summary::after { content: ''; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; flex-shrink: 0; }
.g-more[open] > summary::after { transform: rotate(-135deg); }
.g-more > :not(summary) { margin-top: .5rem; }
.g-more p { color: var(--soft); font-size: .9375rem; line-height: 1.5; }

/* Betaling */
.g-pay { display: flex; flex-direction: column; gap: .625rem; }
.g-pay .btn { justify-content: space-between; padding: 0 1.125rem; }
.g-pay .btn .r { font-weight: 500; opacity: .8; font-size: .875rem; }
.g-pay .btn-vipps { background: #FF5B24; color: #fff; }
.g-pay .btn-wallet { background: #000; color: #fff; }
:root[data-theme='dark'] .g-pay .btn-wallet { background: #fff; color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .g-pay .btn-wallet { background: #fff; color: #000; } }
.g-approved { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 3rem 1rem; }
.g-approved .g-check { width: 4.5rem; height: 4.5rem; animation: gpop .5s var(--ease); }
@keyframes gpop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.g-test { border: 1.5px dashed var(--muted); border-radius: .875rem; padding: .25rem 1rem; color: var(--muted); font-size: .875rem; }
.g-test summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }

/* Minikart på ladesiden */
.g-mini { height: 9.5rem; border-radius: var(--r-m); overflow: hidden; background: var(--chip); }

/* Tomtilstand */
.g-empty { padding-top: 1.5rem; }
.g-empty h1 { font-size: 1.875rem; margin: .5rem 0 0; }
.g-empty p { max-width: 22rem; }
.g-empty .btn-row { width: 100%; max-width: 24rem; }

/* Lister på Min side */
.g-sess { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--r-l); overflow: hidden; }
.g-sess li { display: flex; justify-content: space-between; gap: .75rem; padding: .875rem 1rem; border-bottom: 1px solid var(--line); }
.g-sess li:last-child { border-bottom: 0; }
.g-sess .t { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.g-sess .t > :first-child { font-weight: 600; }
.g-sess .t > :last-child { font-size: .8125rem; color: var(--muted); }
.g-sess .v { text-align: right; display: flex; flex-direction: column; gap: .125rem; align-items: flex-end; font-variant-numeric: tabular-nums; color: var(--ink); font-size: .9375rem; }
.g-sess .v a { font-size: .875rem; }
.g-place { background: var(--night); color: var(--onnight); border-radius: var(--r-l); padding: 1.125rem; display: flex; flex-direction: column; gap: .75rem; text-decoration: none; }
.g-place .mut { color: var(--onnight2); }

/* Lang tekst (vilkår, personvern) */
.g-legal { line-height: 1.6; }
.g-legal h1 { font-size: 2rem; }
.g-legal h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.g-legal ul { padding-left: 1.25rem; }
.g-legal li { margin-bottom: .375rem; }
.g-legal p, .g-legal li { color: var(--soft); }
.g-legal strong { color: var(--ink); }

/* ---------- PC: to kolonner på ladesiden og under lading ---------- */
@media (min-width: 60rem) {
  .g-wrap.g-wide { max-width: 64rem; }
  .g-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.25rem; align-items: start; }
  .g-cols > div { display: flex; flex-direction: column; gap: .875rem; }
  .g-cols .g-side { position: sticky; top: 1rem; }
  .g-hero .g-price .big { font-size: 3.75rem; }
}
@media (max-width: 59.99rem) { .g-cols, .g-cols > div { display: contents; } }

@media print {
  .g-top, .g-foot, .no-print, .g-more, .toast { display: none !important; }
  .g-card { border: 1px solid #ccc; }
}
.g-stack { display: flex; flex-direction: column; gap: .875rem; }
.code-input::placeholder, .fs-codein input::placeholder { color: var(--muted); opacity: .55; font-weight: 600; }
#mailslot:empty, .g-stack > :empty:not(.skeleton) { display: none; }

/* Mobil: pris og «Start lading» først, graf og forklaringer etterpå */
@media (max-width: 59.99rem) {
  .g-cols > div > * { order: 3; }
  .g-cols > div > .g-o1 { order: 1; }
  .g-cols > div > .g-o2 { order: 2; }
  .g-main > .g-foot { order: 4; }
}
/* Fast handlingsknapp nederst når startknappen er utenfor skjermen */
.g-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: .75rem max(1rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); display: flex; justify-content: center; }
.g-dock .btn { max-width: 28rem; box-shadow: 0 6px 18px rgba(16, 35, 29, .18); }
body:has(.g-dock:not([hidden])) .g-wrap { padding-bottom: 6rem; }
body:has(.g-dock:not([hidden])) .toast { bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
/* Lange ord (e-post, «Merverdiavgiftsregisteret») skal aldri gi sidelengs rulling */
.g-card, .g-receipt, .kv dd, .kv dt, .g-sess .t { overflow-wrap: anywhere; min-width: 0; }

/* Hjelp-lenken i toppen er bare for skjermleser og tastatur (chat-boblen er hovedveien) */
.g-srfocus:focus { position: static; width: auto; height: auto; clip: auto; white-space: normal; }