/* ==========================================================================
   DANISH FOOD FESTIVAL — køb af armbånd
   Almindelig underside på hjemmesiden. Samme tokens som forsiden.
   ========================================================================== */

:root{
  --porcelaen:#F7F4EE; --porcelaen-2:#EBE5D9; --porcelaen-3:#DFD7C7;
  --kongeblaa:#24406B; --kongeblaa-2:#16294A; --kongeblaa-3:#0E1B33;
  --messing:#B08D57; --messing-lys:#E3D2B6;
  --brosten:#6E6A63; --blaek:#171513; --hvid:#fff;
  --groen:#3E7A54;

  --radius-sm:6px; --radius-md:14px; --radius-lg:22px; --radius-pill:100px;
  --max-w:1160px; --pad-x:clamp(1.25rem,5vw,3rem); --nav-h:68px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-md:0 12px 34px rgba(22,41,74,.10);
  --shadow-lg:0 28px 70px rgba(22,41,74,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0; background:var(--porcelaen); color:var(--blaek);
  font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Bodoni Moda',Georgia,serif; font-weight:400; line-height:1.08;
  letter-spacing:-.01em; margin:0; color:var(--kongeblaa-2)}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
a{color:inherit}
button,input{font:inherit}

body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9990; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:absolute; top:8px; left:8px; z-index:10000;
  background:var(--kongeblaa-2); color:var(--porcelaen);
  padding:12px 20px; border-radius:var(--radius-sm); text-decoration:none;
  transform:translateY(-180%); transition:transform .25s var(--ease-out);
}
.skip-link:focus{transform:translateY(0)}

a:focus-visible,button:focus-visible,input:focus-visible,
input[type=checkbox]:focus-visible + .dag-inder,
input[type=radio]:focus-visible + .baand-inder,
input[type=radio]:focus-visible + .hent-inder{
  outline:3px solid var(--kongeblaa); outline-offset:3px; border-radius:2px;
}

.t-label{
  display:block; font-size:.68rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--messing); margin-bottom:14px;
}

/* ==================================================================== TOP */
.top{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; padding:0 var(--pad-x);
  background:rgba(247,244,238,.92); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--porcelaen-3);
}
.top-inder{width:100%; max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px}
.logo{font-family:'Bodoni Moda',Georgia,serif; font-size:1.02rem; letter-spacing:.04em;
  color:var(--kongeblaa-2); text-decoration:none; white-space:nowrap}
.logo span{color:var(--messing)}
.top-meta{margin:0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brosten); white-space:nowrap}

/* ================================================================= INTRO */
.side{padding:clamp(2.5rem,5vw,4.5rem) var(--pad-x) clamp(3rem,6vw,5rem);
  max-width:var(--max-w); margin:0 auto}
.intro{max-width:56ch; margin-bottom:clamp(2.2rem,4vw,3.4rem)}
h1{font-size:clamp(2.3rem,5vw,3.6rem); margin-bottom:18px}
.manchet{font-size:clamp(1rem,1.4vw,1.1rem); color:var(--brosten); margin:0}

/* ================================================================== KØB */
.koeb{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,4vw,3.4rem);
  align-items:start;
}

/* --------------------------------------------------------------- Trinene */
.trin-spalte{display:grid; gap:2px; background:var(--porcelaen-3);
  border:1px solid var(--porcelaen-3)}
.trin{background:var(--porcelaen); padding:clamp(1.6rem,3vw,2.4rem)}
.trin-nr{
  font-size:.64rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--messing); margin-bottom:10px;
}
.trin h2{font-size:clamp(1.34rem,2.2vw,1.66rem); margin-bottom:8px}
.trin-hjaelp{font-size:.9rem; color:var(--brosten); margin-bottom:22px; max-width:56ch}

.fejl{margin:12px 0 0; font-size:.85rem; color:#A4342C}

/* Skjul de rigtige felter, men behold dem for tastatur og skærmlæser */
.dage input, .baand input, .hent input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
}

/* ------------------------------------------------------------ Trin 1 dage */
.dage{border:0; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:10px}
.dag{position:relative; display:block; cursor:pointer}
.dag-inder{
  display:grid; gap:2px; padding:16px 14px; text-align:center;
  background:var(--hvid); border:1px solid var(--porcelaen-3);
  border-radius:var(--radius-md);
  transition:border-color .25s var(--ease-out), background .25s var(--ease-out),
             transform .2s var(--ease-out);
}
.dag:hover .dag-inder{transform:translateY(-2px)}
.dag-inder b{font-family:'Bodoni Moda',Georgia,serif; font-weight:400; font-size:1.14rem;
  color:var(--kongeblaa-2)}
.dag-inder i{font-style:normal; font-size:.82rem; color:var(--brosten)}
.dag-inder em{font-style:normal; font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--porcelaen-3)}
.dag input:checked + .dag-inder{
  border-color:var(--messing); background:rgba(176,141,87,.07);
  box-shadow:inset 0 0 0 1px var(--messing);
}
.dag input:checked + .dag-inder em{color:var(--messing)}

