/* ==========================================================================
   Витрина №185 `svcv` «Blå Vinter» — svenskacasinona.com (SE, вертикаль СЛОТЫ)
   ⭐ ПОРТ раскладки витрины №142 `ccnv` с canadiancasinos-online.com — указание владельца
      17.08.2026: «перенеси оттуда весь дизайн… просто поменять цвета под эту страну».
   Палитра берётся ОТ КАРКАСА: синь #123a63 + золото флага #f2b705 + холодная бумага #f4f6f9.
   ⚠️ html{font-size:10px} у темы → всё в px.
   ⚠️ Правила витрины подняты по специфичности (#content .svcv-…), иначе сквозные
      правила каркаса бьют классы витрины.
   ⛔ Негативных чипов в карточке НЕТ (правило владельца 17.08.2026): все бренды пула
      лицензированы в Швеции, чипы только позитивные.
   ========================================================================== */
#content .svcv-wrap{
  --v-stone:#123a63;--v-amber:#f2b705;--v-amber-d:#c78f00;--v-paper:#f4f6f9;
  --v-ink:#16202c;--v-mute:#5b6b7c;--v-line:#d8dee6;--v-ok:#0f7a3d;--v-no:#006aa7;
  display:block;font-family:inherit;color:var(--v-ink);
  /* витрина встаёт на место full-bleed блока донора (1440) — приводим к общей сетке сайта */
  max-width:1200px;margin:22px auto 26px;padding:0 20px;box-sizing:border-box;
}
@media (max-width:900px){#content .svcv-wrap{padding:0 14px;margin:16px auto 20px}}
#content .svcv-wrap *{box-sizing:border-box}
#content .svcv-h{
  font-size:22px;line-height:1.25;margin:0 0 6px;color:var(--v-stone)!important;font-weight:700;
}
#content .svcv-lead{font-size:14px;line-height:1.6;color:var(--v-mute)!important;margin:0 0 14px;max-width:760px}

/* ---------- фильтры ---------- */
#content .svcv-wrap .svcv-f{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
#content .svcv-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 12px;margin:0 0 12px;background:var(--v-paper);
  border:1px solid var(--v-line);border-radius:8px;
}
#content .svcv-flead{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--v-mute)}
#content .svcv-flabel{
  display:inline-block;padding:6px 12px;border:1px solid var(--v-line);border-radius:999px;
  background:#fff;font-size:13px;line-height:1.2;cursor:pointer;color:var(--v-ink);user-select:none;
}
#content .svcv-flabel:hover{border-color:var(--v-amber)}
#content .svcv-f:checked ~ .svcv-filters .svcv-flabel{}
/* активная пилюля */
#content .svcv-f--swish:checked ~ .svcv-filters label[for^="svcv-f-swish"],
#content .svcv-f--zim:checked   ~ .svcv-filters label[for^="svcv-f-zim"],
#content .svcv-f--fs:checked    ~ .svcv-filters label[for^="svcv-f-fs"],
#content .svcv-f--now:checked   ~ .svcv-filters label[for^="svcv-f-now"],
#content .svcv-f--big:checked   ~ .svcv-filters label[for^="svcv-f-big"]{
  background:var(--v-stone);color:#fff;border-color:var(--v-stone);
}
/* сама фильтрация */
/* ⚠️ ОСИ ФИЛЬТРОВ ЗДЕСЬ СВОИ (у канадского шаблона были ont/debit) — список осей в
   генераторе и селекторы в CSS правятся ОДНОЙ правкой, иначе чип кликается, а список не меняется */
#content .svcv-f--swish:checked ~ .svcv-list > li:not([data-swish]),
#content .svcv-f--zim:checked   ~ .svcv-list > li:not([data-zim]),
#content .svcv-f--fs:checked    ~ .svcv-list > li:not([data-fs]),
#content .svcv-f--now:checked   ~ .svcv-list > li:not([data-now]),
#content .svcv-f--big:checked   ~ .svcv-list > li:not([data-big]){display:none!important}

