/* ===== MUA365 – Forgot Popup (Sky/Cyan) ===== */

/* Tokens */
:root {
    --sky: #0ea5e9;
    --cyan: #06b6d4;
    --ink: #0f172a;
    --glass: rgba(255,255,255,.92);
    --border: #e2e8f0;
}

/* Overlay phủ toàn màn + blur nhẹ */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
    background: radial-gradient(900px 500px at 50% 0%, rgba(14,165,233,.10), transparent 55%), rgba(2,6,23,.70);
    backdrop-filter: blur(3px);
}

    .popup-overlay.show {
        opacity: 1;
        transform: translateY(0);
    }

/* Fade-in cho box */
@keyframes fadePopup {
    from {
        opacity: 0;
        transform: scale(.96) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Hộp nội dung (glass, cùng tông) */
.popup-box {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 18px 55px rgba(14,165,233,.18), 0 2px 10px rgba(2,6,23,.06);
    transition: transform .18s ease, filter .18s ease;
    animation: fadePopup .32s cubic-bezier(.25,.8,.25,1);
}

    .popup-box:hover {
        transform: translateY(-1px);
        filter: brightness(1.01);
    }

/* Icon thư – chuyển từ đỏ sang sky/cyan */
.popup-mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: radial-gradient(closest-side,#fff 64%,transparent 66%), conic-gradient(from 0deg, var(--sky), #22d3ee, var(--cyan), var(--sky));
    box-shadow: 0 0 0 8px rgba(14,165,233,.10);
    color: var(--sky);
    font-size: 2rem;
}

    .popup-mail::after {
        content: "✉️";
        font-size: 34px;
    }

/* Nút cơ bản */
.popup-btn {
    display: inline-block;
    font-weight: 700;
    text-align: center;
    border-radius: 12px;
    padding: .75rem 1.2rem;
    transition: transform .15s ease, filter .15s ease;
    box-shadow: 0 8px 18px rgba(14,165,233,.18);
}

    .popup-btn:hover {
        transform: translateY(-1px);
    }

/* Ép 2 nút về cùng tông sky/cyan (ghi đè Tailwind gradient) */
.popup-box .popup-btn {
    color: #fff !important;
    background: linear-gradient(90deg, var(--sky), var(--cyan)) !important;
}

/* Spinner dùng chung của bạn */
.loading-spinner {
    border: 3px solid rgba(255,255,255,.35);
    border-top: 3px solid #fff;
    border-radius: 999px;
    width: 20px;
    height: 20px;
    animation: spin .8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Khi form gửi */
button.loading {
    pointer-events: none;
    opacity: .85;
}

form.sending {
    opacity: .65;
    pointer-events: none;
    transition: opacity .25s ease;
}