/* Estilos para el componente Chosen (select personalizado) en MODO OSCURO */

/* Contenedor principal y la caja de selección (cuando está cerrado) */
/* ¡ACTUALIZADO! Incluye AHORA TRES IDs para asegurar que todos los selectores se oscurezcan */
html[data-bs-theme="dark"] #title_field_chosen .chosen-single,
html[data-bs-theme="dark"] #virtuemart_country_id_field_chosen .chosen-single,
html[data-bs-theme="dark"] #virtuemart_state_id_field_chosen .chosen-single { /* <-- NUEVO ID AÑADIDO AQUI */
    background-color: #333333 !important; /* Fondo oscuro definitivo */
    background-image: none !important;    /* ¡CRÍTICO! Eliminar cualquier imagen de fondo del sprite de Chosen */
    border: 1px solid #555555 !important; /* Borde oscuro */
    color: #ffffff !important;           /* Color del texto del elemento seleccionado */
    box-shadow: none !important;         /* Asegura que no haya sombras claras de Bootstrap/Chosen */
}

/* Texto del elemento seleccionado visible (para "-- Seleccionar --" o el valor actual) */
/* ¡ACTUALIZADO! Incluye AHORA TRES IDs */
html[data-bs-theme="dark"] #title_field_chosen .chosen-single span,
html[data-bs-theme="dark"] #virtuemart_country_id_field_chosen .chosen-single span,
html[data-bs-theme="dark"] #virtuemart_state_id_field_chosen .chosen-single span { /* <-- NUEVO ID AÑADIDO AQUI */
    color: #ffffff !important; /* Asegura que el texto visible sea blanco */
}

/* Flecha desplegable (el 'b' dentro del 'div') */
/* ¡ACTUALIZADO! Incluye AHORA TRES IDs */
html[data-bs-theme="dark"] #title_field_chosen .chosen-single div b,
html[data-bs-theme="dark"] #virtuemart_country_id_field_chosen .chosen-single div b,
html[data-bs-theme="dark"] #virtuemart_state_id_field_chosen .chosen-single div b { /* <-- NUEVO ID AÑADIDO AQUI */
    /* Opción 1: Si la flecha es una IMAGEN (sprite) y se ve mal (negra sobre negro, etc.) */
    filter: invert(1) brightness(1.5) !important; /* Invierte colores y aumenta brillo para hacerla visible */

    /* Opción 2: Si la flecha está hecha con BORDES CSS (menos común para Chosen por defecto) */
    /* Si la opción 1 no funciona y sospechas que es CSS, descomenta esto: */
    /* border-top-color: #ffffff !important; */
}



/*
 * Código CSS optimizado para el componente Chosen.js en modo oscuro.
 *
 * Optimización aplicada:
 * - Concisión: Selectores combinados para el estado cerrado (usando IDs para robustez).
 * - Robustez: Uso de IDs y '!important' para asegurar la sobrescritura de estilos preexistentes
 * en un entorno complejo (Joomla/Astroid/Virtuemart).
 * - Generalización: Reglas para el desplegable son generales (basadas en clases)
 * ya que se aplican consistentemente a todas las instancias.
 * - Rendimiento: Selectores directos y compactos.
 */

/* Estilos para el componente Chosen (select personalizado) en MODO OSCURO */

/* Contenedor principal y la caja de selección (cuando está cerrado) */
/* ¡ACTUALIZADO! Incluye TRES IDs para asegurar que todos los selectores se oscurezcan */
html[data-bs-theme="dark"] #title_field_chosen .chosen-single,
html[data-bs-theme="dark"] #virtuemart_country_id_field_chosen .chosen-single,
html[data-bs-theme="dark"] #virtuemart_state_id_field_chosen .chosen-single {
    background-color: #333333 !important; /* Fondo oscuro definitivo */
    background-image: none !important;    /* ¡CRÍTICO! Eliminar cualquier imagen de fondo del sprite de Chosen */
    border: 1px solid #555555 !important; /* Borde oscuro */
    color: #ffffff !important;           /* Color del texto del elemento seleccionado */
    box-shadow: none !important;         /* Asegura que no haya sombras claras de Bootstrap/Chosen */
}

