/* ==========================================================================
   Casino Welcome Offer — Redesign v3 (state-driven)
   Page: /promotions/casino-welcome-offer

   HOW TO READ THIS FILE (for the marketing / content team)
   - The page is split into numbered SECTIONS (1–13) that match the page top to
     bottom: hero image, content card, reward card, "How it works", game tiles,
     CTA bar, key terms, T&Cs, help widget.
   - Every style rule below has a short comment saying WHAT it styles and WHERE
     it appears, so you can find and tweak the right block.
   - `var(--semantic-...)` / `var(--theme-...)` are the galabingo brand colours
     (managed by the Design System). Prefer leaving those as-is so the page
     stays on-brand.

   The page supports SIX states. Each state's blocks are authored as SEPARATE
   Sitecore items, gated by a DSL `condition` so only the matching one renders.
   The condition on each item decides what shows.

     1 · Logged out — existing customer   (NOT User.LoggedIn AND User.IsKnown)
     2 · Logged out — new customer        (NOT User.LoggedIn AND NOT User.IsKnown)
     3 · Logged in — in progress          (offer opted-in/offered + EDS InProgress)
     4 · Claimed — Free Spins credited    (offer opted-in + EDS credited, not all used)
     5 · Claimed — all spins used         (offer opted-in + EDS all spins used)
     6 · Expired — not claimed in time    (offer expired / EDS window closed)

   Component-variant classes (status-badge--*, reward-card--*, step
   is-done/is-current/is-locked/is-expired) style the per-state blocks.

   NOTE: the offer-button directive ([data-offer-id]) reflects status on its
   host as data-offer-status="…", and the EDS progress API (Angular) supplies the
   credited-vs-all-used / progress detail. These feed the per-item DSL conditions
   that pick which state's item renders.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base / Reset
   -------------------------------------------------------------------------- */

/* The whole promo page wrapper. Sets the brand font, default text colour, the
   light page background, centres the content and caps its width on big screens. */
.mpp-content {
  font-family: var(--font-family-base);
  color: var(--semantic-color-on-surface-base);
  background: var(--semantic-color-surface-container-low-base);
  padding: 0 0 24px;
  margin: 0 auto;
  max-width: 600px;
  overflow: clip;
  /* clip stray horizontal overflow without becoming a scroll container */
}

/* Sizing reset for everything on the page (padding/border included in widths). */
.mpp-content *,
.mpp-content *::before,
.mpp-content *::after {
  box-sizing: border-box;
}

/* The dark navy area behind the hero image + disclaimer (top of the page). */
.hero-zone {
  position: relative;
  background: #09124c;
  /* Figma hero base navy */
}

/* --------------------------------------------------------------------------
   2. Hero Image + Back Button
   -------------------------------------------------------------------------- */

/* The round "back" button sitting over the top-left of the hero image. */
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2143ca;
  box-shadow: 0px 4px 6px rgba(166, 66, 59, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.backlink {
  position: absolute;
}

.back-button-text {
  display: none;
}

/* The white "<" arrow icon inside the back button. */
.back-button .theme-arrow-left {
  color: var(--semantic-color-on-surface-base-inverse);
  /* note #4: onSurface/inverse (= #fff) */
  font-size: 18px;
  line-height: 1;
}

/* The hero image wrapper (holds the image, back button and disclaimer). */
.main-image {
  margin: 0;
  padding: 0;
  position: relative;
}

/* The hero promo image itself — full width, fixed 300px tall (per Figma), cropped
   to fill. Use an asset close to 390x300 (≈1.3:1, e.g. 780x600 @2x) so the artwork
   isn't cropped; a wide asset (e.g. 1650x650) will be centre-cropped to fit. */
.main-image img,
.main-image .pc-img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
}

/* The small print (18+, T&Cs) that sits over the bottom of the hero image.
   Strong dark gradient (near-black at the bottom) + light frosted blur so the
   white text stays readable over the busy artwork — per Figma. */
.hero-disclaimer {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.95) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  /* fade the frosted band (blur + gradient) in from the top so there's no hard edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  padding: 56px 16px 44px;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  font-size: var(--semantic-typography-label-xs-font-size);
  /* Figma "Description": Label/xs — 9 */
  font-weight: var(--semantic-typography-label-xs-font-weight);
  /* 400 (regular) */
  line-height: var(--semantic-typography-label-xs-line-height);
  /* 12 */
  color: var(--semantic-color-on-surface-base-inverse);
  /* #fff */
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. Content Card (pulls up into the disclaimer area)
   -------------------------------------------------------------------------- */

/* The light rounded panel that overlaps the bottom of the hero and holds the
   status badge + page title. The negative top margin makes it tuck up over the
   hero image. */
.content-card {
  /* How far this panel tucks up over the bottom of the hero image — single
     source of truth so the pull-up and the coverage guarantee below stay in
     sync. */
  --hero-overlap: 28px;
  background: var(--semantic-color-surface-container-low-base);
  border-radius: 28px 28px 0 0;
  position: relative;
  z-index: 2;
  box-shadow: 0px -12px 20px 0px rgba(12, 24, 96, 0.4);
  padding: 24px 16px 0;
  margin-top: calc(var(--hero-overlap) * -1);
  /* Guarantee the panel is at least as tall as it tucks up, so its light
     background always reaches the hero's bottom edge. Without this, in a state
     where this panel is empty (no status bar / title) it ends up shorter than
     the tuck and the hero's dark bottom shows through as a thin line at the seam. */
  min-height: var(--hero-overlap);
}

/* --------------------------------------------------------------------------
   3a. Status Bar (badge + expiry) — colour by variant
   -------------------------------------------------------------------------- */

