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

.bonus-page{
  padding:clamp(1.25rem,3.5vw,2.25rem) clamp(1rem,4vw,2rem) clamp(3rem,6vw,4.5rem);
}

.bonus-page__inner{
  max-width:64rem;
  margin:0 auto;
}

.bonus-page__hero{
  text-align:center;
  margin:0 auto 2.25rem;
  max-width:36rem;
}

.bonus-page__kicker{
  margin:0 0 0.45rem;
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#5b8cff;
}

.bonus-page__title{
  margin:0 0 0.7rem;
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(2.15rem,5.4vw,3.15rem);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#fff;
}

.bonus-page__subtitle{
  margin:0;
  font-size:clamp(0.88rem,2vw,1rem);
  line-height:1.55;
  font-weight:600;
  color:rgba(220,232,255,0.62);
}

.bonus-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.35rem;
  align-items:stretch;
}

@media (min-width:860px){
  .bonus-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.6rem;
  }
}

.bonus-card{
  --bonus-blue:#2d68ff;
  --bonus-blue-2:#155eef;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:1.35rem 1.2rem 1.2rem;
  border-radius:1.15rem;
  background:
    linear-gradient(180deg,rgba(18,28,58,0.96) 0%,rgba(8,12,28,0.98) 100%);
  border:1px solid rgba(45,104,255,0.38);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.35),
    0 18px 48px rgba(0,8,32,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow:hidden;
}

.bonus-card__shine{
  pointer-events:none;
  position:absolute;
  inset:0;
  background:radial-gradient(120% 70% at 50% -10%,rgba(45,104,255,0.22),transparent 58%);
  z-index:0;
}

.bonus-card__art{
  pointer-events:none;
  position:absolute;
  top:-2.6rem;
  left:50%;
  width:7.5rem;
  height:4.2rem;
  transform:translateX(-50%);
  border-radius:1.1rem 1.1rem 2.2rem 2.2rem;
  background:
    radial-gradient(circle at 50% 30%,rgba(140,180,255,0.95),rgba(45,104,255,0.2) 55%,transparent 72%),
    linear-gradient(180deg,rgba(80,40,180,0.45),transparent 70%);
  filter:blur(0.4px);
  opacity:0.85;
  z-index:0;
}

.bonus-card--csgobig .bonus-card__art{
  background:
    radial-gradient(circle at 50% 28%,rgba(255,214,90,0.55),rgba(45,104,255,0.18) 58%,transparent 74%);
}

.bonus-card__head,
.bonus-card__rule,
.bonus-card__perks,
.bonus-card__code-block,
.bonus-card__actions{
  position:relative;
  z-index:1;
}

.bonus-card__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.55rem;
  padding-top:1.15rem;
}

.bonus-card__logo{
  display:block;
  height:2.35rem;
  width:auto;
  max-width:11rem;
  object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.4));
}

.bonus-card__site{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  color:#4f8dff;
  text-decoration:none;
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.bonus-card__site i{
  font-size:0.62rem;
}

.bonus-card__site:hover{
  color:#89b4ff;
}

.bonus-card__rule{
  width:4.5rem;
  height:1px;
  margin:0.95rem auto 1.05rem;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
}

.bonus-card__perks{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.55rem;
}

.bonus-card__perks li{
  display:flex;
  align-items:center;
  gap:0.75rem;
  min-height:2.85rem;
  padding:0.55rem 0.9rem;
  border-radius:0.85rem;
  background:rgba(7,12,28,0.78);
  border:1px solid rgba(255,255,255,0.05);
  color:#fff;
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-size:0.82rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.bonus-card__check{
  flex-shrink:0;
  width:1.35rem;
  height:1.35rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bonus-blue);
  color:#fff;
  font-size:0.65rem;
  box-shadow:0 0 0 3px rgba(45,104,255,0.18);
}

.bonus-card__code-block{
  margin-top:1.15rem;
  text-align:center;
}

.bonus-card__code-label{
  margin:0 0 0.45rem;
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(160,176,210,0.55);
}

.bonus-card__code{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.65rem;
  min-height:3rem;
  padding:0.55rem 2.6rem;
  border-radius:0.85rem;
  border:1.5px dashed rgba(130,150,190,0.42);
  background:rgba(2,6,18,0.72);
  color:#fff;
  cursor:pointer;
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:0.16em;
  text-transform:uppercase;
  transition:border-color 0.2s ease,background 0.2s ease,transform 0.2s ease;
}

.bonus-card__code:hover{
  border-color:rgba(89,140,255,0.7);
  background:rgba(12,24,58,0.8);
}

.bonus-card__code:focus-visible{
  outline:2px solid #4f8dff;
  outline-offset:3px;
}

.bonus-card__code-text{
  flex:1;
  text-align:center;
}

.bonus-card__code .fa-copy{
  position:absolute;
  right:1.15rem;
  color:rgba(210,222,255,0.72);
  font-size:0.95rem;
}

.bonus-card__code{
  position:relative;
}

.bonus-card__actions{
  display:flex;
  align-items:stretch;
  gap:0.55rem;
  margin-top:0.95rem;
}

.bonus-card__claim{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.55rem;
  min-height:3.05rem;
  padding:0.7rem 1rem;
  border-radius:0.85rem;
  background:linear-gradient(180deg,#3b78ff 0%,var(--bonus-blue-2) 100%);
  color:#fff !important;
  text-decoration:none;
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-size:0.82rem;
  font-weight:900;
  letter-spacing:0.1em;
  text-transform:uppercase;
  box-shadow:
    0 8px 22px rgba(21,94,239,0.38),
    inset 0 1px 0 rgba(255,255,255,0.22);
  transition:transform 0.18s ease,filter 0.18s ease,box-shadow 0.18s ease;
}

.bonus-card__claim:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:
    0 10px 26px rgba(21,94,239,0.48),
    inset 0 1px 0 rgba(255,255,255,0.26);
}

.bonus-card__claim:active{
  transform:translateY(0);
}

.bonus-help{
  position:relative;
  flex-shrink:0;
}

.bonus-help__btn{
  list-style:none;
  width:3.05rem;
  height:3.05rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0.85rem;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(8,14,32,0.92);
  color:#e8eefc;
  cursor:pointer;
  font-size:1.15rem;
}

.bonus-help__btn::-webkit-details-marker{
  display:none;
}

.bonus-help__btn:hover,
.bonus-help[open] .bonus-help__btn{
  background:rgba(21,94,239,0.22);
  border-color:rgba(89,140,255,0.45);
}

.bonus-help__panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 0.55rem);
  width:min(16.5rem,70vw);
  padding:0.85rem 0.95rem;
  border-radius:0.85rem;
  background:rgba(8,14,32,0.98);
  border:1px solid rgba(89,140,255,0.35);
  box-shadow:0 14px 36px rgba(0,0,0,0.45);
  color:rgba(230,238,255,0.88);
  font-size:0.78rem;
  line-height:1.45;
  text-align:left;
  z-index:4;
}

.bonus-help__panel p{
  margin:0;
}

.bonus-help__panel p + p{
  margin-top:0.45rem;
}

.bonus-page__legal{
  margin:1.75rem auto 0;
  max-width:36rem;
  text-align:center;
  font-size:0.78rem;
  line-height:1.55;
  color:rgba(180,196,230,0.55);
}

.bonus-page__legal a{
  color:#7ea6ff;
  text-underline-offset:0.12em;
}

@media (max-width:479px){
  .bonus-card{
    padding:1.15rem 0.95rem 1.05rem;
  }

  .bonus-card__perks li{
    font-size:0.75rem;
    letter-spacing:0.06em;
  }
}