/* Texto del elemento seleccionado visible (para "-- Seleccionar --" o el valor actual) */
/* ¡ACTUALIZADO! Incluye TRES IDs */
html[data-bs-theme="dark"] #title_field_chosen .chosen-single span,
html[data-bs-theme="dark"] #virtuemart_country_id_field_chosen .chosen-single span,
html[data-bs-theme="dark"] #virtuemart_state_id_field_chosen .chosen-single span {
    color: #ffffff !important; /* Asegura que el texto visible sea blanco */
}

/* Flecha desplegable (el 'b' dentro del 'div') */
/* ¡ACTUALIZADO! Incluye TRES IDs */
html[data-bs-theme="dark"] #title_field_chosen .chosen-single div b,
html[data-bs-theme="dark"] #virtuemart_country_id_field_chosen .chosen-single div b,
html[data-bs-theme="dark"] #virtuemart_state_id_field_chosen .chosen-single div b {
    /* Opción 1: Si la flecha es una IMAGEN (sprite) y se ve mal (negra sobre negro, etc.) */
    filter: invert(1) brightness(1.5) !important; /* Invierte colores y aumenta brillo para hacerla visible */

    /* Opción 2: Si la flecha está hecha con BORDES CSS (menos común para Chosen por defecto) */
    /* Si la opción 1 no funciona y sospechas que es CSS, descomenta esto: */
    /* border-top-color: #ffffff !important; */
}


/* ------------------------------------------------------------------------------------- */
/* Las siguientes reglas no necesitan cambios ya que no dependen del ID del select box.  */
/* Se aplican a todos los desplegables de Chosen una vez que están abiertos.           */
/* ------------------------------------------------------------------------------------- */

/* Contenedor del desplegable (cuando se abre) */
html[data-bs-theme="dark"] .chosen-container .chosen-drop {
    background-color: #333333 !important; /* Fondo oscuro del desplegable */
    border: 1px solid #555555 !important; /* Borde oscuro */
}

/* Campo de búsqueda dentro del desplegable */
html[data-bs-theme="dark"] .chosen-container .chosen-search input[type="text"] {
    background-color: #222222 !important; /* Fondo aún más oscuro para el input de búsqueda */
    color: #ffffff !important;           /* Texto blanco en el input */
    border: 1px solid #444444 !important; /* Borde oscuro del input */
}

/* Lista de resultados (opciones) - Asegura que el texto general sea legible */
html[data-bs-theme="dark"] .chosen-container .chosen-results {
    color: #f0f0f0 !important; /* Color de texto por defecto para todas las opciones */
}

/* Elementos individuales de la lista (las opciones como "Sr.", "Sra.", "México") */
/* Asegura que el fondo de cada elemento sea transparente para ver el fondo del .chosen-drop */
html[data-bs-theme="dark"] .chosen-container .chosen-results li {
    background-color: transparent !important; /* Fondo transparente para las opciones */
    color: #f0f0f0 !important; /* Texto de las opciones un poco más grisáceo */
}

/* Elemento activo/hover en la lista (cuando pasas el ratón por encima) */
html[data-bs-theme="dark"] .chosen-container .chosen-results li.highlighted {
    background-color: #007bff !important; /* Usar el color primario de Bootstrap para resaltar */
    color: #ffffff !important;           /* Texto blanco en el elemento resaltado */
}

/* Elemento seleccionado en la lista (si es visible en la lista de opciones) */
html[data-bs-theme="dark"] .chosen-container .chosen-results li.result-selected {
    background-color: #0056b3 !important; /* Un azul un poco más oscuro para el seleccionado */
    color: #ffffff !important;           /* Texto blanco en el elemento seleccionado */
}

/* Para el texto "-- Seleccionar --" si aparece como opción y tiene un color gris por defecto */
/* Esto apunta a la primera opción de la lista desplegable */
html[data-bs-theme="dark"] .chosen-container .chosen-results li[data-option-array-index="0"] {
    color: #cccccc !important; /* Un gris más claro para esta opción específica */
}