/**
 * AUTH MODAL DARK MODE OVERRIDE
 * Professional Dark Mode Styling for the Authentication Modal
 */

/* Target Dark Mode explicitly */
html.dark-mode .auth-modal,
body.dark-mode .auth-modal,
[data-theme="dark"] .auth-modal {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

/* Modal Title */
html.dark-mode .auth-modal__title,
body.dark-mode .auth-modal__title,
[data-theme="dark"] .auth-modal__title {
    color: #ffffff !important;
}

/* Close Button */
html.dark-mode .auth-modal__close-btn,
body.dark-mode .auth-modal__close-btn,
[data-theme="dark"] .auth-modal__close-btn {
    color: #a0a0a0 !important;
}

html.dark-mode .auth-modal__close-btn:hover,
body.dark-mode .auth-modal__close-btn:hover,
[data-theme="dark"] .auth-modal__close-btn:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Option Buttons (Email, Facebook, Google) */
html.dark-mode .auth-modal__option-btn,
body.dark-mode .auth-modal__option-btn,
[data-theme="dark"] .auth-modal__option-btn {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
    color: #e4e6eb !important;
}

html.dark-mode .auth-modal__option-btn:hover,
body.dark-mode .auth-modal__option-btn:hover,
[data-theme="dark"] .auth-modal__option-btn:hover {
    background-color: #3a3b3c !important;
    border-color: #505050 !important;
}

html.dark-mode .auth-modal__option-btn__text,
body.dark-mode .auth-modal__option-btn__text,
[data-theme="dark"] .auth-modal__option-btn__text {
    color: #e4e6eb !important;
}

/* Icons */
html.dark-mode .auth-modal__option-btn__icon,
body.dark-mode .auth-modal__option-btn__icon,
[data-theme="dark"] .auth-modal__option-btn__icon {
    color: #b0b3b8 !important;
}

/* Specific Brand Colors Adjustments for Dark Mode (Optional: Keep subtle or generic) */
/* Facebook */
html.dark-mode .auth-modal__option-btn:nth-child(2) .auth-modal__option-btn__icon,
body.dark-mode .auth-modal__option-btn:nth-child(2) .auth-modal__option-btn__icon,
[data-theme="dark"] .auth-modal__option-btn:nth-child(2) .auth-modal__option-btn__icon {
    color: #1877f2 !important;
    /* Keep brand color but on dark bg */
}

/* Google */
html.dark-mode .auth-modal__option-btn:nth-child(3) .auth-modal__option-btn__icon,
body.dark-mode .auth-modal__option-btn:nth-child(3) .auth-modal__option-btn__icon,
[data-theme="dark"] .auth-modal__option-btn:nth-child(3) .auth-modal__option-btn__icon {
    color: #ea4335 !important;
}

/* Divider */
html.dark-mode .auth-modal__divider,
body.dark-mode .auth-modal__divider,
[data-theme="dark"] .auth-modal__divider {
    border-bottom: 1px solid #3e4042 !important;
}

html.dark-mode .auth-modal__divider span,
body.dark-mode .auth-modal__divider span,
[data-theme="dark"] .auth-modal__divider span {
    background-color: #1e1e1e !important;
    /* Match modal bg */
    color: #b0b3b8 !important;
}

/* Footer Link ("Regístrate aquí") */
html.dark-mode .auth-modal__footer-link,
body.dark-mode .auth-modal__footer-link,
[data-theme="dark"] .auth-modal__footer-link {
    color: #2D88FF !important;
    /* Brighter blue for dark mode */
}

html.dark-mode .auth-modal__footer-link:hover,
body.dark-mode .auth-modal__footer-link:hover,
[data-theme="dark"] .auth-modal__footer-link:hover {
    text-decoration: underline !important;
}