/* ═══════════════════════════════════════════════
   SEA-4b (spec 05 §7.1) — vendored fonts for the "Vianočný režim" widget (public/fonts/VENDORED.md).
   latin-ext first: browsers try @font-face blocks for the same family/weight in source order and
   only download the one whose unicode-range actually covers the text being rendered, so listing the
   Slovak/Czech-diacritic subset first costs nothing for plain-latin runs.
   ═══════════════════════════════════════════════ */
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-400-latin-ext-300c86290d94407bb7e3c1fb73480926.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-400-latin-fe13b76807ccefadc78e1924a7ca9efa.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-600-latin-ext-8b36bd4eb7a523cdec182499c1bf9f51.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-600-latin-8dc6514fff29976fee6f4702aaf44467.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-700-latin-ext-1869883c682cba7d574c6f925d5c3ec9.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/Quicksand/Quicksand-700-latin-f5f4fc785bfbd8cbc03bf89fcdcecca3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/PlayfairDisplay/PlayfairDisplay-400-latin-ext-cac109a776f031fe19ca83b6488033eb.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/PlayfairDisplay/PlayfairDisplay-400-latin-8a53e5ecdbffafb4aaa40a23fdece238.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/PlayfairDisplay/PlayfairDisplay-700-latin-ext-c0d76cfbf5db6a8cf30c574edf500469.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/PlayfairDisplay/PlayfairDisplay-700-latin-9401d0214a9375f173f72cc417f6fa06.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════
   ADV-3 — Native calendar (body.vyhraj-season); the games hub (/hry) has its own vyhraj-hry.css since F1
   Theme default per spec 7.3: ADVENT = deep green / gold.
   ═══════════════════════════════════════════════ */

body.vyhraj-season {
  --season-bg:      #0a1f16;
  --season-surface: #123021;
  --season-line:    rgba(255,255,255,.08);
  --season-text:    #eafff2;
  --season-muted:   #9fc9ac;
  --season-primary: #1e7d4a;
  --season-gold:    #ffd700;
  --season-danger:  #ff6b6b;
  --season-radius:  16px;
  /* SEA-4b (spec 05 §7.1) — the "Vianočný režim" calendar-widget palette. Same hex values as
     SeasonThemeServiceImpl's DEFAULT_* constants, so a campaign with no override renders identically
     whether native.html (theme == null, no _widget_css.html run at all) or a themed white-label page. */
  --cal-bg-from:      #2b0f16;
  --cal-bg-to:        #4a1a24;
  --cal-window-closed:#6b2430;
  --cal-window-today: #e0a63e;
  --cal-window-open:  #ede3d0;
  --cal-text-on-dark: #f4e3b8;
  --cal-text-on-light:#3d1a1f;
  --cal-accent-gold:  #c9a227;
  --cal-accent-sage:  #7c8f6e;
  /* N-20: the result colours of the cream window - the v1 ones (green 1.75, gold 1.10, red 2.18 : 1) were made for the
     dark layout. Each is at least 4.5 : 1 on --cal-window-open (SeasonCssContrastTest). */
  --cal-ok:           #1f6b3f;
  --cal-reward:       #7a5200;
  --cal-danger:       #a3262a;
  background: var(--season-bg);
  color: var(--season-text);
}

.season-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

.season-hero {
  text-align: center;
  padding: 40px 0 28px;
}

.season-eyebrow {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--season-surface);
  color: var(--season-gold);
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ── Progress + badges ─────────────────────────── */

.season-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.season-progress { flex: 1; height: 10px; border-radius: 999px; background: var(--season-surface); overflow: hidden; }
.season-progress-bar { height: 100%; background: var(--season-gold); transition: width .4s ease; }
.season-progress-label { font-size: .85rem; color: var(--season-muted); white-space: nowrap; }

.season-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.season-badge {
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--season-surface); color: var(--season-muted); border: 1px solid var(--season-line);
}
.season-badge.is-unlocked { color: #1a1203; background: var(--season-gold); border-color: var(--season-gold); }

.season-pro-hint { color: var(--season-gold); font-size: .85rem; margin-bottom: 16px; }

/* ── Tile grid ──────────────────────────────────── */

.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
}

.season-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--season-line);
  background: var(--season-surface);
  color: var(--season-text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
}

.season-tile.state-locked { opacity: .45; cursor: not-allowed; }
.season-tile.state-open { border-color: var(--season-gold); box-shadow: 0 0 0 1px var(--season-gold) inset; }
.season-tile.is-today { border-color: var(--season-gold); background: rgba(255,215,0,.12); }
.season-tile.is-completed { background: var(--season-primary); }
.season-tile.state-past:not(.is-completed):not(.is-archived) { opacity: .5; }

.season-tile-check { color: var(--season-gold); font-size: 1rem; }
.season-tile-teaser { font-size: .55rem; font-weight: 400; color: var(--season-muted); text-align: center; }

/* adv-review.md smoke check (ii): ?date= admin preview — tile clicks 404 (resolveInteractive always
   uses the real clock), so the grid is shown inert instead of pretending it's clickable. */
.season-preview-notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--season-gold);
  background: rgba(255,215,0,.1);
  color: var(--season-gold);
  font-size: .85rem;
}

/* ── Modal ──────────────────────────────────────── */

.season-modal {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
}
.season-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.season-modal-dialog {
  position: relative; z-index: 1;
  max-width: 480px; width: calc(100% - 32px);
  box-sizing: border-box; /* N-20: with the padding the dialog was 40 px wider than its calc() and touched both edges at <= 390 px */
  max-height: 85vh; overflow-y: auto;
  background: var(--season-surface, #18233d);
  color: var(--season-text, #eef3ff);
  border-radius: var(--season-radius, 16px);
  padding: 28px 20px 20px;
}
.season-modal-close {
  position: absolute; top: 4px; right: 4px;
  width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; /* N-20: >= 44 x 44 px */
  background: none; border: none; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
}

.season-window-question-text { font-size: 1.05rem; margin: 8px 0 16px; }
.season-options { display: flex; flex-direction: column; gap: 8px; }
.season-option {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--season-line);
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.season-option:hover { border-color: var(--season-gold); }
.season-scramble input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--season-line); margin-bottom: 10px; }
.season-attempts-left { font-size: .8rem; color: var(--season-muted); margin-top: 10px; }

