/* ═══════════════════════════════════════════════════════════════════════════
   SPICK — BankID-kort, delad SSOT
   ═══════════════════════════════════════════════════════════════════════════

   Kanoniskt utseende för VARJE BankID-yta i plattformen. Värdena är kopierade
   rakt av från `.boka-pay__rb-*` i astro/src/components/boka/PhasePayment.astro
   — RUT-kortet i /boka-checkouten — som är det enda kort som gått igenom
   riktig produktionsslipning.

   BAKGRUND: en genomgång 2026-08-12 hittade tio BankID-ytor, varav nio hade
   varsitt eget utseende. Knappradien var 999px på boka, 10px på fyra ytor, 8px
   på en och en blandning av 14px/100px på en. Rubriken var Playfair Display
   serif i reverify-modalen och Plus Jakarta Sans på boka. QR-ramen var 152px
   på boka, 200px med vit 8px-ram och skugga hos firmatecknare, och helt utan
   ram på dashboarden. Fem ytor hade ingen QR alls.

   PREFIX `.sbid-` i stället för `.boka-pay__rb-`: filen länkas från legacy-HTML
   där `boka-pay` inte betyder något. Värdena är identiska.

   ── TRE SAKER SOM MÅSTE FÖLJA MED, ANNARS GÅR DET TYST SÖNDER ─────────────

   1. `[hidden]`-vakten. Varje klass som sätter `display` tävlar oavgjort med
      UA:ns `[hidden] { display: none }` — den som kommer sist i kaskaden
      vinner. Fällan har kostat två prod-buggar i boka-kortet: kunden såg
      BankID-knappen OCH felrutan samtidigt. Ättlings-vakten nedan (0,2,0) slår
      varje klass egen display oavsett djup.

   2. Höjdlåset. `.sbid-panel--tall` finns bara på start- och väntläget — det är
      DÄR ett hopp stör, mitt i flödet när användaren just tryckt. Klar-läget
      får krympa; att padda det hade gett ~180px tomrum.

   3. `:hover` på `--primary`. Den primära knappen är ofta ett `<a>` (BankID:s
      autostart-länk), och en global `a:hover { color: ... }` med specificitet
      (0,1,1) slår klassen (0,1,0) — vit etikett blev mörkgrön på grön botten.
      Reglerna nedan är (0,2,0) och stänger hålet.

   ── QR-BILDER SOM INJICERAS MED innerHTML ────────────────────────────────
   Ramen stylar `img` direkt, inte via en Astro-scopad selektor. I .astro-filer
   krävs `:global(img)` eftersom runtime-injicerad markup aldrig får
   data-astro-cid-attributet. Prod-bugg 2026-08-04. Den här filen är oscopad,
   så problemet finns inte här — men det gäller fortfarande i PhasePayment.astro.

   Regel #28: ändra ALDRIG ett värde här utan att ändra samma värde i
   PhasePayment.astro, och tvärtom.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kortet ─────────────────────────────────────────────────────────────── */
.sbid-card {
  border: 1px solid #cfd8d3;
  border-radius: 12px;
  padding: 1rem;
  background: #fff;
  display: grid;
  gap: .5rem;
}
.sbid-card[hidden] { display: none; }
/* Ättlings-vakten — se punkt 1 ovan. Får inte tas bort. */
.sbid-card [hidden] { display: none; }

/* ── Paneler (ett läge per panel) ───────────────────────────────────────── */
.sbid-panel { display: flex; flex-direction: column; flex: 1; }
.sbid-panel--center { text-align: center; align-items: center; }
.sbid-panel--tall { min-height: 310px; justify-content: center; }
.sbid-spacer { flex: 1; min-height: .5rem; }

/* ── Rubrikrad ──────────────────────────────────────────────────────────── */
.sbid-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.sbid-mark { height: 26px; width: auto; display: block; flex: none; }
.sbid-markbig { height: 34px; width: auto; display: block; margin: .9rem 0 1rem; }
/* <h3> så rubriken ärver layoutens varumärkesrubrik (Plus Jakarta Sans 700).
   Ett div på 1.02rem läste som fet brödtext, inte rubrik. */