/* The row holding the status badge (left) and the expiry text (right). */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 16px;
}

/* The rounded status pill itself (e.g. "Available", "In progress"). Colour is
   set by the variant classes below. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid transparent;
}

/* The small coloured dot inside the status badge. */
.status-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* The "Expires: …" text on the right of the status row. */
.status-expiry {
  font-size: 13px;
  color: #6b7280;
}

/* Status badge colour — Available / Credited (green). */
.status-badge--available,
.status-badge--credited {
  background: #f0fdf4;
  border-color: #d1fae5;
  color: #166534;
}

/* Status badge colour — In progress (blue). */
.status-badge--inprogress {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

/* Status badge colour — Claimed / used (grey). */
.status-badge--claimed {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #4b5563;
}

/* Status badge colour — Expired (red). */
.status-badge--expired {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

/* --------------------------------------------------------------------------
   4. Page Title & Subtitle
   -------------------------------------------------------------------------- */

/* Wrapper around the big offer title + subtitle (inside the content card). */
.page-title {
  padding: 0 0 16px;
}

/* The big offer headline, e.g. "Grab 100 Free Spins". */
.page-title h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--semantic-color-on-surface-base);
  margin: 0 0 10px;
  line-height: 36px;
}

/* The supporting sentence under the headline. */
.page-title .subtitle {
  font-size: 14px;
  color: #4d5266;
  line-height: 20px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Reward Card — base + variants

   The coloured card showing "Your reward / 100 Free Spins". The background
   image is set in Sitecore; the gradient below is a fallback. Variant classes
   (reward-card--*) change the colour per state.
   -------------------------------------------------------------------------- */

/* The reward card container (rounded, white text). */
.reward-card {
  margin: 20px 16px;
  padding: 20px;
  border-radius: 16px;
  color: #ffffff;
  /* background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c026d3 100%); */
  background: url(https://scmedia.itsfogo.com/$-$/319c92e82bee4647a08db1fe07743d28.png) center / cover no-repeat;
}

/* Top row of the reward card: icon + reward text (+ optional pill on the right). */
.reward-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* The square icon tile (🎰) at the left of the reward card. */
.reward-card .reward-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}

/* The small "YOUR REWARD" label above the reward value. */
.reward-card .reward-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 2px;
}

/* The big reward value, e.g. "100 Free Spins". */
.reward-card .reward-value {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

/* The line under the reward (e.g. "No wagering · …" or "To qualify: …"),
   with a faint divider line above it. */
.reward-card .reward-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Small status pill in the reward card header (Credited / All used / Expired). */
.reward-card .reward-pill {
  margin-left: auto;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  white-space: nowrap;
}

/* "X steps to claim" info pill (top-right of the reward card, non-claimed states). */
.reward-card .reward-steps {
  margin-left: auto;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

/* Wrapper for the progress bar shown on the reward card (in-progress state only). */
.reward-progress {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  /* Figma divider above the bar */
}

/* The grey track of the progress bar. */
.reward-progress .progress-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.24);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* The filled (white) portion of the progress bar — width set inline per user. */
.reward-progress .progress-fill {
  height: 100%;
  min-width: 4px;
  /* Figma: keep a 4px rounded nub even at low progress */
  background: #ffffff;
  border-radius: 5px;
  transition: width 0.3s;
}

/* The "£X of £Y · £Z to go" row under the progress bar. */
.reward-progress .progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
}

/* Left label of the progress row (amount spent). */
.reward-progress .progress-spent {
  color: #c3e0f7;
  /* Figma Label/md on dark image */
}

/* Right label of the progress row (amount remaining). */
.reward-progress .progress-remaining {
  color: #ffffff;
  font-weight: 400;
}

/* Reward card background — IN PROGRESS state (blue). */
.reward-card--progress {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
}

/* Reward card background — CREDITED state (blue). */
.reward-card--credited {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
}

/* Reward card background — ALL USED state (grey). */
.reward-card--allused {
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

/* Reward card background — EXPIRED state (grey). */
.reward-card--expired {
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
}

/* --------------------------------------------------------------------------
   6. How It Works — per-state section

   `howitworks` is a folder (class `how-it-works`) holding ONE full-section
   pctext per page-state, each gated by a DSL condition so only the matching
   one renders:
     howitworks-loggedout
     howitworks-loggedin-inprogress
     howitworks-claimed   …etc.

   Each item's rich text contains the WHOLE section — title + subtitle + all
   steps — so a brand/offer is set up by editing a handful of self-contained
   items rather than many per-step slots:

     <h2 class="section-title">How it works</h2>
     <p class="section-subtitle">…</p>
     <div class="steps">
       <div class="step is-done|is-current|is-locked|is-expired"> … </div>
       …
     </div>

   Step row state comes from the modifier class on each `.step`:
     (none)       logged-out default (uniform brand-blue circle, no status)
     is-current   the active/next step (brand blue circle, utility-blue row)
     is-done      a completed step (green tick)
     is-locked    a not-yet-reachable step (grey)
     is-expired   a step that expired before completion  (red circle/label)
     is-qualified a completed step shown with a gift icon (green circle)
   -------------------------------------------------------------------------- */

/* The white "How it works" card. */
.how-it-works {
  background: var(--semantic-color-surface-base);
  border-radius: 16px;
  margin: 0 16px 24px;
  padding: 24px 20px;
}

/* Removes a stray legacy padding the inner Sitecore text block may carry, so
   the card's own padding controls spacing. */
.mpp-content .how-it-works .p-3 {
  padding: 0;
}

/* The "How it works" heading. */
.how-it-works .section-title {
  font-size: var(--semantic-typography-title-lg-strong-font-size);
  /* note #13: Title/lg strong — 20 */
  font-weight: var(--semantic-typography-title-lg-strong-font-weight);
  /* 700 */
  line-height: var(--semantic-typography-title-lg-strong-line-height);
  /* 26 (DS value; spec note's 28 is off-scale) */
  color: var(--semantic-color-on-surface-base);
  margin: 0 0 4px;
}

/* The line under the heading, e.g. "3 steps to claim your reward". */
.how-it-works .section-subtitle {
  font-size: var(--semantic-typography-body-md-font-size);
  /* note #14 subtext: body/md — 14 */
  line-height: var(--semantic-typography-body-md-line-height);
  /* 20 */
  color: var(--semantic-color-on-surface-subtle);
  /* note #14: "surface/subtle" → on-surface/subtle */
  margin: 0 0 16px;
}

/* The vertical list that stacks the step rows with even spacing. */
.how-it-works .steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  /* anchor the connector line below */
}