.season-find-competition { display: flex; flex-direction: column; gap: 10px; }
.season-find-clue { font-size: 1rem; }
.season-find-catalogue-link {
  display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--season-gold); color: var(--season-gold); text-decoration: none; font-weight: 600;
}
.season-find-not-yet { font-size: .85rem; color: var(--season-muted); margin-top: 4px; }

.season-result { font-weight: 700; font-size: 1.1rem; }
.season-result.is-correct { color: #30c48d; }
.season-result.is-incorrect, .season-window-wrong { color: var(--season-danger); }
.season-reward { color: var(--season-gold); font-weight: 600; }
.season-window-wrong { font-size: .85rem; margin-top: 8px; }
.season-share {
  margin-top: 12px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--season-gold);
  background: transparent; color: var(--season-gold); cursor: pointer;
}

/* ── Countdown / summary ────────────────────────── */

.season-countdown-card, .season-summary-card { text-align: center; padding: 40px 0; }
.season-countdown-days { font-size: 1.4rem; color: var(--season-gold); font-weight: 700; }
.season-countdown-live { font-size: 2rem; font-variant-numeric: tabular-nums; margin-top: 8px; }

/* F2 (item 8) — recap: draw winners, masked m***@domain. */
.season-recap-winners { margin-top: 28px; }
.season-recap-winners h3 { font-size: 1.1rem; color: var(--season-gold); margin-bottom: 10px; }
.season-recap-winners-list { list-style: decimal inside; margin: 0; padding: 0; }
.season-recap-winners-list li { padding: 4px 0; }
.season-recap-winner-prize { color: var(--season-muted); }

/* The homepage banner (.season-home-banner-*) moved to vyhraj-homepage.css in F5: it is part of the dark home page, not of the
   season pages, and this stylesheet is no longer loaded on /domov. */

/* ── ADV-5: white-label (/k/**) ─────────────────── */

/* ?embed=1: the iframe content must show the client's own page background through. */
body.vyhraj-season.is-embed { background: transparent; }

/* Review #95: inside the client's iframe a fixed overlay adds nothing to the document height, so
   the frame never grew and the window scrolled inside an 85vh box. Here the modal is part of the
   page (season.js moves it under <body> and sets the dialog's margin-top to the clicked tile), the
   document grows with it and the loader resizes the iframe to fit. The frame itself never scrolls:
   the square tiles shrink when a scrollbar narrows the page, so a scrollbar could otherwise keep
   itself necessary at exactly the height it was measured at. */
body.vyhraj-season.is-embed { overflow-y: hidden; }
body.vyhraj-season.is-embed .season-modal {
  position: absolute; top: 0; right: 0; bottom: auto; left: 0;
  min-height: 100%;
  align-items: flex-start;
}
body.vyhraj-season.is-embed .season-modal-dialog { max-height: none; overflow: visible; margin-bottom: 16px; }

.season-wl-header { display: flex; align-items: center; gap: 10px; padding: 12px 0 20px; }
.season-wl-logo { max-height: 40px; max-width: 160px; object-fit: contain; }
/* B8 (N10): „Vyhrat.sk — <title>“ above the widget on the directly opened /k/ page (whitelabel.html renders the header only
   outside ?embed=1, so never inside the native page's anonymous embed or a client's iframe). It had no rule at all -
   a system-font h1 at the browser default size, three lines at 390 px. It takes the widget's title face (.cal-title:
   Playfair Display, 700, 1.2) a size smaller, so the widget's own title stays the louder one. */
