/* ============================================================
   KVITTERINGEN — ÉT ARK TIL ALLE NI STEDER  (4. sep 2026)
   ------------------------------------------------------------
   Kundens ord: *"kan vi få animationen og kvitteringen til at
   være bedre og dermed få den slags animation og kvittering alle
   steder man bestiller."*

   Der var SEKS kvitteringer med hver sin form: forsiden,
   smørrebrødssiden, tapas, bestil/, ved-bordet/, bord/, de fire
   forespørgselssider og arrangementsreservationen. De sagde det
   samme og så forskellige ud, og hver rettelse skulle laves seks
   gange — husets dyreste mønster.

   ⚠️ ARKET HÆNGER IKKE PÅ ÉT TEMAS VARIABLER.
   `havnegrillen.css` og `css/style.css` har hver sit sæt navne
   (--cream2 mod --sand2, --red-d mod --red-dyb), og de to
   verdener deles om bestillingssiderne. Hver farve står derfor
   med sin egen reserve: var(--cream2, var(--sand2, #f7ede1)).
   Det er ikke pænt, men det er ÉT ark — og alternativet er to
   kopier, der skrider fra hinanden, første gang nogen retter
   den ene. Arret fra --overskrift (24/8) og fra --r/--display
   (4/9) er præcis det her problem set fra den anden side.

   ⚠️ OG INGEN LAYOUT-EGENSKABER ANIMERES. Reglen fra 31/8 står:
   kun transform, opacity og stroke-dashoffset — det sidste
   kører på kompositoren som de to andre. En prøve i
   gennemgang.spec.js læser arkene og falder på
   width/height/padding/margin i en keyframe.
   ============================================================ */

.kvit-tak{text-align:center}

/* ---- HAKKET ------------------------------------------------
   Ringen tegner sig, hakket følger efter, og hele mærket
   sætter sig med et lille spring. Tre bevægelser, der peger
   samme vej: "det gik igennem". */
.kvit-hak{width:78px;height:78px;display:block;margin:4px auto 16px;
  transform:scale(.7);opacity:0;
  animation:kvit-pop .42s cubic-bezier(.2,.9,.24,1) forwards}
