/* ═══ ok-guide — guide article v2 (editorial dossier). Two-column with sticky TOC rail,
   featured illustration, key-takeaways, callouts, comparison table, source cards, FAQ,
   related module. Semantic colours: amber = caution, green = positive, navy = authority. ═══ */

/* Hero — asymmetric split (text left, illustration right), compact */
.ok-guide-page .ok-trust-hero,.ok-news-page .ok-trust-hero{padding:34px 0 30px}
.ok-guide-page .ok-trust-hero h1,.ok-news-page .ok-trust-hero h1{font-size:32px;max-width:20ch}
.ok-guide-page .ok-trust-lead,.ok-news-page .ok-trust-lead{font-size:16px;margin-top:12px;max-width:56ch}
.ok-guide-page .ok-ed-byline,.ok-news-page .ok-ed-byline{margin-top:14px}
.okgd-herogrid{display:grid;grid-template-columns:1.35fr .9fr;gap:44px;align-items:center;margin-top:18px}
.okgd-herogrid--noillo{grid-template-columns:1fr}
.okgd-herotext{min-width:0}
/* Featured-image hero art. Default = framed (rectangular editorial illustrations, e.g. news);
   transparent logos/lockups (e.g. the guide's official logo) opt out via --bare to float on the navy. */
.okgd-hero-illo{margin:0;justify-self:center;width:100%;max-width:500px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.okgd-hero-illo img{width:100%;height:auto;display:block}
.okgd-hero-illo--bare{border:0;border-radius:0;overflow:visible}
/* Inline-SVG hero illustration (topic-aware; no box, floats in the navy hero) */
.okgd-heroart{margin:0;justify-self:center;width:100%;max-width:392px}
.okgd-heroart svg{width:100%;height:auto;display:block;overflow:visible}
.okgd-heroart--lockup{max-width:456px}

/* Two-column shell */
.okgd-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;padding-top:34px}
.okgd-main{min-width:0}
.ok-guide-page .okgd-main.ok-trust-article,.ok-news-page .okgd-main.ok-trust-article{max-width:none;margin:0}
.ok-guide-page .ok-trust-body,.ok-news-page .ok-trust-body{max-width:70ch}
.ok-news-page .ok-trust-body>p:first-child{font-size:18px;line-height:1.65;color:var(--ok-text);margin-bottom:10px}
/* Guide: intro paragraph matches body text (uniform) — no larger lead treatment. */
.ok-guide-page .ok-trust-body>p:first-child{color:var(--ok-text)}
/* All article-column blocks share the 70ch width (toplist/FAQ/sources align with body boxes). */
.ok-guide-page .okgd-main>*{max-width:70ch}
.ok-guide-page .ok-trust-body h2,.ok-news-page .ok-trust-body h2{scroll-margin-top:24px}
.okgd-rail{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:16px;padding-top:10px}
/* Rail modules space via the flex gap alone. The generic .okc content-block margin (30px,
   meant for in-article use) pushed the Månadens card below the article's top edge and made
   the card→toplist gap 46px vs 16px elsewhere. */
.okgd-rail .okc{margin:0}

