/* =========================================================================
   Loterijpagina's: /loterij, /goede-doelen(/<slug>), /meespelen, /uitslagen
   Bouwt voort op main.css (tokens en componenten).
   ========================================================================= */

/* band die direct op de paginakop aansluit */
.section--flush { padding-top: 0; }

/* twee kolommen tekst/visual */
.lot-split { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .lot-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); } }
.lot-subhead { font-size: 1.3rem; }

/* ---------- kerncijfers ---------- */
.lot-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); box-shadow: var(--shadow-1); margin: 0; }
.lot-facts__item { padding: var(--s-5); border-top: 1px solid var(--line); min-width: 0; }
.lot-facts__item:nth-child(-n+2) { border-top: 0; }
.lot-facts__item:nth-child(2n) { border-left: 1px solid var(--line); }
.lot-facts dt { font-size: var(--fs-xs); font-weight: 600; color: var(--subtle); }
.lot-facts dd:not(.lot-facts__sub) { margin: 4px 0 0; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.lot-facts .lot-facts__sub { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; hyphens: manual; }
@media (min-width: 900px) {
  .lot-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lot-facts__item { border-top: 0; padding: var(--s-6) var(--s-5); }
  .lot-facts__item + .lot-facts__item { border-left: 1px solid var(--line); }
}
@media (max-width: 380px) {
  .lot-facts { grid-template-columns: 1fr; }
  .lot-facts__item:nth-child(2) { border-top: 1px solid var(--line); }
  .lot-facts__item:nth-child(2n) { border-left: 0; }
}

/* vier stappen naast elkaar */
@media (min-width: 900px) {
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
  .steps--4 .step:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (min-width: 1100px) {
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps--4 .step:nth-child(3) { padding-left: var(--s-6); border-left: 1px solid var(--line); }
}

/* ---------- verdeling ---------- */
.split-panel { background: var(--surface); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: var(--shadow-1); }
.section--white .split-panel { box-shadow: none; outline: 1px solid var(--line); outline-offset: -1px; }
.share-bar--lg { height: 22px; gap: 3px; background: transparent; }
.share-bar--lg > span:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.share-bar--lg > span:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.split-list { display: grid; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.split-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 5.5rem; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.split-list i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.split-list b { font-weight: 650; white-space: nowrap; }
.split-list__eur { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
@media (max-width: 420px) { .split-list li { grid-template-columns: 14px minmax(0, 1fr) auto; } .split-list__eur { grid-column: 2 / -1; text-align: left; margin-top: -6px; } }

/* ---------- trekkingsdata ---------- */
.draw-dates { display: grid; gap: 0; background: var(--surface); box-shadow: var(--shadow-1); margin-top: var(--s-4); }
.section--white .draw-dates { box-shadow: none; outline: 1px solid var(--line); outline-offset: -1px; }
.draw-dates li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.draw-dates li:last-child { border-bottom: 0; }
.draw-dates__day { font-family: var(--font-serif); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--ink-strong); text-align: center; font-variant-numeric: tabular-nums; }
.draw-dates__rest { display: grid; font-weight: 600; line-height: 1.3; }
.draw-dates__rest small { font-weight: 450; font-size: var(--fs-xs); color: var(--subtle); }
.draw-dates .is-next .draw-dates__day { color: var(--teal-ink); }
.draw-dates .status-pill { background: var(--teal-wash); color: var(--teal-ink); }

/* ---------- prijzentabel ---------- */
.prize-table__note { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--subtle); margin-top: 2px; max-width: 46ch; white-space: normal; text-align: inherit; }
.prize-table td.num .prize-table__note { margin-left: auto; }
.prize-table tbody tr:first-child .prize-amount { color: var(--teal-ink); font-size: 1.35rem; }
@media (max-width: 359px) { .prize-table tbody tr:first-child .prize-amount { font-size: 1.15rem; } }
.table-wrap { position: relative; }
@media (max-width: 599px) {
  .prize-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prize-table--stack tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .6fr) minmax(0, 1.1fr); gap: var(--s-2) var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--line); }
  .prize-table--stack tbody tr:last-child { border-bottom: 0; }
  .prize-table--stack tfoot tr { border-top: 2px solid var(--line); border-bottom: 0; }
  .prize-table--stack th, .prize-table--stack td { display: block; padding: 0; border: 0 !important; text-align: left !important; }
  .prize-table--stack tr > :first-child { grid-column: 1 / -1; }
  .prize-table--stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--subtle); margin-bottom: 2px; }
  .prize-table--stack .prize-table__note { max-width: none; }
  .prize-table--stack td.num .prize-table__note { margin-left: 0; }
}

