/* ============================================================================
   Phase 317 - language layer for Landing / User / Affiliate (loaded by Pages/Shared/_I18nHead.cshtml, never by
   the Owner panel). Contract: with English (html[lang="en"][dir="ltr"]) nothing in this file changes how an
   existing page looks; it only styles the new language switcher. Everything else is scoped to Persian/RTL.
     1. tokens + utilities (B/C/D rely on these, no other CSS file is needed)
     2. Persian typography (fa only)
     3. Classic RTL gaps (html:not([data-ui-theme]) = the Classic layouts)
     4. language switcher: shared geometry + the Classic look (themes restyle it in their *-i18n.css)
     5. navbar slot + brand logo
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS + UTILITIES
   ------------------------------------------------------------------------ */
:root {
    /* Persian stack: Latin letters and digits stay in Inter (AtVazir only covers Arabic-script code points). */
    --at-font-fa: 'Inter', 'AtVazir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Geeza Pro', sans-serif;
}

/* Inline LTR island (numbers, symbols, signed values inside a Persian sentence). */
.at-ltr { direction: ltr; unicode-bidi: isolate; }

/* Direction-bearing icons (arrows, chevrons, logout) mirror in RTL. */
[dir="rtl"] .at-flip-rtl { display: inline-block; transform: scaleX(-1); }

/* Owner-typed / DB text in an unknown direction (notifications, plan descriptions, reasons). */
.at-bidi-plain { unicode-bidi: plaintext; text-align: start; }

/* LTR content inside RTL forms (addresses, keys, emails, URLs, numbers). */
[dir="rtl"] .at-ltr-input,
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }

/* Tabular digits for numeric columns (Persian pages only, so English output is untouched). */
html[lang="fa"] .at-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   2. PERSIAN TYPOGRAPHY (fa only)
   Persian joining breaks under letter-spacing and there is no Persian italic. Latin wordmarks carry lang="en"
   and keep their tracking. !important is needed to beat the many theme rules; it is scoped to fa.
   ------------------------------------------------------------------------ */
html[lang="fa"] body *:not(:lang(en)) { letter-spacing: normal !important; font-style: normal !important; }

/* Classic: Persian font on the whole page (each themed layout switches its own font variables). */
html[lang="fa"]:not([data-ui-theme]) body { font-family: var(--at-font-fa); }

/* ---------------------------------------------------------------------------
   3. CLASSIC RTL GAPS (the themed layouts are RTL-aware already)
   ------------------------------------------------------------------------ */
html:not([data-ui-theme])[dir="rtl"] thead tr th { text-align: right; }

html:not([data-ui-theme])[dir="rtl"] tbody tr td:first-child:not(:last-child) {
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.02);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-md, 12px);
    border-bottom-right-radius: var(--radius-md, 12px);
}

html:not([data-ui-theme])[dir="rtl"] tbody tr td:last-child:not(:first-child) {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.02);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--radius-md, 12px);
    border-bottom-left-radius: var(--radius-md, 12px);
}

