/* Brand layer.

   The donor theme (blocks.css + unitheme/style.css + custom.css) stays
   untouched; everything that pulls this build toward www.slotmafia.com lives
   here. Values are computed styles read off the real site, not estimates.

   Loads after every donor sheet, so plain specificity is enough and !important
   is only used where the theme sets the same property inline-equivalent. */

:root {
  --sm-gold-a: #ffd18e;
  --sm-gold-b: #c07733;
  --sm-ink-on-gold: #0f0f14;
  --sm-surface: #1c1c1c;
}

/* ---- content column ----------------------------------------------------

   Real site: `.container` is max-width 1616px with 32px side padding, so the
   column is 1376px at 1440 and 1616px from 1680 up. The donor used 20px, which
   left the page sitting 12px wider than the brand's at every width below the
   cap. The cap itself already matched. */
/* blocks.css declares `.sm_container{padding:16px!important}`, so matching it
   needs !important too - this is not defensive noise. */
.sm_container,
.sm_header .sm_container,
.sm_footer .sm_container {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

@media (max-width: 767px) {
  .sm_container,
  .sm_header .sm_container,
  .sm_footer .sm_container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* The drawer sets its own 12px padding and must not inherit the page column's. */
.sm-sidebar .sm_container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- header ------------------------------------------------------------
   64px on the real site against the donor's 74px. */
.sm_header {
  min-height: 64px;
  background: var(--sm-surface);
}

.sm_header > .sm_container,
.sm_header .sm_header__inner {
  min-height: 64px;
}

/* ---- mobile header ----------------------------------------------------

   At 360px the donor header overflowed the viewport by 24px: a 44px burger, a
   121px wordmark and two full-width buttons do not fit.

   The wordmark stays - it is the brand, and the square mark reads as a
   favicon stranded in a header. What goes instead is the second button: below
   400px only SIGN UP is kept, which is the one that matters and the only way
   to leave the wordmark its width down to 320px. */
@media (max-width: 767px) {
  .sm_header,
  .sm_header > .sm_container,
  .sm_header .sm_header__inner {
    min-height: 56px;
  }

  .sm_logo img {
    width: auto;
    height: 36px;
    object-fit: contain;
  }

  .sm_header .sm_buttons a,
  .sm_header .sm_buttons button {
    padding: 10px 14px;
  }
}

@media (max-width: 399px) {
  .sm_header .sm_buttons a:first-child,
  .sm_header .sm_buttons .secondary-btn {
    display: none;
  }
}

/* ---- header auth pair --------------------------------------------------

   Real site: both 40px tall, 10px/16px padding, 14px/700, uppercase, 0.2px
   tracking, radius 8. Log in is a hairline outline at 12% white; sign up is the
   brand gradient on near-black text. The donor had them at 36 and 38px with
   regular weight, sentence case and a much brighter border. */
.sm_header .sm_item.sm_btn,
.sm_header .sm_buttons a,
.sm_header .sm_buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10px 16px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.sm_header .sm_buttons a:first-child,
.sm_header .sm_buttons .secondary-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #fff;
}

.sm_header .sm_buttons a:first-child:hover,
.sm_header .sm_buttons .secondary-btn:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.sm_header .sm_buttons a:last-child,
.sm_header .sm_buttons .primary-btn {
  border: 0;
  background: linear-gradient(var(--sm-gold-a), var(--sm-gold-b));
  color: var(--sm-ink-on-gold);
}

.sm_header .sm_buttons a:last-child:hover,
.sm_header .sm_buttons .primary-btn:hover {
  filter: brightness(1.06);
  color: var(--sm-ink-on-gold);
}

/* ---- promo slider ------------------------------------------------------

   Card geometry read off www.slotmafia.com/en-AU: 448x312 with a 20px radius
   on a wide screen, 390x216 on a phone, 16px between slides, caption inset
   40px/32px. The title is the brand's condensed display face at 34/40 bold,
   the line under it Roboto 20 bold, the CTA 40px tall with 16/24 padding on
   the gold gradient.

   Big Shoulders Text is the real site's title face. It is not mirrored here, so
   the stack falls through to the condensed system faces before plain Roboto -
   the cards keep their narrow, stacked look either way. */
.sm-promo {
  position: relative;
  padding-bottom: 36px;
}

.sm-promo .sm-promo__card {
  position: relative;
  height: 312px;
  border-radius: 20px;
  overflow: hidden;
  user-select: none;
  /* `.promotions-slider .swiper-slide { padding: 40px 32px }` in the theme.
     Left in, it stacks with the caption's own 40px and pushes the copy 80px
     down from the card edge; the block then overflows the bottom and the CTA
     stops sitting on the baseline the three cards are meant to share. Two
     classes to match the theme's specificity - the caption owns the inset. */
  padding: 0;
}

/* The art is a 1328x784 landscape crop that has to fill a 448x312 card, so it
   is covered rather than fitted and anchored right, where the character in
   every one of these three sits. */
.sm-promo .sm-promo__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.sm-promo .sm-promo__caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 40px 32px;
  box-sizing: border-box;
}

