/* =========================================================
   Livo Language Switcher — CSS
   الألوان تُضبط عبر متغيرات CSS من صفحة الإعدادات
   ========================================================= */

.lls-item {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    list-style: none !important;
    position: relative;
    float: none !important;
}
.lls-item::before,
.lls-menu li::before { content: none !important; }

.lls-switcher {
    --lls-accent: #1f2937;
    --lls-accent-rgb: 31, 41, 55;
    --lls-accent-text: #ffffff;
    --lls-text: #1f2937;
    --lls-track: rgba(31, 41, 55, 0.07);
    --lls-border: rgba(31, 41, 55, 0.14);
    font-size: 14px;
    line-height: 1;
}

/* وضع الخلفية الداكنة */
.lls-switcher.lls-on-dark,
.lls-preview-dark .lls-switcher {
    --lls-text: #ffffff;
    --lls-track: rgba(255, 255, 255, 0.12);
    --lls-border: rgba(255, 255, 255, 0.22);
}
.lls-preview-light .lls-switcher {
    --lls-text: #1f2937;
    --lls-track: rgba(31, 41, 55, 0.07);
    --lls-border: rgba(31, 41, 55, 0.14);
}

/* إزالة تأثيرات القوالب */
.lls-switcher a,
.lls-switcher button {
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    font-family: inherit !important;
}
.lls-switcher a:focus-visible,
.lls-switcher button:focus-visible {
    outline: 2px solid var(--lls-accent) !important;
    outline-offset: 2px;
}

.lls-ic { display: inline-block; flex-shrink: 0; }
.lls-code { font-weight: 800; letter-spacing: .4px; }

.lls-flag {
    width: 18px !important;
    height: 13px !important;
    border-radius: 2.5px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    display: inline-block;
    flex-shrink: 0;
}

/* ---------------- الشكل 1: قائمة منسدلة ---------------- */
.lls-dropdown { position: relative; }

.lls-dropdown .lls-current {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px !important;
    border-radius: 999px;
    border: 1px solid var(--lls-border) !important;
    background: var(--lls-track) !important;
    color: var(--lls-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.lls-dropdown .lls-current:hover {
    background: rgba(var(--lls-accent-rgb), .13) !important;
    border-color: rgba(var(--lls-accent-rgb), .4) !important;
    color: var(--lls-text) !important;
}
.lls-dropdown .lls-current:active { transform: scale(.97); }

.lls-current .lls-chev { transition: transform .2s ease; opacity: .75; }
.lls-switcher.is-open .lls-chev { transform: rotate(180deg); }

.lls-menu {
    position: absolute;
    top: calc(100% + 9px);
    inset-inline-end: 0;
    min-width: 175px;
    margin: 0 !important;
    padding: 6px !important;
    list-style: none !important;
    background: #ffffff;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(16, 24, 40, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 99999;
    text-align: start;
}
.lls-switcher.is-open .lls-menu,
.lls-dropdown:focus-within .lls-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease;
}
.lls-menu li { margin: 0 !important; list-style: none !important; }
.lls-menu .lls-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px !important;
    border-radius: 9px;
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    transition: background-color .15s ease, color .15s ease;
}
.lls-menu .lls-link:hover,
.lls-menu .lls-link:focus {
    background: rgba(var(--lls-accent-rgb), .09) !important;
    color: var(--lls-accent) !important;
}
.lls-menu .lls-link.is-active {
    background: rgba(var(--lls-accent-rgb), .07) !important;
    color: var(--lls-accent) !important;
}
.lls-menu .lls-native { flex: 1 1 auto; white-space: nowrap; }
.lls-menu .lls-check { opacity: 0; flex-shrink: 0; }
.lls-menu .lls-link.is-active .lls-check { opacity: 1; }

/* ---------------- الشكل 2: زر تبديل منزلق ---------------- */
.lls-toggle {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    padding: 4px !important;
    border-radius: 999px;
    background: var(--lls-track) !important;
    border: 1px solid var(--lls-border) !important;
    isolation: isolate;
}
.lls-toggle .lls-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 42px;
    border-radius: 999px;
    background: var(--lls-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    transition: left .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
    z-index: -1;
}
.lls-toggle .lls-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px !important;
    min-width: 42px;
    border-radius: 999px;
    color: var(--lls-text) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    transition: color .25s ease;
}
.lls-toggle .lls-opt:hover,
.lls-toggle .lls-opt:focus { color: var(--lls-accent) !important; }
.lls-toggle .lls-opt.is-active,
.lls-toggle .lls-opt.is-active:hover,
.lls-toggle .lls-opt.is-active:focus { color: var(--lls-accent-text) !important; }