/* Toasts dock on the left in RTL: accent stripe on the inner (right) edge, slide in/out from the left. */
html:not([data-ui-theme])[dir="rtl"] .at-toast {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    border-right: 3px solid #6366f1;
    animation-name: at-toast-in-rtl;
}
html:not([data-ui-theme])[dir="rtl"] .at-toast.at-toast-info    { border-left-color: rgba(255, 255, 255, 0.09); border-right-color: #22d3ee; }
html:not([data-ui-theme])[dir="rtl"] .at-toast.at-toast-success { border-left-color: rgba(255, 255, 255, 0.09); border-right-color: #22c55e; }
html:not([data-ui-theme])[dir="rtl"] .at-toast.at-toast-error   { border-left-color: rgba(255, 255, 255, 0.09); border-right-color: #ef4444; }
html:not([data-ui-theme])[dir="rtl"] .at-toast.at-toast-warning { border-left-color: rgba(255, 255, 255, 0.09); border-right-color: #f59e0b; }
html:not([data-ui-theme])[dir="rtl"] .at-toast.at-toast-leaving { transform: translateX(-24px); }

@keyframes at-toast-in-rtl {
    from { opacity: 0; transform: translateX(-20px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---------------------------------------------------------------------------
   4. LANGUAGE SWITCHER (Pages/Shared/_LanguageSwitcher.cshtml)
   Geometry is shared; colours below are Classic. Each theme overrides them with its own tokens in
   css/themes/<theme>/<theme>-landing-i18n.css and <theme>-dashboard-i18n.css.
   ------------------------------------------------------------------------ */
.at-langsw {
    --at-langsw-focus: #22d3ee;
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 2px;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 999px;
    line-height: 1;
    direction: inherit;
}
.at-langsw__icon { font-size: 1rem; margin-inline: .45rem .2rem; }
.at-langsw__list { display: inline-flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.at-langsw__item { display: inline-flex; margin: 0; padding: 0; }
.at-langsw__opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-inline-size: 4.5rem;
    padding-inline: .8rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.at-langsw__opt.is-active { cursor: default; }
a.at-langsw__opt:hover, a.at-langsw__opt:focus { text-decoration: none; }
.at-langsw [lang="fa"] {
    font-family: 'AtVazir', 'Inter', Tahoma, sans-serif;
    font-size: .875rem;
    letter-spacing: 0;
    text-transform: none;
}
.at-langsw__opt:focus-visible { outline: 2px solid var(--at-langsw-focus); outline-offset: 2px; }
.at-langsw__short,
.at-langsw__mini-icon { display: none; }

@media (prefers-reduced-motion: reduce) {
    .at-langsw__opt { transition: none; }
}

/* Mini mode on phones: only the other language, as an icon button (translate icon + the short label of the other language). */
@media (max-width: 575.98px) {
    .at-langsw { padding: 0; gap: 0; border: 0; background: none !important; box-shadow: none !important; }
    .at-langsw__item.is-current,
    .at-langsw__icon { display: none; }
    .at-langsw__full {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .at-langsw__short,
    .at-langsw__mini-icon { display: inline; }
    .at-langsw__mini-icon { font-size: .95rem; }
    .at-langsw__opt {
        min-inline-size: 0;
        inline-size: 40px;
        block-size: 40px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 10px;
    }
    .at-langsw__short[lang="en"] { font-size: .72rem; }
}

/* Classic look (html:not([data-ui-theme]) = Classic layouts; Owner never loads this file).
   On the Classic landing the active pill reuses the landing's own primary gradient (--primary / --secondary). */
html:not([data-ui-theme]) .at-langsw {
    background: rgba(15, 23, 42, .6);
    border-color: rgba(255, 255, 255, .12);
}
html:not([data-ui-theme]) .at-langsw__icon { color: rgba(226, 232, 240, .55); }
html:not([data-ui-theme]) .at-langsw__opt { block-size: 30px; color: rgba(226, 232, 240, .78); }
html:not([data-ui-theme]) a.at-langsw__opt:hover,
html:not([data-ui-theme]) a.at-langsw__opt:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); }
html:not([data-ui-theme]) .at-langsw__opt.is-active {
    color: var(--dark, #0b1220);
    background: linear-gradient(135deg, var(--primary, #22d3ee), var(--secondary, #3b82f6));
    box-shadow: 0 2px 10px rgba(var(--primary-rgb, 34, 211, 238), .28);
}
@media (max-width: 575.98px) {
    /* 40px touch target that takes 38px in the layout: the Classic topbar (12px padding + 1px border) keeps its 64px. */
    html:not([data-ui-theme]) .at-langsw__opt {
        block-size: 40px;
        margin-block: -1px;
        background: rgba(15, 23, 42, .6);
        border-color: rgba(255, 255, 255, .12);
    }
}

/* ---------------------------------------------------------------------------
   5. NAVBAR SLOT (landing layouts) + BRAND LOGO (Branding:LogoUrl)
   Below 992px: brand ... [switcher] [menu]. From 992px: brand ... [Login / Dashboard] [switcher].
   ------------------------------------------------------------------------ */
.at-navbar .at-langsw-slot {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    margin-inline-end: .5rem;
}
@media (min-width: 992px) {
    .at-navbar .at-langsw-slot { order: 3; margin-inline-start: .75rem; margin-inline-end: 0; }
}

.at-brand-logo { display: block; block-size: 40px; inline-size: auto; max-inline-size: 180px; object-fit: contain; }
.at-sidebar-brand .at-brand-logo { block-size: 28px; max-inline-size: 140px; }