.season-wl-header h1 {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.2;
  color: var(--cal-text-on-dark, var(--season-text, #eef3ff));
}
@media (min-width: 640px) { .season-wl-header h1 { font-size: 28px; } }
.season-wl-powered { text-align: center; margin-top: 20px; font-size: .75rem; }
.season-wl-powered a { color: var(--season-muted); text-decoration: none; }
.season-wl-powered a:hover { text-decoration: underline; }

.season-coupon { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.season-coupon-code {
  padding: 6px 10px; border-radius: 8px; background: var(--season-surface);
  border: 1px dashed var(--season-gold); color: var(--season-gold); font-weight: 700; letter-spacing: .05em;
}
.season-coupon-copy {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--season-gold);
  background: transparent; color: var(--season-gold); cursor: pointer; font-size: .85rem;
}
.season-cta-link {
  display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 8px;
  background: var(--season-gold); color: #1a1203; font-weight: 700; text-decoration: none;
}

.season-sponsor { margin: 4px 0 12px; }
.season-sponsor a {
  display: flex; align-items: center; gap: 8px; color: var(--season-muted); text-decoration: none; font-size: .8rem;
}
.season-sponsor a:hover { color: var(--season-gold); }
.season-sponsor-logo { max-height: 24px; max-width: 100px; object-fit: contain; }

/* SEA-4 (spec 05 §4.1/§7.5) — the outer iframe container; the widget's own visual pass (below) lives
   inside that iframe's own document, not here. */
.season-anon-embed { min-height: 200px; }

/* D3 - the cards under the calendar (season/native.html, season/coming-soon.html): fragments/CompetitionCard, the card
   of /sutaze. Its rules are page-scoped (body.vyhraj-sutaze .comp-grid ... in vyhraj-sutaze.css, own copies in
   vyhraj-top-sutaze.css and vyhraj-competition-detail.css) and the season pages load only this file, so the card
   rendered half-styled: the deadline as plain text under the image instead of the badge on it, the source icon over the
   card's edge, a long title running into the buttons. This is the season pages' own copy of the /sutaze card rules, same
   geometry (image 749/628, badge top right, rounded pill buttons), scoped under .season-native-extras; the surface is a
   white card on the dark season background (the --xc-* tokens are the only colours, change them to restyle the block). */
.season-native-extras {
  margin-top: 48px;
  --xc-surface: #fff; --xc-line: rgba(18, 48, 33, .14); --xc-title: #121b30; --xc-muted: #55607a;
  --xc-blue: #3d6df2; --xc-amber: #f5a623; --xc-green: #30c48d; --xc-radius: 18px;
  --xc-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.season-native-extras h2 { text-align: center; margin: 0 0 20px; color: var(--season-text); font-size: 1.5rem; }
.season-native-extras-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* a phone: one card */
@media (min-width: 768px) { .season-native-extras-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.season-native-extras-cards > div { min-width: 0; }
.season-native-extras-cards .card {
  position: relative; background: var(--xc-surface) !important; border: 1px solid var(--xc-line) !important;
  border-radius: var(--xc-radius) !important; box-shadow: var(--xc-shadow) !important; overflow: hidden; margin-bottom: 0;
  transition: transform .18s, box-shadow .18s;
}
.season-native-extras-cards .card.border-primary { border-color: rgba(61, 109, 242, .55) !important; }
.season-native-extras-cards .card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, .4) !important; }
.season-native-extras-cards .card-img,
.season-native-extras-cards .card-zoom { border-radius: 0 !important; aspect-ratio: 749/628; object-fit: cover; width: 100%; }
.season-native-extras-cards .comp-card-media { position: relative; display: block; overflow: hidden; background: #141c26; }
.season-native-extras-cards .comp-card-media .card-img { display: block; margin: 0; }
.season-native-extras-cards .comp-card-deadline-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; align-items: center;
  min-width: 88px; padding: 6px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 1.25;
  text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); pointer-events: none;
}
.season-native-extras-cards .comp-card-deadline-badge--active { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a1a; }
.season-native-extras-cards .comp-card-deadline-badge--ended { background: rgba(34, 197, 94, .95); color: #1a1a1a; }
.season-native-extras-cards .comp-card-deadline-badge .deadline-when { font-size: 13px; font-weight: 800; }
.season-native-extras-cards .comp-card-assigned-check {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--xc-green); color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3); pointer-events: none;
}
.season-native-extras-cards .card-body { background: var(--xc-surface) !important; padding: 14px !important; text-align: left; }
.season-native-extras-cards .card-title,
.season-native-extras-cards .card-title a {
  color: var(--xc-title) !important; font-family: "Cabinet Grotesk", "Satoshi", sans-serif !important;
  font-weight: 700 !important; font-size: 15px !important; line-height: 1.3 !important; text-decoration: none !important;
  overflow-wrap: anywhere;
}
.season-native-extras-cards .card-title { text-align: left; padding-right: 36px; } /* clear of the source icon at the card's corner */
.season-native-extras-cards .card-title a:hover { color: var(--xc-blue) !important; }
.season-native-extras-cards .card-text,
.season-native-extras-cards small,
.season-native-extras-cards .text-muted,
.season-native-extras-cards h3.text-muted { color: var(--xc-muted) !important; font-size: 12px !important; }
.season-native-extras-cards .badge-danger,
.season-native-extras-cards .badge-warning { border-radius: 999px !important; font-size: 11px !important; padding: 3px 8px !important; }
.season-native-extras-cards .btn-primary {
  background: var(--xc-blue) !important; border-color: var(--xc-blue) !important; border-radius: 999px !important;
  font-size: 12px !important; padding: 6px 14px !important;
}
.season-native-extras-cards .btn-success {
  background: var(--xc-green) !important; border-color: var(--xc-green) !important; border-radius: 999px !important;
  font-size: 12px !important; padding: 6px 14px !important; color: #1a1a1a !important;
}
.season-native-extras-cards .btn-warning {
  background: var(--xc-amber) !important; border-color: var(--xc-amber) !important; color: #1a1a1a !important;
  border-radius: 999px !important; font-size: 12px !important;
}
.season-native-extras-cards .btn-danger { border-radius: 999px !important; font-size: 12px !important; }
.season-native-extras-cards .btn-outline-secondary {
  border-radius: 999px !important; font-size: 12px !important; padding: 6px 14px !important;
  border-color: rgba(18, 27, 48, .22) !important; color: var(--xc-muted) !important; background: transparent !important;
}
.season-native-extras-cards .btn-outline-secondary:hover { background: rgba(18, 27, 48, .06) !important; color: var(--xc-title) !important; }
.season-native-extras-cards .shape svg path { fill: var(--xc-surface) !important; }
.season-native-extras-cards .comp-card-actions { gap: 6px 0; }
/* F3: „Všetky adventné kalendáre“ under the three cards - the listing of the market */
.season-native-extras-all { margin: 20px 0 0; text-align: center; }
.season-native-extras-all a { color: var(--season-gold); font-weight: 700; text-decoration: none; }
.season-native-extras-all a:hover, .season-native-extras-all a:focus-visible { text-decoration: underline; }

.season-native-b2b-cta {
  margin-top: 40px; padding: 24px; border-radius: var(--season-radius);
  background: var(--season-surface); text-align: center;
}
.season-native-b2b-cta p { margin-bottom: 12px; }

.season-sponsor-wall { margin-top: 40px; text-align: center; }
.season-sponsor-wall-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 12px; }
.season-sponsor-wall-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 140px;
  color: var(--season-muted); text-decoration: none; font-size: .8rem;
}
a.season-sponsor-wall-item:hover { color: var(--season-gold); } /* NI19b: only a link lights up; a sponsor with no website is a plain span */
.season-sponsor-wall-item img { max-height: 40px; max-width: 120px; object-fit: contain; }
.season-sponsor-wall-caption { font-size: .7rem; opacity: .8; }

/* ═══════════════════════════════════════════════
   SEA-4b (spec 05 §7) — "Vianočný režim" calendar widget, ported from the Lovable mockup
   (docs/games-roadmap/mockup/{styles.css,ParticipantPreview.tsx}). Fonts: Playfair Display (display),
   Quicksand (body) — vendored under /fonts, @font-face further down. Every colour below reads a
   --cal-* custom property, written either by the body.vyhraj-season default above or overridden
   per-campaign by _widget_css.html. .cal-* classes are additive to the v1 .season-* classes they sit
   alongside (same elements keep both), never a replacement — the v1 rules above still supply layout
   (flex/position) the new rules do not repeat.
   ═══════════════════════════════════════════════ */

.cal-widget {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 20px;
  background: linear-gradient(to bottom right, var(--cal-bg-from), var(--cal-bg-to));
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (min-width: 640px) { .cal-widget { padding: 32px; } }

.cal-header { position: relative; z-index: 10; text-align: center; margin-bottom: 24px; padding-top: 8px; }
.cal-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .32em;
  color: var(--cal-accent-sage); margin: 0;
}
.cal-title {
  font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1.2;
  color: var(--cal-text-on-dark); margin: 16px 0 0;
}
.cal-intro { font-size: 15px; font-weight: 600; color: var(--cal-text-on-dark); opacity: .95; margin: 10px auto 0; max-width: 28rem; }
@media (min-width: 640px) {
  .cal-eyebrow { font-size: 12px; }
  .cal-title { font-size: 36px; }
  .cal-intro { font-size: 16px; }
}

