/* CTA kit — conversion blocks (ticker, popup, CTA blocks, brand showcase, sidebar card).
   Palette comes from tokens below; each site overrides them via cta-data.php ['theme']. */
:root {
  --ck-brand: var(--color-primary, #15803d);
  --ck-panel: linear-gradient(120deg, #0e2c3e 0%, #03624b 70%, #008061 100%);
  --ck-panel-alt: linear-gradient(120deg, #0e2c3e 0%, #12506a 100%);
  --ck-panel-solid: #0e2c3e;
  --ck-on-panel: #ffffff;
  --ck-on-panel-soft: rgba(255, 255, 255, 0.82);
  --ck-accent: var(--color-accent, #ffa200);
  --ck-cta-bg: var(--cta-bg, linear-gradient(135deg, #ffb52e 0%, #ffa200 100%));
  --ck-cta-bg-hover: var(--cta-bg-hover, linear-gradient(135deg, #f9be57, #e27a00));
  --ck-cta-text: var(--cta-text, #481a00);
  --ck-glow: rgba(255, 162, 0, 0.4);
  --ck-glow-strong: rgba(255, 162, 0, 0.75);
  --ck-surface: var(--bg-card, #ffffff);
  --ck-on-surface: var(--color-text, #0e2c3e);
  --ck-title: #0e2c3e;
  --ck-bonus: #03624b;
  --ck-muted: rgba(14, 44, 62, 0.55);
  --ck-line: rgba(14, 44, 62, 0.1);
  --ck-hover: #eef6f3;
  --ck-chip: #e8edef;
  --ck-chip-text: #0e2c3e;
  --ck-note-bg: #f7f9fa;
  --ck-ticker-h: 34px;
  --ck-radius: 18px;
  --ck-sg: var(--ck-ticker-h);
}

/* ---------- ticker ---------- */
.ck-ticker { position: relative; z-index: 301; height: var(--ck-ticker-h); overflow: hidden; background: var(--ck-panel-solid); color: var(--ck-on-panel); font-size: 13px; line-height: var(--ck-ticker-h); white-space: nowrap; }
.ck-ticker__track { display: inline-flex; width: max-content; animation: ck-run 55s linear infinite; }
.ck-ticker:hover .ck-ticker__track { animation-play-state: paused; }
.ck-ticker__group { display: inline-flex; flex-shrink: 0; }
.ck-ticker__item { display: inline-flex; align-items: center; gap: 6px; padding: 0 26px 0 0; color: var(--ck-on-panel); text-decoration: none; }
.ck-ticker__item::before { content: ""; width: 7px; height: 7px; margin-right: 12px; background: var(--ck-accent); transform: rotate(45deg); flex: 0 0 auto; }
.ck-ticker__item b { color: var(--ck-accent); font-weight: 800; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.04em; }
.ck-ticker__item:hover { text-decoration: underline; }
@keyframes ck-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- CTA blocks ---------- */
.ck-cta { position: relative; display: flex; align-items: center; gap: 18px; margin: 16px 0; padding: 18px 22px; border-radius: var(--ck-radius); color: var(--ck-on-panel); background: var(--ck-panel); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); overflow: hidden; }
.ck-cta::before { content: ""; position: absolute; inset: -40% auto -40% -30%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent); transform: skewX(-18deg); animation: ck-shine 5s ease-in-out infinite; pointer-events: none; }
.ck-cta--sport { background: var(--ck-panel-alt); }
.ck-cta--live { background: var(--ck-panel); filter: saturate(1.1); }
.ck-cta__icon { flex: 0 0 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--ck-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ck-accent) 50%, transparent); color: var(--ck-accent); }
.ck-cta__icon svg { width: 28px; height: 28px; }
.ck-cta__body { flex: 1 1 auto; min-width: 0; }
.ck-cta .ck-cta__title { margin: 0 0 4px; font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--ck-on-panel); }
.ck-cta .ck-cta__sub { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ck-on-panel-soft); }
.ck-cta .ck-cta__btn, .ck-popup__cta, .ck-side__btn, .ck-row__btn { text-decoration: none; }
.ck-cta .ck-cta__btn, .seo-block .content .ck-cta .ck-cta__btn, .content .ck-cta .ck-cta__btn { flex: 0 0 auto; display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--ck-cta-bg); color: var(--ck-cta-text); font-size: 15px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 18px var(--ck-glow); transition: transform 0.2s ease, box-shadow 0.2s ease; animation: ck-pulse 2.4s ease-in-out infinite; }
.ck-cta .ck-cta__btn:hover { background: var(--ck-cta-bg-hover); transform: translateY(-2px); }
.ck-wrap { margin: 16px 20px 0; }
@keyframes ck-shine { 0%, 55% { left: -30%; } 100% { left: 130%; } }
@keyframes ck-pulse { 0%, 100% { box-shadow: 0 6px 18px var(--ck-glow); } 50% { box-shadow: 0 6px 26px var(--ck-glow-strong); } }
@media (max-width: 640px) {
  .ck-cta { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .ck-cta__icon { flex-basis: 44px; height: 44px; }
  .ck-cta__icon svg { width: 24px; height: 24px; }
  .ck-cta__body { flex: 1 1 calc(100% - 60px); }
  .ck-cta .ck-cta__title { font-size: 17px; }
  .ck-cta .ck-cta__btn, .seo-block .content .ck-cta .ck-cta__btn, .content .ck-cta .ck-cta__btn { flex: 1 1 100%; text-align: center; padding: 13px 18px; }
  .ck-wrap { margin: 12px 12px 0; }
}

/* ---------- popup ---------- */
.ck-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(7, 20, 30, 0); backdrop-filter: blur(0); transition: background 0.35s ease, backdrop-filter 0.35s ease; }
.ck-popup[hidden] { display: none; }
.ck-popup.is-open { background: rgba(7, 20, 30, 0.72); backdrop-filter: blur(4px); }
.ck-popup__card { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 34px 28px 24px; text-align: center; color: var(--ck-on-panel); border-radius: 22px; background: radial-gradient(420px 220px at 50% -10%, color-mix(in srgb, var(--ck-accent) 28%, transparent), transparent 70%), var(--ck-panel); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(26px) scale(0.86); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 1.3, 0.4, 1); }
.ck-popup.is-open .ck-popup__card { opacity: 1; transform: none; }
.ck-popup__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.2s; }
.ck-popup__close:hover { background: rgba(255, 255, 255, 0.28); }
.ck-popup__badge { width: 112px; height: 112px; margin: -6px auto 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--ck-cta-bg); color: var(--ck-cta-text); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ck-accent) 22%, transparent), 0 10px 30px var(--ck-glow); animation: ck-float 3s ease-in-out infinite; }
.ck-popup__badge span { font-size: 34px; font-weight: 900; line-height: 1; }
.ck-popup__badge small { margin-top: 4px; font-size: 14px; font-weight: 800; }
.ck-popup__eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ck-accent); }
.ck-popup__title { margin: 0 0 10px; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--ck-on-panel); }
.ck-popup__text { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ck-on-panel-soft); }
.ck-popup__facts { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ck-popup__facts li { padding: 6px 10px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }
.ck-popup__facts strong { color: var(--ck-accent); }
.ck-popup__cta { display: block; padding: 15px 20px; border-radius: 999px; background: var(--ck-cta-bg); color: var(--ck-cta-text); font-size: 17px; font-weight: 800; box-shadow: 0 8px 22px var(--ck-glow); animation: ck-pulse 2.2s ease-in-out infinite; transition: transform 0.2s ease; }
.ck-popup__cta:hover { transform: translateY(-2px); background: var(--ck-cta-bg-hover); }
.ck-popup__note { margin: 12px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
html.ck-lock { overflow: hidden; }
@keyframes ck-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@media (max-width: 480px) {
  .ck-popup__card { padding: 30px 18px 20px; }
  .ck-popup__title { font-size: 21px; }
  .ck-popup__badge { width: 96px; height: 96px; }
  .ck-popup__badge span { font-size: 29px; }
}

/* ---------- sidebar card ---------- */
.ck-side { display: block; margin: 10px 10px 8px; padding: 14px 12px; border-radius: 14px; text-align: center; color: var(--ck-on-panel); text-decoration: none; background: radial-gradient(160px 90px at 50% -10%, color-mix(in srgb, var(--ck-accent) 30%, transparent), transparent 70%), var(--ck-panel); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); flex-shrink: 0; }
.ck-side__eyebrow { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ck-accent); }
.ck-side__amount { display: block; margin: 4px 0 2px; font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--ck-on-panel); }
.ck-side__note { display: block; margin-bottom: 10px; font-size: 12px; color: var(--ck-on-panel-soft); }
.ck-side__btn { display: block; padding: 9px 8px; border-radius: 999px; background: var(--ck-cta-bg); color: var(--ck-cta-text); font-size: 13px; font-weight: 800; animation: ck-pulse 2.4s ease-in-out infinite; }
.ck-side:hover .ck-side__btn { background: var(--ck-cta-bg-hover); }

