:root {
  --bg: #0b0c10;
  --card: #15171e;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --brand: #f59e0b;
  --accent: #22d3ee;
  --good: #22c55e;
  --bad: #ef4444;
  --pill: #1f2937;
}

/* Base */
* { box-sizing: border-box; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  background:var(--bg); color:var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width:100%; height:auto; } /* universal sanity */

/* Layout */
.container { max-width: 1600px; width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; }
header.site-header { background: #0e0f14; border-bottom:1px solid #20232e; position: sticky; top:0; z-index:50; }
.header-row { display:flex; align-items:center; gap:1rem; padding: .75rem 1.5%; }
.header-auth { margin-left: auto; display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.main-nav { flex-shrink:0; }
/* Ticker gets symmetric padding */
.bk-ticker-inner { padding-left: 1.5%; padding-right: 1.5%; }
.brand { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.brand-logo { width:42px; height:42px; }
.brand-logo-full { height:48px; width:auto; display:block; max-width:200px; }
.brand-text .site-name{ font-weight:700; font-size:1.1rem; color:white; }
.brand-text .tagline{ display:block; font-size:.75rem; color:var(--muted); }

/* Mobile header: stack logo above nav */
@media (max-width:780px){
  .header-row {
    flex-direction:column;
    align-items:center;
    gap:.5rem;
    padding:.6rem 0;
  }
  .brand-logo-full {
    height:40px;
    max-width:180px;
  }
  .main-nav ul {
    flex-wrap:wrap;
    justify-content:center;
    gap:.15rem;
  }
  .main-nav a {
    font-size:.78rem;
    padding:.35rem .45rem;
  }
}

/* Nav */
.main-nav ul { list-style:none; display:flex; gap:1rem; padding:0; margin:0; align-items:center;}
.main-nav a{ color:#e5e7eb; padding:.5rem .6rem; border-radius:.5rem; }
.main-nav a:hover{ background:#1b1f2a; text-decoration:none; }
.main-nav .has-dropdown { position:relative; }
.main-nav .dropdown{ display:none; position:absolute; background:#0f1117; top:110%; left:0; min-width:220px; border:1px solid #222636; border-radius:.75rem; box-shadow:0 10px 28px rgba(0,0,0,.45); padding:.4rem; }
.main-nav .has-dropdown:hover .dropdown{ display:flex; flex-direction:column; }
.main-nav .dropdown a{ padding:.6rem .7rem; color:#e5e7eb; border-radius:.5rem; }
.main-nav .dropdown a:hover{ background:#1b1f2a; }

/* Compliance bar */
.compliance { background:#0a0b10; border-top:1px solid #222636; border-bottom:1px solid #222636; color:var(--muted); font-size:.85rem; }
.compliance .container { display:flex; justify-content:space-between; padding:.4rem 0; gap:1rem; flex-wrap:wrap; }

/* Grids / cards */
.grid { display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr); }
.grid-3{ display:grid; gap:2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card { background:var(--card); border:1px solid #232636; border-radius:1rem; padding:1rem; }
.card:hover{ border-color:#2f3242; }

/* Hero — centered highlight */
.hero { padding:1.25rem 0 1.5rem; }
.hero .highlight {
  background: linear-gradient(180deg, #131521, #0c0e14);
  border:1px solid #1d2133;
  border-radius:1rem;
  padding:1.2rem;
  max-width:1100px;
  margin-inline:auto;  /* center */
}
.hero h1 { margin-top:0; font-size:1.6rem; }
.hero p { color:var(--muted) }

/* Promo list — WIDER cards */
.promo-list{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
}
@media (min-width: 1400px){
  .promo-list{ grid-template-columns: repeat(auto-fit, minmax(640px, 1fr)); }
}

/* Promo item layout uses the extra width effectively */
.promo-item.card{ width:100%; max-width:none; padding:1rem 1.25rem; }
.promo-item{
  display:grid;
  grid-template-columns: 120px 1fr; /* logo | content */
  gap:1rem;
  align-items:start;
}

/* Logo sizing + containment (fix large logos) */
.bk-logo{
  width:40px; height:40px; object-fit:contain;
  background:#0b0e15; border:1px solid #2b3042; border-radius:.5rem; padding:4px; display:block;
}
.promo-item .bk-logo{ width:56px; height:56px; border-radius:.6rem; } /* larger in cards */
.logo-32 { width:32px; height:32px; }
.logo-40 { width:40px; height:40px; }
.logo-56 { width:56px; height:56px; }

/* Larger logos on laptop+ */
@media(min-width:1025px){
  .promo-item .bk-logo{ width:100px; height:100px; }
  .promo-item{ grid-template-columns: 120px 1fr; }
}
@media(min-width:1280px){
  .promo-item .bk-logo{ width:120px; height:120px; }
  .promo-item{ grid-template-columns: 140px 1fr; }
}

/* Align name + logo neatly in first table column */
.table td:first-child a,
.promo-item > .bk-head { display:flex; align-items:center; gap:.6rem; min-height:40px; }

.promo-meta { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.promo-actions { display:flex; align-items:center; gap:.5rem; margin-top:.3rem;}

/* Buttons */
.btn { display:inline-block; background:var(--brand); color:#091018; font-weight:700; padding:.55rem .8rem; border-radius:.6rem; border:0; cursor:pointer; }
.btn.secondary{ background:#1f2937; color:#e5e7eb;}
.btn.small{ padding:.35rem .55rem; font-size:.9rem; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Ratings */
.stars .star { font-size:1rem; line-height:1; }
.stars .full, .stars .half { color:#fde047; }
.stars .empty { color:#4b5563; }
.rating-number{ margin-left:.25rem; font-size:.9rem; color:var(--muted); }

/* Pills */
.pill { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .45rem; background:var(--pill); color:#e5e7eb; border:1px solid #293041; border-radius:999px; font-size:.75rem; }
.pill.new { background:#172554; color:#93c5fd; }
.pill.top { background:#052e16; color:#86efac; }
.pill.excl { background:#1f0a16; color:#f9a8d4; }
.pill.expired { background:#3f1d1d; color:#fecaca; }

/* Search */
.searchbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.searchbar input, .searchbar select { background:#0c0e14; border:1px solid #30354a; color:#e5e7eb; padding:.55rem .65rem; border-radius:.6rem; min-width:12ch; }
.searchbar input::placeholder{ color:#6b7280; }

/* Tables */
.table { width:100%; border-collapse: collapse; }
.table thead th { text-align:left; font-size:.9rem; color:#9CA3AF; padding:.5rem; border-bottom:1px solid #2a3042; }
.table tbody td { padding:.6rem .5rem; border-bottom:1px solid #202437; }

.compare { overflow-x:auto; }

/* Footer */
.site-footer { margin-top:2rem; border-top:1px solid #1f2334; background:#0b0c12; }
.site-footer .container{ padding:1.2rem 0; }
.tiny{ color:#9ca3af; font-size:.9rem; }

/* Odds color coding */
.odd-chip{
  display:inline-block; padding:.22rem .46rem; border-radius:.45rem;
  font-weight:700; border:1px solid rgba(255,255,255,.06);
}
.odd-best{ background:#052e16; border-color:#14532d; color:#86efac; }
.odd-mid { background:#1f2937; border-color:#334155; color:#e5e7eb; }
.odd-worst{ background:#3f1d1d; border-color:#7f1d1d; color:#fecaca; }

/* Responsive */
@media (max-width: 920px){
  .main-nav ul{ gap:.25rem; }
  .promo-item{ grid-template-columns: 72px 1fr; } /* Stack promo item content on narrow screens */
}
@media (max-width: 620px){
  .promo-list{ grid-template-columns: 1fr; } /* single column on phones */
  .promo-item{ grid-template-columns: 56px 1fr; }
}

/* Optional: keep paragraph measure comfortable even when cards are very wide */
.promo-item p.muted{ max-width: 70ch; }

/* --- Featured Bookmakers: fix name vs stars + T&Cs placement (table legacy) --- */
.table.featured td.bk a.bk-link{
  display:grid !important;
  grid-template-columns:48px 1fr; /* logo | name */
  align-items:center;
  gap:.6rem;
  min-height:44px;
  max-width:100%;
  overflow:hidden;
}
.table.featured td.bk a.bk-link img{ height:44px; width:auto; max-width:64px; flex:0 0 auto; }
.table.featured td.bk .bk-name{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.table.featured td.rating-cell{ white-space:nowrap; width:7.5rem; text-align:center; }
.table.featured td.rating-cell svg{ vertical-align:middle; }
.table.featured td.bonus-cell .bonus-amount{ font-weight:600; }
.table.featured td.bonus-cell .tiny-link{ display:block; margin-top:.2rem; }
.table.featured td.actions-cell{ text-align:right; white-space:nowrap; }
@media (max-width:1160px){
  .table.featured td.bk .bk-name{
    white-space:normal; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
}
@media (min-width:1024px){
  .table.featured colgroup col:nth-child(1){ width:48% !important; }
  .table.featured colgroup col:nth-child(2){ width:18% !important; }
  .table.featured colgroup col:nth-child(3){ width:22% !important; }
  .table.featured colgroup col:nth-child(4){ width:12% !important; }
}
@media (max-width:780px){
  .table.featured td.actions-cell{ text-align:left; padding-top:.4rem; }
}

/* === FEATURED BOOKMAKERS TICKER === */
.bk-ticker{
  border-block: 1px solid #232636;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.bk-ticker-inner{
  max-width: 1600px;
  margin: 0 auto;
  padding: .5rem 1.5%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem 1rem;
  align-items: center;
}
.bk-ticker-label{
  font-size: .85rem;
  color: var(--muted, #9aa3b2);
  white-space: nowrap;
}
.ticker-viewport{
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient( to right, rgba(0,0,0,0), #000 8%, #000 92%, rgba(0,0,0,0) );
}
.ticker-track{
  display: inline-flex;
  gap: .85rem;
  align-items: stretch;
  will-change: transform;
  transform: translateX(0);
  animation: ticker var(--scroll-duration, 40s) linear infinite;
  visibility: hidden;
}
.ticker-track.is-ready{ visibility: visible; }
.ticker-item{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem .75rem;
  border: 1px solid #232636;
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.ticker-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: #2d3144;
}

/* robust logo sizing inside ticker */
.ti-logo{ display:inline-flex; align-items:center; }
.ti-logo .logo-box{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:28px; line-height:0;
}
.ti-logo img,
.ti-logo picture > img,
.ti-logo svg{
  max-height:28px !important;
  height:28px !important;
  width:auto !important;
  display:block;
}
.ti-logo .logo,
.ti-logo .bk-logo,
.ti-logo [class*="logo"]{
  display:inline-block;
  height:28px !important;
  min-width:72px;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}

.ti-meta{ display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.ti-name{ font-weight: 600; }
.ti-rating{ opacity: .9; display: inline-flex; align-items: center; }
.ti-bonus{
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(72,187,120,.15);
  border: 1px solid rgba(72,187,120,.35);
  font-size: .82rem;
}

/* T&Cs inside ticker */
.ti-terms{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  opacity:.85;
  white-space:nowrap;
}
.ti-terms::before{
  content:"·";
  opacity:.5;
  margin-right:.2rem;
}
.ti-terms a{ color:inherit; text-decoration:underline; }
.ti-terms a:hover{ text-decoration:none; opacity:1; }
.ti-terms a:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; border-radius:.25rem; }

@keyframes ticker{ to{ transform: translateX(calc(-1 * var(--scroll-distance, 100%))); } }
.ticker-viewport:hover .ticker-track,
.ticker-viewport:focus-within .ticker-track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none !important; } }

@media (max-width: 640px){
  .bk-ticker-inner{ grid-template-columns: 1fr; gap: .5rem; }
  .bk-ticker-label{ display: none; }
  .ticker-item{ padding: .4rem .6rem; }
  .ti-logo .logo-box{ height:24px; min-width:24px; }
  .ti-logo img,
  .ti-logo picture > img,
  .ti-logo svg{ height:24px !important; max-height:24px !important; }
  .ti-logo .logo,
  .ti-logo .bk-logo,
  .ti-logo [class*="logo"]{ height:24px !important; min-width:56px; }
  .ti-terms{ font-size:.72rem; }
}