.sm-promo .sm-promo__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Big Shoulders Text", "Roboto Condensed", "Arial Narrow", Roboto, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  text-transform: uppercase;
}

.sm-promo .sm-promo__text {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #fff;
}

/* Pushes the CTA to the bottom of the card whatever the copy above runs to, so
   the three buttons line up across the strip. */
.sm-promo .sm-promo__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 8px;
  background: linear-gradient(var(--sm-gold-a), var(--sm-gold-b));
  color: var(--sm-ink-on-gold);
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.sm-promo .sm-promo__cta:hover {
  filter: brightness(1.06);
  color: var(--sm-ink-on-gold);
  text-decoration: none;
}

.sm-promo .sm-promo__title + .sm-promo__text {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .sm-promo .sm-promo__card {
    height: 216px;
  }

  .sm-promo .sm-promo__caption {
    padding: 24px 20px;
  }

  .sm-promo .sm-promo__title {
    font-size: 26px;
    line-height: 30px;
  }

  .sm-promo .sm-promo__text {
    font-size: 16px;
    line-height: 22px;
  }

  .sm-promo .sm-promo__cta {
    padding: 12px 20px;
  }
}

/* Card bottom to category bar is 60px on the real site at desktop and 52px on
   a phone (12px to the dots, 24px of dots, then the section's own margin). The
   donor's 16px list margin plus its 20px spacer made 72px on both. The spacer
   is redundant once the margin is stated, so it goes. */
.promotions-slider {
  margin-bottom: 24px;
}

.promotions-slider + .sm-spacer {
  display: none;
}

@media (max-width: 767px) {
  .promotions-slider {
    margin-bottom: 16px;
  }
}

/* ---- slider dots ------------------------------------------------------- */

.sm-promo-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 24px;
}

.sm-promo-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.sm-promo-dot:hover {
  opacity: 0.8;
}

.sm-promo-dot--on {
  background: linear-gradient(var(--sm-gold-a), var(--sm-gold-b));
  opacity: 1;
}

/* A three-card strip that already fits shows every promo at once, so Swiper
   locks itself and a lone dot would be noise. */
.sm-promo-dots.swiper-pagination-lock {
  display: none;
}

.sm-promo:has(.sm-promo-dots.swiper-pagination-lock) {
  padding-bottom: 0;
}

/* ---- category filter row ------------------------------------------------

   Read off www.slotmafia.com/en-AU. The chip itself is the same pill at both
   widths - 40px radius, 8px gap, white label - and only its fill and scale
   change:

     >=768   100x48, transparent, 12px/16px padding, 16px label
     phone    88x40, #222222,     8px/12px padding, 14px label

   The bar around it is a #1c1c1c 12px-radius card on a wide screen with
   Providers pinned right (137x48, #222, radius 8), and nothing at all on a
   phone - no card, no Providers. That button is what pushed the donor's bar
   onto a second row and left it sitting 8px outside the column.

   The icons are 24px in #e1a663. The real site paints them with a background
   clipped to the glyph and a transparent colour, which is how it keeps the
   option of a gradient; a flat colour renders identically. */
