/*
Theme Name: AstroPay kasinot
Theme URI: https://astropaykasinot.net/
Author: Northline Digital Ltd
Description: Kevyt ja nopea teema AstroPay-kasinoiden vertailusivustolle. Sisältää Kasino-sisältötyypin, toplista-shortcoden ja rakenteisen datan.
Version: 1.0.4
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: astropaykasinot
*/

/* ---------------------------------------------------------------- tokens */

:root {
  /* ink */
  --ink-900: #17122e;
  --ink-800: #241b46;
  --ink-700: #332765;
  --tx: #221c33;
  --tx-soft: #514a63;
  --tx-faint: #7a738c;
  --on-dark: #f0ecfa;
  --on-dark-soft: #b7aed0;

  /* AstroPay violet accent */
  --violet-600: #6d28d9;
  --violet-500: #7c3aed;
  --violet-400: #a78bfa;
  --violet-bg: #f3edfe;
  --link: #6d28d9;

  /* semantic */
  --pos: #12764a;
  --pos-bg: #e7f5ed;
  --neg: #b02a25;
  --neg-bg: #fceceb;
  --warn: #8a6100;
  --warn-bg: #fdf4e0;

  /* surfaces */
  --bg: #f7f5fb;
  --card: #ffffff;
  --bg-alt: #faf8fd;
  --line: #e6e1ef;
  --line-strong: #cdc5dd;

  /* metrics */
  --w-text: 760px;
  --w-wide: 1040px;
  --w-rail: 1290px;
  --r: 8px;
  --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(23, 18, 46, .06), 0 2px 8px rgba(23, 18, 46, .05);
  --shadow-2: 0 4px 14px rgba(23, 18, 46, .10), 0 12px 30px rgba(23, 18, 46, .08);
  --header-h: 62px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--w-text); margin-inline: auto; padding-inline: 20px; }
.wrap-wide { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: 20px; }

main { padding-bottom: 10px; }
main section { scroll-margin-top: calc(var(--header-h) + 14px); }

.entry-content > * { max-width: var(--w-text); margin-inline: auto; }
.entry-content > .alignwide { max-width: var(--w-wide); }
/* Inside a wide block only the cards go wide; the prose stays at reading width
   so headings and paragraphs line up with the rest of the article. Centred here,
   flush left in the two-column layout below. */
.entry-content > .alignwide > h2,
.entry-content > .alignwide > h3,
.entry-content > .alignwide > p,
.entry-content > .alignwide > ul,
.entry-content > .alignwide > ol { max-width: var(--w-text); margin-inline: auto; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink-900);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); letter-spacing: -.024em; }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.85rem); margin-top: 2.3em; }
h3 { font-size: clamp(1.12rem, 2.3vw, 1.26rem); margin-top: 1.8em; margin-bottom: .4em; }
h4 { font-size: 1.03rem; margin-top: 1.4em; margin-bottom: .3em; }

