/* CodeOn Multilingual — frontend switcher styles.
 *
 * Themes routinely set img { max-width: 100%; height: auto; } which makes
 * our 640×480 flag SVGs render at full container width. !important is the
 * only reliable way to win that specificity battle without resorting to
 * inline styles on every <img>.
 */

.cml-floating-switcher {
    position: fixed;
    z-index: 99999;
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1.4;
    color: #222;
}
.cml-floating-switcher.cml-pos-bottom-right { bottom: 20px; right: 20px; }
.cml-floating-switcher.cml-pos-bottom-left  { bottom: 20px; left:  20px; }
.cml-floating-switcher.cml-pos-top-right    { top:    20px; right: 20px; }
.cml-floating-switcher.cml-pos-top-left     { top:    20px; left:  20px; }

/* Reset: any theme rule on img inside our switcher loses to these. */
.cml-language-switcher img,
.cml-floating-switcher img {
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: content-box !important;
}

.cml-language-switcher img.cml-flag-svg,
.cml-floating-switcher img.cml-flag-svg {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-height: 20px !important;
    max-width: 28px !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
}

/* ---------- list style ---------- */

ul.cml-language-switcher,
.cml-floating-switcher ul.cml-language-switcher {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 4px;
    align-items: center;
}
.cml-language-switcher .cml-language-item { margin: 0; padding: 0; list-style: none; }
.cml-language-switcher .cml-language-item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s, color 0.15s;
}
/* No hover background — let the theme decide. */
.cml-language-switcher .cml-language-item.cml-current a {
    background: transparent;
    color: inherit;
    font-weight: 600;
}

/* ---------- custom dropdown (button + list) ---------- */

.cml-language-switcher.cml-style-dropdown {
    position: relative;
    display: inline-block;
}
/* Inside the floating switcher, defer the menu's containing block to the
   floating-switcher itself so right:0 anchors to the OUTER (padded) edge
   and the menu visually matches the floating-switcher card width. */
.cml-floating-switcher .cml-language-switcher.cml-style-dropdown {
    position: static;
}
.cml-language-switcher .cml-dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background: #fff;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap;
}
.cml-language-switcher .cml-dropdown-toggle:hover { background: #f6f7f7; }
.cml-language-switcher .cml-dropdown-toggle:focus { outline: 2px solid #2271b1; outline-offset: 1px; }
/* Let language names dictate the button width — no ellipsis truncation. */
.cml-language-switcher .cml-dropdown-toggle > .cml-name,
.cml-language-switcher .cml-dropdown-toggle > .cml-native,
.cml-language-switcher .cml-dropdown-toggle > .cml-code {
    overflow: visible;
    text-overflow: clip;
    max-width: none !important;
    white-space: nowrap;
}
.cml-language-switcher .cml-dropdown-arrow {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 4px;
    transition: transform 0.15s;
    flex: 0 0 auto;
}
.cml-language-switcher .cml-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    margin: 0;
    padding: 4px 0;
    list-style: none !important;
    list-style-type: none !important;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    /* `max-content` makes the menu exactly as wide as its widest item,
       overriding the position-absolute shrink-to-fit logic that was
       clipping non-Latin scripts (e.g. "ქართული"). min-width keeps it
       at least as wide as the toggle so short languages don't look
       cramped under a wider button. */
    width: max-content !important;
    min-width: 100%;
    max-width: none !important;
}
/* Defeat themes that override [hidden] { display: block }. */
.cml-language-switcher .cml-dropdown-menu[hidden] { display: none !important; }

/* Aggressive bullet removal — themes (WoodMart in particular) add bullets
   via ::marker, ::before content rules, and `list-style: disc !important`
   so we need to kill every vector. */
.cml-language-switcher ul,
.cml-language-switcher ul li,
.cml-language-switcher .cml-dropdown-menu,
.cml-language-switcher .cml-dropdown-menu li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
}
.cml-language-switcher ul li::marker,
.cml-language-switcher .cml-dropdown-menu li::marker { content: none !important; }
.cml-language-switcher ul li::before,
.cml-language-switcher .cml-dropdown-menu li::before { content: none !important; display: none !important; }
.cml-language-switcher .cml-dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}
.cml-language-switcher .cml-dropdown-menu li a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}
.cml-language-switcher .cml-dropdown-menu li a:hover,
.cml-language-switcher .cml-dropdown-menu li a:focus {
    background: #f0f6fc;
    outline: none;
}
.cml-language-switcher.cml-style-dropdown[data-cml-open] .cml-dropdown-arrow {
    transform: rotate(180deg);
}
.cml-language-switcher.cml-style-dropdown[data-cml-open] .cml-dropdown-menu {
    /* `hidden` attribute is removed by JS; this is just belt-and-braces in
       case a theme uses [hidden] { display: block } anywhere. */
    display: block !important;
}

/* Floating switcher position-aware menu placement.
   When the toggle button is pinned to the bottom of the viewport the menu
   would extend below it and get clipped, so flip it to open upward. Same
   logic for horizontal alignment on right-anchored positions. */
.cml-floating-switcher.cml-pos-bottom-right .cml-dropdown-menu,
.cml-floating-switcher.cml-pos-bottom-left .cml-dropdown-menu {
    top: auto;
    bottom: calc(100% + 4px);
}
.cml-floating-switcher.cml-pos-bottom-right .cml-dropdown-menu,
.cml-floating-switcher.cml-pos-top-right .cml-dropdown-menu {
    left: auto;
    right: 0;
}

/* When the menu opens upward, flip the arrow so it points up (it's
   pointing down by default, which would be misleading). */
.cml-floating-switcher.cml-pos-bottom-right .cml-dropdown-arrow,
.cml-floating-switcher.cml-pos-bottom-left .cml-dropdown-arrow {
    transform: rotate(180deg);
}
.cml-floating-switcher.cml-pos-bottom-right .cml-language-switcher.cml-style-dropdown[data-cml-open] .cml-dropdown-arrow,
.cml-floating-switcher.cml-pos-bottom-left .cml-language-switcher.cml-style-dropdown[data-cml-open] .cml-dropdown-arrow {
    transform: rotate(0deg);
}

/* ---------- flags-only style ---------- */

ul.cml-language-switcher.cml-style-flags {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 6px;
    align-items: center;
}
.cml-language-switcher.cml-style-flags li a { padding: 2px 4px; }

/* ---------- small viewports ---------- */

@media (max-width: 600px) {
    .cml-floating-switcher {
        font-size: 12px;
        padding: 4px 8px;
    }
}