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

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

   Контекст: блок стоит внутри тёмно-фиолетового героя
   (--pxpMainColorLight = #2A1041), поэтому карточка тёмная, но
   светлее фона, с пунктирной перфорацией и вырубками по краю.

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

.zsk-list{
  --zskPanelTop:#3A1758;
  --zskPanelBot:#31114C;
  --zskHole:var(--pxpMainColorLight,#2A1041);
  --zskAccent:#C91AB8;
  --zskAccentSoft:#F0A8E8;
  --zskHot:#FF3B5C;
  --zskCream:#FFF0D9;
  --zskMuted:#C2A9D6;
  --zskLine:rgba(255,255,255,.12);
  --zskDash:rgba(255,255,255,.30);

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

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

body .zsk-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 .zsk-card :where(ul, ol){list-style:none}
body .zsk-card :where(img){max-width:100%;height:auto}
body .zsk-card :where(a){text-decoration:none}

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

/* ---------- каркас карточки ---------- */

.zsk-card{
  position:relative;
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  grid-template-areas:
    "stub body"
    "stub foot";
  background:linear-gradient(180deg,var(--zskPanelTop),var(--zskPanelBot));
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  color:#fff;
  font-size:16px;
  line-height:1.5;
  box-shadow:0 22px 46px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(201,26,184,.12);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.zsk-card:hover{
  border-color:rgba(201,26,184,.45);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(201,26,184,.30);
}

/* ---------- корешок билета ---------- */

body .zsk-card .zsk-stub{
  grid-area:stub;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px 18px;
  text-align:center;
  border-right:1px dashed var(--zskDash);
  min-width:0;
}

/* вырубки: круг цвета героя перекрывает кромку карточки */
body .zsk-card .zsk-stub::before,
body .zsk-card .zsk-stub::after{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--zskHole);
  right:-11px;
}
body .zsk-card .zsk-stub::before{top:-11px}
body .zsk-card .zsk-stub::after{bottom:-11px}

body .zsk-card .zsk-rank{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
}
body .zsk-card .zsk-rank b{
  font-size:34px;
  font-weight:800;
  color:var(--zskAccentSoft);
  line-height:1;
}
body .zsk-card .zsk-rank span{
  margin-top:4px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--zskMuted);
}

/* светлая плашка под логотип — иначе тёмные логотипы тонут в фоне */
body .zsk-card .zsk-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:168px;
  padding:10px 14px;
  background:rgba(255,255,255,.94);
  border-radius:12px;
}
body .zsk-card .zsk-logo img{
  width:auto;
  max-width:100%;
  max-height:46px;
  object-fit:contain;
}

body .zsk-card .zsk-name{
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  color:#fff;
  overflow-wrap:break-word;
}

body .zsk-card .zsk-rate{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
body .zsk-card .zsk-stars{
  position:relative;
  display:inline-block;
  line-height:0;
  white-space:nowrap;
}
body .zsk-card .zsk-stars__bg{color:rgba(255,255,255,.22)}
body .zsk-card .zsk-stars__fg{
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
  color:#FFC24D;
}
body .zsk-card .zsk-rate b{
  font-size:15px;
  font-weight:800;
  color:#fff;
}
body .zsk-card .zsk-rate i{
  font-style:normal;
  font-size:12px;
  color:var(--zskMuted);
}

/* ---------- тело билета ---------- */

body .zsk-card .zsk-body{
  grid-area:body;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 24px 6px;
  min-width:0;
}

body .zsk-card .zsk-offer__label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--zskHot);
}
body .zsk-card .zsk-offer__main{
  font-size:20px;
  line-height:1.35;
  font-weight:700;
  color:#fff;
  overflow-wrap:break-word;
}
body .zsk-card .zsk-offer__special{
  margin-top:6px;
  font-size:14px;
  line-height:1.5;
  color:var(--zskCream);
}

/* лента характеристик: flex-basis, а не auto-fit — иначе в конце
   строки остаётся одинокая ячейка на промежуточных ширинах */
body .zsk-card .zsk-specs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
}
body .zsk-card .zsk-spec{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 152px;
  min-width:0;
  padding:10px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--zskLine);
  border-radius:12px;
}
body .zsk-card .zsk-spec__ic{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(201,26,184,.20);
  color:var(--zskAccentSoft);
}
body .zsk-card .zsk-spec__txt{
  display:flex;
  flex-direction:column;
  min-width:0;
}
body .zsk-card .zsk-spec__txt b{
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  color:#fff;
  overflow-wrap:break-word;
}
body .zsk-card .zsk-spec__txt i{
  font-style:normal;
  font-size:12px;
  line-height:1.3;
  color:var(--zskMuted);
}

body .zsk-card .zsk-promo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  align-self:flex-start;
  padding:8px 14px;
  border:1px dashed var(--zskDash);
  border-radius:10px;
}
body .zsk-card .zsk-promo span{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--zskMuted);
}
body .zsk-card .zsk-promo code{
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--zskCream);
}

body .zsk-card .zsk-feat{
  font-size:14px;
  line-height:1.5;
  color:var(--zskCream);
}

