.bonus-hero .slots-hero-art {
  background-image: url('assets/bonus-hero.webp');
  background-position: right center
}

.bonus-hero:after {
  background: linear-gradient(90deg, #060b22f5, #080c25ed 30%, #1409276b 65%, transparent)
}

.bonus-hero .slots-hero-copy {
  max-width: 890px
}

.bonus-hero h1 {
  line-height: 1.14
}

.bonus-hero h1 span {
  padding-bottom: .12em
}

.hero-more {
  max-width: 620px;
  margin-top: 12px
}

.hero-more>summary,
.hide-details {
  color: #e8a2ff;
  text-decoration: underline;
  cursor: pointer;
  font: 600 14px/1.6 Inter, Arial, sans-serif;
  list-style: none
}

.hero-more>summary::-webkit-details-marker {
  display: none
}

.hero-more[open]>summary {
  display: none
}

.hero-more p {
  margin-top: 0
}

.hide-details {
  padding: 0;
  border: 0;
  background: none;
  margin-top: 8px
}

.bonus-content .section-heading h2 {
  font-size: var(--heading-size);
  line-height: 1.25
}

.bonus-content p,
.bonus-content li,
.bonus-content table,
.bonus-content dt,
.bonus-content dd {
  font-size: 14px;
  line-height: 1.65
}

.bonus-content .section-heading p:empty {
  display: none
}

.bonus-content h3 {
  font-size: 14px;
  line-height: 1.5
}

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

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

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

.bonus-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid #8453b5;
  border-radius: 12px;
  background: radial-gradient(at top left, #372042, #0c132c 70%);
  padding: 14px;
  position: relative;
  overflow: hidden
}

.bonus-art {
  width: 112px;
  height: 132px;
  object-fit: contain;
  border-radius: 9px
}

.bonus-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%
}

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

.bonus-card p {
  margin: 0 0 9px;
  color: #d9e0f1
}

.bonus-claim {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 40px;
  padding: 8px 9px;
  margin-top: auto;
  border: 1px solid #e395ff;
  border-radius: 18px;
  background: linear-gradient(#b342e2, #64189e);
  box-shadow: inset 0 1px 7px #efa7ff70, 0 0 10px #ae35dd20;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: filter .2s, box-shadow .2s
}

.bonus-claim:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 18px #b53cec65
}

.bonus-details {
  margin: 0 0 13px
}

.bonus-details summary {
  cursor: pointer;
  color: #e4a0fb;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 0
}

.bonus-details p {
  margin-top: 10px
}

.bonus-details dl {
  margin: 0;
  border-top: 1px solid #50395e
}

.bonus-details dt {
  font-weight: 700;
  color: #e7c1fb;
  margin-top: 9px
}

.bonus-details dd {
  margin: 0;
  color: #d0dbee
}

.bonus-card:has(.bonus-details[open]) {
  grid-template-columns: 1fr
}

.bonus-card:has(.bonus-details[open]) .bonus-art {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 130px;
  height: 130px;
  opacity: .12;
  pointer-events: none
}

.bonus-card:has(.bonus-details[open]) .bonus-card-copy {
  position: relative
}

.bonus-grid {
  align-items: stretch
}

.related-rewards {
  margin: 13px 0 0;
  padding: 12px 16px;
  background: #111d33;
  border: 1px solid #303e5f;
  border-radius: 10px
}

.related-rewards p {
  margin: 0
}

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

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

.compare-list {
  display: grid;
  gap: 7px
}

.compare-list>div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid #293956
}

.compare-list .ui-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px
}

.compare-list h3 {
  margin-bottom: 3px;
  color: #f0c3ff
}

.compare-list p {
  margin: 0;
  color: #d1dced
}

.calculator-panel {
  background: linear-gradient(140deg, #182144, #07182d) !important
}

.calculator-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.calculator-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 85px;
  gap: 10px;
  border: 1px solid #46557a;
  background: #192542;
  padding: 12px;
  border-radius: 9px;
  min-width: 0
}