/* ── Grid + tiles (spec 7.2 — values from the mockup, not approximations) ──── */

.cal-grid {
  position: relative;
  z-index: 10;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 640px) { .cal-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 768px) { .cal-grid { grid-template-columns: repeat(6, 1fr); } }

.cal-window {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1.5px solid color-mix(in oklab, var(--cal-accent-gold) 30%, transparent);
  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
  padding: 4px;
}
.cal-window.cal-window-closed { background: var(--cal-window-closed); }
.cal-window.cal-window-today { background: var(--cal-window-today); }
.cal-window.cal-window-open { background: var(--cal-window-open); isolation: isolate; overflow: hidden;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--cal-text-on-dark) 55%, transparent),
              inset 0 -5px 9px color-mix(in oklab, var(--cal-text-on-light) 7%, transparent),
              0 2px 8px rgb(0 0 0 / .2);
}
.cal-window.cal-window-open::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 96px 96px; mix-blend-mode: multiply;
}
.cal-window.cal-window-missed { opacity: .6; }

.cal-icon { position: relative; z-index: 1; width: 28px; height: 28px; }
@media (min-width: 640px) { .cal-icon { width: 36px; height: 36px; } }
.cal-icon-sm { width: 12px; height: 12px; }
/* The sprite's root fill/stroke attributes do not reach <use> clones; set them on the clones themselves. */
.cal-icon, .cal-icon-sm, .cal-lock-badge { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cal-window-closed .cal-icon { color: var(--cal-text-on-dark); opacity: .25; }
/* I14: the today tile is not the window - a dark window with a derived light text colour still has a light tile (--cal-text-on-today,
   emitted by SeasonThemeServiceImpl only then; without it the text of the window, as always). */
.cal-window-today .cal-icon, .cal-window-today .cal-day-badge { color: var(--cal-text-on-today, var(--cal-text-on-light)); }
.cal-window-open .cal-icon { color: var(--cal-text-on-light); }

.cal-day-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  font-family: 'Quicksand', sans-serif; font-size: 10px; font-weight: 700;
  background: rgb(255 255 255 / .25); color: var(--cal-text-on-light);
}
.cal-window-closed .cal-day-badge { background: rgb(0 0 0 / .2); color: var(--cal-text-on-dark); }
@media (min-width: 640px) { .cal-day-badge { width: 24px; height: 24px; font-size: 11px; } }

/* N-07: a completed tile shows the check in place of the day number (the mockup); the number stays in the
   aria-label. */
.is-completed .cal-day-badge { display: none; }

.cal-check-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--cal-accent-gold); color: var(--cal-window-open);
}
@media (min-width: 640px) { .cal-check-badge { width: 24px; height: 24px; } }

.cal-lock-badge { position: absolute; bottom: 6px; right: 6px; z-index: 2; width: 12px; height: 12px; color: var(--cal-text-on-dark); opacity: .6; }
@media (min-width: 640px) { .cal-lock-badge { width: 14px; height: 14px; } }

.cal-missed-label {
  position: absolute; left: 5px; bottom: 5px; z-index: 10; font-family: 'Quicksand', sans-serif;
  font-size: 9px; font-weight: 700; color: var(--cal-text-on-light); opacity: .75;
}

.cal-today-cta {
  border-radius: 14px;
  filter: drop-shadow(0 3px 5px color-mix(in oklab, var(--cal-text-on-light) 24%, transparent))
          drop-shadow(0 0 8px color-mix(in oklab, var(--cal-accent-gold) 44%, transparent))
          drop-shadow(0 0 16px color-mix(in oklab, var(--cal-window-today) 28%, transparent));
}
.cal-window-today {
  border-width: 4px;
  border-color: color-mix(in oklab, var(--cal-accent-gold) 82%, var(--cal-text-on-dark));
}
.cal-today-intro { animation: cal-today-intro 900ms ease-in-out 3; }
@keyframes cal-today-intro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes cal-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgb(0 0 0 / .2), 0 0 0 0 color-mix(in oklab, var(--cal-accent-gold) 0%, transparent); }
  50% { transform: scale(1.03); box-shadow: 0 2px 10px rgb(0 0 0 / .25), 0 0 22px 6px color-mix(in oklab, var(--cal-accent-gold) 50%, transparent); }
}
.cal-today-pulse { animation: cal-pulse 2.5s ease-in-out infinite; }
.cal-today-hover { transition: transform 150ms ease-out, filter 150ms ease-out; }
.cal-today-hover:hover { transform: translateY(-3px); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.cal-today-hover:active { transform: translateY(-1px); }

/* 1) First open: 3D flip + scale, 350ms — replaces the pulse while it runs, then the pulse resumes. */
@keyframes cal-flip {
  0% { transform: perspective(800px) rotateY(0deg) scale(1); }
  50% { transform: perspective(800px) rotateY(180deg) scale(.85); }
  100% { transform: perspective(800px) rotateY(360deg) scale(1); }
}
.cal-flip { animation: cal-flip 350ms ease-out; }
/* 2) Icon fade-in after the flip: 200ms, delayed 350ms so it starts once the flip completes. */
@keyframes cal-icon-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.cal-icon-in { animation: cal-icon-in 200ms ease-out 350ms both; }

.cal-bow {
  position: absolute; top: 4px; left: 4px; z-index: 2; width: 23px; height: 20px;
  color: var(--cal-accent-gold); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .22));
  /* N3 (QA 22. 10.): the bow sits on the today tile, whose own colour is gold - a translucent gold bow vanished on it.
     Solid fill plus an outline in the window's text colour reads on the default theme and on a light client theme;
     the fill stays (N-08). */
  stroke: var(--cal-text-on-today, var(--cal-text-on-light)); stroke-width: 1.6px; stroke-linejoin: round; paint-order: stroke fill;
}

