/* ==========================================================================
   Raffle + Instagram giveaway picker (wave 2, agent A) — spec §5.4, §4.14. Builds on wheel.css (stage, bar,
   panel, sheets, winner dialog) and the app.css tokens. Logical properties only (RTL), dark mode through the
   tokens, reduced motion, 48 px targets. Also loaded by the Instagram page (link printed by its view).
   ========================================================================== */

/* the counts row sits between the readout and the bar: the wheel gives it the room (wheel.css --lh-extra) */
.lh-raffle { --lh-extra: 78px; }
@media (min-width: 768px) { .lh-raffle { --lh-extra: 64px; } }

/* readout row: stats at rest, live name under the pointer during the draw */
.lh-raffle .lh-readout { display: none; }
.lh-raffle.is-drawing .lh-readout { display: inline-flex; }
.lh-raffle.is-drawing .lh-rf-stats { display: none; }
.lh-raffle.is-big.is-drawing .lh-readout { display: none; }
.lh-raffle.is-big.is-drawing .lh-rf-stats { display: flex; }
.lh-rf-stats {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 0; max-width: 100%;
  color: var(--lh-muted); font-size: .9375rem; font-variant-numeric: tabular-nums; text-align: center;
}
.lh-rf-stats__n { padding: 6px 14px; border-radius: 999px; background: var(--lh-surface); border: 1px solid var(--lh-border); color: var(--lh-text); font-weight: 750; }
.lh-rf-stats__x { padding: 2px 10px; border-radius: 999px; background: var(--lh-surface-2); font-size: .8125rem; font-weight: 650; }

