/*
 * GENERERET FIL — ret den ikke i hånden.
 *
 * Skrevet af `scripts/hent-playerflade.py` ud fra playerens egne CSS-moduler
 * i `Webplayer/src/`. Formålet er, at heroens telefon viser en præcis kopi af
 * den player, kunden møder — og at den kan opdateres ved at KØRE et script
 * frem for at måle efter med øjnene.
 *
 * Der findes i forvejen to implementeringer af fladen: playeren selv og
 * admin-appens forhåndsvisning. Den sidste drev fra den første på object-fit
 * og viste noget forkert i en uge, uden at nogen opdagede det. Sitet er den
 * tredje, og det her er forsøget på ikke at gentage historien.
 *
 * CSS-modules giver hver fil sit eget navnerum. Et globalt stilark har det
 * ikke, så hver klasse har fået et præfiks efter sin kildefil — `.bar` findes
 * i både TopBar og BottomBar. Alt er desuden scopet under `.spiller`.
 *
 * Kilderne, som de så ud da filen blev skrevet:
 *
 *   5c459cd980e4  components/Stage.module.css
 *   4420f4ef00b1  theme.css
 *   3c94d1fc3076  components/TopBar.module.css
 *   f0c04e8e7dda  components/RightRail.module.css
 *   ef108e1fd4e5  components/BottomBar.module.css
 *   be7339939530  components/MoooceMark.module.css
 *
 * Ændrer et af disse fingeraftryk sig, er fladen drevet fra playeren. Kør
 * scriptet igen.
 */

/* ---- components/Stage.module.css: scenen ---- */
:root {
  --spiller-forhold: 402 / 874;
  /* Playeren er højdestyret og topper ved 940px. */
  --spiller-maks-hoejde: 940px;
  --spiller-maks-bredde: 432.36px;
  --spiller-scrim-top-hoejde: 19.7%;
  --spiller-scrim-top: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
  --spiller-scrim-bund-hoejde: 30.7%;
  --spiller-scrim-bund: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}

.spiller {
  --font-sans:
    "Open Sans Variable", "Open Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  /* Kun til tællere i højre rail — som i designet. */
  --font-counter: "Montserrat Variable", "Montserrat", var(--font-sans);
  /* Flader */
  --c-backdrop: #0c0c0e;
  --c-surface: #ffffff;
  --c-field: #f7f7f7;
  --c-field-border: #e5e5e5;
  --c-hairline: #e7e7e7;
  /* Tekst */
  --c-ink: #2b2b2b;
  --c-ink-strong: #000000;
  --c-label: #7e7e7e;
  --c-faint: #9e9e9e;
  --c-compare: #8f8f8f;
  /* Aktion og status */
  --c-action: #333333;
  --c-action-ink: #ffffff;
  --c-sale: #ca3636;
  --c-sale-strong: #f80000;
  --c-badge: #f80000;
  --c-grabber: #959595;
  --c-swatch-empty: #f3f3f3;
  --c-swatch-ring: #737373;
  /* Figma-variabler: Dark green / Img-stroke */
  --c-dark-green: #234a4b;
  --c-img-stroke: #ffffff;
  /* Form */
  --r-sheet: 3.9801cqw;
  --r-field: 1.4925cqw;
  --r-pill: 248.507cqw;
  /* Scenens indrykninger (fra designets 100cqw-ramme) */
  --inset-left: 4.7264cqw;
  --inset-right: 4.9751cqw;
  --inset-top: 9.9502cqw;
  --inset-bottom: 11.9403cqw;
  --rail-width: 13.6816cqw;
  --thumb-size: 12.4378cqw;
  /* Ringen om produktcirklen tegnes UDEN FOR de 12.4378cqw (box-shadow fylder ikke i
     layoutet), så cirklen måler 13.1841cqw på skærmen. Chippen bruger samme tal, så
     de to har præcis samme højde. */
  --thumb-ring: 0.3731cqw;
  --thumb-outer: calc(var(--thumb-size) + var(--thumb-ring) * 2);
  --ease-sheet: cubic-bezier(0.22, 1, 0.36, 1);
  /* Blød start og blød slutning — til det der folder sig ud og sammen igen. */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Ark der glider ind og ud. Kurven bremser jævnt hele vejen i stedet for at
     være fremme efter en tredjedel af tiden, så bevægelsen kan ses. */
  --ease-sheet-in: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-sheet-out: cubic-bezier(0.4, 0, 0.9, 0.5);
}

