/* ============================================================================
   Витрина №285 `gsrv` «Relevé» — gamblingsources.com (CA, fr-CA)
   Палитра снята с шапки каркаса «Baromètre»: петроль #0e5a61 + рыжая медь #c4451f
   на холодной бумаге. Фирменный элемент строки — ШКАЛА-БАРОМЕТР: доля пакета
   бренда от максимального в ЭТОМ наборе. Фильтры — настоящие чекбоксы, ноль JS.
   ========================================================================= */
.gsrv-wrap{--gv-ink:#151c22;--gv-mut:#546670;--gv-prim:#0e5a61;--gv-primd:#083f45;
  --gv-acc:#c4451f;--gv-accd:#9c3315;--gv-rule:#dbe3e4;--gv-rule2:#eef2f2;--gv-paper:#f5f8f8;
  display:block;grid-column:1/-1;flex:1 1 100%;max-width:none;
  /* витрина распирает поле секции: R11 требует ОДНУ ширину у контентных секций */
  width:100%;margin:24px 0 22px;padding:0 22px;background:#fff;border:1px solid var(--gv-rule);border-top:3px solid var(--gv-prim);
  font-family:Rubik,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;box-sizing:border-box}
.gsrv-wrap *{box-sizing:border-box}

.gsrv-head{padding:20px 0 16px;border-bottom:1px solid var(--gv-rule2)}
.gsrv-wrap .gsrv-head h2{margin:0 0 8px;font-size:21px;line-height:1.28;letter-spacing:-.015em;
  color:var(--gv-ink);font-weight:600;padding:0;text-align:left}
.gsrv-wrap .gsrv-head h2::after{display:none}
.gsrv-sub{margin:0;font-size:13.5px;line-height:1.6;color:var(--gv-mut);max-width:62ch}

/* полоса фильтров — настоящие чекбоксы, у каждого счётчик */
.gsrv-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:12px 0;background:var(--gv-paper);border-bottom:1px solid var(--gv-rule2)}
.gsrv-filters__l{font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:#3d4c55;font-weight:600}
.gsrv-f{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;
  color:var(--gv-ink);padding:5px 2px}
.gsrv-f__i{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex:0 0 16px;
  border:1.5px solid var(--gv-prim);background:#fff;cursor:pointer;position:relative}
.gsrv-f__i:checked{background:var(--gv-prim)}
.gsrv-f__i:checked::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.gsrv-f b{font-size:11.5px;font-weight:600;color:var(--gv-mut);font-variant-numeric:tabular-nums}

/* список */
.gsrv-wrap .gsrv-list{list-style:none;margin:0;padding:0;counter-reset:none}
.gsrv-wrap .gsrv-list > li{display:grid;
  grid-template-columns:34px 150px minmax(0,1fr) 176px 164px;
  grid-template-areas:"rank logo id offer act" ". det det det det";
  align-items:center;gap:0 16px;padding:17px 0;margin:0;
  border-bottom:1px solid var(--gv-rule2);position:relative}
.gsrv-wrap .gsrv-list > li::before{display:none}
.gsrv-wrap .gsrv-list > li:last-of-type{border-bottom:0}

/* ранг — вертикальная петроль-рейка с делениями */
.gsrv-rank{grid-area:rank;align-self:stretch;display:flex;align-items:center;justify-content:center;
  background:var(--gv-prim);color:#fff;position:relative;min-height:84px}
.gsrv-rank b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.gsrv-rank::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 2px,transparent 2px 6px)}
.gsrv-list > li:nth-child(1) .gsrv-rank{background:var(--gv-accd)}
.gsrv-list > li:nth-child(2) .gsrv-rank{background:var(--gv-acc)}

.gsrv-logo{grid-area:logo;display:block}
.gsrv-logo img{display:block;width:150px;height:56px;object-fit:contain;background:#fff;
  border:1px solid var(--gv-rule2)}

.gsrv-id{grid-area:id;min-width:0}
.gsrv-name{display:block;font-size:16px;font-weight:600;color:var(--gv-ink);line-height:1.25}
.gsrv-facts{display:block;margin-top:4px;font-size:12.5px;color:var(--gv-mut);line-height:1.5}

/* оффер + фирменная шкала-барометр */
.gsrv-offer{grid-area:offer;min-width:0}
.gsrv-offer i{display:block;font-style:normal;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gv-mut);font-weight:600}
.gsrv-offer b{display:block;font-size:14.5px;font-weight:600;color:var(--gv-ink);line-height:1.35;
  margin:2px 0 6px;font-variant-numeric:tabular-nums}
