/*
 * supportive.css — production visual enhancement layer
 * Load AFTER main.css and responsive.css.
 * Preserves existing HTML/JS classes and application functionality.
 */

:root {
  --support-primary: var(--primary, #6c5ce7);
  --support-primary-dark: var(--primary-dark, #5a4bd1);
  --support-dark: var(--surface-dark, #1a1a2e);
  --support-dark-2: var(--dark-2, #16213e);
  --support-bg: var(--bg, #f8fafc);
  --support-surface: var(--white, #fff);
  --support-text: var(--dark, #1a1a2e);
  --support-muted: var(--gray, #64748b);
  --support-border: var(--light-gray, #e2e8f0);
  --support-success: var(--success, #00b894);
  --support-danger: var(--danger, #e74c3c);
  --support-warning: var(--warning, #fdcb6e);
  --support-radius-xs: 6px;
  --support-radius-sm: 8px;
  --support-radius-md: 12px;
  --support-radius-lg: 16px;
  --support-radius-xl: 22px;
  --support-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --support-shadow-sm: 0 3px 10px rgba(15,23,42,.06);
  --support-shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --support-shadow-lg: 0 18px 50px rgba(15,23,42,.12);
  --support-focus: 0 0 0 3px color-mix(in srgb,var(--support-primary) 20%,transparent);
  --support-readable: 760px;
  --support-font-body: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --support-font-display: Orbitron,Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --support-font-mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

/* Global readability */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  scroll-padding-top: 84px;
}

/* body{}/h1-h6{} base rules consolidated into section 31.1/31.2 below —
   this file previously had two separate, overlapping copies of both. */

button,input,select,textarea { font: inherit; }
strong,b{font-weight:700}

small,.muted,.help-text,.form-help,.field-help{color:var(--support-muted)}
code,pre,kbd{font-family:var(--support-font-mono)}
code{background:color-mix(in srgb,var(--support-primary) 7%,var(--support-bg));color:var(--support-primary-dark);padding:2px 6px;border-radius:5px}
::selection{background:color-mix(in srgb,var(--support-primary) 25%,transparent)}
.review-content,.news-content,.page-content,.article-content,.prose,.rich-content{max-width:var(--support-readable)}

/* Accessibility */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:0;box-shadow:var(--support-focus)}
:where(a,button):focus-visible{border-radius:var(--support-radius-sm)}
a{text-underline-offset:3px}
a:hover{text-decoration-thickness:1.5px}

/* Layout */
.container{width:min(100%,var(--container,1200px))}
.layout-wrapper{align-items:start}
.main-content{min-width:0}
.section{position:relative}
.section--alt{border-top:1px solid color-mix(in srgb,var(--support-border) 55%,transparent);border-bottom:1px solid color-mix(in srgb,var(--support-border) 45%,transparent)}
.section-header{gap:20px}
.section-header .link{white-space:nowrap}

/* Header — consolidated. This file previously had two separate
   .site-header sections (this one, and one further down commented
   "Modern navbar") which duplicated/partially overrode each other;
   the later one's active-link treatment silently killed this one's
   underline effect via display:none. Merged into one. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, color-mix(in srgb, var(--support-dark) 98%, #000 2%), var(--support-dark));
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 8px 30px rgba(5,8,20,.2), inset 0 -1px 0 rgba(255,255,255,.025);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.header-inner{position:relative;min-height:68px;height:auto;padding-top:var(--space-2);padding-bottom:var(--space-2);gap:var(--space-3)}
.logo{min-width:0}
.logo-icon{filter:drop-shadow(0 5px 14px color-mix(in srgb, var(--theme-accent, #A855F7) 70%, transparent));transition:transform .22s ease}
.logo:hover .logo-icon{transform:translateY(-1px) scale(1.03)}
.logo-text{font-family:var(--support-font-display);font-size:clamp(1rem,1.8vw,1.22rem);letter-spacing:.015em;line-height:1;text-shadow:0 2px 12px color-mix(in srgb, var(--theme-accent, #A855F7) 60%, transparent)}

.main-nav{align-items:center;gap:5px}
.main-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 11px;border-radius:9px;color:rgba(255,255,255,.78);font-size:13px;font-weight:650;letter-spacing:.005em;text-decoration:none;transition:color var(--support-fast, .14s) ease,background var(--support-fast, .14s) ease,transform var(--support-fast, .14s) ease}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,.075);transform:translateY(-1px)}
.main-nav a.active,.main-nav a[aria-current="page"]{
  color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--support-primary) 28%, transparent), color-mix(in srgb, var(--support-primary) 10%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--support-primary) 45%, white 20%), 0 5px 15px rgba(0,0,0,.1);
}
.main-nav a.active::before,.main-nav a[aria-current="page"]::before{
  content:"";
  width:5px;
  height:5px;
  margin-right:7px;
  border-radius:50%;
  background: color-mix(in srgb, var(--support-primary) 55%, white);
  box-shadow: 0 0 10px color-mix(in srgb, var(--support-primary) 55%, white 20%);
}

.header-actions{gap:var(--space-2)}

.search-box input{min-height:40px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.065);color:#fff;border-radius:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:width .22s,border-color .14s,background .14s,box-shadow .14s}
.search-box input::placeholder{color:rgba(255,255,255,.52)}
.search-box input:focus{width:240px;outline:none;border-color:color-mix(in srgb,var(--support-primary) 70%,white 15%);background:rgba(255,255,255,.095);box-shadow:0 0 0 3px color-mix(in srgb, var(--support-primary) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.05)}
.search-results{margin-top:8px;overflow:hidden;border:1px solid var(--support-border);box-shadow:var(--support-shadow-lg)}
.search-result-item{min-height:54px;transition:background .14s}

.nav-toggle{min-width:44px;min-height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.055);color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.12)}
.nav-toggle:hover,.nav-toggle:focus-visible{background:color-mix(in srgb, var(--support-primary) 18%, transparent);border-color:color-mix(in srgb, var(--support-primary) 30%, white 20%)}

@media (max-width:1024px){.main-nav a{padding-left:9px;padding-right:9px;font-size:12.5px}.header-actions{gap:7px}}
@media (max-width:768px){
 .site-header{background:linear-gradient(180deg,rgba(20,22,42,.99),rgba(26,26,46,.97))}
 .header-inner{min-height:62px}
 .main-nav{border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(18,20,38,.99),rgba(26,26,46,.99));box-shadow:0 16px 35px rgba(0,0,0,.2)}
 .main-nav a{min-height:46px;justify-content:flex-start;padding:10px 14px;border-radius:8px}
 .main-nav a:hover,.main-nav a.active,.main-nav a[aria-current="page"]{transform:none}
 .main-nav a.active,.main-nav a[aria-current="page"]{background:linear-gradient(90deg, color-mix(in srgb, var(--support-primary) 23%, transparent), color-mix(in srgb, var(--support-primary) 6%, transparent))}
 .main-nav a.active::before,.main-nav a[aria-current="page"]::before{width:6px;height:22px;margin-right:9px;border-radius:5px}
}


/* Buttons */
.btn,button.btn{min-height:40px;border:1px solid transparent;border-radius:10px;font-weight:700;letter-spacing:-.005em;box-shadow:var(--support-shadow-xs);transition:transform .14s,box-shadow .22s,background .14s,border-color .14s,color .14s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--support-shadow-sm)}
.btn:active{transform:translateY(0);box-shadow:var(--support-shadow-xs)}
.btn--primary{background:linear-gradient(135deg,var(--support-primary),color-mix(in srgb,var(--support-primary) 82%,#8b5cf6));border-color:color-mix(in srgb,var(--support-primary) 80%,#000 20%);box-shadow:0 6px 18px color-mix(in srgb,var(--support-primary) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}
.btn--primary:hover{background:linear-gradient(135deg,var(--support-primary-dark),var(--support-primary));box-shadow:0 9px 24px color-mix(in srgb,var(--support-primary) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}
.btn--secondary{border-color:rgba(255,255,255,.08);box-shadow:var(--support-shadow-sm)}
.btn--ghost{background:var(--support-surface);border:1px solid var(--support-border)}
.btn--ghost:hover{background:color-mix(in srgb,var(--support-primary) 5%,var(--support-surface));border-color:color-mix(in srgb,var(--support-primary) 40%,var(--support-border))}
.btn--danger{box-shadow:0 6px 18px rgba(231,76,60,.14)}
.btn--lg{min-height:48px;border-radius:12px}
.btn--sm{min-height:34px;border-radius:8px}
.btn--block{display:flex}
.btn-group,.button-group,.form-actions,.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* Hero */
.hero{min-height:360px;display:flex;align-items:center;padding:clamp(64px,9vw,104px) 0;background:radial-gradient(circle at 18% 15%,rgba(108,92,231,.22),transparent 34%),radial-gradient(circle at 82% 30%,rgba(168,85,247,.16),transparent 30%),linear-gradient(135deg,var(--support-dark),var(--support-dark-2))}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
.hero h1{font-size:clamp(2rem,5vw,3.35rem);max-width:900px;letter-spacing:-.04em;text-shadow:0 8px 30px rgba(0,0,0,.22)}
.hero p{max-width:760px;margin-left:auto;margin-right:auto;color:rgba(255,255,255,.78);font-size:clamp(1rem,2vw,1.16rem);line-height:1.75}
.hero-content--left p,.hero-content--right p{margin-left:0;margin-right:0}
.hero-actions{flex-wrap:wrap}
.hero-badge{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.08);padding:7px 12px;border-radius:999px;backdrop-filter:blur(8px)}

/* Public cards */.news-grid,
.features-grid {align-items:stretch}.news-card,
.feature-card,
.sidebar-block,
.info-block,
.info-card,
.pros-cons-block,
.auth-card,
.review-summary {border:1px solid color-mix(in srgb,var(--support-border) 80%,transparent)}.news-card {position:relative;isolation:isolate}
.bonus-title{letter-spacing:.07em;font-weight:700}.bonus-value{font-size:17px}
.news-card{border-radius:var(--support-radius-lg);padding:22px;box-shadow:var(--support-shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--support-shadow-md);border-color:color-mix(in srgb,var(--support-primary) 22%,var(--support-border))}
.news-card h3{line-height:1.3}.news-card p{line-height:1.65}
.feature-card{border-radius:var(--support-radius-lg);background:linear-gradient(180deg,var(--support-surface),color-mix(in srgb,var(--support-bg) 55%,var(--support-surface)));box-shadow:var(--support-shadow-xs)}
.feature-card:hover{box-shadow:var(--support-shadow-md);transform:translateY(-3px)}
.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:16px;background:color-mix(in srgb,var(--support-primary) 9%,var(--support-surface));color:var(--support-primary)}

/* Sidebar / chips */
.sidebar{gap:22px}.sidebar-block{border-radius:var(--support-radius-lg);padding:22px;box-shadow:var(--support-shadow-sm)}
.sidebar-block h3{font-weight:750}.sidebar-casino{min-height:52px;padding:9px;border:1px solid transparent}.sidebar-casino:hover{border-color:var(--support-border);background:var(--support-bg)}
.sidebar-casino img{width:36px;height:36px;padding:2px;background:var(--support-surface);border:1px solid var(--support-border)}
.chip,.feature-tag{border-radius:999px;font-weight:600;transition:background .14s,color .14s,border-color .14s,transform .14s}
.chip:hover,.feature-tag:hover{transform:translateY(-1px)}
.status-badge,.badge,.tag,.pill{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.1;white-space:nowrap}
.status-published{background:color-mix(in srgb,var(--support-success) 11%,var(--support-surface));color:color-mix(in srgb,var(--support-success) 80%,#064e3b);border:1px solid color-mix(in srgb,var(--support-success) 22%,transparent)}
.status-draft{background:color-mix(in srgb,var(--support-warning) 18%,var(--support-surface));color:#8a5b00;border:1px solid color-mix(in srgb,var(--support-warning) 35%,transparent)}

/* Detail / editorial */
.casino-hero{border-radius:var(--support-radius-xl);border:1px solid var(--support-border);box-shadow:var(--support-shadow-md);padding:clamp(22px,4vw,34px)}
.casino-hero__logo{width:88px;height:88px;padding:8px;background:#fff;border:1px solid var(--support-border);box-shadow:var(--support-shadow-sm)}
.casino-hero__left{min-width:0}.casino-hero__right{min-width:220px}
.bonus-box{min-width:190px;border:1px solid color-mix(in srgb,var(--support-primary) 16%,var(--support-border));background:linear-gradient(135deg,color-mix(in srgb,var(--support-primary) 7%,var(--support-bg)),var(--support-bg));box-shadow:var(--support-shadow-xs)}
.bonus-amount{font-size:clamp(1.35rem,3vw,1.75rem)}
.info-block,.info-card,.pros-cons-block{border-radius:var(--support-radius-lg);box-shadow:var(--support-shadow-sm)}
.info-block{padding:clamp(20px,3vw,28px)}.info-block h2{font-size:clamp(1.35rem,2vw,1.7rem)}.info-card{padding:22px}.info-card dl{row-gap:10px}.info-card dt{font-weight:500}.info-card dd{color:var(--support-text)}
.review-detail,.news-detail{padding:clamp(28px,5vw,54px) 0}.review-header h1,.news-header h1{font-size:clamp(2rem,4vw,2.7rem);letter-spacing:-.035em}
.review-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}.review-content,.news-content{font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.82}
.review-content h2,.news-content h2{margin-top:2em;margin-bottom:.7em;font-size:clamp(1.35rem,2.5vw,1.8rem)}
.review-content h3,.news-content h3{margin-top:1.7em;margin-bottom:.6em}
.review-content img,.news-content img,.page-content img,.rich-content img{max-width:100%;height:auto;border-radius:12px;box-shadow:var(--support-shadow-sm)}
.review-content blockquote,.news-content blockquote,.page-content blockquote,.rich-content blockquote{margin:1.5rem 0;padding:16px 20px;border-left:4px solid var(--support-primary);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--support-primary) 5%,var(--support-bg))}
.review-pros-cons{align-items:stretch}.pros-cons-block{transition:transform .22s,box-shadow .22s}.pros-cons-block:hover{transform:translateY(-2px);box-shadow:var(--support-shadow-md)}

/* Tables */
.table-responsive,.table-wrap,.table-container,.admin-table-wrapper,.data-table-wrapper,.overflow-table{width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;border-radius:var(--support-radius-md)}
table{border-spacing:0}
.admin-table{border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--support-border);border-radius:var(--support-radius-md);background:var(--support-surface);box-shadow:var(--support-shadow-xs)}
.admin-table th,.mini-table th{background:linear-gradient(180deg,color-mix(in srgb,var(--support-bg) 82%,var(--support-surface)),var(--support-bg));color:var(--support-muted);font-size:11px;font-weight:800;letter-spacing:.065em;padding:13px 15px;white-space:nowrap;border-bottom:1px solid var(--support-border)}
.admin-table td,.mini-table td{padding:14px 15px;vertical-align:middle;border-bottom:1px solid var(--support-border)}
.admin-table tbody tr:last-child td,.mini-table tbody tr:last-child td{border-bottom:0}.admin-table tbody tr{transition:background .14s}.admin-table tbody tr:hover{background:color-mix(in srgb,var(--support-primary) 3.5%,var(--support-surface))}.admin-table td:first-child{font-weight:600}
.admin-table .table-actions{align-items:center;flex-wrap:wrap;min-width:max-content}
.mini-table{border-collapse:separate;border-spacing:0;border:1px solid var(--support-border);border-radius:var(--support-radius-md);overflow:hidden}.mini-table th,.mini-table td{padding:11px 13px}
.comparison-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--support-border);border-radius:var(--support-radius-md);overflow:hidden;box-shadow:var(--support-shadow-sm)}
.comparison-table th{background:var(--support-dark);color:#fff;font-weight:750;padding:14px;text-align:left}.comparison-table td{padding:14px;border-top:1px solid var(--support-border);vertical-align:top}
.comparison-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--support-bg) 60%,var(--support-surface))}
.review-content table,.news-content table,.page-content table,.rich-content table{width:100%;margin:1.5rem 0;border-collapse:separate;border-spacing:0;border:1px solid var(--support-border);border-radius:12px;overflow:hidden}
.review-content th,.news-content th,.page-content th,.rich-content th{background:var(--support-bg);font-weight:750}
.review-content th,.review-content td,.news-content th,.news-content td,.page-content th,.page-content td,.rich-content th,.rich-content td{padding:12px 14px;border-bottom:1px solid var(--support-border);border-right:1px solid var(--support-border);vertical-align:top}

/* Admin */
.admin-wrapper{grid-template-columns:248px minmax(0,1fr);background:linear-gradient(90deg,var(--support-dark) 0 248px,var(--support-bg) 248px)}
.admin-nav{position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;scrollbar-width:thin;padding:16px 10px;gap:3px;border-right:1px solid rgba(255,255,255,.06);box-shadow:8px 0 30px rgba(15,23,42,.08)}
.admin-nav a{display:flex;align-items:center;min-height:42px;border-radius:9px;margin:0;padding:9px 13px;color:rgba(255,255,255,.68);font-size:13px;font-weight:600;transition:background .14s,color .14s,transform .14s}
.admin-nav a:hover{transform:translateX(2px);background:rgba(255,255,255,.065);color:#fff}.admin-nav a.active,.admin-nav a[aria-current="page"]{color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--support-primary) 95%,#fff 5%),var(--support-primary-dark));box-shadow:0 6px 18px rgba(108,92,231,.20),inset 0 1px 0 rgba(255,255,255,.14)}
.admin-logout{border-top:1px solid rgba(255,255,255,.07);padding-top:13px!important;margin-top:10px!important}
.admin-content{min-width:0;padding:clamp(22px,3vw,34px);background:radial-gradient(circle at 100% 0%,rgba(108,92,231,.035),transparent 32%),var(--support-bg)}
.admin-content h1{font-size:clamp(1.55rem,2.5vw,2rem);letter-spacing:-.035em}.admin-header{min-height:48px;gap:16px}.admin-header h1{line-height:1.15}
.stats-grid{gap:16px}.stat-card{position:relative;overflow:hidden;border:1px solid var(--support-border);border-radius:var(--support-radius-lg);padding:22px;text-align:left;box-shadow:var(--support-shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s}
.stat-card::after{content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border-radius:50%;background:color-mix(in srgb,var(--support-primary) 7%,transparent);pointer-events:none}
.stat-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--support-primary) 20%,var(--support-border));box-shadow:var(--support-shadow-md)}
.stat-icon{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:color-mix(in srgb,var(--support-primary) 9%,var(--support-bg));margin-bottom:13px;font-size:23px}
.stat-value{position:relative;z-index:1;font-size:clamp(1.65rem,3vw,2.1rem);line-height:1.1;letter-spacing:-.035em}.stat-label{position:relative;z-index:1;font-size:13px;font-weight:600;color:var(--support-muted)}
.admin-section{border:1px solid var(--support-border);border-radius:var(--support-radius-lg);padding:clamp(20px,2.5vw,28px);box-shadow:var(--support-shadow-sm)}
.admin-section h2{font-size:18px;letter-spacing:-.02em}
.dashboard-grid,.admin-grid,.card-grid,.content-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.dashboard-card,.admin-card{grid-column:span 4;min-width:0;background:var(--support-surface);border:1px solid var(--support-border);border-radius:var(--support-radius-lg);padding:22px;box-shadow:var(--support-shadow-sm)}
.dashboard-card:hover,.admin-card:hover{box-shadow:var(--support-shadow-md)}

/* Forms */
.admin-form,.auth-card{border:1px solid var(--support-border);border-radius:var(--support-radius-lg)}
.admin-form{max-width:900px;padding:clamp(22px,3vw,32px);box-shadow:var(--support-shadow-sm)}
.form-row,.form-row-3{align-items:start}.form-group{min-width:0;gap:7px}
.admin-form label,.form-group label{color:var(--support-text);font-size:13px;font-weight:700;line-height:1.35}
.admin-form input,.admin-form select,.admin-form textarea,.form-group input,.form-group select,.form-group textarea{min-height:42px;color:var(--support-text);background:var(--support-surface);border:1px solid var(--support-border);border-radius:9px;padding:10px 13px;line-height:1.45;box-shadow:inset 0 1px 2px rgba(15,23,42,.025);transition:border-color .14s,box-shadow .14s,background .14s}
.admin-form textarea,.form-group textarea{min-height:130px}.admin-form input:hover,.admin-form select:hover,.admin-form textarea:hover,.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:color-mix(in srgb,var(--support-primary) 25%,var(--support-border))}
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--support-primary);box-shadow:var(--support-focus),inset 0 1px 2px rgba(15,23,42,.025)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--support-muted) 72%,transparent)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--support-primary)}
input[type="file"]{min-height:44px;padding:8px}input[type="file"]::file-selector-button{margin-right:10px;padding:8px 12px;border:1px solid var(--support-border);border-radius:7px;background:var(--support-bg);color:var(--support-text);font-weight:650;cursor:pointer}
fieldset{min-width:0;margin:0 0 20px;padding:20px;border:1px solid var(--support-border);border-radius:var(--support-radius-md)}legend{padding:0 8px;font-weight:750}
.form-actions{margin-top:20px;padding-top:18px;border-top:1px solid var(--support-border)}
.alert{border:1px solid transparent;box-shadow:var(--support-shadow-xs)}
.alert--error{background:color-mix(in srgb,var(--support-danger) 8%,var(--support-surface));border-color:color-mix(in srgb,var(--support-danger) 22%,var(--support-border))}
.alert--success{background:color-mix(in srgb,var(--support-success) 8%,var(--support-surface));border-color:color-mix(in srgb,var(--support-success) 22%,var(--support-border))}

/* Auth */
.auth-page{min-height:calc(100vh - 160px);background:radial-gradient(circle at 50% 0%,rgba(108,92,231,.09),transparent 40%)}
.auth-card{padding:clamp(26px,5vw,42px);box-shadow:var(--support-shadow-lg)}.auth-card h1{font-size:clamp(1.6rem,3vw,2rem);letter-spacing:-.035em}.auth-form{gap:18px}.auth-footer{color:var(--support-muted)}

/* Toolbars / pagination */
.toolbar,.filters,.filter-bar,.list-toolbar,.admin-toolbar,.search-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}.toolbar .spacer,.filters .spacer,.admin-toolbar .spacer{flex:1 1 auto}
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;margin:28px 0}.pagination a,.pagination button,.pagination .page{display:inline-flex;min-width:38px;min-height:38px;align-items:center;justify-content:center;padding:7px 11px;border:1px solid var(--support-border);border-radius:9px;background:var(--support-surface);color:var(--support-text);font-weight:650}.pagination a:hover,.pagination button:hover,.pagination .active{border-color:var(--support-primary);background:color-mix(in srgb,var(--support-primary) 8%,var(--support-surface));color:var(--support-primary-dark);text-decoration:none}

