/* ── Vera Multilang: Language Switcher styles ─────────────────────── */

.vera-lang-switcher {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1;
    position: relative;
    z-index: 9999;
}

/* ── Dropdown variant ──────────────────────────────────────────────── */

.vera-lang-dropdown .vera-lang-current {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 13px;
    color: inherit;
    transition: border-color .2s, background .2s;
    white-space: nowrap;
}
.vera-lang-dropdown .vera-lang-current:hover,
.vera-lang-dropdown .vera-lang-current[aria-expanded="true"] {
    border-color: rgba(0,0,0,.35);
    background: rgba(0,0,0,.03);
}

.vera-lang-dropdown .vera-chevron {
    transition: transform .2s;
}
.vera-lang-dropdown .vera-lang-current[aria-expanded="true"] .vera-chevron {
    transform: rotate(180deg);
}

.vera-lang-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 10000;
}

/* RTL: open list to the right */
.vera-rtl .vera-lang-list {
    left: auto;
    right: 0;
}

.vera-lang-dropdown.open .vera-lang-list {
    display: block;
}

.vera-lang-list li {
    margin: 0;
    padding: 0;
}
.vera-lang-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    text-decoration: none;
    color: #333;
    transition: background .15s;
    white-space: nowrap;
}
.vera-lang-list a:hover {
    background: #f5f5f5;
}
.vera-lang-list a.vera-lang-active {
    font-weight: 600;
    color: #000;
}

/* ── Inline variant ────────────────────────────────────────────────── */

.vera-lang-inline {
    gap: 6px;
}
.vera-lang-inline .vera-lang-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    opacity: .65;
    transition: opacity .2s;
    font-size: 13px;
}
.vera-lang-inline .vera-lang-item:hover {
    opacity: 1;
}
.vera-lang-inline .vera-lang-item.vera-lang-active {
    opacity: 1;
    font-weight: 600;
    border-bottom: 2px solid currentColor;
}

/* ── Flags ─────────────────────────────────────────────────────────── */

.vera-flag {
    font-size: 16px;
    line-height: 1;
}

/* ── Minimog header integration ─────────────────────────────────────
   Minimog wraps header elements in .minimog-header. These rules
   align the switcher vertically with other header icons.
─────────────────────────────────────────────────────────────────── */

.minimog-header .vera-lang-switcher,
.site-header    .vera-lang-switcher {
    margin: 0 8px;
    align-self: center;
}

/* Dark header variant (common in Minimog fashion demos) */
.minimog-header.header-style-dark .vera-lang-current,
.minimog-header[data-color-scheme="dark"] .vera-lang-current {
    border-color: rgba(255,255,255,.25);
    color: #fff;
}
.minimog-header.header-style-dark .vera-lang-list {
    background: #111;
    border-color: rgba(255,255,255,.1);
}
.minimog-header.header-style-dark .vera-lang-list a {
    color: #eee;
}
.minimog-header.header-style-dark .vera-lang-list a:hover {
    background: rgba(255,255,255,.08);
}