/* ==========================================================================
   Drug Center Pharmacy — Arabic (RTL) stylesheet
   Loads tokens + shared base, then applies Arabic typography & RTL details.
   Pair with bootstrap.rtl.min.css.
   ========================================================================== */
@import url("variables.css");
@import url("base.css");

:root {
  --dc-font-body:    'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --dc-font-heading: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --underline-origin: right;

  /* Arabic glyphs sit visually smaller — nudge sizes up slightly */
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --lh-base: 1.7;
}

html[dir="rtl"] body { letter-spacing: 0; }

h1, h2, h3, h4 { letter-spacing: 0; font-weight: 700; }
.dc-header__title h1 { font-size: 1.5rem; }

/* Bootstrap Icons are direction-neutral; mirror the directional ones */
.bi-arrow-right::before { content: "\F12F"; }   /* arrow-left glyph */
.bi-chevron-right::before { content: "\F284"; } /* chevron-left glyph */
.dc-stepper li + li::before { content: '\F284'; }
.flip-rtl { transform: scaleX(-1); display: inline-block; }
.btn-dc-link:hover i { transform: translateX(-2px); }

/* Keep IDs, phone numbers and codes readable left-to-right */
.dir-ltr,
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="number"],
.code { direction: ltr; text-align: right; unicode-bidi: plaintext; }
input[type="tel"]::placeholder,
.dir-ltr::placeholder { direction: ltr; text-align: right; }

/* Bootstrap RTL already flips the select caret; make sure padding matches */
.form-select { background-position: left 0.75rem center; padding-inline-end: 0.8rem; padding-inline-start: 2.25rem; }

/* Slightly larger buttons for Arabic readability */
.btn { --bs-btn-font-size: 0.9rem; }