/* ---------- список ---------- */
#content .svcv-list{list-style:none!important;margin:0!important;padding:0!important;counter-reset:none}
#content .svcv-list > li{
  list-style:none!important;margin:0 0 10px!important;padding:0!important;
  display:grid;grid-template-columns:44px 1fr;grid-template-areas:"rank body" "rank pays" "rank d1" "rank d2";
  background:#fff;border:1px solid var(--v-line);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(28,36,48,.06);
}
#content .svcv-list > li::before,#content .svcv-list > li::marker{content:none!important}

/* рельса ранга — три «камня» инукшука */
#content .svcv-rank{
  grid-area:rank;background:var(--v-stone);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 0;
}
#content .svcv-stone{display:block;width:20px;height:5px;border-radius:2px;background:rgba(255,255,255,.34)}
#content .svcv-stone:first-child{width:13px}
#content .svcv-num{
  display:block;margin-top:4px;font-size:16px;font-weight:800;color:#fff;line-height:1;
}
#content .svcv-row--top .svcv-rank{background:var(--v-amber)}
#content .svcv-row--top .svcv-num{color:#16202c}
#content .svcv-row--top .svcv-stone{background:rgba(28,36,48,.35)}

/* тело карточки */
/* компактность: эталон сети ~165px desktop (было 197) */
#content .svcv-body{
  grid-area:body;display:grid;
  grid-template-columns:150px minmax(160px,1fr) minmax(200px,1.1fr) 132px;
  align-items:center;gap:10px;padding:9px 12px;
}
#content .svcv-plate{
  width:140px;height:52px;background:#fff;border:1px solid var(--v-line);border-radius:6px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#content .svcv-plate img{max-width:100%;height:auto;display:block}
#content .svcv-name{display:block;font-size:15px;font-weight:700;color:var(--v-stone)!important;line-height:1.25}
#content .svcv-score{
  display:inline-block;margin-top:3px;padding:1px 8px;border-radius:4px;
  background:var(--v-stone);color:#fff!important;font-size:12.5px;font-weight:700;
}
#content .svcv-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
#content .svcv-chip{
  display:inline-block;padding:2px 7px;border-radius:3px;background:var(--v-paper);
  border:1px solid var(--v-line);font-size:11px;line-height:1.45;color:var(--v-ink)!important;
}
#content .svcv-chip--ok{background:#e8f5ec;border-color:#bfe3cb;color:var(--v-ok)!important}
#content .svcv-chip--no{background:#fdeaec;border-color:#f5c6cc;color:var(--v-no)!important}
#content .svcv-offer{
  background:var(--v-paper);border-left:4px solid var(--v-amber);border-radius:0 6px 6px 0;
  padding:9px 12px;min-height:56px;display:flex;flex-direction:column;justify-content:center;
}
#content .svcv-offer-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--v-mute)!important;font-weight:700;
}
#content .svcv-offer-main{font-size:14.5px;font-weight:700;line-height:1.35;color:var(--v-ink)!important;margin-top:2px}
#content .svcv-ont{font-size:11px;line-height:1.4;color:var(--v-mute)!important;margin:4px 0 0}
#content .svcv-act{display:flex;flex-direction:column;align-items:stretch;gap:5px}
#content .svcv-cta{
  display:block;text-align:center;padding:11px 12px;border-radius:6px;
  background:var(--v-amber)!important;color:#16202c!important;
  font-size:14px;font-weight:800;text-decoration:none!important;border:1px solid var(--v-amber-d);
}
#content .svcv-cta:hover{background:var(--v-amber-d)!important;color:#12181f!important}
#content .svcv-tc{font-size:10.5px;text-align:center;color:var(--v-mute)!important}

