/* =========================================================
   MCPREMIUM - UPGRADE DARK
   Solo apariencia. No modifica IDs, names, JS, PHP ni lógica.
   ========================================================= */

/* Fondo de la página Upgrade */
main {
    background: #080A09 !important;
}

/* Títulos/textos generales del área principal */
main h1,
main h2,
main h3 {
    color: #FFFFFF !important;
}

main p {
    color: #B8C0BA;
}

/* =========================================================
   CONTENEDORES / TARJETAS
   Purchase an Upgrade Key
   Enter Your Details
   Frequently Asked Questions
   ========================================================= */

/* Tarjetas comunes usadas por la página */
main .card,
main .form-card,
main .faq-container,
main .faq-section {
    background: #0D100E !important;
    color: #FFFFFF !important;
    border-color: #2B342E !important;
}

/* Si las tarjetas usan estilos inline con fondo blanco,
   estos selectores fuerzan únicamente la apariencia. */
main div[style*="background: white"],
main div[style*="background:white"],
main div[style*="background: var(--color-surface)"],
main div[style*="background:var(--color-surface)"] {
    background: #0D100E !important;
    color: #FFFFFF !important;
    border-color: #2B342E !important;
}

/* Títulos dentro de los contenedores */
main .card h2,
main .card h3,
main .form-card h2,
main .form-card h3,
main .faq-container h2,
main .faq-container h3,
main .faq-section h2,
main .faq-section h3 {
    color: #FFFFFF !important;
}

/* =========================================================
   FORMULARIOS
   ========================================================= */

main label,
main .form-label {
    color: #F4F6F4 !important;
}

/* Inputs de texto, email, password, etc. */
main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
main textarea,
main select,
main .form-control,
main .form-select {
    background: #171C19 !important;
    background-color: #171C19 !important;
    color: #FFFFFF !important;
    border: 1px solid #3A463E !important;
    caret-color: #FFFFFF !important;
}

/* Placeholder claramente visible */
main input::placeholder,
main textarea::placeholder,
main .form-control::placeholder {
    color: #AEB7B1 !important;
    opacity: 1 !important;
}

/* Compatibilidad adicional de placeholders */
main input::-webkit-input-placeholder,
main textarea::-webkit-input-placeholder {
    color: #AEB7B1 !important;
    opacity: 1 !important;
}

main input::-moz-placeholder,
main textarea::-moz-placeholder {
    color: #AEB7B1 !important;
    opacity: 1 !important;
}

/* Campo seleccionado */
main input:focus,
main textarea:focus,
main select:focus,
main .form-control:focus,
main .form-select:focus {
    background: #1B211D !important;
    color: #FFFFFF !important;
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.16) !important;
}

/* Opciones de select */
main select option {
    background: #171C19 !important;
    color: #FFFFFF !important;
}

/* Chrome autofill: evita fondo blanco/amarillo */
main input:-webkit-autofill,
main input:-webkit-autofill:hover,
main input:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-box-shadow: 0 0 0 1000px #171C19 inset !important;
    box-shadow: 0 0 0 1000px #171C19 inset !important;
    caret-color: #FFFFFF !important;
}

/* Textos de ayuda debajo de los campos */
main .form-text,
main small,
main .text-muted {
    color: #AEB7B1 !important;
}

/* =========================================================
   FAQ
   ========================================================= */

main .faq-item,
main details {
    background: #121713 !important;
    color: #FFFFFF !important;
    border-color: #303A33 !important;
}

main .faq-question,
main summary {
    color: #FFFFFF !important;
}

main .faq-answer,
main details p {
    color: #BEC6C0 !important;
}

/* =========================================================
   BOTONES / LINKS
   ========================================================= */

main a {
    color: var(--color-primary);
}

/* Mantiene botones principales verdes y texto legible */
main .btn-primary,
main .btn-success {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #071009 !important;
}

main .btn-primary:hover,
main .btn-success:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #FFFFFF !important;
}


/* =========================================================
   HEADER / NAVBAR DE UPGRADE
   ========================================================= */
html body nav.navbar,
html body .navbar {
    background: #080A09 !important;
    background-color: #080A09 !important;
    background-image: none !important;
    border-bottom: 1px solid #242A26 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.30) !important;
}

/* Nombre / logo textual y enlaces del encabezado */
html body .navbar-brand,
html body .navbar-brand span,
html body .navbar .nav-link,
html body .navbar .nav-dropdown-toggle {
    color: #FFFFFF !important;
}

html body .navbar .nav-link:hover,
html body .navbar .nav-dropdown-toggle:hover {
    color: var(--color-primary) !important;
}

/* Menú desplegable del header */
html body .nav-dropdown-menu {
    background: #111411 !important;
    background-color: #111411 !important;
    border-color: #2D352F !important;
}

html body .nav-dropdown-item,
html body .nav-dropdown-item span {
    color: #FFFFFF !important;
}

html body .nav-dropdown-item small {
    color: #AEB7B1 !important;
}

html body .nav-dropdown-item:hover,
html body .nav-dropdown-item:focus {
    background: #1A201C !important;
}

/* Icono del menú móvil */
html body .mobile-menu-toggle,
html body .mobile-menu-toggle svg {
    color: #FFFFFF !important;
}


/* ===== SUCCESS ALERT FIX ===== */
#alertContainer .alert-success,
#alertContainer [class*="success"] {
    background: #0D2115 !important;
    background-color: #0D2115 !important;
    border: 1px solid #1DB954 !important;
    color: #FFFFFF !important;
}
#alertContainer .alert-success *,
#alertContainer [class*="success"] * {
    color: #FFFFFF !important;
}
#alertContainer .alert-success svg,
#alertContainer .alert-success i,
#alertContainer [class*="success"] svg,
#alertContainer [class*="success"] i {
    color: #1DB954 !important;
    stroke: #1DB954 !important;
}