/* витрина №189 «Nordstjärna» (tokv) — toponlinekasinon.com (SE)
   Палитра снята с живой страницы: шапка и CTA синие #3673c2 (белый текст = контраст 4.8),
   ссылки #486a91, фон белый, шрифт Lato — витрина выглядит частью сайта.
   ⚠️ структура СПЕЦИАЛЬНО другая, чем у соседей по SE: у cisv строка-грид в один ярус,
   у octv лента-шапка + тело, у ocbv табличная строка с колонками-цифрами,
   у svcv рельса ранга слева; здесь — ЛЕВАЯ КОЛОНКА «ранг + плашка + балл» и текстовое тело. */
/* ⚠️ на главной нативный блок стоит ВНЕ контентного контейнера темы, и витрина уходила
   в full-bleed (1454 против 1126 у абзаца). Клампим по сетке сайта: на страницах, где
   витрина уже внутри контейнера, max-width ничего не меняет. */
.tokv-holder{width:100%;max-width:1140px;margin:0 auto;padding:0;box-sizing:border-box;clear:both}

.tokv-wrap{--v-blue:#3673c2;--v-blue-d:#2a5c9e;--v-blue-l:#eaf1fa;--v-ink:#22303f;--v-mut:#55677a;
  --v-line:#dbe3ec;--v-paper:#fff;--v-paper2:#f5f8fc;--v-ok:#1a7f37;
  display:block;width:100%!important;max-width:none!important;min-width:0!important;
  float:none!important;grid-column:1/-1;flex:1 1 100%;margin:22px 0;box-sizing:border-box;
  color:var(--v-ink);text-align:left;font-family:Lato,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body div:not(.tokv-holder):has(> .tokv-wrap),body section:has(> .tokv-wrap),
body li:has(> .tokv-wrap),body div:has(> .tokv-holder){
  display:block!important;float:none!important;width:100%!important;max-width:none!important}
.tokv-wrap *{box-sizing:border-box}
.tokv-wrap::after{content:"";display:table;clear:both}

.tokv-h2{font-size:1.6rem!important;line-height:1.25;margin:0 0 8px!important;
  color:var(--v-ink)!important;font-weight:700;padding:0!important;background:none!important}
.tokv-lead{font-size:15px!important;line-height:1.62;color:#4a5b6b!important;margin:0 0 10px!important}
.tokv-upd{font-size:12.5px!important;color:var(--v-mut)!important;margin:0 0 12px!important}
.tokv-upd b{color:var(--v-ink)}
.tokv-note{font-size:13px!important;line-height:1.6;color:#33455a!important;background:var(--v-blue-l);
  border:1px solid #cfe0f3;border-left:3px solid var(--v-blue);border-radius:8px;
  padding:10px 14px!important;margin:0 0 12px!important}

.tokv-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.tokv-filters label{flex:0 0 auto;white-space:nowrap;cursor:pointer;font-size:13px;font-weight:700;
  padding:7px 15px;border:1px solid var(--v-line);border-radius:6px;background:var(--v-paper);
  color:var(--v-ink)!important;line-height:1.2}
.tokv-filters label:hover{border-color:var(--v-blue);color:var(--v-blue-d)!important}
.tokv-f{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.tokv-wrap input:checked + label{background:var(--v-blue)!important;border-color:var(--v-blue)!important;
  color:#fff!important}

.tokv-list{list-style:none!important;margin:0!important;padding:0!important}
.tokv-list > li::before,.tokv-list > li::after{content:none!important;display:none!important}
.tokv-list > li{display:grid;grid-template-columns:150px minmax(0,1fr) 196px;
  grid-template-areas:"side main act" "more more more";
  gap:0 18px;align-items:start;margin:0 0 12px!important;padding:14px 16px!important;
  background:var(--v-paper);border:1px solid var(--v-line);border-radius:10px;
  list-style:none!important;box-shadow:0 1px 2px rgba(34,48,63,.06);overflow:hidden}
.tokv-list > li.tokv-top{border-color:var(--v-blue);box-shadow:0 2px 14px rgba(54,115,194,.18)}

/* левая колонка: ранг + плашка + балл */
.tokv-side{grid-area:side;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.tokv-rk{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;
  padding:0 8px;border-radius:11px;background:var(--v-paper2);color:var(--v-mut)!important;
  font-weight:700;font-size:12.5px;letter-spacing:.3px}
.tokv-list > li.tokv-top .tokv-rk{background:var(--v-blue);color:#fff!important}
.tokv-logo{display:flex;align-items:center;justify-content:center;width:140px!important;
  height:66px!important;background:var(--v-paper2)!important;border:1px solid var(--v-line);
  border-radius:8px;padding:6px;float:none!important;position:static!important;margin:0!important;
  overflow:hidden}
.tokv-logo img{max-width:100%!important;max-height:100%!important;width:auto!important;
  height:auto!important;object-fit:contain;float:none!important;margin:0!important;
  position:static!important;border:0!important;box-shadow:none!important}
.tokv-score{display:flex;align-items:baseline;gap:2px;font-weight:700;color:var(--v-blue-d)!important}
.tokv-score b{font-size:19px;line-height:1}
.tokv-score i{font-style:normal;font-size:12px;color:var(--v-mut)}

/* тело */
.tokv-main{grid-area:main;min-width:0}
.tokv-name{display:inline-block;font-size:16px!important;font-weight:700;color:var(--v-ink)!important;
  text-decoration:none;margin:0 0 4px}
a.tokv-name:hover{color:var(--v-blue-d)!important;text-decoration:underline}
.tokv-hero{font-size:15px!important;font-weight:700;line-height:1.35;color:var(--v-blue-d)!important;
  margin:0 0 6px!important;padding-left:11px;border-left:3px solid var(--v-blue)}
.tokv-facts{list-style:none!important;margin:0 0 7px!important;padding:0!important}
.tokv-facts li{margin:0!important;padding:0 0 0 17px;position:relative;font-size:12.5px;
  line-height:1.45;color:#3d4d5c!important}
.tokv-facts li::before{content:"✓";position:absolute;left:0;top:0;color:var(--v-ok);
  font-weight:700;font-size:11px}
.tokv-chips{display:flex;flex-wrap:wrap;gap:5px}
.tokv-chips i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--v-blue-d);
  background:var(--v-blue-l);border:1px solid #cfe0f3;border-radius:5px;padding:3px 9px}

/* действие */
.tokv-act{grid-area:act;display:flex;flex-direction:column;gap:6px;min-width:0}
.tokv-btn{display:block;text-align:center;background:var(--v-blue)!important;color:#fff!important;
  font-weight:700;font-size:15px;text-decoration:none;border-radius:6px;padding:11px 8px;
  line-height:1.15;border:0!important;text-transform:uppercase;letter-spacing:.4px}
.tokv-btn:hover{background:var(--v-blue-d)!important;color:#fff!important;text-decoration:none}
.tokv-rev{display:block;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--v-blue-d)!important;text-decoration:none}
.tokv-rev:hover{text-decoration:underline}
.tokv-tc{display:block;text-align:center;font-size:11px;color:var(--v-mut)!important;line-height:1.4}

/* развороты */
.tokv-more{grid-area:more;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px;
  border-top:1px solid var(--v-line);padding-top:10px}
.tokv-d{margin:0!important;padding:0!important;flex:0 0 auto}
.tokv-d > summary{display:block!important;list-style:none;cursor:pointer;font-size:12px;font-weight:700;
  color:var(--v-ink)!important;background:var(--v-paper2);border:1px solid var(--v-line);
  border-radius:6px;padding:5px 12px}
.tokv-d > summary::-webkit-details-marker{display:none}
.tokv-d > summary .tokv-sm{display:none}
.tokv-d[open]{flex:1 1 100%;order:9}
.tokv-d[open] > summary{border-color:var(--v-blue);color:var(--v-blue-d)!important;background:var(--v-blue-l)}
.tokv-d p{margin:8px 0 0!important;font-size:13px!important;line-height:1.6;color:#3d4d5c!important}

.tokv-allrow{display:flex;justify-content:center;margin:4px 0 12px}
.tokv-allrow label{cursor:pointer;font-size:14px;font-weight:700;color:var(--v-ink)!important;
  border:1px solid var(--v-line);background:var(--v-paper);border-radius:6px;padding:10px 24px}
.tokv-allrow label:hover{border-color:var(--v-blue);color:var(--v-blue-d)!important}
.tokv-disc{font-size:12px!important;line-height:1.6;color:var(--v-mut)!important;margin:8px 0 0!important}

/* порядок: скрытый хвост -> «показать все» -> фильтры */
.tokv-wrap .tokv-list > li.tokv-hid{display:none}
.tokv-wrap:has(.tokv-all:checked) .tokv-list > li.tokv-hid{display:grid}
.tokv-allrow label span.tokv-s2{display:none}
.tokv-wrap:has(.tokv-all:checked) .tokv-allrow label span.tokv-s1{display:none}
.tokv-wrap:has(.tokv-all:checked) .tokv-allrow label span.tokv-s2{display:inline}
.tokv-wrap:has(.tokv-f-swi:checked) .tokv-list > li:not(.tokv-m-swi){display:none}
.tokv-wrap:has(.tokv-f-tru:checked) .tokv-list > li:not(.tokv-m-tru){display:none}
.tokv-wrap:has(.tokv-f-zim:checked) .tokv-list > li:not(.tokv-m-zim){display:none}
.tokv-wrap:has(.tokv-f-fsp:checked) .tokv-list > li:not(.tokv-m-fsp){display:none}
.tokv-wrap:has(.tokv-f-now:checked) .tokv-list > li:not(.tokv-m-now){display:none}
.tokv-wrap:has(.tokv-f-big:checked) .tokv-list > li:not(.tokv-m-big){display:none}
.tokv-wrap:has(.tokv-f-liv:checked) .tokv-list > li:not(.tokv-m-liv){display:none}
.tokv-wrap:has(.tokv-f-low:checked) .tokv-list > li:not(.tokv-m-low){display:none}

@media (max-width:1000px){
  .tokv-list > li{grid-template-columns:126px minmax(0,1fr);
    grid-template-areas:"side main" "act act" "more more";gap:0 14px}
  .tokv-logo{width:120px!important;height:58px!important}
  .tokv-act{flex-direction:row;align-items:center;gap:10px;margin-top:10px}
  .tokv-btn{flex:1 1 auto}
  .tokv-rev,.tokv-tc{flex:0 0 auto;white-space:nowrap}
}
@media (max-width:640px){
  .tokv-wrap{margin:16px 0}
  /* ⚠️ замер: колонка «ранг + плашка + балл» давала строку 332px при принятом потолке 290 —
     на узком экране кладём её в ОДНУ строку над телом карточки */
  .tokv-list > li{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"side" "main" "act" "more"}
  .tokv-side{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;
    margin-bottom:6px}
  .tokv-score{margin-left:auto}
  .tokv-h2{font-size:1.3rem!important}
  .tokv-lead{font-size:14px!important}
  .tokv-list > li{padding:10px 11px!important;gap:0 10px}
  .tokv-logo{width:96px!important;height:46px!important}
  .tokv-side{gap:5px}
  .tokv-more{margin-top:8px;padding-top:8px;gap:6px}
  .tokv-d > summary{padding:4px 10px;font-size:11.5px}
  .tokv-btn{padding:9px 8px;font-size:14.5px}
  .tokv-hero{font-size:14px!important}
  /* ⚠️ на бонусных страницах оффер и условия длиннее — клэмпим, иначе строка 336px */
  .tokv-facts li:nth-child(n+2){display:none}
  .tokv-facts li{font-size:12px;line-height:1.4}
  .tokv-chips i:nth-child(n+3){display:none}
  .tokv-hero{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:13.5px!important;line-height:1.3}
  .tokv-name{font-size:15px!important;margin-bottom:2px}
  /* короткие подписи разворотов: три пилюли в одну строку вместо двух */
  .tokv-d > summary .tokv-sm{display:inline}
  .tokv-d > summary .tokv-lg{display:none}
  .tokv-d > summary{padding:4px 10px;font-size:11.5px}
  .tokv-more{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tokv-more::-webkit-scrollbar{display:none}
  .tokv-d[open]{flex:0 0 auto}
  .tokv-tc{display:none}
  .tokv-chips i:nth-child(n+4){display:none}
  .tokv-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tokv-filters::-webkit-scrollbar{display:none}
}

/* ---------- список обзоров на главной (страховка от сирот, этап 09) ---------- */
.tok-revs{max-width:1140px;margin:26px auto 30px;padding:0 15px;
  font-family:Lato,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.tok-revs h2{font-size:1.4rem;line-height:1.25;margin:0 0 12px;color:#22303f!important;font-weight:700}
.tok-revs ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 18px;
  list-style:none;margin:0;padding:0}
.tok-revs li{margin:0;font-size:14px;line-height:1.4;padding:8px 11px;border:1px solid #dbe3ec;
  border-radius:6px;background:#f5f8fc}
.tok-revs li a{color:#2a5c9e!important;text-decoration:none}
.tok-revs li a:hover{text-decoration:underline}

/* дата обновления на страницах БЕЗ витрины (класс с префиксом КАРКАСА, не витрины) */
.tok-upd{font-size:12.5px!important;color:#55677a!important;margin:2px 0 14px!important;
  font-family:Lato,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.tok-upd b{color:#22303f}