/* ---------- hero split + brand showcase ---------- */
.ck-split { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; margin: 20px 20px 0; align-items: stretch; }
.ck-split__main { min-width: 0; display: flex; flex-direction: column; }
.ck-split__main > * { width: 100%; }
.ck-showcase { display: flex; flex-direction: column; min-width: 0; background: var(--ck-surface); color: var(--ck-on-surface); border: 1px solid var(--ck-line); border-radius: 22px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12); overflow: hidden; }
.ck-showcase__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--ck-on-panel); background: var(--ck-panel); }
.ck-showcase__head svg { width: 24px; height: 24px; color: var(--ck-accent); flex: 0 0 auto; }
.ck-showcase__title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--ck-on-panel); }
.ck-showcase__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.ck-showcase__list li { flex: 1 1 0; display: flex; border-top: 1px solid var(--ck-line); }
.ck-showcase__list li:first-child { border-top: 0; }
.ck-row { flex: 1; display: grid; grid-template-columns: 26px 112px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px; color: var(--ck-on-surface); transition: background 0.2s ease; }
.ck-row:hover { background: var(--ck-hover); }
.ck-row__rank { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; background: var(--ck-chip); color: var(--ck-chip-text); }
.ck-row__rank--1 { background: var(--ck-cta-bg); color: var(--ck-cta-text); }
.ck-row__logo { width: 112px; height: 39px; object-fit: contain; border-radius: 8px; display: block; }
.ck-row__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ck-row__name { font-size: 13px; font-weight: 800; color: var(--ck-title); }
.ck-row__bonus { font-size: 12.5px; font-weight: 700; color: var(--ck-bonus); }
.ck-row__min { font-size: 11px; color: var(--ck-muted); }
.ck-row__btn { padding: 8px 12px; border-radius: 999px; white-space: nowrap; background: var(--ck-cta-bg); color: var(--ck-cta-text); font-size: 12.5px; font-weight: 800; box-shadow: 0 3px 10px var(--ck-glow); transition: transform 0.2s ease; }
.ck-row:hover .ck-row__btn { transform: translateY(-1px); background: var(--ck-cta-bg-hover); }
.ck-showcase__note { margin: 0; padding: 8px 14px; text-align: center; font-size: 11px; color: var(--ck-muted); background: var(--ck-note-bg); border-top: 1px solid var(--ck-line); }
/* standalone showcase on inner pages: list in a wider two-column layout */
.ck-wrap .ck-showcase { margin: 0 auto; max-width: 980px; }
@media (max-width: 1180px) {
  .ck-split { grid-template-columns: minmax(0, 1fr) 340px; }
  .ck-row { grid-template-columns: 22px 80px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .ck-row__logo { width: 80px; height: 28px; }
  .ck-row__btn { padding: 7px 10px; font-size: 12px; }
}
@media (max-width: 1100px) {
  .ck-split { grid-template-columns: 1fr; margin: 16px 16px 0; }
  .ck-row { grid-template-columns: 26px 112px minmax(0, 1fr) auto; }
  .ck-row__logo { width: 112px; height: 39px; }
}
@media (max-width: 640px) {
  .ck-split { margin: 12px 12px 0; gap: 12px; }
  .ck-row { grid-template-columns: 22px 72px minmax(0, 1fr); row-gap: 6px; padding: 10px 12px; }
  .ck-row__logo { width: 72px; height: 26px; }
  .ck-row__btn { grid-column: 2 / -1; text-align: center; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-popup, .ck-popup__card { transition: none; }
  .ck-popup__badge, .ck-popup__cta, .ck-cta .ck-cta__btn, .ck-cta::before, .ck-side__btn { animation: none; }
  .ck-ticker { overflow-x: auto; }
  .ck-ticker__track { animation: none; }
}

/* site wiring */
@media (min-width: 901px) { .sidebar { top: calc(var(--header-height) + var(--ck-tk, 34px)); } }
.ck-split__main .hero-slider { margin: 0; width: 100%; height: auto; min-height: 400px; }
.page-body > .ck-cta { margin: 16px 20px 0; }
@media (max-width: 1100px) { .ck-split__main .hero-slider { min-height: 320px; } .page-body > .ck-cta { margin: 16px 16px 0; } }
@media (max-width: 640px) { .ck-split__main .hero-slider { min-height: 0; height: 340px; } .page-body > .ck-cta { margin: 12px 12px 0; } }
/* this template keeps the desktop sidebar as a 42px icon rail: show the offer card only in the mobile drawer */
@media (min-width: 901px) { .sidebar .ck-side { display: none; } }