/* ============================================================
   Luxury for Living — casino layer
   css-skin-roulette vector (2026-06-30): light · violet+mint ·
   Outfit/Inter · normal-geometric · rounded-12 · soft-blur ·
   chip-cards · thin-line · left-border-heading.
   Paint only — overrides husk style.css greens. No dark page bg.
   ============================================================ */
:root{
  --paper:#ffffff;
  --bg-soft:#f7f5fb;          /* light violet tint */
  --ink:#241b33;              /* deep plum-ink: nav / footer / headings */
  --text:#33304a;             /* body text (AA on white) */
  --muted:#6f6b85;
  --line:#e8e4f0;
  --primary:#6d28d9;          /* violet — CTA / accent */
  --primary-dark:#581c9e;
  --primary-light:#a78bfa;    /* violet-300 */
  --primary-soft:#ede9fe;     /* violet-100 */
  --mint:#0d9488;             /* teal-mint secondary */
  --mint-soft:#ccfbf1;
  --gold:#b8860b;             /* decorative rank-1 accent only (not text) */
  --amber-bg:#FEF3C7;
  --amber-text:#8a5a06;
  --r:12px;
  --shadow:0 4px 18px rgba(36,27,51,.10);
  --shadow-sm:0 2px 8px rgba(36,27,51,.07);
  --font-display:'Plus Jakarta Sans','Inter',sans-serif;
  --font-body:'Plus Jakarta Sans','Inter',sans-serif;
}

/* ---- fonts: override husk Lato/Vollkorn/Cabin ---- */
body.lux{ font-family:var(--font-body); color:var(--text); background:var(--paper); }
body.lux h1,body.lux h2,body.lux h3,body.lux h4,body.lux h5,body.lux h6{ font-family:var(--font-display); text-transform:none; letter-spacing:-0.01em; }
::selection{ background:var(--primary); color:#fff; }
::-moz-selection{ background:var(--primary); color:#fff; }

/* ---- readability + section rhythm ---- */
.lux-main h2,.lux-main h3,.lux-main h4{ margin:0 0 .6em 0; color:var(--ink); line-height:1.2; }
.lux-main h2{ font-size:30px; font-weight:700; padding-left:16px; border-left:5px solid var(--primary); }  /* divider: left-border-heading */
.lux-main h3{ font-size:22px; font-weight:600; }
.lux-main h4{ font-size:18px; font-weight:600; }
.lux-main h2 span,.lux-main h3 span{ background:transparent; padding:0; height:auto; display:inline; }
.lux-main p,.lux-main li{ font-size:16.5px; line-height:1.7; color:var(--text); }
.lux-main a{ color:var(--primary-dark); }
.lux-main a:hover{ color:var(--primary); }
.lux-main .container{ max-width:960px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; }
.lux-section{ padding:34px 0; border-bottom:1px solid var(--line); scroll-margin-top:92px; }
.lux-section:last-of-type{ border-bottom:none; }
.lux-lead{ font-size:18px; color:var(--muted); }
.lux-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--primary); font-family:var(--font-display); }