h2 + h3, h3 + h4 { margin-top: .9em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

strong { font-weight: 700; color: var(--ink-800); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
li::marker { color: var(--violet-500); }

.lead { font-size: 1.1rem; color: var(--tx-soft); }
.small { font-size: .88rem; color: var(--tx-faint); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: var(--ink-900); border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.masthead .bar {
  max-width: var(--w-rail); margin-inline: auto; padding-inline: 20px;
  height: var(--header-h); display: flex; align-items: center; gap: 18px;
}
.masthead .brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.masthead .brand img { height: 30px; width: auto; display: block; }
.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar .masthead { top: 46px; } }

.masthead-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.masthead-nav a { color: var(--on-dark-soft); font-size: .92rem; font-weight: 600; text-decoration: none; }
.masthead-nav a:hover { color: #fff; }
@media (max-width: 860px) { .masthead-nav { display: none; } }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: inherit; font-weight: 700; font-size: .98rem; line-height: 1;
  padding: 13px 21px; border-radius: var(--r); border: 0;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { text-decoration: none; }

.btn-cta { background: var(--violet-600); color: #fff; box-shadow: 0 1px 0 #5720ad, 0 5px 14px rgba(109, 40, 217, .28); }
.btn-cta:hover { background: var(--violet-500); transform: translateY(-1px); }
.btn-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 #5720ad; }

.btn-ghost { background: transparent; color: var(--ink-700); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--violet-500); color: var(--violet-600); }

.btn-sm { padding: 9px 15px; font-size: .87rem; border-radius: 6px; }
.btn-block { display: flex; width: 100%; }
.masthead-cta { padding: 10px 16px; font-size: .88rem; }

/* ---------------------------------------------------------------- page top */

.pagetop { padding: 34px 0 4px; }
.pagetop h1 { margin-bottom: .3em; }

/* The hero wrap matches the article shell's geometry rather than .wrap's, so the
   20px gutter is counted the same way in both. Each hero block is then capped at
   reading width, which puts the h1 and intro on the exact left edge the content
   below them uses. The 1180 rule flips these flush left for the two-column grid. */
.pagetop .wrap { max-width: var(--w-rail); }
.pagetop h1,
.pagetop .byline,
.pagetop .lead,
.pagetop .intro-actions,
.pagetop .trustrow,
.pagetop .hero-intro,
.pagetop .pagetop-art { max-width: var(--w-text); margin-inline: auto; }

/* Section banner: brand band carrying the heading (the h2 above is the real one). */
.section-banner { display: block; width: 100%; height: auto; margin: 4px 0 22px; border-radius: var(--r); }

/* Multi-paragraph hero intro (set per page in _ap_hero_html). */
.hero-intro p:last-child { margin-bottom: 0; }
.hero-intro ul { margin: 0 0 1.05em; }
.hero-intro li { margin-bottom: .3em; }

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 0 0 18px; font-size: .87rem; color: var(--tx-faint);
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.byline .who { display: flex; align-items: center; gap: 7px; }
.byline img { width: 28px; height: 28px; border-radius: 50%; display: block; }
.byline a { color: var(--ink-800); font-weight: 700; }
.byline .sep { color: var(--line-strong); }
@media (max-width: 560px) {
  .byline { flex-direction: column; align-items: flex-start; gap: 7px; }
  .byline .sep { display: none; }
}

.intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; }

.trustrow {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 20px 0 4px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.trustrow span {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-alt); border: 1px solid var(--line);
  color: var(--tx-soft); border-radius: 999px; padding: 6px 13px;
  font-size: .81rem; font-weight: 600;
}

.crumbs { font-size: .84rem; color: var(--tx-faint); margin-bottom: 14px; }
.crumbs a { color: var(--tx-faint); font-weight: 500; }
.crumbs .sep { margin: 0 7px; color: var(--line-strong); }

.subhead { padding: 30px 0 2px; }
.subhead h1 { margin-bottom: .25em; }
.subhead > .wrap > p { color: var(--tx-soft); margin: 0 0 14px; }

/* ---------------------------------------------------------------- toplist */

.ranklist { display: flex; flex-direction: column; gap: 13px; margin: 24px 0 8px; }

.rank-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px 20px;
  display: grid; grid-template-columns: 46px minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 200px);
  gap: 18px; align-items: center;
}
.rank-card.is-top { border-color: var(--violet-400); box-shadow: var(--shadow-2); }

