/* витрина «Betygstabell» (ocbv) — onlinecasinobetyg.com
   ⚠️ дизайн сайта не меняем (указание владельца) — витрина собрана В РОДНУЮ палитру,
   снятую с живой страницы: шапка rgba(255,255,255,.97), акцент/ссылки #d81e8a,
   зелёная CTA #1eb825 (взята ТЕМНЕЕ — #14801f, контраст с белым 5.1 против 2.7 у оригинала),
   фон #fafbfc, текст #1f2937, шрифт Source Sans Pro, контентная колонка 900 px.
   ⚠️ тема донора (bootstrap 3 + свои правила) перебивает по специфичности — всё со скоупом
   .ocbv-* и !important на цвет/размер/фон/float.
   ⚠️ структура СПЕЦИАЛЬНО другая, чем у соседей по SE: у casinoinsikt.se (№182 cisv) строка-грид
   в один ярус, у onlinecasinotopp.com (№183 octv) лента-шапка + тело + подвал;
   здесь — ТАБЛИЧНАЯ строка в стиле самого сайта: ранг · плашка · оффер-колонки · плюсы · балл · CTA,
   под ней полоса условий и развороты. */

.ocbv-holder{width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box;clear:both}

.ocbv-wrap{--v-ink:#1f2937;--v-ink2:#111827;--v-mut:#6b7280;--v-line:#e5e7eb;--v-paper:#fff;
  --v-paper2:#f8fafc;--v-pink:#d81e8a;--v-pink-d:#a81169;--v-pink-t:#fdf2f8;--v-cta:#14801f;
  --v-cta-h:#0f6b19;--v-blue:#2c6fd8;
  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:"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
/* витрина не должна сжиматься чужой раскладкой (bootstrap-колонки донора — float) */
body div:not(.ocbv-holder):has(> .ocbv-wrap),body section:has(> .ocbv-wrap),
body li:has(> .ocbv-wrap),body div:has(> .ocbv-holder){
  display:block!important;float:none!important;width:100%!important;max-width:none!important}
.ocbv-wrap *{box-sizing:border-box}
.ocbv-wrap::after{content:"";display:table;clear:both}

.ocbv-h2{font-size:1.55rem!important;line-height:1.25;margin:0 0 8px!important;color:var(--v-ink)!important;
  font-weight:700;padding:0!important;background:none!important;border:0!important}
.ocbv-lead{font-size:15px!important;line-height:1.62;color:#4b5563!important;margin:0 0 10px!important}
.ocbv-upd{font-size:12.5px!important;color:var(--v-mut)!important;margin:0 0 12px!important}
.ocbv-upd b{color:var(--v-ink)}

/* ---- фильтры ---- */
.ocbv-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.ocbv-filters label{flex:0 0 auto;white-space:nowrap;cursor:pointer;font-size:13px;font-weight:600;
  padding:7px 15px;border:1px solid var(--v-line);border-radius:999px;background:var(--v-paper);
  color:var(--v-ink)!important;line-height:1.2}
.ocbv-filters label:hover{border-color:var(--v-pink);color:var(--v-pink-d)!important}
.ocbv-f{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.ocbv-wrap input:checked + label{background:var(--v-pink)!important;border-color:var(--v-pink)!important;
  color:#fff!important}

/* ---- список ---- */
.ocbv-list{list-style:none!important;margin:0!important;padding:0!important;counter-reset:none}
.ocbv-list > li::before,.ocbv-list > li::after{content:none!important;display:none!important}
.ocbv-list > li{display:grid;grid-template-columns:34px 118px minmax(0,1fr) 100px 168px;
  grid-template-areas:"rk lg of fx sc" "rk lg pl fx sc" "tm tm tm tm tm";
  align-items:center;gap:4px 14px;margin:0 0 10px!important;padding:12px 16px!important;
  background:var(--v-paper);border:1px solid var(--v-line);border-radius:12px;
  list-style:none!important;box-shadow:0 1px 2px rgba(17,24,39,.05);overflow:hidden}
.ocbv-list > li.ocbv-top{border-color:var(--v-pink);box-shadow:0 2px 14px rgba(216,30,138,.16)}

.ocbv-rk{grid-area:rk;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;background:var(--v-paper2);color:var(--v-ink)!important;font-weight:700;font-size:14px}
.ocbv-list > li.ocbv-top .ocbv-rk{background:var(--v-pink);color:#fff!important}

.ocbv-lg{grid-area:lg;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.ocbv-logo{display:flex;align-items:center;justify-content:center;width:112px!important;height:72px!important;
  background:var(--v-paper2)!important;border:1px solid var(--v-line);border-radius:9px;padding:5px;
  float:none!important;position:static!important;margin:0!important;overflow:hidden}
.ocbv-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}
.ocbv-name{font-size:12.5px!important;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  color:var(--v-ink)!important;text-decoration:none;text-align:center;line-height:1.15}
a.ocbv-name:hover{color:var(--v-pink-d)!important;text-decoration:underline}

.ocbv-of{grid-area:of;min-width:0;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ocbv-big{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.ocbv-big b{font-size:23px!important;font-weight:700;color:var(--v-pink)!important;white-space:nowrap}
.ocbv-big b i{font-style:normal;font-size:16px}
.ocbv-big span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--v-mut)!important;margin-top:3px}
.ocbv-big.ocbv-b2 b{color:var(--v-blue)!important}
.ocbv-hero{font-size:14.5px!important;font-weight:700;color:var(--v-ink)!important;line-height:1.3;min-width:0}

.ocbv-pl{grid-area:pl;min-width:0;margin-top:4px}
.ocbv-pl u{display:block;text-decoration:none;font-size:12.5px;line-height:1.42;color:#374151!important;
  padding-left:16px;position:relative}
.ocbv-pl u::before{content:"✓";position:absolute;left:0;top:0;color:var(--v-cta);font-weight:700;font-size:11px}
.ocbv-pl u.ocbv-lic::before{content:"⚑";color:var(--v-pink)}

.ocbv-fx{grid-area:fx;display:flex;flex-direction:column;align-items:center;gap:3px}
.ocbv-stars{font-size:12px;color:var(--v-pink);letter-spacing:1px;line-height:1}
.ocbv-score{font-size:19px;font-weight:700;color:var(--v-ink)!important;line-height:1}
.ocbv-score span{font-size:12px;color:var(--v-mut);font-weight:600}

.ocbv-sc{grid-area:sc;display:flex;flex-direction:column;gap:5px;padding:0 2px;min-width:0}
.ocbv-btn{display:block;text-align:center;background:var(--v-cta)!important;color:#fff!important;font-weight:700;
  font-size:15px;text-decoration:none;border-radius:9px;padding:10px 8px;line-height:1.15;border:0!important}
.ocbv-btn small{display:block;font-size:11.5px;font-weight:600;opacity:.92;margin-top:2px}
.ocbv-btn:hover{background:var(--v-cta-h)!important;color:#fff!important;text-decoration:none}
.ocbv-rev{display:block;text-align:center;font-size:12px;font-weight:600;color:var(--v-pink-d)!important;
  text-decoration:none}
.ocbv-rev:hover{text-decoration:underline}

/* ---- полоса под строкой: развороты + условия ---- */
.ocbv-tm{grid-area:tm;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;
  border-top:1px solid var(--v-line);padding-top:9px}
.ocbv-d{margin:0!important;padding:0!important;flex:0 0 auto}
.ocbv-d > summary{display:block!important;list-style:none;cursor:pointer;font-size:12px;font-weight:600;
  color:var(--v-ink)!important;background:var(--v-paper2);border:1px solid var(--v-line);border-radius:999px;
  padding:4px 12px}
.ocbv-d > summary::-webkit-details-marker{display:none}
.ocbv-d > summary .ocbv-sm{display:none}
.ocbv-d[open]{flex:1 1 100%;order:9}
.ocbv-d[open] > summary{border-color:var(--v-pink);color:var(--v-pink-d)!important;background:var(--v-pink-t)}
.ocbv-d p{margin:8px 0 0!important;font-size:13px!important;line-height:1.6;color:#374151!important}
.ocbv-fine{margin-left:auto;font-size:11px!important;color:var(--v-mut)!important;line-height:1.4}
.ocbv-fine a{color:var(--v-mut)!important;text-decoration:underline}

.ocbv-allrow{display:flex;justify-content:center;margin:4px 0 12px}
.ocbv-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:999px;padding:10px 24px}
.ocbv-allrow label:hover{border-color:var(--v-pink);color:var(--v-pink-d)!important}
.ocbv-note{font-size:13px!important;line-height:1.6;color:#374151!important;background:var(--v-pink-t);
  border:1px solid #f7d3e7;border-left:3px solid var(--v-pink);border-radius:8px;
  padding:10px 14px!important;margin:0 0 12px!important}
.ocbv-disc{font-size:12px!important;line-height:1.6;color:var(--v-mut)!important;margin:8px 0 0!important}

/* порядок правил: скрытый хвост -> «показать все» -> фильтры */
.ocbv-wrap .ocbv-list > li.ocbv-hid{display:none}
.ocbv-wrap:has(.ocbv-all:checked) .ocbv-list > li.ocbv-hid{display:grid}
.ocbv-allrow label span.ocbv-s2{display:none}
.ocbv-wrap:has(.ocbv-all:checked) .ocbv-allrow label span.ocbv-s1{display:none}
.ocbv-wrap:has(.ocbv-all:checked) .ocbv-allrow label span.ocbv-s2{display:inline}
.ocbv-wrap:has(.ocbv-f-swi:checked) .ocbv-list > li:not(.ocbv-m-swi){display:none}
.ocbv-wrap:has(.ocbv-f-tru:checked) .ocbv-list > li:not(.ocbv-m-tru){display:none}
.ocbv-wrap:has(.ocbv-f-zim:checked) .ocbv-list > li:not(.ocbv-m-zim){display:none}
.ocbv-wrap:has(.ocbv-f-fsp:checked) .ocbv-list > li:not(.ocbv-m-fsp){display:none}
.ocbv-wrap:has(.ocbv-f-now:checked) .ocbv-list > li:not(.ocbv-m-now){display:none}
.ocbv-wrap:has(.ocbv-f-big:checked) .ocbv-list > li:not(.ocbv-m-big){display:none}
.ocbv-wrap:has(.ocbv-f-spo:checked) .ocbv-list > li:not(.ocbv-m-spo){display:none}
.ocbv-wrap:has(.ocbv-f-liv:checked) .ocbv-list > li:not(.ocbv-m-liv){display:none}
.ocbv-wrap:has(.ocbv-f-low:checked) .ocbv-list > li:not(.ocbv-m-low){display:none}

@media (max-width:1100px){
  .ocbv-list > li{grid-template-columns:32px 104px minmax(0,1fr) 152px;
    grid-template-areas:"rk lg of sc" "rk lg pl sc" "tm tm tm tm"}
  .ocbv-fx{display:none}
  .ocbv-logo{width:100px!important;height:50px!important}
}
@media (max-width:760px){
  .ocbv-wrap{margin:16px 0}
  .ocbv-h2{font-size:1.28rem!important}
  .ocbv-lead{font-size:14px!important}
  .ocbv-list > li{grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:"rk lg" "of of" "pl pl" "sc sc" "tm tm";
    align-items:center;gap:6px 10px;padding:10px 12px!important}
  .ocbv-lg{flex-direction:row;gap:10px;justify-content:flex-start}
  .ocbv-logo{width:104px!important;height:52px!important}
  .ocbv-name{font-size:13px!important;text-align:left}
  .ocbv-of{gap:12px;margin-top:2px}
  .ocbv-big b{font-size:20px!important}
  .ocbv-hero{font-size:13.5px!important}
  .ocbv-pl u:nth-child(n+3){display:none}
  .ocbv-btn{padding:9px 8px;font-size:14.5px}
  .ocbv-tm{margin-top:6px;padding-top:6px;gap:6px}
  /* подпись 18+ на мобиле прячем — она дублируется дисклеймером под витриной */
  .ocbv-fine{display:none}
  .ocbv-d > summary{padding:4px 10px;font-size:11.5px}
  .ocbv-d > summary .ocbv-sm{display:inline}
  .ocbv-d > summary .ocbv-lg2{display:none}
  .ocbv-sc{flex-direction:row;align-items:center;gap:8px}
  .ocbv-btn{flex:1 1 auto;padding:8px 8px}
  .ocbv-rev{flex:0 0 auto;white-space:nowrap;padding:0 4px}
  .ocbv-btn small{font-size:11px}
  .ocbv-of{gap:10px;margin-top:0}
  .ocbv-pl u{font-size:12px;line-height:1.38}
  .ocbv-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ocbv-filters::-webkit-scrollbar{display:none}
}