/* ---- theme.css: prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .spiller *,
  .spiller *::before,
  .spiller *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- components/TopBar.module.css → .p-top-* ---- */
.spiller .p-top-bar {
  position: absolute;
  top: calc(var(--inset-top) + env(safe-area-inset-top, 0px));
  left: var(--inset-left);
  right: var(--inset-right);
  /* Over arkene: kurveknappen bliver liggende oven på kurven, som i designet. */
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.9851cqw;
}

/* Når kurven er åben ligger baren oven på hvidt — butiksrækken toner ud i
   stedet for bare at blive slukket. */
.spiller .p-top-shopHidden {
  opacity: 0;
  transform: translateY(-1.4925cqw);
  pointer-events: none;
}

.spiller .p-top-shop {
  display: flex;
  align-items: center;
  gap: 2.2388cqw;
  min-width: 0;
  transition:
    opacity 220ms var(--ease-sheet),
    transform 220ms var(--ease-sheet);
  animation: p-top-topIn 520ms var(--ease-sheet) both;
}

@keyframes p-top-topIn {
  from {
    opacity: 0;
    transform: translateY(-2.9851cqw);
  }
}

.spiller .p-top-avatar {
  flex: none;
  width: 12.4378cqw;
  height: 12.4378cqw;
  border-radius: 50%;
  background: var(--c-surface);
  /* "Img-stroke" fra designet — holder avataren adskilt fra videoen. */
  box-shadow: 0 0 0 0.3731cqw var(--c-img-stroke);
  object-fit: cover;
  display: block;
}

/* Uden brand-logo vises butikkens forbogstav i samme cirkel. */
.spiller .p-top-avatarFallback {
  display: grid;
  place-items: center;
  font-size: 4.9751cqw;
  font-weight: 700;
  color: var(--c-dark-green);
  text-transform: uppercase;
  user-select: none;
}

