/* ==============================
   AZOPT Modern B/W Switcher
   ============================== */

.azopt-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: relative;
}

/* Dropdown */
.azopt-lang {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background: #ffffff;
    color: #000000;

    border: 2px solid #000000;
    border-radius: 30px;

    padding: 8px 40px 8px 16px;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;
    transition: all 0.25s ease;
}

/* Hover */
.azopt-lang:hover {
    background: #000000;
    color: #ffffff;
}

/* Focus */
.azopt-lang:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

/* Custom arrow */
.azopt-switcher::after {
    content: "▾";
    position: absolute;
    right: 14px;
    pointer-events: none;
    font-size: 12px;
    color: #000000;
    transition: color 0.25s ease;
}

.azopt-lang:hover + .azopt-pill,
.azopt-lang:hover ~ .azopt-pill {
    background: #000000;
    color: #ffffff;
}

/* Status pill */
.azopt-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;

    background: #000000;
    color: #ffffff;

    transition: all 0.25s ease;
}

/* Subtle animation when active */
.azopt-switcher.active .azopt-lang {
    background: #000000;
    color: #ffffff;
}

/* Smooth micro interaction */
.azopt-lang,
.azopt-pill {
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.azopt-lang:active {
    transform: scale(0.97);
}