/* ── Content tags (spec 7.2) — bottom-left chip previewing what an unlocked door contains. ──── */
.cal-content-tag {
  position: absolute; left: 5px; bottom: 5px; z-index: 10; max-width: calc(100% - 12px);
  border-radius: 999px; padding: 2px 5px;
  background: color-mix(in oklab, var(--cal-window-open) 90%, var(--cal-accent-sage));
  color: var(--cal-text-on-light); font-family: 'Quicksand', sans-serif; font-size: 9px; font-weight: 700;
  line-height: 1.2; white-space: nowrap; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--cal-text-on-dark) 35%, transparent);
}
.cal-content-tag-prize { background: color-mix(in oklab, var(--cal-window-open) 80%, var(--cal-accent-gold)); }
.cal-content-tag-tip { background: color-mix(in oklab, var(--cal-window-open) 82%, var(--cal-accent-sage)); }
.cal-content-tag-quiz { background: color-mix(in oklab, var(--cal-window-open) 88%, var(--cal-bg-to)); }
.cal-content-tag-scramble { background: color-mix(in oklab, var(--cal-window-open) 88%, var(--cal-accent-sage)); }
.cal-content-tag-bonus { background: color-mix(in oklab, var(--cal-window-open) 87%, var(--cal-accent-gold)); }
@media (min-width: 640px) { .cal-content-tag { left: 6px; bottom: 6px; padding: 2px 6px; font-size: 10px; } }

/* ── Footer line ──────────────────────────────────────────────────────────── */
.cal-footer-line {
  position: relative; z-index: 10; margin: 20px 0 0; text-align: center;
  font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 700; color: color-mix(in oklab, var(--cal-text-on-dark) 70%, transparent);
}
.cal-footer-date { color: var(--cal-accent-gold); }

/* ── Modal (spec 7.2) — the v1 fragment's own content renders inside this styling. ──────────── */
.cal-modal-dialog {
  background: var(--cal-window-open); color: var(--cal-text-on-light); text-align: center;
  padding-top: 44px;
}
.cal-modal-close { color: color-mix(in oklab, var(--cal-text-on-light) 60%, transparent); }
.cal-modal-close:hover { background: rgb(0 0 0 / .1); color: var(--cal-text-on-light); }
.cal-modal-icon {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 999px; background: color-mix(in oklab, var(--cal-accent-gold) 20%, transparent);
}
.cal-modal-icon .cal-icon { width: 24px; height: 24px; color: var(--cal-accent-gold); }
.cal-modal-dialog h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; }
.cal-modal-dialog .season-window-question-text,
.cal-modal-dialog .season-explanation { font-size: 14px; }
/* N-20: the result lines on the cream window, from the --cal-* tokens above.
   I18: a dark window with a derived light text gets a lighter variant of each (--cal-*-on-dark, >= 4.5 : 1 on that window,
   emitted by the theme service only in that case); every other theme has none of them and falls back to the cream-window value. */
.cal-modal-dialog .season-result.is-correct { color: var(--cal-ok-on-dark, var(--cal-ok)); }
.cal-modal-dialog .season-result.is-incorrect, .cal-modal-dialog .season-window-wrong { color: var(--cal-danger-on-dark, var(--cal-danger)); }
.cal-modal-dialog .season-reward { color: var(--cal-reward-on-dark, var(--cal-reward)); }
.cal-modal-dialog .season-attempts-left, .cal-modal-dialog .season-find-not-yet { color: var(--cal-text-on-light); }

/* N2 (QA 22. 10.): in the cream window the sponsor's name was the muted green of the dark layout (far below 4.5 : 1)
   and sat left in a centred block - it takes the window's own text colour and is centred like everything around it. */
.cal-modal-dialog .season-sponsor a { justify-content: center; color: var(--cal-text-on-light); font-weight: 600; }
.cal-modal-dialog .season-sponsor a:hover { color: var(--cal-text-on-light); text-decoration: underline; }

/* N-10: „Organizátor: …“ + the rules and privacy links under the two consent checkboxes. */
.cal-modal-dialog .season-organizer { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--cal-text-on-light); }
.cal-modal-dialog .season-organizer a { color: inherit; text-decoration: underline; margin-left: 8px; }

/* NI12 (NH5 polish): „Žreby sa rátajú len s účtom …“ + „Zaregistrovať sa“ - the guest line of a registered-only draw, inside the e-mail form
   and standing alone in the completed window. The same small text as the organizer line above (the window's own text colour, the cream
   window has no muted tint that reads), a small top margin, and the link in the text colour, underlined - not the browser's blue. The
   paragraph is reset too, or the window's default paragraph size wins over the line's. */
.cal-modal-dialog .season-draw-registered { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--cal-text-on-light); }
.cal-modal-dialog .season-draw-registered p { margin: 0 0 4px; font-size: inherit; line-height: inherit; color: inherit; }
.cal-modal-dialog .season-draw-registered a { color: inherit; text-decoration: underline; }

/* N-09: the one-line note of a preview window („Náhľad — výhra sa neudeľuje…“) — tinted from the theme's own
   tokens so it reads on any client colours; the text colour is the window's text-on-light.
   S26: it is the first line of the window in every state (the server-rendered window starts with it, and so do the
   client-rendered result and e-mail-wait states), so it sits under the round icon disc (.cal-modal-icon: top 20 px +
   48 px = 68 px, the dialog's padding-top is 44 px) - 28 px of top margin, the same offset the other first lines get below. */
.cal-modal-dialog .season-preview-note {
  margin: 28px 0 12px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.35;
  background: color-mix(in oklab, var(--cal-accent-gold) 18%, transparent); color: var(--cal-text-on-light);
}
/* the e-mail wait already carries its own 28 px clearance; after the note it needs none, or the gap doubles */
.cal-modal-dialog .season-preview-note + .season-email-wait { margin-top: 0; }

/* NI13: where the coupon code stands in a preview opened with the campaign's own key („Kód sa zobrazí po spustení kalendára“) - the
   dashed frame of .season-coupon-code, the text in the window's own colour, no copy button next to it. */
.season-coupon-hidden {
  margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--cal-accent-gold, var(--season-gold));
  font-size: 14px; line-height: 1.4; font-style: italic; color: var(--cal-text-on-light, inherit);
}

/* NI6: the ribbon at the very top of a calendar that is not public yet („Náhľad — kalendár ešte nie je spustený“) - on the
   hosted page and in the iframe of the client's own site; the theme's own gold on its text-on-light, so it reads on any colours. */