/* ----------------------------------------------------------- Trin 2 bånd */
.baand-valg{display:grid; gap:10px}
.baand{position:relative; display:block; cursor:pointer}
.baand-inder{
  position:relative; display:grid; gap:4px;
  padding:18px 20px; background:var(--hvid);
  border:1px solid var(--porcelaen-3); border-radius:var(--radius-md);
  transition:border-color .25s var(--ease-out), transform .2s var(--ease-out),
             box-shadow .25s var(--ease-out);
}
.baand:hover .baand-inder{transform:translateY(-2px)}
.baand input:checked + .baand-inder{
  border-color:var(--messing); box-shadow:inset 0 0 0 1px var(--messing);
}
.baand-top{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.baand-top b{font-family:'Bodoni Moda',Georgia,serif; font-weight:400; font-size:1.36rem;
  color:var(--kongeblaa-2)}
.baand-pris{font-family:'Bodoni Moda',Georgia,serif; font-size:1.5rem; color:var(--messing);
  white-space:nowrap}
.baand-pris small{font-size:.66rem; letter-spacing:.06em}
.baand-klip{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brosten)}
.baand-tekst{font-size:.86rem; color:var(--brosten)}
.maerke{
  position:absolute; top:-9px; right:16px;
  padding:3px 11px; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--messing); color:var(--kongeblaa-3); border-radius:var(--radius-pill);
}

/* Antal */
.antal{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:22px; padding-top:20px; border-top:1px solid var(--porcelaen-2);
}
.antal-navn{font-size:.94rem; color:var(--kongeblaa-2)}
.taeller{display:flex; align-items:center; gap:4px;
  border:1px solid var(--porcelaen-3); border-radius:var(--radius-pill);
  background:var(--hvid); padding:4px}
.taeller-knap{
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:0; border-radius:50%; cursor:pointer;
  font-size:1.1rem; color:var(--kongeblaa-2);
  transition:background .2s var(--ease-out);
}
.taeller-knap:hover{background:var(--porcelaen-2)}
.taeller-knap:disabled{opacity:.3; cursor:not-allowed}
.taeller-tal{min-width:34px; text-align:center;
  font-family:'Bodoni Moda',Georgia,serif; font-size:1.22rem; color:var(--kongeblaa-2)}
.antal-note{margin:14px 0 0; font-size:.82rem; color:var(--brosten)}

/* -------------------------------------------------------- Trin 3 afhentning */
.hent-valg{display:grid; gap:10px}
.hent{position:relative; display:block; cursor:pointer}
.hent-inder{
  display:grid; gap:4px; padding:16px 20px 16px 48px; position:relative;
  background:var(--hvid); border:1px solid var(--porcelaen-3);
  border-radius:var(--radius-md);
  transition:border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.hent:hover .hent-inder{transform:translateY(-2px)}
.hent-inder::before{
  content:''; position:absolute; left:18px; top:20px;
  width:16px; height:16px; border-radius:50%;
  border:1px solid var(--porcelaen-3); background:var(--porcelaen);
  transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.hent input:checked + .hent-inder{border-color:var(--messing);
  box-shadow:inset 0 0 0 1px var(--messing)}
.hent input:checked + .hent-inder::before{
  border-color:var(--messing); box-shadow:inset 0 0 0 4px var(--messing);
}
.hent-inder b{font-size:1rem; font-weight:500; color:var(--kongeblaa-2)}
.hent-inder span{font-size:.86rem; color:var(--brosten)}
.hent-inder em{font-style:normal; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--messing)}

/* ---------------------------------------------------------- Trin 4 betaling */
.felter{display:grid; gap:14px; margin-bottom:20px}
.felt{display:grid; gap:7px}
.felt span{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brosten)}
.felt input{
  padding:13px 15px; background:var(--hvid);
  border:1px solid var(--porcelaen-3); border-radius:var(--radius-sm);
  color:var(--blaek);
}
.felt input::placeholder{color:var(--porcelaen-3)}
.felt input:focus{border-color:var(--messing); outline:none;
  box-shadow:inset 0 0 0 1px var(--messing)}

.betaling{padding:18px 20px; border:1px dashed var(--porcelaen-3);
  border-radius:var(--radius-md)}
.betaling-navn{font-size:.9rem; color:var(--kongeblaa-2); margin-bottom:6px}
.betaling-note{font-size:.82rem; color:var(--brosten); margin:0}