.gsrv-bar{display:block;height:7px;background:repeating-linear-gradient(90deg,
  var(--gv-rule) 0 2px,transparent 2px 6px)}
.gsrv-bar em{display:block;height:7px;background:var(--gv-acc)}

.gsrv-act{grid-area:act;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.gsrv-wrap .gsrv-cta{display:block;text-align:center;background:var(--gv-acc);color:#fff!important;
  font-size:14px;font-weight:600;padding:11px 12px;border-radius:2px;text-decoration:none!important;
  box-shadow:0 1px 0 var(--gv-accd);line-height:1.2}
.gsrv-wrap .gsrv-cta:hover{background:var(--gv-accd);text-decoration:none!important}
.gsrv-wrap .gsrv-rev{display:block;text-align:center;font-size:12.5px;color:var(--gv-prim)!important;
  text-decoration:none!important;border-bottom:1px solid var(--gv-rule);padding-bottom:2px}

/* деталь — одна на строку, свёрнута */
.gsrv-wrap .gsrv-det{grid-area:det;margin:8px 0 0;padding:0;border:0;background:none}
.gsrv-wrap .gsrv-det summary{list-style:none;cursor:pointer;font-size:12px;color:var(--gv-mut);
  display:inline-flex;align-items:center;gap:6px;padding:2px 0}
.gsrv-wrap .gsrv-det summary::-webkit-details-marker{display:none}
.gsrv-wrap .gsrv-det summary::before{content:"";width:9px;height:9px;flex:0 0 9px;
  border-left:2px solid var(--gv-acc);border-bottom:2px solid var(--gv-acc);
  transform:rotate(-45deg) translateY(-2px)}
.gsrv-wrap .gsrv-det[open] summary::before{transform:rotate(135deg) translateY(-2px)}
.gsrv-det__in{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px;margin-top:8px;
  padding:12px 14px;background:var(--gv-paper)}
.gsrv-det__row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid var(--gv-rule2);font-size:12.5px}
.gsrv-det__row span{color:var(--gv-mut)}
.gsrv-det__row b{font-weight:600;color:var(--gv-ink);text-align:right}

/* хвост и «показать все» */
.gsrv-wrap .gsrv-list > li.gsrv-hid{display:none}
.gsrv-more__i{position:absolute;opacity:0;pointer-events:none}
.gsrv-more{display:block;text-align:center;padding:13px 0;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--gv-prim);background:var(--gv-paper);
  border-top:1px solid var(--gv-rule2)}
.gsrv-more:hover{color:var(--gv-accd)}
.gsrv-more__i:checked ~ .gsrv-more{display:none}
.gsrv-more__i:checked ~ .gsrv-list > li.gsrv-hid{display:grid}

/* фильтры реально режут: при отмеченной оси остаются только подходящие строки,
   включая те, что лежали в скрытом хвосте */