/* The vertical connector "pipe" between step circles (Figma). One line centred
   on the circle column, sitting BEHIND the rows — so it shows only in the gaps
   between rows and connects each circle to the next, regardless of how tall the
   text makes a row. */
.how-it-works .steps::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 31px;
  /* centres the 2px line on the 36px circle column */
  width: 2px;
  background: #b4c8f7;
  /* Figma connector colour (no exact semantic token) */
  z-index: 0;
}

/* A single step row — base look (logged-out default: light row, solid
   brand-blue numbered circle, no status label). */
.how-it-works .step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--semantic-color-surface-container-low-base);
  transition: background-color 0.2s, border-color 0.2s;
  position: relative;
  /* paint the row above the connector so the line shows only in the gaps */
  z-index: 1;
}

/* The round numbered circle at the left of a step (brand blue by default). */
.how-it-works .step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--theme-brand-02);
  color: #ffffff;
}

/* The middle text column of a step (title + description). */
.how-it-works .step-content {
  flex: 1;
  min-width: 0;
}

/* A step's title line, e.g. "Create an account". */
.how-it-works .step-title {
  font-size: var(--semantic-typography-body-md-font-size);
  /* note #14 step title: body/md — 14 */
  font-weight: var(--semantic-typography-body-md-font-weight);
  /* 400 */
  line-height: var(--semantic-typography-body-md-line-height);
  /* 20 */
  color: var(--semantic-color-on-surface-base);
  margin: 0 0 2px;
}

/* A step's description line, e.g. "It only takes a few minutes". */
.how-it-works .step-desc {
  font-size: var(--semantic-typography-body-sm-font-size);
  /* note #14 step subtext: 12/16 (= body/sm; note labelled it body/md) */
  line-height: var(--semantic-typography-body-sm-line-height);
  /* 16 */
  color: var(--semantic-color-supporting-gray-base-inverse);
  /* note #14: supporting/grey/baseInverse (token spelled "gray") */
  margin: 0;
}

/* The status label on the right of a step (Done / In progress / Locked / Expired). */
.how-it-works .step-status {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #b9bec7;
}


.how-it-works .no-status .step-status {
  display: none;
}

/* DONE step — green circle (the number is replaced by a tick below). */
.how-it-works .step.is-done .step-number {
  background: #81da64;
  color: var(--semantic-color-on-positive-base);
  position: relative;
}

/* Hide the number on a done step (the tick takes its place). */
.how-it-works .step.is-done .step-number .number-text {
  display: none;
}

/* The green tick shown on a done step. */
.how-it-works .step.is-done .step-number::after {
  content: '\2713';
  /* ✓ — unicode escape so it survives non-UTF-8 encoding/CDN serving */
  font-size: 18px;
  font-weight: 700;
}

/* "Done" status label colour on a done step. */
.how-it-works .step.is-done .step-status {
  color: var(--semantic-color-on-surface-base);
}

/* CURRENT / IN PROGRESS step — light blue row with a blue outline. */
.how-it-works .step.is-current {
  background: var(--semantic-color-utility-container-base);
  border-color: var(--semantic-color-surface-outline-high-active);
}

/* The numbered circle on the current step (brand blue). */
.how-it-works .step.is-current .step-number {
  background: var(--theme-brand-02);
}

/* "In progress" status label colour. */
.how-it-works .step.is-current .step-status {
  color: var(--theme-brand-02);
}

/* LOCKED step — light row, muted grey circle. */
.how-it-works .step.is-locked {
  background: var(--semantic-color-surface-container-low-base);
}

/* The grey numbered circle on a locked step. */
.how-it-works .step.is-locked .step-number {
  background: #b8bdd1;
}

/* Muted grey title on a locked step. */
.how-it-works .step.is-locked .step-title {
  color: #73788c;
}

/* Muted grey description + status on a locked step. */
.how-it-works .step.is-locked .step-desc,
.how-it-works .step.is-locked .step-status {
  color: #8c91a6;
}

/* EXPIRED step — light red row. */
.how-it-works .step.is-expired {
  background: #fce9e9;
  /* light-red row; theme has no light-negative surface token */
}

/* The red circle on an expired step (number replaced by a cross below). */
.how-it-works .step.is-expired .step-number {
  background: var(--semantic-color-negative-base);
  color: var(--semantic-color-on-negative-base);
}

/* Hide the number on an expired step (the cross takes its place). */
.how-it-works .step.is-expired .step-number .number-text {
  display: none;
}