/* Modals / dialogs */
.modal,.modal-overlay,.dialog-overlay,.drawer-overlay{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal-content,.modal>div,.dialog,.drawer,[role="dialog"]{border:1px solid var(--support-border);border-radius:var(--support-radius-lg);box-shadow:var(--support-shadow-lg)}
[role="dialog"]{background:var(--support-surface)}
.modal-header,.dialog-header,.drawer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--support-border)}
.modal-footer,.dialog-footer,.drawer-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;padding-top:16px;border-top:1px solid var(--support-border)}

/* Media */
.media-grid,.media-library-grid,.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.media-item,.media-card,.gallery-item{position:relative;min-width:0;overflow:hidden;border:1px solid var(--support-border);border-radius:12px;background:var(--support-surface);box-shadow:var(--support-shadow-xs);transition:transform .22s,box-shadow .22s,border-color .22s}.media-item:hover,.media-card:hover,.gallery-item:hover{transform:translateY(-2px);box-shadow:var(--support-shadow-md);border-color:color-mix(in srgb,var(--support-primary) 25%,var(--support-border))}.media-item img,.media-card img,.gallery-item img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.media-meta{padding:10px 12px;font-size:12px;color:var(--support-muted)}
.upload-zone,.dropzone,.media-dropzone{border:1.5px dashed color-mix(in srgb,var(--support-primary) 35%,var(--support-border));border-radius:var(--support-radius-lg);background:color-mix(in srgb,var(--support-primary) 3%,var(--support-surface));padding:28px;text-align:center;transition:border-color .14s,background .14s}.upload-zone:hover,.dropzone:hover,.media-dropzone:hover,.upload-zone.is-dragover,.dropzone.is-dragover,.media-dropzone.is-dragover{border-color:var(--support-primary);background:color-mix(in srgb,var(--support-primary) 7%,var(--support-surface))}