.season-preview-ribbon {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.35;
  background: var(--cal-accent-gold, #f5b301); color: var(--cal-text-on-light, #1f2937);
}

/* ── F2 (item 2/3) — the modal's own controls: option buttons, one primary gold action, secondary
   outline buttons, the e-mail form. Only --cal-* tokens (hex, _widget_css.html) — no Bootstrap on
   /k/**, and on the native page these selectors outrank Bootstrap's .btn-warning inside the modal. ── */
.cal-modal-dialog .cal-btn,
.cal-modal-dialog .btn-warning,
.cal-modal-dialog .season-share,
.cal-modal-dialog .season-coupon-copy,
.cal-modal-dialog .season-email-resend,
.cal-modal-dialog .season-email-correct,
.cal-modal-dialog .season-find-catalogue-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
/* I14: the gold button is a surface of its own - its text is --cal-text-on-gold when the theme derived a light window text (a dark
   window), else the window's text as always. The shadow is on the window, so it keeps the window's colour. */
.cal-modal-dialog .cal-btn-primary,
.cal-modal-dialog .btn-warning {
  width: 100%; background: var(--cal-accent-gold); border-color: var(--cal-accent-gold); color: var(--cal-text-on-gold, var(--cal-text-on-light));
  box-shadow: 0 2px 6px color-mix(in oklab, var(--cal-text-on-light) 22%, transparent);
}
.cal-modal-dialog .cal-btn-primary:hover,
.cal-modal-dialog .btn-warning:hover {
  background: color-mix(in oklab, var(--cal-accent-gold) 86%, var(--cal-text-on-gold, var(--cal-text-on-light)));
  color: var(--cal-text-on-gold, var(--cal-text-on-light));
}
.cal-modal-dialog .cal-btn-secondary,
.cal-modal-dialog .season-share,
.cal-modal-dialog .season-coupon-copy,
.cal-modal-dialog .season-email-resend,
.cal-modal-dialog .season-email-correct,
.cal-modal-dialog .season-find-catalogue-link {
  background: transparent; color: var(--cal-text-on-light);
  border-color: color-mix(in oklab, var(--cal-accent-gold) 70%, var(--cal-text-on-light));
}
.cal-modal-dialog .cal-btn-secondary:hover,
.cal-modal-dialog .season-share:hover,
.cal-modal-dialog .season-coupon-copy:hover,
.cal-modal-dialog .season-email-resend:hover,
.cal-modal-dialog .season-email-correct:hover,
.cal-modal-dialog .season-find-catalogue-link:hover { background: color-mix(in oklab, var(--cal-accent-gold) 16%, transparent); color: var(--cal-text-on-light); }
.cal-modal-dialog .cal-btn:focus-visible,
.cal-modal-dialog .btn-warning:focus-visible,
.cal-modal-dialog .season-option:focus-visible,
.cal-modal-dialog .season-email-input:focus-visible { outline: 3px solid color-mix(in oklab, var(--cal-accent-gold) 60%, transparent); outline-offset: 2px; }
.cal-modal-dialog .season-pool-account-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cal-modal-dialog .season-pool-account-cta .cal-btn { width: 100%; }

/* H3 / I10: the pool prize of a window („🎁 Tvoja výhra dňa“) - its own block under the window's reward line, painted only from the
   campaign's own palette tokens (--cal-window-open: the window's surface, --cal-accent-gold, --cal-text-on-light: its text), so it is
   at home on the navy beta and on the burgundy December alike - no fixed peach, no loud orange frame: the window's surface with a
   touch of the gold accent and a quiet gold line. The prize is said once (large); the line under it only says where it is. A
   highlighted prize gets a ring (the confetti is season.js's, data-highlight). */
.cal-modal-dialog .season-prize {
  margin: 18px 0 4px; padding: 14px 16px 16px; border-radius: 16px; text-align: center;
  border: 1px solid color-mix(in oklab, var(--cal-accent-gold) 55%, transparent);
  background: color-mix(in oklab, var(--cal-accent-gold) 12%, var(--cal-window-open));
  color: var(--cal-text-on-light);
}
.cal-modal-dialog .season-prize.is-highlight { box-shadow: 0 0 0 4px color-mix(in oklab, var(--cal-accent-gold) 35%, transparent); }
.cal-modal-dialog .season-prize-heading {
  margin: 0 0 6px; font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: color-mix(in oklab, var(--cal-text-on-light) 80%, transparent);
}
.cal-modal-dialog .season-prize .season-prize-where { margin: 0; color: color-mix(in oklab, var(--cal-text-on-light) 82%, transparent); }
.cal-modal-dialog .season-prize-value { margin: 0 0 8px; font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1.15; }
.cal-modal-dialog .season-prize p { font-size: 14px; }
.cal-modal-dialog .season-prize .season-coupon { justify-content: center; }
.cal-modal-dialog .season-prize .season-pool-account-cta { margin-top: 10px; }

/* I14: the answer options, the scramble input and the e-mail input are lighter than the window (its colour 55 % towards white). On a
   dark window with a derived light text colour that left the text at about 3 : 1, so there the theme gives them --cal-field-bg, the
   window 25 % darker; everywhere else the fallback is the mix they always had. */
.cal-modal-dialog .season-options { gap: 10px; margin-top: 4px; }
.cal-modal-dialog .season-option {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 16px; border-radius: 14px;
  border: 1.5px solid color-mix(in oklab, var(--cal-accent-gold) 55%, transparent);
  background: var(--cal-field-bg, color-mix(in oklab, var(--cal-window-open) 55%, #ffffff)); color: var(--cal-text-on-light);
  font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 700; text-align: center;
  box-shadow: 0 1px 3px color-mix(in oklab, var(--cal-text-on-light) 14%, transparent);
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.cal-modal-dialog .season-option:hover { border-color: var(--cal-accent-gold); background: color-mix(in oklab, var(--cal-accent-gold) 18%, var(--cal-window-open)); }
.cal-modal-dialog .season-option:active { transform: translateY(1px); }
.cal-modal-dialog .season-attempts-left {
  display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--cal-text-on-light); background: color-mix(in oklab, var(--cal-accent-gold) 18%, transparent);
}
.cal-modal-dialog .season-scramble input {
  box-sizing: border-box; width: 100%; max-width: 100%;
  font: inherit; font-size: 16px; padding: 12px 16px; border-radius: 999px; color: var(--cal-text-on-light);
  border: 1.5px solid color-mix(in oklab, var(--cal-accent-gold) 45%, transparent);
  background: var(--cal-field-bg, color-mix(in oklab, var(--cal-window-open) 55%, #ffffff));
}

.cal-modal-dialog .season-email-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; text-align: left; }
.cal-modal-dialog .season-email-why { margin: 0; font-size: 14px; text-align: center; }
.cal-modal-dialog .season-email-label { margin: 4px 0 -6px; font-size: 13px; font-weight: 700; }
.cal-modal-dialog .season-email-input {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 12px 18px; border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--cal-accent-gold) 45%, transparent);
  background: var(--cal-field-bg, color-mix(in oklab, var(--cal-window-open) 55%, #ffffff)); color: var(--cal-text-on-light);
  font: inherit; font-size: 16px; /* 16px: iOS Safari zooms any smaller input on focus */
}
.cal-modal-dialog .season-email-input:focus { border-color: var(--cal-accent-gold); }
.cal-modal-dialog .season-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13px; line-height: 1.45; cursor: pointer; }
.cal-modal-dialog .season-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cal-accent-gold); cursor: pointer; }
.cal-modal-dialog .season-email-status { margin: 0; font-size: 13px; font-weight: 700; color: color-mix(in oklab, var(--season-danger) 55%, var(--cal-text-on-light)); }
.cal-modal-dialog .season-email-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* The client-rendered states (fresh result, e-mail wait) carry no <h3> under the absolutely placed icon
   disc (.cal-modal-icon, top 20 px + 48 px) — without this their first line sits behind it. A fresh result
   whose window had a heading gets it back first (season.js, review #120): the result line is then no longer
   :first-child, so this stands aside and the heading sits where the server-rendered one does. */
.cal-modal-dialog #seasonModalContent > .season-result:first-child,
.cal-modal-dialog .season-email-wait { margin-top: 28px; }
.cal-modal-dialog .season-email-wait .season-email-status { color: var(--cal-text-on-light); font-size: 15px; font-weight: 600; }
/* B3: „Odkaz je skopírovaný.“ under the share button, written into the window's aria-live area. */
.cal-modal-dialog .season-share-copied { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--cal-text-on-light); }
/* B2: a heading that is the first line of the window (no preview note above it) gets the same 28 px as the other
   first lines - Bootstrap's reboot sets h3 { margin-top: 0 }, which left it at the dialog's 44 px, behind the icon disc
   (68 px). Server-rendered (inside .season-window) and client-rendered (a direct child of #seasonModalContent, season.js).
   With the note above, the heading is not the first child and sits right under it, as it does server-side. */
.cal-modal-dialog .season-window > .season-window-state:first-child > h3:first-child { margin-top: 28px; }
.cal-modal-dialog #seasonModalContent > h3:first-child { margin-top: 28px; }

/* ── F2 (item 4) — only tomorrow's locked tile carries the teaser line. ── */
.cal-window-closed .season-tile-teaser { color: var(--cal-text-on-dark); opacity: .9; font-weight: 700; line-height: 1.2; padding: 0 2px; }

/* ── F2 (item 5) — "Čo môžeš v Advente získať" as chips. ── */
.cal-widget .season-pool-teaser { position: relative; z-index: 10; text-align: center; margin: 0 0 20px; }
.cal-widget .season-pool-teaser-heading {
  margin: 0 0 10px; font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700;
  color: var(--cal-text-on-dark);
}
.cal-widget .season-pool-teaser-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* I3: a Christmas-mode campaign (the widget root carries .cal-festive - SeasonThemeService#christmasMode, the one check) keeps the
   look the chips always had: 22 % of the gold over the background, a softer gold border. */
.cal-widget .season-pool-teaser-list li {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--cal-text-on-dark);
  background: color-mix(in oklab, var(--cal-accent-gold) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--cal-accent-gold) 60%, transparent);
}
/* H6: with Christmas mode off the gold wash read brown on a navy palette - the chips take the palette's own tokens instead
   (the window colour, the gold, the text on dark), which read on any palette; the closed tiles wear the same colour. */
