/* =============================================================
   css/rating.css — zahranicnekasina.com
   Расширенная карточка site-brand-bonus. Префикс zk- (у сайта уже
   свой префикс zk_ в includes/brand-img.php — держим один).

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

   Геометрия этого сайта: узкая колонка места с круглой фишкой слева,
   справа шапка (логотип | бренд | кнопка), кремовая плашка оффера
   с коралловой кромкой и характеристики отдельными чипами-пилюлями.
   Палитра темы: коралл #F74B3D, тёмно-синий #002745, крем #fff0d9,
   светло-голубой #C4E0F9 (фон героя, на нём и лежат карточки).

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

.zk-list{
  display:grid;
  gap:14px;
  margin:18px 0 6px;
}

/* ---------- сброс типографики темы ---------- */
body .zk-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 .zk-card :where(ul, ol){list-style:none}
body .zk-card :where(img){max-width:100%;height:auto}

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

.zk-card{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  grid-template-areas:
    "rank main"
    "foot foot";
  background:#fff;
  border:1px solid #cfdcec;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,39,69,.10);
  font-size:15px;
  line-height:1.45;
  color:#002745;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.zk-card:hover{box-shadow:0 14px 30px rgba(0,39,69,.16);border-color:#aec6e0}

/* ---------- колонка места ---------- */

body .zk-card .zk-rank{
  grid-area:rank;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:13px 4px;
  background:#eef5fd;
  border-right:1px solid #e0eaf6;
}
body .zk-card .zk-rank__coin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#dbe6f3;
  color:#002745;
  font-size:14px;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
body .zk-card .zk-rank__t{
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8aa0b5;
}

/* первая тройка — фирменный коралл и два оттенка синего */
.zk-list > .zk-card:nth-child(1) .zk-rank__coin{background:#F74B3D;color:#fff}
.zk-list > .zk-card:nth-child(2) .zk-rank__coin{background:#002745;color:#fff}
.zk-list > .zk-card:nth-child(3) .zk-rank__coin{background:#4a7a9b;color:#fff}

/* ---------- основная часть ---------- */

body .zk-card .zk-main{
  grid-area:main;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "top"
    "offer"
    "chips"
    "cta"
    "feat";
  gap:11px;
  min-width:0;
  padding:13px 14px 14px;
}

body .zk-card .zk-top{
  grid-area:top;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:9px 12px;
}
body .zk-card .zk-offer{grid-area:offer}
body .zk-card .zk-chips{grid-area:chips}
body .zk-card .zk-cta{grid-area:cta}
body .zk-card .zk-feat{grid-area:feat}

body .zk-card .zk-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:44px;
  padding:4px;
  background:#fff;
  border:1px solid #e3eaf4;
  border-radius:10px;
  text-decoration:none;
}
body .zk-card .zk-logo img{
  max-width:100%;
  max-height:32px;
  width:auto;
  height:auto;
  object-fit:contain;
}
body .zk-card .zk-logo__txt{
  font-size:12px;
  font-weight:800;
  color:#002745;
  text-align:center;
}

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

body .zk-card .zk-rate{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:3px 8px;
  margin-top:3px;
}
body .zk-card .zk-rate__stars{position:relative;display:inline-block;line-height:0;white-space:nowrap}
body .zk-card .zk-rate__bg{display:inline-block;color:#d6e1ee;line-height:0}
body .zk-card .zk-rate__fg{
  position:absolute;left:0;top:0;
  overflow:hidden;
  color:#F7A03D;
  line-height:0;
  white-space:nowrap;
}
.zk-star{display:inline-block;vertical-align:top}
body .zk-card .zk-rate__val{font-size:13.5px;font-weight:800;color:#002745}
body .zk-card .zk-rate__cnt{font-size:12px;color:#7b8794}

body .zk-card .zk-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 20px;
  border-radius:10px;
  background:#F74B3D;
  color:#fff !important;
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  box-shadow:0 7px 16px rgba(247,75,61,.28);
  transition:background-color .18s ease,transform .12s ease,box-shadow .18s ease;
}
body .zk-card .zk-cta:hover,
body .zk-card .zk-cta:focus-visible{
  background:#e23a2c;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(247,75,61,.36);
}

/* ---------- оффер ---------- */

body .zk-card .zk-offer{
  display:grid;
  gap:3px;
  min-width:0;
  padding:10px 13px 11px;
  background:#fff6e8;
  border:1px solid #f2e0c2;
  border-left:4px solid #F74B3D;
  border-radius:12px;
}
body .zk-card .zk-eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#a8762c;
}
body .zk-card .zk-offer__main,
body .zk-card .zk-offer__main *{
  font-size:16.5px;
  line-height:1.34;
  font-weight:800;
  color:#002745;
}
body .zk-card .zk-offer__special,
body .zk-card .zk-offer__special *{
  font-size:13.5px;
  line-height:1.45;
  font-weight:700;
  color:#b4432f;
}
body .zk-card .zk-feat,
body .zk-card .zk-feat *{
  font-size:13px;
  line-height:1.5;
  color:#5b6b7c;
}

body .zk-card .zk-promo{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
body .zk-card .zk-promo__l{font-size:11px;color:#a8762c}
body .zk-card .zk-promo__c{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  font-weight:800;
  letter-spacing:.07em;
  color:#002745;
  background:#fff;
  border:1px dashed #e0b978;
  border-radius:8px;
  padding:3px 9px;
}

/* ---------- характеристики чипами ---------- */

body .zk-card .zk-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
}
body .zk-card .zk-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  max-width:100%;
  padding:4px 13px 4px 5px;
  background:#fff;
  border:1px solid #dde6f1;
  border-radius:999px;
}
body .zk-card .zk-chip__i{display:flex;align-items:center;line-height:0;color:#F74B3D;flex:0 0 auto}
body .zk-card .zk-chip .zk-i{width:24px;height:24px}
body .zk-card .zk-chip__l{
  font-size:10.5px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#7b8794;
  overflow-wrap:anywhere;
}
body .zk-card .zk-chip__v{
  font-size:13.5px;
  line-height:1.2;
  font-weight:800;
  color:#002745;
  overflow-wrap:anywhere;
}

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

body .zk-card .zk-foot{
  grid-area:foot;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 16px;
  padding:9px 14px;
  background:#F0F2F7;
  border-top:1px solid #e1e6ef;
}
body .zk-card .zk-payrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0}
body .zk-card .zk-payrow__l{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9aa7b6;
}
body .zk-card .zk-pay{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0}
body .zk-card .zk-pay li{display:inline-flex;align-items:center;gap:5px}
body .zk-card .zk-pay li span{font-size:12px;line-height:1.3;color:#5b6b7c}
body .zk-card .zk-pay .zk-i{width:18px;height:18px;color:#8aa0b5;flex:0 0 auto}

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

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

/* ---------- мобильная: отделяем карточку от фона ---------- */

@media (max-width:767.98px){
  .zk-list{gap:14px}
  .zk-card{
    border:1px solid #b9cee6;
    box-shadow:0 10px 24px rgba(0,39,69,.16), 0 2px 5px rgba(0,39,69,.08);
  }
  body .zk-card .zk-rank{padding:12px 3px}
  body .zk-card .zk-main{padding:11px 11px 12px;gap:9px}
  body .zk-card .zk-logo{width:84px;height:38px}
  body .zk-card .zk-logo img{max-height:26px}

  /* чипы и подвал ужимаем: иначе карточка на 375 вырастает за 500 px
     и первая не помещается в экран */
  body .zk-card .zk-chips{gap:6px}
  body .zk-card .zk-chip{padding:3px 9px 3px 3px;gap:5px}
  body .zk-card .zk-chip .zk-i{width:20px;height:20px}
  body .zk-card .zk-chip__l{font-size:9.5px;letter-spacing:.04em}
  body .zk-card .zk-chip__v{font-size:12.5px}

  body .zk-card .zk-offer{padding:9px 11px 10px}
  body .zk-card .zk-offer__main,
  body .zk-card .zk-offer__main *{font-size:15.5px;line-height:1.3}

  body .zk-card .zk-cta{min-height:44px;padding:11px 16px}

  body .zk-card .zk-foot{padding:7px 11px;gap:3px 10px}
  body .zk-card .zk-pay{gap:3px 9px}
  body .zk-card .zk-pay li span{font-size:11px}
  body .zk-card .zk-pay .zk-i{width:16px;height:16px}
}

/* ---------- десктоп ---------- */

@media (min-width:768px){
  .zk-list{gap:16px}
  .zk-card{grid-template-columns:62px minmax(0,1fr)}

  body .zk-card .zk-rank{padding:16px 6px;gap:6px}
  body .zk-card .zk-rank__coin{width:38px;height:38px;font-size:16px}
  body .zk-card .zk-rank__t{font-size:8px}

  /* кнопка уезжает в правую колонку и стоит рядом с оффером и чипами,
     верхняя строка с логотипом и именем — во всю ширину */
  body .zk-card .zk-main{
    grid-template-columns:minmax(0,1fr) 204px;
    grid-template-areas:
      "top   top"
      "offer cta"
      "chips cta"
      "feat  feat";
    padding:16px 18px 17px;
    gap:12px 16px;
  }
  body .zk-card .zk-cta{align-self:center}

  body .zk-card .zk-top{grid-template-columns:auto minmax(0,1fr);gap:14px}
  body .zk-card .zk-logo{width:132px;height:54px}
  body .zk-card .zk-logo img{max-height:40px}
  body .zk-card .zk-name{font-size:21px}

  body .zk-card .zk-offer{padding:12px 16px 13px}
  body .zk-card .zk-offer__main,
  body .zk-card .zk-offer__main *{font-size:18.5px;line-height:1.3}

  body .zk-card .zk-foot{padding:10px 18px}
}

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