/* HellSpin overrides */
.content-grid{grid-template-columns:minmax(0,1fr) !important}
/* Hellspin logo: keep true aspect ratio (was squished by generic header img width) */
header.header .logo{max-width:none}
header.header .logo .brand-link{height:auto}
header.header .logo .brand{height:56px !important;width:auto !important;max-width:none !important;max-height:56px !important;object-fit:contain}
.aside-menu .brand,aside .brand{height:44px !important;width:auto !important;max-width:none !important;max-height:44px !important;object-fit:contain}
/* Footer brand logo: true aspect ratio, proper size */
footer.footer .logo{max-width:none}
footer.footer .logo .brand,footer.footer .logo img{height:56px !important;width:auto !important;max-width:none !important;max-height:56px !important;object-fit:contain}

/* ===== HellSpin recolor: bg #05071a, gold #fcc211, red #e93e3a ===== */
:root{
  --theme-a-color:#fcc211;
  --theme-body-bg:#05071a;
  --theme-body-color:#ffffff;
  --theme-header-bg:#05071a;
  --theme-header-text-color:#ffffff;
  --theme-color-border-header:#0c1024;

  --theme-color-accent:#e93e3a;
  --theme-color-secondary:#fcc211;
  --theme-color-style3:#ffffff;
  --theme-color-style4:#0d1226;

  --theme-buttons-accent-bg:#e93e3a;
  --theme-buttons-accent-bg-hover:#f2564f;
  --theme-buttons-accent-color:#ffffff;
  --theme-buttons-secondary-bg:#fcc211;
  --theme-buttons-secondary-bg-hover:#ffd23f;
  --theme-buttons-secondary-color:#05071a;
  --theme-buttons-outline-border:#e93e3a;
  --theme-buttons-outline-color:#ffffff;
  --theme-buttons-outline-bg-hover:#141c30;
  --theme-buttons-style3-bg:#0d1226;
  --theme-buttons-style3-bg-hover:#161d33;
  --theme-buttons-style3-color:#ffffff;

  --theme-section-bg:#0a0e20;
  --theme-section-border-color:#1a2140;
  --theme-footer-bg:#070a18;
  --theme-footer-hr-color:#2a3145;
  --theme-footer-menu-color:#9297a3;
  --theme-footer-text-color:#ffffff;
}
/* gold bg needs dark text (active tab used white on secondary) */
.slots .nav li button.active{background-color:var(--theme-color-secondary) !important;color:#05071a !important}
.slots .nav li button.active i{color:#05071a !important}
/* green-ray image backgrounds -> HellSpin fiery gradients */
.welcome-section{background:#05071a url(/assets/img/hero-banner.webp) center/cover no-repeat !important}
.welcome-section:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,26,.82) 0%,rgba(5,7,26,.55) 42%,rgba(5,7,26,.15) 70%,rgba(5,7,26,0) 100%);border-radius:inherit;pointer-events:none;z-index:0}
.welcome-section>*{position:relative;z-index:1}

/* Logo: big on desktop, compact on mobile (keep header row tight so login/reg don't shift) */
@media (max-width:991px){
  header.header .logo .brand,header.header .logo .brand-link{height:40px !important;max-height:40px !important}
}