.cal-widget:not(.cal-festive) .season-pool-teaser-list li {
  background: var(--cal-window-closed);
  border: 1px solid var(--cal-accent-gold);
}

/* ── NI15 — the grid's block about the final draw: the title, a small card per prize, the one-line rule, the registered-only sentence. ──
   NI19a: it sits UNDER the grid (after the "Dnes je ..." line), so its gap is a top margin - the same 20 px it had as a bottom one.
   Only the theme's own tokens, on the widget the way the chips above wear them: a gold wash on a Christmas-mode campaign, the window
   colour with a gold border otherwise. The cards are the cream window (--cal-window-open) with its own text colour. 13-14 px text, two
   cards per row on a phone (one column of block), three from 640 px. */
.cal-widget .season-draw-teaser {
  position: relative; z-index: 10; margin: 20px 0 0; padding: 12px; border-radius: 12px; text-align: center;
  font-size: 14px; line-height: 1.45; color: var(--cal-text-on-dark);
  background: color-mix(in oklab, var(--cal-accent-gold) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--cal-accent-gold) 55%, transparent);
}
.cal-widget:not(.cal-festive) .season-draw-teaser { background: var(--cal-window-closed); border-color: var(--cal-accent-gold); }
.cal-widget .season-draw-teaser-title { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--cal-text-on-dark); }
/* NM5: the winners of the draw that has run, under its „Vyžrebované …“ title */
.cal-widget .season-draw-winners { margin: 0 0 10px; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--cal-text-on-dark); }
.cal-widget .season-draw-winner-email { font-weight: 700; }
.cal-widget .season-draw-prizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cal-widget .season-draw-prizes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cal-widget .season-draw-prize {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 8px;
  border-radius: 10px; background: var(--cal-window-open); color: var(--cal-text-on-light); font-size: 13px; line-height: 1.3;
  overflow-wrap: anywhere;
}
.cal-widget .season-draw-prize-picture { display: block; width: 100%; max-height: 64px; object-fit: contain; }
.cal-widget .season-draw-prize-label { font-weight: 700; }
.cal-widget .season-draw-prize-donor { font-size: 12px; color: var(--cal-text-on-light); }
.cal-widget a.season-draw-prize-donor { text-decoration: underline; }
.cal-widget .season-draw-prize-more { background: transparent; color: var(--cal-text-on-dark); font-weight: 700; border: 1px dashed var(--cal-accent-gold); }
.cal-widget .season-draw-teaser-rule { margin: 10px 0 0; font-size: 13px; color: var(--cal-text-on-dark); }
/* the NH5 sentence of the window (fragment drawRegisteredNote), here under the rule - the modal's own rule above does not reach it */
.cal-widget .season-draw-teaser .season-draw-registered { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--cal-text-on-dark); }
.cal-widget .season-draw-teaser .season-draw-registered p { margin: 0 0 4px; font-size: inherit; line-height: inherit; color: inherit; }
.cal-widget .season-draw-teaser .season-draw-registered a { color: inherit; text-decoration: underline; }