.sbid-title { font-weight: 700; font-size: 1.1rem; line-height: 1.25; color: #1c1c1a; margin: 0; }

/* ── Knappar ────────────────────────────────────────────────────────────── */
.sbid-btn {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: .94rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  text-decoration: none;
  margin-top: .35rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sbid-btn--primary { background: #0f6e56; border: 1px solid #0f6e56; color: #fff; }
.sbid-btn--outline { background: #fff; border: 1.5px solid #0f6e56; color: #0f6e56; }
.sbid-btn--ghost { background: none; border: 1px solid transparent; color: #5a6b64; font-weight: 500; }
.sbid-btn:focus-visible { outline: 2px solid #0f6e56; outline-offset: 2px; }
/* (0,2,0) — se punkt 3 ovan. Får inte sänkas till enkel klasselektor. */
.sbid-btn--primary:hover, .sbid-btn--primary:focus-visible { background: #0c5b47; border-color: #0c5b47; color: #fff; }
.sbid-btn--outline:hover, .sbid-btn--outline:focus-visible { background: #e1f5ee; color: #0f6e56; }
.sbid-btn--ghost:hover { color: #1c1c1a; background: #f7f7f5; }
.sbid-btn:active { transform: translateY(1px); }

/* ── Avdelare ───────────────────────────────────────────────────────────── */
.sbid-or { display: flex; align-items: center; gap: .7rem; margin: .6rem 0 .25rem; color: #5a6b64; font-size: .8rem; }
.sbid-or::before, .sbid-or::after { content: ""; flex: 1; height: 1px; background: #e8e8e4; }

/* ── Finstilt (personuppgiftsupplysning, ägarbeslut 2026-07-18) ─────────── */
.sbid-fine { display: flex; align-items: flex-start; gap: .45rem; margin: 1rem 0 0; font-size: .76rem; color: #5a6b64; line-height: 1.45; text-align: left; }
.sbid-fine svg { flex: none; margin-top: 2px; }

/* ── QR ─────────────────────────────────────────────────────────────────── */
.sbid-qrinstr { font-size: .86rem; color: #5a6b64; line-height: 1.5; margin: .2rem 0 .5rem; }
/* 152px yttermått − 2×10px padding = 132px synlig kod. Skannbarhet slår
   höjdparitet: läser en telefon inte koden, tillbaka till 186px. */
.sbid-qrframe { background: #fff; border: 1px solid #e8e8e4; border-radius: 12px; padding: 10px; margin: 0 auto .6rem; width: 152px; height: 152px; }
.sbid-qrframe > div { width: 100%; height: 100%; }
.sbid-qrframe img, .sbid-qrframe canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* ── Status ─────────────────────────────────────────────────────────────── */
/* Statustexten står ensam — inget "Status:"-prefix, ingen rå enum. */
.sbid-status { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .88rem; color: #5a6b64; margin: 0; }
.sbid-pulse { width: 7px; height: 7px; border-radius: 50%; background: #1d9e75; flex: none; animation: sbid-pulse 1.4s ease-in-out infinite; }
@keyframes sbid-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ── Klart ──────────────────────────────────────────────────────────────── */
.sbid-ok { display: flex; gap: .7rem; align-items: flex-start; background: #f4fbf8; border: 1px solid #cfe9df; border-radius: 12px; padding: .85rem .95rem; text-align: left; }
.sbid-check { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #0f6e56; color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 700; }
.sbid-okname { display: block; font-size: .92rem; color: #1c1c1a; }
.sbid-addr { display: block; font-size: .8rem; color: #5a6b64; line-height: 1.45; margin-top: .1rem; }

/* ── Fel ────────────────────────────────────────────────────────────────── */
.sbid-errmsg { display: flex; gap: .6rem; align-items: flex-start; background: #fbf2f0; border: 1px solid #e3b9b1; border-radius: 12px; padding: .85rem .95rem; font-size: .88rem; line-height: 1.5; color: #1c1c1a; }

/* ── Rörelsekänslighet ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sbid-btn { transition: none; }
  .sbid-btn:active { transform: none; }
  .sbid-pulse { animation: none; opacity: .8; }
}