/* =============================================================
   css/rating.css — zahranicnionlinecasino.com
   Расширенная карточка site-brand-bonus, компоновка «табло».

   Вне любой сборки, подключается отдельным <link> с ?v=filemtime.

   Палитра взята у самого сайта (pi-index.css): тёмно-синий #001632,
   лайм #b6e000 / #a9d400, приглушённый #5b6378, линии #e6e9f0,
   светлая подложка #f7f9fc. Гарнитуры темы — Jost и Barlow.

   Правила темы объявлены с большей специфичностью, поэтому все
   структурные селекторы пишем через body, а сброс типографики
   делаем через :where() и БЕЗ margin/padding — иначе он снимает
   собственные отступы блока.
   ============================================================= */

.zic-list{
  --zicNavy:#001632;
  --zicNavy2:#04204a;
  --zicLime:#b6e000;
  --zicLimeDeep:#7a9600;
  --zicLimeSoft:#a9d400;
  --zicMuted:#8a8fa0;
  --zicText:#3a4252;
  --zicLine:#e6e9f0;
  --zicHair:#ececf1;
  --zicSoft:#f7f9fc;

  display:grid;
  gap:16px;
  margin:6px 0 30px;
  text-align:left;
}

/* ---------- сброс типографики темы ---------- */

body .zic-card :where(p, ul, ol, li, dl, dt, dd, div, span, code, h2, h3, h4, a, strong, b, i, em, small){
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  letter-spacing:normal;
  font-family:inherit;
  text-transform:none;
  text-align:inherit;
}
body .zic-card :where(ul, ol){list-style:none}
body .zic-card :where(img){max-width:100%;height:auto}
body .zic-card :where(a){text-decoration:none}

/* отступы гасим только у контента, приехавшего из Strapi */
body .zic-card .zic-offer__main :where(p, div, span, ul, ol, li),
body .zic-card .zic-offer__special :where(p, div, span, ul, ol, li),
body .zic-card .zic-feat :where(p, div, span, ul, ol, li),
body .zic-card .zic-rg__txt :where(p, div, span){
  margin:0;
  padding:0;
}
body .zic-card .zic-stats,
body .zic-card .zic-pay__list,
body .zic-card .zic-stat,
body .zic-card .zic-pay__list li,
body .zic-card .zic-name{margin:0}
body .zic-card .zic-stats,
body .zic-card .zic-pay__list{padding:0}

/* ---------- каркас ---------- */

