/* Binqo kaartenshop (binqo.app/bingokaarten): alleen wat de shop zelf nodig heeft. Kop, menu,
   voet, knoppen (.btn, Osmo Button 009) en het bestelblok (.bestel-*, .staffel-*, .bingokeuze-*)
   komen uit /assets/site.css van de site (bron: marketing/website/assets/site.css); het sjabloon
   lib/sjabloon.html komt uit de generator. Hier: testbanner, status- en downloadpagina, meldingen.
   Alleen tokens van site.css, met terugvalwaarden voor de eenvoudige pagina zonder sjabloon. */

.shop-testmode {
  padding: 0.6rem var(--gutter, 1rem);
  background: var(--gold, #FFA602);
  color: var(--night, #1A0A2E);
  text-align: center;
  font-size: 0.9375rem;
}

.shop-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link, #5B1FB8);
}
.shop-lead { margin-top: 1rem; max-width: var(--text, 40rem); color: var(--ink-soft, #4A3D60); font-size: 1.0625rem; }
.shop-main { padding-block: 0 clamp(3rem, 7vw, 5rem); }
.shop-narrow { max-width: 44rem; padding-top: clamp(1.5rem, 4vw, 3rem); }
.shop-narrow .cta-row { margin-block: 1.25rem 0.75rem; }
.shop-narrow h1 { margin-top: 0.4rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.8rem); }
.shop-hint { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--ink-soft, #4A3D60); }

/* Kop van de eenvoudige pagina (alleen als lib/sjabloon.html ontbreekt) */
.shop-head { padding-block: 1rem; }
.shop-head__wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.shop-head__brand { line-height: 0; }
.shop-head__brand img { width: clamp(96px, 20vw, 132px); height: auto; }
.shop-head__nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.shop-head__nav a { padding-block: 0.5rem; color: var(--ink, #1A0A2E); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.shop-head__nav a:hover, .shop-head__nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold, #FFA602); text-decoration-thickness: 0.14em; }

/* Meldingen */
.shop-alert, .shop-notice { max-width: 52rem; margin: 0 0 1.25rem; padding: 1rem 1.2rem; border-radius: 16px; color: var(--ink, #1A0A2E); }
.shop-alert { background: color-mix(in srgb, var(--hit, #E0173D) 10%, var(--surface, #FFFFFF)); box-shadow: inset 0 0 0 2px var(--hit, #E0173D); }
.shop-notice { background: color-mix(in srgb, var(--marked, #26890C) 12%, var(--surface, #FFFFFF)); box-shadow: inset 0 0 0 2px var(--marked, #26890C); }

/* ---------- Statuspagina ---------- */

.shop-status-page .wrap { max-width: 46rem; padding-top: clamp(1.5rem, 4vw, 3rem); }
.shop-status {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border-radius: 24px;
  background: var(--surface, #FFFFFF);
  box-shadow: var(--shadow-lg, 0 28px 60px -24px rgb(46 16 92 / 0.55));
}
.shop-status__title { margin-top: 1rem; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
.shop-status__text { margin-top: 0.75rem; color: var(--ink-soft, #4A3D60); }
.shop-status__icon { display: grid; grid-template-columns: repeat(4, 1.4rem); gap: 5px; }
.shop-status__icon span { aspect-ratio: 1; border-radius: 6px; background: var(--cell, #1368CE); box-shadow: 0 3px 0 var(--cell-edge, #0D4E9C); }
.shop-status[data-state="open"] .shop-status__icon span { background: var(--gold, #FFA602); box-shadow: 0 3px 0 var(--gold-edge, #B87500); }
.shop-status[data-state="sent"] .shop-status__icon span { background: var(--marked, #26890C); box-shadow: 0 3px 0 var(--marked-edge, #1B6608); }
.shop-status:is([data-state="canceled"], [data-state="expired"], [data-state="failed"], [data-state="problem"]) .shop-status__icon span {
  background: var(--hit, #E0173D);
  box-shadow: 0 3px 0 var(--hit-edge, #A80F2C);
}
@media (prefers-reduced-motion: no-preference) {
  .shop-status:is([data-state="payment"], [data-state="generating"], [data-state="sending"]) .shop-status__icon span {
    animation: shop-pulse 1.2s ease-in-out infinite;
  }
  .shop-status__icon span:nth-child(2) { animation-delay: 0.15s !important; }
  .shop-status__icon span:nth-child(3) { animation-delay: 0.3s !important; }
  .shop-status__icon span:nth-child(4) { animation-delay: 0.45s !important; }
}
@keyframes shop-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.shop-resend, .shop-retry, .shop-open, .shop-download, .shop-recheck { margin-top: 1.25rem; }
.shop-download__note { margin-bottom: 0.8rem; font-weight: 600; }
.shop-download__note:empty { display: none; }
.shop-resend p, .shop-recheck p { margin-bottom: 0.8rem; color: var(--ink-soft, #4A3D60); }
.shop-help { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--ink-soft, #4A3D60); }
[hidden] { display: none !important; }

.cta-row form { display: inline; margin: 0; }