/* TinyMCE */
.tox.tox-tinymce,.tox.tox-tinymce-aux{border-radius:12px!important}.tox.tox-tinymce{border:1px solid var(--support-border)!important;box-shadow:var(--support-shadow-xs)!important;overflow:hidden}.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary{background:var(--support-bg)!important}.tox .tox-edit-area__iframe{background:#fff}

/* Component engine / content blocks */
.component,.page-component,.content-component,.review-block,.review-blocks>* ,.content-block{min-width:0}.component-card,.content-card,.review-block-card{border:1px solid var(--support-border);border-radius:var(--support-radius-lg);background:var(--support-surface);box-shadow:var(--support-shadow-sm)}.component-card:hover,.content-card:hover{box-shadow:var(--support-shadow-md)}
.component-grid,.content-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}

/* AI / code */
pre,.code-block,.json-viewer,.schema-preview{overflow:auto;max-width:100%;padding:16px;border:1px solid var(--support-border);border-radius:10px;background:#0f172a;color:#e2e8f0;font-size:12px;line-height:1.65}
.ai-response,.ai-result,.ai-panel,.ai-card{border:1px solid color-mix(in srgb,var(--support-primary) 18%,var(--support-border));border-radius:var(--support-radius-lg);background:linear-gradient(145deg,color-mix(in srgb,var(--support-primary) 4%,var(--support-surface)),var(--support-surface));box-shadow:var(--support-shadow-sm)}
.ai-message,.chat-message{max-width:min(88%,760px);padding:12px 15px;border-radius:14px;line-height:1.65}.chat-message.user{margin-left:auto;background:color-mix(in srgb,var(--support-primary) 9%,var(--support-surface))}.chat-message.assistant{margin-right:auto;background:var(--support-surface);border:1px solid var(--support-border)}

/* Empty/loading */
.empty-state,.no-results,.empty-message{padding:44px 24px;border:1px dashed var(--support-border);border-radius:var(--support-radius-lg);background:color-mix(in srgb,var(--support-bg) 65%,var(--support-surface));color:var(--support-muted);text-align:center}
.loading,.skeleton{background:linear-gradient(90deg,color-mix(in srgb,var(--support-border) 45%,var(--support-surface)),color-mix(in srgb,var(--support-border) 15%,var(--support-surface)),color-mix(in srgb,var(--support-border) 45%,var(--support-surface)));background-size:200% 100%;animation:support-shimmer 1.35s linear infinite}
@keyframes support-shimmer{to{background-position:-200% 0}}

/* Footer */
.site-footer{position:relative;overflow:hidden;margin-top:30px;background:radial-gradient(circle at 10% 0%,color-mix(in srgb, var(--support-primary) 13%, transparent),transparent 28%),radial-gradient(circle at 90% 30%,color-mix(in srgb, var(--theme-accent, #A855F7) 8%, transparent),transparent 26%),linear-gradient(180deg,var(--support-dark),#111322);border-top:1px solid rgba(255,255,255,.06)}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.site-footer .container{position:relative;z-index:1}.footer-compliance-box{padding-top:34px;border-bottom-color:rgba(255,255,255,.09)}
.compliance-logos img{max-width:120px;max-height:44px;object-fit:contain;filter:grayscale(.1)}.rg-text{color:rgba(255,255,255,.64);font-size:13px}.rg-text a{color:#b9aaff}.disclaimer-text{color:rgba(255,255,255,.43);font-size:11.5px}
.footer-grid{position:relative;gap:clamp(22px,4vw,44px);padding-top:34px;padding-bottom:34px;border-bottom-color:rgba(255,255,255,.09)}.footer-col h4{font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.92)}.footer-col li{margin-bottom:9px}.footer-col a{display:inline-block;color:rgba(255,255,255,.60);line-height:1.45;transition:color .14s,transform .14s}.footer-col a:hover{color:#fff;transform:translateX(2px)}
.trustpilot-review-box{padding:26px 0 18px}.trustpilot-review-btn{border-radius:999px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.11);backdrop-filter:blur(8px)}.footer-bottom{color:rgba(255,255,255,.52);font-size:12px}

/* Breadcrumbs */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:30px;color:var(--support-muted);font-size:12px}.breadcrumbs a{color:var(--support-muted);font-weight:550}.breadcrumbs a:hover{color:var(--support-primary)}

/* Responsive */
@media (max-width:1100px){
  .admin-wrapper{grid-template-columns:220px minmax(0,1fr);background:linear-gradient(90deg,var(--support-dark) 0 220px,var(--support-bg) 220px)}
  .dashboard-card,.admin-card{grid-column:span 6}
}
@media (max-width:968px){.layout-wrapper,.casino-body,.casino-columns{gap:22px}.casino-hero__right{align-items:flex-start}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  body{font-size:15px}.container{padding-left:16px;padding-right:16px}.header-inner{gap:10px}.logo-text{font-size:1rem}.search-box{display:none}
  .hero{min-height:330px;padding:58px 0}.hero-actions{align-items:stretch}.hero-actions .btn{width:100%}.section{padding:38px 0}.section-header{align-items:flex-start}.section-header h2{font-size:23px}.news-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}.casino-hero{padding:20px}.casino-hero__left,.casino-hero__right{width:100%}.bonus-box{width:100%}.info-card dl{grid-template-columns:1fr}.info-card dd{text-align:left}.review-pros-cons{grid-template-columns:1fr}
  .admin-wrapper{display:block;background:var(--support-bg)}.admin-nav{position:sticky;top:64px;z-index:90;height:auto;flex-direction:row;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 22px rgba(15,23,42,.14);scrollbar-width:thin}.admin-nav a{flex:0 0 auto;white-space:nowrap;min-height:40px}.admin-logout{margin-top:0!important;padding-top:9px!important;border-top:0;border-left:1px solid rgba(255,255,255,.08)}
  .admin-content{padding:20px 16px}.admin-header{align-items:flex-start;flex-wrap:wrap}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid,.admin-grid,.card-grid,.content-grid{grid-template-columns:1fr}.dashboard-card,.admin-card{grid-column:auto}.form-row,.form-row-3{grid-template-columns:1fr}.admin-form{max-width:none;padding:20px}.admin-table{min-width:720px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.btn{min-height:44px}.btn--sm{min-height:36px}.table-actions .btn{min-height:36px}
}
@media (max-width:520px){
  .stats-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:26px}.auth-card{padding:24px 18px;border-radius:14px}.review-header h1,.news-header h1{font-size:1.8rem}.review-content,.news-content{font-size:15.5px;line-height:1.78}.admin-content{padding:16px 12px}.admin-section{padding:18px 15px;border-radius:14px}.admin-form{padding:18px 15px}
}
@media (max-width:380px){.logo-text{display:none}.hero{padding:48px 0}.hero h1{font-size:1.8rem}}

/* Existing mobile bottom navigation: visual-only enhancement */
@media (max-width:768px){
  .mobile-bottom-nav{background:linear-gradient(180deg,rgba(26,26,46,.94),rgba(15,18,34,.98));border-top-color:rgba(255,255,255,.09);box-shadow:0 -10px 30px rgba(15,23,42,.18);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
  .mobile-nav-item{min-height:44px;border-radius:10px}.mobile-nav-item.active{background:rgba(108,92,231,.12);color:#b9aaff}
}

/* Print */
@media print{.site-header,
.admin-nav,
.mobile-bottom-nav,
.nav-toggle,
.header-actions,
.site-footer,
.btn {display:none!important}
  body{background:#fff;color:#000}.layout-wrapper,.admin-wrapper,.casino-body,.casino-columns{display:block;max-width:none;margin:0;padding:0}.admin-content{padding:0;background:#fff}.news-card,
.info-block,
.info-card,
.admin-section,
.admin-table {box-shadow:none!important;break-inside:avoid}a{color:#000;text-decoration:underline}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Safe utilities */
.text-muted,.muted{color:var(--support-muted)}.text-primary{color:var(--support-primary)}.text-success{color:var(--support-success)}.text-danger{color:var(--support-danger)}.text-warning{color:#9a6700}
.surface{background:var(--support-surface);border:1px solid var(--support-border);border-radius:var(--support-radius-lg);box-shadow:var(--support-shadow-sm)}
.surface-flat{background:var(--support-surface);border:1px solid var(--support-border);border-radius:var(--support-radius-md)}
.stack{display:flex;flex-direction:column;gap:16px}.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.center{display:grid;place-items:center}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* High-clarity typography on normal/light surfaces.
   Fix: the ':where(' opener below was missing its closing paren
   before '{', making the whole rule invalid — browsers silently
   dropped it. Its intended effect (theme-aware text color) was
   masked by a second, valid rule that used a hardcoded hex instead.
   Merged into one valid, theme-aware rule. */
:where(.main-content,
.page-content,
.review-content,
.news-content,
.casino-page,
.casino-detail,
.admin-content,
.admin-section,
.admin-form,
.auth-card,
.info-block,
.info-card,
.sidebar-block,
.feature-card,
.news-card,
.text-muted,
small,
.help-text,
.form-help,
.field-help) {color:var(--support-text, #526174)}

/* Sharp readable text on dark surfaces. */
:where(.site-header,.site-footer,.hero,.admin-nav,.mobile-bottom-nav){color:rgba(255,255,255,.94)}
/* .site-footer text-color rules (p/li/a/footer-col h4 etc.) removed
   from here — section 31.18 "FOOTER — MAXIMUM READABILITY" further
   down uses higher-specificity selectors (.site-footer p vs this
   block's .site-footer :where(p) ) and always won anyway; this was
   dead weight that never actually rendered. */


/* Premium breadcrumbs: visible on light and dark backgrounds. */
.breadcrumbs{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:fit-content;max-width:100%;min-height:34px;margin:0 0 18px;padding:7px 12px;border:1px solid #d8dee8;border-radius:10px;background:rgba(255,255,255,.96);color:#334155;box-shadow:0 3px 12px rgba(15,23,42,.08);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:650;line-height:1.35;letter-spacing:.005em;text-shadow:none;backdrop-filter:blur(10px) saturate(125%);-webkit-backdrop-filter:blur(10px) saturate(125%)}
.breadcrumbs a{color:#475569;font-weight:650;text-decoration:none}
.breadcrumbs a:hover,.breadcrumbs a:focus-visible{color:var(--support-primary-dark);text-decoration:none}
.breadcrumbs>*+*::before{content:"›";display:inline-block;margin-right:6px;color:#64748b;font-size:16px;font-weight:750;line-height:.8;vertical-align:-1px}
.breadcrumbs [aria-current="page"],.breadcrumbs .current,.breadcrumbs .active{color:#172033;font-weight:750}

/* Breadcrumb glass mode on dark/hero surfaces. */
.hero .breadcrumbs,.casino-hero .breadcrumbs,.dark .breadcrumbs,.bg-dark .breadcrumbs,[data-theme="dark"] .breadcrumbs{border-color:rgba(255,255,255,.17);background:rgba(15,23,42,.78);color:rgba(255,255,255,.94);box-shadow:0 7px 22px rgba(0,0,0,.2)}
.hero .breadcrumbs a,.casino-hero .breadcrumbs a,.dark .breadcrumbs a,.bg-dark .breadcrumbs a,[data-theme="dark"] .breadcrumbs a{color:rgba(255,255,255,.82)}
.hero .breadcrumbs a:hover,.hero .breadcrumbs a:focus-visible,.casino-hero .breadcrumbs a:hover,.casino-hero .breadcrumbs a:focus-visible,.dark .breadcrumbs a:hover,.dark .breadcrumbs a:focus-visible,.bg-dark .breadcrumbs a:hover,.bg-dark .breadcrumbs a:focus-visible,[data-theme="dark"] .breadcrumbs a:hover,[data-theme="dark"] .breadcrumbs a:focus-visible{color:#fff}
.hero .breadcrumbs>*+*::before,.casino-hero .breadcrumbs>*+*::before,.dark .breadcrumbs>*+*::before,.bg-dark .breadcrumbs>*+*::before,[data-theme="dark"] .breadcrumbs>*+*::before{color:rgba(255,255,255,.55)}

/* .site-header/.header-inner/.main-nav/.nav-toggle/.search-box for
   this breakpoint set are now part of the single consolidated header
   section near the top of this file (see "Header — consolidated"). */
@media (max-width:768px){
 .breadcrumbs{width:100%;max-width:100%;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:none}
 .breadcrumbs::-webkit-scrollbar{display:none}
}
@media (max-width:520px){.breadcrumbs{margin-bottom:14px;padding:7px 10px;font-size:12px}.site-footer{margin-top:20px}}

/* --------------------------------------------------------------------------
   31.1 CORE TYPOGRAPHY
   -------------------------------------------------------------------------- */

:root {
  /* These previously loaded last and won the cascade for body text
     color with fully hardcoded hex — bypassing --support-text (above)
     and the theme system entirely. Now derived from the same
     theme-aware chain as everything else, original values kept only
     as the fallback. */
  --text-strong: var(--dark, #111827);
  --text-body: var(--dark, #263244);
  --text-secondary: var(--gray, #526174);
  --text-muted-strong: var(--gray, #64748b);

  --dark-text-strong: #ffffff;
  --dark-text-body: rgba(255,255,255,.91);
  --dark-text-secondary: rgba(255,255,255,.78);
  --dark-text-muted: rgba(255,255,255,.68);

  --text-outline-light: rgba(255,255,255,.08);
  --text-outline-dark: rgba(15,23,42,.08);
}

body {
  font-family: var(--support-font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* --------------------------------------------------------------------------
   31.2 ALL IMPORTANT HEADINGS
   (Consolidated — this file previously had two separate h1..h6 blocks,
   one near the top of the file and this one; the sizes below were
   missing from both, so bare headings had no controlled font-size at
   all and fell back to browser UA defaults.)
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  line-height: 1.2;
  letter-spacing: -.025em;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); font-weight: 780; }
h3 { font-size: var(--text-2xl); font-weight: 740; }
h4 { font-size: var(--text-xl); font-weight: 700; }
h5,
h6 { font-size: var(--text-lg); font-weight: 700; }


/* --------------------------------------------------------------------------
   31.3 SECTION TITLES / SUBTITLES
   -------------------------------------------------------------------------- */

.section-header h1,
.section-header h2,
.section-header h3,
.section-title,
.section-heading {
  color: #111827;
  font-weight: 800;
  letter-spacing: -.03em;
}

.section-subtitle,
.section-description,
.section-header p,
.section-intro,
.section-lead {
  color: #4b5a6e;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -.005em;
}

.section-subtitle strong,
.section-description strong,
.section-header p strong,
.section-intro strong,
.section-lead strong {
  color: #263244;
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   31.4 HERO TYPOGRAPHY
   -------------------------------------------------------------------------- */

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero .hero-title {
  color: #ffffff;
  font-weight: 850;
  letter-spacing: -.035em;
  text-shadow:
    0 2px 3px rgba(0,0,0,.30),
    0 8px 24px rgba(0,0,0,.20);
}

.hero p,
.hero .hero-subtitle,
.hero .hero-description,
.hero .hero-lead {
  color: rgba(255,255,255,.92);
  font-weight: 500;
  line-height: 1.72;
  text-shadow:
    0 1px 2px rgba(0,0,0,.32),
    0 4px 16px rgba(0,0,0,.15);
}

.hero .hero-badge,
.hero .badge,
.hero .tag,
.hero .chip {
  color: #ffffff;
  font-weight: 750;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}


/* --------------------------------------------------------------------------
   31.5 HERO / DARK CONTENT — FORCE HIGH CONTRAST
   -------------------------------------------------------------------------- */

.hero :where(
  h1,h2,h3,h4,h5,h6,
  p,li,span,strong,b,
  .title,.subtitle,.description,
  .meta,.date,.author
) {
  color: #ffffff;
}

.hero :where(
  .subtitle,
  .description,
  .meta,
  .date,
  .author,
  small
) {
  color: rgba(255,255,255,.84);
}


/* --------------------------------------------------------------------------
   31.6 DATES / AUTHORS / METADATA
   -------------------------------------------------------------------------- */

.date,
.dates,
.post-date,
.publish-date,
.published-date,
.created-date,
.updated-date,
.article-date,
.news-date,
.review-date,
.author,
.author-name,
.post-author,
.article-author,
.review-author,
.meta,
.metadata,
.post-meta,
.article-meta,
.review-meta,
.card-meta {
  color: #526174;
  font-weight: 600;
  line-height: 1.45;
}

.author,
.author-name,
.post-author,
.article-author,
.review-author {
  color: #334155;
  font-weight: 700;
}

.date,
.dates,
.post-date,
.publish-date,
.published-date,
.created-date,
.updated-date,
.article-date,
.news-date,
.review-date {
  color: #475569;
  font-weight: 600;
}

.meta strong,
.metadata strong,
.post-meta strong,
.article-meta strong,
.review-meta strong {
  color: #1f2937;
  font-weight: 750;
}


/* --------------------------------------------------------------------------
   31.7 PUBLIC CONTENT / ARTICLES / REVIEWS
   -------------------------------------------------------------------------- */

.review-content,
.news-content,
.page-content,
.article-content,
.rich-content {
  color: #263244;
}

.review-content p,
.news-content p,
.page-content p,
.article-content p,
.rich-content p {
  color: #263244;
}

.review-content li,
.news-content li,
.page-content li,
.article-content li,
.rich-content li {
  color: #263244;
}

.review-content h2,
.review-content h3,
.review-content h4,
.news-content h2,
.news-content h3,
.news-content h4,
.page-content h2,
.page-content h3,
.page-content h4,
.article-content h2,
.article-content h3,
.article-content h4,
.rich-content h2,
.rich-content h3,
.rich-content h4 {
  color: #111827;
  font-weight: 780;
}

.review-content strong,
.news-content strong,
.page-content strong,
.article-content strong,
.rich-content strong {
  color: #172033;
  font-weight: 750;
}

.review-content a,
.news-content a,
.page-content a,
.article-content a,
.rich-content a {
  color: var(--support-primary-dark);
  font-weight: 650;
  text-decoration-thickness: 1.5px;
}

/*
  Keep the card itself readable even when its background is customized by
  another component or theme.
*/h2,
h3,
h4,
h5,
h6,
p,
li,
span,
div,
strong,
b,
small,
label
) {
  text-rendering: optimizeLegibility;
}h2,
h3,
h4,
h5,
h6
) {
  color: #111827;
  font-weight: 780;
}.casino-name,
.card-title
) {
  color: #111827;
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.28;
}.casino-description,
.card-description,
.description
) {
  color: #3d4b5e;
  font-weight: 500;
  line-height: 1.58;
}.rating,
.rating-value,
.score
) {
  color: #172033;
  font-weight: 800;
}.meta,
.casino-meta,
small
) {
  color: #526174;
  font-weight: 600;
}.bonus-box,
.bonus
) {
  color: #263244;
}.bonus-label
) {
  color: #526174;
  font-weight: 750;
}.bonus-amount
) {
  color: #111827;
  font-weight: 850;
  letter-spacing: -.015em;
}h2,
h3,
h4,
h5,
h6,
.casino-name,
.card-title
),
h2,
h3,
h4,
h5,
h6,
.casino-name,
.card-title
),
h2,
h3,
h4,
h5,
h6,
.casino-name,
.card-title
) {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,.30);
}.description,
.casino-description),
.description,
.casino-description),
.description,
.casino-description) {
  color: rgba(255,255,255,.88);
}.casino-meta,
small),
.casino-meta,
small),
.casino-meta,
small) {
  color: rgba(255,255,255,.74);
}.bonus-label),
.bonus-label),
.bonus-label) {
  color: rgba(255,255,255,.78);
}.bonus-amount),
.bonus-amount),
.bonus-amount) {
  color: #ffffff;
}