.zic-card{
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 228px;
  grid-template-areas:
    "score head  cta"
    "score stats cta"
    "pay   pay   pay";
  background:#fff;
  border:1px solid var(--zicLine);
  border-radius:18px;
  overflow:hidden;
  color:var(--zicText);
  font-size:16px;
  line-height:1.5;
  box-shadow:0 14px 44px -28px rgba(0,22,50,.55);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.zic-card:hover{
  border-color:rgba(169,212,0,.55);
  box-shadow:0 20px 50px -26px rgba(0,22,50,.6);
}

/* ---------- колонка со счётом ---------- */

body .zic-card .zic-score{
  grid-area:score;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:20px 10px;
  background:linear-gradient(180deg,var(--zicSoft),#eef2f8);
  border-right:1px solid var(--zicLine);
  text-align:center;
}
body .zic-card .zic-rank{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
}
body .zic-card .zic-rank b{
  font-family:"Jost",sans-serif;
  font-size:22px;
  font-weight:600;
  line-height:1;
  color:var(--zicNavy);
}
body .zic-card .zic-rank i{
  font-style:normal;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--zicMuted);
}
body .zic-card .zic-ringwrap{display:inline-flex;line-height:0}
body .zic-card .zic-ring{width:60px;height:60px}
body .zic-card .zic-ring__bg{stroke:#dfe5ee}
body .zic-card .zic-ring__fg{stroke:var(--zicLimeSoft)}
body .zic-card .zic-ring__txt{
  fill:var(--zicNavy);
  font-family:"Jost",sans-serif;
  font-size:18px;
  font-weight:600;
}
body .zic-card .zic-score__count{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  line-height:1.3;
  color:var(--zicMuted);
}
body .zic-card .zic-score__count svg{color:var(--zicLimeSoft);flex:none}

/* ---------- бренд и оффер ---------- */

body .zic-card .zic-head{
  grid-area:head;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  padding:18px 22px 2px;
  min-width:0;
}
body .zic-card .zic-logo{
  flex:none;
  display:inline-flex;
  align-items:center;
}
body .zic-card .zic-logo img{
  width:auto;
  max-width:150px;
  max-height:38px;
  object-fit:contain;
}
body .zic-card .zic-name{
  flex:1 1 auto;
  min-width:0;
  font-family:"Jost",sans-serif;
  font-size:21px;
  font-weight:600;
  line-height:1.2;
  color:var(--zicNavy);
  overflow-wrap:break-word;
}
body .zic-card .zic-offer{
  flex:1 1 100%;
  display:block;
  min-width:0;
}
body .zic-card .zic-offer__label{
  display:block;
  margin-bottom:3px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--zicLimeDeep);
}
body .zic-card .zic-offer__main{
  display:block;
  font-family:"Jost",sans-serif;
  font-size:18px;
  line-height:1.35;
  font-weight:600;
  color:var(--zicNavy);
  overflow-wrap:break-word;
}
body .zic-card .zic-offer__special{
  display:block;
  margin-top:5px;
  font-size:14px;
  line-height:1.5;
  color:var(--zicText);
}

/* ---------- характеристики: колонки с волосяными разделителями ---------- */

body .zic-card .zic-stats{
  grid-area:stats;
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:10px 22px 16px;
}
body .zic-card .zic-stat{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:2px 14px;
  border-left:1px solid var(--zicHair);
}
body .zic-card .zic-stat:first-child{border-left:0;padding-left:0}
body .zic-card .zic-stat__ic{
  display:block;
  height:22px;
  color:#9aa00a;
}
body .zic-card .zic-stat__val{
  position:relative;
  display:inline-block;
  width:-moz-max-content;
  width:max-content;
  max-width:100%;
  padding-bottom:5px;
  font-family:"Jost",sans-serif;
  font-size:17px;
  font-weight:600;
  line-height:1.2;
  color:var(--zicNavy);
  overflow-wrap:break-word;
}
body .zic-card .zic-stat__val::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  /* акцент не должен торчать за короткое значение вроде «8» —
     иначе псевдоэлемент даёт переполнение ячейки */
  width:100%;
  max-width:22px;
  height:2px;
  border-radius:2px;
  background:var(--zicLimeSoft);
  transition:max-width .35s cubic-bezier(.16,1,.3,1);
}
body .zic-card .zic-stat:hover .zic-stat__val::after{max-width:100%}
body .zic-card .zic-stat__lab{
  font-size:12.5px;
  line-height:1.35;
  color:var(--zicMuted);
}

/* ---------- колонка действия ---------- */

body .zic-card .zic-cta{
  grid-area:cta;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:20px 22px;
  border-left:1px solid var(--zicLine);
  min-width:0;
}
body .zic-card .zic-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:10px;
  background:var(--zicLime);
  color:var(--zicNavy);
  font-family:"Jost",sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.03em;
  text-align:center;
  box-shadow:0 12px 24px -14px rgba(122,150,0,.95);
}
body .zic-card .zic-btn:hover{background:var(--zicLimeSoft)}
body .zic-card .zic-promo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 10px;
  border:1px dashed #cdd4e0;
  border-radius:8px;
}
body .zic-card .zic-promo i{
  font-style:normal;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--zicMuted);
}
body .zic-card .zic-promo code{
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--zicNavy);
}
body .zic-card .zic-review{
  text-align:center;
  font-size:13px;
  color:var(--zicText);
  text-decoration:underline;
}
body .zic-card .zic-review:hover{color:var(--zicNavy)}
body .zic-card .zic-feat{
  display:block;
  font-size:13px;
  line-height:1.45;
  color:var(--zicMuted);
  text-align:center;
}

/* ---------- полоса платежей ---------- */

body .zic-card .zic-pay{
  grid-area:pay;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  padding:11px 22px;
  background:var(--zicSoft);
  border-top:1px solid var(--zicLine);
  min-width:0;
}
body .zic-card .zic-pay__label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--zicMuted);
}
body .zic-card .zic-pay__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  list-style:none;
}
body .zic-card .zic-pay__list li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--zicText);
}
body .zic-card .zic-pay__list svg{width:16px;height:16px;flex:none;color:var(--zicLimeDeep)}