/* ---------- winkans ---------- */
.odds { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .odds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.odds__item { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-5) var(--s-5) var(--s-5); background: var(--bg); position: relative; }
.odds__item::before { content: ""; width: 40px; height: 3px; border-radius: 2px; background: var(--teal); margin-bottom: var(--s-3); }
.odds__value { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.05; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.odds__label { font-weight: 650; margin-top: var(--s-2); }
.odds__sub { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- als je wint ---------- */
.win-item h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 650; margin-top: var(--s-4); }
.win-item p { color: var(--muted); font-size: var(--fs-small); margin-top: var(--s-2); }
.win-item .rg-tool__icon, .choice-rule .rg-tool__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal-ink); }

.link-list { display: grid; border-top: 1px solid var(--line); }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.link-list a .i { width: 1.1em; height: 1.1em; color: var(--teal-ink); transition: transform .2s var(--ease-out); }
.link-list a:hover { color: var(--teal-ink); }
.link-list a:hover .i { transform: translateX(3px); }

/* ---------- goede doelen ---------- */
.fund-anchor { display: flex; min-width: 0; scroll-margin-top: calc(var(--header-h) + 24px); }
.fund-anchor > .fund-card { flex: 1; }
.choice-rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.choice-rule h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 650; }
.choice-rule p { color: var(--muted); font-size: var(--fs-small); margin-top: var(--s-1); }
.empty--left { text-align: left; padding: var(--s-6); }
.empty--left .empty__icon { margin: 0 0 var(--s-4); }
.empty--left p { margin-left: 0; }
.section--white .empty { box-shadow: none; background: var(--bg); }

.fund-detail { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .fund-detail { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(3rem, 5vw, 4.5rem); } }
.fund-detail__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--shadow-1); }
.fund-detail__media figcaption { font-size: var(--fs-xs); color: var(--subtle); margin-top: var(--s-2); }
.fund-detail__h2 { font-size: var(--fs-h3); margin-top: var(--s-7); }
.example-list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.example-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-4) var(--s-5); background: var(--surface); box-shadow: var(--shadow-1); font-size: var(--fs-body); }
.example-list .i { color: var(--teal-ink); margin-top: .15em; }
.fund-detail__aside { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) { .fund-detail__aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }

.side-panel { background: var(--surface); box-shadow: var(--shadow-1); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); min-width: 0; }
.side-panel h2 { font-size: var(--fs-h3); }
.side-panel > p { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--muted); }
.side-note { padding: 0 var(--s-2); }
.side-note h3 { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 650; }
.side-note p { font-size: var(--fs-small); color: var(--muted); margin-top: var(--s-1); }

/* ---------- meespelen ---------- */
.order-flow { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) { .order-flow { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 4vw, 3.5rem); } }
.order-flow__main { display: grid; gap: var(--s-5); min-width: 0; }
.order-flow__form { display: grid; gap: var(--s-5); }
.order-step { border: 0; margin: 0; min-width: 0; background: var(--surface); box-shadow: var(--shadow-1); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.order-step__head { display: flex; align-items: center; gap: var(--s-3); padding: 0; float: left; width: 100%; font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: var(--ink-strong); }
.order-step > :not(.order-step__head) { clear: both; }
h2.order-step__head { float: none; }
.order-step__num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal-ink); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 700; }
.order-step__hint { padding-top: var(--s-3); font-size: var(--fs-small); color: var(--muted); max-width: 60ch; }
.order-step .radio-cards { margin-top: var(--s-5); }
.order-step .field__error:empty { display: none; }
.order-step .field__error { margin-top: var(--s-3); }
.order-step.is-invalid .radio-card { border-color: var(--err); }

