/*
 * Købssiderne (src/koeb-sider.ts) i sitets udseende: samme skrifter og farver som web/src/styles/grund.css,
 * lyst og mørkt tema. Skrifterne ligger her, så siden ikke henter noget andre steder fra. Se fonte/OFL.txt.
 */
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonte/nunito-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonte/nunito-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonte/young-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonte/caveat-500.woff2") format("woff2"); }

:root {
  --linned: #F7EDE4;
  --papir: #FFFAF5;
  --kakao: #33201B;
  --daempet: #6B5049;
  --kirsebaer: #9E2B3A;
  --kirsebaer-svag: #F4DCD5;
  --honning: #E0A43A;
  --honning-tekst: #8A5A12;
  --paa-honning: #33201B;
  --streg: #E6D2C6;
  --felt: #FFFFFF;
  --knap-tekst: #FFFFFF;
  --fejl: #B3261E;
  --fejl-bg: #FCE8E6;
  --ok: #2E6B3F;
  --ok-bg: #E6F2E9;
  --ring: rgba(158, 43, 58, 0.11);
  --skygge: rgba(74, 31, 30, 0.26);
  --omslag-blaa: #1F2B4F;
  --omslag-roed: #7A1F2B;
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-tekst: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-haand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  /* Papirkornet som på sitet (web/src/styles/grund.css). I mørkt tema er kornet lyst. */
  --sidekorn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --linned: #1C1312;
    --papir: #271B19;
    --kakao: #F5E9E1;
    --daempet: #CDB4AB;
    --kirsebaer: #F08A8F;
    --kirsebaer-svag: #3B2524;
    --honning: #EDB55A;
    --honning-tekst: #F2C27A;
    --paa-honning: #1C1312;
    --streg: #45312E;
    --felt: #1F1514;
    --knap-tekst: #1C1312;
    --fejl: #FFB4AB;
    --fejl-bg: #3E1F1C;
    --ok: #9BD3A8;
    --ok-bg: #1E2E22;
    --ring: rgba(240, 138, 143, 0.10);
    --skygge: rgba(0, 0, 0, 0.55);
    --sidekorn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .94 0 0 0 0 .88 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--linned);
  background-image: var(--sidekorn);
  color: var(--kakao);
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); letter-spacing: -0.01em; margin-bottom: .6rem; }
h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin-bottom: .6rem; }
p { margin: 0 0 .9rem; }
a { color: var(--kirsebaer); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--honning); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.ramme {
  max-width: 68rem;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.ramme.smal { max-width: 36rem; }
main { padding-block: clamp(1.5rem, 4vw, 3rem) 4rem; }

.spring { position: absolute; left: -999px; top: 0; background: var(--papir); padding: .6rem 1rem; z-index: 10; }
.spring:focus { left: 16px; }

/* Toppen og bunden */
.top { border-bottom: 1px solid var(--streg); background: var(--papir); }
.top-indre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; min-height: 4rem; padding-block: .6rem; }
/* Logoet som på sitet (web/src/components/Logo.astro): bogen i kirsebær og navnet i kakao. */
.logo { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; font-family: var(--font-display); font-size: 1.45rem; color: var(--kakao); text-decoration: none; }
.logo svg { width: 1.7rem; height: 1.7rem; flex: none; color: var(--kirsebaer); }
@media (max-width: 420px) { .logo { font-size: 1.3rem; gap: .45rem; } .logo svg { width: 1.5rem; height: 1.5rem; } }
.beta { margin: 0; display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--daempet); }
.beta strong { background: var(--honning); color: var(--paa-honning); padding: .2rem .65rem; border-radius: 999px; letter-spacing: .08em; font-size: .8rem; }
.bund { border-top: 1px solid var(--streg); padding-block: 1.5rem 2.5rem; color: var(--daempet); font-size: .9rem; }
.bund p { margin: 0 0 .3rem; }
/* Stregen under toppen og over bunden har bogens rude i midten, som skellene på sitet. Kun sidens egen top og bund:
   gavekortet har også en .top og en .bund. */
body > .top, body > .bund { position: relative; }
body > .top { border-bottom: 0; }
body > .bund { border-top: 0; }
body > .top::after, body > .bund::before, body > .top::before, body > .bund::after { content: ""; position: absolute; pointer-events: none; }
body > .top::after, body > .bund::before { left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--streg) calc(50% - 1.05rem), transparent 0 calc(50% + 1.05rem), var(--streg) 0); }
body > .top::after { bottom: 0; }
body > .bund::before { top: 0; }
body > .top::before, body > .bund::after { left: 50%; width: .45rem; height: .45rem; border: 1px solid var(--kirsebaer); }
body > .top::before { bottom: 0; transform: translate(-50%, 50%) rotate(45deg); }
body > .bund::after { top: 0; transform: translate(-50%, -50%) rotate(45deg); }