/* winners / alternates */
.lh-rf-counts { display: flex; justify-content: center; gap: 12px; width: 100%; max-width: 680px; margin-block-start: 8px; }
.lh-rf-count { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.lh-rf-count__l { font-size: .8125rem; font-weight: 700; color: var(--lh-muted); letter-spacing: .02em; }
.lh-rf-step { border-radius: 14px; }
.lh-rf-step .lh-step__b { width: 48px; height: 48px; font-size: 1.375rem; }
.lh-rf-step .lh-step__b[aria-disabled="true"] { opacity: .35; cursor: default; }
.lh-rf-step .lh-rf-num { width: 56px; height: 48px; font-size: 1.125rem; font-weight: 800; color: var(--lh-text); }
.lh-raffle.is-drawing .lh-rf-counts { opacity: .55; pointer-events: none; }
@media (min-width: 768px) {
  .lh-rf-counts { gap: 24px; }
  .lh-rf-count { flex-direction: row; gap: 10px; }
  .lh-rf-count__l { font-size: .9375rem; }
}

/* Draw button: label "Show all" + progress during the draw */
.lh-raffle .lh-spin.is-spinning .lh-spin__prog { transform: scaleX(var(--lh-p, 0)); transition: transform .3s var(--lh-ease); }
.lh-raffle .lh-spin.is-spinning .lh-spin__ic { animation: none; }
.lh-raffle .lh-qbtn[aria-disabled="true"] { opacity: .45; cursor: default; }
.lh-raffle .lh-bar__more .lh-ic { width: 22px; height: 22px; }

/* > 5,000 participants: name reel instead of the wheel */
.lh-raffle.is-big .lh-disc, .lh-raffle.is-big .lh-pointer, .lh-raffle.is-big .lh-hub { visibility: hidden; }
.lh-rf-reel {
  --lh-row: clamp(40px, 13cqi, 64px);
  position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--lh-brand-soft), var(--lh-surface) 70%);
}
.lh-rf-reel__n { margin: 0; font-weight: 800; font-size: clamp(1.25rem, 7cqi, 2rem); font-variant-numeric: tabular-nums; }
.lh-rf-reel__win {
  position: relative; width: 78%; height: var(--lh-row); overflow: hidden; border-radius: 14px; background: var(--lh-surface);
  box-shadow: inset 0 0 0 2px var(--lh-brand), var(--lh-shadow-md);
}
.lh-rf-reel__win::before, .lh-rf-reel__win::after { content: ""; position: absolute; z-index: 1; inset-inline: 0; height: 30%; pointer-events: none; }
.lh-rf-reel__win::before { top: 0; background: linear-gradient(var(--lh-surface), transparent); }
.lh-rf-reel__win::after { bottom: 0; background: linear-gradient(transparent, var(--lh-surface)); }
.lh-rf-reel__row {
  height: var(--lh-row); display: flex; align-items: center; justify-content: center; padding-inline: 12px;
  font-weight: 800; font-size: clamp(1.125rem, 6cqi, 1.75rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext;
}

/* panel: participants tab */
.lh-rf-counter { margin: 0; color: var(--lh-muted); font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.lh-rf-removed { font-size: .8125rem; color: var(--lh-muted); }
.lh-rf-removed summary { min-height: 32px; padding-block: 6px; cursor: pointer; font-weight: 650; color: var(--lh-text); }
.lh-rf-removed ul { margin: 4px 0 0; padding-inline-start: 18px; max-height: 160px; overflow: auto; }
.lh-rf-removed__l { font-variant-numeric: tabular-nums; }
.lh-rf-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 439.98px) { .lh-raffle .lh-tab .lh-count { display: none; } .lh-raffle .lh-tab { padding-inline: 4px; } }
.lh-tp--options .lh-set__row--sw .lh-sw { margin: 0; }

/* results */
.lh-rf-results { display: flex; flex-direction: column; gap: 10px; }
.lh-rf-res__title { margin: 0; font-weight: 800; font-size: 1.0625rem; overflow-wrap: anywhere; }
.lh-rf-res__meta { margin: 0; color: var(--lh-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.lh-rf-res__h { margin: 6px 0 0; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lh-muted); }
:lang(ar) .lh-rf-res__h { letter-spacing: 0; font-size: .8125rem; }
.lh-rf-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lh-rf-rank__i {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px;
  padding: 6px 12px; border-radius: 12px; background: var(--lh-surface-2); text-align: start;
}
.lh-rf-rank__k { font-size: .75rem; font-weight: 800; color: var(--lh-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lh-rf-rank__dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.lh-rf-rank__n { font-weight: 750; font-size: 1.0625rem; overflow-wrap: anywhere; }
.lh-rf-rank__t { font-size: .75rem; font-weight: 700; color: var(--lh-brand-soft-ink); background: var(--lh-brand-soft); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.lh-rf-rank:not(.lh-rf-rank--alt) .lh-rf-rank__i:first-child { background: color-mix(in srgb, var(--lh-accent) 22%, var(--lh-surface)); }
.lh-rf-rank__i.is-wait { opacity: .5; }
.lh-rf-rank__i.is-wait .lh-rf-rank__dot { background: var(--lh-border) !important; }
.lh-rf-rank__i.is-new { animation: lh-rf-pop .32s var(--lh-ease); }
@keyframes lh-rf-pop { 0% { transform: scale(.94); opacity: .3; } 60% { transform: scale(1.02); opacity: 1; } }
.lh-rf-res__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: 6px; }
.lh-rf-res__acts .lh-btn.is-off, .lh-win__acts .is-off { display: none; }
.lh-rf-hist { margin-block-start: 8px; border-block-start: 1px solid var(--lh-border); padding-block-start: 8px; font-size: .875rem; }
.lh-rf-hist summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.lh-rf-hist ol { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lh-rf-hist li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.lh-rf-hist__d { color: var(--lh-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }

/* celebration dialog (wheel winner dialog + ranked lists) */
.lh-rf-win .lh-rf-win__list { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow: auto; padding-inline: 2px; }
.lh-rf-win .lh-win__acts .lh-btn--primary { flex: 1 1 100%; }

/* image dialog */
.lh-rf-img { display: grid; place-items: center; min-height: 200px; border-radius: 14px; background: var(--lh-surface-2); padding: 12px; }
.lh-rf-img__img { max-width: 100%; max-height: 52vh; border-radius: 10px; box-shadow: var(--lh-shadow-md); }
.lh-rf-img__img:not([src]) { display: none; }

/* no-JS result */
.lh-rf-nojs { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 480px; margin-block-start: 16px; padding: 14px 16px; border-radius: 16px; background: var(--lh-brand-soft); }
.lh-rf-nojs__err { color: var(--lh-danger); font-weight: 650; }
@media (scripting: none) {
  .lh-raffle .lh-tp--options { display: flex !important; }
  .lh-raffle .lh-tp--results, .lh-raffle .lh-rf-tools, .lh-raffle .lh-rf-js, .lh-raffle .lh-quick,
  .lh-raffle .lh-bar__entries, .lh-raffle .lh-bar__more, .lh-raffle .lh-step__b { display: none !important; }
}

/* full screen: wheel, readout and Draw only */
.lh-app--fs.lh-raffle .lh-rf-counts { display: none; }

/* ---------- Draw certificate (raffle/certificate.js) ---------- */
@media (min-width: 768px) { .lh-cert-dlg { width: min(720px, calc(100% - 48px)); } }
.lh-cert-dlg .lh-sheet__body { background: var(--lh-surface-2); padding-block: 16px; }
.lh-cert {
  display: flex; flex-direction: column; gap: 16px; padding: 24px 22px; border-radius: 16px; background: #FFFFFF; color: #14151A;
  border-block-start: 8px solid #5B3DF5; box-shadow: var(--lh-shadow-sm); font-size: .9375rem; line-height: 1.5;
}
.lh-cert__top { text-align: center; }
.lh-cert__brand { margin: 0; color: #5B3DF5; font-weight: 800; }
.lh-cert__kicker { margin: 2px 0 0; color: #5B6070; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
:lang(ar) .lh-cert__kicker { letter-spacing: 0; font-size: .875rem; }
.lh-cert__title { margin: 6px 0 0; font-size: 1.5rem; font-weight: 850; overflow-wrap: anywhere; }
.lh-cert__facts { margin: 0; display: grid; gap: 10px; }
.lh-cert__facts div { display: grid; gap: 2px; }
.lh-cert__facts dt, .lh-cert__h { margin: 0; color: #5B6070; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:lang(ar) .lh-cert__facts dt, :lang(ar) .lh-cert__h { letter-spacing: 0; font-size: .8125rem; }
.lh-cert__facts dd { margin: 0; }
.lh-cert__facts ul { margin: 0; padding-inline-start: 18px; }
.lh-cert code { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: .875em; }
.lh-cert__res { display: flex; flex-direction: column; gap: 6px; padding-block: 12px; border-block: 1px solid #E3E4EC; }
.lh-cert__list { margin: 0 0 6px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.lh-cert__list li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.lh-cert__rk { flex: none; color: #5B6070; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lh-cert__nm { font-weight: 750; overflow-wrap: anywhere; }
.lh-cert__fp { margin: 4px 0; }
.lh-cert__fpv { display: flex; flex-wrap: wrap; gap: 2px 10px; direction: ltr; font-size: 1rem !important; font-weight: 600; letter-spacing: .02em; }
.lh-cert__wait { color: #5B6070; }
.lh-cert__how, .lh-cert__note, .lh-cert__foot { margin: 0; color: #5B6070; font-size: .8125rem; }
.lh-cert__note { padding: 10px 12px; border-radius: 10px; background: #F7F7FB; color: #14151A; }
.lh-cert__foot { text-align: center; }
.lh-cert__acts .lh-btn { flex: 1 1 auto; }

@media print {
  html.lh-cert-printing body > :not(.lh-cert--print), html.lh-cert-printing dialog { display: none !important; }
  html.lh-cert-printing body { display: block; background: #FFFFFF; }
  .lh-cert--print { box-shadow: none; border: 1px solid #E3E4EC; border-block-start: 8px solid #5B3DF5; max-width: 180mm; margin: 0 auto; font-size: 11pt; }
}
.lh-cert--print { display: none; }
@media print { html.lh-cert-printing .lh-cert--print { display: flex; } }

@media (prefers-reduced-motion: reduce) { .lh-rf-rank__i.is-new { animation: none; } }
.lh-reduced .lh-rf-rank__i.is-new { animation: none; }

/* keep the draw label on one line in the mobile action bar ("Tirer au sort", "Sortear ahora"…) */
.lh-raffle .lh-spin__label { white-space: nowrap; }
@media (max-width: 400px) { .lh-raffle .lh-spin__label { font-size: 1.0625rem; } }