/* ================================================================
   custom.css  — Mostbet Canada landing
   Extracted from inline <style> + all 10 new fixes applied
   ================================================================ */

/* ── GLOBAL VARS ──────────────────────────────────────────── */
:root {
  --gold:      #f5b800;
  --gold-dark: #c99000;
  --green:     #00c853;
  --red:       #ef5350;
  --dark:      #0d0f1a;
  --card-bg:   #161825;
  --radius:    14px;
  --shadow:    0 8px 32px rgba(0,0,0,.45);
}

/* FIX 2 — global font bump +3pt (≈+4px) via html root size */
html { font-size: 20px; }   /* was effectively 16px; bumped to ~20px */

/* ── GLOBAL IMAGES ────────────────────────────────────────── */
img { max-width: 100%; height: auto; display: block; }

/* ── FIX 2: Hero gap — tighter padding ───────────────────── */
.fz19-hero  { padding: 3rem 0 2.5rem; }
.fz19-grid  { gap: 2rem; align-items: center; }
.fz19-card  { padding: 1.6rem 1.8rem 1.8rem; }

/* ── FIX 3: Pros/Cons icon circles ───────────────────────── */
.dz15-num {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}
.dz15-num svg    { width: 22px; height: 22px; }
.dz15-num-pro   { background: var(--green) !important; color: #fff; }
.dz15-num-con   { background: var(--red)   !important; color: #fff; }

/* ── FIX 4: Mobile images — aspect ratios ────────────────── */
.slot-card-img  { width:100%; aspect-ratio:3/2; object-fit:cover;    border-radius:10px; background:var(--card-bg); }
.provider-img   { width:100%; max-width:200px;  height:80px;         object-fit:contain; padding:8px; background:var(--card-bg); border-radius:10px; }
.payment-img    { height:54px; width:auto;       max-width:140px;    object-fit:contain; border-radius:8px; }
.trust-img      { width:140px; height:70px;      object-fit:contain; }
.tournament-img { width:100%; aspect-ratio:3/2;  object-fit:cover;   border-radius:12px; }

/* ── FIX 6: Registration — two-column layout ─────────────── */
/* Register block — stacked single column */
.register-2col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.register-col {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  border: 1px solid rgba(255,255,255,.07);
}
.register-col-title {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .55rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--gold);
}
.register-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.register-steps li {
  counter-increment: step;
  display: flex;
  gap: .55rem;
  align-items: center;          /* single-line vertical centre */
  padding: .28rem 0;
  font-size: .62rem;
  line-height: 1.35;
  white-space: normal;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.register-steps li:last-child { border-bottom: none; }
.register-steps li::before {
  content: counter(step);
  min-width: 18px;
  height: 18px;
  background: var(--gold);
  color: #111;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.register-note {
  font-size: .62rem;
  color: rgba(255,255,255,.5);
  margin-top: .75rem;
  padding: .55rem .8rem;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  line-height: 1.45;
}
.register-cta-wrap {
  margin-top: 1.5rem;
  text-align: center;
}

/* ── FIX 5, 6: Trust badges — standardised tiles ─────────── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.trust-tile {
  background: rgba(40, 80, 160, 0.35);   /* blue tint matching site palette */
  border: 1px solid rgba(80, 130, 220, 0.3);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 110px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.trust-tile img {
  width: auto;
  max-width: 130px;
  max-height: 64px;
  object-fit: contain;
  display: block;
  filter: brightness(1.1);   /* slight boost so light logos stay crisp */
}
.trust-tile span {
  font-size: .68rem;
  color: rgba(255,255,255,.75);
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
}

/* ── FIX 7/8/9: Footer payments — standardised + visible ── */
.footer-payments {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
}
.footer-payments .pay-pill {
  background: #fff;              /* FIX 9: white backing for dark logos */
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;                   /* FIX 8: uniform width */
  height: 46px;                  /* FIX 8: uniform height */
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .15s;
}
.footer-payments .pay-pill:hover { transform: translateY(-2px); }
.footer-payments .pay-pill-text {
  color: #0b1326;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.footer-payments .pay-pill img {
  width: auto;
  max-width: 68px;
  max-height: 30px;
  object-fit: contain;
  display: block;
}

/* ── FIX 10: Slots grid ──────────────────────────────────── */
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.slot-tile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s;
  background: var(--card-bg);
}
.slot-tile:hover { transform: scale(1.03); }
.slot-tile img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}
.slot-tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  padding: .5rem .7rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

