/*
 * MultiLang Pro — Language Switcher CSS
 * Size classes: mlp-switcher--xs / sm / md / lg / xl
 * Controlled by Settings → Switcher → Size
 */

/* ══════════════════════════════════════════════
   BASE — shared across all styles & sizes
══════════════════════════════════════════════ */
.mlp-switcher {
    position: relative;
    display: inline-block;
    font-family: inherit;
    line-height: 1.4;
}

/* ── Size tokens via CSS custom properties ── */
.mlp-switcher--xs { --sw-fs: 10px; --sw-flag: 14px; --sw-pad-y: 3px;  --sw-pad-x: 7px;  --sw-gap: 4px;  --sw-radius: 4px;  --sw-min: 80px;  }
.mlp-switcher--sm { --sw-fs: 12px; --sw-flag: 16px; --sw-pad-y: 4px;  --sw-pad-x: 9px;  --sw-gap: 5px;  --sw-radius: 5px;  --sw-min: 100px; }
.mlp-switcher--md { --sw-fs: 14px; --sw-flag: 18px; --sw-pad-y: 7px;  --sw-pad-x: 12px; --sw-gap: 6px;  --sw-radius: 6px;  --sw-min: 120px; }
.mlp-switcher--lg { --sw-fs: 16px; --sw-flag: 22px; --sw-pad-y: 9px;  --sw-pad-x: 15px; --sw-gap: 8px;  --sw-radius: 8px;  --sw-min: 140px; }
.mlp-switcher--xl { --sw-fs: 20px; --sw-flag: 28px; --sw-pad-y: 12px; --sw-pad-x: 20px; --sw-gap: 10px; --sw-radius: 10px; --sw-min: 170px; }

/* Default size fallback (md) */
.mlp-switcher {
    --sw-fs: 14px; --sw-flag: 18px; --sw-pad-y: 7px;
    --sw-pad-x: 12px; --sw-gap: 6px; --sw-radius: 6px; --sw-min: 120px;
}

/* ══════════════════════════════════════════════
   LIST / INLINE STYLE
══════════════════════════════════════════════ */
.mlp-switcher__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    gap: var(--sw-gap, 6px);
    align-items: center;
}
.mlp-switcher__item { margin: 0; }
.mlp-switcher__item a {
    display: inline-flex;
    align-items: center;
    gap: var(--sw-gap, 6px);
    padding: var(--sw-pad-y, 7px) var(--sw-pad-x, 12px);
    text-decoration: none;
    color: inherit;
    border-radius: var(--sw-radius, 6px);
    transition: background 0.2s;
    font-size: var(--sw-fs, 14px);
}
.mlp-switcher__item a:hover   { background: rgba(0,0,0,.08); }
.mlp-switcher__item--active a { font-weight: 600; }
.mlp-switcher__flag { font-size: var(--sw-flag, 18px); line-height: 1; }
.mlp-switcher__name { font-size: var(--sw-fs, 14px); }

/* ══════════════════════════════════════════════
   DROPDOWN STYLE
══════════════════════════════════════════════ */
.mlp-switcher--dropdown .mlp-switcher__current {
    display: flex;
    align-items: center;
    gap: var(--sw-gap, 6px);
    padding: var(--sw-pad-y, 7px) var(--sw-pad-x, 12px);
    border: 1px solid rgba(0,0,0,.18);
    border-radius: var(--sw-radius, 6px);
    cursor: pointer;
    background: #fff;
    font-size: var(--sw-fs, 14px);
    user-select: none;
    min-width: var(--sw-min, 120px);
    white-space: nowrap;
}
.mlp-switcher__arrow {
    margin-left: auto;
    padding-left: 6px;
    font-size: calc(var(--sw-fs, 14px) - 4px);
    transition: transform 0.2s;
    color: #94a3b8;
}
.mlp-switcher--dropdown.open .mlp-switcher__arrow { transform: rotate(180deg); }

.mlp-switcher--dropdown .mlp-switcher__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: var(--sw-radius, 6px);
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    list-style: none;
    margin: 0; padding: 5px;
    z-index: 9999;
    display: none;
}
.mlp-switcher--dropdown.open .mlp-switcher__dropdown { display: block; }

.mlp-switcher--dropdown .mlp-switcher__item a {
    display: flex;
    align-items: center;
    gap: var(--sw-gap, 6px);
    padding: calc(var(--sw-pad-y, 7px) - 1px) var(--sw-pad-x, 12px);
    border-radius: calc(var(--sw-radius, 6px) - 2px);
    color: #334155;
    font-size: var(--sw-fs, 14px);
}
.mlp-switcher--dropdown .mlp-switcher__item a:hover     { background: #f0f6ff; color: #2563eb; }
.mlp-switcher--dropdown .mlp-switcher__item--active a   { font-weight: 600; color: #2563eb; background: #eff6ff; }

/* ══════════════════════════════════════════════
   FLOATING SWITCHER
══════════════════════════════════════════════ */
.mlp-floating-switcher {
    position: fixed;
    z-index: 99999;
}
.mlp-floating-switcher--bottom_right { bottom: 24px; right: 24px; }
.mlp-floating-switcher--bottom_left  { bottom: 24px; left:  24px; }
.mlp-floating-switcher--top_right    { top:    24px; right: 24px; }
.mlp-floating-switcher--top_left     { top:    24px; left:  24px; }

/* Floating button pill style */
.mlp-floating-switcher .mlp-switcher--dropdown .mlp-switcher__current {
    border-radius: 50px;
    box-shadow: 0 2px 14px rgba(0,0,0,.2);
    border: none;
    background: #fff;
}

/* Dropdown opens upward for bottom positions */
.mlp-floating-switcher--bottom_right .mlp-switcher__dropdown,
.mlp-floating-switcher--bottom_left  .mlp-switcher__dropdown {
    bottom: calc(100% + 6px);
    top: auto !important;
}
.mlp-floating-switcher--top_right .mlp-switcher__dropdown,
.mlp-floating-switcher--top_left  .mlp-switcher__dropdown {
    bottom: auto;
    top: calc(100% + 6px);
}

/* ══════════════════════════════════════════════
   SIZE QUICK-REFERENCE (tooltip preview)
   xs: 10px  |  sm: 12px  |  md: 14px  |  lg: 16px  |  xl: 20px
══════════════════════════════════════════════ */

/* ── RTL ── */
[dir="rtl"] .mlp-switcher__dropdown   { left: auto; right: 0; }
[dir="rtl"] .mlp-switcher__arrow      { margin-left: 0; margin-right: auto; padding-left: 0; padding-right: 6px; }