/* Mobile hero: portrait lava banner */
@media (max-width:991px){
  .welcome-section{background:#05071a url(/assets/img/hero-mobile-banner.webp) center/cover no-repeat !important}
  .welcome-section:before{display:none !important}
  .welcome-section h1,.welcome-section p{text-shadow:0 2px 8px rgba(0,0,0,.85)}
}

/* Mobile application card(s): lava banner bg */
.services .banner,.apps_banner{background:linear-gradient(rgba(5,7,26,.26),rgba(5,7,26,.48)),url(/assets/img/hero-banner.webp) center/cover no-repeat !important}
.services .banner *,.apps_banner *{text-shadow:0 1px 6px rgba(0,0,0,.85)}

/* Legal pages: a plain text header - no marketing banner behind the copy */
.legal-hero{margin-bottom:var(--theme-margin-section)}
.legal-hero h1{margin-bottom:16px}
@media (max-width:991px){.legal-hero{margin-bottom:var(--theme-margin-section-mob)}}
/* the brand logo is a link now - keep it looking like the old span */
.brand-link{display:inline-block;text-decoration:none}

/* Single-page nav: the header is position:fixed, so anchored sections need clearance */
html{scroll-behavior:smooth}
.sect[id]{scroll-margin-top:150px}
@media (max-width:991px){.sect[id]{scroll-margin-top:120px}}

/* Inline emoji are plain <img>; keep them at text size */
img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-.1em !important;background:none !important;padding:0 !important}

/* Tables and CTA rows lost their layout rules with the upstream bundle - supply them */
.tbl table{width:100%}
.tbl table.fixed-cols{table-layout:fixed}

.ctas.ctas-row{display:flex;flex-wrap:wrap;gap:10px}
.ctas.ctas-center{justify-content:center}
.ctas .cta .cta-btn{cursor:pointer;border:0}

/* Bonus cards: lava banner instead of the template's green bonus-bg2 */
.bonus-items .item{background:linear-gradient(rgba(5,7,26,.42),rgba(5,7,26,.62)),url(/assets/img/hero-banner.webp) center/cover no-repeat !important}
.bonus-items .item .bonus-items__wrap .bonus{color:var(--theme-color-secondary)}
.bonus-items .item .image{display:flex;align-items:center;justify-content:center;height:100px}
.bonus-items .item .image img{max-height:100px;width:auto;max-width:100%}
/* the badge art fills its canvas edge to edge - scale it down so it reads at the
   same optical size as the gift-box images, which carry a lot of empty padding */
.bonus-items .item .image img[src*="highroller-bonus-badge"]{max-height:70px}

/* Featured pokie names: h4 is the same 16px as body copy, lift it out */
.sect h4.hd{font-size:19px;font-weight:700;color:var(--theme-color-secondary);margin-top:28px}

/* Pros/Cons: use only the ✅/❌ emoji, drop the template's red-circle bullet */
.hs-pros li:before,.hs-cons li:before{display:none !important}
.hs-pros li,.hs-cons li{padding-left:0 !important;list-style:none !important}

/* Icons are inline SVG inside the original <i>, so every existing rule that
   sized or coloured `i` still applies. The svg just fills that box. */
i.ic{display:inline-flex;align-items:center;justify-content:center;font-style:normal;line-height:1}
i.ic svg{width:1em;height:1em;fill:currentColor;display:block}

/* Footer payment logos: the original brand SVGs, white chip and all - that chip
   is the designer's own, and it is what keeps dark artwork (Visa, payz, Skrill,
   Perfect Money) readable on a near-black footer.

   Each file shipped as a 144x80 canvas with the logo filling only ~25% of it, so
   the chip was mostly empty white and the logo looked tiny at any CSS height. The
   canvas is now the ink box plus a 7-unit margin, so the logo fills ~60% and a
   given `height` is mostly logo.

   max-width matters for more than the logos: this block sits in .column2, and
   the footer splits the row between the two columns, so an oversized value here
   starves the menu in .column1 and makes its links wrap. 620px leaves the menu
   its full width. Left aligned everywhere, including mobile.

   Selector depth matches the theme's `footer.footer .footer__container
   .payments{display:flex}` or that rule wins. */
footer.footer .footer__container .payments{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:620px}
footer.footer .footer__container .payments img{
  width:auto;height:44px;max-height:44px;background:none;padding:0;
  border-radius:5px}
@media (max-width:991px){
  footer.footer .footer__container .payments{max-width:none;gap:9px}
  footer.footer .footer__container .payments img{height:40px;max-height:40px}
}