/* Estilos personalizados para Choices.js en Casa Amàlia */

/* Ajustar márgenes de la sección de selectores */
.vista-selectores-section {
    padding: 35px 0 0 0;
    margin: 0 0 -50px 0;
    position: relative;
    z-index: 100;
}

.vista-selectores-wrapper {
    padding: 0;
    margin: 0;
}

.vista-selector-control {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Personalización del select con Choices.js */
.choices {
    margin-bottom: 0;
    font-size: 16px;
    width: 275px;
    position: relative;
    z-index: 101;
}

/* Espaciado entre selects - ELIMINADO: se usa gap en el contenedor flex */

.choices__inner {
    background: #fdf8e8;
    border: 1px solid #ad9010;
    padding: 10px 15px;
    min-height: auto;
    border-radius: 0;
    font-family: inherit;
    text-align: left;
    color: #ad9010;
    /* Truncate para textos largos */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mantener borde dorado cuando está activo/enfocado */
.choices.is-open .choices__inner,
.choices.is-focused .choices__inner,
.choices__inner:focus {
    border-color: #ad9010;
}

.choices__list--dropdown {
    border: 1px solid #ad9010;
    border-top: none;
    background: #fff;
    z-index: 102;
}

.choices__list--dropdown .choices__item--selectable {
    padding: 10px 15px;
    font-size: 16px;
    text-align: left;
    color: #ad9010;
    /* Permitir que se vea el texto completo en el dropdown */
    white-space: normal;
    overflow: visible;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #fdf8e8;
    color: #ad9010;
}

/* Asegurar que el hover funcione correctamente */
.choices__list--dropdown .choices__item:hover,
.choices__list--dropdown .choices__item--selectable:hover {
    background-color: #fdf8e8 !important;
    color: #ad9010 !important;
}

.choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 10px;
}

/* Asegurar que el texto seleccionado también se trunque */
.choices[data-type*="select-one"] .choices__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ajustar flecha del dropdown (caret) */
.choices[data-type*="select-one"]:after {
    border-color: #ad9010 transparent transparent transparent;
    margin-top: -2.5px;
}

.choices[data-type*="select-one"].is-open:after {
    border-color: transparent transparent #ad9010 transparent;
    margin-top: -7.5px;
}

/* Responsive */
@media (max-width: 768px) {
    .choices__inner {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .choices__list--dropdown .choices__item--selectable {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* IMPORTANTE: El DIV wrapper ya controla la visibilidad del tercer selector */

/* Círculos de color para matices en dropdown */
.matiz-color-circle {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    float: right;
    margin-top: -2px;
}

/* Círculo de color en el elemento seleccionado (choices__inner) */
.choices__inner .matiz-color-circle {
    position: absolute !important;
    right: 35px !important; /* Dejar espacio para la flecha */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Ajustado para mejor alineación con el texto */
    margin: 0 !important;
    float: none !important;
}

/* Asegurar que las opciones del dropdown tengan layout correcto */
.choices__list--dropdown .choices__item--selectable,
.choices__list--dropdown .choices__item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
}

/* El texto debe ocupar el espacio disponible */
.choices__list--dropdown .choices__item--selectable:not(.matiz-color-circle),
.choices__list--dropdown .choices__item:not(.matiz-color-circle) {
    flex: 1;
}

/* Círculo posicionado específicamente */
.choices__list--dropdown .matiz-color-circle {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    float: none !important;
}

/* Preparar contenedores para transiciones */
.vista-subcategorias,
.accordion-1, .accordion-2, .accordion-3, 
.accordion-4, .accordion-5, .accordion-6 {
    position: relative;
}