/* ==========================================================================
   i18n — language switcher + direction fixes.

   This file is served AS-IS to every locale (it is never run through
   CssDirectionFlipper), so it must be written with logical properties only.
   Anything direction-specific is scoped with [dir="ltr"] / [dir="rtl"].
   ========================================================================== */

/* --- Language switcher ----------------------------------------------------

   Self-contained: no Bootstrap dropdown classes, because Bootstrap's JS is not
   present on every page that renders this. Positioning uses logical properties
   so it needs no direction-specific rules.
   -------------------------------------------------------------------------- */

.lang-switcher {
    position: relative;
}

/* The switcher is a <button> while every other navbar item is an <a>. `color: inherit` here
   made it inherit from the <ul> instead of picking up the .nav-link colour its siblings get,
   which is why the icon was a different shade from the bell and the QR glyph. Let .nav-link
   own the colour; only reset what a button needs resetting. */
.lang-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

/* The button is now the icon-language-change-2 glyph rather than an "AR" / "EN" badge.
   .lang-switcher-code is kept for any markup that still uses it. */
.lang-switcher-btn .icon {
    font-size: 1.15rem;
    line-height: 1;
}

.lang-switcher-code {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 3px 5px;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: 0.75;
}

.lang-switcher-menu {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;          /* hangs from the outer edge in both directions */
    z-index: 1100;                /* above .navbar-fixed (z-index: 900) */
    min-width: 220px;
    margin-block-start: 6px;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

[dir="rtl"] .lang-switcher-menu {
    left: -110px;
}

[dir="ltr"] .lang-switcher-menu {
    left: -50px;
}

.lang-switcher-menu[hidden] {
    display: none;
}

.lang-switcher-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    /* Breathing room so adjacent items' hover/active backgrounds don't touch. */
    margin: 3px 6px;
    border-radius: 6px;
}

.lang-switcher-item:hover,
.lang-switcher-item:focus {
    background-color: rgba(0, 0, 0, 0.04);
    color: #212529;
}

.lang-switcher-flag {
    font-size: 1.05rem;
    line-height: 1;
}

.lang-switcher-name {
    flex: 1 1 auto;
}

.lang-switcher-check {
    font-size: 0.75rem;
    opacity: 0.6;
}

.lang-switcher-item.is-active {
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.05);
}

/* "Manage languages" entry — separated from the locale list */
.lang-switcher-manage {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    padding-top: 4px;
}

/* --- Notification badge ---------------------------------------------------

   The badge is absolutely positioned against its nav-item and deliberately sits
   outside the icon's box, so it overlaps the neighbouring nav-item. Its sibling
   was painting over it; a stacking order fixes that without moving the badge.
   -------------------------------------------------------------------------- */

.notification-badge {
    z-index: 3;
}

/* The bell dropdown hangs off a nav-item near the screen edge; the base offset
   in user_dashboard_style.css clipped it on RTL. Direction-scoped here (this
   file is never flipped) so each direction gets the offset that keeps the
   320px panel fully on screen, desktop and mobile alike. */
[dir="rtl"] .notification-dropdown {
    right: -165px !important;
    left: auto !important;
}

[dir="ltr"] .notification-dropdown {
    left: -165px !important;
    right: auto !important;
}

/* --- Direction fixes the stylesheet flipper cannot make -------------------

   The flipper mirrors CSS. It cannot know that `fa-chevron-left` is a *semantic*
   "forward" arrow in an RTL layout — in LTR that same arrow has to point right.
   Mirroring the glyph is more robust than renaming icon classes across the
   codebase, and it self-corrects for any directional icon added later.
   -------------------------------------------------------------------------- */

[dir="ltr"] .fa-chevron-left,
[dir="ltr"] .fa-chevron-right,
[dir="ltr"] .fa-angle-left,
[dir="ltr"] .fa-angle-right,
[dir="ltr"] .fa-arrow-left,
[dir="ltr"] .fa-arrow-right,
[dir="ltr"] .fa-long-arrow-alt-left,
[dir="ltr"] .fa-long-arrow-alt-right,
[dir="ltr"] .fa-caret-left,
[dir="ltr"] .fa-caret-right {
    transform: scaleX(-1);
}

/* --- Fonts ---------------------------------------------------------------

   --app-font is published by header.tpl from the locale registry, so the stack
   is chosen in one place (config/locales.php) rather than hard-coded here.

   Cairo is the last font in EVERY locale's stack, not just Arabic's: pages are
   full of untranslated Arabic long before a language is finished, and Arabic
   glyphs in a Latin face fall back to whatever the OS has — which is what made
   English pages look like they had lost Cairo.

   The fallback in var() covers pages that never include header.tpl.
   -------------------------------------------------------------------------- */

body,
.navbar,
.btn,
input,
textarea,
select {
    font-family: var(--app-font, 'Cairo', 'Segoe UI', system-ui, sans-serif);
}

/* Fixed dashboard navbar.

   user_dashboard_style.css is mirrored for LTR locales, but the navbar is a
   viewport-fixed shared component that must account for the sidebar explicitly.
   If it remains full-width, the sidebar can cover the icon strip and the bar
   looks like it is still using the opposite direction. */
[dir="ltr"] .navbar-fixed {
    left: 290px !important;
    right: 0 !important;
    width: auto !important;
    direction: ltr;
}

[dir="rtl"] .navbar-fixed {
    right: 290px !important;
    left: 0 !important;
    width: auto !important;
    direction: rtl;
}

.navbar-fixed .container-fluid {
    display: flex;
    justify-content: flex-end !important;
}

.navbar-fixed .navbar-nav {
    direction: inherit;
    flex-direction: row !important;
}

