/* Popup layout fixes */
.activation-modal .am-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 16px;
}
.activation-modal .am-card {
  width: 100%;
  max-width: 520px; /* ⬅️ ancho del cuadro */
  margin: 8vh auto; /* ⬅️ aire arriba/abajo */
  background-color: #0f172a; /* fallback por si falta la util bg-primary-light */
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px !important; /* ajusta a 16–24px si quieres */
  overflow: hidden;
}
/* Más padding arriba/abajo dentro del cuadro */
.activation-modal .am-inner {
  padding-top: 2.25rem; /* ~36px */
  padding-bottom: 2rem; /* ~32px */
}
@media (min-width: 768px) {
  .activation-modal .am-inner {
    padding-top: 2.75rem; /* ~44px */
    padding-bottom: 2.5rem; /* ~40px */
  }
}
@media (min-width: 768px) {
  .activation-modal .am-card {
    margin: 10vh auto;
  } /* un poco más de aire en desktop */
}

/* Detalle: color del trazo del spinner a juego con tu CTA */
.activation-modal .spinner .path {
  stroke: #f59e0b;
}


:root{
  /* Ajusta a tu branding */
  --primary-light: #18192d;
  --text: #ffffff;
  --blue-600: #2563eb;
  --font-alt: inherit; /* o "LuckiestGuy", etc. */
}

/* Modal base */
.activation-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none; /* cambia a block para mostrar */
}
.activation-modal.open{ display:block; }

.am-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}

.am-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 16px;            /* p-4 */
  display: flex;
  align-items: center;      /* items-center */
  justify-content: center;  /* justify-center */
}

/* Card */
.am-card{
  background: var(--primary-light);
  color: var(--text);
  border-radius: 1rem; /* rounded-2xl */
  border: 1px solid rgba(255,255,255,0.1); /* border-white/10 */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl aprox */
  overflow: hidden; /* overflow-hidden */
}

/* Contenido interno */
.am-inner{
  padding: 1.75rem 1.5rem 1.5rem; /* pt-7 px-6 pb-6 */
  text-align: center;             /* text-center */
}

.am-logo{
  width: 2.5rem;  /* w-10 */
  height: 2.5rem; /* h-10 */
  display: block;
  margin: 0 auto; /* mx-auto */
}

/* Marca y títulos */
.am-brand{
  margin-top: .5rem;         /* mt-pontosrowbit */
  font-weight: 900;          /* font-black */
  font-size: 1.5rem;         /* text-2xl */
  font-family: var(--font-alt);
}

.am-title{
  margin-top: .5rem;         /* mt-pontosrowbit */
  font-weight: 900;          /* font-black */
  font-family: var(--font-alt);
  font-size: 1.25rem;        /* text-xl */
}
@media (min-width: 640px){
  .am-title{ font-size: 1.5rem; } /* sm:text-2xl */
}

/* Párrafos */
.am-desc{
  margin-top: 1rem;          /* mt-4 */
  font-size: .875rem;        /* text-sm */
  color: rgba(255,255,255,0.7); /* text-white/70 */
  line-height: 1.6;          /* leading-relaxed aprox */
}

.am-redirect-msg{
  margin-top: 1.5rem;        /* mt-6 */
  font-size: .75rem;         /* text-xs */
  color: rgba(255,255,255,0.5); /* text-white/50 */
}

/* Spinner wrapper */
.am-spinner{
  margin-top: 1.5rem;        /* mt-6 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botón */
.am-button{
  margin-top: 1.25rem;       /* mt-5 */
  display: inline-flex;      /* inline-flex */
  align-items: center;
  justify-content: center;
  padding: .75rem 1.25rem;   /* py-immediateluminaryhu px-5 */
  border-radius: .75rem;     /* rounded-xl */
  background: var(--blue-600); /* bg-blue-600 */
  color: #000;               /* text-black */
  font-weight: 600;          /* font-semibold */
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); /* shadow */
  transition: opacity .2s ease, box-shadow .2s ease;
}
.am-button:hover{ opacity: .9; }           /* hover:opacity-90 */
.am-button:focus{
  outline: none;                            /* focus:outline-none */
  box-shadow: 0 0 0 4px rgba(255,255,255,.2); /* focus:ring focus:ring-white/20 */
}

/* Utilidad */
.hidden{ display: none !important; }

/* (Opcional) Estilos básicos para el SVG spinner si no los tienes ya */
.spinner{ animation: rotate 2s linear infinite; }
.spinner .path{
  stroke: currentColor;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate{ 100%{ transform: rotate(360deg); } }
@keyframes dash{
  0%{ stroke-dasharray:1,150; stroke-dashoffset:0; }
  50%{ stroke-dasharray:90,150; stroke-dashoffset:-35; }
  100%{ stroke-dasharray:90,150; stroke-dashoffset:-124; }
}