.rank-num {
  width: 38px; height: 38px; border-radius: 50%; background: var(--ink-900); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.rank-card.is-top .rank-num { background: var(--violet-600); }

.rank-ribbon {
  position: absolute; top: -11px; left: 74px;
  background: var(--violet-600); color: #fff; font-size: .7rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
}

.rank-who { display: flex; flex-direction: column; gap: 7px; min-width: 0; align-items: center; text-align: center; }
.rank-logo { height: 42px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rank-logo img { max-height: 42px; width: auto; object-fit: contain; }
.rank-name { font-weight: 800; color: var(--ink-900); font-size: 1.02rem; }
.rank-score { display: flex; align-items: center; gap: 6px; font-size: .83rem; color: var(--tx-faint); }
.rank-score b { color: var(--ink-900); font-size: .95rem; }

.rank-bonus { font-weight: 700; color: var(--ink-800); margin-bottom: 8px; }
.rank-data { margin: 0; font-size: .84rem; }
.rank-data div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.rank-data div:last-child { border-bottom: 0; }
.rank-data dt { color: var(--tx-faint); }
.rank-data dd { margin: 0; font-weight: 600; color: var(--ink-800); text-align: right; }

.rank-perks { list-style: none; margin: 10px 0 0; padding: 0; font-size: .85rem; }
.rank-perks li { position: relative; padding-left: 23px; margin-bottom: .35em; line-height: 1.45; }
.rank-perks li::before {
  content: "✓"; position: absolute; left: 0; top: 2px; color: #fff; background: var(--pos);
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: .64rem; font-weight: 700;
}

.rank-cta { display: flex; flex-direction: column; gap: 7px; }
.rank-terms { font-size: .72rem; color: var(--tx-faint); text-align: center; line-height: 1.35; }

@media (max-width: 1040px) {
  .rank-card { grid-template-columns: 42px minmax(140px, 1fr) minmax(150px, 1fr); row-gap: 14px; }
  .rank-perks { grid-column: 2 / -1; }
  .rank-cta { grid-column: 1 / -1; }
  .rank-ribbon { left: 66px; }
}
@media (max-width: 620px) {
  .rank-card { grid-template-columns: 38px minmax(0, 1fr); padding: 16px; }
  .rank-data, .rank-perks { grid-column: 1 / -1; }
  .rank-who { align-items: flex-start; text-align: left; }
}

/* toplist placeholder while no casinos exist yet */
.rank-empty {
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--bg-alt); padding: 22px; text-align: center; color: var(--tx-soft);
  margin: 22px auto; font-size: .93rem;
}
.rank-empty b { display: block; color: var(--ink-900); margin-bottom: 5px; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }

/* ---------------------------------------------------------------- toc */

.toc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 22px; margin: 1.9em auto;
}
.toc h2 { margin: 0 0 .6em; font-size: 1rem; margin-top: 0; }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 26px; font-size: .9rem; }
.toc li { margin-bottom: .3em; break-inside: avoid; }
.toc a { color: var(--tx-soft); font-weight: 500; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* ---------------------------------------------------------------- content blocks */

.pointlist {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 22px; margin: 1.7em auto; box-shadow: var(--shadow-1);
}
.pointlist ul { list-style: none; padding: 0; margin: 0; }
.pointlist li { position: relative; padding-left: 30px; margin-bottom: .5em; }
.pointlist li::before {
  content: "✓"; position: absolute; left: 0; top: 3px; color: #fff; background: var(--pos);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: .73rem; font-weight: 700;
}

.note {
  background: var(--violet-bg); border-left: 4px solid var(--violet-500);
  border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; margin: 1.7em auto;
}
.note.warn { background: var(--warn-bg); border-left-color: #d9a119; }
.note.neg { background: var(--neg-bg); border-left-color: var(--neg); }
.note > :last-child { margin-bottom: 0; }
.note h3 { margin-top: 0; }

figure { margin: 1.8em auto; }
figure img, figure svg { border-radius: var(--r); display: block; width: 100%; }
figcaption { font-size: .84rem; color: var(--tx-faint); margin-top: .55em; text-align: center; }

.table-wrap { overflow-x: auto; margin: 1.7em auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--card); border-radius: var(--r); overflow: hidden; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--ink-800); color: #fff; font-weight: 700; font-size: .86rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--bg-alt); }
td .yes { color: var(--pos); font-weight: 700; }
td .no { color: var(--neg); font-weight: 700; }

.prosandcons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.8em auto; }
.prosandcons > div { border-radius: var(--r-lg); padding: 16px 20px; border: 1px solid var(--line); }
.prosandcons .pro { background: var(--pos-bg); border-color: #bfe3ce; }
.prosandcons .con { background: var(--neg-bg); border-color: #f3ccca; }
.prosandcons h3 { margin-top: 0; font-size: 1.02rem; }
.prosandcons .pro h3 { color: var(--pos); }
.prosandcons .con h3 { color: var(--neg); }
.prosandcons ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.prosandcons li { position: relative; padding-left: 20px; margin-bottom: .45em; }
.prosandcons .pro li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--pos); font-weight: 800; }
.prosandcons .con li::before { content: "−"; position: absolute; left: 0; top: 0; color: var(--neg); font-weight: 800; }
@media (max-width: 680px) { .prosandcons { grid-template-columns: 1fr; } }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.7em auto; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 0 48px; margin-bottom: 1.4em; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  border-radius: 50%; background: var(--violet-600); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.steps h3 { margin-top: 0; margin-bottom: .3em; }