/* ── "Powered by Vyhrat.sk" pill (spec 7.1) — fixed brand colours, independent of theme. ────── */
.cal-powered {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: #0f2440; color: #e3a82b; font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px rgb(15 36 64 / .24); text-decoration: none;
}
@media (min-width: 640px) { .cal-powered { font-size: 14px; } }

/* ── Decorations (spec 7.2) — all aria-hidden, pointer-events:none, behind the grid. ─────────── */
.cal-snow, .cal-stars, .cal-garland, .cal-branches { pointer-events: none; position: absolute; inset: 0; }
.cal-snow { z-index: 20; overflow: hidden; }
.cal-snow span {
  position: absolute; top: -5%; width: 4px; height: 4px; border-radius: 999px;
  background: var(--cal-text-on-dark); opacity: .32; animation: cal-snow-fall 10s linear infinite;
}
.cal-snow span:nth-child(1) { left: 8%; animation-duration: 10.7s; animation-delay: -1.1s; }
.cal-snow span:nth-child(2) { left: 16%; width: 3px; height: 3px; animation-duration: 11.4s; animation-delay: -2.2s; }
.cal-snow span:nth-child(3) { left: 24%; animation-duration: 12.1s; animation-delay: -3.3s; }
.cal-snow span:nth-child(4) { left: 32%; width: 2px; height: 2px; animation-duration: 12.8s; animation-delay: -4.4s; }
.cal-snow span:nth-child(5) { left: 40%; animation-duration: 13.5s; animation-delay: -5.5s; }
.cal-snow span:nth-child(6) { left: 48%; width: 3px; height: 3px; animation-duration: 14.2s; animation-delay: -6.6s; }
.cal-snow span:nth-child(7) { left: 56%; animation-duration: 14.9s; animation-delay: -7.7s; }
.cal-snow span:nth-child(8) { left: 64%; width: 2px; height: 2px; animation-duration: 15.6s; animation-delay: -8.8s; }
.cal-snow span:nth-child(9) { left: 72%; animation-duration: 16.3s; animation-delay: -9.9s; }
.cal-snow span:nth-child(10) { left: 80%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: -11s; }
.cal-snow span:nth-child(11) { left: 88%; animation-duration: 17.7s; animation-delay: -12.1s; }
.cal-snow span:nth-child(12) { left: 96%; width: 2px; height: 2px; animation-duration: 18.4s; animation-delay: -13.2s; }
@keyframes cal-snow-fall { from { transform: translate3d(0, -8%, 0); } to { transform: translate3d(22px, 108%, 0); } }

.cal-garland { z-index: 5; width: 100%; height: 76px; color: var(--cal-accent-gold); overflow: visible; }
.cal-garland path { fill: none; stroke: currentColor; stroke-width: 2; opacity: .58; }
@media (max-width: 639px) {
  .cal-garland { height: 44px; transform: translateY(-8px); opacity: .68; }
  .cal-garland path { stroke-width: 1.7; }
}
.cal-garland-light { fill: currentColor; animation: cal-light-pulse 2.8s ease-in-out infinite; }
.cal-garland-light-1 { animation-delay: 1.4s; }
@keyframes cal-light-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

.cal-branch { position: absolute; width: 110px; color: var(--cal-accent-sage); opacity: .55; }
.cal-branch path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.cal-branch-top { top: 0; left: 0; }
.cal-branch-bottom { right: -15px; bottom: -18px; width: 92px; opacity: .32; transform: rotate(180deg); }

.cal-stars { z-index: 1; width: 100%; height: 100%; color: var(--cal-text-on-dark); }
.cal-stars circle { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: cal-twinkle 3.6s ease-in-out infinite; }
.cal-stars circle:nth-child(3n + 2) { animation-delay: 1.2s; }
.cal-stars circle:nth-child(3n) { animation-delay: 2.4s; }
@keyframes cal-twinkle { 0%, 100% { opacity: .18; transform: scale(.75); } 50% { opacity: .65; transform: scale(1.15); } }

/* ── Confetti (spec 7.2/7.4) — a short CSS-only burst, JS-spawned only for a highlight=1 reveal. ── */
.cal-confetti { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.cal-confetti span {
  position: absolute; top: -10%; width: 7px; height: 10px; opacity: 0;
  background: var(--cal-accent-gold); animation: cal-confetti-fall 1100ms ease-in forwards;
}
@keyframes cal-confetti-fall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--cal-confetti-dx, 12px), 340%, 0) rotate(var(--cal-confetti-rot, 260deg)); }
}

/* ── prefers-reduced-motion (spec 7.2) — off every infinite/looping animation, floor one-shots at
   1ms, keep the today CTA visually obvious with a static glow instead of the pulse. ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .cal-today-pulse, .cal-today-intro, .cal-snow span, .cal-garland-light, .cal-stars circle, .cal-confetti span {
    animation: none;
  }
  .cal-flip { animation-duration: 1ms; }
  .cal-icon-in { animation-duration: 1ms; animation-delay: 0ms; }
  .cal-today-hover { transition-duration: 1ms; }
  .cal-window-today {
    box-shadow: 0 2px 10px rgb(0 0 0 / .25),
                0 0 22px 6px color-mix(in oklab, var(--cal-accent-gold) 45%, transparent),
                0 0 44px 14px color-mix(in oklab, var(--cal-window-today) 26%, transparent);
  }
}