/* Dropdown de idioma Briva
 * --------------------------------
 * Estilo alineado con el tema Avanam/Ceramica: tipografía y colores leen
 * de las variables CSS de la plantilla (--palette*, --shadow, etc.) que
 * inyecta templatemelacore en runtime (custom_css_<shop>.css), así un
 * cambio de paleta lo arrastra sin tocar este archivo.
 *
 * El dropdown vive en el topbar verde superior (palette1) con texto
 * blanco; al abrirse usa caja blanca con borde sutil y sombra suave,
 * igual que el currency-selector hermano.
 */

.briva-lang-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--menu-font-family, inherit);
    /* El widget vive dentro del topbar verde (palette1) que tiene texto
     * blanco (Need Help?, Order Tracking). El wrapper de Avanam Builder
     * sin embargo no impone color, así que fijamos blanco aquí para que
     * icono globo, label y caret queden legibles sobre el fondo oscuro.
     * Si en algún momento el dropdown se usa fuera del topbar habrá que
     * pasar el color por modificador (.briva-lang-dropdown--dark, etc.). */
    color: var(--palette9, #fff);
}

/* -------- Toggle (texto en topbar) --------
 * El botón lleva las clases del tema `btn btn-link header-block__action-btn`
 * y el bundle del tema redefine `.btn-link { color: var(--color-link) }`
 * (palette1, verde) DESPUÉS de este archivo. Tenemos que ganar especificidad
 * combinando dos clases en el selector: `.briva-lang-dropdown .briva-lang-dropdown__toggle`
 * (= 0,2,0) supera a `.btn-link` (= 0,1,0) en cascada, sin recurrir a !important.
 */

.briva-lang-dropdown .briva-lang-dropdown__toggle {
    background: transparent;
    border: 0;
    /* Replicamos los valores tipográficos del widget hermano del topbar
     * (icon-list "Need Help / Order Tracking") definidos en el JSON de
     * Avanam Builder: font-size 15px, weight 400, padding 6px 0. Cada
     * widget Avanam aplica su propia tipografía, así que `font:inherit`
     * no la coge desde el wrapper — hay que fijarla aquí para alinear. */
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    padding: 11px 0;
    color: var(--palette9, #fff);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity var(--duration-short, .3s) ease;
}
.briva-lang-dropdown .briva-lang-dropdown__toggle:hover,
.briva-lang-dropdown .briva-lang-dropdown__toggle:focus,
.briva-lang-dropdown .briva-lang-dropdown__toggle:active,
.briva-lang-dropdown .briva-lang-dropdown__toggle:visited {
    color: var(--palette9, #fff);
    text-decoration: none;
    opacity: .75;
    outline: none;
    background: transparent;
}
.briva-lang-dropdown .briva-lang-dropdown__toggle .header-block__icon,
.briva-lang-dropdown .briva-lang-dropdown__toggle .briva-lang-dropdown__current,
.briva-lang-dropdown .briva-lang-dropdown__toggle .briva-lang-dropdown__caret {
    color: inherit;
}
.briva-lang-dropdown__toggle .header-block__icon {
    font-size: 1.15em;
    line-height: 1;
}
.briva-lang-dropdown__caret {
    font-size: .7em;
    line-height: 1;
    margin-left: 2px;
    transition: transform var(--duration-short, .3s) ease;
}
.briva-lang-dropdown.is-open .briva-lang-dropdown__caret {
    transform: rotate(180deg);
}

/* -------- Menú desplegable -------- */

.briva-lang-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 180px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: var(--palette9, #fff);
    border: 1px solid var(--palette7, #f0f0f0);
    border-radius: var(--border-radius, 5px);
    box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.08));
    font-size: var(--font-size-small, 14px);
    color: var(--palette3, #222);
}
.briva-lang-dropdown.is-open .briva-lang-dropdown__menu {
    display: block;
}

/* -------- Items -------- */

.briva-lang-dropdown__item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: var(--palette3, #222);
    text-decoration: none;
    white-space: nowrap;
    border-radius: calc(var(--border-radius, 5px) - 2px);
    transition: background-color var(--duration-short, .3s) ease,
                color var(--duration-short, .3s) ease;
}
.briva-lang-dropdown__item:hover,
.briva-lang-dropdown__item:focus {
    background-color: var(--palette7, #f0f0f0);
    color: var(--palette1, #50624c);
    text-decoration: none;
    outline: none;
}
.briva-lang-dropdown__item.active {
    background-color: transparent;
    color: var(--palette1, #50624c);
    font-weight: 600;
    cursor: default;
}
.briva-lang-dropdown__item.active:hover {
    background-color: transparent;
}

/* -------- Badge ISO -------- */

.briva-lang-dropdown__iso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    font-size: var(--font-size-xsmall, 11px);
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: calc(var(--border-radius, 5px) - 2px);
    background: var(--palette7, #f0f0f0);
    color: var(--palette4, #666);
    text-transform: uppercase;
}
.briva-lang-dropdown__item:hover .briva-lang-dropdown__iso,
.briva-lang-dropdown__item:focus .briva-lang-dropdown__iso {
    background: var(--palette1, #50624c);
    color: var(--palette9, #fff);
}
.briva-lang-dropdown__item.active .briva-lang-dropdown__iso {
    background: var(--palette1, #50624c);
    color: var(--palette9, #fff);
}

/* -------- Label del item -------- */

.briva-lang-dropdown__label {
    flex-grow: 1;
}