:root{
  --bg: #0b0e13;
  --card: #121826;
  --muted: #8ea0b6;
  --text: #e6eef8;
  --accent: #5eead4;
  --accent2: #93c5fd;
  --pill: #1f2937;
  --border: #1f2a37;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px;margin:0 auto;padding:0 16px}

header.site-header{position:sticky;top:0;background:rgba(11,14,19,0.85);backdrop-filter: blur(8px);border-bottom:1px solid var(--border);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.logo a{font-weight:800;letter-spacing:0.3px;color:#fff}
nav.main-nav{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
nav.main-nav a{color:#dbeafe;font-weight:600;margin:0 6px}
.lang-switch{display:flex;align-items:center;gap:8px}
.lang-switch label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0.08em}
select#langSelect{background:var(--pill);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:10px}

h1,h2,h3,h4{margin:0 0 12px}
h1{font-size:28px}
h2{font-size:22px;color:#dbeafe}
p.lead{color:var(--muted);margin-top:-6px}

.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.card .logo-wrap{display:block;text-align:center;height:84px}
.card img{max-height:84px;max-width:200px;object-fit:contain;filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));}
.card h3{font-size:18px}
.rating{color:#ffd166}

.meta{font-size:14px;color:#d1d5db;display:grid;gap:4px}
.actions{margin-top:auto}
.button{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0e13;padding:10px 16px;border-radius:999px;font-weight:700;border:none;min-width:140px;text-align:center;letter-spacing:.2px}
.button.small{padding:8px 12px;font-size:14px;min-width:110px}
.button:hover{text-decoration:none;filter:saturate(1.1)}

.pagination{display:flex;gap:8px;justify-content:center;margin:18px 0 0}
.page-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:var(--pill);color:#bfd0e8;border:1px solid var(--border)}
.page-num.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0e13;border:none}

.section{padding:24px 0}
header.page-head{padding:18px 0 8px;border-bottom:1px solid var(--border);margin-bottom:12px}
header.page-head h1{font-size:24px}
header.page-head p{color:var(--muted)}

.list-row{display:grid;grid-template-columns:120px 1fr 160px;gap:16px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:16px;margin:10px 0}
.list-logo img{max-height:90px;max-width:120px;object-fit:contain}
.pill{background:var(--pill);color:#cbd5e1;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:12px;margin-left:8px}
.kv{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.kv li{display:flex;gap:10px;align-items:center}
.kv li strong{min-width:140px;color:#a5b4fc}
.bullets{list-style:none;padding:0;margin:6px 0}
.bullets li{margin:2px 0}

.list-actions{display:flex;align-items:center;justify-content:flex-end}

.bonus-row{display:grid;grid-template-columns:120px 1fr 120px;gap:16px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;margin:10px 0}
.b-logo img{max-height:70px;max-width:120px;object-fit:contain}
.b-offer{font-weight:700}
.b-terms{color:#d1d5db;font-size:13px;margin-top:4px}

.review-row{display:grid;grid-template-columns:120px 1fr 160px;gap:16px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:16px;margin:10px 0}
.rv-logo img{max-height:90px;max-width:120px;object-fit:contain}
.rv-summary{color:#d1d5db;margin:6px 0 0}

footer.site-footer{margin-top:28px;border-top:1px solid var(--border);background:#0a0f18}
.footer-grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:16px;padding:16px 0}
.footer-bottom{border-top:1px solid var(--border);text-align:center;padding:10px;color:#9fb1c9;font-size:13px}

/* ---- Stars fill (no 1/2 symbol) ---- */
.stars {
  position: relative;
  display: inline-block;
  font-size: 18px;
  letter-spacing: 2px;
}
.stars__bg,
.stars__fg { white-space: nowrap; }
.stars__bg { color: #324054; }
.stars__fg {
  color: #ffd166;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* MOBILE header fit one line */
@media (max-width: 480px){
  header.site-header { padding: 0; }
  .header-inner{ gap: 6px; }
  .logo a{ font-size: 16px; letter-spacing: 0; }
  nav.main-nav{ gap:6px; justify-content:center; white-space:nowrap; flex-wrap:nowrap; overflow:hidden; }
  nav.main-nav a{ margin:0 4px; padding:6px 0; font-size:13px; text-decoration:none !important; border:none !important; }
  .lang-switch label{ display:none; }
  #langSelect{ padding:4px 6px; font-size:12px; min-width:56px; }
}

/* MOBILE layout for all subpages */
@media (max-width: 600px){
  .container{padding:0 12px}
  .cards{grid-template-columns:1fr}
  .card{padding:14px;border-radius:14px}
  .card .logo-wrap{height:72px}
  .card img{max-height:72px;max-width:180px}
  .meta{font-size:14px}
  .button{width:100%}
  .pagination{margin-top:14px}

  .list-row,.bonus-row,.review-row{grid-template-columns:1fr;gap:12px}
  .list-actions,.rv-actions{grid-column:1 / -1;display:flex;justify-content:stretch}
  .b-logo img,.list-logo img,.rv-logo img{max-height:64px;object-fit:contain}

  .kv li{flex-direction:column;align-items:flex-start;gap:2px}
  .kv li strong{min-width:auto;color:#c7d2fe}
  .b-offer,.rv-summary{word-break:break-word}
}

/* Extra compact for 320-360px */
@media (max-width: 360px){
  .logo a{ font-size: 15px; }
  nav.main-nav a{ font-size:12px; margin:0 3px; }
  #langSelect{ min-width: 52px; font-size: 11.5px; }
}
/* === HOTFIX: компактная шапка с переносом меню на узких экранах === */
@media (max-width: 480px){
  .header-inner{ flex-wrap: wrap; gap: 6px; }

  /* меню становится гибким и переносится, ничего не обрезаем */
  nav.main-nav{
    order: 2;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;        /* [row-gap] [column-gap] */
    white-space: normal;  /* разрешаем перенос слов внутри ссылок */
  }
  nav.main-nav a{
    font-size: 13px;
    line-height: 1.2;
    margin: 0; 
    padding: 6px 0;
    text-decoration: none !important;
    word-break: keep-all; /* не рвём слова типа "Casino (Fiat)" посередине */
    border: none !important;
  }

  /* язык уводим на свою строку, по центру */
  .lang-switch{
    order: 3;
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    margin-top: 2px;
  }
  .lang-switch label{ display: none; }
  #langSelect{ padding: 4px 6px; font-size: 12px; min-width: 56px; }

  /* логотип — слева, компактнее */
  .logo{ order: 1; }
  .logo a{ font-size: 16px; letter-spacing: 0; }
}

@media (max-width: 360px){
  nav.main-nav a{ font-size: 12px; }
}
/* ===== Footer email wrap fix ===== */
footer.site-footer .footer-grid a[href^="mailto:"]{
  display:inline-block;
  max-width:100%;
  overflow-wrap:anywhere; /* основное */
  word-break: break-word; /* подстраховка для Safari */
  line-break:anywhere;    /* если поддерживается */
  white-space:normal;
}
@media (max-width: 600px){
  .footer-grid{ grid-template-columns:1fr !important; }
}


/* --- 2025 UX Refresh --- */
:root{
  --radius-xl: 18px;
}
html{scroll-behavior:smooth}
h1{font-size:clamp(24px, 2.5vw, 32px)}
h2{font-size:clamp(20px, 2vw, 26px)}
.card{border-radius:var(--radius-xl);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.button:focus-visible, a:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:10px}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}
.skip-link{position:absolute;left:-999px;top:-999px;background:#fff;color:#000;padding:8px 12px;z-index:1000;border-radius:8px}
.skip-link:focus{left:8px;top:8px}
.card .logo-wrap{height:92px}
.card img{max-height:92px}
.site-footer a{color:#e6eef8;text-decoration:underline dotted}
.site-footer .footer-grid{grid-template-columns:2fr 2fr 1fr}
@media (max-width: 800px){
  .site-footer .footer-grid{grid-template-columns:1fr}
  .card .logo-wrap{height:80px}
}
/* email wrapping to prevent overflow */
footer.site-footer a[href^="mailto:"]{overflow-wrap:anywhere;word-break:break-word}

/* === Light theme support === */
:root[data-theme="light"]{
  --bg:#f6f7fb; --card:#ffffff; --text:#0b0e13; --muted:#59667a;
  --border:#e5e7eb; --pill:#eef2f7;
  --accent:#0ea5e9; --accent2:#22d3ee;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f6f7fb; --card:#ffffff; --text:#0b0e13; --muted:#59667a;
    --border:#e5e7eb; --pill:#eef2f7;
    --accent:#0ea5e9; --accent2:#22d3ee;
  }
}
#themeToggle{
  background:var(--pill);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer;
  margin-left:8px;
}
#themeToggle:focus{ outline:2px solid var(--accent2); outline-offset:2px; }


/* ================== THEME REDESIGN (readable palettes) ================== */
/* Base tokens (dark as default) */
:root{
  --bg:#0f1524;            /* deep navy, not pure black */
  --surface:#121a2e;       /* cards */
  --surface-2:#0b1220;     /* header/footer */
  --text:#e7ecf5;          /* main text */
  --muted:#b6c2d0;         /* secondary text */
  --muted-2:#9aa6b2;       /* tertiary */
  --border:#1e2a41;
  --pill:rgba(255,255,255,.06);
  --accent:#22d3ee;        /* button gradient left */
  --accent2:#93c5fd;       /* button gradient right */
  --link:#7dd3fc;
  --star:#f5c542;
}

/* Light theme (not pure white) */
:root[data-theme="light"]{
  --bg:#f3f6fb;
  --surface:#ffffff;
  --surface-2:#eef2f7;
  --text:#0f172a;          /* slate-900 */
  --muted:#475569;         /* slate-600: good contrast */
  --muted-2:#64748b;       /* slate-500/600 */
  --border:#e5e7eb;
  --pill:#f3f4f6;
  --accent:#06b6d4;
  --accent2:#60a5fa;
  --link:#0369a1;
  --star:#ca8a04;
}

/* Global application of tokens */
html, body{ background:var(--bg) !important; color:var(--text) !important; }
a{ color:var(--link); }
.page-head{ border-color:var(--border) !important; }
.site-header, footer.site-footer{ background:var(--surface-2) !important; }
.container{ color:var(--text); }

/* Cards & rows */
.card, .list-row, .review-row, .bonus-row{ 
  background:var(--surface) !important; 
  border:1px solid var(--border) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.card .logo-wrap, .list-logo, .rv-logo, .b-logo{ 
  background:var(--pill) !important; border:1px solid var(--border) !important; 
}

/* Text hierarchy */
.lead, .kv span, .b-offer, .rv-summary, .meta, .small, .muted, .list-row .col-desc p{
  color:var(--muted) !important;
}
h1,h2,h3,h4,h5{ color:var(--text) !important; }

/* Buttons */
.button{
  background-image: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  color:#0b1220 !important; /* readable on both themes */
  border: none !important;
}
.button:hover{ filter: brightness(1.05); }
.button:focus{ outline:2px solid var(--accent2); outline-offset:2px; }

/* Stars */
.stars__fg{ color:var(--star) !important; }
.stars__bg{ color:rgba(255,255,255,.15); }
:root[data-theme="light"] .stars__bg{ color:rgba(0,0,0,.12); }

/* Tables/dividers */
hr, .divider{ border-color:var(--border) !important; }



/* === CLEAN RESET (no anchor hacking) === */

/* Logo zone: no bg, no border, unified height, non-clickable */
.logo-wrap, .list-logo, .rv-logo, .b-logo{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 96px;
  display:flex; align-items:center; justify-content:center;
  pointer-events: none; /* disables clicks without changing HTML */
  padding: 8px 0 !important;
}
.logo-wrap img, .list-logo img, .rv-logo img, .b-logo img{
  max-height: 80px; width:auto; height:auto; max-width:100%;
  object-fit: contain;
}

/* Sticky header + subtle shadow on scroll (paired with JS toggler) */
.site-header{ position: sticky; top: 0; z-index: 60; }
body.is-scrolled .site-header{
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  border-bottom: 1px solid var(--border);
}

/* Hide LANGUAGE label */
.lang-switch [data-i18n="language"],
.lang-switch .lang-label, .lang-switch .label{ display:none !important; }



/* === THEME REDESIGN TOKENS === */
:root{
  --bg:#0f1524; --surface:#121a2e; --surface-2:#0b1220;
  --text:#e7ecf5; --muted:#b6c2d0; --muted-2:#9aa6b2;
  --border:#1e2a41; --pill:rgba(255,255,255,.06);
  --accent:#22d3ee; --accent2:#93c5fd; --link:#7dd3fc; --star:#f5c542;
}
:root[data-theme="light"]{
  --bg:#f3f6fb; --surface:#ffffff; --surface-2:#eef2f7;
  --text:#0f172a; --muted:#475569; --muted-2:#64748b;
  --border:#e5e7eb; --pill:#f3f4f6; --accent:#06b6d4; --accent2:#60a5fa;
  --link:#0369a1; --star:#ca8a04;
}
html, body{ background:var(--bg) !important; color:var(--text) !important; }
.site-header, footer.site-footer{ background:var(--surface-2) !important; }
.card, .list-row, .review-row, .bonus-row{ background:var(--surface) !important; border:1px solid var(--border) !important; box-shadow:0 6px 20px rgba(0,0,0,.18); }
a{ color:var(--link); } .muted, .meta, .rv-summary, .b-offer, .small, .list-row .col-desc p{ color:var(--muted) !important; }
.button{ background-image:linear-gradient(90deg,var(--accent),var(--accent2)) !important; color:#0b1220 !important; border:none !important; }
.stars__fg{ color:var(--star) !important; }



/* === VISUAL POLISH PACK === */
.card, .list-row, .review-row, .bonus-row{ transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.card:hover, .list-row:hover, .review-row:hover, .bonus-row:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.22); border-color: rgba(147,197,253,.35); }
.logo-wrap, .list-logo, .rv-logo, .b-logo{ min-height:96px; display:flex; align-items:center; justify-content:center; background:transparent !important; border:none !important; box-shadow:none !important; padding:8px 0 !important; pointer-events:none; }
.logo-wrap img, .list-logo img, .rv-logo img, .b-logo img{ max-height:80px; width:auto; height:auto; max-width:100%; object-fit:contain; }
.site-header{ position:sticky; top:0; z-index:60; }
body.is-scrolled .site-header{ box-shadow:0 6px 20px rgba(0,0,0,.16); border-bottom:1px solid var(--border); }
.button{ transition: transform .08s ease, filter .12s ease; } .button:active{ transform: translateY(1px); filter:brightness(.98); } .button:focus-visible{ outline:3px solid var(--accent2); outline-offset:2px; border-radius:12px; }
.card{ margin-bottom:24px; } .list-row, .review-row, .bonus-row{ margin-bottom:16px; } .page-head{ margin-bottom:16px; }
@media (max-width:640px){ h1{font-size:26px;} h2{font-size:20px;} .muted, .meta, .rv-summary, .b-offer, .list-row .col-desc p{ font-size:15px; line-height:1.55; } .card{ padding-bottom:16px; } }



/* === LIGHT HEADER/FOOTER READABILITY === */
:root[data-theme="light"] .site-header,
:root[data-theme="light"] footer.site-footer{ background:#ffffff !important; color:#0f172a !important; box-shadow:0 1px 0 rgba(15,23,42,.08) inset, 0 2px 8px rgba(15,23,42,.05); }
:root[data-theme="light"] .site-header a,
:root[data-theme="light"] .nav a,
:root[data-theme="light"] footer.site-footer a{ color:#0f172a !important; }
:root[data-theme="light"] .page-head{ border-color:#e5e7eb !important; }



/* Hide language label text node if present */
.lang-switch [data-i18n="lang_label"], .lang-switch [data-i18n="language"], .lang-switch .lang-label, .lang-switch .label{ display:none !important; }



/* === TGN THEME TOKENS v1 === */
html {
  --bg: #f4f7fb;
  --card: #ffffff;
  --border: rgba(2, 8, 23, .08);
  --text: #0b1221;
  --muted: #475569;
  --accent: #23d3e1;
  --accent-2: #22d49a;
  --shadow: 0 8px 24px rgba(2, 8, 23, .08);
  --shadow-inset: inset 0 1px 0 rgba(2, 8, 23, .03);
}
html.dark, html[data-theme="dark"] {
  --bg: #0b1221;
  --card: #0f1a2d;
  --border: #3a4f78;
  --text: #e6e8ee;
  --muted: #a8b3c7;
  --accent: #23d3e1;
  --accent-2: #22d49a;
  --shadow: 0 10px 30px rgba(2, 8, 23, .40);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);
}
body { background: var(--bg); color: var(--text); }
/* === /TGN THEME TOKENS v1 === */


/* Reviews: enforce mobile layout with an explicit class (JS toggles it) */
#reviewsRoot .review-row.is-mobile{ grid-template-columns: 1fr; gap: 12px; }
#reviewsRoot .review-row.is-mobile *{ min-width: 0; }
#reviewsRoot .review-row.is-mobile .kv{ grid-template-columns: 1fr; gap: 6px 12px; }
#reviewsRoot .review-row.is-mobile .kv li{ flex-direction: column; align-items: flex-start; gap: 2px; }
#reviewsRoot .review-row.is-mobile .rv-actions{ grid-column: 1 / -1; position: static; justify-self: stretch; }
#reviewsRoot .review-row.is-mobile .rv-logo img{ max-height: 64px; max-width: 100%; object-fit: contain; display: block; }