/* ===========================================================
 * style.css — Style tùy biến bổ sung cho Tailwind.
 * Phần lớn UI dùng class Tailwind; file này chỉ chứa:
 *   - Animation
 *   - Brand color helper
 *   - Card flip effect (nếu cần)
 * =========================================================== */

/* --- Animation: fade in nhẹ khi card kết quả xuất hiện --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

/* --- Spinner loading --- */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

/* --- Brand color helper (dùng cho badge logo brand) --- */
.brand-visa        { background: #1a1f71; color: #fff; }
.brand-mastercard  { background: #eb001b; color: #fff; }
.brand-amex        {
    background: linear-gradient(135deg, #2e77bb 0%, #6cb4ee 100%);
    color: #fff;
}
.brand-discover    { background: #ff6000; color: #fff; }
.brand-jcb         { background: #0e4c92; color: #fff; }
.brand-unionpay    { background: #d10429; color: #fff; }
.brand-default     { background: #6b7280; color: #fff; }

/* --- Card decoration --- */
.card-shadow {
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.15),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* --- Mono cho mã số --- */
.mono {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
    letter-spacing: 0.05em;
}

/* --- Trạng thái Luhn realtime --- */
.luhn-ok   { color: #10b981; }
.luhn-fail { color: #ef4444; }

/* --- Background gradient cho hero --- */
.hero-bg {
    background:
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.18) 0, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.18) 0, transparent 50%);
}