/* The red cross shown on an expired step. */
.how-it-works .step.is-expired .step-number::after {
  content: '\2715';
  /* ✕ — unicode escape so it survives non-UTF-8 encoding/CDN serving */
  font-size: 16px;
  font-weight: 700;
}

/* Muted grey title on an expired step. */
.how-it-works .step.is-expired .step-title {
  color: #73788c;
}

/* Muted grey description on an expired step. */
.how-it-works .step.is-expired .step-desc {
  color: #8c91a6;
}

/* Red "Expired" status label. */
.how-it-works .step.is-expired .step-status {
  color: #ae1d1d;
}

/* QUALIFIED step - same green circle as a done step, but the number is
   replaced by a gift icon (below) instead of a tick. */
.how-it-works .step.is-qualified .step-number {
  background: #81da64;
  color: var(--semantic-color-on-positive-base);
  position: relative;
}

/* Hide the number on a qualified step (the gift icon takes its place). */
.how-it-works .step.is-qualified .step-number .number-text {
  display: none;
}

/* The gift icon shown on a qualified step - the exact 14x14 Figma glyph
   (white gift with the 0.6-opacity boxes) embedded as an SVG data URI so it
   renders flat/white rather than as a colour emoji. */
.how-it-works .step.is-qualified .step-number::after {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23c)'%3E%3Cg opacity='0.6'%3E%3Cpath d='M9.45257e-10 4.66683C9.6795e-10 4.34466 0.261167 4.0835 0.583333 4.0835L5.25 4.0835C5.57217 4.0835 5.83333 4.34466 5.83333 4.66683L5.83333 7.00016C5.83333 7.32233 5.57217 7.5835 5.25 7.5835L0.583333 7.5835C0.261167 7.5835 7.58203e-10 7.32233 7.80896e-10 7.00016L9.45257e-10 4.66683Z' fill='%23F0F3FE'/%3E%3Cpath d='M8.16667 4.66683C8.16667 4.34466 8.42783 4.0835 8.75 4.0835L13.4167 4.0835C13.7388 4.0835 14 4.34466 14 4.66683L14 7.00016C14 7.32233 13.7388 7.5835 13.4167 7.5835L8.75 7.5835C8.42783 7.5835 8.16667 7.32233 8.16667 7.00016L8.16667 4.66683Z' fill='%23F0F3FE'/%3E%3Cpath d='M1.16667 7.00016L5.83333 7.00016L5.83333 14.0002L3.5 14.0002C2.21134 14.0002 1.16667 12.9555 1.16667 11.6668L1.16667 7.00016Z' fill='%23F0F3FE'/%3E%3Cpath d='M12.8333 7.00016L8.16667 7.00016L8.16667 14.0002L11.0833 14.0002C12.0498 14.0002 12.8333 13.2167 12.8333 12.2502L12.8333 7.00016Z' fill='%23F0F3FE'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.41667 2.48941L6.41667 2.33333C6.41667 1.04467 5.372 3.78405e-10 4.08333 2.87631e-10C2.79467 1.96857e-10 1.75 1.04467 1.75 2.33333C1.75 3.03024 2.05552 3.65578 2.53994 4.08333L0.408333 4.08333C0.182818 4.08333 6.85839e-10 4.26615 6.69953e-10 4.49167L4.80939e-10 7.175C4.65053e-10 7.40052 0.182817 7.58333 0.408333 7.58333L1.16667 7.58333L1.16667 12.5417C1.16667 13.3471 1.81958 14 2.625 14L11.375 14C12.1804 14 12.8333 13.3471 12.8333 12.5417L12.8333 7.58333L13.5917 7.58333C13.8172 7.58333 14 7.40052 14 7.175L14 4.49167C14 4.26615 13.8172 4.08333 13.5917 4.08333L11.4601 4.08333C11.9445 3.65578 12.25 3.03024 12.25 2.33333C12.25 1.04467 11.2053 7.89306e-10 9.91667 6.98532e-10C8.628 6.07758e-10 7.58333 1.04467 7.58333 2.33333L7.58333 2.48941C7.41173 2.39015 7.2125 2.33333 7 2.33333C6.7875 2.33333 6.58827 2.39015 6.41667 2.48941ZM9.91766 4.08333L8.16667 4.08333L8.16667 2.33333C8.16667 1.36683 8.95017 0.583333 9.91667 0.583333C10.8832 0.583333 11.6667 1.36683 11.6667 2.33333C11.6667 3.2995 10.8837 4.08279 9.91766 4.08333ZM7 4.08333C6.67783 4.08333 6.41667 3.82217 6.41667 3.5C6.41667 3.17783 6.67783 2.91667 7 2.91667C7.32217 2.91667 7.58333 3.17783 7.58333 3.5C7.58333 3.82217 7.32217 4.08333 7 4.08333ZM5.83333 2.33333C5.83333 1.36683 5.04983 0.583333 4.08333 0.583333C3.11683 0.583333 2.33333 1.36683 2.33333 2.33333C2.33333 3.2995 3.1163 4.08279 4.08234 4.08333L5.83333 4.08333L5.83333 2.33333ZM5.83333 4.66667L5.83333 13.4167L8.16667 13.4167L8.16667 4.66667L5.83333 4.66667ZM5.25 4.66667L5.25 7L0.583333 7L0.583333 4.66667L5.25 4.66667ZM8.75 4.66667L8.75 7L13.4167 7L13.4167 4.66667L8.75 4.66667ZM8.75 13.4167L8.75 7.58333L12.25 7.58333L12.25 12.5417C12.25 13.0249 11.8582 13.4167 11.375 13.4167L8.75 13.4167ZM2.625 13.4167L5.25 13.4167L5.25 7.58333L1.75 7.58333L1.75 12.5417C1.75 13.0249 2.14175 13.4167 2.625 13.4167Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='14' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* "Qualified" status label colour (matches a done step). */
.how-it-works .step.is-qualified .step-status {
  color: var(--semantic-color-on-surface-base);
}