.sm-cats {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background: #1c1c1c;
}

.sm-cats__rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sm-cats__rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sm-cats__chip,
.sm-cats__providers {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 12px 16px;
  box-sizing: border-box;
  border-radius: 40px;
  background: transparent;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease;
}

/* Providers is the one chip that is a button rather than a filter, so it keeps
   a fill and a square-ish corner to say so. */
.sm-cats__providers {
  padding: 12px 16px;
  border-radius: 8px;
  background: #222222;
}

.sm-cats__chip:hover,
.sm-cats__providers:hover {
  background: #292929;
  color: #fff;
  text-decoration: none;
}

.sm-cats__icon {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  color: #e1a663;
}

@media (max-width: 767px) {
  .sm-cats {
    padding: 0;
    border-radius: 0;
    background: transparent;
    /* Cancels the page gutter so the rail runs to both screen edges and reads
       as scrollable; the padding inside puts the first pill back on the line. */
    margin-inline: -16px;
  }

  .sm-cats__rail {
    padding-inline: 16px;
  }

  .sm-cats__chip {
    height: 40px;
    padding: 8px 12px;
    background: #222222;
    font-size: 14px;
  }

  .sm-cats__providers {
    display: none;
  }
}

/* ---- game strips --------------------------------------------------------

   Read off www.slotmafia.com/en-AU: 183x246 tiles with an 8px radius, 16px
   apart, under a Roboto 24/700 white heading. To its right a pair of 42x40
   round arrows, hairline-outlined at 12% white. The chevron inside them is
   drawn at 32px rather than the real site's 16px - the button is the right
   size, the glyph in it was too small to read. The TOP badge is teal
   (#56cac2) on near-black - not gold, which is what it looks like at a glance
   and is worth not guessing. Hover reveals a 56px gold play button and a DEMO
   pill over a dark scrim.

   The rail is a native overflow-x container, not a carousel: fixed-width tiles
   need nothing more, and wheel, trackpad, touch and keyboard all keep working.
   game-rows.js only drives the arrows. */
.sm-games {
  margin-bottom: 32px;
}

.sm-games__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.sm-games__title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
}

.sm-games__nav {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.sm-games__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  /* The chevron only inks about 70% of its em box (28px of paint at a 40px
     font-size, measured), so the glyph reads far smaller than the number
     suggests - at 16px it is barely 11px of visible mark. 32px puts roughly
     22px of chevron inside the 40px button, which is what it should look like.
     The long arrow glyphs are not an option: they carry a shaft and ink 77x20,
     so they cannot sit in a round button. */
  font-size: 32px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.sm-games__arrow:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}

.sm-games__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* A strip that fits entirely has nothing to page through. */
.sm-games.is-static .sm-games__nav {
  display: none;
}

.sm-games__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sm-games__rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sm-games__tile {
  position: relative;
  flex: 0 0 auto;
  width: 183px;
  height: 246px;
  border-radius: 8px;
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
}

.sm-games__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.sm-games__tile:hover .sm-games__art {
  transform: scale(1.04);
}

.sm-games__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 12px;
  background: #56cac2;
  color: #0f0f14;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

/* ---- hover / tap state ---- */

.sm-games__hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(15, 15, 20, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sm-games__tile:hover .sm-games__hover,
.sm-games__tile:focus-visible .sm-games__hover {
  opacity: 1;
}

.sm-games__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(var(--sm-gold-a), var(--sm-gold-b));
  color: var(--sm-ink-on-gold);
  font-size: 24px;
  transform: scale(0.85);
  transition: transform 0.2s ease;
}

.sm-games__tile:hover .sm-games__play {
  transform: scale(1);
}

