/* =========================================================================
   WT AR/EN Translator — language switcher
   The switcher is always LTR so it never flips position when the page is
   viewed in Arabic. Design: compact pill, soft shadow, monospace language
   codes for easy scanning, flag image as the visual anchor.
   ========================================================================= */

.wtae-switcher {
    /* Colors are exposed as CSS custom properties so the admin can override
       them from Settings → AR/EN Translator without editing CSS. Inline styles
       emitted by the plugin set these on the .wtae-switcher element; otherwise
       the fallbacks below are used. */
    --wtae-bg: rgba(255, 255, 255, 0.96);
    --wtae-text: #4b4b4b;
    --wtae-active-bg: #111;
    --wtae-active-fg: #fff;
    --wtae-hover-bg: #f3f4f6;

    display: inline-flex;
    align-items: stretch;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
    background: var(--wtae-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.04);
    backdrop-filter: saturate(1.15) blur(6px);
    -webkit-backdrop-filter: saturate(1.15) blur(6px);
}

.wtae-switcher .wtae-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--wtae-text);
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
    cursor: pointer;
}

.wtae-switcher .wtae-lang:hover,
.wtae-switcher .wtae-lang:focus-visible {
    background: var(--wtae-hover-bg);
    color: var(--wtae-active-bg);
    outline: none;
}

.wtae-switcher .wtae-lang.is-active {
    background: var(--wtae-active-bg);
    color: var(--wtae-active-fg);
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.wtae-switcher .wtae-lang img {
    display: block;
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    flex: none;
}

.wtae-switcher .wtae-code {
    font-size: 12px;
    font-weight: 700;
}

.wtae-switcher .wtae-divider {
    width: 1px;
    margin: 4px 2px;
    background: rgba(0, 0, 0, 0.08);
    align-self: stretch;
}

/* Floating placement — always bottom-right, regardless of page direction. */
.wtae-switcher.wtae-floating {
    position: fixed;
    /* top/right/bottom/left are set inline per the admin's chosen corner + offset
       (Settings → AR/EN Translator → Switcher appearance). Default: bottom-right, 24px. */
    z-index: 2147483000; /* above most themes' sticky bars, below WP admin bar toasts */
    transform: translateZ(0);
}

.wtae-switcher.wtae-floating:hover {
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Entrance animation */
@keyframes wtae-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wtae-switcher.wtae-floating {
    animation: wtae-fade-in 260ms ease-out both;
}

/* Buttons style: larger, squared-off pills, used when [wtae_switcher style="buttons"]. */
.wtae-switcher.wtae-style-buttons {
    padding: 6px;
    border-radius: 14px;
}

.wtae-switcher.wtae-style-buttons .wtae-lang {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 10px;
}

/* =========================================================================
   Switcher skins (admin-selectable: Settings → Switcher appearance → Style)
   "pill" is the default look above. These two are alternatives.
   ========================================================================= */

/* Minimal: text-only "EN | AR", no flags, no background — unobtrusive. */
.wtae-switcher.wtae-skin-minimal {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 2px;
    gap: 2px;
}
.wtae-switcher.wtae-skin-minimal .wtae-lang img {
    display: none; /* hide flags */
}
.wtae-switcher.wtae-skin-minimal .wtae-lang {
    padding: 4px 8px;
}
.wtae-switcher.wtae-skin-minimal .wtae-lang.is-active {
    background: transparent;
    color: var(--wtae-active-bg);
    text-decoration: underline;
    text-underline-offset: 4px;
    box-shadow: none;
}
.wtae-switcher.wtae-skin-minimal .wtae-divider {
    background: rgba(0, 0, 0, 0.18);
    margin: 5px 1px;
}

/* Boxed: solid rectangular toggle with stronger contrast — reads well over
   busy hero images. Squared corners, larger tap targets. */
.wtae-switcher.wtae-skin-boxed {
    border-radius: 10px;
    padding: 3px;
    background: var(--wtae-active-bg);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 26px -10px rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.wtae-switcher.wtae-skin-boxed .wtae-lang {
    border-radius: 7px;
    padding: 8px 14px;
    color: var(--wtae-active-fg);
}
.wtae-switcher.wtae-skin-boxed .wtae-lang:hover,
.wtae-switcher.wtae-skin-boxed .wtae-lang:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: var(--wtae-active-fg);
}
.wtae-switcher.wtae-skin-boxed .wtae-lang.is-active {
    background: var(--wtae-bg);
    color: var(--wtae-text);
}
.wtae-switcher.wtae-skin-boxed .wtae-divider {
    background: rgba(255, 255, 255, 0.18);
}

/* =========================================================================
   Text-only RTL (rtl_mode = "text"): keep the page layout exactly as designed
   but make Arabic text read right-to-left. We only set `direction` on common
   text-bearing blocks, never on layout containers, so flex/grid/positioned
   sections (page-builder heroes, etc.) don't move.
   ========================================================================= */
html.wtae-rtl-text :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, dd, dt, caption) {
    direction: rtl;
}
/* Keep the admin bar (admins only) and our own switcher LTR. */
html.wtae-rtl-text #wpadminbar,
html.wtae-rtl-text #wpadminbar *,
html.wtae-rtl-text .wtae-switcher,
html.wtae-rtl-text .wtae-switcher * {
    direction: ltr;
}

/* The WordPress admin bar (shown to logged-in admins on the front end) is admin
   chrome, never page content — keep it left-to-right even in Full RTL. */
html[dir="rtl"] #wpadminbar,
html[dir="rtl"] #wpadminbar * {
    direction: ltr;
}