/* author card */
.person {
  display: flex; gap: 15px; align-items: flex-start; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 20px;
  margin: 1.3em auto; box-shadow: var(--shadow-1);
}
.person img { width: 60px; height: 60px; border-radius: 50%; flex: none; }
.person > div { min-width: 0; }
.person h3 { margin: 0 0 .15em; font-size: 1.02rem; }
.person .role { color: var(--violet-600); font-weight: 700; font-size: .86rem; margin-bottom: .5em; }
.person p { margin: 0 0 .5em; font-size: .92rem; color: var(--tx-soft); }

.sources { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; margin: 1.9em auto; }
.sources h2, .sources h3 { margin-top: 0; }
.sources ol, .sources ul { margin: 0; padding-left: 1.2em; font-size: .9rem; }
.sources li { margin-bottom: .4em; }

.changelog { list-style: none; margin: 1.1em 0 0; padding: 0; font-size: .88rem; }
.changelog li { position: relative; padding: 7px 0 7px 92px; border-bottom: 1px solid var(--line); min-height: 20px; }
.changelog li:last-child { border-bottom: 0; }
.changelog time { position: absolute; left: 0; top: 7px; width: 78px; color: var(--tx-faint); font-variant-numeric: tabular-nums; }

details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0; margin: 0 auto .6em; max-width: var(--w-text);
}
details summary {
  cursor: pointer; padding: 13px 17px; font-weight: 700; color: var(--ink-900);
  list-style: none; position: relative; padding-right: 42px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--violet-600); font-weight: 800; font-size: 1.2rem; line-height: 1;
}
details[open] summary::after { content: "−"; }
details .faq-a { padding: 0 17px 15px; color: var(--tx-soft); font-size: .95rem; }
details .faq-a > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- contents rail */

.article-shell { width: 100%; max-width: var(--w-rail); margin-inline: auto; padding-inline: 20px; }
.contents-rail { display: none; }

@media (min-width: 1180px) {
  .article-shell {
    display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 44px; align-items: start;
  }
  .article-shell > .entry-content { min-width: 0; }
  .article-shell > .entry-content > * { margin-inline: 0; }
  .article-shell > .entry-content > .alignwide > h2,
  .article-shell > .entry-content > .alignwide > h3,
  .article-shell > .entry-content > .alignwide > p,
  .article-shell > .entry-content > .alignwide > ul,
  .article-shell > .entry-content > .alignwide > ol { margin-inline: 0; }
  .contents-rail { position: sticky; top: calc(var(--header-h) + 18px); display: block; }

  /* In the grid the article column is flush left, so the hero drops its centring. */
  .pagetop h1,
  .pagetop .byline,
  .pagetop .lead,
  .pagetop .intro-actions,
  .pagetop .trustrow,
  .pagetop .hero-intro,
  .pagetop .pagetop-art { margin-inline: 0; }
}