.sm-games__demo {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 24px;
  background: #1c1c1c;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Touch screens never hover, so the overlay is revealed by a tap instead -
   game-rows.js marks the tapped tile and swallows that first tap, and the
   second one follows the link. Showing the play button permanently was tried
   and looked like a sticker on every tile. */
.sm-games__tile.is-active .sm-games__hover {
  opacity: 1;
}

.sm-games__tile.is-active .sm-games__play {
  transform: scale(1);
}

@media (max-width: 767px) {
  .sm-games {
    margin-bottom: 24px;
  }

  .sm-games__title {
    font-size: 20px;
    line-height: 28px;
  }

  .sm-games__nav {
    display: none;
  }

  /* The rail bleeds to both screen edges so the strip reads as scrollable, and
     its own padding puts the first tile back on the page's 16px gutter.

     scroll-padding is what makes that hold: snap positions are measured from
     the scrollport edge, not the content box, so with `scroll-snap-align:
     start` alone the browser silently scrolled the rail by exactly the 16px
     padding on load and parked tile one flush against the screen edge. */
  .sm-games__rail {
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .sm-games__tile {
    width: 140px;
    height: 188px;
  }
}

/* ---- promotions ---------------------------------------------------------

   Reproduced from www.slotmafia.com/en-AU. 448x312 card, 12px radius, 32px
   padding, artwork 528px wide and pulled 40px left so it bleeds past the card.

   The two text levels are the opposite way round from what they look like: the
   promo NAME is the small 14/500 line at 65% white, and the OFFER under it is
   the big Big Shoulders 27/700 headline. Swapping them is what made the first
   attempt read as empty.

   Footer: a 40px gold CTA and the bonus code pushed to the right edge. The
   real card also carries an info button between them; it is left out because
   there is no terms page here for it to open. */
.sm-promos {
  margin-bottom: 32px;
}

.sm-promos__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sm-promos__rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sm-promos__card {
  position: relative;
  flex: 0 0 auto;
  width: 448px;
  height: 312px;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
}

.sm-promos__art {
  position: absolute;
  top: 0;
  left: -40px;
  width: 528px;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.sm-promos__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
}

.sm-promos__name {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.65);
}

.sm-promos__offer {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  max-width: 384px;
  font-family: "Big Shoulders Text", "Roboto Condensed", "Arial Narrow", Roboto, sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
  text-transform: uppercase;
}

/* The row is pinned to 40px and the code chip is allowed to overhang it - the
   chip is 59px tall, and without this it stretches the row and lifts the CTA
   off the baseline the cards share. */
.sm-promos__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
}

.sm-promos__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 8px;
  background: linear-gradient(var(--sm-gold-a), var(--sm-gold-b));
  color: var(--sm-ink-on-gold);
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.sm-promos__cta:hover {
  filter: brightness(1.06);
  color: var(--sm-ink-on-gold);
  text-decoration: none;
}

/* ---- bonus code ----

   A 2px peach gradient frame with the fill showing through the inner box, a
   1px near-black ring inside it, and dark text on top. The gradient is the
   card's own accent, not the site gold - it is what makes this chip read as a
   coupon rather than another button. */
.sm-promos__code {
  margin-left: auto;
  padding: 2px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(260deg, #f97249 2.44%, #ffbca7 53.56%, #f97249 100%);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.sm-promos__code:hover {
  filter: brightness(1.06);
}

.sm-promos__code-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid #0f0f14;
  border-radius: 8px;
  color: #0f0f14;
  font-family: Roboto, sans-serif;
}

.sm-promos__code-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
}

.sm-promos__code-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.sm-promos__code-value .font-icons {
  font-size: 20px;
}

