/**
 * Qutbiya Educational & Welfare Trust (QEWT)
 * Internationalization & RTL Adaptations
 * Handles: Arabic (ar) and Urdu (ur) RTL Layouts
 */

/* ==========================================================
   Document-Level RTL Alignment
   ========================================================== */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Ensure dropdown menus align properly in RTL */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* Float & Flex Alignment */
html[dir="rtl"] .float-start {
    float: right !important;
}

html[dir="rtl"] .float-end {
    float: left !important;
}

html[dir="rtl"] .text-start {
    text-align: right !important;
}

html[dir="rtl"] .text-end {
    text-align: left !important;
}

/* ==========================================================
   Directional Icons Mirroring
   ========================================================== */
/* Mirror directional arrows and chevrons in RTL */
html[dir="rtl"] .icon-directional,
html[dir="rtl"] .bi-arrow-right,
html[dir="rtl"] .bi-arrow-left,
html[dir="rtl"] .bi-chevron-right,
html[dir="rtl"] .bi-chevron-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left {
    transform: scaleX(-1);
    display: inline-block;
}

/* Absolute exception: Non-directional icons MUST NEVER mirror */
html[dir="rtl"] .bi-telephone,
html[dir="rtl"] .bi-envelope,
html[dir="rtl"] .bi-clock,
html[dir="rtl"] .bi-calendar,
html[dir="rtl"] .bi-whatsapp,
html[dir="rtl"] .bi-globe,
html[dir="rtl"] .bi-globe2,
html[dir="rtl"] .fa-phone-alt,
html[dir="rtl"] .fa-envelope-open,
html[dir="rtl"] .fa-map-marker-alt,
html[dir="rtl"] .fab {
    transform: none !important;
}

/* ==========================================================
   Strict LTR Isolation for Numbers, Emails & Codes
   ========================================================== */
.keep-ltr,
input[type="tel"],
input[type="email"],
.phone-number,
.transaction-id,
.code-badge,
.amount-number {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed;
}

html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"] {
    text-align: right; /* Aligns cursor to right side for Arabic/Urdu typing while keeping format LTR */
}

/* ==========================================================
   Topbar & Header RTL Positioning
   ========================================================== */
html[dir="rtl"] .qewt-navbar .navbar-nav {
    padding-inline-start: 0;
}

html[dir="rtl"] .qewt-whatsapp-pill {
    inset-inline-start: auto;
    inset-inline-end: 24px;
}

/* ==========================================================
   Urdu Line Height, Diacritics Balance & Font Classes
   ========================================================== */
.font-gulzar,
.urdu-heading {
    font-family: 'Gulzar', 'Noto Nastaliq Urdu', serif !important;
    line-height: 2.1 !important;
}

.font-nastaliq,
.urdu,
.urdu-text-mode {
    font-family: 'Noto Nastaliq Urdu', 'Lateef', serif !important;
    line-height: 2.2 !important;
}

.font-lateef {
    font-family: 'Lateef', serif !important;
    line-height: 1.8 !important;
}

.font-amiri,
.spiritual-quote {
    font-family: 'Amiri', 'Scheherazade New', serif !important;
    line-height: 1.8 !important;
}

.font-scheherazade {
    font-family: 'Scheherazade New', serif !important;
    line-height: 1.8 !important;
}

/* ==========================================================
   Authentic Arabic Typography (Amiri & Noto Sans Arabic)
   ========================================================== */
html[lang="ar"] {
    font-family: 'Noto Sans Arabic', 'Amiri', system-ui, -apple-system, sans-serif !important;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .display-1,
html[lang="ar"] .display-2,
html[lang="ar"] .display-3,
html[lang="ar"] .display-4,
html[lang="ar"] .display-5,
html[lang="ar"] .display-6,
html[lang="ar"] .arabic-heading,
.font-arabic-heading {
    font-family: 'Amiri', 'Scheherazade New', 'Noto Sans Arabic', serif !important;
    font-weight: 700;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
}

html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] span,
html[lang="ar"] small,
html[lang="ar"] a,
.font-arabic-body {
    font-family: 'Noto Sans Arabic', 'Amiri', system-ui, sans-serif !important;
    line-height: 1.85 !important;
}

html[lang="ar"] .card-title,
html[lang="ar"] .topic-heading {
    font-family: 'Amiri', 'Noto Sans Arabic', serif !important;
    line-height: 1.6;
}

html[lang="ar"] .btn,
html[lang="ar"] .badge,
html[lang="ar"] .nav-link {
    font-family: 'Noto Sans Arabic', sans-serif !important;
    font-weight: 600;
}

/* Override Urdu Nastaliq in Arabic locale so Arabic is never rendered in Nastaliq */
html[lang="ar"] .font-gulzar,
html[lang="ar"] .urdu-heading {
    font-family: 'Amiri', 'Noto Sans Arabic', serif !important;
    line-height: 1.65 !important;
}

html[lang="ar"] .font-nastaliq,
html[lang="ar"] .font-lateef,
html[lang="ar"] .urdu,
html[lang="ar"] .urdu-text-mode {
    font-family: 'Noto Sans Arabic', 'Amiri', sans-serif !important;
    line-height: 1.85 !important;
    font-size: 1rem !important;
}

/* ==========================================================
   Urdu-Specific Rules
   ========================================================== */
html[lang="ur"] .card-title,
html[lang="ur"] .topic-heading {
    font-family: 'Gulzar', 'Noto Nastaliq Urdu', serif !important;
    line-height: 2.1;
}

html[lang="ur"] p {
    line-height: 2.25;
}

html[lang="ur"] .nav-link,
html[lang="ur"] .btn {
    font-family: 'Lateef', 'Noto Nastaliq Urdu', sans-serif !important;
    line-height: 1.6;
    font-size: 1.15rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3 {
    font-family: 'Gulzar', 'Noto Nastaliq Urdu', serif !important;
    line-height: 2.0;
}

/* ==========================================================
   Form Input Icon Padding in RTL
   ========================================================== */
html[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: -1px;
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--qewt-radius-md);
    border-bottom-right-radius: var(--qewt-radius-md);
}

html[dir="rtl"] .input-group > :not(:last-child):not(.dropdown-menu) {
    border-top-left-radius: var(--qewt-radius-md);
    border-bottom-left-radius: var(--qewt-radius-md);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}