/* ====== ПАЛИТРА / БАЗА ====== */
:root{
  --bg: #161626;
  --bg-2: #1e2031;
  --bg-3: #2b304b;

  --txt: #e7ebff;
  --muted: #9aa2c7;

  --red: #ff274a;
  --red-shadow: #871628;
  --red-outline-shadow: #7a1430;

  --green: #2fad00;
  --green-shadow: #1f7a00;

  --radius: 16px;
  --shadow-soft: 0 4px 4px rgba(0,0,0,.3);
  --gap: 16px;

  --topbar-h: 56px;
  --bonusbar-h: 76px;
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--txt);
  font-family: "Comfortaa", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.5;
  padding-top: var(--topbar-h);
}
img{ max-width:100%; display:block; }
h1,h2{ margin: 20px 0 16px; line-height:1.2; }
h1{ font-size: clamp(22px,4.8vw,34px); }
h2{ font-size: clamp(20px,3.8vw,26px); color: #ff274a;}

.muted{ color: var(--muted); }
.container{ width:100%; max-width:1100px; margin:0 auto; padding: 0 16px; }

/* ====== КНОПКИ (объём) ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; font-weight:700; text-decoration:none; color:#fff;
  padding: 10px 14px; border-radius: 999px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border: 2px solid transparent; white-space:nowrap;
}
.btn .i{ width:18px; height:18px; fill: currentColor; }
.btn-lg{ padding: 9px 12px; font-size:13px; }

.btn-red{ background: var(--red); box-shadow: 0 3px 0 0 var(--red-shadow), var(--shadow-soft); }
.btn-red:hover{ transform: translateY(-1px); }
.btn-red:active{ transform: translateY(0); box-shadow: 0 1px 0 0 var(--red-shadow), 0 2px 2px rgba(0,0,0,.25); }

.btn-red-outline{
  background: transparent; color: var(--red); border-color: var(--red);
  box-shadow: 0 3px 0 0 var(--red-outline-shadow), var(--shadow-soft);
}
.btn-red-outline:hover{ background: var(--red); color:#fff; }

.btn-green{
  background: var(--green); color:#fff;
  box-shadow: 0 3px 0 0 var(--green-shadow), var(--shadow-soft);
  padding: 11px 18px; font-weight:800; font-size:14px;
}
.btn-green:hover{ transform: translateY(-1px); }
.btn-compact{ padding: 9px 14px; font-size:13px; }

/* ====== ТОПБАР ====== */
.topbar{
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 30;
  background:#0f1120; border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .wrap{
  max-width:1100px; margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:center; gap:8px; padding: 0 10px;
}

/* ====== ЛОГОБЛОК ====== */
.logo-block{
  margin: 18px 0;
  border-radius: 24px;
  background: radial-gradient(120% 160% at 0% 0%, #1e2031, #111324 70%);
  border: 1px solid rgba(255,255,255,.06);
  padding: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35) inset, 0 8px 16px rgba(0,0,0,.3);
}

/* ====== CHIPS (визуально отличны от рейтинга) ====== */
.chips{
  list-style:none; padding:0; margin: 12px 0 10px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #1a1c2e;
  border:1px solid #2a2e46;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 3px 8px rgba(0,0,0,.25);
  font-size:12px;
}
.chip-k{ color:#b9c3ff; font-weight:700; letter-spacing:.2px; }
.flag{ font-size:18px; line-height: 0px;}
.ok-chip .ok{
  width:18px; height:18px; display:inline-block; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #8bff7f, #2fad00);
  position: relative; box-shadow: 0 1px 0 rgba(0,0,0,.25) inset;
}
.ok-chip .ok::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 5px;
    height: 7px;
    border-right: 2px solid #0a2;
    border-bottom: 2px solid #0a2;
    transform: rotate(45deg);
    border-color: #fff;
}

/* ====== РЕЙТИНГ ====== */
.rating-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(180deg, #3a3f63, #232742);
  box-shadow: 0 3px 0 0 #5e1123, 0 4px 10px rgba(0, 0, 0, .4);
  border: 1px solid #86a2ff;
  padding: 10px 12px; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25) inset;
  margin: 6px 0 8px;
}
.star{ color:#ffd16b; margin: 0 3px; }
.reviews-link-in{ color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size:13px; }

/* ====== МЕТА ====== */
.meta{ margin: 10px 0 12px; font-size: 13px; color: var(--muted); }
.date-accent{ color: var(--green); }

/* ====== ОТВЕТСТВЕННАЯ ИГРА ====== */
.notice{
  display:flex; gap:14px; align-items:center;
  background: #1b1f33; border:1px solid var(--bg-3); border-radius: 14px;
  padding: 14px; margin: 14px 0 9px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25) inset;
}
.notice-icon svg{ width:26px; height:26px; fill:#86a2ff; }
.notice .muted{ margin:4px 0 0; font-size: 13px;}

/* ====== СЕТКА 2 КОЛОНКИ ====== */
.grid-two{ display:grid; grid-template-columns:1fr; gap: var(--gap); }
@media (min-width: 992px){
  .grid-two{ grid-template-columns: 1fr 0.9fr; align-items:start; }
}
.facts-card{
  background: var(--bg-2); border:1px solid var(--bg-3);
  border-radius: 16px; overflow:hidden; box-shadow: 0 10px 24px rgba(0,0,0,.25) inset;
}
.facts{ width:100%; border-collapse:collapse; }
.facts th, .facts td{ padding: 14px; border-bottom:1px solid rgba(255,255,255,.06); }
.facts th{ text-align:left; color:#b9c3ff; width:52%; }
.facts tr:last-child th, .facts tr:last-child td{ border-bottom:none; }

/* ====== ТАБЫ (radio вне .tablist; рабочие селекторы) ====== */
.tabs{ margin: 26px 0 10px; }
.tabs input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }

.tabs .tablist{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px;
}
.tabs .tablist label{
  user-select:none; cursor:pointer; padding:10px 14px; border-radius:999px;
  background: linear-gradient(180deg, #2a2e49, #1a1d30);
  border:1px solid #2d3250; color:#e7ebff;
  box-shadow: 0 3px 0 0 #121427, 0 4px 8px rgba(0,0,0,.35);
  font-weight:700; font-size:14px;
}

/* активное состояние кнопки-таба */
#tab-pay:checked ~ .tablist label[for="tab-pay"],
#tab-providers:checked ~ .tablist label[for="tab-providers"],
#tab-support:checked ~ .tablist label[for="tab-support"]{
  border-color: var(--red);
  background: linear-gradient(180deg, #3a3f63, #232742);
  box-shadow: 0 3px 0 0 #5e1123, 0 4px 10px rgba(0,0,0,.4);
}

/* panels по умолчанию скрыты */
.tabs .panels > [role="tabpanel"]{ display:none; }

/* показать нужную панель */
#tab-pay:checked ~ .panels #panel-pay{ display:block; }
#tab-providers:checked ~ .panels #panel-providers{ display:block; }
#tab-support:checked ~ .panels #panel-support{ display:block; }

/* логосетки */
.logo-grid{ list-style:none; padding:0; margin:0; display:grid; gap:10px; grid-template-columns: repeat(3, 1fr); }
.logo-grid li{
  background: #1b1d33; border:1px solid var(--bg-3); border-radius: 12px;
  display:flex; align-items:center; justify-content:center; height:64px;
  box-shadow: 0 6px 12px rgba(0,0,0,.2) inset;
}
.logo-grid img{ max-height:32px; width:auto; object-fit:contain; }
@media (min-width:768px){ .logo-grid{ grid-template-columns: repeat(6, 1fr); } }
.logo-grid.providers img{ max-height:26px; }

/* поддержка */
.support-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.support-list li{
  background:#1b1d33; border:1px solid var(--bg-3); border-radius:12px;
  padding:12px; display:flex; align-items:center; gap:10px;
}

/* ====== ПЛЮСЫ/МИНУСЫ ====== */
.proscons{ margin: 28px 0 8px; }
.pc-grid{ display:grid; gap:14px; }
@media (min-width:992px){ .pc-grid{ grid-template-columns: 1fr 1fr; } }

.pros, .cons{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.pros li, .cons li{
  border-radius:14px; padding:14px;
  background: linear-gradient(145deg, rgba(43,48,75,.35), rgba(30,32,49,.35));
  border:1px solid var(--bg-3);
  box-shadow: 0 10px 20px rgba(0,0,0,.25) inset;
}
.pros li{ outline: 1px solid rgba(47,173,0,.25); }
.cons li{ outline: 1px solid rgba(255,39,74,.25); align-items: center;
    display: flex;}
.pm{ font-weight:800; margin-right:6px; color:#89ff8f; }
.cons .pm{ color:#ff8a9b; }

/* ====== БОНУС-БАР (непрозрачный, компенсация отступом) ====== */
.bonusbar{
  position: fixed; left:0; right:0; bottom:-2px; z-index:40;
  background:#0f1120;
  border-top: 1px solid rgba(255,255,255,.06);
  height: var(--bonusbar-h);
}
.bonusbar .b-wrap{
  height:100%; max-width:1100px; margin:0 auto; padding: 10px 14px;
  display:flex; align-items:center; gap:12px;
}
.b-gift svg{ width:28px; height:28px; fill:#ffd16b; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.b-text{ display:flex; flex-direction:column; gap:2px; font-size:14px; }
.b-text .muted{ font-size:12px; }
.bonusbar .btn-green{ margin-left:auto; }

@media (max-width:768px){
  body{ padding-bottom: calc(var(--bonusbar-h) + env(safe-area-inset-bottom)); }
}
@media (min-width:769px){
  .bonusbar{ position: static; height:auto; border-top:none; margin: 20px 0; border:1px solid var(--bg-3); border-radius:16px; }
  .bonusbar .b-wrap{ padding:14px 16px; }
}

/* ====== ФУТЕР ====== */
.site-footer{
  margin-top: 30px; padding: 26px 0 90px;
  background: #0f1020; border-top:1px solid rgba(255,255,255,.06);
}
.footer-inner{ text-align:center; }
.footer-logo{ margin: 0 auto 8px; opacity:.9; }
.footer-title{ margin: 2px 0 8px; font-weight:700; }
.disclaimer{ font-size:12px; line-height:1.4; }


.cd-grid {
    display: grid;
    grid-template-columns: 1.5fr .95fr;
    gap: 28px;
}

/* ====== BONUS CARD (десктопная карточка) ====== */
.bonus-card{
  position: relative;
  z-index: 0;                 /* для слоёв псевдоэлементов/тултипа */
  border: 1px solid var(--bg-3);
  border-radius: 16px;
  overflow: visible;          /* нужно для тултипа */
  padding: 16px;
  margin: 16px 0 18px;
  /* чистый фон без красного засвета, в нашей гамме */
  background:
    radial-gradient(220px 160px at 0% 100%, rgba(47,173,0,.10), transparent 60%),
    linear-gradient(180deg, #1b1f33, #14182a);
  box-shadow: inset 0 10px 24px rgba(0,0,0,.25);
}

/* еле заметный водяной знак внутри карточки и ТОЛЬКО внутри неё */
.bonus-card::after{
  content:"";
  position:absolute; right:16px; bottom:8px; width:140px; height:140px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-opacity=".18" stroke-width="2" d="M3 9h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9zM3 7h18v2H3zM11 7h2v15h-2zM9 7c-1.9 0-3.5-1.6-3.5-3.5 0-.8.7-1.5 1.5-1.5 1.9 0 3.5 1.6 3.5 3.5V7M15 7c1.9 0 3.5-1.6 3.5-3.5 0-.8-.7-1.5-1.5-1.5-1.9 0-3.5 1.6-3.5 3.5V7"/></svg>');
  background-repeat:no-repeat; background-size:contain;
  opacity:.08; pointer-events:none;
  clip-path: inset(0 round 16px);   /* не вылезает за скругления */
}

.bonus-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.bonus-kicker{ color:#b9c3ff; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }

.bonus-amount{ font-weight:800; font-size: clamp(18px, 2.1vw, 22px); margin: 6px 0 12px; }

.bonus-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bonus-btn{ display:inline-flex; align-items:center; gap:10px; }
.bonus-btn .i-gift{ width:18px; height:18px; flex:0 0 18px; }

/* Условия + тултип (широкий/читаемый) */
.terms-hint{
  position:relative; color: var(--muted); font-size:12px; cursor: help; user-select:none;
  text-decoration: underline dotted rgba(255,255,255,.25); text-underline-offset: 3px;
  outline: none; white-space: nowrap;
}
.terms-hint:hover::after,
.terms-hint:focus-visible::after{
  content: attr(data-tooltip);
  position:absolute;
  right:0;
  bottom: calc(100% + 12px);
  max-width: min(92vw, 460px);
  min-width: 280px;
  padding: 12px 14px;
  background:#0f1120;
  color: var(--txt);
  border:1px solid var(--bg-3);
  border-radius:12px;
  line-height:1.45;
  white-space: normal;
  box-shadow: 0 16px 32px rgba(0,0,0,.6);
  z-index: 9999;
}
.terms-hint:hover::before,
.terms-hint:focus-visible::before{
  content:"";
  position:absolute;
  right:12px;
  bottom: calc(100% + 5px);
  border:7px solid transparent;
  border-top-color:#0f1120;
  z-index: 10000;
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,.06));
}

/* Видимость элементов:
   - на ШИРИНЕ > 500px показываем карточку, прячем нижний фикс-бар
   - на ≤ 500px наоборот */
@media (max-width:768px){
  .bonus-card{ display:none; }

  .cd-grid {
        grid-template-columns: none;
}
}

/* по умолчанию фикс-бар скрыт (и ботами не читается) */
.bonusbar{ display:none; }

/* только на мобильных ≤ 500px показываем прилипший бар */
@media (max-width:768px){
  .bonusbar{
    display:block;
    position: fixed; left:0; right:0; bottom:-2px; z-index:40;
    background:#0f1120;
    border-top: 1px solid rgba(255,255,255,.06);
    height: var(--bonusbar-h);
  }
  .bonusbar .b-wrap{ height:100%; max-width:1100px; margin:0 auto; padding: 10px 14px; display:flex; align-items:center; gap:12px; }
  body{ padding-bottom: calc(var(--bonusbar-h) + env(safe-area-inset-bottom)); }
}

section.text img {
    width: 600px;
    margin: 18px auto;
    border: 2px dashed #86a2ff;
    border-radius: 20px;
}

section.text img.vertical {
    width: 400px;
}

@media (max-width:768px){
  section.text img {
      width: 340px;
      height: ;
  }

  section.text img.vertical {
      width: 250px;
  }
}

@media (max-width:429px){
  .btn-lg {
        padding: 8px 9px;
        font-size: 11.5px;
    }
    .btn-compact {
        padding: 8px 9px;
        font-size: 11.5px;
    }
    .topbar .wrap {
        gap: 6px;
    }
    .btn {
        gap: 5px;
    }
    
    .b-text {
        font-size: 12px;
    }
    .b-text .muted {
        font-size: 10px;
    }
}