/* --------------------------------------------------------------------------
   7. Game Tiles — Horizontal Scroll

   Maps to the EXISTING Sitecore structure: one `pctext` item per game inside
   the `gametiles` folder. The folder (class `game-tiles`) is the scroll row;
   each per-game item (class `p-1`) is a flex tile. An optional heading item
   (class `game-tiles-header`) can sit immediately before the folder.

   Selectors are scoped under .mpp-content so they beat the legacy utility
   classes still on the items (`m-6` on the folder, `p-1` on each tile).
   -------------------------------------------------------------------------- */

/* The "Play your Free Spins on these games" heading bar. It forms the TOP of
   the white games card (rounded top corners); the shadow is clipped at the
   bottom so it joins seamlessly with the tiles row below. */
.game-tiles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 16px;
  padding: 24px 16px 12px;
  background: var(--semantic-color-surface-base);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  clip-path: inset(-12px -12px 0 -12px);
}

/* The heading text in the games card header. */
.game-tiles-header .section-title {
  font-size: var(--semantic-typography-title-lg-strong-font-size);
  /* note #13: Title/lg strong — 20 */
  line-height: var(--semantic-typography-title-lg-strong-line-height);
  /* 26 (DS value; spec note's 28 is off-scale) */
  font-weight: var(--semantic-typography-title-lg-strong-font-weight);
  /* 700 */
  color: var(--semantic-color-on-surface-base);
  margin: 0 0 4px;
  /* UAT: gap between the title and the "14 games" tag (was glued) */
}

/* The "14 games" count pill on the right of the games header. */
.game-tiles-header .game-count {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--semantic-color-on-surface-base);
  background: rgba(17, 34, 104, 0.24);
  border: 1px solid #b3b3b3;
  padding: 4px 8px;
  border-radius: 1000px;
  white-space: nowrap;
}

/* The horizontally-scrolling row of game tiles. It also forms the BOTTOM of the
   white games card (rounded bottom corners); the top shadow is clipped so it
   merges with the header above into one card. */
.mpp-content .game-tiles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  /* match padding-left so scroll-snap doesn't auto-scroll past the gutter, leaving the first tile flush to the card edge */
  -webkit-overflow-scrolling: touch;
  margin: 0 16px 24px;
  /* neutralise legacy `m-6`; align with header card + 24px gap to next section */
  padding: 12px 16px 24px;
  background: var(--semantic-color-surface-base);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  clip-path: inset(0 -12px -12px -12px);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hides the scrollbar on the games row (Chrome/Safari). */
.mpp-content .game-tiles::-webkit-scrollbar {
  display: none;
}

/* Each game item is a fixed-width tile in the scroll row. */
.mpp-content .game-tiles>* {
  flex: 0 0 200px;
  max-width: 200px;
  margin: 0;
  /* The galabingo theme puts `.p-1 { padding: .25rem !important }` on each tile,
     which insets the first tile ~4px past the page gutter and shrinks the image.
     Our selector is more specific (.mpp-content .game-tiles > *), so an
     !important here cleanly overrides that legacy utility and re-aligns the row. */
  padding: 0 !important;
  scroll-snap-align: start;
}

/* The inner game tile wrapper. */
.mpp-content .game-tiles .game-tile {
  width: 200px;
}

/* The game image card (rounded, bordered, drop shadow). */
.mpp-content .game-tiles .game-tile a {
  display: block;
  box-sizing: border-box;
  width: 200px;
  border: 2px solid rgba(10, 10, 13, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* The square game artwork inside each tile. */
.mpp-content .game-tiles .game-tile img,
.mpp-content .game-tiles .game-tile .pc-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

/* The game name shown beneath each tile image. */
.mpp-content .game-tiles .game-tile-name {
  display: block;
  margin-top: 8px;
  padding: 0 2px;
  font-size: 14px;
  /* UAT: supporting text, not bold. A galabingo theme rule forces 700 with
     !important, so a plain 400 loses — override it here (selector already scoped
     to our carousel, same situation as the .p-1 padding above). */
  font-weight: 400 !important;
  line-height: 17px;
  color: var(--semantic-color-on-surface-base);
}

/* --------------------------------------------------------------------------
   8. CTA Bar (fixed floating)

   The "Join here / Log in / Deposit" bar pinned to the bottom of the screen.

   Sits ABOVE the host-app `ds-bottom-nav` (60px tall, z-index 1030). We offset
   `bottom` by the nav height and keep z-index below it so the nav always wins
   if they ever touch. Bottom-of-page clearance is provided by the host-app
   footer that renders below `.mpp-content`, so no large bottom padding is
   needed on the content (that just creates dead space when the T&C is
   collapsed).

   NOTE: 60px assumes the host-app bottom nav. If this page is ever rendered in
   a context WITHOUT that nav (e.g. standalone mobile portal iframe), set
   `--bottom-nav-h: 0px`.
   -------------------------------------------------------------------------- */

/* Defines the bottom-nav height used to lift the CTA bar (see note above). */
.mpp-content {
  --bottom-nav-h: 60px;
}

/* The fixed wrapper that pins the CTA bar to the bottom; transparent so the
   bar floats with no backdrop fade. */
.cta-section {
  position: fixed;
  /* Lift above the host-app bottom nav AND the device safe area (home indicator
     / gesture bar). Without the safe-area term the bar drops into the nav on
     real devices that reserve bottom space, killing the gap. env() resolves to
     0 where there's no safe area, so desktop/older devices are unaffected. */
  bottom: calc(var(--bottom-nav-h, 0px) + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 16px 16px;
  background: transparent;
  /* Figma: bar floats with no backdrop fade */
  max-width: 600px;
  margin: 0 auto;
}

/* The floating white CTA pill: text on the left, button on the right. */
.cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--semantic-color-surface-container-high-base);
  border-radius: 28px;
  padding: 13px 14px;
  box-shadow: 0px 12px 34px rgba(7, 16, 68, 0.22);
  backdrop-filter: blur(9px);
}

/* The text column inside the CTA bar. */
.cta-bar .cta-text {
  flex: 1;
  min-width: 0;
}

/* The CTA bar's bold title, e.g. "Join to get started". */
.cta-bar .cta-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  color: var(--semantic-color-on-surface-base);
  margin: 0 0 2px;
}

