/* BunsBet Casino - styles propres a la page de redirection inscription */

body.bb-redirect{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  /* Centrage sur : sur petit ecran la carte est plus haute que la fenetre,
     le centrage simple rendrait le haut de la carte inatteignable au scroll. */
  align-items:safe center;
  background:var(--bb-grad-deep);
  padding:32px 20px;
}

.bb-relay{
  width:100%;
  max-width:520px;
  text-align:center;
  background:rgba(9,7,7,.72);
  border:1px solid var(--bb-line-strong);
  border-radius:var(--bb-r-lg);
  padding:38px 30px 34px;
  box-shadow:0 22px 60px rgba(0,0,0,.55),var(--bb-glow);
}

.bb-relay__logo{
  margin:0 auto 22px;
  max-width:172px;
  filter:drop-shadow(0 6px 16px rgba(245,158,11,.38));
}

.bb-relay h1{
  font-size:clamp(1.5rem,4vw,2.1rem);
  margin:0 0 12px;
}

.bb-relay__lede{
  color:var(--bb-cream);
  font-size:1rem;
  margin:0 0 22px;
}

/* Rappel du bonus de bienvenue */
.bb-relay__deal{
  display:block;
  margin:0 0 24px;
  padding:14px 16px;
  border-radius:var(--bb-r);
  background:rgba(74,33,20,.55);
  border:1px solid var(--bb-line-strong);
}

.bb-relay__deal-tag{
  display:block;
  font-size:.7rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--bb-orange);
  font-weight:700;
}

.bb-relay__deal-main{
  display:block;
  font-family:"Lilita One","Inter",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(1.15rem,5.2vw,1.65rem);
  line-height:1.2;
  margin:4px 0 2px;
  color:var(--bb-cheese);
  text-shadow:0 0 18px rgba(255,201,40,.35);
}

.bb-relay__deal-sub{
  display:block;
  font-size:.82rem;
  color:var(--bb-cream);
}

.bb-relay__bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,241,208,.12);
  border:1px solid var(--bb-line);
  overflow:hidden;
}

.bb-relay__fill{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:var(--bb-grad-hot);
  box-shadow:0 0 16px rgba(255,201,40,.55);
  animation:bb-fill 6s linear forwards;
}

@keyframes bb-fill{
  from{width:0}
  to{width:100%}
}

/* Sequence d'etapes de chargement */
.bb-relay__steps{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  text-align:left;
}

.bb-relay__step{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:6px 0;
  font-size:.87rem;
  line-height:1.4;
  color:var(--bb-ink-mute);
  opacity:.45;
  transition:opacity .35s ease,color .35s ease;
}

.bb-relay__step.is-running{opacity:1;color:var(--bb-cream)}
.bb-relay__step.is-done{opacity:1;color:var(--bb-ink-soft)}

.bb-relay__dot{
  position:relative;
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin-top:3px;
  border-radius:50%;
  border:1px solid var(--bb-line-strong);
  background:rgba(255,241,208,.08);
}

.bb-relay__step.is-running .bb-relay__dot{
  border-color:var(--bb-orange);
  background:var(--bb-orange);
  box-shadow:0 0 0 0 rgba(245,158,11,.55);
  animation:bb-pulse 1.2s ease-out infinite;
}

.bb-relay__step.is-done .bb-relay__dot{
  border-color:var(--bb-lettuce);
  background:var(--bb-lettuce);
  animation:none;
  box-shadow:none;
}

/* Coche dessinee en CSS pour l'etat termine */
.bb-relay__step.is-done .bb-relay__dot::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:4px;
  height:8px;
  border:solid #090707;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

@keyframes bb-pulse{
  from{box-shadow:0 0 0 0 rgba(245,158,11,.55)}
  to{box-shadow:0 0 0 8px rgba(245,158,11,0)}
}

.bb-relay__label{min-width:0;overflow-wrap:break-word}

/* Pastilles de reassurance */
.bb-relay__perks{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.bb-relay__perk{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:34px;
  padding:8px 6px;
  border-radius:999px;
  border:1px solid var(--bb-line);
  background:rgba(255,241,208,.06);
  font-size:.7rem;
  font-weight:600;
  line-height:1.3;
  color:var(--bb-cream);
  overflow-wrap:anywhere;
}


.bb-relay__manual{
  display:inline-block;
  margin-top:20px;
  font-size:.88rem;
  color:var(--bb-cheese);
  text-decoration:underline;
}
.bb-relay__manual:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  .bb-relay__fill{animation:none;width:100%}
  .bb-relay__step.is-running .bb-relay__dot{animation:none}
}

@media (max-width:640px){
  body.bb-redirect{padding:26px 16px}
  .bb-relay{padding:28px 20px}
  .bb-relay__logo{max-width:156px;margin-bottom:18px}
  .bb-relay__lede{font-size:.97rem;margin-bottom:20px}
}

/* Palier aligne sur core.css (400 px) : couvre 360 et 390 px. */
@media (max-width:400px){
  body.bb-redirect{padding:22px 14px}
  .bb-relay{padding:24px 16px}
  .bb-relay__logo{max-width:140px;margin-bottom:16px}
  .bb-relay__lede{font-size:.94rem;margin-bottom:18px}
  .bb-relay__deal{padding:12px 14px;margin-bottom:20px}
  .bb-relay__steps{margin-top:18px}
  .bb-relay__step{font-size:.82rem;gap:9px}

  /* Trois pastilles sur une ligne deviennent trop etroites (~83 px de texte utile) :
     on passe a deux colonnes, la troisieme prend toute la largeur. */
  .bb-relay__perks{grid-template-columns:repeat(2,1fr);gap:7px;margin-top:18px}
  .bb-relay__perk{font-size:.7rem;padding:8px 9px}
  .bb-relay__perk:last-child{grid-column:1 / -1}

  .bb-relay__manual{font-size:.84rem;margin-top:18px}
}