/* кассы */
#content .svcv-pays{
  grid-area:pays;display:flex;flex-wrap:wrap;gap:5px;
  padding:0 14px 10px;
}
#content .svcv-pay{
  display:inline-block;padding:2px 8px;border-radius:999px;background:#fff;
  border:1px solid var(--v-line);font-size:11px;color:var(--v-mute)!important;line-height:1.5;
}
/* развороты */
#content .svcv-more{border-top:1px solid var(--v-line);background:#fcfbf9}
#content .svcv-more:nth-of-type(1){grid-area:d1}
#content .svcv-more:nth-of-type(2){grid-area:d2}
#content .svcv-more > summary{
  cursor:pointer;list-style:none;padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--v-stone)!important;
}
#content .svcv-more > summary::-webkit-details-marker{display:none}
#content .svcv-more > summary::after{content:" +";color:var(--v-amber-d);font-weight:800}
#content .svcv-more[open] > summary::after{content:" –"}
#content .svcv-more-in{padding:0 14px 10px;font-size:12.5px;line-height:1.55;color:var(--v-mute)!important}

/* показать все */
#content .svcv-allbox{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
#content .svcv-list > li.svcv-hid{display:none}
#content .svcv-allbox:checked ~ .svcv-list > li.svcv-hid{display:grid}
#content .svcv-allbtn{
  display:inline-block;margin:2px 0 0;padding:9px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--v-stone);background:#fff;color:var(--v-stone)!important;font-size:13.5px;font-weight:700;
}
#content .svcv-allbtn:hover{background:var(--v-stone);color:#fff!important}
#content .svcv-allbox:checked ~ .svcv-allbtn{display:none}
#content .svcv-disc{
  font-size:11.5px;line-height:1.6;color:var(--v-mute)!important;margin:12px 0 0;
  padding-top:10px;border-top:1px solid var(--v-line);
}
#content .svcv-disc a{color:var(--v-stone)!important}

/* ---------- мобилка: строка была 423px, приводим к ~250 ---------- */
@media (max-width:900px){
  #content .svcv-list > li{grid-template-columns:32px 1fr}
  #content .svcv-body{
    grid-template-columns:104px 1fr;grid-template-areas:"plate id" "offer offer" "act act";
    gap:7px 10px;padding:9px 10px;align-items:center;
  }
  #content .svcv-plate{grid-area:plate;width:104px;height:42px;margin:0}
  #content .svcv-id{grid-area:id;text-align:left}
  #content .svcv-name{font-size:14px}
  #content .svcv-offer{grid-area:offer;min-height:0;padding:7px 10px}
  #content .svcv-offer-main{font-size:13.5px}
  #content .svcv-act{grid-area:act}
  #content .svcv-cta{padding:9px 10px;font-size:13.5px}
  #content .svcv-chips{justify-content:flex-start}
  #content .svcv-chip{font-size:10.5px;padding:1px 6px}
  #content .svcv-num{font-size:13px}
  #content .svcv-stone{width:14px;height:4px}
  #content .svcv-stone:first-child{width:9px}
  /* строка касс на мобиле не влезает — кассы остаются в развороте */
  #content .svcv-pays{display:none}
  #content .svcv-h{font-size:19px}
  #content .svcv-more > summary{padding:6px 10px;font-size:12px}
  /* второй разворот на мобиле убираем — строка была 295px при норме ~260 */
  #content .svcv-more:nth-of-type(2){display:none}
  #content .svcv-chip:nth-of-type(n+3){display:none}
  #content .svcv-tc{font-size:10px}
  /* строка была 295px при норме ~200: ужимаем оффер и убираем подпись типа */
  #content .svcv-offer{padding:6px 9px}
  #content .svcv-offer-label{display:none}
  #content .svcv-offer-main{font-size:13px;line-height:1.3}
  #content .svcv-ont{display:none}
  #content .svcv-body{gap:6px 9px;padding:8px 9px}
  #content .svcv-score{margin-top:2px;font-size:12px}
}