/* ============================================================
   Language Switcher Override (scoped to .bs-lang-switcher)
   Overrides connect-polylang-elementor plugin + Elementor
   generated styles. Uses 4+ class selectors for specificity.
   ============================================================ */

/* --- Toggle button --- */
.elementor-widget-polylang-language-switcher.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__lang.cpel-switcher__toggle a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: transparent;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #e2e8f0;
    transition: border-color 0.15s;
    text-decoration: none;
}

.elementor-widget-polylang-language-switcher.bs-lang-switcher .cpel-switcher__toggle a:hover,
.elementor-widget-polylang-language-switcher.bs-lang-switcher .cpel-switcher__toggle--on a {
    border-color: #2a3a52;
}

/* Remove the plugin's clickable overlay — JS handles clicks */
.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__toggle::after {
    display: none;
}

/* Hide language name in toggle (only show in dropdown) */
.bs-lang-switcher .cpel-switcher__toggle .cpel-switcher__name {
    display: none;
}

/* --- Toggle flag --- */
.bs-lang-switcher .cpel-switcher__toggle .cpel-switcher__flag {
    line-height: 1;
    display: flex;
    align-items: center;
}

.bs-lang-switcher .cpel-switcher__toggle .cpel-switcher__flag img {
    width: 18px;
    height: 14px;
}

/* --- Toggle code --- */
.bs-lang-switcher .cpel-switcher__toggle .cpel-switcher__code {
    padding-left: 0;
    color: #e2e8f0;
}

/* --- Chevron icon (replaces FA caret via JS) --- */
.bs-lang-switcher .bs-lang-chevron {
    color: #7a8ba7;
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    transition: transform 0.2s;
    padding-left: 0;
}

/* Override plugin's rotateX with simple rotate */
.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__toggle a i,
.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__toggle a .bs-lang-chevron {
    transform: rotate(0deg);
    transition: transform 0.2s;
}

.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__toggle--on a .bs-lang-chevron {
    transform: rotate(180deg);
}

/* --- Dropdown list --- */
.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__list {
    background: #111827;
    border: 1px solid #2a3a52;
    border-radius: 10px;
    padding: 4px;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.2s ease, opacity 0.15s ease;
}

.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__toggle--on + .cpel-switcher__list {
    max-height: 300px;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}

/* --- Dropdown items --- */
.elementor-widget-polylang-language-switcher.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__list .cpel-switcher__lang a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 7px;
    background-color: transparent;
    transition: background-color 0.12s;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
}

.elementor-widget-polylang-language-switcher.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__list .cpel-switcher__lang a:hover,
.elementor-widget-polylang-language-switcher.bs-lang-switcher.cpel-switcher--layout-dropdown .cpel-switcher__list .cpel-switcher__lang a:focus {
    background-color: #1a2236;
}

/* --- Dropdown flag --- */
.bs-lang-switcher .cpel-switcher__list .cpel-switcher__flag {
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    order: 1;
}

.bs-lang-switcher .cpel-switcher__list .cpel-switcher__flag img {
    width: 20px;
    height: 15px;
}

/* --- Dropdown code + name (reorder: code before name) --- */
.bs-lang-switcher .cpel-switcher__list .cpel-switcher__code {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding-left: 0;
    order: 2;
}

.bs-lang-switcher .cpel-switcher__list .cpel-switcher__name {
    font-size: 12px;
    color: #7a8ba7;
    padding-left: 8px;
    order: 3;
}

/* --- Checkmark for active language --- */
.bs-lang-switcher .bs-lang-check {
    color: #22d3a7;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    order: 4;
}