/* 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-2 */
    font-weight: 900;
    /* font-black */
    font-size: 1.5rem;
    /* text-2xl */
    font-family: var(--font-alt);
}

.am-title {
    margin-top: .5rem;
    /* mt-2 */
    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-3 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;
    }
}