/* --------------------------------------------------------------------------
   31.10 NEWS / ARTICLE CARDS
   -------------------------------------------------------------------------- */

.news-card,
.article-card {
  color: #263244;
}

.news-card h2,
.news-card h3,
.news-card h4,
.article-card h2,
.article-card h3,
.article-card h4 {
  color: #111827;
  font-weight: 800;
}

.news-card p,
.article-card p {
  color: #3d4b5e;
  font-weight: 500;
}

.news-card .date,
.news-card .author,
.news-card .meta,
.article-card .date,
.article-card .author,
.article-card .meta {
  color: #526174;
  font-weight: 650;
}


/* --------------------------------------------------------------------------
   31.11 FEATURE CARDS
   -------------------------------------------------------------------------- */

.feature-card h2,
.feature-card h3,
.feature-card h4 {
  color: #111827;
  font-weight: 800;
}

.feature-card p {
  color: #3d4b5e;
  font-weight: 500;
}

.feature-card .feature-icon {
  color: var(--support-primary-dark);
}


/* --------------------------------------------------------------------------
   31.12 SIDEBAR CONTENT
   -------------------------------------------------------------------------- */

.sidebar-block {
  color: #263244;
}

.sidebar-block h2,
.sidebar-block h3,
.sidebar-block h4 {
  color: #111827;
  font-weight: 800;
}