body .zsk-card .zsk-act{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
body .zsk-card .zsk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 30px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--zskAccent),var(--zskHot));
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 14px 28px -14px rgba(255,59,92,.95);
}
body .zsk-card .zsk-btn:hover{filter:brightness(1.08)}
body .zsk-card .zsk-review{
  font-size:14px;
  color:var(--zskMuted);
  text-decoration:underline;
}
body .zsk-card .zsk-review:hover{color:#fff}

/* ---------- подвал: платежи и 18+ ---------- */

body .zsk-card .zsk-foot{
  grid-area:foot;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:8px 24px 18px;
  padding-top:14px;
  border-top:1px solid var(--zskLine);
  min-width:0;
}
body .zsk-card .zsk-payline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
body .zsk-card .zsk-payline__label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--zskMuted);
}
body .zsk-card .zsk-pay{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
}
body .zsk-card .zsk-pay li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border:1px solid var(--zskLine);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:12.5px;
  color:#EADCF5;
}
body .zsk-card .zsk-pay svg{width:16px;height:16px;color:var(--zskAccentSoft)}

body .zsk-card .zsk-rg{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--zskMuted);
}
body .zsk-card .zsk-rg__age{
  flex:none;
  padding:3px 9px;
  border-radius:999px;
  background:var(--zskHot);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
body .zsk-card .zsk-rg__txt{min-width:0}

/* ---------- планшет: корешок уже ---------- */

@media (max-width:991.98px){
  .zsk-card{grid-template-columns:200px minmax(0,1fr)}
  body .zsk-card .zsk-body{padding:20px 18px 6px}
  body .zsk-card .zsk-foot{margin:8px 18px 16px}
  body .zsk-card .zsk-offer__main{font-size:18px}
}

/* ---------- мобильная: корешок становится шапкой ---------- */

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

  .zsk-card{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "stub"
      "body"
      "foot";
    border-radius:16px;
  }

  body .zsk-card .zsk-stub{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:
      "rank logo name"
      "rank logo rate";
    align-items:center;
    column-gap:12px;
    row-gap:2px;
    text-align:left;
    padding:12px 16px 14px;
    border-right:0;
    border-bottom:1px dashed var(--zskDash);
  }
  body .zsk-card .zsk-stub::before,
  body .zsk-card .zsk-stub::after{
    top:auto;
    bottom:-11px;
  }
  body .zsk-card .zsk-stub::before{left:-11px;right:auto}
  body .zsk-card .zsk-stub::after{right:-11px;left:auto}

  body .zsk-card .zsk-rank{grid-area:rank}
  body .zsk-card .zsk-rank b{font-size:26px}
  body .zsk-card .zsk-rank span{font-size:10px;letter-spacing:.12em}

  body .zsk-card .zsk-logo{
    grid-area:logo;
    width:auto;
    max-width:104px;
    padding:7px 10px;
  }
  body .zsk-card .zsk-logo img{max-height:30px}

  body .zsk-card .zsk-name{
    grid-area:name;
    font-size:22px;
    line-height:1.15;
  }

  body .zsk-card .zsk-rate{
    grid-area:rate;
    flex-direction:row;
    align-items:center;
    gap:7px;
  }

  body .zsk-card .zsk-body{padding:13px 16px 4px;gap:9px}
  body .zsk-card .zsk-offer__label{margin-bottom:4px;font-size:10px}
  body .zsk-card .zsk-offer__main{font-size:16px;line-height:1.3}
  body .zsk-card .zsk-offer__special{margin-top:4px;font-size:13px}

  /* характеристики: две колонки, подпись не длиннее двух строк —
     иначе четыре длинные подписи раздувают карточку за пределы экрана */
  body .zsk-card .zsk-specs{gap:8px}
  body .zsk-card .zsk-spec{
    /* basis пишем отдельным свойством: calc() внутри шорткода flex
       разбирается не везде, и ячейки уходят по одной в строку */
    flex-grow:1;
    flex-shrink:1;
    flex-basis:calc(50% - 8px);
    align-items:flex-start;
    padding:8px;
    gap:7px;
  }
  body .zsk-card .zsk-spec__ic{width:24px;height:24px;border-radius:7px}
  body .zsk-card .zsk-spec__ic svg{width:15px;height:15px}
  body .zsk-card .zsk-spec__txt b{font-size:13px;line-height:1.2}
  body .zsk-card .zsk-spec__txt i{
    font-size:11px;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  body .zsk-card .zsk-promo{padding:7px 12px}
  body .zsk-card .zsk-feat{font-size:13px}

  body .zsk-card .zsk-act{gap:10px}
  body .zsk-card .zsk-btn{
    flex:1 1 100%;
    min-height:46px;
    padding:0 18px;
  }

  body .zsk-card .zsk-foot{margin:6px 16px 13px;padding-top:10px;gap:8px}
  body .zsk-card .zsk-payline{gap:8px}
  /* подпись «Platby» на мобильной снимаем: иконки говорят сами за себя,
     а лишняя строка уводит первую карточку за пределы экрана */
  body .zsk-card .zsk-payline__label{display:none}
  body .zsk-card .zsk-pay{gap:6px}
  body .zsk-card .zsk-pay li{font-size:11px;padding:4px 8px;gap:5px}
  body .zsk-card .zsk-pay svg{width:13px;height:13px}
  body .zsk-card .zsk-rg{font-size:10.5px;line-height:1.4;gap:7px}
  body .zsk-card .zsk-rg__age{padding:2px 7px;font-size:10px}
}

/* Совсем узкие экраны. Порог именно 330px: на 360 и 375 характеристики
   обязаны оставаться в двух колонках, иначе карточка не влезает в экран. */
@media (max-width:329.98px){
  body .zsk-card .zsk-spec{flex-basis:100%}
  body .zsk-card .zsk-name{font-size:20px}
}