/* drawn font pair: manrope */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* editorial.css — premium iGaming affiliate review style
   Typography: Barlow Condensed (headings) + Inter (body)
   Rhythm: alternating section backgrounds, card elevation, strong CTA
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Brand — overridden per-site via layout.html <style> block */
  --color-brand:          #1a1d24;   /* dark brand color, used for hero/dark sections */
  --color-accent:         #1f9d55;
  --color-accent-hover:   #178044;
  --color-accent-light:   #e8f5ee;

  /* Dark section surface tokens (used inside .dark-section) */
  --color-dark-bg:        var(--color-brand);
  --color-dark-text:      #ffffff;
  --color-dark-muted:     rgba(255,255,255,0.65);
  --color-dark-border:    rgba(255,255,255,0.12);

  /* Surfaces */
  --color-bg-primary:     #ffffff;
  --color-bg-section:     #f6f7f9;
  --color-bg-section-alt: #eef0f4;
  --color-bg-dark:        var(--color-brand);
  --color-bg-card:        #ffffff;
  --color-bg-card-hover:  #fafbfc;

  /* Text */
  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6b7280;
  --color-text-light:     #9ca3af;
  --color-text-inverse:   #ffffff;

  /* Borders */
  --color-border:         #e5e7eb;
  --color-border-strong:  #d1d5db;

  /* Status */
  --color-live:           #ef4444;
  --color-accent-red:     #dc2626;   /* used by 18+ badges and live kickers */
  --color-success:        #059669;
  --color-warning:        #d97706;
  --color-star:           #f59e0b;

  /* Elevation */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.05);
  --shadow-xl:  0 16px 40px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);

  /* Radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-btn: 8px;
  --radius-card: 12px;

  /* Spacing */
  --spacing-section: 80px;
  --spacing-section-sm: 56px;
  --spacing-block: 40px;

  /* Fonts */
  --font-heading: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   350ms ease;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Base ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; }
h5 { font-size: 0.875rem; font-family: var(--font-body); font-weight: 600;
     text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }

p { color: var(--color-text-secondary); }
strong { font-weight: 600; color: var(--color-text-primary); }

/* ── Layout ──────────────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 640px) { .container { padding: 0 20px; } }

section { padding: var(--spacing-section) 0; }
section:nth-of-type(even) { background: var(--color-bg-section); }

/* ── Header ──────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-bg, var(--color-bg-primary));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  padding: 14px 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.site-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.site-logo:hover { color: var(--color-accent-text); text-decoration: none; }

.site-logo-flag {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  vertical-align: middle;
}
.site-logo-flag svg {
  height: 16px;
  width: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  display: block;
}

.site-nav { display: flex; gap: 32px; }
.site-nav a { font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted);
  text-decoration: none; transition: color var(--transition-fast); }
.site-nav a:hover { color: var(--color-accent-text); text-decoration: none; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 8px rgba(31,157,85,.30);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 16px rgba(31,157,85,.40);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: transparent;
  color: var(--color-accent-text);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  border: 2px solid var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-secondary:hover { background: var(--color-accent); color: #fff; text-decoration: none; }

.btn-sm { font-size: 0.875rem; padding: 10px 20px; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg-override, var(--color-bg-card));
  border: var(--card-border, 1px solid var(--color-border));
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--card-shadow, var(--shadow-sm));
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-md); }
.card--elevated { box-shadow: var(--shadow-md); }
.card--bordered { border-color: var(--color-border-strong); }

/* ── Badges & Tags ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.badge--accent  { background: var(--color-accent-light); color: var(--color-accent-text); }
.badge--dark    { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.badge--live    { background: #fee2e2; color: var(--color-live); }
.badge--success { background: #d1fae5; color: var(--color-success); }

/* ── Divider decorative ──────────────────────────────────────────── */
.rule-accent {
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  margin: 12px 0 20px;
  border-radius: 2px;
}

/* ── Tables ──────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
th {
  background: var(--color-bg-section);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  text-align: start;
  border-bottom: 2px solid var(--color-border);
}
td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg-section); }
td strong { color: var(--color-text-primary); }

/* ── Utility ─────────────────────────────────────────────────────── */
.text-muted   { color: var(--color-text-muted); }
.text-accent  { color: var(--color-accent-text); }
.text-light   { color: var(--color-text-light); }
.text-inverse { color: var(--color-text-inverse); }
.font-heading { font-family: var(--font-heading); }

