.cashback-hero .slots-hero-art {
  background-image: url('assets/cashback-hero.webp')
}

.cashback-hero:after {
  background: linear-gradient(90deg, #080c25f5, #110c2bed 28%, #160b2c65 65%, transparent)
}

.cashback-hero .slots-hero-copy {
  max-width: 900px
}

.reward-types {
  margin-bottom: 15px
}

.reward-types>.section-heading {
  padding: 4px
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  align-items: stretch
}

.reward-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 1px solid #bc55c8;
  border-radius: 15px;
  background: radial-gradient(at top, #4a2056, #13142e 65%);
  text-align: center
}

.reward-card>img {
  display: block;
  width: 130px;
  height: 110px;
  object-fit: contain;
  mix-blend-mode: lighten;
  margin-bottom: 12px
}

.reward-card h2 {
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 9px
}

.reward-card>p {
  margin: 0 0 11px;
  color: #e0dbed
}

.reward-card .bonus-claim {
  width: 100%;
  margin-top: auto;
  min-height: 48px
}

.reward-details {
  width: 100%;
  margin: 0 0 14px;
  font-size: 14px
}

.reward-details summary {
  color: #eeaeff;
  cursor: pointer;
  padding: 6px 0;
  line-height: 1.5
}

.reward-details p {
  margin: 8px 0
}

.reward-details dl {
  text-align: left;
  border-top: 1px solid #52355f;
  margin-top: 10px
}

.reward-details dt {
  margin-top: 8px;
  font-weight: 700;
  color: #eac4f8
}

.reward-details dd {
  margin: 0;
  color: #d3ddeb
}

.rebate-card {
  border-color: #4cc5de;
  background: radial-gradient(at top, #11445d, #101a30 65%)
}

.rebate-card .bonus-claim {
  background: linear-gradient(#1ba2c3, #14537e);
  border-color: #76e0fa
}

.cashback-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px
}

.cashback-pair>.panel {
  min-width: 0;
  height: 100%
}

.reward-comparison>p {
  margin: 0 0 10px;
  color: #d5ddeb
}

.example-activity {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 0 0 0 18px;
  margin-bottom: 15px;
  color: #eadbf4
}

.reward-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 15px
}

.reward-comparison-grid article {
  padding: 15px;
  border: 1px solid #c354b9;
  border-radius: 11px;
  background: linear-gradient(130deg, #72255d, #301c3f)
}

.reward-comparison-grid article+article {
  border-color: #30b4d4;
  background: linear-gradient(130deg, #0c506c, #11293e)
}

.reward-comparison-grid h3 {
  margin: 0 0 10px
}

.comparison-equation {
  font-weight: 700;
  color: #ffe0f6;
  margin: 0 !important
}

.assessment {
  padding: 13px;
  border: 1px solid #714d85;
  border-radius: 10px;
  background: #271d3b
}

.assessment h3 {
  margin: 0 0 7px;
  color: #ffdc83
}

.assessment p {
  margin: 7px 0
}

.reward-calculators {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px
}

.reward-calculators fieldset {
  min-width: 0;
  border: 1px solid #9d4f9e;
  border-radius: 12px;
  padding: 14px;
  background: #281c3d
}

.reward-calculators fieldset+fieldset {
  border-color: #2b859f;
  background: #0d2c42
}

.reward-calculators legend {
  font-size: 14px;
  font-weight: 700;
  padding: 0 7px
}

.reward-calculators label {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px
}

.reward-calculators input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid #9172b6;
  border-radius: 7px;
  background: linear-gradient(#25203f, #121b33);
  color: #fff;
  padding: 8px 10px;
  font: 600 14px Inter, Arial, sans-serif;
  text-align: right;
  margin-top: 6px
}

.reward-calculators fieldset+fieldset input {
  border-color: #4b849b
}

.reward-calculators input[aria-invalid=true] {
  border-color: #ff829b
}

.reward-output {
  border: 1px solid #d66ccf;
  border-radius: 10px;
  padding: 13px 8px;
  text-align: center;
  background: linear-gradient(135deg, #9c267e, #46204c);
  margin-top: 15px
}

.reward-calculators fieldset+fieldset .reward-output {
  border-color: #4ed9ef;
  background: linear-gradient(135deg, #0b7f9a, #10425a)
}

.reward-output span {
  font-size: 14px;
  line-height: 1.5;
  display: block
}

.reward-output output {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.4;
  display: block;
  overflow-wrap: anywhere;
  margin: 5px 0
}

.reward-output small {
  font-size: 14px;
  line-height: 1.5;
  display: block;
  color: #f0dbfa
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px
}

.scenario-grid article {
  padding: 17px;
  border: 1px solid #c1488c;
  background: linear-gradient(140deg, #5f1e4f, #1a1b34);
  border-radius: 12px
}

.scenario-grid article:nth-child(2) {
  border-color: #8177b9;
  background: linear-gradient(140deg, #3c385d, #141f34)
}

.scenario-grid article:nth-child(3) {
  border-color: #32a68e;
  background: linear-gradient(140deg, #0b4e43, #102738)
}

.scenario-grid .ui-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 10px
}

.scenario-grid h3 {
  margin: 0 0 9px
}

.scenario-grid p {
  margin: 8px 0;
  color: #e2e4ee
}

.key-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px
}

.key-check-grid article {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-bottom: 1px solid #354361;
  padding: 11px 0
}

.key-check-grid .ui-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px
}

.key-check-grid p {
  margin: 0
}

.claim-contact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 590px;
  margin: 18px auto 0;
  gap: 16px
}

.claim-contact-actions a {
  min-height: 48px;
  border-radius: 24px;
  box-shadow: 0 0 16px #14b87a30
}

.cashback-content .claim-steps article:nth-child(2):after {
  background-image: url('assets/icons/conditions.svg')
}

.cashback-content .claim-steps article:nth-child(3):after {
  background-image: url('assets/icons/contact.svg')
}

.cashback-content .claim-steps article:nth-child(4):after {
  background-image: url('assets/icons/checklist.svg')
}

.cashback-content .claim-steps article:nth-child(5):after {
  background-image: url('assets/icons/gift.svg')
}

.cashback-content .claim-steps p {
  margin: 7px 0
}

.formula-example {
  padding: 13px;
  border: 1px solid #394460;
  border-radius: 10px;
  background: #141d35;
  margin-top: 12px
}

.formula-example h3 {
  margin-bottom: 8px
}

.formula-example p {
  margin: 9px 0
}

.source-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 450px
}

.source-art {
  position: absolute;
  z-index: -1;
  bottom: 12px;
  right: 12px;
  left: 12px;
  height: 230px;
  background: url('assets/qualifying-bets.webp') center center/contain no-repeat;
  opacity: .5;
  border-radius: 14px;
  mask-image: linear-gradient(transparent, #000 30%, #000 80%, transparent);
  pointer-events: none;
  transition: opacity .2s
}

.source-panel:has(details[open]) .source-art {
  opacity: .08
}

.source-panel .explain-item {
  position: relative;
  z-index: 1
}

.source-panel table {
  width: 100%;
  min-width: 0
}

.limits-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px
}

.limits-grid article {
  padding: 15px;
  border: 1px solid #48426a;
  border-radius: 10px;
  background: linear-gradient(135deg, #24213e, #0d1c30);
  min-width: 0
}

.limits-grid .ui-icon {
  width: 35px;
  height: 35px;
  margin-bottom: 12px
}

.limits-grid h3 {
  margin: 0 0 8px;
  color: #edbbfa
}

.limits-grid p {
  margin: 7px 0;
  color: #d5dfee
}

.compatibility-art {
  height: 200px;
  background: url('assets/bonus-compatibility.webp') center center/contain no-repeat;
  border-radius: 14px;
  mask-image: linear-gradient(transparent, #000 25%, #000 80%, transparent);
  opacity: .65;
  margin: 14px 0 0
}

.cashback-content .combination-grid>div:first-child {
  display: flex;
  flex-direction: column
}

.compatibility-art {
  flex: 1;
  min-height: 180px
}

.cashback-content .section-heading p {
  line-height: 1.65
}

.cashback-content .formula {
  margin: 10px 0
}

.cashback-content :is(input, summary, a, button):focus-visible {
  outline: 2px solid #efa2ff;
  outline-offset: 3px
}

@media(max-width:1350px) {
  .reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .cashback-pair {
    grid-template-columns: 1fr
  }

  .limits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .reward-card>img {
    width: 140px;
    height: 115px
  }

  .compatibility-art {
    flex: none;
    min-height: 0;
    height: 180px
  }
}

@media(max-width:680px) {
  .cashback-hero:after {
    background: linear-gradient(90deg, #080c25f0, #110c2bbe 70%, #160b2c88)
  }

  .reward-grid {
    gap: 11px
  }

  .reward-card {
    padding: 13px 10px
  }

  .reward-card>img {
    width: 110px;
    max-width: 100%;
    height: 100px;
    margin-bottom: 10px
  }

  .reward-card h2 {
    font-size: 16px
  }

  .reward-card>p {
    line-height: 1.6
  }

  .reward-card .bonus-claim {
    font-size: 14px;
    min-height: 68px;
    padding: 8px
  }

  .reward-calculators {
    gap: 10px
  }

  .reward-calculators fieldset {
    padding: 11px 9px
  }

  .reward-output {
    padding: 12px 6px
  }

  .reward-output output {
    font-size: 22px
  }

  .reward-comparison-grid,
  .key-check-grid {
    grid-template-columns: 1fr
  }

  .scenario-grid {
    grid-template-columns: 1fr
  }

  .limits-grid {
    grid-template-columns: 1fr 1fr
  }

  .limits-grid article {
    padding: 13px
  }

  .claim-contact-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }

  .claim-contact-actions a {
    padding: 10px;
    font-size: 14px
  }

  .source-panel {
    min-height: 420px
  }
}

@media(max-width:360px) {

  .reward-grid,
  .reward-calculators,
  .limits-grid {
    grid-template-columns: 1fr
  }

  .reward-card>img {
    width: 140px;
    height: 110px
  }

  .reward-card .bonus-claim {
    min-height: 44px
  }

  .claim-contact-actions {
    grid-template-columns: 1fr
  }
}

@media(prefers-reduced-motion:reduce) {
  .source-art {
    transition: none
  }
}

.reward-details {
  margin-top: auto;
  padding-top: 8px
}

.reward-card .bonus-claim {
  margin-top: 0
}

/* Raise the supporting calculation artwork on desktop; preserve mobile placement. */
@media(min-width:681px) {
  .cashback-content .source-art {
    bottom: 80px
  }
}