/* Swapped for a tick by promotions.js once the code is on the clipboard. */
.sm-promos__code.is-copied {
  background: linear-gradient(260deg, #56cac2 2.44%, #b6ece8 53.56%, #56cac2 100%);
}

@media (max-width: 767px) {
  .sm-promos {
    margin-bottom: 24px;
  }

  .sm-promos__rail {
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .sm-promos__card {
    width: min(340px, 88vw);
    height: 240px;
  }

  .sm-promos__body {
    padding: 20px;
  }

  .sm-promos__offer {
    margin-top: 12px;
    max-width: 220px;
    font-size: 22px;
    line-height: 25px;
  }

  .sm-promos__foot {
    gap: 8px;
  }

  .sm-promos__cta {
    height: 36px;
    padding: 8px 14px;
  }

}

/* ---- providers ----------------------------------------------------------

   216x112 tiles on #1c1c1c with an 8px radius and a fixed 144x72 logo box
   inside them, read off www.slotmafia.com/en-AU. The fixed box matters: these
   SVGs have wildly different aspect ratios, so sizing them off the tile alone
   let the wide ones run to 184px and the tall ones to 80px, and the row looked
   ragged. */
.sm-providers {
  margin-bottom: 32px;
}

.sm-providers__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sm-providers__rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sm-providers__tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 216px;
  height: 112px;
  padding: 20px 19px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #1c1c1c;
  scroll-snap-align: start;
  text-decoration: none;
  transition: background 0.15s ease;
}

.sm-providers__tile:hover {
  background: #222222;
}

.sm-providers__logo {
  width: 144px;
  height: 72px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .sm-providers {
    margin-bottom: 24px;
  }

  .sm-providers__rail {
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .sm-providers__tile {
    width: 160px;
    height: 88px;
    padding: 14px;
  }

  .sm-providers__logo {
    width: 112px;
    height: 56px;
  }
}

/* ---- footer icon rows ---------------------------------------------------

   Covers all three of them - payments, the licence badge and the
   responsible-gaming logos. The donor shipped each as a nowrap flex box with a
   capped height and `overflow: auto`, so the logos were stuffed into a window
   shorter than they are and each row grew its own vertical scrollbar. The
   responsible-gaming row was the worst: 100px of icons inside 41px.

   www.slotmafia.com/en-AU wraps instead: flex-wrap with a 24px row gap and a
   40px column gap, logos 32px tall at their natural width. */
.sm_footer .sm_icons__list,
.sm_icons__list.payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* Those icons are decoration, not navigation - they were wrapped in links to
   /goto/ by the donor and are plain spans now.

   Each still sits in its own box; without an explicit height the boxes keep
   their line-box height and the row measures taller than the logos it shows. */
.sm_footer .payments .sm_icon,
.sm_footer .responsibility-logos .sm_icon {
  display: flex;
  align-items: center;
  height: 32px;
}

/* Scoped to the two logo rows on purpose. A blanket rule here also caught the
   brand mark, which has a row of its own, and shrank it from 60px to 32px. */
.sm_footer .payments img,
.sm_footer .responsibility-logos img {
  width: auto;
  height: 32px;
  max-width: none;
  object-fit: contain;
}

/* Below 890px the donor forces `gap:1rem!important` and
   `justify-content:left!important` on every multi-icons block, so matching it
   needs !important too. */
@media (max-width: 890px) {
  /* Scoped to the two LOGO rows. Centring every icon row here also centred the
     brand mark, which sits in a row of its own and belongs on the left edge
     with the rest of the footer column. */
  .sm_footer .payments,
  .sm_footer .responsibility-logos,
  .sm_icons__list.payments {
    gap: 16px 24px !important;
    justify-content: center !important;
  }

  .sm_footer .payments .sm_icon,
  .sm_footer .responsibility-logos .sm_icon {
    height: 24px;
  }

  .sm_footer .payments img,
  .sm_footer .responsibility-logos img {
    height: 24px;
  }
}

/* ---- mobile bottom bar --------------------------------------------------

   56px on #1c1c1c with five equal columns, read off www.slotmafia.com/en-AU.
   Phones only - there is no such bar on a wide screen. */
.sm-bar {
  display: none;
}

@media (max-width: 767px) {
  .sm-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 56px;
    background: #1c1c1c;
    /* Keeps the row clear of the iOS home indicator without making it taller
       on anything that has no inset. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
  }

  .sm-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 56px;
    color: rgba(255, 255, 255, 0.65);
    font-family: Roboto, sans-serif;
    text-decoration: none;
  }

  .sm-bar__item:hover,
  .sm-bar__item:active {
    color: #fff;
    text-decoration: none;
  }

  .sm-bar__icon {
    font-size: 24px;
    line-height: 1;
  }

  /* The real bar marks the current section by the icon alone - the label stays
     at 65% white on every item, active or not. */
  .sm-bar__item.is-active .sm-bar__icon {
    color: #e1a663;
  }

  .sm-bar__label {
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }

  /* The bar floats over the page, so the footer needs room to clear it. */
  .sm_footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- article tables -----------------------------------------------------

   The donor styled these for a light page and left them in a dark one:
   `.sm_section thead th { background:#000; color:#f4f4f4 }` with a #f4f4f4
   border, and a 3px solid black rule under <thead>. On this background that
   reads as a white grid dropped onto the article.

   Every selector below is prefixed with `.sm_section` on purpose - the donor's
   own rules are `.sm_section thead th` and `.sm_section td`, and a plain
   `.sm-table th` loses to them.

   `table-layout: fixed` was the other half of it: with six columns it gave
   "Code" the same width as "Maximum Bonus", so wide columns wrapped while
   narrow ones sat half empty. Auto layout sizes each column to its content, the
   table grows past the viewport when it has to, and the figure scrolls. */
.sm_section .sm-table {
  margin: 0 0 24px;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sm_section .sm-table::-webkit-scrollbar {
  height: 0;
  display: none;
}

.sm_section .sm-table table,
.sm_section .sm-table table.sm-fixed-layout {
  width: auto;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border: 0;
  font-family: Roboto, sans-serif;
  /* `.sm_section table { margin: 1rem 0 }` in the donor. Outside a wrapper it
     was the table's own spacing; inside this bordered figure it becomes 16px of
     dead space above and below the rows, inside the border. The figure owns the
     spacing now. */
  margin: 0;
}

.sm_section .sm-table thead {
  border: 0;
}

.sm_section .sm-table thead th {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #222222;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
}

.sm_section .sm-table td {
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
}

/* The left-hand column is the label in every one of these tables, so it is the
   one the eye scans down - it gets the stronger colour. */
.sm_section .sm-table td:first-child {
  color: #fff;
  font-weight: 500;
}

.sm_section .sm-table tbody tr:first-child td {
  border-top: 0;
}

.sm_section .sm-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

/* Below 992px the donor turns every table into `display: block`. A block table
   is no longer a table: the rows stop sharing column widths and <thead> lays
   itself out at its own content width, which is why the header row measured
   1200px inside a 356px table and sat visibly off to the side. The figure above
   already scrolls, so the table can just stay a table. */
@media (max-width: 992px) {
  .sm_section .sm-table table,
  .sm_section .sm-table table.sm-fixed-layout {
    display: table;
  }
}

@media (max-width: 767px) {
  .sm_section .sm-table thead th,
  .sm_section .sm-table td {
    padding: 12px 14px;
  }
}

/* ---- article sections ---------------------------------------------------

   Each H2 and everything under it, its H3s included, is one <section> with an
   id taken from the heading. That gives the article a real outline instead of a
   flat run of headings, and every section a stable anchor. */
.sm-sec {
  margin-bottom: 40px;
  scroll-margin-top: 88px;
}

.sm-sec:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .sm-sec {
    margin-bottom: 28px;
    scroll-margin-top: 72px;
  }
}

/* An <a> with no href gets neither the pointer nor a focus ring, so both are
   restored here - see links.js for why the href is absent. */
[data-href] {
  cursor: pointer;
}

[data-href]:focus-visible {
  outline: 2px solid var(--sm-gold-a);
  outline-offset: 2px;
}

/* ---- in-page navigation -------------------------------------------------

   The header menu points at the article's sections. The header is sticky, so a
   plain jump would land the heading underneath it - scroll-margin-top reserves
   exactly the header's height plus a little air, and the browser handles the
   rest natively. */
html {
  scroll-behavior: smooth;
}

/* Someone who has asked the system for less motion should not be thrown down a
   12,000px page. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.sm-sec {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .sm-sec {
    scroll-margin-top: 72px;
  }
}

/* The donor styled these inline, including `padding:;` and
   `border:null null null`, which the menu rewrite stripped. */
.sm_header .sm_item {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sm_header .sm_item:hover {
  color: #fff;
  text-decoration: none;
}

/* The 24px between menu items lived in a `style="gap:24px"` on the container.
   Stripping the donor's inline styles took it with them and the labels ran
   together as one word - the theme's own `.sm_menu_items` only sets
   `display:flex`, with no gap of its own. */
.sm_header .sm_menu_items {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* The theme puts `gap:1rem` on each item for the icon-plus-label case. A text
   label has no icon, so that gap only adds stray space inside the link.

   The donor wrapped each label in <strong> and typed it in capitals; the
   rewrite dropped both and the row went light and sentence-cased. The weight
   and the capitals belong in CSS, not in the markup - the label reads "Live
   Casino" in the source and is shouted by the stylesheet. */
.sm_header .sm_menu_items .sm_item {
  gap: 0;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.sm_header .sm_menu_items .sm_item--search {
  cursor: pointer;
}

/* ---- footer navigation --------------------------------------------------

   The layout is the donor's - `sm-columns` and `menu_items-vertical` do all of
   it. Only two things are set here: the column width, because there are four
   columns where the donor had six, and the two text colours, which the donor
   wrote inline on every single link (`color:#ffffff` on the title,
   `color:#fff6` on the rest).

   `.sm_footer` prefixes are load-bearing: the theme's
   `.sm_section li > a, .sm_section p > a { color:#f1c27d }` outranks a bare
   class and turns the whole menu gold. */
.sm_footer .sm-fnav__col {
  flex-basis: 25%;
}

.sm_footer .sm-fnav .sm_menu_item {
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}

/* No extra margin: the theme's `menu_items-vertical` already puts 1rem between
   every entry, and adding to it under the title made the gap half again as big
   as the one between the links. */
.sm_footer .sm-fnav .sm_menu_item.sm-fnav__title {
  margin-bottom: 0;
  color: #fff;
}

.sm_footer .sm-fnav a.sm_menu_item.sm-fnav__link {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s ease;
}

.sm_footer .sm-fnav a.sm_menu_item.sm-fnav__link:hover {
  color: #fff;
  opacity: 1;
  text-decoration: none;
}

.sm_footer .sm-fnav__brand img {
  width: 135px;
  height: 56px;
  object-fit: contain;
}

/* The donor's own breakpoint for this row: the columns stop being quarters and
   wrap, two to a line, with the mark on its own. */
@media (max-width: 900px) {
  .sm_footer .sm-fnav {
    flex-wrap: wrap !important;
  }

  .sm_footer .sm-fnav__col {
    flex-basis: 50%;
  }
}

@media (max-width: 560px) {
  .sm_footer .sm-fnav__col {
    flex-basis: 100%;
  }
}

/* ---- header fits its own width ------------------------------------------

   The theme hides the header menu below 768px, which is too late: burger (44)
   + logo (121) + menu (502) + auth pair (186) + the column's 32px gutters need
   about 960px, so between 768 and 960 the SIGN UP button hung 34px past the
   right edge and the whole page scrolled sideways. Inherited from the donor,
   whose own menu was wider still.

   The burger is present at every width, so hiding the inline menu earlier costs
   no navigation. */
@media (max-width: 1023px) {
  .sm_header .sm_menu_items {
    display: none !important;
  }
}

/* The footer's icon rows are centred - that is right for the payment and
   responsible-gaming logos, which is what the rule was written for. The brand
   mark shares the same `sm_icons__list` class and was caught by it, so it sat
   93px into its column instead of on the page's left edge. */
.sm_footer .sm-fnav__brand {
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* ---- footer column alignment --------------------------------------------

   The theme caps `.container` at `max-width: 90%` below 1366px. The footer is
   the only place that class is used, and its contents then sit inside
   `.sm_container` as well, so the footer got 5% plus 16px of gutter while the
   article above it got 16px - the whole footer was visibly narrower than the
   page it belongs to, and more so the smaller the screen.

   Full width here; the inner container supplies the same gutter as everywhere
   else. */
.sm_footer .container {
  max-width: 100%;
}