.gsrv-wrap:has(#gsrv-d10:checked) .gsrv-list > li{display:none}
.gsrv-wrap:has(#gsrv-d10:checked) .gsrv-list > li.is-d10{display:grid}
.gsrv-wrap:has(#gsrv-fs300:checked) .gsrv-list > li{display:none}
.gsrv-wrap:has(#gsrv-fs300:checked) .gsrv-list > li.is-fs300{display:grid}
.gsrv-wrap:has(#gsrv-w35:checked) .gsrv-list > li{display:none}
.gsrv-wrap:has(#gsrv-w35:checked) .gsrv-list > li.is-w35{display:grid}
.gsrv-wrap:has(#gsrv-idb:checked) .gsrv-list > li{display:none}
.gsrv-wrap:has(#gsrv-idb:checked) .gsrv-list > li.is-idb{display:grid}
.gsrv-wrap:has(#gsrv-cry:checked) .gsrv-list > li{display:none}
.gsrv-wrap:has(#gsrv-cry:checked) .gsrv-list > li.is-cry{display:grid}
.gsrv-wrap:has(.gsrv-f__i:checked) .gsrv-more{display:none}

.gsrv-note{margin:0;padding:14px 0 18px;font-size:12px;line-height:1.65;color:var(--gv-mut);
  background:var(--gv-paper);border-top:1px solid var(--gv-rule2)}

@media (max-width:900px){
  .gsrv-wrap .gsrv-list > li{grid-template-columns:30px 108px minmax(0,1fr);
    grid-template-areas:"rank logo id" "offer offer offer" "act act act" "det det det";
    gap:8px 12px;padding:12px 0}
  .gsrv-logo img{width:96px;height:36px}
  .gsrv-name{font-size:15px}
  .gsrv-offer{margin-top:2px}
  .gsrv-act{flex-direction:row;align-items:center;gap:14px}
  .gsrv-wrap .gsrv-cta{flex:1 1 auto}
  .gsrv-wrap .gsrv-rev{flex:0 0 auto;border-bottom:0;text-decoration:underline!important}
  .gsrv-det__in{grid-template-columns:1fr}
  .gsrv-wrap{padding-left:16px;padding-right:16px}
  .gsrv-more__i:checked ~ .gsrv-list > li.gsrv-hid,
  .gsrv-wrap:has(.gsrv-f__i:checked) .gsrv-list > li.is-d10,
  .gsrv-wrap:has(#gsrv-fs300:checked) .gsrv-list > li.is-fs300,
  .gsrv-wrap:has(#gsrv-w35:checked) .gsrv-list > li.is-w35,
  .gsrv-wrap:has(#gsrv-idb:checked) .gsrv-list > li.is-idb,
  .gsrv-wrap:has(#gsrv-cry:checked) .gsrv-list > li.is-cry{display:grid}
}

/* ⛔⛔ Специфичность: правила донора и каркаса на ГОЛЫЕ теги перебивали классы витрины
   (текст фактов приходил БЕЛЫМ на белом — видно только замером computed color).
   Поэтому цвет и размер печатаем с тем же весом, что у каркаса: body .gsrv-wrap … */
/* ⛔⛔ CSS донора красит ГОЛЫЕ span внутри секций в белый: без !important строка
   витрины становится белой по белому — ловится только замером computed color */
body .gsrv-wrap,body .gsrv-wrap li,body .gsrv-wrap span,body .gsrv-wrap b,
body .gsrv-wrap p,body .gsrv-wrap div{color:var(--gv-ink)!important}
body .gsrv-wrap .gsrv-facts{color:var(--gv-mut)!important;font-size:12.5px!important}
body .gsrv-wrap .gsrv-name{color:var(--gv-ink)!important;font-size:16px!important}
body .gsrv-wrap .gsrv-offer i,
body .gsrv-wrap .gsrv-det summary,body .gsrv-wrap .gsrv-det__row span,
body .gsrv-wrap .gsrv-sub,body .gsrv-wrap .gsrv-note{color:var(--gv-mut)!important}
body .gsrv-wrap .gsrv-offer b,body .gsrv-wrap .gsrv-det__row b{color:var(--gv-ink)!important}
body .gsrv-wrap .gsrv-rank b{color:#fff!important}
body .gsrv-wrap .gsrv-cta{color:#fff!important}
body .gsrv-wrap .gsrv-f span{color:var(--gv-ink)!important}
body .gsrv-wrap .gsrv-f b{color:var(--gv-mut)!important}
body .gsrv-wrap .gsrv-head h2{color:var(--gv-ink)!important}
body .gsrv-wrap .gsrv-more{color:var(--gv-prim)!important}
body .gsrv-wrap .gsrv-rev{color:var(--gv-prim)!important}

/* мобилка: строка не выше 290 px — детали сворачиваем плотнее */
@media (max-width:900px){
  .gsrv-wrap .gsrv-det{margin-top:4px}
  .gsrv-wrap .gsrv-det summary{font-size:11.5px}
  .gsrv-offer b{font-size:14px;margin:1px 0 4px}
  .gsrv-facts{font-size:12px;margin-top:2px}
  .gsrv-wrap .gsrv-cta{padding:10px 12px;font-size:13.5px}
}

body .gsrv-wrap .gsrv-filters__l{color:#3d4c55!important}
/* ⛔ на мобиле витрину НЕ распираем: там поле секции уже минимальное,
   отрицательный марджин выносит строку к самому краю экрана (R7 «текст у края») */
@media (max-width:900px){.gsrv-wrap{margin-left:0;margin-right:0;width:100%}}

/* gate_padding меряет «край блока с фоном/рамкой → первый вложенный блок»: поле держит
   САМ .gsrv-wrap, внутренние полосы идут от его контентного края */
body .gsrv-wrap{padding-left:22px;padding-right:22px}
@media (max-width:900px){body .gsrv-wrap{padding-left:16px;padding-right:16px}}