/* ---------------- الجوال ---------------- */
@media (max-width: 782px) {
    .lls-dropdown .lls-current { padding: 7px 12px !important; font-size: 13px !important; gap: 5px; }
    .lls-menu { min-width: 150px; }
    .lls-menu .lls-link { padding: 9px 11px !important; font-size: 13.5px !important; }
    .lls-toggle .lls-opt { padding: 7px 11px !important; font-size: 12.5px !important; min-width: 36px; }
}


/* =========================================================
   Livo / WoodMart integration
   Matches the site's white glass header and cyan-blue-purple accent.
   ========================================================= */
.lls-menu-item,
.lls-shortcode-item {
    --lls-livo-cyan: #42dfff;
    --lls-livo-blue: #5b7cff;
    --lls-livo-purple: #8c65ff;
    --lls-livo-ink: #15202c;
}

.lls-menu-item {
    align-self: center !important;
    margin-inline: 6px !important;
}

.lls-menu-item .lls-switcher,
.lls-shortcode-item .lls-switcher {
    color: var(--lls-livo-ink);
    font-family: inherit;
}

/* Compact inline language control for the desktop header. */
.lls-menu-item .lls-toggle {
    gap: 2px;
    padding: 3px !important;
    background: rgba(247, 249, 251, .92) !important;
    border: 1px solid rgba(17, 24, 39, .09) !important;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
}

.lls-menu-item .lls-toggle .lls-thumb {
    display: none;
}

.lls-menu-item .lls-toggle .lls-opt {
    min-width: 0;
    padding: 7px 10px !important;
    color: #536170 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .35px;
    border-radius: 999px;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.lls-menu-item .lls-toggle .lls-opt:hover,
.lls-menu-item .lls-toggle .lls-opt:focus {
    color: var(--lls-livo-blue) !important;
    transform: none;
}

.lls-menu-item .lls-toggle .lls-opt.is-active,
.lls-menu-item .lls-toggle .lls-opt.is-active:hover,
.lls-menu-item .lls-toggle .lls-opt.is-active:focus {
    color: #fff !important;
    background: linear-gradient(135deg, var(--lls-livo-cyan) 0%, var(--lls-livo-blue) 52%, var(--lls-livo-purple) 100%) !important;
    box-shadow: 0 4px 12px rgba(91, 124, 255, .28);
}

/* Remove the heavy dark treatment when the switcher sits in a light header. */
.lls-menu-item .lls-switcher.lls-on-dark {
    --lls-text: var(--lls-livo-ink);
    --lls-track: rgba(247, 249, 251, .92);
    --lls-border: rgba(17, 24, 39, .09);
}

/* Dropdown variant: same visual language, with a cleaner menu. */
.lls-menu-item .lls-dropdown .lls-current {
    padding: 8px 12px !important;
    color: var(--lls-livo-ink) !important;
    background: rgba(247, 249, 251, .92) !important;
    border: 1px solid rgba(17, 24, 39, .09) !important;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
    font-size: 12px !important;
}

.lls-menu-item .lls-dropdown .lls-current:hover,
.lls-menu-item .lls-dropdown .lls-current:focus {
    border-color: rgba(91, 124, 255, .35) !important;
    box-shadow: 0 0 18px rgba(65, 217, 255, .14);
}

.lls-menu-item .lls-dropdown .lls-menu {
    top: calc(100% + 10px);
    min-width: 145px;
    padding: 5px !important;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(16, 24, 40, .13);
}

.lls-menu-item .lls-dropdown .lls-menu .lls-link {
    padding: 9px 10px !important;
    color: var(--lls-livo-ink) !important;
    border-radius: 8px;
    font-size: 13px !important;
}

.lls-menu-item .lls-dropdown .lls-menu .lls-link:hover,
.lls-menu-item .lls-dropdown .lls-menu .lls-link:focus,
.lls-menu-item .lls-dropdown .lls-menu .lls-link.is-active {
    color: var(--lls-livo-blue) !important;
    background: linear-gradient(90deg, rgba(66, 223, 255, .10), rgba(140, 101, 255, .09)) !important;
}

@media (max-width: 1024px) {
    .lls-menu-item { margin-inline: 3px !important; }
    .lls-menu-item .lls-toggle .lls-opt { padding: 6px 8px !important; }
}

@media (max-width: 767px) {
    .lls-menu-item { margin: 8px 0 !important; }
    .lls-menu-item .lls-toggle .lls-opt { padding: 8px 12px !important; font-size: 12px !important; }
}


/* Localized labels: WPML supplies the name in the current page language. */
.lls-switcher .lls-name {
    white-space: nowrap;
    direction: inherit;
}

.lls-menu-item .lls-toggle .lls-name {
    letter-spacing: 0;
}