/* The CTA bar's smaller subtitle line. */
.cta-bar .cta-subtitle {
  font-size: var(--semantic-typography-body-md-font-size);
  /* UAT floating banner body: 14 (was 12) */
  line-height: var(--semantic-typography-body-md-line-height);
  /* 20 */
  color: #6870a8;
  margin: 0;
}

/* Action button (and the "Get help" button in the help card, section 10b).

   These are authored in Sitecore rich text as plain
   <a class="ds-button ds-btn-filled-primary ds-btn-..."> - they are NOT real
   DsButton components (rich text can't instantiate Angular components). DsButton
   styles use ViewEncapsulation.None, so Angular only injects them when a real
   DsButton renders somewhere on the page. On logged-in states the header has no
   Join / Log-in DsButtons, so nothing injects those styles and these buttons
   render as unstyled plain text.

   So we style them here with the SAME semantic tokens DsButton filled-primary
   resolves to (stays on-brand / theme-driven), scoped under .mpp-content so the
   header's real DsButtons are untouched. Specificity (0,3,0) intentionally beats
   the DS injected rule (0,2,0), so the look is identical whether or not the DS
   component styles happen to be present on the page. */

/* Filled-primary base - shared by the floating CTA and the "Get help" button. */
.mpp-content .ds-button.ds-btn-filled-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--semantic-radius-l2-button-large);
  background: var(--semantic-color-primary-base);
  color: var(--semantic-color-on-primary-base);
  font-family: var(--semantic-typography-label-font-family, inherit);
  font-weight: var(--semantic-typography-label-lg-strong-font-weight);
  text-decoration: none;
  cursor: pointer;
}

/* Pressed / hover (matches DsButton filled-primary active). */
.mpp-content .ds-button.ds-btn-filled-primary:hover,
.mpp-content .ds-button.ds-btn-filled-primary:active {
  background: var(--semantic-color-primary-active);
}

/* Large - the floating CTA (Join / Log in / Deposit / Play / See promotions). */
.mpp-content .ds-button.ds-btn-large {
  min-height: var(--semantic-size-x11);
  /* 44 */
  padding: 6px 16px;
  font-size: var(--semantic-typography-label-lg-strong-font-size);
  /* 14 */
  line-height: var(--semantic-typography-label-lg-strong-line-height);
  /* 16 */
}

/* Small - the "Get help" button in the help card (section 10b). */
.mpp-content .ds-button.ds-btn-small {
  min-height: 24px;
  padding: 2px 12px;
  font-size: var(--semantic-typography-label-sm-strong-font-size);
  /* 11 */
  line-height: var(--semantic-typography-label-sm-strong-line-height);
  /* 16 */
}

/* --------------------------------------------------------------------------
   9. Key Conditions (matches Figma "Key terms" card)
   -------------------------------------------------------------------------- */

/* The white "Key terms" card listing the main conditions. */
.key-conditions {
  padding: 24px 16px;
  background: var(--semantic-color-surface-base);
  border-radius: 12px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  /* elevation/raised 1 */
  margin: 0 16px 16px;
}

/* The "Key terms" heading. */
.key-conditions .section-title {
  font-size: var(--semantic-typography-title-lg-strong-font-size);
  /* note #13: Title/lg strong — 20 */
  line-height: var(--semantic-typography-title-lg-strong-line-height);
  /* 26 (DS value; spec note's 28 is off-scale) */
  font-weight: var(--semantic-typography-title-lg-strong-font-weight);
  /* 700 */
  color: var(--semantic-color-on-surface-base);
  /* note #13: all headers onSurface/base */
  margin: 0 0 12px;
}

/* The bullet list of key conditions (vertical, evenly spaced). */
.key-conditions ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Removes the base theme's default list bullets/indent so ours apply.
   (Scoped under .mpp-content to beat the theme's own list rules.) */
.mpp-content .key-conditions ul,
.mpp-content .key-conditions li {
  list-style: none;
}

/* A single key-condition line (custom bullet + text). */
.mpp-content .key-conditions li {
  /* NOT flex: a flex li turns every inline child (e.g. <strong>) and text run
     into separate flex items, so a line with <strong> breaks into side-by-side
     columns. Instead the bullet is absolutely positioned in a left gutter and
     the text flows/wraps normally, keeping a clean hanging indent. */
  position: relative;
  margin: 0;
  padding: 0 0 0 14px;
  /* left gutter for the bullet (6px bullet + 8px gap) */
  font-size: var(--semantic-typography-body-md-font-size);
  /* note #16: body/md — 14 */
  line-height: var(--semantic-typography-body-md-line-height);
  /* 20 */
  color: var(--semantic-color-on-surface-base);
  /* note #16: onSurface/base */
}

/* The small solid round bullet before each key-condition line. */
.mpp-content .key-conditions li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  /* centre the 6px bullet on the first line ((line-height 20 - 6) / 2) */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--semantic-color-on-surface-subtle);
}