.pick { align-items: flex-start; }
.pick__body { display: grid; gap: 2px; min-width: 0; }
.pick__body b { font-weight: 650; }
.pick__price { font-variant-numeric: tabular-nums; font-size: var(--fs-small); color: var(--ink); }
.pick__price small, .pick__dates { font-size: var(--fs-xs); color: var(--subtle); }
.pick-lots .pick__price small { display: block; }
.pick-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .pick-lots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .pick-lots { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pick-lots .pick { flex-direction: column; gap: var(--s-2); } }
.pick-months { grid-template-columns: 1fr; }
@media (min-width: 560px) { .pick-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pick-funds { grid-template-columns: 1fr; }
@media (min-width: 640px) { .pick-funds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-fund { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "img img" "radio body"; align-items: start; gap: var(--s-3); padding: 0 0 var(--s-4); overflow: hidden; }
.pick-fund input { grid-area: radio; justify-self: end; margin: 2px 0 0; }
.pick-fund__img { grid-area: img; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line); }
.pick-fund__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.pick-fund:hover .pick-fund__img img { transform: scale(1.03); }
.pick-fund__body { grid-area: body; display: grid; gap: 2px; min-width: 0; padding-right: var(--s-4); }
.pick-fund__body b { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: var(--ink-strong); }
.pick-fund__body small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.pick-fund__img--split { display: grid; place-items: center; background: var(--teal-wash); color: var(--teal-ink); }
.pick-fund__img--split .i { width: 40px; height: 40px; }
@media (min-width: 640px) { .pick-fund--split { grid-column: 1 / -1; grid-template-columns: 40px 120px minmax(0, 1fr); grid-template-areas: "radio img body"; align-items: center; padding: var(--s-3) 0; } .pick-fund--split .pick-fund__img { aspect-ratio: 4 / 3; border-radius: var(--r-xs); } .pick-fund--split input { margin: 0; } }
@media (max-width: 479px) {
  .pick-fund { grid-template-columns: 20px 84px minmax(0, 1fr); grid-template-areas: "radio img body"; align-items: center; padding: var(--s-3); }
  .pick-fund input { margin: 0; }
  .pick-fund__img { aspect-ratio: 4 / 3; border-radius: var(--r-xs); }
  .pick-fund__body { padding-right: 0; }
}

/* tabbladen inloggen / registreren */
.auth-tabs { margin-top: var(--s-5); }
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); }
.tabs__tab { position: relative; padding: .7em 1em; border: 0; background: none; font-weight: 600; font-size: var(--fs-small); color: var(--muted); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] { color: var(--ink-strong); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: .6em; right: .6em; bottom: -1px; height: 3px; background: var(--teal); border-radius: 2px; }

.acc-box { margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.acc-box__who { font-size: var(--fs-small); color: var(--muted); }
.acc-box__who b { color: var(--ink); }
.acc-box__skeleton { height: 72px; }
.acc-box__limit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-2) var(--s-4); }
.acc-box__label { font-size: var(--fs-xs); color: var(--subtle); font-weight: 600; }
.acc-box__value { font-family: var(--font-serif); font-weight: 600; font-size: 1.6rem; line-height: 1.15; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.acc-box__value small { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; color: var(--muted); }

/* samenvatting */
@media (min-width: 1000px) and (min-height: 940px) { .order-flow__summary { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.summary { background: var(--surface); box-shadow: var(--shadow-1); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.summary h2 { font-size: var(--fs-h3); }
.summary__list { display: grid; margin-top: var(--s-4); border-top: 1px solid var(--line); }
.summary__list > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.summary__list dt { color: var(--subtle); }
.summary__list dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.summary__list dd.is-empty { color: var(--subtle); font-weight: 500; font-style: italic; }
.summary__dates { margin-top: var(--s-3); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.summary__total span { font-weight: 650; }
.summary__total output { font-family: var(--font-serif); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.summary__warn { margin-top: var(--s-4); }
.summary .check.is-invalid input { outline: 2px solid var(--err); outline-offset: 1px; }
.summary .field__error:empty { display: none; }
.summary .field__error { margin-top: var(--s-2); }
.summary__note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-4); background: var(--bg); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.summary__note .i { color: var(--teal-ink); width: 1.1rem; height: 1.1rem; }

/* resultaat na bestellen */
.order-result:focus { outline: none; }
.result { max-width: 760px; margin-inline: auto; display: grid; gap: var(--s-5); background: var(--surface); box-shadow: var(--shadow-1); padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }
.result__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.result__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-wash); color: var(--ok); }
.result__icon .i { width: 26px; height: 26px; }
.result__head h2 { font-size: var(--fs-h2); }
.result__order { padding: var(--s-5); background: var(--bg); border-radius: var(--r-sm); }
.result__draws { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.result__draws li { padding: .25em .7em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ---------- uitslagen ---------- */
.results-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .results-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2rem, 4vw, 3.5rem); } }
.results-grid .empty { padding-block: var(--s-7); }
@media (min-width: 960px) { .results-grid .empty { padding-block: var(--s-9); } }
.input--ticket { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.next-draw { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ticket-hits { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.ticket-hits li { display: grid; padding: var(--s-3) var(--s-4); background: var(--bg); border-radius: var(--r-sm); font-size: var(--fs-small); }
.ticket-hits span { font-size: var(--fs-xs); color: var(--subtle); }
.draw-result__title { font-size: var(--fs-h3); }
.slogan-band { display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
.slogan-band p:last-child { max-width: 60ch; }