/* =============================================================
   css/rating.css — zahranicne-casino.com
   Расширенная карточка site-brand-bonus. Префикс zn-.

   Файл НЕ входит ни в одну сборку (opt.css, style.css, инлайновый
   <style> темы) и подключается с ?v=filemtime — правки видны сразу.

   Геометрия этого сайта: тёмно-зелёная шапка карточки во всю ширину
   (место, логотип, бренд, рейтинг), светлое тело с оффером и кнопкой,
   полоса характеристик с разделителями и кремовый подвал.
   Палитра взята у темы: зелёный #1D3E23, золото #C9A227 / #8b6b2f,
   кремовый #fbfaf5, чернила #17233a.

   ВАЖНО о специфичности. Тема объявляет .article-content p / li / h3
   со специфичностью (0,1,1), поэтому сброс приходится вешать через
   body. Но широкий сброс вида `body .zn-card div{padding:0}` имеет
   (0,1,2) и перебивает собственные отступы блока — карточка теряет
   внутренние поля. Поэтому: сброс через :where() и БЕЗ margin/padding,
   отступы гасятся точечно только там, где приезжает HTML из Strapi,
   а все структурные правила пишутся как `body .zn-card .zn-*` (0,1,2).
   ============================================================= */

.zn-list{
  display:grid;
  gap:16px;
  margin:6px 0 28px;
}

/* ---------- сброс типографики темы ---------- */
body .zn-card :where(p, ul, ol, li, dl, dt, dd, div, span, code, h3, h4, a, strong, b, i, em){
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  letter-spacing:normal;
  font-family:inherit;
}
body .zn-card :where(ul, ol){list-style:none}
body .zn-card :where(img){max-width:100%;height:auto}

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

body .zn-card .zn-name,
body .zn-card .zn-strip,
body .zn-card .zn-pay,
body .zn-card .zn-cell,
body .zn-card .zn-pay li{margin:0}
body .zn-card .zn-strip,
body .zn-card .zn-pay{padding:0}

