/* ── English Fonts (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Geom:ital,wght@0,300..900;1,300..900&display=swap');

/* ── Arabic Custom Font ── */
@font-face {
    font-family: expo;
    src: url('../fonts/expo-reg.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: expo;
    src: url('../fonts/ExpoArabic-Medium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: expo;
    src: url('../fonts/Expo\ Arabic\ Bold.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ══════════════════════════════════════════════════════════
   ARABIC — RTL
   ══════════════════════════════════════════════════════════ */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl !important;
    font-family: expo, sans-serif !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: expo, sans-serif !important;
}

/* ══════════════════════════════════════════════════════════
   ENGLISH — LTR
   Must target both html AND body to override auth.css
   which sets body { font-family: expo } directly.
   ══════════════════════════════════════════════════════════ */
html[dir="ltr"],
html[dir="ltr"] body {
    direction: ltr !important;
    font-family: expo, sans-serif !important;
}

/* Headings & branded labels use Geom in English */
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] h6,
html[dir="ltr"] .login-title,
html[dir="ltr"] .login-btn,
html[dir="ltr"] .mainTitle {
    font-family: expo, sans-serif !important;
}

/* Form controls don't inherit font by default in all browsers */
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select,
html[dir="ltr"] button {
    font-family: 'DM Sans', sans-serif !important;
    direction: ltr !important;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
    font-family: expo, sans-serif !important;
    direction: rtl !important;
}

/* ══════════════════════════════════════════════════════════
   Layout — Flex container direction (swaps form & visual sides)
   ══════════════════════════════════════════════════════════ */

/* The flex container reads `direction` to order its children.
   We set explicitly (in addition to inheriting from html/body)
   to guarantee the form/image swap happens. */
html[dir="ltr"] .login-split-container {
    direction: ltr !important;
}

html[dir="rtl"] .login-split-container {
    direction: rtl !important;
}

/* Flex rows built RTL-first */
html[dir="ltr"] .mainMenu ul,
html[dir="ltr"] .mainHeader .actions {
    flex-direction: row;
}

/* Directional icons (back arrows, chevrons) */
html[dir="ltr"] .back-to-home i,
html[dir="ltr"] .arrow-icon {
    transform: rotate(180deg);
}

/* Auth form extras row */
html[dir="ltr"] .form-extras {
    flex-direction: row !important;
}

/* ══════════════════════════════════════════════════════════
   Always centred — regardless of direction
   ══════════════════════════════════════════════════════════ */
.login-logo,
.login-logo *,
.signup-link,
.lang-switcher-login,
.login-btn {
    text-align: center !important;
}

/* ══════════════════════════════════════════════════════════
   Language Visibility Toggle
   ══════════════════════════════════════════════════════════ */
html[lang="en"] .lang-ar {
    display: none !important;
}

html[lang="ar"] .lang-en {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════
   Bootstrap Grid — Flip float using logical inline-start
   Works automatically for both RTL and LTR based on dir attr
   ══════════════════════════════════════════════════════════ */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: inline-start !important;
}


/* ══════════════════════════════════════════════════════════
   videoContent / Free Preview section
   ══════════════════════════════════════════════════════════ */
html[dir="ltr"] .videoContent .one {
    text-align: start !important;
}

/* ══════════════════════════════════════════════════════════
   Slider Item Direction Fix (Overrides JS RTL force)
   Because script.js initializes Owl Carousel with rtl: true,
   the slider wrapper forces direction: rtl. We must force
   direction: ltr on the inner items when in English so flexbox
   and text-align work correctly.
   ══════════════════════════════════════════════════════════ */
html[dir="ltr"] .successOfStory .review,
html[dir="ltr"] .successOfStory .review .info,
html[dir="ltr"] .ourTrainerSection .one,
html[dir="ltr"] .ourTrainerSection .one .info,
html[dir="ltr"] .owl-item > div {
    direction: ltr !important;
    text-align: left !important;
}

/* Keep success stats .one centered regardless of direction */
html[dir="ltr"] .successOfStory .one,
html[dir="rtl"] .successOfStory .one {
    text-align: center !important;
}

html[dir="ltr"] .successOfStory .review .stars ul,
html[dir="ltr"] .ourTrainerSection .one .info {
    flex-direction: row !important;
}