.sidebar-block p,
.sidebar-block li {
  color: #3d4b5e;
}

.sidebar-block .meta,
.sidebar-block small {
  color: #526174;
  font-weight: 600;
}

.sidebar-casino :where(
  h3,.casino-name,.title
) {
  color: #172033;
  font-weight: 750;
}

.sidebar-casino :where(
  p,.description,.meta,small
) {
  color: #526174;
}


/* --------------------------------------------------------------------------
   31.13 CASINO HERO / DETAIL PAGE
   -------------------------------------------------------------------------- */

.casino-hero {
  color: #263244;
}

.casino-hero h1,
.casino-hero h2,
.casino-hero h3 {
  color: #111827;
  font-weight: 820;
}

.casino-hero p {
  color: #3d4b5e;
}

.casino-hero .casino-meta,
.casino-hero .meta,
.casino-hero .date,
.casino-hero .author {
  color: #526174;
  font-weight: 650;
}

.casino-hero .bonus-amount,
.casino-hero .bonus-value {
  color: #111827;
  font-weight: 850;
}


/* --------------------------------------------------------------------------
   31.14 BADGES / TAGS / CHIPS
   -------------------------------------------------------------------------- */

.badge,
.tag,
.pill,
.chip,
.feature-tag,
.status-badge {
  font-weight: 750;
  letter-spacing: .005em;
  text-shadow: none;
}