.section-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-text);
  margin-bottom: 8px;
}
.section-title { margin-bottom: 8px; }
.section-lead  { color: var(--color-text-muted); font-size: 1.0625rem;
  max-width: 600px; margin-top: 12px; }

/* ── Editorial grid (2-col asymmetric) ──────────────────────────── */
.editorial-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 56px;
  align-items: start;
}
.editorial-grid--reversed { grid-template-columns: 2fr 3fr; }
@media (max-width: 860px) {
  .editorial-grid,
  .editorial-grid--reversed { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Prose (long-form content sections) ──────────────────────────── */
.prose h2 { margin: 40px 0 16px; }
.prose h3 { margin: 28px 0 10px; }
.prose p  { margin-bottom: 18px; line-height: 1.75; }
.prose ul, .prose ol { margin: 0 0 18px 20px; }
.prose li { margin-bottom: 6px; color: var(--color-text-secondary); }

/* ── Stars ───────────────────────────────────────────────────────── */
.stars { color: var(--color-star); font-size: 1.1em; letter-spacing: 2px; }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-bg-section);
  border-top: 1px solid var(--color-border);
  padding: 40px 0;
  margin-top: 0;
}
.footer-rg {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.footer-copy {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ── Mobile overrides ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  section { padding: var(--spacing-section-sm) 0; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }
  .site-nav { display: none; }
  .btn-primary { width: 100%; justify-content: center; }
}

/* ── Dark sections (hero, banners) ───────────────────────────────── */
.dark-section {
  background: var(--color-brand);
  color: var(--color-dark-text);
}
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4 {
  color: var(--color-dark-text);
}
.dark-section p, .dark-section .hero__lead { color: var(--color-dark-muted); }
.dark-section .text-muted { color: var(--color-dark-muted); }
.dark-section .rule-accent { background: var(--color-accent); }
.dark-section .card {
  background: rgba(255,255,255,0.07);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}
.dark-section .card .text-muted { color: var(--color-dark-muted); }

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Broken image shimmer ────────────────────────────────────────── */
img.img-broken {
  display: block;
  min-height: 160px;
  background: linear-gradient(90deg, var(--color-bg-section) 25%, #eef0f3 50%, var(--color-bg-section) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { img.img-broken { animation: none; } }

/* ── RTL (Arabic, Hebrew, Farsi, Urdu) ───────────────────────────── */
[dir="rtl"] {
  /* Font: switch condensed heading to system stack with better Arabic support */
  --font-heading: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-body:    'Tajawal', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

[dir="rtl"] body { direction: rtl; text-align: end; }

/* Navigation */
[dir="rtl"] .site-nav { flex-direction: row-reverse; }
[dir="rtl"] .site-header .container { flex-direction: row-reverse; }

/* Hero */
[dir="rtl"] .hero__content { text-align: end; }
[dir="rtl"] .hero__cta-group { flex-direction: row-reverse; justify-content: flex-start; }

/* Cards / lists — flip margins and paddings */
[dir="rtl"] .card { text-align: end; }
[dir="rtl"] .pros-list li::before,
[dir="rtl"] .cons-list li::before { margin-inline-end: 0; margin-inline-start: 0.5em; }
[dir="rtl"] .pros-list li,
[dir="rtl"] .cons-list li { padding-inline-start: 0; padding-inline-end: 1.5em; }

/* Steps — number on the right */
[dir="rtl"] .steps__item { flex-direction: row-reverse; text-align: end; }
[dir="rtl"] .steps__num { margin-inline-end: 0; margin-inline-start: 1rem; }

/* Sticky CTA bar */
[dir="rtl"] .sticky-cta { direction: rtl; }
[dir="rtl"] .sticky-cta__inner { flex-direction: row-reverse; }

/* Breadcrumb separator direction */
[dir="rtl"] .breadcrumb__sep { transform: scaleX(-1); }

/* Rating stars — keep LTR order inside RTL context */
[dir="rtl"] .stars { direction: ltr; display: inline-flex; }

/* TOC links */
[dir="rtl"] .toc { text-align: end; }
[dir="rtl"] .toc a { padding-inline-start: 0; padding-inline-end: 1rem; }
[dir="rtl"] .toc a::before { left: auto; right: 0; }

/* Tables */
[dir="rtl"] table { direction: rtl; text-align: end; }
[dir="rtl"] th, [dir="rtl"] td { text-align: end; }

/* Footer */
[dir="rtl"] .site-footer { direction: rtl; text-align: end; }
[dir="rtl"] .footer-nav { direction: rtl; }

/* Arabic Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@400;500;700&display=swap');

/* Brand-pill behind low-contrast logos (added by build.py contrast guard) */
.site-logo__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  line-height: 0;
}
.site-logo__pill img { display: block; }

/* Caption under the logo (design.logo_note) — «Неофициальный сайт» and the like.
   Put here, not inline in build.py: the look belongs to the skin, and the QA
   check «every block class has CSS» rightly fails on decorative classes with
   no rules. Colour and the missing underline come from .site-logo itself. */
.site-logo__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}
.site-logo__note {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.62;
  white-space: nowrap;
}

/* Header logo row: logo (or brand text), optional pill and geo flag must sit
   on one line, vertically centred — the global img{display:block} reset used
   to push the flag under the logo */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-logo .site-logo__img { display: block; height: 36px; width: auto; }
/* В шапке логотип крупнее: 36px рассчитаны на квадратную марку, а у словесного
   логотипа (600x300 и шире) при такой высоте остаётся около 70px ширины —
   на первом экране он читался как иконка, а не как логотип бренда. */
.site-header .site-logo .site-logo__img { height: 64px; }
@media (max-width: 600px) {
  .site-header .site-logo .site-logo__img { height: 48px; }
}
.site-logo-flag { margin-inline-start: 0; }

/* ── Header burger + footer nav (were only defined in bold.css, so the mobile
      menu button rendered as three unstyled spans on light themes) ────────── */
.site-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.site-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text-secondary);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.site-nav-toggle--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle--open span:nth-child(2) { opacity: 0; }
.site-nav-toggle--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav-toggle:hover span { background: var(--color-accent); }

.footer-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.footer-nav a { font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--color-accent-text); }