.contents-rail nav {
  border-left: 2px solid var(--line); padding: 2px 0 2px 16px;
  max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain;
}
.contents-rail h2 { margin: 0 0 .7em; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tx-faint); }
.contents-rail ol { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.contents-rail li { margin-bottom: .1em; }
.contents-rail a { display: block; padding: 4px 0; color: var(--tx-faint); font-weight: 500; }
.contents-rail a:hover { color: var(--link); }
.contents-rail a.is-active { color: var(--ink-900); font-weight: 700; }

/* ---------------------------------------------------------------- sticky mobile cta */

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink-900); border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
}
.mobilebar .txt { color: #fff; font-size: .79rem; line-height: 1.3; min-width: 0; }
.mobilebar .txt b { display: block; font-size: .89rem; }
.mobilebar .txt span { color: var(--on-dark-soft); }
.mobilebar .btn { flex: none; margin-left: auto; }
@media (max-width: 860px) {
  .mobilebar { display: flex; }
  body { padding-bottom: 64px; }
  /* Comfortable thumb targets on touch widths. The logo keeps its 30px height and
     just centres inside a taller hit area, so nothing moves visually. */
  .masthead .brand { min-height: 44px; }
  .mobilebar .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------------- legal pages */

.legal { font-size: .96rem; }
.legal h2 { font-size: 1.28rem; margin-top: 1.9em; }
.legal h3 { font-size: 1.03rem; }

/* ---------------------------------------------------------------- footer */

.sitefoot { background: var(--ink-900); color: var(--on-dark-soft); font-size: .87rem; padding: 36px 0 22px; margin-top: 52px; }
.sitefoot a { color: var(--on-dark-soft); font-weight: 500; text-decoration: none; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }
.sitefoot h3 { color: #fff; font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .9em; }
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: .45em; }

.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 30px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.brandcol img { height: 30px; width: auto; margin-bottom: 12px; }
.brandcol p { color: var(--on-dark-soft); margin: 0; }
.addr { font-style: normal; line-height: 1.7; }

.seals { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; margin: 26px 0 0; }
.seal {
  display: flex; align-items: center; gap: 9px; flex: 1 1 200px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r); padding: 10px 13px; color: var(--on-dark-soft); text-decoration: none;
}
.seal b { display: block; color: #fff; font-size: .82rem; }
.seal span span { font-size: .77rem; }
.seal svg { flex: none; }
@media (max-width: 560px) { .seal { flex: 1 1 100%; } }

.sitefoot-base {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 24px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: .83rem;
}
.sitefoot-resp { display: flex; align-items: center; gap: 11px; }
.sitefoot-resp span { min-width: 0; }
.foot-badge { height: 32px; width: auto; flex: none; }

/* ---------------------------------------------------------------- utils */

.visually-hidden, .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto;
  background: #fff; color: var(--ink-900); padding: 10px 16px; border-radius: var(--r);
  box-shadow: var(--shadow-2); z-index: 100; font-weight: 700;
}
.center { text-align: center; }
.mt0 { margin-top: 0; }
.alignwide { max-width: var(--w-wide); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ---------------------------------------------------------------- telegram link */
/* Colour-agnostic on purpose: this same rule ships on footers with different
   backgrounds, so it borrows the surrounding text colour rather than naming one. */
.foot-tg {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid currentColor; color: inherit;
  font-size: .88rem; font-weight: 700; line-height: 1;
  text-decoration: none; opacity: .82;
  transition: opacity .15s ease, background-color .15s ease;
}
.foot-tg svg { flex: none; }
.foot-tg:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.foot-tg:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .foot-tg { transition: none; } }


/* ---------------------------------------------------------------- toplist card */
/* Leans on the theme's own custom properties so the card picks up this site's
   palette; every var has a fallback because the themes do not all define the
   same set. The CTA reuses .btn-cta, so it is on-brand automatically. */
.toplist, .ranklist, .cmp-list, .caslist { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 8px; }

.tl-card {
  --tl-accent: var(--violet-600);
  --tl-surface: var(--card-alt, #f6f7f8);
  --tl-ink: var(--ink-900, var(--tx, #1b1f22));
  display: grid; grid-template-columns: 54px 158px minmax(0, 1fr) 192px;
  gap: 20px; align-items: center; position: relative;
  background: var(--card, #fff); border: 1px solid var(--line, #e3e6e8);
  border-radius: var(--r-lg, 14px); padding: 20px 22px; box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.07));
}
.tl-card:hover { box-shadow: var(--shadow-2, 0 6px 18px rgba(0,0,0,.10)); }
.tl-card.is-top { border: 2px solid var(--tl-accent); padding-top: 26px; }
.tl-ribbon {
  position: absolute; top: -12px; left: 22px; background: var(--tl-accent); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.tl-rank {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tl-surface); color: var(--tx-faint, #6f797e); font-weight: 800; font-size: 1.1rem;
}
.tl-card.is-top .tl-rank { background: var(--tl-accent); color: #fff; }

.tl-brand { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tl-logo { height: 46px; display: grid; place-items: center; background: var(--tl-surface); border-radius: var(--r, 10px); overflow: hidden; }
.tl-logo img { max-height: 40px; max-width: 100%; width: auto; }
.tl-logo.is-empty { border: 1px dashed var(--line-strong, #c9cfd3); color: var(--tx-faint, #6f797e); font-size: .78rem; font-weight: 800; text-align: center; padding: 0 8px; }
.tl-name { font-weight: 800; color: var(--tl-ink); font-size: 1.02rem; }
.tl-score { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--tx-faint, #6f797e); }
.tl-score b { color: var(--tl-ink); font-size: .98rem; }
.tl-stars { color: var(--tl-accent); letter-spacing: .5px; }

/* The offer is the reason anyone clicks, so it carries the largest type. */
.tl-mid { min-width: 0; }
.tl-offers { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-offer { flex: 1 1 150px; min-width: 0; background: var(--tl-surface); border: 1px solid var(--line, #e3e6e8); border-radius: var(--r, 10px); padding: 8px 14px; text-align: center; }
.tl-offer.is-alt { flex: 0 1 108px; }
.tl-olab { display: block; font-size: .61rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-faint, #6f797e); }
.tl-oval { display: block; font-size: 1.24rem; font-weight: 800; color: var(--tl-ink); line-height: 1.15; margin-top: 2px; }

.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tl-chip { background: var(--tl-surface); border: 1px solid var(--line, #e3e6e8); border-radius: 6px; padding: 4px 9px; font-size: .76rem; color: var(--tx-soft, #4d565b); }
.tl-chip b { color: var(--tl-ink); font-weight: 700; }

.tl-lic { margin-top: 9px; font-size: .76rem; font-weight: 700; color: var(--pos, #1aa251); }
.tl-lic::before { content: "\2713\00a0"; }
.tl-lic.is-warn { color: var(--warn, #b4690e); }
.tl-lic.is-warn::before { content: "\26A0\00a0"; }

.tl-more { margin-top: 9px; }
.tl-more > summary { cursor: pointer; list-style: none; font-size: .78rem; font-weight: 700; color: var(--link, var(--tl-accent)); display: inline-flex; align-items: center; gap: 5px; }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.tl-more[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.tl-more-in { padding-top: 10px; }
.tl-perks { list-style: none; margin: 0 0 8px; padding: 0; font-size: .84rem; }
.tl-perks li { position: relative; padding-left: 23px; margin-bottom: .3em; line-height: 1.45; }
.tl-perks li::before { content: "\2713"; position: absolute; left: 0; top: 2px; color: var(--pos, #1aa251); font-weight: 800; background: var(--pos-bg, #e8f6ee); width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; }
.tl-terms { font-size: .72rem; color: var(--tx-faint, #6f797e); margin: 8px 0 0; line-height: 1.45; }

.tl-go { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.tl-btn { font-size: 1rem; padding: 14px 12px; }
.tl-micro { font-size: .69rem; color: var(--tx-faint, #6f797e); margin-top: 7px; line-height: 1.4; }
.tl-why { font-size: .76rem; font-weight: 700; color: var(--link, var(--tl-accent)); margin-top: 7px; }

@media (max-width: 1040px) {
  .tl-card { grid-template-columns: 46px 140px minmax(0, 1fr); row-gap: 16px; }
  .tl-go { grid-column: 1 / -1; }
  .tl-btn { padding: 15px 12px; }
}
@media (max-width: 680px) {
  .tl-card { grid-template-columns: 42px 1fr; row-gap: 14px; padding: 18px 16px; }
  .tl-rank { width: 34px; height: 34px; font-size: .95rem; }
  .tl-brand { flex-direction: row; align-items: center; gap: 12px; }
  .tl-logo { width: 74px; flex: none; height: 40px; }
  .tl-mid, .tl-go { grid-column: 1 / -1; }
  .tl-oval { font-size: 1.12rem; }
}

/* The card also has to survive inside a narrow reading column, not just a wide
   one, so it reflows on its own width rather than the viewport. The viewport
   queries above stay as the fallback for browsers without container queries. */
.toplist, .ranklist, .cmp-list, .caslist { container-type: inline-size; }
@container (max-width: 820px) {
  .tl-card { grid-template-columns: 46px 140px minmax(0, 1fr); row-gap: 16px; }
  .tl-go { grid-column: 1 / -1; }
  .tl-btn { padding: 15px 12px; }
}
@container (max-width: 680px) {
  .tl-card { grid-template-columns: 42px 1fr; row-gap: 14px; padding: 18px 16px; }
  .tl-rank { width: 34px; height: 34px; font-size: .95rem; }
  .tl-brand { flex-direction: row; align-items: center; gap: 12px; }
  .tl-logo { width: 74px; flex: none; height: 40px; }
  .tl-mid, .tl-go { grid-column: 1 / -1; }
  .tl-oval { font-size: 1.12rem; }
}

/* touch-targets: the logo and the small CTAs render 32-34px tall, which is under
   the comfortable thumb size. Only the hit area grows; the artwork is unchanged. */
@media (max-width: 860px) {
  .masthead .brand,
    .btn-cta,
    .mobilebar .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}