/* =========================================================================
   Per-section direction overrides. Add one of these classes to ANY section
   wrapper (e.g. the outer div of an Elementor HTML widget) to control its
   direction independently of the global RTL mode. They win over the global
   text-RTL rule above (higher specificity), and only apply in Arabic.
     .wtae-ltr → keep this whole section left-to-right (exclude it from RTL)
     .wtae-rtl → force this whole section's text right-to-left
   ========================================================================= */
html[lang="ar"] .wtae-ltr,
html[lang="ar"] .wtae-ltr * {
    direction: ltr;
}
html[lang="ar"] .wtae-rtl,
html[lang="ar"] .wtae-rtl * {
    direction: rtl;
}

/* .wtae-no-flip → the "don't mirror this section" hook for Full RTL. The
   section keeps its original (English) layout so it doesn't flip, but the
   Arabic TEXT inside still reads right-to-left. (frontend.js also drops the
   dir attribute to ltr on the wrapper in Full mode, so the theme's [dir=rtl]
   rules stop mirroring it.) */
html[lang="ar"] .wtae-no-flip {
    direction: ltr;
}
html[lang="ar"] .wtae-no-flip :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, dd, dt, caption) {
    direction: rtl;
}

/* Dark-mode friendliness: update the color variables instead of hard-coding
   properties, so admin-picked colors (which also flow through these variables)
   remain the source of truth and aren't clobbered here. */
@media (prefers-color-scheme: dark) {
    .wtae-switcher {
        --wtae-bg: rgba(22, 22, 24, 0.9);
        --wtae-text: #d0d0d0;
        --wtae-active-bg: #fff;
        --wtae-active-fg: #111;
        --wtae-hover-bg: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
    }
    .wtae-switcher .wtae-divider {
        background: rgba(255, 255, 255, 0.12);
    }
}

/* Responsive: shrink on small screens so it doesn't crowd mobile UIs. */
@media (max-width: 480px) {
    .wtae-switcher.wtae-floating {
        font-size: 12px; /* offsets come from the inline admin setting */
    }
    .wtae-switcher .wtae-lang {
        padding: 5px 10px;
    }
    .wtae-switcher .wtae-lang img {
        width: 18px;
        height: 13px;
    }
}