@media (max-width: 768px) {
    [dir="ltr"] .navbar-fixed,
    [dir="rtl"] .navbar-fixed {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}
/* Sidebar scrollbar on the OUTER edge in English.
   In Arabic the sidebar sits on the right of the screen and its scrollbar lands
   on the left — the outer edge, away from the content. The mirrored LTR sheet
   moves the sidebar to the left but the scrollbar stays on the element's right,
   which is now the INNER edge, running down the seam between menu and content.
   Flipping `direction` on the scroll box moves the bar to the far side; the
   children put their own direction back, so nothing about the text or the
   layout inside changes.

   Lives here on purpose: i18n.css is served raw (header.tpl), while side-menu.css
   goes through css_url() and is auto-mirrored — a `direction` rule written there
   would be flipped back and would also disturb the Arabic side. */
[dir="ltr"] .sidebar        { direction: rtl; }
[dir="ltr"] .sidebar > *    { direction: ltr; }

/* ...and state the menu rows explicitly.
   The restore above stops at the sidebar's DIRECT children. Everything below
   inherits `direction` from there correctly, but nothing states TEXT-ALIGN, so
   a row only reveals its alignment once the label is long enough to wrap — and
   the English labels are the long ones ("Subscription and renewal", "Account
   verification"), which is why the menu read as mis-mirrored in English while
   the shorter Arabic labels looked fine. Stating it on the row itself makes a
   wrapped second line start where the first one did, in both directions. */
[dir="ltr"] .sidebar-content a,
[dir="ltr"] .sidebar .submenu a { direction: ltr; text-align: left; }

[dir="rtl"] .sidebar-content a,
[dir="rtl"] .sidebar .submenu a { direction: rtl; text-align: right; }

/* Arabic numerals and currency stay LTR even inside RTL text. */
.ltr-nums,
[dir="rtl"] .price,
[dir="rtl"] .amount {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Stored phone numbers ("+96650...") rendered by includes/phone_display.php:
   digits keep LTR order inside RTL text (no "+" jumping to the far side), the
   country flag sits beside the number, and the whole unit aligns wherever the
   surrounding text does. */
.phone-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

/* Money amounts rendered by quickPayment.js: LTR-isolated so the currency
   symbol/icon keeps its position in RTL text; the Saudi riyal glyph sits on
   the LEFT of the amount in both directions. */
.qp-money {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}
.qp-money .icon-Saudi_Riyal_Symbol {
    font-size: 0.9em;
    line-height: 1;
}

/* --- intl-tel-input country search box ------------------------------------

   The magnifier sits on the side OPPOSITE the text, so it can never overlap
   the placeholder; the clear-X tucks in just inside the magnifier. Lives here
   (not form.css) because these left/right values are per-direction on purpose
   and must not go through the stylesheet flipper. !important because the
   library positions the icons with its own rules and CSS nesting.
   -------------------------------------------------------------------------- */

[dir="ltr"] .iti .iti__search-icon {
    left: auto !important;
    right: 10px !important;
}
[dir="ltr"] .iti .iti__search-input {
    padding-left: 12px !important;
    padding-right: 64px !important; /* clear-X + magnifier */
}
[dir="ltr"] .iti .iti__search-clear {
    left: auto !important;
    right: 36px !important;
}

[dir="rtl"] .iti .iti__search-icon {
    right: auto !important;
    left: 10px !important;
}
[dir="rtl"] .iti .iti__search-input {
    padding-right: 12px !important;
    padding-left: 64px !important; /* clear-X + magnifier */
}
[dir="rtl"] .iti .iti__search-clear {
    right: auto !important;
    left: 36px !important;
}

/* --------------------------------------------------------------------------
   Language tabs — the dashboard editors.

   Every translatable input is rendered once per language as a .lang-pane; the
   tab bar shows one language at a time. Hidden panes are hidden, NOT disabled:
   they still submit, so one Save writes every language.

   Emitted by lang_tabs() / lang_inputs() in app/Helpers/i18n.php. Lives here
   rather than in a page's <style> so every editor gets it for free, and here
   rather than in a css_url() sheet because it is already direction-agnostic
   (margin-inline-*), so it must not be mirrored for LTR.
   -------------------------------------------------------------------------- */

.lang-pane {
    display: none;
}

.lang-pane.is-active {
    display: block;
}

/* The tab bar sits directly under whatever control precedes it (the editor
   button row, etc.) and had no gap at all. Applies to both the PHP-rendered
   tabs (lang_tabs()) and the JS ones (LangTabs.mount) — same class. */
.lang-tabs {
    margin-top: 18px;
}

.lang-tabs .nav-link {
    border-radius: 6px 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lang-tabs .nav-link.is-source {
    font-weight: 600;
}

.loc-flag {
    border-radius: 2px;
    object-fit: cover;
    vertical-align: -2px;
}

/* Progress dot: how much of a language is filled in, without opening its tab.
   Hollow = nothing, amber = partial, green = every input has a value. */
.lang-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #adb5bd;
    margin-inline-start: 6px;
    vertical-align: middle;
}

.lang-dot.is-partial {
    background: #ffc107;
    border-color: #ffc107;
}

.lang-dot.is-complete {
    background: #198754;
    border-color: #198754;
}

/* ============================================================
   Translated profile avatar — the pen badge.

   The source avatar's pen is #edit-icon (an id, so it can style exactly one element).
   LangTabs.image() renders a class-based twin on each translated avatar so the
   secondary-language picture looks and behaves identically to the primary one.
   Keep these two rules in sync with #edit-icon in user_dashboard_style.css.
   ============================================================ */
.tr-edit-icon {
    position: absolute;
    top: 5px;
    right: 6px;
    color: #333;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    padding: 4px;
    font-size: 12px;
    line-height: 1;
    backdrop-filter: blur(5px);
}