/* Sticky TOC */
.okgd-toc{background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(11,16,34,.04)}
.okgd-toc-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok-text-soft);margin:0 0 12px}
.okgd-toc ol{list-style:none;margin:0;padding:0;counter-reset:tc;display:flex;flex-direction:column;gap:2px}
.okgd-toc li{counter-increment:tc}
.okgd-toc a{display:flex;gap:9px;font-size:13px;color:var(--ok-text);text-decoration:none;padding:6px 8px;border-radius:8px;line-height:1.35}
.okgd-toc a::before{content:counter(tc,decimal-leading-zero);font-family:var(--ok-font-display);font-weight:700;font-size:11px;color:var(--ok-muted);flex:0 0 auto}
.okgd-toc a:hover{background:var(--ok-surface-cool);color:var(--ok-ink)}
.okgd-railcard{background:var(--ok-surface-navy);border-radius:14px;padding:18px 20px;color:#c0c9e2}
.okgd-railcard b{display:block;color:#fff;font-family:var(--ok-font-display);font-size:15px;margin-bottom:8px}
.okgd-railcard p{margin:0 0 10px;font-size:12.5px;line-height:1.6}
.okgd-railcard a{color:var(--ok-mint);font-weight:600;text-decoration:underline}
/* Månadens casino — featured single-casino promo card (rail) */
.okgd-motm{background:linear-gradient(165deg,#182a54,#0c1730);border:1px solid rgba(255,196,79,.30);border-radius:14px;padding:15px 17px;display:flex;flex-direction:column;gap:10px}
.okgd-motm-kick{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ok-gold)}
.okgd-motm-kick .okc-i{width:13px;height:13px;fill:var(--ok-gold);stroke:none}
.okgd-motm-head{display:flex;align-items:center;gap:10px}
.okgd-motm .okc-brand{grid-area:auto;flex:0 0 auto;width:40px;height:40px;background:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:5px;overflow:hidden}
.okgd-motm .okc-brand-img{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.okgd-motm .okc-brand-img img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.okgd-motm .okc-brand-mono{font-family:var(--ok-font-display);font-weight:700;font-size:18px;color:var(--ok-ink)}
.okgd-motm-name{font-family:var(--ok-font-display);font-size:15px;font-weight:700;color:#fff;margin-right:auto}
.okgd-motm .okc-score{background:rgba(255,255,255,.14)}
.okgd-motm .okc-score b{color:#fff}
.okgd-motm .okc-score i{color:#aeb9d6}
.okgd-motm-bonus{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;line-height:1.4;color:var(--ok-mint)}
.okgd-motm-bonus .okc-i{width:14px;height:14px;color:var(--ok-gold);stroke:currentColor;fill:none;flex:0 0 auto}
.okgd-motm .ok-btn{width:100%;margin-top:2px}

/* Key takeaways */
.ok-takeaways{background:linear-gradient(135deg,var(--ok-surface-navy),#0d2b46);border-radius:16px;padding:24px 28px;margin:0 0 28px;color:#fff}
.ok-takeaways .ok-takeaways-h{display:flex;align-items:center;gap:10px;font-family:var(--ok-font-display);font-size:17px;margin:0 0 14px;color:#fff}
.ok-takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ok-takeaways ul>li{list-style:none !important}
.ok-takeaways ul>li{position:relative;padding-left:30px;font-size:14.5px;color:#dfe6f5;line-height:1.5}
.ok-takeaways li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:6px;background:var(--ok-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat}

/* Callouts */
.ok-callout{display:flex;gap:13px;border-radius:13px;padding:16px 18px;margin:22px 0;font-size:14.5px;line-height:1.6}
.ok-callout b{display:block;margin-bottom:3px}
.ok-callout--fakta{background:var(--ok-surface-mint);border:1px solid var(--ok-success-line);color:var(--ok-text)}
.ok-callout--fakta b{color:var(--ok-green-ink)}
.ok-callout--varning{background:var(--ok-warn-surface);border:1px solid var(--ok-warn-line);color:var(--ok-text)}
.ok-callout--varning b{color:var(--ok-warn-text)}
.ok-callout--exempel{background:var(--ok-surface-cool);border:1px solid var(--ok-line);color:var(--ok-text)}
.ok-callout--exempel b{color:var(--ok-ink-2)}
.ok-callout::before{content:"";flex:0 0 auto;width:26px;height:26px;border-radius:8px;background-repeat:no-repeat;background-position:center;background-size:16px 16px}
.ok-callout--fakta::before{background-color:var(--ok-mint-dim);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065f43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.5v4.5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E")}
.ok-callout--varning::before{background-color:#f5e3b8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5c17' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E")}
.ok-callout--exempel::before{background-color:var(--ok-line);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2340' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l5 5-5 5'/%3E%3Cpath d='M14 7l5 5-5 5'/%3E%3C/svg%3E")}

/* Comparison table */
.ok-ctable-wrap{overflow-x:auto;margin:22px 0}
.ok-ctable{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ok-line);border-radius:14px;overflow:hidden;font-size:14px;min-width:520px}
.ok-ctable th,.ok-ctable td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--ok-line)}
.ok-ctable thead th{background:var(--ok-surface-navy);color:#dfe6f5;font-family:var(--ok-font-display);font-size:13px}
.ok-ctable thead th:first-child{background:#0d2b46}
.ok-ctable tbody th{font-weight:600;color:var(--ok-ink);background:var(--ok-surface-cool);width:34%}
.ok-ctable tbody tr:last-child th,.ok-ctable tbody tr:last-child td{border-bottom:0}
.ok-ct-yes{color:var(--ok-green-ink);font-weight:600}
.ok-ct-no{color:var(--ok-danger);font-weight:600}
.ok-ct-yes::before{content:"";display:inline-block;width:18px;height:18px;margin-right:8px;border-radius:5px;vertical-align:-4px;background:var(--ok-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.ok-ct-no::before{content:"";display:inline-block;width:18px;height:18px;margin-right:8px;border-radius:5px;vertical-align:-4px;background:var(--ok-danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/12px 12px no-repeat}

/* Source cards (upgrade of ok-ed-sources on guide) */
.ok-guide-page .ok-ed-sources,.ok-news-page .ok-ed-sources{background:transparent;border:0;padding:0;margin-top:32px}
.ok-guide-page .ok-ed-sources>p,.ok-news-page .ok-ed-sources>p{font-family:var(--ok-font-display);font-size:16px;color:var(--ok-ink);margin:0 0 12px}
.ok-guide-page .ok-ed-sources ul,.ok-news-page .ok-ed-sources ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ok-guide-page .ok-ed-sources li,.ok-news-page .ok-ed-sources li{background:#fff;border:1px solid var(--ok-line);border-radius:11px;padding:12px 15px;font-size:12.5px;color:var(--ok-text-soft);line-height:1.5}
.ok-guide-page .ok-ed-sources li a,.ok-news-page .ok-ed-sources li a{color:var(--ok-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* FAQ */
.ok-guide-faq{margin:30px 0}
.ok-guide-faq>h2{font-size:24px;margin-bottom:14px}
.ok-guide-faq details{background:#fff;border:1px solid var(--ok-line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.ok-guide-faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:15px 20px;font-weight:700;font-size:15.5px;color:var(--ok-ink)}
.ok-guide-faq summary::-webkit-details-marker{display:none}
.ok-guide-faq summary::after{content:"+";font-family:var(--ok-font-display);font-size:20px;color:var(--ok-muted)}
.ok-guide-faq details[open] summary::after{content:"–"}
.ok-guide-faq details[open] summary{background:var(--ok-surface-cool)}
.ok-guide-faq details p{margin:0;padding:14px 20px 16px;font-size:14px;color:var(--ok-text-soft)}

/* Regulatorisk tidslinje (beslutskjede: SI → domstol → laga kraft) */
.ok-timeline{margin:24px 0;padding:0;list-style:none;position:relative}
.ok-timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--ok-line-2)}
.ok-tl-item{position:relative;padding:0 0 20px 40px}
.ok-tl-item:last-child{padding-bottom:0}
.ok-tl-item::before{content:"";position:absolute;left:4px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--ok-ink-2)}
.ok-tl-item--final::before{background:var(--ok-ink-2)}
.ok-tl-date{display:block;font-family:var(--ok-font-display);font-weight:700;font-size:13px;color:var(--ok-ink)}
.ok-tl-item p{margin:2px 0 0;font-size:14px;color:var(--ok-text-soft);line-height:1.55}
.ok-tl-item a{color:var(--ok-ink-2);text-decoration:underline;text-underline-offset:2px}
/* news "vad betyder det för dig"-ruta v2 */
.ok-news-page .ok-news-impact{background:var(--ok-surface-mint);border:1px solid var(--ok-success-line);border-left:0;border-radius:13px;padding:16px 20px;margin:24px 0}
.ok-news-page .ok-news-impact b{color:var(--ok-green-ink);display:block;margin-bottom:4px}

/* Related module */
.okgd-related{background:var(--ok-surface-sand);border-radius:16px;padding:24px 28px;margin-top:30px}
.okgd-related--news{margin-top:34px}
.okgd-related-h{font-family:var(--ok-font-display);font-size:18px;margin:0 0 14px;color:var(--ok-ink)}
.okgd-relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.okgd-relcard{display:block;background:#fff;border:1px solid var(--ok-line);border-radius:12px;padding:15px 17px;text-decoration:none;transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease)}
.okgd-relcard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px)}
.okgd-relcard span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok-muted);margin-bottom:5px}
.okgd-relcard b{display:block;font-size:14.5px;color:var(--ok-ink);line-height:1.3}

@media(max-width:900px){
  .okgd-herogrid{grid-template-columns:1fr;gap:20px}
  .okgd-hero-illo{max-width:400px;margin-top:2px}
  .okgd-heroart{max-width:288px;margin-top:2px}
  .okgd-heroart--lockup{max-width:390px}
  .okgd-shell{grid-template-columns:1fr}
  .okgd-rail{position:static;flex-direction:column}
  .okgd-toc{display:none}
  .ok-guide-page .okgd-railtop{display:none}/* guide only: its in-content toplist + sticky launcher cover this on mobile. News keeps the rail toplist (its money-maker) stacked below the article. */
  .ok-guide-page .ok-ed-sources ul,.ok-news-page .ok-ed-sources ul{grid-template-columns:1fr}
}

/* ═══ Conversion blocks (okc-) — [ok_toplist] ranked panel + [ok_casino_cta] single band.
   Insertable commercial modules for guides/topic pages. Blue = action (matches reviews),
   band-coloured score pills, honest disclosure + 18+ line. ═══ */
.okc{margin:30px 0;color:var(--ok-text)}
.okc *{box-sizing:border-box}
.okc .okc-name{text-decoration:none}

/* Toplist panel */
.okc-toplist{background:#fff;border:1px solid var(--ok-line);border-radius:18px;box-shadow:0 8px 30px -18px rgba(11,16,34,.28);overflow:hidden}
.okc-head{background:linear-gradient(135deg,var(--ok-surface-navy),#0d2b46);color:#fff;padding:20px 24px 18px}
.okc-kick{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok-mint);margin-bottom:9px}
.okc-kick .okc-i{width:14px;height:14px}
.okc-head .okc-title{font-family:var(--ok-font-display);font-size:21px;line-height:1.2;color:#fff;margin:0;text-wrap:balance}
.okc-head .okc-intro{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:#c8d2ea;max-width:60ch}

/* Ranked list */
.okc-list{list-style:none;margin:0;padding:6px;counter-reset:none;display:flex;flex-direction:column;gap:6px}
.okc-list>li{list-style:none}
.okc-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(150px,auto);grid-template-areas:"rank brand body act";gap:16px;align-items:center;padding:16px 18px;border-radius:13px;background:#fff}
.okc-item--first{background:var(--ok-surface-mint);box-shadow:inset 0 0 0 1px var(--ok-success-line)}
.okc-rank{grid-area:rank;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ok-surface-cool);color:var(--ok-ink);font-family:var(--ok-font-display);font-weight:700;font-size:14px}
.okc-item--first .okc-rank{background:var(--ok-green-deep);color:#fff}
.okc-brand{grid-area:brand;display:grid;place-items:center;width:66px;height:46px}
.okc-brand-img{display:grid;place-items:center;width:100%;height:100%}
.okc-brand-img img{max-width:66px;max-height:44px;width:auto;height:auto;object-fit:contain}
.okc-brand-mono{display:grid;place-items:center;width:46px;height:46px;border-radius:11px;background:var(--ok-surface-navy);color:#fff;font-family:var(--ok-font-display);font-weight:700;font-size:20px}
.okc-body{grid-area:body;min-width:0}
.okc-idrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.okc .okc-name{font-family:var(--ok-font-display);font-size:16.5px;font-weight:700;color:var(--ok-ink)}
.okc .okc-name:hover{text-decoration:underline}
.okc .okc-why{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--ok-text-soft)}
.okc-cues{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.okc-cue{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ok-text-soft);background:var(--ok-surface-cool);border-radius:7px;padding:3px 8px;text-decoration:none}
.okc-cue .okc-i{width:12px;height:12px}
.okc-cue--pos{color:var(--ok-green-ink);background:var(--ok-mint-dim)}
.okc-cue--caut{color:var(--ok-warn-text);background:var(--ok-warn-surface)}
a.okc-cue--caut:hover{text-decoration:underline}

/* Score pill (band-coloured number on neutral chip) */
.okc-score{display:inline-flex;align-items:baseline;gap:1px;padding:3px 8px;border-radius:8px;background:var(--ok-surface-cool);font-family:var(--ok-font-display);line-height:1}
.okc-score b{font-size:15px;color:var(--band,var(--ok-ink))}
.okc-score i{font-size:9.5px;font-style:normal;color:var(--ok-muted)}
.okc-s1{--band:var(--ok-band-1)}.okc-s2{--band:var(--ok-band-2)}.okc-s3{--band:var(--ok-band-3)}
.okc-s4{--band:var(--ok-band-4)}.okc-s5{--band:var(--ok-band-5)}.okc-s0{--band:var(--ok-muted)}

/* Action column */
.okc-act{grid-area:act;display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center}
.okc-act .ok-btn{width:100%;white-space:nowrap}
.okc-terms{font-size:10.5px;color:var(--ok-muted)}
.okc .okc-fine{display:flex;align-items:center;gap:7px;margin:0;padding:14px 22px;border-top:1px solid var(--ok-line);font-size:12px;color:var(--ok-text-soft);background:var(--ok-surface-cool)}
.okc-fine .okc-i{width:14px;height:14px;color:var(--ok-green-ink);flex:0 0 auto}
.okc-fine a{color:var(--ok-ink);font-weight:600}

/* Blue = action, matching the reviews (locked colour system) */
.okc .ok-btn--primary{background:var(--ok-action);color:#fff !important;box-shadow:0 1px 2px rgba(20,67,180,.28)}
.okc .ok-btn--primary:hover{background:var(--ok-action-deep)}

/* Single-casino conversion band */
.okc-single{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(180px,auto);grid-template-areas:"brand body act";gap:20px;align-items:center;background:var(--ok-surface-mint);border:1px solid var(--ok-success-line);border-radius:16px;padding:20px 24px}
.okc-single .okc-brand{grid-area:brand;width:76px;height:56px}
.okc-single .okc-brand-img img{max-width:76px;max-height:54px}
.okc-single .okc-brand-mono{width:56px;height:56px;font-size:24px}
.okc-single-body{grid-area:body;min-width:0}
.okc-single .okc-kick{color:var(--ok-green-ink);margin-bottom:6px}
.okc-single .okc-kick .okc-i{width:13px;height:13px}
.okc-single .okc-name{font-size:19px}
.okc-single .okc-why{font-size:13.5px;margin-top:5px;max-width:52ch}
.okc-bonus{margin:8px 0 0;font-size:13px;color:var(--ok-text)}
.okc-bonus b{color:var(--ok-green-ink)}
.okc-single .okc-act{grid-area:act}

@media(max-width:640px){
  .okc-item{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rank brand" "body body" "act act";gap:12px 14px}
  .okc-brand{justify-self:start}
  .okc-single{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand body" "act act";gap:16px}
  .okc-single .okc-act{margin-top:2px}
}

/* ═══ Commercial guide ('ok-guide-com') built-ins: rail mini-toplist + sticky mobile launcher ═══ */
#toppval{scroll-margin-top:90px}/* sticky launcher lands the in-page toplist below the header */
/* Rail mini-toplist — persistent top-3 in the sticky sidebar */
.okgd-railtop{margin:0;background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:14px 16px;box-shadow:0 8px 26px -16px rgba(11,16,34,.3)}
.okgd-railtop .okc-kick{color:var(--ok-green-ink);margin-bottom:8px}
.okgd-railtop-list{display:flex;flex-direction:column}
.okgd-mini-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:9px;align-items:center;padding:8px 4px;border-radius:9px;text-decoration:none}
.okgd-mini-row+.okgd-mini-row{border-top:1px solid var(--ok-line)}
.okgd-mini-row:hover{background:var(--ok-surface-cool)}
.okgd-mini-rank{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--ok-surface-cool);font-family:var(--ok-font-display);font-weight:700;font-size:12px;color:var(--ok-ink)}
.okgd-mini-row:first-child .okgd-mini-rank{background:var(--ok-green-deep);color:#fff}
.okgd-railtop .okc-brand{grid-area:auto;width:34px;height:24px}
.okgd-railtop .okc-brand-img img{max-width:34px;max-height:22px}
.okgd-railtop .okc-brand-mono{width:24px;height:24px;font-size:12px;border-radius:7px}
.okgd-mini-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.okgd-mini-top{display:flex;align-items:center;gap:7px;min-width:0}
.okgd-mini-name{font-family:var(--ok-font-display);font-weight:700;font-size:13px;color:var(--ok-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.okgd-mini-bonus{font-size:10.5px;color:var(--ok-green-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okgd-railtop .okc-score{padding:2px 6px;flex:0 0 auto}
.okgd-railtop .okc-score b{font-size:13px}
.okgd-railtop-all{display:block;text-align:center;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--ok-action);text-decoration:none}
.okgd-railtop-all:hover{text-decoration:underline}
/* Sticky mobile launcher — features the #1 casino (logo + name + score) with a direct CTA */
.okgd-stickybar{display:none}
@media(max-width:900px){
  .okgd-stickybar{display:flex;align-items:center;gap:11px;position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-top:1px solid var(--ok-line);box-shadow:0 -4px 20px -8px rgba(11,16,34,.25)}
  .okgd-stickybar-brand{flex:0 0 auto;display:flex}
  .okgd-stickybar-brand .okc-brand{width:44px;height:34px;background:#fff;border:1px solid var(--ok-line);border-radius:8px;box-shadow:0 1px 3px rgba(11,16,34,.12);display:grid;place-items:center}
  .okgd-stickybar-brand .okc-brand-img img{max-width:34px;max-height:26px}
  .okgd-stickybar-brand .okc-brand-mono{width:32px;height:32px;font-size:13px;border-radius:7px;display:grid;place-items:center}
  .okgd-stickybar-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.2;gap:3px}
  .okgd-stickybar-txt b{font-family:var(--ok-font-display);font-size:14px;color:var(--ok-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .okgd-stickybar-txt>span{display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
  .okgd-stickybar-txt>span em{font-size:11px;color:var(--ok-text-soft);font-style:normal;overflow:hidden;text-overflow:ellipsis}
  .okgd-stickybar-txt .okc-score--sm{flex:0 0 auto}
  .okgd-stickybar-act{flex:0 0 auto}
  .okgd-stickybar-act .ok-btn{white-space:nowrap}
  body.ok-has-stickycta{padding-bottom:74px}
}

/* ═══ Guide media: figures, CSS roulette-wheel diagram, video embed, game carousel ═══ */
.ok-figure{margin:26px 0}
.ok-figrow{display:flex;gap:30px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:26px 0}
.ok-figcap{margin-top:9px;font-size:12.5px;color:var(--ok-text-soft);text-align:center;max-width:34ch}
.ok-wheelwrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.ok-wheelwrap>b{font-size:13px;color:var(--ok-ink);font-family:var(--ok-font-display)}
.ok-wheel{--rw-r:#b3261e;--rw-b:#16161c;--rw-g:#0aa268;width:190px;height:190px;border-radius:50%;background:conic-gradient(var(--rw-g) 0 30deg,var(--rw-r) 30deg 60deg,var(--rw-b) 60deg 90deg,var(--rw-r) 90deg 120deg,var(--rw-b) 120deg 150deg,var(--rw-r) 150deg 180deg,var(--rw-b) 180deg 210deg,var(--rw-r) 210deg 240deg,var(--rw-b) 240deg 270deg,var(--rw-r) 270deg 300deg,var(--rw-b) 300deg 330deg,var(--rw-r) 330deg 360deg);box-shadow:0 10px 30px -12px rgba(11,16,34,.45),inset 0 0 0 6px #cbab6a;position:relative}
.ok-wheel--us{background:conic-gradient(var(--rw-g) 0 15deg,var(--rw-r) 15deg 45deg,var(--rw-b) 45deg 75deg,var(--rw-r) 75deg 105deg,var(--rw-b) 105deg 135deg,var(--rw-r) 135deg 165deg,var(--rw-b) 165deg 180deg,var(--rw-g) 180deg 195deg,var(--rw-r) 195deg 225deg,var(--rw-b) 225deg 255deg,var(--rw-r) 255deg 285deg,var(--rw-b) 285deg 315deg,var(--rw-r) 315deg 345deg,var(--rw-b) 345deg 360deg)}
.ok-wheel::before{content:"";position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle at 50% 34%,#22305a,#0c1327);box-shadow:inset 0 0 0 3px #cbab6a}
.ok-wheel::after{content:"";position:absolute;inset:41%;border-radius:50%;background:linear-gradient(#e7cd93,#c3a35f)}
.ok-wheel-ball{position:absolute;top:7px;left:50%;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c8ccd6);box-shadow:0 1px 2px rgba(0,0,0,.45)}

.ok-video{position:relative;aspect-ratio:16/9;margin:26px 0;border-radius:14px;overflow:hidden;background:#0c1327;box-shadow:0 10px 30px -14px rgba(11,16,34,.4)}
.ok-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ok-video-cap{margin:9px 2px 0;font-size:12.5px;color:var(--ok-text-soft)}
/* Click-to-play facade — our poster, YouTube loads only on click */
.ok-video-play{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;margin:0;padding:0;cursor:pointer;background:radial-gradient(120% 100% at 50% 32%,#22305a,#0b1226)}
.ok-video-btn{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .15s var(--ok-ease)}
.ok-video-btn::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);border-left:20px solid var(--ok-action);border-top:12px solid transparent;border-bottom:12px solid transparent}
.ok-video-play:hover .ok-video-btn,.ok-video-play:focus-visible .ok-video-btn{transform:translate(-50%,-50%) scale(1.08)}
.ok-video-ptxt{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:var(--ok-font-display);font-weight:600;font-size:13.5px;color:#dfe6f5;padding:0 16px}

.ok-gamecar-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 0 12px}
.ok-gamecar-head h3{margin:0}
.ok-gamecar-note{font-size:11.5px;color:var(--ok-muted);white-space:nowrap}
.ok-gamecar{display:grid;grid-auto-flow:column;grid-auto-columns:186px;gap:14px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.ok-gamecar::-webkit-scrollbar{height:8px}
.ok-gamecar::-webkit-scrollbar-thumb{background:var(--ok-line);border-radius:5px}
.ok-gcard{scroll-snap-align:start;background:#fff;border:1px solid var(--ok-line);border-radius:14px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease)}
.ok-gcard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px)}
.ok-gcard-top{aspect-ratio:16/10;background:radial-gradient(circle at 50% 42%,#1c2748,#0b1226);display:grid;place-items:center;position:relative}
.ok-gcard-top .ok-wheel{width:74px;height:74px;box-shadow:inset 0 0 0 3px #cbab6a}
.ok-gcard-soon{position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ok-ink-2);padding:3px 7px;border-radius:6px}
.ok-gcard-body{padding:11px 13px}
.ok-gcard-name{font-family:var(--ok-font-display);font-weight:700;font-size:14px;color:var(--ok-ink);display:block}
.ok-gcard-meta{font-size:11.5px;color:var(--ok-text-soft);margin-top:3px}
@media(max-width:640px){.ok-figrow{gap:20px}.ok-wheel{width:150px;height:150px}}

/* ═══ Long-page UX: reading-progress bar + TOC scrollspy ═══ */
.ok-readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.ok-readbar-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok-action),var(--ok-mint));border-radius:0 3px 3px 0;transition:width .08s linear}
.ok-readtime{white-space:nowrap}
.okgd-toc a.is-active{background:var(--ok-surface-mint);color:var(--ok-green-ink);font-weight:600}
.okgd-toc a.is-active::before{color:var(--ok-green-ink)}

/* ═══ End-of-article conversion band ═══ */
.okgd-endcta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;background:linear-gradient(135deg,var(--ok-surface-navy),#0d2b46);border-radius:14px;padding:15px 18px;margin:26px 0}
.okgd-endcta-brand{display:grid;place-items:center}
.okgd-endcta-brand .okc-brand{grid-area:auto;width:56px;height:44px;background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:5px}
.okgd-endcta-brand .okc-brand-img img{max-width:46px;max-height:34px}
.okgd-endcta-brand .okc-brand-mono{width:38px;height:38px;font-size:18px;border-radius:8px}
.okgd-endcta-txt{min-width:0}
.okgd-endcta-txt b{display:block;font-family:var(--ok-font-display);font-size:15.5px;color:#fff}
.okgd-endcta-lead{margin:2px 0 0;font-size:13px;color:#c8d2ea;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.okgd-endcta-name{font-family:var(--ok-font-display);font-weight:700;color:#fff}
/* Score pill on the navy band: dark-context styling (the .okgd-endcta-txt b rule was turning the number white on a light pill = invisible). */
.okgd-endcta .okc-score{background:rgba(255,255,255,.14)}
.okgd-endcta .okc-score b{color:#fff;font-size:13.5px}
.okgd-endcta .okc-score i{color:#aeb9d6}
.okgd-endcta-bonus{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:5px 0 0;font-size:13px;color:#dfe6f5}
.okgd-endcta-bonus .okc-i{width:15px;height:15px;color:var(--ok-mint);flex:0 0 auto}
.okgd-endcta-bonus b{color:#fff;font-family:var(--ok-font-display);font-size:13.5px;white-space:nowrap}
.okgd-endcta-bonus span{color:#aeb9d6;font-size:11.5px;white-space:nowrap}
.okgd-endcta-act{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center;min-width:175px}
.okgd-endcta .ok-btn--primary{background:var(--ok-action);color:#fff !important;width:100%;white-space:nowrap}
.okgd-endcta .ok-btn--primary:hover{background:var(--ok-action-deep)}
.okgd-endcta-more{font-size:12px;color:var(--ok-mint);text-decoration:none}
.okgd-endcta-more:hover{text-decoration:underline}
@media(max-width:640px){.okgd-endcta{grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:start}.okgd-endcta-act{grid-column:1 / -1;width:100%;min-width:0}.okgd-endcta-bonus{margin-top:6px}.okgd-endcta-bonus b{white-space:normal}}

/* ═══ Roulette betting-layout diagram (inside/outside bets) ═══ */
.ok-betlayout{margin:26px 0;max-width:540px}
.ok-bl-top{display:grid;grid-template-columns:auto 1fr auto;gap:3px;align-items:stretch}
.ok-bl-zero{display:grid;place-items:center;background:var(--ok-cta);color:#fff;border-radius:5px;font-family:var(--ok-font-display);font-weight:700;padding:0 9px;writing-mode:vertical-rl;transform:rotate(180deg)}
.ok-bl-nums{display:grid;grid-template-rows:repeat(3,1fr);grid-auto-flow:column;gap:3px}
.ok-bl-nums>span{display:grid;place-items:center;color:#fff;border-radius:5px;font-family:var(--ok-font-display);font-weight:700;font-size:12px;min-height:28px;min-width:22px}
.ok-bl-r{background:#b3261e}.ok-bl-b{background:#16161c}
.ok-bl-2to1{display:grid;grid-template-rows:repeat(3,1fr);gap:3px}
.ok-bl-2to1>span{display:grid;place-items:center;background:var(--ok-surface-navy);color:#dfe6f5;border-radius:5px;font-size:10.5px;font-weight:700;padding:0 8px}
.ok-bl-row{display:grid;gap:3px;margin-top:3px}
.ok-bl-row--3{grid-template-columns:repeat(3,1fr)}
.ok-bl-row--6{grid-template-columns:repeat(6,1fr)}
.ok-bl-row>span{display:grid;place-items:center;background:var(--ok-surface-cool);color:var(--ok-ink);border:1px solid var(--ok-line);border-radius:5px;font-size:11.5px;font-weight:600;padding:9px 2px;text-align:center}
.ok-bl-row>.ok-bl-r,.ok-bl-row>.ok-bl-b{color:#fff;border:0}

/* ═══ [ok_slots_grid] — reviewed-slots grid module in guide bodies ═══ */
.ok-trust-body .okg-slotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:18px 0 10px;max-width:none}
.ok-trust-body a.okg-slotcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ok-line);border-radius:12px;overflow:hidden;text-decoration:none;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow .18s var(--ok-ease,ease),transform .18s var(--ok-ease,ease)}
.ok-trust-body a.okg-slotcard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px)}
.okg-slot-art{display:block;aspect-ratio:16/10;background:var(--ok-surface-cool);overflow:hidden}
.okg-slot-art img{width:100%;height:100%;object-fit:cover;display:block}
.ok-trust-body .okg-slot-name{font-family:var(--ok-font-display);font-weight:700;font-size:14px;line-height:1.25;color:var(--ok-ink);padding:10px 12px 2px}
.ok-trust-body .okg-slot-meta{font-size:11.5px;color:var(--ok-text-soft);padding:0 12px 12px}
@media(max-width:640px){.ok-trust-body .okg-slotgrid{grid-template-columns:1fr 1fr;gap:10px}.ok-trust-body .okg-slot-name{font-size:13px;padding:9px 10px 2px}.ok-trust-body .okg-slot-meta{padding:0 10px 10px}}

/* ═══ [ok_provider_strip] — most-reviewed studios as logo cards ═══ */
.ok-trust-body .okg-provstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 4px;max-width:none}
.okg-provcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:#fff;border:1px solid var(--ok-line);border-radius:12px;padding:16px 12px}
.okg-prov-logo{display:grid;place-items:center;height:36px}
.okg-prov-logo img{max-height:32px;max-width:120px;width:auto;object-fit:contain}
.okg-prov-fallback{font-family:var(--ok-font-display);font-size:14px;color:var(--ok-ink)}
.ok-trust-body .okg-prov-name{font-family:var(--ok-font-display);font-size:13.5px;color:var(--ok-ink)}
.ok-trust-body .okg-prov-count{font-size:11.5px;color:var(--ok-text-soft)}
.ok-trust-body .okg-prov-all{margin:10px 0 0;font-weight:700}
@media(max-width:640px){.ok-trust-body .okg-provstrip{grid-template-columns:1fr 1fr}}

/* ═══ Link-out trio — mobil / säkerhet / ansvar as cards (one H2, less TOC noise) ═══ */
.ok-trust-body ul.okg-linktrio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 6px;padding:0;list-style:none;max-width:none}
.ok-trust-body .okg-linktrio>li{list-style:none;background:#fff;border:1px solid var(--ok-line);border-radius:12px;padding:16px;margin:0;display:flex;flex-direction:column;gap:8px}
.ok-trust-body .okg-linktrio>li::marker{content:none}
.okg-lt-ic{width:32px;height:32px;border-radius:9px;background:var(--ok-surface-mint);color:var(--ok-green-ink);display:grid;place-items:center}
.okg-lt-ic svg{width:17px;height:17px}
.ok-trust-body .okg-linktrio b{font-family:var(--ok-font-display);font-size:15px;color:var(--ok-ink)}
.ok-trust-body .okg-linktrio p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ok-text-soft);flex:1}
.ok-trust-body .okg-linktrio a{font-weight:700;font-size:13.5px}
@media(max-width:640px){.ok-trust-body ul.okg-linktrio{grid-template-columns:1fr}}

/* Klagomallen (klagoguiden 2026-07-18): brevmall som kopierbart kort */
.okgd-main blockquote{margin:22px 0;padding:20px 24px;background:var(--ok-surface-cool,#f4f7fb);border:1px solid var(--ok-line,#dbe3ee);border-radius:14px;font-size:14.5px}
.okgd-main blockquote p{margin:0 0 10px}
.okgd-main blockquote p:last-child{margin-bottom:0}
/* ReHub-parentens customizer-CSS satter blockquote:not(.wp-block-quote) p lila (#8035be)
   - explicit fargelas har med hogre specificitet. */
.okgd-main .ok-trust-body blockquote p{color:var(--ok-text);font-size:14.5px;line-height:1.65;font-weight:400}
.okgd-main .ok-trust-body blockquote b{color:var(--ok-ink)}
/* Myndighetscell i eskaleringstabellen (klagoguiden) */
.ok-mynd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ok-mynd img{height:26px;width:auto;display:block}