.badge--light,
.tag--light,
.pill--light {
  color: #1f2937;
}

.badge--dark,
.tag--dark,
.pill--dark {
  color: #ffffff;
}


/* --------------------------------------------------------------------------
   31.15 TABLE TEXT
   -------------------------------------------------------------------------- */

table th {
  color: #263244;
  font-weight: 800;
}

table td {
  color: #344256;
  font-weight: 500;
}

.admin-table th,
.mini-table th {
  color: #334155;
  font-weight: 800;
}

.admin-table td,
.mini-table td {
  color: #344256;
}

.admin-table td strong,
.mini-table td strong {
  color: #111827;
  font-weight: 750;
}


/* --------------------------------------------------------------------------
   31.16 DASHBOARD / ADMIN TEXT
   -------------------------------------------------------------------------- */

.admin-content {
  color: #263244;
}

.admin-content h1,
.admin-content h2,
.admin-content h3,
.admin-content h4 {
  color: #111827;
  font-weight: 800;
}

.admin-content p {
  color: #3d4b5e;
}

.admin-header h1 {
  color: #111827;
  font-weight: 820;
}

.admin-header p,
.admin-header .subtitle {
  color: #526174;
  font-weight: 550;
}

.stat-value {
  color: #111827;
  font-weight: 850;
}

.stat-label {
  color: #526174;
  font-weight: 650;
}

.stat-card :where(
  h2,h3,h4,p,span
) {
  text-shadow: none;
}


/* --------------------------------------------------------------------------
   31.17 FORMS
   -------------------------------------------------------------------------- */

.form-group label,
.admin-form label {
  color: #263244;
  font-weight: 750;
}

.form-group label small,
.admin-form label small {
  color: #64748b;
  font-weight: 550;
}

.form-help,
.field-help,
.help-text {
  color: #526174;
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   31.18 FOOTER — MAXIMUM READABILITY
   -------------------------------------------------------------------------- */

.site-footer {
  color: #ffffff;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: #ffffff;
  font-weight: 800;
}

.site-footer p,
.site-footer li,
.site-footer dd,
.site-footer dt {
  color: rgba(255,255,255,.80);
  font-weight: 450;
}

.site-footer .footer-col h4 {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .08em;
}

.site-footer .footer-col a {
  color: rgba(255,255,255,.84);
  font-weight: 550;
}

.site-footer .footer-col a:hover {
  color: #ffffff;
}

.site-footer .rg-text {
  color: rgba(255,255,255,.82);
  font-weight: 500;
}

.site-footer .disclaimer-text {
  color: rgba(255,255,255,.72);
  font-weight: 450;
  line-height: 1.65;
}

.site-footer .footer-bottom {
  color: rgba(255,255,255,.76);
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   31.19 MOBILE TEXT VISIBILITY
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  h1,
  h2,
  h3,
  h4 {
    letter-spacing: -.018em;
  }

  .section-subtitle,
  .section-description,
  .section-header p {
    line-height: 1.65;
  }.casino-name,
.card-title
  ) {
    font-size: 17px;
  }.description,
.casino-description
  ) {
    color: #3b495b;
  }.casino-meta,
small
  ) {
    color: #526174;
  }

  .news-card h3,
  .feature-card h3 {
    font-size: 17px;
  }

  .news-card p,
  .feature-card p {
    color: #3b495b;
  }

  .site-footer p,
  .site-footer li,
  .site-footer .rg-text {
    color: rgba(255,255,255,.84);
  }

  .site-footer .disclaimer-text {
    color: rgba(255,255,255,.76);
  }
}


/* --------------------------------------------------------------------------
   31.20 HIGH-CONTRAST / LOW-LIGHT ENVIRONMENTS
   -------------------------------------------------------------------------- */