.kvit-hak .kvit-ring{
  fill:none;stroke:var(--red,#d62a3a);stroke-width:3;
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:kvit-tegn .5s cubic-bezier(.4,0,.2,1) .1s forwards}
.kvit-hak .kvit-streg{
  fill:none;stroke:var(--red,#d62a3a);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:kvit-tegn .3s cubic-bezier(.4,0,.2,1) .46s forwards}
@keyframes kvit-tegn{to{stroke-dashoffset:0}}
@keyframes kvit-pop{
  0%{transform:scale(.7);opacity:0}
  60%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1);opacity:1}}

/* ---- INDHOLDET TRÆDER IND, ÉN DEL AD GANGEN ----------------
   ⚠️ FORSKYDNINGEN ER I SEKUNDER, IKKE I EN LØKKE. Der er højst
   fire dele, og fire linjer CSS er billigere end en JS-timer,
   der skal ryddes op efter. */
.kvit-trin{opacity:0;transform:translateY(10px);
  animation:kvit-ind .42s cubic-bezier(.2,.9,.24,1) forwards}
.kvit-trin-1{animation-delay:.30s}
.kvit-trin-2{animation-delay:.40s}
.kvit-trin-3{animation-delay:.50s}
.kvit-trin-4{animation-delay:.60s}
@keyframes kvit-ind{to{opacity:1;transform:translateY(0)}}

.kvit-titel{margin:0 0 6px}
.kvit-hint{margin:0 auto 18px;max-width:34em}

/* ---- NUMMERET ----------------------------------------------
   ⚠️ ÉT TAL, IKKE TO KODER. Kundens spørgsmål til den gamle
   udgave: *"hvad er referance?"* — og han er den, der har bygget
   systemet. Kunne HAN ikke se, hvad den var til, kan gæsten
   ikke. Referencen er rækkens nøgle, lavet i browseren; nummeret
   er dét, man siger ved lugen. Kom nummeret, står det ALENE.

   Kom det ikke — filen ikke kørt, nettet væk — eller findes der
   slet ikke et nummer (en forespørgsel har kun sin reference),
   træder referencen frem og bliver det store. Så er der altid
   ÉN ting at sige, aldrig to. */
.kvit-nr{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  /* ⚠️ MÅLT PÅ 1280 PX: uden loftet strakte boksen sig over hele
     panelet, og nummeret stod som et lille tal midt i en meget
     bred flade. Det er den ene ting, gæsten skal sige — den skal
     se ud som en billet, ikke som en bjælke. */
  max-width:340px;margin-inline:auto;
  padding:16px 18px;border-radius:18px;
  background:var(--cream2,var(--sand2,#f7ede1));
  border:1px solid rgba(36,26,23,.08)}
.kvit-nr-navn{font-size:12.5px;font-weight:600;
  color:var(--muted,#8b7871);letter-spacing:.06em;text-transform:uppercase}
.kvit-nr-tal{font-family: "Host Grotesk", system-ui, sans-serif;
  font-size:44px;line-height:1.05;
  color:var(--red-d,var(--red-dyb,#b41f2e));font-variant-numeric:tabular-nums}
.kvit-nr-ref{font-size:12px;color:var(--muted,#8b7871)}
/* ⚠️ ORDET FORAN ER SVARET PÅ KUNDENS EGET SPØRGSMÅL  (4/9):
   *"hvad er referance?"* Den stod som en nøgen kode under
   nummeret — to koder, hvoraf den ene var uforklaret. Nu siger
   den, hvad den er. I den tomme udgave står ordet allerede som
   overskrift, og der må det ikke stå to gange. */
.kvit-nr-mrk{margin-right:.35em}
/* Uden et nummer er referencen det, gæsten skal sige. */
.kvit-nr-tom .kvit-nr-tal{display:none}
.kvit-nr-tom .kvit-nr-ref{font-size:19px;font-weight:600;
  color:var(--red-d,var(--red-dyb,#b41f2e));letter-spacing:.01em}

/* ---- LINJERNE ---------------------------------------------- */
.kvit-liste{margin-top:16px;text-align:left}
.kvit-linje{display:flex;justify-content:space-between;gap:14px;
  padding:9px 2px;border-bottom:1px solid rgba(36,26,23,.07);font-size:14px}
.kvit-linje:last-child{border-bottom:0}
.kvit-l-pris{color:var(--muted,#8b7871);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.kvit-total{border-top:1px solid rgba(36,26,23,.16);margin-top:4px}
.kvit-total .kvit-l-navn{font-weight:600}
.kvit-total .kvit-l-pris{color:inherit;font-weight:700}
.kvit-fine{margin-top:14px}

/* ⚠️ EN GÆST, DER HAR SLÅET BEVÆGELSE FRA, SKAL SE DET FÆRDIGE
   MÆRKE — ikke et halvt tegnet hak. Et hak, der aldrig kommer,
   er en kvittering, der ser uafsluttet ud. */
@media (prefers-reduced-motion:reduce){
  .kvit-hak,.kvit-hak .kvit-ring,.kvit-hak .kvit-streg,.kvit-trin{
    animation:none;opacity:1;transform:none;stroke-dashoffset:0}
}

/* ============================================================
   VEJEN TIL KVITTERINGEN, DER LEVER  (4/9)
   ------------------------------------------------------------
   Kvitteringen i fanen er væk, når fanen er væk. Linket her
   fører til min-bestilling/, som kan bogmærkes, deles og åbnes
   igen, mens gæsten venter — og som siger til, når maden er
   klar, eller når køkkenet har måttet sige nej.

   ⚠️ DEN ER HVID, IKKE RØD. Rød betyder "det her er handlingen"
   i hele huset, og handlingen er overstået: hun HAR bestilt.
   Det her er en vej videre, ikke en knap mere at trykke på.

   ⚠️ OG TRYKFLADEN ER 48 PX. Gennemgangen fælder alt under 30,
   og et link, gæsten skal ramme med en fedtet finger på en mole,
   er det sidste sted at spare.
   ============================================================ */
.kvit-foelg {
  display: block;
  margin-top: 16px;
  padding: 14px 18px;
  min-height: 48px;
  border-radius: 999px;
  background: var(--cream2, var(--sand2, #f7ede1));
  color: var(--ink, var(--sea, #241a17));
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(36, 26, 23, .10);
}

/* ⚠️ MAILKNAPPEN PÅ KVITTERINGEN  (8/9). Kunden så en rå
   mailadresse løbe hen over tre linjer i rødt — det eneste sted
   på gæstesiden, hvor en adresse stod som brødtekst. Den er
   designets egen .g nu; her står kun luften omkring den.
   Knappens eget udseende bor i havnegrillen.css, så de to slags
   knapper på siden ikke kan skride fra hinanden. */
.kvit-mail{margin-top:16px;text-align:center}
.kvit-mail .hint{margin:0 auto 12px;max-width:26em}