/* assets/css/actions.css (COMPLETO — CORRIGIDO / SEM DUPLICAÇÃO / BOTÃO 100% ALINHADO) */

.actions{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin:18px auto;
}

/* base */
.btn{
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-weight:900;
  border-radius:14px;
  -webkit-tap-highlight-color:transparent;
}

/* botão principal (spin) */
.btn--spin{
  position:relative;

  width:100%;
  max-width:600px;          /* mobile/tablet */
  height:64px;
  min-height:64px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 20px;

  text-align:center;
  color:#fff;
  background:var(--deep);

  font-size:15px;
  letter-spacing:.4px;
  text-transform:uppercase;

  overflow:hidden;
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}

.btn--spin:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
}

.btn--spin:active{
  transform:translateY(0);
  filter:brightness(.98);
}

/* brilho animado (leve) */
.btn--spin::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-25deg);
  animation:btnshine 3s infinite;
  pointer-events:none;
}

@keyframes btnshine{
  0%{ left:-60%; }
  100%{ left:130%; }
}

/* estado desativado */
.btn--spin.is-disabled,
.btn--spin:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.2);
  transform:none !important;
}

/* Desktop: mesma largura do card/roleta */
@media (min-width:1024px){
  .actions{
    max-width:760px;
  }
  .btn--spin{
    max-width:none; /* herda a largura do .actions */
  }
}

/* Mobile: ajusta levemente */
@media (max-width:560px){
  .actions{
    margin:14px auto;
    gap:8px;
  }
  .btn--spin{
    height:60px;
    min-height:60px;
    font-size:14px;
    letter-spacing:.35px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn--spin,
  .btn--spin::after{
    transition:none !important;
    animation:none !important;
  }
}

.actions__note{
  max-width:620px;
  text-align:center;

  font-size:10px;
  font-weight:500;

  color:rgba(10,27,143,.75);

  margin-top:4px;
  padding:0 14px;

  line-height:1.4;
}