.ingress { font-size: 1.15rem; color: var(--daempet); max-width: 40rem; margin-bottom: 1.6rem; }
.smaat { font-size: .92rem; color: var(--daempet); }
.note { font-size: .92rem; color: var(--honning-tekst); }
.etiket { font: 700 .78rem/1.3 var(--font-tekst); letter-spacing: .1em; text-transform: uppercase; color: var(--daempet); margin: 0 0 .3rem; }

/* Knapper */
.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem;
  padding: .75rem 1.35rem;
  border-radius: 999px;
  border: 2px solid var(--kirsebaer);
  background: var(--kirsebaer);
  color: var(--knap-tekst);
  font: 700 1.05rem/1.2 var(--font-tekst);
  text-decoration: none;
  cursor: pointer;
}
.knap:hover { filter: brightness(1.08); }
.knap[aria-disabled="true"] { opacity: .65; cursor: progress; }
.knap.lys { background: transparent; color: var(--kirsebaer); }
.knap.stor { width: 100%; min-height: 3.5rem; font-size: 1.15rem; margin-top: .4rem; }
.linkknap { background: none; border: 0; padding: 0; color: var(--kirsebaer); font: inherit; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.knapper { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Checkout */
.gitter { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
  .gitter { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; }
  .ordreboks { position: sticky; top: 1.5rem; }
}
.formular fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.formular legend { font-family: var(--font-display); font-size: 1.35rem; padding: 0; margin-bottom: .4rem; }
.felt { margin-bottom: 1.1rem; }
.felt label { display: block; font-weight: 700; margin-bottom: .25rem; }
.hjaelp { font-size: .92rem; color: var(--daempet); margin: 0 0 .35rem; }
.fejltekst { color: var(--fejl); font-weight: 700; font-size: .95rem; margin: 0 0 .35rem; }
.felt input, .felt select {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: .65rem .85rem;
  font: 400 1.0625rem/1.4 var(--font-tekst);
  color: var(--kakao);
  background: var(--felt);
  border: 2px solid var(--streg);
  border-radius: 12px;
  appearance: none;
}
.felt select {
  background-image: linear-gradient(45deg, transparent 50%, var(--daempet) 50%), linear-gradient(135deg, var(--daempet) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - .95rem) 55%;
  background-size: .32rem .32rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.felt input:focus, .felt select:focus { border-color: var(--kirsebaer); outline: 3px solid var(--ring); outline-offset: 0; }
.felt.har-fejl input, .felt.har-fejl select { border-color: var(--fejl); }
.felt input.kode { font-size: 1.6rem; letter-spacing: .4em; text-align: center; max-width: 14rem; font-variant-numeric: tabular-nums; }
.to { display: grid; gap: 0 1rem; }
@media (min-width: 520px) { .to { grid-template-columns: 1fr 1fr; } .postnr-by { grid-template-columns: 9rem 1fr; } }

.fejlsummering { border: 2px solid var(--fejl); border-left-width: 6px; background: var(--fejl-bg); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1.6rem; }
.fejlsummering h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.fejlsummering ul { margin: 0; padding-left: 1.2rem; }
.fejlsummering a { color: var(--fejl); font-weight: 700; }
.fejlsummering p { margin: 0 0 .4rem; }
.besked { background: var(--ok-bg); color: var(--ok); border-radius: 12px; padding: .8rem 1rem; font-weight: 700; }

.farvevalg { display: flex; gap: .75rem; flex-wrap: wrap; }
.farve { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem .55rem .6rem; border: 2px solid var(--streg); border-radius: 999px; cursor: pointer; background: var(--felt); font-weight: 700; }
.farve input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.farve .proeve { width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.farve.blaa .proeve { background: var(--omslag-blaa); }
.farve.roed .proeve { background: var(--omslag-roed); }
.farve:has(input:checked) { border-color: var(--kirsebaer); box-shadow: 0 0 0 3px var(--ring); }
.farve:has(input:focus-visible) { outline: 3px solid var(--honning); outline-offset: 3px; }

.privat { font-size: .95rem; color: var(--daempet); margin: .4rem 0 1rem; }
.privat summary { cursor: pointer; color: var(--kirsebaer); font-weight: 700; }
.privat-tekst { margin-top: .6rem; padding: .9rem 1rem; background: var(--papir); border: 1px solid var(--streg); border-radius: 12px; }
.privat-tekst p:last-child { margin-bottom: 0; }
.beta-note { margin: .8rem 0 .5rem; padding: .7rem 1rem; background: var(--kirsebaer-svag); border-radius: 12px; font-size: .95rem; }
.cf-turnstile { margin: .4rem 0 1rem; }

.ordreboks { background: var(--papir); border: 1px solid var(--streg); border-radius: 16px; padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: 0 24px 50px -38px var(--skygge); }
.ordreboks h2 { font-size: 1.4rem; }
.indhold { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.indhold li { position: relative; padding-left: 1.6rem; margin-bottom: .35rem; }
.indhold li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .55rem; height: .9rem; border: solid var(--kirsebaer); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.linjer { margin: 0 0 1rem; }
.linjer div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--streg); }
.linjer dt, .linjer dd { margin: 0; }
.linjer dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.linjer .rabat { color: var(--ok); }
.linjer .ialt { font-weight: 700; font-size: 1.15rem; }

/* Koden */
.hjaelpelinks { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }
.hjaelpelinks form { margin: 0; }

/* Ordresiden */
.ordre .kort { background: var(--papir); border: 1px solid var(--streg); border-radius: 16px; padding: clamp(1.2rem, 3vw, 1.8rem); margin-bottom: 1.2rem; max-width: 44rem; }
.tid { font-size: 1.15rem; }
.eller { color: var(--daempet); margin: 1rem 0 .4rem; }
.nu { margin: 0; }
details.flyt, details.ret { margin-top: .6rem; }
details.flyt summary, details.ret summary { cursor: pointer; color: var(--kirsebaer); font-weight: 700; margin-bottom: .8rem; }
.trin { margin: 0; padding-left: 1.4rem; }
.trin li { margin-bottom: .6rem; }
.adresse { font-size: 1.1rem; }

/* Gavekortet */
.gavekort {
  background-color: var(--kirsebaer-svag);
  background-image: radial-gradient(circle at 100% 0%, transparent 0 3rem, var(--ring) 3rem 3.35rem, transparent 3.35rem 5.3rem, var(--ring) 5.3rem 5.65rem, transparent 5.65rem 7.6rem, var(--ring) 7.6rem 7.95rem, transparent 7.95rem);
  color: var(--kakao);
  border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  min-height: 18rem;
  display: grid;
  align-content: space-between;
  gap: 1.3rem;
  box-shadow: 0 24px 50px -30px var(--skygge);
  max-width: 40rem;
  margin: 1.5rem 0;
}
.gavekort .top, .gavekort .bund { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border: 0; background: none; }
.gavekort .logo { font-family: var(--font-display); font-size: 1.2rem; color: var(--kirsebaer); }
.gavekort .til { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.5vw, 2.7rem); line-height: 1.05; margin-bottom: .5rem; }
.gavekort .fra { font-family: var(--font-haand); font-size: 1.8rem; line-height: 1.2; color: var(--kirsebaer); margin: 0; }
.gavekort .hvad { font-size: .9rem; color: var(--daempet); margin: 0; border-top: 1px solid var(--streg); padding-top: .6rem; }
.gavekort.roed { --kirsebaer: #7A1F2B; }

@media print {
  /* Ingen sidemargen: så har Chrome ikke plads til sit sidehoved og sin sidefod (dato, titel og ordrens adresse med
     nøglen), som ellers kommer med på kortet, der gives videre. Afstanden til papirets kant ligger i stedet på body. */
  @page { size: A5 landscape; margin: 0; }
  body { background: #FFFFFF; padding: 10mm; }
  /* Kun sidens egen top og bund. Gavekortet har også en .top (etiketten og logoet) og en .bund (hilsenen), og de skal med. */
  body > .top, body > .bund, .spring, .kun-skaerm { display: none !important; }
  main { padding: 0; }
  .ramme { padding: 0; max-width: none; }
  .gavekort { box-shadow: none; margin: 0; max-width: none; min-height: 0; height: 128mm; background-color: #F4DCD5; color: #33201B; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .gavekort .logo, .gavekort .fra { color: #9E2B3A; }
  .gavekort.roed .logo, .gavekort.roed .fra { color: #7A1F2B; }
  .gavekort .hvad { color: #6B5049; border-color: #E6D2C6; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}