/* Строка 18+ должна уметь переноситься на свою строку целиком:
   при нехватке места карточка режет её по overflow:hidden. */
body .zic-card .zic-rg{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-left:auto;
  flex:1 1 300px;
  justify-content:flex-end;
  font-size:12px;
  line-height:1.4;
  color:var(--zicMuted);
  min-width:0;
}
body .zic-card .zic-rg b{
  flex:none;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(169,212,0,.6);
  background:rgba(169,212,0,.22);
  font-size:10.5px;
  font-weight:700;
  color:var(--zicNavy);
}
body .zic-card .zic-rg__txt{min-width:0;overflow-wrap:break-word}

/* ---------- планшет: действие уезжает под характеристики ---------- */

@media (max-width:1099.98px) and (min-width:768px){
  .zic-card{
    grid-template-columns:124px minmax(0,1fr);
    grid-template-areas:
      "score head"
      "score stats"
      "score cta"
      "pay   pay";
  }
  body .zic-card .zic-cta{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:12px 16px;
    padding:0 22px 16px;
    border-left:0;
  }
  body .zic-card .zic-btn{min-width:210px}
  body .zic-card .zic-feat,
  body .zic-card .zic-review{text-align:left}
}

/* ---------- мобильная ---------- */

@media (max-width:767.98px){
  .zic-list{gap:13px}

  .zic-card{
    grid-template-columns:92px minmax(0,1fr);
    grid-template-areas:
      "score head"
      "stats stats"
      "cta   cta"
      "pay   pay";
    border-radius:16px;
  }

  body .zic-card .zic-score{
    padding:13px 6px;
    gap:6px;
  }
  body .zic-card .zic-rank b{font-size:18px}
  body .zic-card .zic-rank i{font-size:9px;letter-spacing:.1em}
  body .zic-card .zic-ring{width:50px;height:50px}
  body .zic-card .zic-score__count{font-size:10px;gap:4px}

  body .zic-card .zic-head{
    align-content:center;
    gap:6px 10px;
    padding:13px 14px 6px;
  }
  body .zic-card .zic-logo img{max-width:98px;max-height:28px}
  body .zic-card .zic-name{font-size:21px;flex:1 1 auto}
  body .zic-card .zic-offer__label{font-size:10px;margin-bottom:2px}
  body .zic-card .zic-offer__main{font-size:16px;line-height:1.3}
  body .zic-card .zic-offer__special{margin-top:4px;font-size:13px}

  body .zic-card .zic-stats{padding:8px 14px 10px}
  body .zic-card .zic-stat{padding:2px 9px;gap:2px}
  body .zic-card .zic-stat__ic{height:19px}
  body .zic-card .zic-stat__ic svg{width:19px;height:19px}
  body .zic-card .zic-stat__val{font-size:14.5px;padding-bottom:4px}
  body .zic-card .zic-stat__val::after{max-width:16px}
  body .zic-card .zic-stat__lab{font-size:11px;line-height:1.3}

  body .zic-card .zic-cta{
    padding:0 14px 12px;
    border-left:0;
    gap:8px;
  }
  body .zic-card .zic-btn{min-height:44px;font-size:14.5px}
  body .zic-card .zic-feat{font-size:12px}

  body .zic-card .zic-pay{padding:9px 14px;gap:6px 12px}
  body .zic-card .zic-pay__label{display:none}
  body .zic-card .zic-pay__list{gap:5px 12px}
  body .zic-card .zic-pay__list li{font-size:11.5px;gap:5px}
  body .zic-card .zic-pay__list svg{width:14px;height:14px}
  body .zic-card .zic-rg{
    flex:1 1 100%;
    margin-left:0;
    align-items:flex-start;
    font-size:11px;
  }
}

/* Совсем узкие экраны: порог 330px, чтобы правило не накрыло 360 и 375 */
@media (max-width:329.98px){
  .zic-card{grid-template-columns:78px minmax(0,1fr)}
  body .zic-card .zic-stat{padding:2px 6px}
  body .zic-card .zic-name{font-size:19px}
}