.calculator-field label {
  grid-column: 1/-1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5
}

.calculator-field input[type=number] {
  grid-column: 1/-1;
  min-width: 0;
  width: 100%;
  height: 38px;
  background: #07142a;
  border: 1px solid #8e79ba;
  border-radius: 6px;
  padding: 7px;
  color: #fff;
  font: 600 14px Inter, Arial, sans-serif;
  text-align: right
}

.calculator-field input[type=range] {
  grid-column: 1/-1;
  min-width: 0;
  width: 100%;
  accent-color: #e253f1;
  cursor: pointer;
  margin: 0;
  height: 24px
}

.calculator-field input[aria-invalid=true] {
  border-color: #ff7796
}

.turnover-basis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  font-size: 14px;
  font-weight: 600
}

.turnover-basis select {
  width: 100%;
  min-height: 42px;
  background: #101d36;
  color: #fff;
  border: 1px solid #8864ac;
  border-radius: 7px;
  padding: 8px;
  font: inherit
}

.calculator-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.calculator-results>div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border: 1px solid #bc57d3;
  border-radius: 11px;
  background: linear-gradient(135deg, #4e2168, #281c42);
  text-align: center
}

.calculator-results>div:nth-child(2) {
  border-color: #21badc;
  background: linear-gradient(135deg, #104b70, #0d243e)
}

.calculator-results>div:last-child {
  grid-column: 1/-1;
  background: linear-gradient(135deg, #38244e, #19213d)
}

.calculator-results span {
  font-size: 14px;
  line-height: 1.5
}

.calculator-results output {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.4;
  margin: 4px 0;
  overflow-wrap: anywhere
}

.calculator-results small {
  font-size: 14px;
  color: #d9c8e8
}

.calculator-note {
  margin: 13px 0 0;
  color: #c6d6e7
}

.calculation-grid,
.combination-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.calculation-grid article {
  padding: 16px;
  border: 1px solid #4b3b6e;
  border-radius: 10px;
  background: #171d38
}

.calculation-grid h3 {
  color: #edbcff;
  margin-bottom: 9px
}

.calculation-grid p {
  margin: 9px 0
}

.calculation-grid ul {
  padding-left: 20px
}

.formula {
  padding: 12px;
  background: linear-gradient(90deg, #502a6e, #272044);
  border: 1px solid #87509e;
  border-radius: 8px;
  font-weight: 700;
  color: #ffdbfb
}

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

.claim-steps article {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid #493b6e;
  border-radius: 11px;
  background: linear-gradient(140deg, #202644, #0b1a30)
}

.step-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #f0a4ff;
  border-radius: 50%;
  background: linear-gradient(130deg, #fa88ef, #9424d1);
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 0 12px #cb49eb40;
  margin-bottom: 12px
}

.claim-steps h3 {
  margin: 0 0 9px
}

.claim-steps p {
  margin: 0;
  color: #d7e0f0
}

.contact-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px
}

.contact-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px;
  border-radius: 7px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid #4ce5b2;
  background: linear-gradient(130deg, #0e9a68, #075b45)
}

.contact-actions .contact-telegram {
  background: linear-gradient(130deg, #098fca, #064576);
  border-color: #3fcafb
}

.checks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.checks-grid article {
  padding: 14px;
  border: 1px solid #3c4466;
  border-radius: 10px;
  background: #152039
}

.checks-grid h3 {
  color: #e8bcff;
  margin: 0 0 8px
}

.checks-grid p {
  margin: 0;
  color: #d1dced
}

.lifecycle {
  list-style: none;
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 0
}

.lifecycle li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid #9c4bb1;
  border-radius: 12px;
  background: linear-gradient(120deg, #44225e, #241b3c)
}

.lifecycle li:not(:last-child):after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 35px;
  height: 13px;
  width: 2px;
  background: #d85fe9
}

.lifecycle .ui-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px
}

.lifecycle h3 {
  margin: 0 0 4px
}

.lifecycle p {
  margin: 0;
  color: #e0d5e9
}

.lifecycle-panel .explain-item {
  margin-top: 15px
}

.bonus-rule {
  padding: 14px 16px;
  border: 1px solid #d26fe8;
  border-radius: 10px;
  background: linear-gradient(120deg, #5a2672, #30203f);
  font-weight: 700;
  color: #ffdd74
}

.combination-grid>div {
  min-width: 0
}

.combination-grid h3 {
  margin-bottom: 12px
}

.combination-grid p {
  margin: 0 0 12px
}

.combination-grid table {
  font-size: 14px;
  min-width: 390px
}

.combination-note {
  border-top: 1px solid #384363;
  margin-top: 15px;
  padding-top: 12px
}

.combination-note p {
  margin: 0;
  color: #d6dff1
}

.bonus-content .slot-faq .faq-grid>details>summary {
  min-height: 76px;
  padding: 12px
}

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

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

  .bonus-card {
    grid-template-columns: 105px minmax(0, 1fr)
  }

  .bonus-art {
    width: 105px
  }

  .claim-steps {
    grid-template-columns: 1fr
  }

  .claim-steps article {
    display: flex;
    align-items: flex-start;
    gap: 14px
  }

  .step-number {
    flex: 0 0 34px;
    margin: 0
  }

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

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

  .calculator-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

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

  .calculator-results>div:last-child {
    grid-column: auto
  }

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

@media(max-width:680px) {
  .bonus-hero .slots-hero-art {
    background-position: 70% center
  }

  .bonus-hero:after {
    background: linear-gradient(90deg, #060b22f0, #080c25b8 70%, #14092788)
  }

  .bonus-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .bonus-card {
    grid-template-columns: 95px minmax(0, 1fr);
    padding: 13px;
    gap: 12px
  }

  .bonus-art {
    width: 95px;
    height: 120px
  }

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

  .bonus-pair,
  .calculation-grid,
  .combination-grid {
    grid-template-columns: 1fr
  }

  .claim-steps {
    grid-template-columns: 1fr
  }

  .claim-steps article {
    display: flex;
    gap: 14px;
    align-items: flex-start
  }

  .step-number {
    flex: 0 0 34px;
    margin: 0
  }

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

  .checks-grid article {
    padding: 12px
  }

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

  .calculator-field {
    padding: 11px;
    grid-template-columns: 1fr
  }

  .calculator-results output {
    font-size: 23px
  }

  .turnover-basis {
    grid-template-columns: 1fr
  }

  .bonus-content .slot-faq .faq-grid>details>summary {
    min-height: 88px
  }
}

@media(max-width:360px) {
  .bonus-card {
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 10px
  }

  .bonus-art {
    width: 75px;
    height: 100px
  }

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

  .calculator-fields {
    gap: 10px
  }

  .calculator-field {
    padding: 9px
  }

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

@media(prefers-reduced-motion:reduce) {
  .bonus-claim {
    transition: none
  }
}

.bonus-art {
  mix-blend-mode: lighten
}

@media(min-width:681px) {
  .bonus-hero .slots-hero-actions {
    max-width: 514px
  }

  .bonus-hero .slots-hero-actions a {
    width: auto
  }
}

.claim-steps article:not(:first-child):after {
  content: '';
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 54px;
  height: 54px;
  background: url('assets/icons/gift.svg') center/contain no-repeat;
  opacity: .18;
  pointer-events: none
}

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

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

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

.claim-steps article>div {
  position: relative;
  z-index: 1
}

.calculation-grid article:first-child {
  position: relative;
  isolation: isolate;
  overflow: hidden
}

.calculation-grid article:first-child:after {
  content: '';
  position: absolute;
  inset: auto 12px 10px auto;
  width: 150px;
  height: 130px;
  background: url('assets/bonus-hero.webp') 65% center/cover;
  border-radius: 18px;
  opacity: .1;
  z-index: -1;
  pointer-events: none
}

@media(max-width:1350px) {
  .claim-steps article:not(:first-child):after {
    width: 42px;
    height: 42px;
    opacity: .1
  }
}