/* ── Providers grid ──────────────────────────────────────── */
.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.provider-tile {
  background: transparent;
  border-radius: 10px;
  padding: .8rem .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  transition: transform .15s;
}
.provider-tile:hover { transform: translateY(-2px); }
.provider-tile img {
  max-height: 48px;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Score cards ─────────────────────────────────────────── */
.score-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.score-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .2s;
}
.score-card:hover         { transform: translateY(-3px); }
.score-emoji              { font-size: 2rem;  margin-bottom: .4rem; }
.score-label              { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color:rgba(255,255,255,.55); margin-bottom:.7rem; font-weight:600; }
.score-bar-wrap           { background: rgba(255,255,255,.1); border-radius:100px; height:8px; overflow:hidden; margin-bottom:.5rem; }
.score-bar                { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--gold),#ff9800); transition:width 1.2s ease; }
.score-value              { font-size:1.5rem; font-weight:800; color:var(--gold); }
.score-desc               { font-size:.68rem; color:rgba(255,255,255,.45); margin-top:.3rem; line-height:1.4; }
.score-overall            { grid-column:1/-1; background:linear-gradient(135deg,#1a1f35,#252b45); border:1px solid rgba(245,184,0,.3); padding:1.6rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-radius:var(--radius); }
.score-overall-label      { font-size:1.05rem; font-weight:700; color:#fff; }
.score-overall-stars      { font-size:1.3rem;  color:var(--gold); letter-spacing:2px; }
.score-overall-value      { font-size:2.2rem;  font-weight:900; color:var(--gold); }

/* ── VIP button ──────────────────────────────────────────── */
.ux64-cta-wrap { margin-top:2.5rem; display:flex; justify-content:center; }
.ux64-cta {
  display:inline-block; padding:1rem 3rem; border-radius:50px;
  font-weight:700; font-size:1rem; text-decoration:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#111; transition:transform .2s, box-shadow .2s;
  box-shadow:0 4px 18px rgba(245,184,0,.35);
}
.ux64-cta:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,184,0,.5); }

/* ── Footer responsible gambling ────────────────────────── */
.footer-rg {
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:1.5rem; padding-top:1.5rem;
  font-size:.72rem; color:rgba(255,255,255,.4);
  line-height:1.6; text-align:center;
}
.footer-rg strong { color:rgba(255,255,255,.65); }
.footer-rg a      { color:rgba(255,255,255,.5); text-decoration:underline; }
.footer-rg-badges {
  display:flex; flex-wrap:wrap; gap:.8rem;
  justify-content:center; margin:1rem 0;
}
.footer-rg-badges .trust-pill {
  background: rgba(40, 80, 160, 0.35);
  border: 1px solid rgba(80, 130, 220, 0.3);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex; align-items: center; justify-content: center;
  width: 100px; height: 52px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.footer-rg-badges .trust-pill img {
  max-width: 80px; max-height: 38px;
  width: auto; height: auto;
  object-fit: contain;
  filter: brightness(1.15);
}

/* ── Cookie banner (FIX 3 new) ──────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(13,15,26,.97);
  border-top: 2px solid var(--gold);
  z-index: 9999;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
.cookie-banner p {
  margin: 0;
  font-size: .8rem;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
  max-width: 680px;
}
.cookie-banner p a { color:var(--gold); text-decoration:underline; }
.cookie-banner-btns { display:flex; gap:.75rem; flex-shrink:0; }
.cookie-btn-accept {
  background: var(--gold); color:#111;
  border:none; border-radius:8px;
  padding:.55rem 1.4rem; font-weight:700;
  font-size:.82rem; cursor:pointer;
  transition:background .15s;
}
.cookie-btn-accept:hover { background:var(--gold-dark); }
.cookie-btn-decline {
  background:transparent; color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.2); border-radius:8px;
  padding:.55rem 1.1rem; font-size:.82rem; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.cookie-btn-decline:hover { border-color:rgba(255,255,255,.5); color:#fff; }

/* Legal pages */
.legal-main {
  background:
    radial-gradient(circle at 16% 0, rgba(245,184,0,.16), transparent 34rem),
    radial-gradient(circle at 100% 8%, rgba(0,135,214,.26), transparent 32rem),
    var(--dark);
  color: rgba(255,255,255,.78);
}
.legal-hero {
  padding: 4rem 0 2rem;
}
.legal-kicker {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}
.legal-title {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}
.legal-lead {
  max-width: 780px;
  color: rgba(255,255,255,.68);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0;
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.5rem;
  padding: 1rem 0 4rem;
}
.legal-card,
.legal-toc {
  background: rgba(22,24,37,.86);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.legal-card {
  padding: 1.6rem;
}
.legal-card section + section {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 1.3rem;
  padding-top: 1.3rem;
}
.legal-card h2 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0 0 .65rem;
}
.legal-card h3 {
  color: #fff;
  font-size: .95rem;
  margin: 1rem 0 .45rem;
}
.legal-card p,
.legal-card li {
  font-size: .82rem;
  line-height: 1.75;
}
.legal-card p {
  margin: 0 0 .75rem;
}
.legal-card ul {
  margin: .25rem 0 0;
  padding-left: 1.15rem;
}
.legal-card a,
.legal-toc a {
  color: var(--gold);
}
.legal-note {
  background: rgba(245,184,0,.1);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: .85rem 1rem;
  color: rgba(255,255,255,.78);
}
.legal-toc {
  align-self: start;
  position: sticky;
  top: 90px;
  padding: 1rem;
}
.legal-toc-title {
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  margin-bottom: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.legal-toc a {
  display: block;
  font-size: .76rem;
  line-height: 1.45;
  padding: .35rem 0;
  text-decoration: none;
}
.legal-updated {
  color: rgba(255,255,255,.48);
  font-size: .75rem;
  margin-top: 1rem;
}

/* ── Accessibility ───────────────────────────────────────── */
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border-width:0;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
}
@media (max-width: 768px) {
  html { font-size: 18px; }
  .ja-container { padding: 0 1rem; }
  .lv37-scroll, .uw76-spec-frame { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .lv37-table, .ux64-table, .uw76-spec { min-width: 480px; }
  .fz19-hero { padding:2rem 0; }
  .fz19-grid { grid-template-columns:1fr; gap:1.5rem; }
  .fz19-title { font-size:clamp(1.5rem,5vw,2.6rem); }
  .ae46-title { font-size:clamp(1.3rem,5vw,2.3rem); }
  .ja-h2      { font-size:clamp(1.2rem,4.5vw,1.9rem); }
  .trust-grid { grid-template-columns:repeat(3,1fr); }
  .providers-grid { grid-template-columns:repeat(3,1fr); }
  .cookie-banner { gap:1rem; padding:.85rem 1rem; }
}
@media (max-width: 600px) {
  .slots-grid { grid-template-columns:repeat(2,1fr); }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .providers-grid { grid-template-columns:repeat(2,1fr); }
  .dz15-row { flex-direction:column; }
  .dz15-col { width:100%; }
  .fz19-btns { flex-direction:column; }
  .fz19-btns a { text-align:center; }
  .score-section { grid-template-columns:1fr 1fr; }
  .score-overall { flex-direction:column; text-align:center; }
  .footer-payments .pay-pill { width:76px; height:40px; }
  .cookie-banner { flex-direction:column; text-align:center; gap:.75rem; }
  .cookie-banner-btns { width:100%; justify-content:center; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-card { padding: 1.1rem; }
}
@media (max-width: 380px) {
  .slots-grid { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── Min-heights prevent layout shift ───────────────────── */
.ae46-hero  { min-height:420px; }
.fz19-hero  { min-height:340px; }
.hm48-card  { min-height:160px; }
.lz44-card  { min-height:180px; }