/* ═══════════════════════════════════════════════════════════════════
   Yammbo Tv — auth page override (bg negro + card oscura + acento rojo)
   Loaded by /auth/login, /auth/register, /auth/forgot-password
   ═══════════════════════════════════════════════════════════════════ */

#auth-heading-title { padding-top: 8px; }

/* Body / page background */
html, body, #auth-body {
    background-color: #000 !important;
    color: #fff !important;
}

/* Hide background image/overlay, keep flat black */
#auth-background-image { display: none !important; }
#auth-background-image-overlay {
    background-color: #000 !important;
    opacity: 1 !important;
}

/* Hide "powered by DevDojo Auth" footer branding */
a[href*="devdojo.com/auth"],
a[href*="devdojo.com"][href*="utm_source=branding"] {
    display: none !important;
}

/* The main form card (was bg-white) */
#auth-container {
    background-color: #111 !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 16px !important;
    color: #fff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

/* All text defaults white */
#auth-container h1, #auth-container h2, #auth-container h3,
#auth-container label, #auth-container span, #auth-container p,
#auth-container div { color: #fff; }
#auth-container .text-neutral-400, #auth-container .text-neutral-500,
#auth-container .text-neutral-600, #auth-container .text-gray-400,
#auth-container .text-gray-500, #auth-container .text-gray-600,
#auth-container .text-slate-500 { color: #bdbdbd !important; }
#auth-container .text-neutral-900, #auth-container .text-gray-900,
#auth-container .text-black, #auth-container .text-slate-900,
#auth-container .text-zinc-900 { color: #fff !important; }

/* Inputs */
#auth-container input[type="text"],
#auth-container input[type="email"],
#auth-container input[type="password"],
#auth-container .auth-component-input {
    background-color: #1A1A1A !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}
#auth-container input::placeholder,
#auth-container .auth-component-input::placeholder { color: #666 !important; }
#auth-container input:focus,
#auth-container .auth-component-input:focus {
    border-color: #E50914 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #E50914 !important;
}

/* Floating labels (the "bg-white" little label on top of input borders) */
#auth-container .bg-white { background-color: #111 !important; color: #d4d4d8 !important; }
#auth-container label.bg-white { background-color: #111 !important; }

/* Primary button */
#auth-container button[type="submit"],
#auth-container .auth-component-button {
    background-color: #E50914 !important;
    color: #fff !important;
    border: none !important;
}
#auth-container button[type="submit"]:hover,
#auth-container .auth-component-button:hover {
    background-color: #B0070F !important;
}

/* Secondary / social auth buttons */
#auth-container .auth-component-social-button,
#auth-container .bg-gray-50,
#auth-container .bg-zinc-50,
#auth-container .bg-neutral-50,
#auth-container .bg-zinc-100 {
    background-color: #1A1A1A !important;
    border-color: #333 !important;
    color: #fff !important;
}
#auth-container .auth-component-social-button:hover { background-color: #2A2A2A !important; }

/* Links (forget password, sign up, change email) */
#auth-container a {
    color: #E50914 !important;
    text-decoration: none !important;
}
#auth-container a:hover { color: #FF3B45 !important; }

/* Divider line between email-login and social providers */
#auth-container .border-gray-200,
#auth-container .border-gray-300,
#auth-container .border-zinc-200,
#auth-container .border-slate-200 { border-color: #2A2A2A !important; }

/* Checkbox (Remember me) */
#auth-container .custom-checkbox { border-color: #555 !important; background-color: #1A1A1A !important; }
#auth-container input[type="checkbox"]:checked + .custom-checkbox,
#auth-container .peer:checked ~ .custom-checkbox { background-color: #E50914 !important; border-color: #E50914 !important; }

/* Code input (2FA) */
#auth-container .auth-component-code-input {
    background-color: #1A1A1A !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}
#auth-container .auth-component-code-input:focus { border-color: #E50914 !important; }