@media (prefers-contrast: more) {

  body {
    color: #111827;
  }.news-card,
.feature-card,
.info-card,
.info-block,
.sidebar-block,
.admin-section,
.admin-form {
    border-color: #b8c2d1;
  }h2,
h3,
h4,
h5,
h6),
.news-card :where(h1,
h2,
h3,
h4,
h5,
h6),
.feature-card :where(h1,
h2,
h3,
h4,
h5,
h6) {
    color: #0b1220;
  }.description),
.news-card :where(p,
.description),
.feature-card :where(p,
.description) {
    color: #27364a;
  }

  .site-footer :where(p,li,a,span) {
    color: #ffffff;
  }

  .hero :where(p,li,span) {
    color: #ffffff;
  }
}


/* --------------------------------------------------------------------------
   31.21 TEXT OVER IMAGES / GRADIENTS / VISUAL MEDIA
   -------------------------------------------------------------------------- */

.text-over-image,
.overlay-content,
.image-overlay,
.hero-overlay,
.card-overlay {
  color: #ffffff;
}

.text-over-image :where(
  h1,h2,h3,h4,h5,h6
),
.overlay-content :where(
  h1,h2,h3,h4,h5,h6
),
.image-overlay :where(
  h1,h2,h3,h4,h5,h6
),
.hero-overlay :where(
  h1,h2,h3,h4,h5,h6
),
.card-overlay :where(
  h1,h2,h3,h4,h5,h6
) {
  color: #ffffff;
  text-shadow:
    0 2px 4px rgba(0,0,0,.55),
    0 8px 22px rgba(0,0,0,.28);
}

.text-over-image :where(
  p,span,small,.meta,.date,.author
),
.overlay-content :where(
  p,span,small,.meta,.date,.author
),
.image-overlay :where(
  p,span,small,.meta,.date,.author
),
.hero-overlay :where(
  p,span,small,.meta,.date,.author
),
.card-overlay :where(
  p,span,small,.meta,.date,.author
) {
  color: rgba(255,255,255,.92);
  text-shadow:
    0 1px 3px rgba(0,0,0,.58),
    0 5px 16px rgba(0,0,0,.25);
}


/* --------------------------------------------------------------------------
   31.22 PREVENT "FAINT TEXT" FROM BEING ACCIDENTALLY CREATED
   -------------------------------------------------------------------------- */

.main-content :where(
  .text-light,
  .text-white-50,
  .opacity-50,
  .opacity-60,
  .opacity-70
) {
  /*
    Keep existing utility classes functional but prevent critical content
    from becoming unreadable.
  */
  color: #526174;
}

.hero :where(
  .text-light,
  .text-white-50,
  .opacity-50,
  .opacity-60,
  .opacity-70
),
.site-footer :where(
  .text-light,
  .text-white-50,
  .opacity-50,
  .opacity-60,
  .opacity-70
) {
  color: rgba(255,255,255,.82);
}


/* --------------------------------------------------------------------------
   31.23 LINKS
   -------------------------------------------------------------------------- */

:where(.main-content, .page-content, .review-content, .news-content) a {
  color: var(--support-primary-dark);
  font-weight: 600;
}

:where(.main-content, .page-content, .review-content, .news-content) a:hover {
  color: var(--support-primary);
}


/* --------------------------------------------------------------------------
   31.24 FINAL FONT RENDERING
   -------------------------------------------------------------------------- */