/* ---------------------------------------------------------- Opsummeringen */
.opsummering{position:sticky; top:calc(var(--nav-h) + 24px)}
.opsum-kort{
  padding:clamp(1.6rem,3vw,2.2rem);
  background:var(--kongeblaa-2); color:var(--porcelaen);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
}
.opsum-kort .t-label{color:var(--messing-lys)}
.opsum-liste{margin:0 0 22px; padding:0}
.opsum-linje{display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid rgba(247,244,238,.14)}
.opsum-linje dt{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,244,238,.5); flex-shrink:0}
.opsum-linje dd{margin:0; font-size:.88rem; text-align:right; color:var(--porcelaen)}

.opsum-tal{margin-bottom:22px}
.opsum-raekke{display:flex; justify-content:space-between; gap:16px;
  font-size:.9rem; color:rgba(247,244,238,.78); padding:6px 0}
.opsum-raekke.total{
  margin-top:10px; padding-top:14px; border-top:1px solid rgba(247,244,238,.2);
  font-family:'Bodoni Moda',Georgia,serif; font-size:1.44rem; color:var(--porcelaen);
}
.opsum-klip{margin:12px 0 0; font-size:.78rem; color:var(--messing-lys)}
.opsum-klip b{font-weight:500}

.knap{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:52px; padding:15px 24px;
  border:1px solid transparent; border-radius:var(--radius-pill);
  font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease-out), transform .2s var(--ease-out),
             border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.knap-primaer{background:var(--messing); color:var(--kongeblaa-3)}
.knap-primaer:hover{background:var(--messing-lys); transform:translateY(-2px)}
.knap-linje{background:transparent; color:var(--kongeblaa-2);
  border-color:var(--porcelaen-3)}
.knap-linje:hover{border-color:var(--kongeblaa); transform:translateY(-2px)}
.knap:active{transform:scale(.98)}
.knap .pil{transition:transform .3s var(--ease-out)}
.knap:hover .pil{transform:translateX(4px)}

.opsum-vilkaar{margin:18px 0 0; font-size:.76rem; line-height:1.6;
  color:rgba(247,244,238,.5)}

/* ================================================================ KVITTERING */
.kvit-bag{
  position:fixed; inset:0; z-index:500;
  display:grid; place-items:center;
  padding:var(--pad-x);
  background:rgba(14,27,51,.72);
  overflow-y:auto;
}
.kvit-bag[hidden]{display:none}
.kvit{
  width:100%; max-width:560px;
  background:var(--porcelaen); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  animation:kvitInd .42s var(--ease-out);
}
@keyframes kvitInd{from{opacity:0; transform:translateY(18px) scale(.98)}
  to{opacity:1; transform:none}}
.kvit-haek{padding:clamp(1.8rem,3vw,2.4rem) clamp(1.6rem,3vw,2.4rem);
  background:var(--kongeblaa-2); color:var(--porcelaen)}
.kvit-haek .t-label{color:var(--messing-lys); margin-bottom:10px}
.kvit-haek h2{font-size:clamp(1.7rem,3vw,2.2rem); color:var(--porcelaen)}
.kvit-krop{padding:clamp(1.6rem,3vw,2.2rem)}
.kvit-tekst{font-size:.94rem; color:var(--brosten); margin-bottom:22px}
.kvit-tekst b{color:var(--kongeblaa-2); font-weight:500}

.kode{display:flex; align-items:center; gap:20px; padding:18px;
  background:var(--hvid); border:1px solid var(--porcelaen-3);
  border-radius:var(--radius-md); margin-bottom:22px}
.kode-grid{
  flex-shrink:0; width:92px; height:92px;
  display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr);
  gap:2px; padding:6px; background:var(--kongeblaa-3); border-radius:var(--radius-sm);
}
.kode-grid i{display:block; border-radius:1px; background:transparent}
.kode-grid i.p{background:var(--messing-lys)}
.kode-navn{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--messing); margin-bottom:5px}
.kode-nr{font-family:'Bodoni Moda',Georgia,serif; font-size:1.34rem;
  color:var(--kongeblaa-2); margin-bottom:5px}
.kode-detalje{font-size:.82rem; color:var(--brosten); margin:0}

.naeste{margin:0 0 24px; padding-left:20px}
.naeste li{font-size:.9rem; color:var(--brosten); padding:6px 0}
.naeste b{color:var(--kongeblaa-2); font-weight:500}

.kvit-knapper{display:grid; gap:10px}

/* ==================================================================== BUND */
.bund{padding:clamp(2rem,4vw,3rem) var(--pad-x);
  border-top:1px solid var(--porcelaen-3); text-align:center}
.bund p{font-size:.82rem; color:var(--brosten); margin:0 0 6px}
.bund a{color:var(--kongeblaa); text-decoration:none}
.bund a:hover{color:var(--messing)}

/* ============================================================== RESPONSIVE */
@media (max-width:900px){
  .koeb{grid-template-columns:1fr}
  .opsummering{position:static; order:2}
  .trin-spalte{order:1}
}
@media (max-width:560px){
  .dage{grid-template-columns:1fr}
  .top-meta{display:none}
  .kode{flex-direction:column; text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important}
}