.spiller .p-top-name {
  font-size: 3.2338cqw;
  font-weight: 400;
  line-height: 6.2189cqw;
  color: #fff;
  max-width: 44.2786cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spiller .p-top-cart {
  position: relative;
  flex: none;
  width: 12.4378cqw;
  height: 12.4378cqw;
  border-radius: 50%;
  display: block;
  animation: p-top-cartIn 360ms var(--ease-sheet) both;
}

.spiller .p-top-cartOut {
  animation: p-top-cartOut 240ms var(--ease-sheet) both;
  pointer-events: none;
}

.spiller .p-top-cart:active {
  transform: scale(0.92);
}

@keyframes p-top-cartIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes p-top-cartOut {
  to {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* Poppet, når den FØRSTE vare lander i kurven.
   En tom kurv har ingen prik, så der sker visuelt ingenting oppe i hjørnet i
   det øjeblik, kunden trykker "Læg i kurv" nede i arket — prikken dukker bare
   op et sted, man ikke kigger. Poppet flytter blikket derop den ene gang, det
   er nyt. Er der allerede noget i kurven, står prikken der, og så er der
   ingenting at gøre opmærksom på.

   Animationen ligger på en indpakning INDE i knappen, ikke på knappen selv,
   og det er der to grunde til:

   1. Knappen har allerede `cartIn` i sin animation-shorthand. En ny shorthand
      på knappen skubber cartIn ud af elementets animationsliste — og når
      popklassen så ryger af igen, regnes cartIn som en NY animation og spiller
      forfra. Målt i Chrome: posen tonede ind fra scale(0.6) OVEN PÅ poppet.
   2. Indpakningen har kun denne ene animation, så et `animationend` på den er
      entydigt poppets. Sad poppet på knappen, skulle vi skelne på navn — og
      CSS-modules omdøber både klasser og keyframes, så der er ikke noget navn
      at skrive i koden.

   Indpakningen har knappens egne mål. Det er ikke pynt: et transform gør den
   til containing block for prikken, som er absolut placeret — er rektanglet
   ikke det samme, flytter prikken sig midt i poppet. Knappen har `border: none`
   og `padding: 0` fra reset'en, så 100 % er præcis knappens rektangel. */
.spiller .p-top-inner {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.spiller .p-top-pop {
  animation: p-top-cartPop 420ms var(--ease-sheet) both;
}

@keyframes p-top-cartPop {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.22);
  }
  55% {
    transform: scale(0.94);
  }
  75% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.spiller .p-top-cart:focus-visible {
  outline: 0.4975cqw solid #fff;
  outline-offset: 0.7463cqw;
}

/* Prikken siger kun "der er noget i kurven" — antallet står i selve kurven. */
.spiller .p-top-badge {
  animation: p-top-badgeIn 320ms var(--ease-sheet) both;
  position: absolute;
  top: 3.2338cqw;
  left: 7.7114cqw;
  width: 2.4876cqw;
  height: 2.4876cqw;
  border-radius: 50%;
  background: var(--c-badge);
}

@keyframes p-top-badgeIn {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* ---- components/RightRail.module.css → .p-rail-* ---- */
/*
 * Højre rail: produkt-thumbnails, hjerte med tæller og del-knap.
 *
 * Cirklerne står fast. De skifter aldrig størrelse og flytter sig aldrig —
 * bliver et produkt aktivt, folder chippen sig ud til venstre bag cirklen og
 * folder sig sammen igen samme vej. Cirklen ligger oven på chippens ende, så
 * de to synligt hører sammen.
 */

.spiller .p-rail-rail {
  position: absolute;
  right: var(--inset-right);
  bottom: calc(25.1244cqw + env(safe-area-inset-bottom, 0px));
  /* Over afspil-overlayet: produkterne skal altid kunne trykkes på. */
  z-index: 5;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spiller .p-rail-thumbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.4776cqw;
  /* Afstanden ned til hjertet i designet. */
  margin-bottom: 0.995cqw;
}

.spiller .p-rail-item {
  position: relative;
  width: var(--rail-width);
  height: var(--thumb-size);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: p-rail-itemIn 320ms var(--ease-sheet) both;
  /* Produkterne fader ind lige efter hinanden. Forskydningen stopper efter de
     første fire, så en video med mange produkter ikke bliver ved og ved. */
  animation-delay: calc(min(var(--enter-index, 0), 4) * 45ms);
}

@keyframes p-rail-itemIn {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(2.9851cqw);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.spiller .p-rail-thumb {
  position: relative;
  z-index: 1;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: 0 0 0 var(--thumb-ring) var(--c-img-stroke);
  display: block;
  /* `translate` og `scale` er hver sin egenskab, så skuffebevægelsen og
     trykket ikke overskriver hinanden. */
  transition:
    translate 420ms var(--ease-inout),
    scale 200ms var(--ease-inout);
}

/* Cirklen trækker chippen ud og ender ved dens venstre ende. Afstanden måles
   i `RightRail.tsx`, fordi kun layoutet kender chippens bredde. */
.spiller .p-rail-thumbPulled {
  translate: var(--chip-shift, 0cqw) 0;
}

.spiller .p-rail-thumb:active {
  scale: 0.94;
}

.spiller .p-rail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spiller .p-rail-thumb:focus-visible {
  outline: 0.4975cqw solid #fff;
  outline-offset: 0.7463cqw;
}

/* Rabatmærket i cirklens øverste højre kant. Målene er designets egne
   (Figma "Discounticon", node 1830:64): en 18px skive i en 22 × 22-ramme,
   hvor de ekstra pixels er skyggen. Placeringen er den samme vinkel og den
   samme andel af radius som i designet — her målt på vores faste 50px-cirkel. */
.spiller .p-rail-discount {
  position: absolute;
  top: 0.2488cqw;
  right: -0.2488cqw;
  z-index: 2;
  width: 5.4726cqw;
  height: 5.4726cqw;
  display: block;
  pointer-events: none;
}

/* ---- Chip ---- */

.spiller .p-rail-chip {
  position: absolute;
  top: 50%;
  /* Cirklen er 50px i en 55px rail; chippens højrekant lægger sig i flugt med
     cirklens, 22px fra scenens kant — som i designet. */
  right: 0.6219cqw;
  /* Præcis lige så høj som cirklen — ringen indregnet. Den skal se ud som om
     den folder sig ud FRA cirklen, og det gør den ikke, hvis kanterne ikke
     flugter. */
  height: var(--thumb-outer);
  display: flex;
  align-items: center;
  gap: 5.7214cqw;
  /* Cirklen ligger oven på chippens VENSTRE ende — den er skuffens håndtag.
     Krydset sidder i den anden ende, dér hvor cirklen kom fra. */
  padding-left: 17.9104cqw;
  padding-right: 4.9751cqw;
  background: var(--c-surface);
  /* Chippen ligger absolut i en .item der kun er 55px bred. Uden en eksplicit
     bredde giver browseren den "shrink-to-fit" mod de 55px — og det ender som
     min-content: plads til det længste enkelte ord, ikke til titlen. Så bliver
     "Rwanda Espresso" til "wanda Espresso", klippet i venstre side. */
  width: max-content;
  color: var(--c-ink-strong);
  border-radius: var(--r-pill);
  max-width: min(89.801cqw, calc(100cqw - 10.199cqw));
  text-align: left;
  transform: translateY(-50%);
  /* Chippen har sin fulde bredde fra første billede og glider ud fra bag
     cirklen — se keyframes nedenfor. */
  animation: p-rail-chipIn 420ms var(--ease-inout) both;
}

.spiller .p-rail-chipOut {
  animation: p-rail-chipOut 420ms var(--ease-inout) both;
  pointer-events: none;
}

/*
 * Chippen glider ud fra bag cirklen og fader ind.
 *
 * Tidligere var det en `clip-path: inset(...)`-animation, som afslørede
 * chippen. Den ser bedre ud på papiret, men Safari interpolerer ikke
 * pålideligt inset-figurer med calc og procenter — den springer i stedet, og
 * så er der ingen animation på en telefon. `transform` og `opacity` animeres
 * på compositoren og virker i alle browsere.
 *
 * Startpositionen er skubbet så langt til højre, at chippen ligger under
 * cirklen: så kommer den til syne DERFRA og ikke fra skærmkanten. Teksten
 * hverken strækkes eller skubbes — hele pillen flytter sig som ét.
 */
@keyframes p-rail-chipIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(calc(100% - var(--thumb-outer)));
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes p-rail-chipOut {
  from {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  to {
    opacity: 0;
    transform: translateY(-50%) translateX(calc(100% - var(--thumb-outer)));
  }
}

.spiller .p-rail-chipClose {
  flex: none;
  width: 5.9701cqw;
  height: 5.9701cqw;
  display: grid;
  place-items: center;
}

.spiller .p-rail-chipText {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.spiller .p-rail-chipTitle {
  font-size: 3.4826cqw;
  font-weight: 700;
  line-height: 6.2189cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spiller .p-rail-chipPrices {
  display: flex;
  align-items: baseline;
  gap: 1.4925cqw;
  /* De to linjer står 19px fra hinanden i designet, ikke 25. */
  line-height: 4.7264cqw;
}

.spiller .p-rail-chipPrice {
  font-size: 2.9851cqw;
  font-weight: 500;
  /* "Fra 200,-" er ét udtryk og må ikke brække efter "Fra". */
  white-space: nowrap;
}

.spiller .p-rail-chipCompare {
  font-size: 2.9851cqw;
  font-weight: 400;
  color: var(--c-compare);
  text-decoration: line-through;
}

/* Moooce-rabatten vises som sats, ikke som beløb — se `moooceDiscount`.
   Den bærer samme størrelse og vægt som prisen ved siden af, så prislinjen
   læses som én æske og ikke som en pris med et mærkat klistret på. */
.spiller .p-rail-chipDiscount {
  font-size: 2.9851cqw;
  font-weight: 500;
  color: var(--c-sale-strong);
  white-space: nowrap;
}

/* ---- Hjerte, tæller og deling ---- */

.spiller .p-rail-action {
  display: grid;
  place-items: center;
  width: 7.9602cqw;
  height: 7.9602cqw;
}

/* Lyden ligger øverst i rækken af handlinger, med samme luft som de andre. */
.spiller .p-rail-sound {
  margin-bottom: 2.2388cqw;
}

/* Hjertet giver et lille hop, når det slås til. */
.spiller .p-rail-heart {
  display: block;
  line-height: 0;
  transition: transform 220ms var(--ease-inout);
}

.spiller .p-rail-heartOn {
  animation: p-rail-heartPop 380ms var(--ease-sheet);
}

@keyframes p-rail-heartPop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.28);
  }
  60% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

.spiller .p-rail-action:active .p-rail-heart {
  transform: scale(0.9);
}

.spiller .p-rail-action:focus-visible {
  outline: 0.4975cqw solid #fff;
  outline-offset: 0.995cqw;
  border-radius: 1.4925cqw;
}

.spiller .p-rail-count {
  font-family: var(--font-counter);
  font-size: 2.9851cqw;
  font-weight: 400;
  line-height: 6.2189cqw;
  color: #fff;
  /* Tælleren skal ikke skubbe når den skifter mellem 0 og 1. */
  font-variant-numeric: tabular-nums;
}

.spiller .p-rail-send {
  margin-top: 1.7413cqw;
}

/* ---- components/BottomBar.module.css → .p-bund-* ---- */
.spiller .p-bund-bar {
  position: absolute;
  left: 5.4726cqw;
  /* Plads til Moooce-mærket, der tegnes af feed'et i samme hjørne:
     20px indrykning + 59px mærke + 17px luft. */
  right: 23.8806cqw;
  bottom: calc(var(--inset-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: flex;
  /* Bundjusteret: stangen løftes de 6px der placerer den præcis hvor designet
     har den, i flugt med mærkets bund. */
  align-items: flex-end;
  animation: p-bund-barIn 520ms var(--ease-sheet) both;
}

@keyframes p-bund-barIn {
  from {
    opacity: 0;
    transform: translateY(3.9801cqw);
  }
}

.spiller .p-bund-track {
  position: relative;
  flex: 1;
  height: 2.2388cqw;
  margin-bottom: 1.4925cqw;
  transition: height 160ms var(--ease-sheet);
  border-radius: 9.9502cqw;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  touch-action: none;
}

/* Berøringsfeltet udvides uden at ændre stangens højde. Tidligere blev det
   løst med padding + background-clip, men under box-sizing: border-box
   krympede det indholdsboksen til 0 og sporet blev aldrig malet. */
.spiller .p-bund-track::before {
  content: "";
  position: absolute;
  inset: -2.9851cqw 0;
}

.spiller .p-bund-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 2.2388cqw;
  border-radius: 9.9502cqw;
  background: #fff;
  /* Mindst en prik, så stangen aldrig ser tom ud ved 0. */
  min-width: 2.2388cqw;
  pointer-events: none;
}

.spiller .p-bund-track:focus-visible {
  outline: 0.4975cqw solid #fff;
  outline-offset: 0.995cqw;
  border-radius: 9.9502cqw;
}

/* ---- components/MoooceMark.module.css → .p-maerke-* ---- */
.spiller .p-maerke-mark {
  position: absolute;
  right: var(--inset-right);
  bottom: calc(var(--inset-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: block;
  line-height: 0;
  opacity: 0.95;
  pointer-events: none;
  animation: p-maerke-markIn 520ms var(--ease-sheet) both;
  transition:
    opacity 220ms var(--ease-inout),
    transform 220ms var(--ease-inout);
}

/* Et bundark dækker hjørnet — mærket toner ud i stedet for at ligge oven på
   det hvide ark. */
.spiller .p-maerke-markHidden {
  opacity: 0;
  transform: translateY(2.4876cqw);
}

@keyframes p-maerke-markIn {
  from {
    opacity: 0;
    transform: translateY(3.9801cqw);
  }
}