:where(
  h1,h2,h3,h4,h5,h6,
  .section-title,
  .section-heading,
  .hero-title,
  .casino-name,
  .card-title,
  .stat-value,
  .bonus-value,
  .bonus-amount
) {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* --------------------------------------------------------------------------
   32.1 GLOBAL SECTION RHYTHM
   -------------------------------------------------------------------------- */

main > section,
.main-content > section,
.page-content > section,
.content-section,
.page-section,
.section {
  margin-top: clamp(24px, 3vw, 42px);
  margin-bottom: clamp(24px, 3vw, 42px);
}

/*
  The first section should not receive an unnecessary top gap when the
  container/header already provides spacing.
*/
main > section:first-child,
.main-content > section:first-child,
.page-content > section:first-child,
.content-section:first-child,
.page-section:first-child,
.section:first-child {
  margin-top: 0;
}

/*
  When two sections sit directly together, don't let both margins stack
  visually into a large empty area.
*/

main > section + section,
.main-content > section + section,
.page-content > section + section,
.content-section + .content-section,
.page-section + .page-section,
.section + .section {
  margin-top: clamp(18px, 2.2vw, 30px);
}


/* --------------------------------------------------------------------------
   32.3 SECTION HEADER SPACING
   -------------------------------------------------------------------------- */

.section-header {
  margin-bottom: 18px;
}

.section-header h1,
.section-header h2,
.section-header h3,
.section-header h4 {
  margin-top: 0;
  margin-bottom: 7px;
}

.section-header p,
.section-subtitle,
.section-description,
.section-intro {
  margin-top: 0;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   32.4 HEADING → CONTENT
   -------------------------------------------------------------------------- */

section > h1,
section > h2,
section > h3,
section > h4 {
  margin-top: 0;
  margin-bottom: 14px;
}

section > h1 + p,
section > h2 + p,
section > h3 + p,
section > h4 + p {
  margin-top: 0;
}

/*
  Avoid a large blank region after card grids.
*/.news-grid,
.feature-grid,
.cards-grid,
.card-grid {
  margin-bottom: 0;
}.news-grid + *,
.feature-grid + *,
.cards-grid + *,
.card-grid + * {
  margin-top: clamp(18px, 2vw, 28px);
}


/* --------------------------------------------------------------------------
   32.6 HERO → FIRST CONTENT SECTION
   -------------------------------------------------------------------------- */

.hero + section,
.hero + .content-section,
.hero + .page-section,
.hero + main section {
  margin-top: clamp(20px, 2.5vw, 34px);
}


/* --------------------------------------------------------------------------
   32.7 BREADCRUMBS → TITLE
   -------------------------------------------------------------------------- */

.breadcrumbs {
  margin-bottom: 12px;
}

.breadcrumbs + h1,
.breadcrumbs + h2,
.breadcrumbs + .section-header,
.breadcrumbs + .page-header {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   32.8 PAGE HEADER → FIRST SECTION
   -------------------------------------------------------------------------- */

.page-header,
.content-header,
.admin-header {
  margin-bottom: clamp(18px, 2.2vw, 30px);
}

.page-header h1,
.content-header h1,
.admin-header h1 {
  margin-top: 0;
  margin-bottom: 7px;
}

.page-header p,
.content-header p,
.admin-header p {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   32.9 RELATED CONTENT SHOULD FEEL CONNECTED
   -------------------------------------------------------------------------- */

.related-content,
.related-casinos,
.related-reviews,
.related-news,
.recommended-casinos,
.recommendations {
  margin-top: clamp(22px, 2.5vw, 34px);
}

.related-content > h2,
.related-casinos > h2,
.related-reviews > h2,
.related-news > h2,
.recommended-casinos > h2,
.recommendations > h2 {
  margin-top: 0;
  margin-bottom: 14px;
}


/* --------------------------------------------------------------------------
   32.10 DETAIL PAGE CONTENT RHYTHM
   -------------------------------------------------------------------------- */

.review-content > section,
.article-content > section,
.rich-content > section,
.casino-detail > section {
  margin-top: 28px;
  margin-bottom: 28px;
}

.review-content > section:first-child,
.article-content > section:first-child,
.rich-content > section:first-child,
.casino-detail > section:first-child {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   32.11 CONTENT HEADINGS
   -------------------------------------------------------------------------- */

.review-content h2,
.article-content h2,
.rich-content h2,
.casino-detail h2 {
  margin-top: 28px;
  margin-bottom: 12px;
}

.review-content h3,
.article-content h3,
.rich-content h3,
.casino-detail h3 {
  margin-top: 22px;
  margin-bottom: 9px;
}

.review-content h2:first-child,
.article-content h2:first-child,
.rich-content h2:first-child,
.casino-detail h2:first-child {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   32.12 PARAGRAPH RHYTHM
   -------------------------------------------------------------------------- */

.review-content p,
.article-content p,
.rich-content p,
.page-content p {
  margin-top: 0;
  margin-bottom: 12px;
}

.review-content p + p,
.article-content p + p,
.rich-content p + p,
.page-content p + p {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   32.13 LISTS — DON'T CREATE HUGE GAPS
   -------------------------------------------------------------------------- */

.review-content ul,
.review-content ol,
.article-content ul,
.article-content ol,
.rich-content ul,
.rich-content ol {
  margin-top: 8px;
  margin-bottom: 14px;
}

.review-content li,
.article-content li,
.rich-content li {
  margin-bottom: 5px;
}


/* --------------------------------------------------------------------------
   32.14 INFO BLOCKS / BOXES
   -------------------------------------------------------------------------- */

.info-block,
.info-card,
.content-card,
.editorial-block {
  margin-top: 18px;
  margin-bottom: 18px;
}

.info-block:first-child,
.info-card:first-child,
.content-card:first-child,
.editorial-block:first-child {
  margin-top: 0;
}

.info-block:last-child,
.info-card:last-child,
.content-card:last-child,
.editorial-block:last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   32.16 SIDEBAR RHYTHM
   -------------------------------------------------------------------------- */

.sidebar-block + .sidebar-block,
.sidebar-card + .sidebar-card {
  margin-top: 18px;
}

.sidebar-block h2,
.sidebar-block h3,
.sidebar-block h4 {
  margin-top: 0;
  margin-bottom: 10px;
}


/* --------------------------------------------------------------------------
   32.17 TABLE RHYTHM
   -------------------------------------------------------------------------- */

.table-wrapper,
.table-responsive,
.admin-table-wrapper {
  margin-top: 14px;
  margin-bottom: 20px;
}

table {
  margin-top: 0;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   32.18 FORMS — KEEP FIELDS COMPACT BUT PROFESSIONAL
   -------------------------------------------------------------------------- */

.form-group,
.form-field,
.admin-form .form-group {
  margin-bottom: 16px;
}

.form-group:last-child,
.form-field:last-child {
  margin-bottom: 0;
}

.form-section + .form-section,
.form-group + .form-section {
  margin-top: 22px;
}


/* --------------------------------------------------------------------------
   32.19 DASHBOARD SECTIONS
   -------------------------------------------------------------------------- */

.admin-section + .admin-section {
  margin-top: 22px;
}

.stats-grid + .admin-section,
.admin-section + .stats-grid {
  margin-top: 22px;
}

.admin-section h2,
.admin-section h3 {
  margin-top: 0;
  margin-bottom: 14px;
}

/*
  Keep the footer visually separated from content, but avoid an excessive
  empty zone before it.
*/

.layout-wrapper + .site-footer {
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   32.21 REMOVE ACCIDENTAL EMPTY SPACE FROM EMPTY CONTAINERS
   -------------------------------------------------------------------------- */.section:empty,
.content-section:empty,
.page-section:empty,
.info-block:empty,
.card-grid:empty {
  display: none;
}


/* --------------------------------------------------------------------------
   32.22 COLLAPSE UNNECESSARY LAST-CHILD MARGINS
   -------------------------------------------------------------------------- */

section > :last-child,
.section > :last-child,
.content-section > :last-child,
.page-section > :last-child,
.info-block > :last-child,
.info-card > :last-child,
.editorial-block > :last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   32.23 MOBILE — TIGHTER BUT STILL PREMIUM
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  main > section,
  .main-content > section,
  .page-content > section,
  .content-section,
  .page-section,
  .section {
    margin-top: 22px;
    margin-bottom: 22px;
  }

  main > section + section,
  .main-content > section + section,
  .page-content > section + section,
  .content-section + .content-section,
  .page-section + .page-section,
  .section + .section {
    margin-top: 16px;
  }

  .section-header {
    margin-bottom: 14px;
  }

  .section-header h1,
  .section-header h2,
  .section-header h3 {
    margin-bottom: 6px;
  }

  .hero + section,
  .hero + .content-section,
  .hero + .page-section {
    margin-top: 18px;
  }

  .related-content,
  .related-casinos,
  .related-reviews,
  .related-news,
  .recommended-casinos,
  .recommendations {
    margin-top: 20px;
  }

  .review-content > section,
  .article-content > section,
  .rich-content > section,
  .casino-detail > section {
    margin-top: 22px;
    margin-bottom: 22px;
  }

  .review-content h2,
  .article-content h2,
  .rich-content h2,
  .casino-detail h2 {
    margin-top: 22px;
    margin-bottom: 10px;
  }

  .info-block,
  .info-card,
  .content-card,
  .editorial-block {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .sidebar-block + .sidebar-block,
  .sidebar-card + .sidebar-card {
    margin-top: 14px;
  }
  .layout-wrapper + .site-footer {
    margin-top: 20px;
  }
}


/* --------------------------------------------------------------------------
   32.24 VERY SMALL SCREENS
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

  main > section,
  .main-content > section,
  .page-content > section,
  .content-section,
  .page-section,
  .section {
    margin-top: 18px;
    margin-bottom: 18px;
  }

  main > section + section,
  .main-content > section + section,
  .page-content > section + section,
  .content-section + .content-section,
  .page-section + .page-section,
  .section + .section {
    margin-top: 14px;
  }

  .section-header {
    margin-bottom: 12px;
  }

  .section-header p,
  .section-subtitle,
  .section-description {
    line-height: 1.55;
  }
}


/* ==========================================================================
   END OF SECTION RHYTHM / VERTICAL SPACING SYSTEM
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED CONTAINERS ON MOBILE (platform-wide)
   Zeroes out .container's own side padding below 768px, so every
   section built on .container -- home, listing pages (category,
   country, news-list), detail pages (casino, review, news), cards,
   grids, text blocks -- spans the full device width. This has to be
   the last rule touching .container in the whole cascade (hence
   living at the very end of the last-loaded stylesheet): the
   max-width:768px block earlier in this same file is what actually
   sets the 16px mobile gutter today, so anything upstream of this
   point gets overridden by it.

   Long-form reading text (article bodies) gets its own inset put
   back below -- .container itself going flush is fine, but body
   copy glued to the literal screen edge hurts readability and isn't
   what "full-bleed" is going for in editorial content. Card-style
   components (casino-card, news-card, info-block, etc.) already
   carry their own internal padding, so they don't need this --
   their outer edge is meant to touch the screen.
   ========================================================================== */

@media (max-width: 767px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }

  .review-content,
  .news-content,
  .page-content,
  .rich-content,
  .hero-content,
  .section-header {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   ORANGE ACCENT BORDERS -- cards & content containers, all pages
   Applies to every card-shaped unit on the platform (casino cards,
   news cards, text/info cards, sidebar blocks, auth cards) so they
   read as a consistent family. Uses var(--primary), the platform's
   live theme-accent token (currently #EE9F28), rather than a
   hardcoded color, so it tracks the theme if that token ever changes
   rather than drifting out of sync with it.
   ========================================================================== */

.casino-card,
.news-card,
.info-block,
.info-card,
.pros-cons-block,
.sidebar-block,
.auth-card,
.feature-card,
.review-summary {
  border: 1px solid var(--primary);
}
/* --------------------------------------------------------------------------
   33. THEME TEXT ON THE PAGE BACKGROUND
   Sections 31.x / 32.x above were written for a light page. The site theme
   (see --theme-text in main.css) puts light text on a dark page background, so
   headings, intros and form labels that sit directly on the page use the theme
   text colours here. Text inside white cards keeps the dark colours set above:
   the card list below names the white surfaces of the dashboard.
   -------------------------------------------------------------------------- */

.section-header h1,
.section-header h2,
.section-header h3 {
  color: var(--text-strong);
}

.section-header p {
  color: var(--text-secondary);
}

.section-header p strong {
  color: var(--text-body);
}

.admin-content {
  color: var(--text-body);
}

.admin-content :where(.admin-section, .admin-card, .stat-card, .dashboard-card, form.admin-form, .gr-card, .section-cards, .homepage-admin-section, .hh-preview-card, .rl-preview__card, .ap-bar, fieldset, details) {
  color: #263244;
}

.admin-content :is(h1, h2, h3):not(:where(.admin-section, .admin-card, .stat-card, .dashboard-card, form.admin-form, .gr-card, .section-cards, .homepage-admin-section, .hh-preview-card, .rl-preview__card, .ap-bar, fieldset, details) *),
.admin-header h1 {
  color: var(--text-strong);
}

.admin-content > p,
.admin-header p,
.admin-header .subtitle,
.admin-content p.muted:not(:where(.admin-section, .admin-card, .stat-card, .dashboard-card, form.admin-form, .gr-card, .section-cards, .homepage-admin-section, .hh-preview-card, .rl-preview__card, .ap-bar, fieldset, details) *) {
  color: var(--text-secondary);
}

.admin-content label:not(:where(.admin-section, .admin-card, .stat-card, .dashboard-card, form.admin-form, .gr-card, .section-cards, .homepage-admin-section, .hh-preview-card, .rl-preview__card, .ap-bar, fieldset, details) *) {
  color: var(--text-body);
}

.gr-bar__title strong {
  color: inherit;
}