.zn-card{
  background:#fff;
  border:1px solid #e8e8df;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  font-size:15px;
  line-height:1.45;
  color:#17233a;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.zn-card:hover{box-shadow:0 14px 32px rgba(0,0,0,.09);border-color:#ded8c6}

/* ---------- тёмная шапка ---------- */

body .zn-card .zn-head{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:12px 14px;
  background:linear-gradient(90deg,#1D3E23 0%,#16301b 100%);
}

body .zn-card .zn-rank{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 9px;
  border-radius:8px;
  background:rgba(255,255,255,.14);
}
body .zn-card .zn-rank__n{
  font-size:13px;
  font-weight:900;
  line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
body .zn-card .zn-rank__t{
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
}

/* первая тройка — золото, серебро, бронза на зелёном */
.zn-list > .zn-card:nth-child(1) .zn-rank{background:#E3B94A}
.zn-list > .zn-card:nth-child(2) .zn-rank{background:#CFCFC6}
.zn-list > .zn-card:nth-child(3) .zn-rank{background:#C08A55}
.zn-list > .zn-card:nth-child(1) .zn-rank__n,
.zn-list > .zn-card:nth-child(2) .zn-rank__n,
.zn-list > .zn-card:nth-child(3) .zn-rank__n{color:#1D3E23}
.zn-list > .zn-card:nth-child(1) .zn-rank__t,
.zn-list > .zn-card:nth-child(2) .zn-rank__t,
.zn-list > .zn-card:nth-child(3) .zn-rank__t{color:rgba(29,62,35,.72)}

body .zn-card .zn-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:104px;
  height:46px;
  padding:5px;
  background:#fff;
  border-radius:10px;
  text-decoration:none;
}
body .zn-card .zn-logo img{
  max-width:100%;
  max-height:34px;
  width:auto;
  height:auto;
  object-fit:contain;
}
body .zn-card .zn-logo__txt{
  font-size:12px;
  font-weight:800;
  color:#1D3E23;
  text-align:center;
}

body .zn-card .zn-id{min-width:0;flex:1 1 auto}
/* имя бренда на мобильной — главный якорь шапки, поэтому крупное */
body .zn-card .zn-name{
  font-size:20px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.015em;
  color:#fff;
  /* break-word, а не anywhere: anywhere влияет на min-content и сжимает
     колонку имени сильнее, чем нужно, из-за чего название рвётся посреди слова */
  overflow-wrap:break-word;
}
body .zn-card .zn-name a{
  color:#fff !important;
  font-weight:inherit;
  text-decoration:none;
}
body .zn-card .zn-name a:hover{text-decoration:underline}

body .zn-card .zn-rate{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:3px 8px;
  margin-top:4px;
}
body .zn-card .zn-rate__stars{position:relative;display:inline-block;line-height:0;white-space:nowrap}
body .zn-card .zn-rate__bg{display:inline-block;color:rgba(255,255,255,.28);line-height:0}
body .zn-card .zn-rate__fg{
  position:absolute;left:0;top:0;
  overflow:hidden;
  color:#E3B94A;
  line-height:0;
  white-space:nowrap;
}
.zn-star{display:inline-block;vertical-align:top}
body .zn-card .zn-rate__val{font-size:13.5px;font-weight:800;color:#fff}
body .zn-card .zn-rate__cnt{font-size:12px;color:rgba(255,255,255,.66)}

/* ---------- тело: оффер и кнопка ---------- */

body .zn-card .zn-body{
  display:grid;
  gap:12px;
  min-width:0;
  padding:14px 16px;
}

body .zn-card .zn-offer{display:grid;gap:3px;min-width:0}
body .zn-card .zn-eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8b6b2f;
}
body .zn-card .zn-offer__main,
body .zn-card .zn-offer__main *{
  font-size:17px;
  line-height:1.34;
  font-weight:800;
  color:#17233a;
}
body .zn-card .zn-offer__special,
body .zn-card .zn-offer__special *{
  font-size:13.5px;
  line-height:1.45;
  font-weight:700;
  color:#1D3E23;
}
body .zn-card .zn-feat,
body .zn-card .zn-feat *{
  font-size:13px;
  line-height:1.5;
  color:#5c6472;
}

body .zn-card .zn-act{display:grid;gap:8px;min-width:0}

body .zn-card .zn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 20px;
  border-radius:12px;
  background:#1D3E23;
  border-bottom:3px solid #C9A227;
  color:#fff !important;
  font-size:14px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  box-shadow:0 7px 16px rgba(29,62,35,.24);
  transition:background-color .18s ease,transform .12s ease,box-shadow .18s ease;
}
body .zn-card .zn-cta:hover,
body .zn-card .zn-cta:focus-visible{
  background:#0a3621;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(29,62,35,.32);
}

body .zn-card .zn-promo{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 10px;
  background:#fbfaf5;
  border:1px dashed #d9c79a;
  border-radius:10px;
}
body .zn-card .zn-promo__l{font-size:11px;color:#8b6b2f}
body .zn-card .zn-promo__c{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  font-weight:800;
  letter-spacing:.07em;
  color:#1D3E23;
}

/* ---------- полоса характеристик ----------
   Разделители сделаны зазором flex-сетки поверх подложки: при любом
   числе ячеек и при переносе строк не остаётся висящих рамок. */

body .zn-card .zn-strip{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:#eae6da;
  border-top:1px solid #eae6da;
  border-bottom:1px solid #eae6da;
}
body .zn-card .zn-cell{
  flex:1 1 46%;
  display:grid;
  gap:2px;
  min-width:0;
  padding:9px 14px 10px;
  background:#fbfaf5;
}
body .zn-card .zn-cell__top{display:flex;align-items:center;gap:7px;min-width:0}
body .zn-card .zn-cell .zn-i{width:18px;height:18px;color:#8b6b2f;flex:0 0 auto}
body .zn-card .zn-cell__l{
  font-size:10.5px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8b6b2f;
  overflow-wrap:anywhere;
}
body .zn-card .zn-cell__v{
  font-family:"Jost",system-ui,sans-serif;
  font-size:15.5px;
  line-height:1.25;
  font-weight:700;
  color:#17233a;
  overflow-wrap:anywhere;
}

/* ---------- подвал ---------- */

body .zn-card .zn-foot{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 18px;
  padding:10px 16px;
  background:#fff;
}
body .zn-card .zn-payrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0}
body .zn-card .zn-payrow__l{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#a8a294;
}
body .zn-card .zn-pay{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0}
body .zn-card .zn-pay li{display:inline-flex;align-items:center;gap:5px}
body .zn-card .zn-pay li span{font-size:12px;line-height:1.3;color:#5c6472}
body .zn-card .zn-pay .zn-i{width:15px;height:15px;color:#a8a294;flex:0 0 auto}

body .zn-card .zn-foot__right{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}
body .zn-card .zn-review{
  font-size:12.5px;
  font-weight:700;
  color:#1D3E23 !important;
  text-decoration:underline;
}
body .zn-card .zn-rg{display:flex;align-items:center;gap:7px;min-width:0}
body .zn-card .zn-18{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:19px;
  border-radius:999px;
  background:#f3ece0;
  color:#8b6b2f;
  font-size:10.5px;
  font-weight:800;
}
body .zn-card .zn-rg,
body .zn-card .zn-rg p,
body .zn-card .zn-rg span{font-size:11px;line-height:1.35;color:#a09a8c}

body .zn-card .zn-extra,
body .zn-card .zn-extra *{font-size:12.5px;line-height:1.5;color:#5c6472;flex:1 1 100%}

/* ---------- мобильная: ужимаем карточку, чтобы первая помещалась
   в экран 375x812 целиком, а вторая начиналась в пределах экрана ---------- */

@media (max-width:767.98px){
  .zn-list{gap:14px}

  /* Фон страницы здесь чисто белый, и белая карточка с почти невидимой
     рамкой и 5%-й тенью на нём не читалась как отдельный объект.
     Поднимаем контраст края: тёплая рамка темы, заметная тень и
     кремовый подвал, который закрывает карточку снизу. */
  .zn-card{
    border:1px solid #ddd5c0;
    box-shadow:0 10px 24px rgba(23,35,58,.13), 0 2px 5px rgba(23,35,58,.07);
  }
  /* Инвертируем заливки: карточка целиком становится тёплой панелью,
     а ячейки характеристик — белыми. На белой странице карточка
     читается как отдельный объект, внутренняя иерархия сохраняется. */
  body .zn-card .zn-body{background:#fbf9f3}
  body .zn-card .zn-strip{
    background:#e7e1d0;
    border-top-color:#e7e1d0;
    border-bottom-color:#e7e1d0;
  }
  body .zn-card .zn-cell{background:#fff}
  body .zn-card .zn-foot{
    background:#fbf9f3;
    border-top:1px solid #e7e1d0;
  }
  body .zn-card .zn-promo{background:#fff}

  body .zn-card .zn-head{padding:10px 12px;gap:10px}
  body .zn-card .zn-logo{width:96px;height:42px}
  body .zn-card .zn-logo img{max-height:30px}
  body .zn-card .zn-body{padding:12px 14px;gap:10px}
  body .zn-card .zn-cta{min-height:46px;padding:12px 16px}
  body .zn-card .zn-cell{padding:8px 12px 9px}
  body .zn-card .zn-foot{padding:8px 14px;gap:4px 12px}
}

/* ---------- планшет и десктоп ---------- */

@media (min-width:768px){
  body .zn-card .zn-head{padding:13px 18px;gap:14px}
  body .zn-card .zn-logo{width:124px;height:50px}
  body .zn-card .zn-logo img{max-height:38px}
  body .zn-card .zn-name{font-size:21px}

  body .zn-card .zn-body{
    grid-template-columns:minmax(0,1fr) 216px;
    align-items:center;
    gap:18px;
    padding:16px 20px;
  }
  body .zn-card .zn-offer__main,
  body .zn-card .zn-offer__main *{font-size:19px;line-height:1.3}

  body .zn-card .zn-cell{flex:1 1 146px;padding:10px 18px 11px}
  body .zn-card .zn-cell__v{font-size:16.5px}

  body .zn-card .zn-foot{padding:11px 20px}
}

@media (min-width:1200px){
  body .zn-card .zn-body{grid-template-columns:minmax(0,1fr) 236px;padding:18px 24px}
  body .zn-card .zn-head{padding:14px 22px}
  body .zn-card .zn-foot{padding:12px 24px}
}

@media (prefers-reduced-motion:reduce){
  .zn-card,
  body .zn-card .zn-cta{transition:none}
  body .zn-card .zn-cta:hover{transform:none}
}