/* --------------------------------------------------------------------------
   10. Terms & Conditions (static card — not collapsible)

   The heading lives in the item's `title` field and the body is the raw T&C
   content pasted straight into the `text` field (no wrapper divs). The platform
   renders the title as <h3 class="pc-h"> and the body as <div class="pc-txt">,
   so we style those directly under the card.
   -------------------------------------------------------------------------- */

/* The white T&C card. */
.terms-collapsible {
  margin: 0 16px 32px;
  padding: 16px;
  background: var(--semantic-color-surface-base);
  border-radius: 12px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
}

/* The wrapper around the title field; keep it block with no extra spacing so
   the gap below the heading is controlled solely by the heading rule. */
.terms-collapsible .pc-header {
  display: block;
  margin: 0;
}

/* The "Terms & Conditions" heading — comes from the item's `title` field. */
.terms-collapsible .pc-h {
  font-size: var(--semantic-typography-title-lg-strong-font-size);
  /* UAT: Title/lg strong 20 — consistent with all section headers (was 14) */
  line-height: var(--semantic-typography-title-lg-strong-line-height);
  /* 26 */
  font-weight: var(--semantic-typography-title-lg-strong-font-weight);
  /* 700 */
  color: var(--semantic-color-on-surface-base);
  margin: 0 0 12px;
}

/* The full T&C body text — the raw content from the `text` field. */
.terms-collapsible .pc-txt {
  font-size: var(--semantic-typography-body-sm-font-size);
  /* note #9: body/sm — 12 */
  line-height: var(--semantic-typography-body-sm-line-height);
  /* 16 */
  color: var(--semantic-color-supporting-gray-base-inverse);
  /* note #9: supporting/grey/baseInverse (token spelled "gray") */
}

/* The base/theme sets <p>/<li> font-size directly (16px), which beats the size
   set on the .pc-txt container via inheritance. Target the text blocks directly
   so the T&C body is body/sm (12/16) per UAT. A plain rule wins here (our
   selector is more specific) — no !important needed. */
.terms-collapsible .pc-txt p,
.terms-collapsible .pc-txt li {
  font-size: var(--semantic-typography-body-sm-font-size);
  /* 12 */
  line-height: var(--semantic-typography-body-sm-line-height);
  /* 16 */
}

/* Spacing between T&C paragraphs. */
.terms-collapsible .pc-txt p {
  margin: 0 0 12px;
}

/* Indent + spacing for numbered/bulleted lists in the T&C. */
.terms-collapsible .pc-txt ol,
.terms-collapsible .pc-txt ul {
  padding-left: 20px;
  margin: 0 0 12px;
}

/* Spacing between T&C list items. */
.terms-collapsible .pc-txt li {
  margin-bottom: 6px;
}

/* Links inside the T&C (underlined). */
.terms-collapsible .pc-txt a {
  color: var(--semantic-color-on-surface-subtle);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10b. Help widget — "Need help with this promotion?"

   A light support card (icon + copy + pink CTA). `pctext` wraps the item text
   in <div class="help-card">, so the children below are authored directly.
   -------------------------------------------------------------------------- */

/* The light support card: icon on the left, text in the middle, button right. */
.help-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0 16px 24px;
  padding: 12px;
  background: var(--semantic-color-surface-container-high-base);
  border: 1px solid #ffffff;
  border-radius: 12px;
}

/* Sitecore wraps the help content in an extra div; this lets the icon/text/
   button line up in a row instead of stacking. */
.help-card>.pc-txt {
  display: contents;
}

/* The customer-support icon on the left of the help card (set via Sitecore). */
.help-card .help-icon {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: url('-/media/0E5390FC0C984BB79710D4CE85637340.ashx') center / cover no-repeat;

}

/* The text column (title + description) in the help card. */
.help-card .help-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* The help card title, "Need help with this promotion?". */
.help-card .help-title {
  font-size: var(--semantic-typography-body-md-strong-font-size);
  /* note #17 header: body/md strong — 14 */
  line-height: var(--semantic-typography-body-md-strong-line-height);
  /* 20 */
  font-weight: var(--semantic-typography-body-md-strong-font-weight);
  /* 600 */
  color: var(--semantic-color-on-surface-base);
  /* note #17: onSurface/base */
  margin: 0;
}

/* The help card supporting text. */
.help-card .help-desc {
  font-size: var(--semantic-typography-body-sm-font-size);
  /* UAT: 12 (was 9) */
  line-height: var(--semantic-typography-body-sm-line-height);
  /* 16 */
  color: var(--semantic-color-on-surface-base);
  opacity: 0.7;
  margin: 0;
}

/* "Get help" action uses the theme button classes
   (ds-button ds-btn-filled-primary ds-btn-small) - styled from semantic tokens
   in the section 8 button block. The flex layout above reserves space for it. */

/* --------------------------------------------------------------------------
   11. Legacy class neutralisation

   Hides / resets old Sitecore building blocks that aren't used in this redesign
   so they don't show up or add stray spacing.
   -------------------------------------------------------------------------- */

/* Hide the old "back banner" block (replaced by the round back button). */
.mpp-content .back-banner {
  display: none;
}