/* ---- hero ---- */
.lux-hero{ background:linear-gradient(160deg,#f7f5fb 0%,#efe9fb 100%); border-bottom:3px solid var(--primary-light); padding:46px 0 38px; text-align:center; }
.lux-hero h1{ font-family:var(--font-display); color:var(--ink); font-size:42px; font-weight:800; line-height:1.08; margin:8px 0 14px; letter-spacing:-0.02em; }
.lux-hero h1 span{ background:transparent; padding:0; height:auto; display:inline; color:var(--primary); }
.lux-hero .hero-sub{ max-width:680px; margin:0 auto 20px; font-size:18px; color:#4a4660; }
.lux-updated{ font-size:13px; color:var(--muted); margin-top:14px; }
.hero-cta{ display:inline-block; }

/* ---- trust strip (mint ticks) ---- */
.trust-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:22px auto 0; max-width:760px; }
.trust-strip span{ font-size:13.5px; font-weight:600; color:#3f3a52; display:flex; align-items:center; gap:7px; }
.trust-strip span::before{ content:"✓"; color:var(--mint); font-weight:800; }

/* ---- buttons (violet CTA) ---- */
.cta-button{ display:inline-block; background:linear-gradient(180deg,#7c3aed 0%,#581c9e 100%);
  color:#fff !important; font-family:var(--font-display); font-weight:700; letter-spacing:.01em;
  text-transform:uppercase; font-size:14px; padding:11px 22px; border-radius:10px; border:none;
  text-decoration:none; box-shadow:0 4px 14px rgba(88,28,158,.28); transition:transform .15s,box-shadow .15s; white-space:nowrap; }
.cta-button:hover{ color:#fff !important; transform:translateY(-1px); box-shadow:0 6px 18px rgba(88,28,158,.34); text-decoration:none; }
.cta-button:active{ transform:translateY(1px); }

/* ============== TOPLIST — chip-cards ============== */
.toplist-section .table-wrapper{ overflow-x:visible; }
.toplist-table{ width:100%; border-collapse:separate; border-spacing:0 12px; margin:1rem 0; background:transparent; }
.toplist-table thead th{ text-align:left; padding:.2rem 1rem; color:var(--muted);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
/* each row = a rounded chip-card */
.toplist-table tbody tr{ background:var(--paper); box-shadow:var(--shadow-sm); }
.toplist-table tbody td{ padding:1rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:middle; }
.toplist-table tbody td:first-child{ border-left:1px solid var(--line); border-radius:var(--r) 0 0 var(--r); }
.toplist-table tbody td:last-child{ border-right:1px solid var(--line); border-radius:0 var(--r) var(--r) 0; }
.toplist-row.highlight-row{ box-shadow:0 6px 20px rgba(88,28,158,.16); }
.toplist-row.highlight-row td{ border-color:var(--primary-light); background:linear-gradient(0deg,#faf8ff,#faf8ff); }
.toplist-row.highlight-row td:first-child{ box-shadow:inset 4px 0 0 var(--primary); }
.toplist-table .col-rank{ width:46px; font-weight:800; font-size:1.1rem; color:var(--muted); }
.toplist-row.highlight-row .col-rank{ color:var(--primary); }
.toplist-table .col-logo{ display:flex; align-items:center; gap:.85rem; min-width:220px; }
.brand-chip{ width:64px; height:48px; flex:0 0 64px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6d28d9,#a78bfa); color:#fff; font-family:var(--font-display); font-weight:800;
  font-size:1rem; border-radius:10px; letter-spacing:.02em; }
.toplist-brand{ display:flex; flex-direction:column; line-height:1.25; }
.toplist-brand strong{ color:var(--ink); font-size:1rem; }
.toplist-descriptor{ font-size:.78rem; color:var(--muted); max-width:20ch; }
.toplist-bonus{ display:inline-block; background:var(--amber-bg); color:var(--amber-text); font-weight:800;
  font-size:.92rem; padding:.32rem .65rem; border-radius:5px; box-shadow:none; cursor:default; pointer-events:none; }
.toplist-rating{ color:var(--primary-dark); font-weight:800; font-size:1rem; }
.toplist-table .col-cta{ width:160px; text-align:right; }
.toplist-note{ font-size:13px; color:var(--muted); margin-top:10px; }

/* ============== DATA TABLES ============== */
.data-wrapper{ overflow-x:auto; margin:1.1rem 0; }
.data-table{ width:100%; border-collapse:collapse; background:var(--paper); font-size:15px; }
.data-table caption{ caption-side:top; text-align:left; font-weight:700; color:var(--ink); margin-bottom:.5rem; font-family:var(--font-display); }
.data-table th,.data-table td{ border:1px solid var(--line); padding:.7rem .8rem; text-align:left; vertical-align:top; }
.data-table thead th{ background:var(--ink); color:#fff; font-family:var(--font-display); font-size:13px;
  text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.data-table tbody tr:nth-child(even){ background:var(--bg-soft); }
.data-table .pos{ color:var(--mint); font-weight:700; }

/* ---- pros / cons ---- */
.proscons{ display:flex; gap:20px; flex-wrap:wrap; margin:1.1rem 0; }
.proscons > div{ flex:1 1 280px; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:var(--paper); box-shadow:var(--shadow-sm); }
.proscons h4{ margin-bottom:.6rem; }
.proscons .pros{ border-top:4px solid var(--mint); }
.proscons .cons{ border-top:4px solid #c0563f; }
.proscons ul{ list-style:none; padding:0; margin:0; }
.proscons li{ padding:5px 0 5px 26px; position:relative; }
.proscons .pros li::before{ content:"✓"; position:absolute; left:0; color:var(--mint); font-weight:800; }
.proscons .cons li::before{ content:"✕"; position:absolute; left:0; color:#c0563f; font-weight:800; }

/* ---- callout aside (angle touches) ---- */
.lux-aside{ background:var(--primary-soft); border-left:4px solid var(--primary); border-radius:0 10px 10px 0;
  padding:14px 18px; margin:1.1rem 0; font-size:15.5px; }
.lux-aside strong{ color:var(--primary-dark); }
.lux-aside p{ margin:0; }

/* ---- per-operator review blocks ---- */
.review-block{ border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; margin:1.1rem 0; background:var(--paper); box-shadow:var(--shadow-sm); }
.review-block h3{ color:var(--ink); margin-bottom:.5rem; }
.review-block .review-facts{ font-size:14px; color:var(--muted); background:var(--bg-soft); border-radius:8px; padding:8px 12px; margin:0 0 .7rem; }
.review-block .review-facts strong{ color:var(--ink); }
.review-block > p:last-child{ margin-top:.8rem; margin-bottom:0; }

/* ---- FAQ ---- */
.faq-item{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq-item h3{ font-size:18px; margin-bottom:.4rem; color:var(--ink); }
.faq-item p{ margin:0; }

/* ---- how-we-rate steps ---- */
.rate-steps{ counter-reset:step; list-style:none; padding:0; margin:1rem 0; }
.rate-steps li{ position:relative; padding:6px 0 18px 52px; }
.rate-steps li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:2px;
  width:34px; height:34px; background:var(--primary); color:#fff; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-family:var(--font-display); }

/* ---- responsible gambling band (plum-ink) ---- */
.rg-band{ background:var(--ink); color:#ddd6ea; padding:26px 0; }
.rg-band a{ color:var(--primary-light); }
.rg-band .container{ max-width:960px; }
.rg-band strong{ color:#fff; }

/* ---- author box ---- */
.author-box{ display:flex; gap:18px; align-items:flex-start; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r); padding:20px; margin:1.2rem 0; }
.author-box .avatar{ width:74px; height:74px; flex:0 0 74px; border-radius:50%; background:linear-gradient(135deg,#6d28d9,#a78bfa);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.5rem; font-family:var(--font-display); object-fit:cover; }
.author-box h4{ margin-bottom:.2rem; }
.author-box .role{ color:var(--primary-dark); font-weight:600; font-size:14px; margin-bottom:.5rem; }
.author-box p{ font-size:15px; margin:0; }
.author-box a{ color:var(--primary-dark); }

/* ---- sticky mobile CTA ---- */
.sticky-cta{ display:none; }

/* ---- footer (override husk dark green) ---- */
.footer{ background:var(--ink)!important; }
.lux-footer-cols{ display:flex; flex-wrap:wrap; gap:30px; padding:34px 0 6px; }
.lux-footer-cols .col{ flex:1 1 200px; }
.lux-footer-cols h6{ color:#fff; font-size:13px; letter-spacing:.06em; margin-bottom:14px; font-family:var(--font-display); }
.lux-footer-cols ul{ list-style:none; padding:0; margin:0; }
.lux-footer-cols li{ margin-bottom:9px; background:none; text-indent:0; }
.lux-footer-cols a{ color:#c4bcd6; font-size:14px; text-decoration:none; }
.lux-footer-cols a:hover{ color:var(--primary-light); }
.footer-legal{ border-top:1px solid #3a3350; padding:18px 0; font-size:13px; color:#9b93ad; }
.footer-legal .container{ max-width:960px; }

/* ---- nav (plum-ink bg; husk had no bg image) ---- */
body.lux.contentpage{ padding-top:80px; }
.navbar-default{ background:var(--ink)!important; border:none; box-shadow:0 2px 10px rgba(36,27,51,.22); }
.navbar-brand-text{ color:#fff; font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-0.01em; padding:24px 0 0 15px; display:inline-block; }
.navbar-brand-text:hover,.navbar-brand-text:focus{ color:#fff; text-decoration:none; }
.navbar-brand-text span{ color:var(--primary-light); }
.navbar .navbar-brand{ padding:0; height:auto; }
.nav-logo{ height:36px; width:auto; margin:14px 0 0 12px; background:#fff; padding:4px 8px; border-radius:8px; }
.navbar-default .navbar-nav>li>a{ background:transparent; color:#fff; font-family:var(--font-display); text-transform:uppercase; font-size:13px; letter-spacing:.03em; }
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{ background:var(--primary-dark); color:#fff; }
.navbar-default .navbar-toggle{ border-color:var(--primary-light); margin-top:22px; }
.navbar-default .navbar-toggle .icon-bar{ background-color:#fff; }
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{ background-color:var(--primary-dark); }
.navbar-default .navbar-collapse{ border-color:#3a3350; box-shadow:none; }

/* ================= MOBILE ================= */
@media (max-width:768px){
  body.lux.contentpage{ padding-top:60px; }
  .navbar-brand-text{ padding:16px 0 0 15px; font-size:20px; }
  .navbar-default .navbar-toggle{ margin-top:13px; }
  .navbar-default .navbar-nav{ margin:0; }
  .navbar-default .navbar-nav>li>a{ padding:12px 15px; }
  .lux-hero h1{ font-size:31px; }
  .lux-hero .hero-sub{ font-size:16px; }
  .lux-main h2{ font-size:24px; padding-left:12px; border-left-width:4px; }
  .lux-main .container,.rg-band .container{ padding-left:18px; padding-right:18px; }

  /* toplist chip-cards -> stacked vertical cards */
  .toplist-table thead{ display:none; }
  .toplist-table,.toplist-table tbody,.toplist-table tr,.toplist-table td{ display:block; width:100%; }
  .toplist-table{ border-spacing:0; }
  .toplist-table tr{ border:1px solid var(--line); border-radius:14px; margin-bottom:.8rem;
    padding:.7rem .85rem .85rem; background:var(--paper); text-align:center; box-shadow:var(--shadow-sm); }
  .toplist-row.highlight-row{ border-color:var(--primary); box-shadow:0 6px 20px rgba(88,28,158,.16); }
  .toplist-table td{ border:none!important; padding:.3rem 0; text-align:center; border-radius:0!important; }
  .toplist-row.highlight-row td:first-child{ box-shadow:none; }
  .toplist-table .col-rank{ font-size:.85rem; }
  .toplist-table .col-rank::before{ content:"#"; }
  .toplist-table .col-logo{ flex-direction:column; min-width:0; gap:.4rem; align-items:center; }
  .brand-chip{ width:120px; height:60px; flex-basis:auto; font-size:1.3rem; }
  .toplist-descriptor{ max-width:none; }
  .toplist-bonus{ font-size:1rem; padding:.5rem .85rem; }
  .toplist-table .col-cta{ width:100%; text-align:center; }
  .toplist-table .col-cta .cta-button{ display:block; width:100%; padding:.7rem 1rem; font-size:.95rem; }

  .proscons > div{ flex-basis:100%; }

  .sticky-cta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:1200;
    background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -2px 12px rgba(36,27,51,.14); padding:9px 14px; }
  .sticky-cta a{ display:block; text-align:center; }
  body.lux{ padding-bottom:64px; }
}