/* =========================================================================
   i18n.css — bilingual (EN/AR) + RTL scaffolding
   Loaded globally (last) from App.razor so its rules can layer over the
   page stylesheets. Three concerns live here:
     1) The EN/AR language switcher component styles (direction-agnostic)
     2) The Arabic web font, applied only when the document is RTL/Arabic
     3) A reusable [dir="rtl"] override layer that mirrors layout/text
   Add new RTL fixes to the layer below — do NOT scatter dir hacks per page.
   ========================================================================= */

/* ── 1. Language switcher (EN | ع) ───────────────────────────────────────── */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: 3px;
    font-family: 'General Sans', system-ui, sans-serif;
    line-height: 1;
    user-select: none;
}

.lang-switch .lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    opacity: .7;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, opacity .15s, color .15s;
}

.lang-switch .lang-opt:hover {
    opacity: 1;
}

.lang-switch .lang-opt.active {
    background: #fff;
    color: #0e3d8c;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

/* The Arabic glyph reads better a touch larger */
.lang-switch .lang-opt[lang="ar"] {
    font-size: 15px;
}

/* Light variant for use on light/white surfaces (e.g. the login card) */
.lang-switch.lang-switch-light {
    background: #eef4fc;
    border-color: #d4e3f7;
}

.lang-switch.lang-switch-light .lang-opt {
    color: #4a6fa5;
}

.lang-switch.lang-switch-light .lang-opt.active {
    background: linear-gradient(135deg, #0e3d8c, #1a6fc4);
    color: #fff;
}

/* ── 2. Arabic font ─────────────────────────────────────────────────────────
   English keeps Clash Display / General Sans (set by the page styles). When the
   document is Arabic we switch body copy, inputs and buttons to Cairo, which has
   proper Arabic shaping plus clean Latin digits for numbers/headings. */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* ── 3. RTL override layer ───────────────────────────────────────────────────
   Reusable mirroring. Prefer adding rules here (or switching page CSS to logical
   properties: margin-inline / padding-inline / inset-inline) over per-page hacks. */

/* Generic text flow */
[dir="rtl"] body {
    text-align: right;
}

/* Admin shell: move the sidebar to the right and flip its borders/shadows.
   On DESKTOP the sidebar is always visible (no transform) — it just docks right
   and the main content is pushed by an inline-end margin. The off-canvas slide is
   mobile-only (see the media query below); putting translateX here would shove the
   desktop sidebar off-screen since it never carries the .open class outside mobile. */
[dir="rtl"] .admin-shell .sb {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

[dir="rtl"] .admin-shell .main {
    margin-left: 0;
    margin-right: var(--sidebar-w, 252px);
}

/* Off-canvas sidebar (mobile only) slides in from the right in RTL — mirrors the
   LTR rule in admin.css which is scoped to the same breakpoint. */
@media (max-width: 768px) {
    [dir="rtl"] .admin-shell .sb:not(.open) {
        transform: translateX(100%);
    }
    [dir="rtl"] .admin-shell .main {
        margin-right: 0;
    }
}

/* NOTE: do NOT add flex-direction:row-reverse to mirror horizontal flex rows.
   Under dir="rtl" a flex row already lays its items right-to-left natively — adding
   row-reverse DOUBLE-flips them back to LTR order. The topbar (.tb) and public navbar
   (.nav-right) mirror correctly on their own; only alignment/logical tweaks belong here. */

/* Nav items: label right-aligned (the icon mirrors to the right natively). */
[dir="rtl"] .sb-nav .sb-item {
    text-align: right;
}

/* Detail drawer: in RTL it docks to the LEFT edge and slides in from the left.
   Flip the dock side, the divider border and the drop-shadow direction. The drawer
   is a fixed OVERLAY, so we also force its inner flow to RTL + right-aligned text
   (defensive — this is what makes the drawer CONTENT read right-to-left instead of
   looking left-aligned). */
[dir="rtl"] .drawer {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1.5px solid var(--ink);
    box-shadow: 14px 0 44px rgba(13, 31, 45, .22);
    animation: dw-slide-rtl .25s ease;
    direction: rtl;
    text-align: right;
}
@keyframes dw-slide-rtl { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Drawer inner content mirroring: close button moves to the leading (left) corner.
   The label→value rows use justify-content:space-between, which pushes the (content-
   sized) VALUE to the inline-end — the far LEFT in RTL — so the data reads as
   "left-aligned". Making the value grow to fill the row + right-align its text pulls
   it back beside the label on the right. Flag rows and action groups flip to match. */
[dir="rtl"] .drawer-head,
[dir="rtl"] .drawer-body { text-align: right; }
[dir="rtl"] .drawer-close { right: auto; left: 14px; }
[dir="rtl"] .ov-v { flex: 1; text-align: right; }
[dir="rtl"] .ov-v-flag { justify-content: flex-start; }
/* Payment-detail rows (Payments tab) share the label + content-sized value pattern. */
[dir="rtl"] .pay-det-row > span:last-child { flex: 1; text-align: right; }
[dir="rtl"] .sess-acts,
[dir="rtl"] .lvl-acts { margin-left: 0; margin-right: auto; }

/* Toasts stack in the bottom-inline-start corner (left in RTL). */
[dir="rtl"] .toast-container {
    right: auto;
    left: 24px;
}

/* Login card proof page: center stays centered; form labels align right. */
[dir="rtl"] .login-body {
    text-align: right;
}

[dir="rtl"] .form-control {
    text-align: right;
}

/* ── Public pages (register / payment / portal) ──────────────────────────────
   The public header, stepper and phone row are horizontal flex rows and mirror
   their order NATIVELY under dir="rtl" (logo → right, step 1 → right, dial → right) —
   no row-reverse needed (that would double-flip them). This section only isolates
   price/amount spans to LTR so "12.000 KWD" keeps its digit+code order in RTL. */

/* Phone number itself reads left-to-right (digits + dial code). */
[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }
[dir="rtl"] .phone-prefix-dial { direction: ltr; }

/* Keep money amounts and single time chips in LTR so numbers/currency/AM-PM
   don't get bidi-reordered. isolate = they still flow to the correct side. */
[dir="rtl"] .pkg-now,
[dir="rtl"] .pkg-was,
[dir="rtl"] .slot-time,
[dir="rtl"] .clock-chip,
[dir="rtl"] .pay-amount-large,
[dir="rtl"] .cs-total-amt,
[dir="rtl"] .pkg-price-line { direction: ltr; unicode-bidi: isolate; }

/* ── Admin: mixed-direction value cells (Phase 5) ────────────────────────────
   ALWAYS-numeric/Latin values (prices, amounts, balances, codes, counters) are
   forced LTR so "40.000 KWD", "-5.000", a discount code, or "1 / 4" never get
   bidi-scrambled inside the RTL layout. */
[dir="rtl"] .pk-price,
[dir="rtl"] .pk-was,
[dir="rtl"] .pay-amount,
[dir="rtl"] .sum-price,
[dir="rtl"] .sub-pay-paid,
[dir="rtl"] .pay-row-amt,
[dir="rtl"] .hist-amt,
[dir="rtl"] .dc-hist-amt,
[dir="rtl"] .paybal-v,
[dir="rtl"] .sub-pay-code,
[dir="rtl"] .lightbox-counter { direction: ltr; unicode-bidi: isolate; }

/* Value cells that may hold EITHER Arabic text (branch, package, status) OR an
   LTR value (time, date, phone, email) → isolate only, so each element picks its
   own base direction from its content instead of inheriting the row's RTL. */
[dir="rtl"] .info-val,
[dir="rtl"] .ov-v,
[dir="rtl"] .sum-val,
[dir="rtl"] .review-val,
[dir="rtl"] .pay-row-val,
[dir="rtl"] .drawer-sub,
[dir="rtl"] .sess-date,
[dir="rtl"] .rc-age,
[dir="rtl"] .tb-date,
[dir="rtl"] .att-date-main,
[dir="rtl"] .cal-title,
[dir="rtl"] .info-lbl { unicode-bidi: isolate; }

/* Right-align field labels/notes on the public forms (base layer covers body). */
[dir="rtl"] .form-label,
[dir="rtl"] .step-sub,
[dir="rtl"] .review-lbl { text-align: right; }

/* Back / change arrows are hardcoded ← glyphs; in RTL a "back" action points
   the other way, so mirror the leading arrow on these nav controls. */
[dir="rtl"] .pub-back .dir-arrow,
[dir="rtl"] .dir-arrow { display: inline-block; transform: scaleX(-1); }