/* ===== SHOWCASE TEMPLATE #6 «PANEL» — cn6-* namespace, zero JS.
   Light horizontal casino panels: rank + logo + name/stars/chips + bonus block + CTA.
   Distinct from list(TRYGG/gsc/Tablero) and grid(Rutenett) layouts. Recolour via CSS-vars only.
   This instance: norskecasinoguiden.com, theme blue #3080DE + navy #1A2B45. ===== */
.cn6{--c-accent:#3080de;--c-accent-d:#2568c0;--c-navy:#1a2b45;--c-gold:#f5b301;
     --c-ink:#22283a;--c-mut:#6a6d85;--c-line:#e6e9f0;--c-bg:#f4f7f9;--c-cta-ink:#fff;--c-rad:14px;
     font-family:inherit;color:var(--c-ink);margin:28px 0;line-height:1.5;font-size:16px}
.cn6 *{box-sizing:border-box}

/* head + filters */
.cn6__head{margin:0 0 14px}
.cn6__ttl{margin:0;font-size:26px;font-weight:800;color:var(--c-navy)}
.cn6__ttl b{color:var(--c-accent)}
.cn6__sub{margin:5px 0 0;font-size:16px;color:var(--c-mut)}
.cn6__f{position:fixed;opacity:0;pointer-events:none}
.cn6__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.cn6__tab{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;color:var(--c-mut);
  cursor:pointer;user-select:none;border:1.5px solid var(--c-line);background:#fff}
.cn6__tab:hover{border-color:var(--c-accent);color:var(--c-accent)}
#cn6-all:checked~.cn6__tabs [for=cn6-all],
#cn6-fs:checked~.cn6__tabs [for=cn6-fs],
#cn6-tr:checked~.cn6__tabs [for=cn6-tr],
#cn6-sport:checked~.cn6__tabs [for=cn6-sport]{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
#cn6-fs:checked~.cn6__list .cn6-card:not([data-fs="1"]),
#cn6-tr:checked~.cn6__list .cn6-card:not([data-tr="1"]),
#cn6-sport:checked~.cn6__list .cn6-card:not([data-sport="1"]){display:none}

/* panels */
.cn6__list{display:flex;flex-direction:column;gap:14px}
.cn6-card{position:relative;display:grid;grid-template-columns:46px 124px minmax(150px,1fr) 140px 168px;align-items:center;
  gap:14px;background:#fff;border:1px solid var(--c-line);border-radius:var(--c-rad);padding:16px 18px 16px 14px;
  box-shadow:0 3px 12px rgba(34,40,58,.06);overflow:hidden;transition:box-shadow .18s,transform .18s}
.cn6-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c-accent)}
.cn6-card:hover{box-shadow:0 10px 28px rgba(48,128,222,.16);transform:translateY(-2px)}
.cn6-card--top{border-color:var(--c-gold)}
.cn6-card--top:before{background:var(--c-gold)}

.cn6-rank{font-size:24px;font-weight:800;color:var(--c-mut);text-align:center}
.cn6-card--top .cn6-rank{color:var(--c-gold)}
.cn6-logo{display:flex;align-items:center;justify-content:center;height:74px}
.cn6-logo img{width:108px;height:74px;object-fit:contain}
/* fixed-height middle so every panel is the same height: name 1 line, stars 1 line, chips 1 row */
.cn6-mid{min-width:0}
.cn6-name{font-weight:800;font-size:17px;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn6-stars{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.cn6-stars i{width:15px;height:15px;display:inline-block}
.cn6-stars svg{width:15px;height:15px;fill:var(--c-gold)}
.cn6-stars b{color:var(--c-navy);font-size:14px}
.cn6-chips{display:flex;flex-wrap:nowrap;gap:5px;overflow:hidden}
.cn6-chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--c-bg);
  border:1px solid var(--c-line);color:var(--c-mut)}
.cn6-chip--hot{background:#e6f0fc;border-color:#c2dbf7;color:var(--c-accent-d)}
.cn6-chip--gold{background:#fff6df;border-color:#f2df9f;color:#8a6410}

.cn6-bonus{text-align:center;padding:0 6px}
.cn6-bonus b{display:block;font-size:21px;font-weight:800;color:var(--c-navy);line-height:1.15}
.cn6-bonus small{display:block;font-size:13px;color:var(--c-accent-d);font-weight:700;margin-top:3px}

.cn6-cta{display:flex;flex-direction:column;gap:7px}
.cn6-play{display:block;text-align:center;padding:13px;border-radius:10px;background:var(--c-accent);
  color:var(--c-cta-ink)!important;font-weight:800;font-size:16px;text-decoration:none!important;
  box-shadow:0 3px 0 var(--c-accent-d);transition:.14s}
.cn6-play:hover{background:var(--c-accent-d);transform:translateY(-1px)}
.cn6-play:active{transform:translateY(1px);box-shadow:0 1px 0 var(--c-accent-d)}
.cn6-rev{text-align:center;font-size:13.5px;font-weight:700;color:var(--c-navy)!important;text-decoration:none!important}
.cn6-rev:hover{color:var(--c-accent)!important;text-decoration:underline!important}
.cn6-terms{text-align:center;font-size:12.5px;color:var(--c-mut)!important;text-decoration:none!important}

.cn6__foot{margin-top:16px;font-size:13px;color:var(--c-mut);line-height:1.5}

@media(max-width:820px){
  .cn6-card{grid-template-columns:44px 1fr;grid-template-areas:"rank brand" "logo logo" "mid mid" "bonus bonus" "cta cta";gap:10px 14px;padding:16px 16px 16px 18px}
  .cn6-rank{grid-area:rank;text-align:left}
  .cn6-logo{grid-area:brand;justify-content:flex-start;height:56px}
  .cn6-logo img{width:104px;height:56px}
  .cn6-mid{grid-area:mid}
  .cn6-bonus{grid-area:bonus;text-align:left;padding:0;display:flex;align-items:baseline;gap:8px}
  .cn6-bonus small{margin-top:0}
  .cn6-cta{grid-area:cta}
  .cn6__ttl{font-size:22px}
}