/* Strip the old promo-text block's default background/border/padding. */
.mpp-content .pc-txt-promo {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. State selection

   Each state's blocks (hero, status badge, reward card, How-it-works section,
   CTA, …) are authored as separate Sitecore items, and a DSL `condition` on each
   item renders only the one matching the current state (see `sitecore-content.md`).

   State-specific visual tweaks (e.g. a desaturated hero or a hidden disclaimer for
   the expired / all-used states) are authored into those per-state items — use a
   grey hero image / omit the disclaimer in the relevant item.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   13. Desktop games grid (>= 768px)

   On touch / mobile the games row is a horizontal, scroll-snapping carousel
   (see section 7). On desktop that carousel is effectively broken: there is no
   touch to swipe and the scrollbar is intentionally hidden, so any tile past
   the first few is unreachable with a mouse. From 768px up we drop the scroll
   mechanics and lay the tiles out as a wrapping grid so every game is visible
   at once and nothing needs to be dragged.

   Mobile (< 768px) is untouched: every rule here lives inside the media query,
   so the swipeable carousel from section 7 is the only behaviour below 768px.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  /* Turn the horizontal scroll row into a wrapping, auto-filling grid and
     switch off the carousel mechanics (overflow scroll + scroll-snap).

     Scoped with the extra `.pc-folder` class (the games row is a
     <vn-pc-component-folder class="game-tiles ... pc-folder">) so this rule
     beats section 7's `.mpp-content .game-tiles` by SPECIFICITY (0,3,0 > 0,2,0),
     not just source order. That keeps the desktop override safe even if the
     carousel rule is ever moved after this block or the stylesheet is injected
     in a different order than authored. No !important needed. */
  .mpp-content .game-tiles.pc-folder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  /* Tiles were pinned to a fixed 200px carousel width; let them fill the grid
     track instead. (max-width applies in any layout mode, so it must be reset;
     the flex-basis from section 7 is inert once the parent is a grid.) */
  .mpp-content .game-tiles.pc-folder>* {
    max-width: none;
  }

  .mpp-content .game-tiles.pc-folder .game-tile,
  .mpp-content .game-tiles.pc-folder .game-tile a {
    width: 100%;
  }

  .mpp-content .game-tiles .game-tile-name {
    font-size: var(--semantic-typography-body-sm-font-size);
    color: var(--semantic-color-supporting-gray-base-inverse);
    margin-top: 0;
  }
}


@media screen and (min-width: 1118px) {

  #main-content {
    background: var(--semantic-color-surface-container-low-base);
  }

  .mpp-content {
    max-width: 1118px;
  }

  .layout-desktop {
    max-width: 1118px;
    display: grid;
    grid-template-columns: 720px 358px;
    /* margin-top: 64px; */
    column-gap: 40px;
    grid-auto-flow: dense;
  }

  .content-top {
    grid-column: 1/3;
  }

  .content-right {
    position: sticky;
    top: 109px;
    align-self: start;
  }

  .cta-section {
    position: relative;
    bottom: 0;
    padding: 0;
  }

  .cta-bar {
    border-radius: var(--semantic-radius-max);
    box-shadow: none;
    border-color: var(--semantic-color-surface-base);
  }

  .main-image img,
  .main-image .pc-img {
    width: 100%;
    aspect-ratio: 720/260;
    border-radius: var(--semantic-radius-semi-rounded-md);
    height: auto;
  }

  .hero-zone {
    background: var(--semantic-color-surface-container-low-base);
  }

  .content-card {
    border-radius: 0;
    --hero-overlap: 0;
    box-shadow: none;
    padding: var(--semantic-spacing-container-padding-3xl) 0 0;
  }

  .main-image .hero-disclaimer {
    border-radius: 0 0 var(--semantic-radius-semi-rounded-md) var(--semantic-radius-semi-rounded-md);
    padding: 26px 16px 4px;
  }

  .status-badge {
    border-color: var(--semantic-color-l2-pill-current-border-active);
    background: none;
    color: var(--semantic-color-on-surface-base);
    font-weight: var(--semantic-typography-body-md-font-weight);
    text-transform: none;
    padding: 2px 12px;
  }

  .status-badge .dot {
    background: var(--semantic-color-supporting-green-strong-inverse);
    height: 12px;
    width: 12px;
  }

  .game-tiles-header {
    margin: 0;
  }

  .mpp-content .game-tiles,
  .help-card,
  .how-it-works,
  .key-conditions {
    margin: 0 0 var(--semantic-spacing-container-padding-2xl) 0;
  }

  .terms-collapsible {
    margin: 0;
  }

  .reward-card {
    margin: 0 0 var(--semantic-spacing-container-padding-3xl) 0;
    border: none;
    background: url('-/media/72592B5F02794C89B2A695B8FCCD55A8.ashx') center / cover no-repeat;
  }


  .cta-bar .cta-title {
    font-weight: var(--semantic-typography-title-md-strong-font-weight);
    margin: 0;
  }

  .cta-bar .cta-subtitle {
    color: var(--semantic-color-supporting-gray-base-inverse);
  }

  .reward-card .reward-steps {
    position: absolute;
    top: 35px;
    right: 20px;

  }

  .reward-card-header {
    margin-bottom: 4px;
  }

  .reward-card .reward-meta {
    padding-top: 0;
  }

  .backlink {
    padding: var(--semantic-spacing-container-padding-2xl) 0;
    position: static;
  }

  .back-button {
    position: static;
    height: 24px;
    width: 24px;
  }

  .back-button .theme-arrow-left {
    font-size: 9px;
  }

  .back-button-container .pc-txt {
    display: flex;
    column-gap: var(--semantic-spacing-container-padding-xl);
    align-items: center;
  }

  .back-button-text {
    font-size: var(--semantic-typography-body-md-font-size);
    display: block;
  }
}