@media (max-width: 768px) {
  .site-nav-toggle { display: flex; }
  .site-header .container { position: relative; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    padding: 8px 0;
    gap: 0;
    z-index: 99;
  }
  .site-nav.site-nav--open { display: flex; }
  .site-nav a { padding: 12px 20px; font-size: 0.9375rem; }
  .site-nav a[aria-current="page"] {
    border-inline-start: 3px solid var(--color-accent);
    padding-inline-start: 17px;
  }
}

/* nav links carry .site-nav__link from build.py's nav builder */
.site-nav__link { text-decoration: none; }


/* generated palette — theme=dark accent=#f5c66b density=compact */
:root {
  --color-accent: #f5c66b;
  --color-accent-hover: #ffdd77;
  --color-accent-light: rgba(245,198,107,0.14);
  --color-accent-red: #ff4757;
  --color-accent-text: #f5c66b;
  --color-bg-card: #241f1c;
  --color-bg-card-hover: #2a2521;
  --color-bg-dark: #110d0e;
  --color-bg-primary: #131110;
  --color-bg-section: #191614;
  --color-bg-section-alt: #201c19;
  --color-border: rgba(255,255,255,0.10);
  --color-border-strong: rgba(255,255,255,0.18);
  --color-brand: #110d0e;
  --color-dark-border: rgba(255,255,255,0.24);
  --color-device-frame: #332b25;
  --color-live: #ef4444;
  --color-on-accent: #0b0d10;
  --color-star: #f59e0b;
  --color-success: #22c55e;
  --color-text-inverse: #131110;
  --color-text-light: #6a6158;
  --color-text-muted: #9a9086;
  --color-text-primary: #f5f1ec;
  --color-text-secondary: #d3cbc2;
  --color-warning: #f59e0b;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-heading: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --radius-btn: 6px;
  --shadow-accent: 0 4px 20px rgba(245,198,107,0.28);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.50), 0 4px 10px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.60), 0 6px 18px rgba(0,0,0,0.35);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --spacing-block: 36px;
  --spacing-section: 64px;
  --spacing-section-sm: 44px;
}