/* ══════════════════════════════════════════════
   Arabic typography layer — light, minimal, airy
   Loaded only when the app language is Arabic.
   ══════════════════════════════════════════════ */

body {
    font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
    direction: rtl;
    text-align: right;
    font-size: 14px;
}

/* Arabic script is connected — tracking breaks it and looks messy */
* {
    letter-spacing: 0 !important;
}

/* UA stylesheet forces inputs to LTR, which pushes the placeholder to the
   left in RTL. Re-align form controls to the right for Arabic. */
[dir="rtl"] .cx-input,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    direction: rtl;
    text-align: right;
}

/* Arabic glyphs carry more ink than Latin at equal weights —
   step every emphasis level down so pages stop looking bold-heavy */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500 !important;
}
.fw-semibold,
.fw-bold,
b, strong,
th {
    font-weight: 500 !important;
}
.fw-medium {
    font-weight: 400 !important;
}
small, .small {
    font-weight: 400;
}

/* breathing room — cramped lines are why it feels dense */
p, li, td, th, label, .form-label, small {
    line-height: 1.8;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.55;
}
.alert, .badge, .nav-link {
    line-height: 1.7;
}

/* quieter controls */
.btn, button {
    font-weight: 400 !important;
}

/* numerals stay clean and tabular inside tables */
td {
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════
   RTL form geometry fixes
   The Bootstrap bundle is the LTR build, so input-group
   corner radii and absolute-positioned widgets keep their
   physical (left/right) values and look broken in RTL.
   ══════════════════════════════════════════════ */

/* input-group: first child sits on the RIGHT in RTL -> round its right side */
[dir="rtl"] .input-group > .input-group-text:first-child,
[dir="rtl"] .input-group > *:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-border-radius, 0.375rem);
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
}

/* last child sits on the LEFT in RTL -> round its left side */
[dir="rtl"] .input-group > *:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-border-radius, 0.375rem);
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
}

/* middle segments lose both radii */
[dir="rtl"] .input-group > :not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* The LTR Bootstrap build collapses adjacent borders with margin-left:-1px.
   In RTL the flex order is reversed (input on the right, appendee on the left),
   so the negative margin must flip to the right side or a 1px gap/seam opens
   between the input and the trailing element (e.g. the "EGP" currency span). */
[dir="rtl"] .input-group > :not(:first-child) {
    margin-left: 0;
    margin-right: -1px;
}

/* phone dial-code badge inside register/login forms */
[dir="rtl"] .cx-phone-group .input-group-text {
    min-width: 68px;
    justify-content: center;
    color: #374151;
}

/* password eye toggle: logical placement already handled inline
   via inset-inline-end; keep tap target aligned with control radius */
[dir="rtl"] .toggle-password-btn {
    inset-inline-end: 0 !important;
}

/* ══════════════════════════════════════════════
   Minimalist cleanup (Arabic only)
   Soften borders, flatten shadows, add air — without
   touching the English-facing design.
   ══════════════════════════════════════════════ */
:root {
    --bs-border-color: #ededed;
    --bs-border-color-translucent: rgba(17, 17, 17, .06);
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(17, 17, 17, .03);
    --bs-box-shadow: 0 .5rem 1rem rgba(17, 17, 17, .04);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(17, 17, 17, .05);
}

/* flatter, calmer surfaces */
.card,
.modal-content,
.dropdown-menu,
.popover {
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04) !important;
    border-color: #ededed !important;
}

/* quieter form controls — no heavy rings, gentle focus */
.form-control,
.form-select,
.input-group-text,
.form-check-input {
    border-color: #e6e6e6;
    box-shadow: none !important;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #c9c9c9;
    box-shadow: 0 0 0 .15rem rgba(17, 17, 17, .05) !important;
}

/* buttons: drop the heavy shadows, keep crisp */
.btn {
    box-shadow: none !important;
}

/* tables: lighter separators for an airier grid */
.table {
    --bs-table-border-color: #f0f0f0;
}

/* a little more air in dense panels without breaking layout */
.card-header,
.card-footer {
    background: transparent;
    border-color: #f0f0f0;
}