/* =========================================================================
   Arabic / right-to-left overrides.
   Loaded by includes/header.php only when currentLang() is a right-to-left
   language, immediately after style.css so these rules win on equal
   specificity.

   dir="rtl" on <html> already mirrors flexbox, grid, tables, list markers and
   text alignment on its own, so most of the layout needs nothing here. What is
   left is everything pinned to a physical side: float, the left/right of an
   absolutely positioned element, physical margins and borders, arrows that
   point at a direction, and the two carousels that measure in pixels.

   Everything is scoped under [dir="rtl"] so this file is inert if it is ever
   loaded on an English page by mistake.
   ========================================================================= */

/* --- Typography -----------------------------------------------------------
   Poppins has no Arabic glyphs, so an Arabic page needs a face named for them
   or the browser picks its own and the result varies by machine. Tahoma and
   Segoe UI both ship with Windows and cover Arabic well; Noto Naskh is the
   common Linux/Android fallback.

   Poppins stays at the front of the stack. Font fallback happens per glyph,
   not per element, so Latin keeps rendering in Poppins - exactly as it does on
   the English site - and only the Arabic glyphs drop through to the faces
   after it. Leading with the Arabic face instead re-set every Latin run on the
   page: the footer, the phone numbers, the logo wordmark and the insurer names
   all picked up Tahoma's weight and looked nothing like the English page. */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] button,
[dir="rtl"] select {
  font-family: "Poppins", 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Traditional Arabic', sans-serif;
  /* Arabic sits taller than Latin at the same size and the diacritics need the
     room, so the site's tighter line-heights are relaxed a little. */
  line-height: 1.9;
}

/* Digits, phone numbers and e-mail addresses stay left-to-right inside an
   otherwise right-to-left line. Without this a number like "0483 2809 100"
   reorders into nonsense next to Arabic text. */
[dir="rtl"] .footer-top-val,
[dir="rtl"] .contact-text,
[dir="rtl"] .hero-stat .number {
  direction: ltr;
  unicode-bidi: embed;
}

/* The logo's two lines used to be in the group above, back when they held the
   hardcoded Latin "ALMAS" / "HOSPITAL". They now carry website_name for the
   current language, so forcing them left-to-right would left-align the Arabic
   name inside a right-aligned header. Latin needs nothing here either - a run
   of letters with no digits in it is laid out correctly by the browser on its
   own; it was only ever numbers that needed the override. */
[dir="rtl"] .logo-text {
  text-align: right;
}
/* ...but those sit inside right-aligned blocks, so the box itself still hugs
   the correct edge. */
[dir="rtl"] .footer-top-val,
[dir="rtl"] .contact-text {
  text-align: right;
}

/* --- Top bar --------------------------------------------------------------
   .top-nav-bar .container is space-between, which mirrors by itself: the
   language switch lands on the right and the links on the left, which is where
   a right-to-left reader expects to start. Only the dropdown needs nudging,
   because it is positioned against a physical edge. */
[dir="rtl"] .topnav-menu {
  left: auto;
  right: -14px;
}

/* --- Header ---------------------------------------------------------------
   The logo, the four section blocks and the dividers are all flex children and
   mirror on their own. The specialities panel is absolutely positioned across
   the full width, so its left/right pair is already symmetrical. */
[dir="rtl"] .topnav-caret {
  margin-left: 0;
  margin-right: 4px;
}

/* --- Arrows ---------------------------------------------------------------
   "Forward" is leftward here. These are Font Awesome glyphs rather than
   characters in a string, so they are flipped rather than swapped - that keeps
   one icon name in the markup and no second set of classes to maintain.

   Matched on the icon itself rather than on a list of parent classes. The list
   version meant every new arrow anywhere on the site had to be remembered here,
   and the ones that were forgotten pointed the wrong way. Only the horizontal
   arrows and chevrons are touched: up, down and the non-directional icons mean
   the same thing in either direction. */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-long-arrow-right,
[dir="rtl"] .fa-long-arrow-left {
  transform: scaleX(-1);
}
/* The hover nudge on the About/Read More link has to travel the other way too. */
[dir="rtl"] .home-arrow-link:hover .home-arrow-dot {
  transform: translateX(-5px);
}

/* --- Home: the ruled two-column sections ---------------------------------- */
[dir="rtl"] .home-feature-ruled {
  border-left: 0;
  border-right: 1px solid var(--border-color);
  padding-left: 0;
  padding-right: 60px;
}

/* --- Home: the doctors marquee -------------------------------------------
   script.js measures one set of cards and writes --docs-shift; the animation
   then slides the track by exactly that much. In a right-to-left track the
   cards are laid out from the right, so the travel is rightward - the same
   distance, the opposite sign. */
@keyframes docsScrollRtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--docs-shift, 0px), 0, 0); }
}
[dir="rtl"] .docs-track {
  animation-name: docsScrollRtl;
}

/* The feathered edge is the one the cards leave by, and in Arabic they travel
   the other way: rightwards, into a heading column that now sits on the right.
   Only the angle turns around - the eased stops and the --docs-fade width are
   the ones style.css sets, so both languages dissolve identically. */
[dir="rtl"] .docs-marquee {
  -webkit-mask-image: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.06) calc(var(--docs-fade) * 0.3),
    rgba(0, 0, 0, 0.3) calc(var(--docs-fade) * 0.55),
    rgba(0, 0, 0, 0.68) calc(var(--docs-fade) * 0.76),
    rgba(0, 0, 0, 0.92) calc(var(--docs-fade) * 0.9),
    #000 var(--docs-fade)
  );
  mask-image: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.06) calc(var(--docs-fade) * 0.3),
    rgba(0, 0, 0, 0.3) calc(var(--docs-fade) * 0.55),
    rgba(0, 0, 0, 0.68) calc(var(--docs-fade) * 0.76),
    rgba(0, 0, 0, 0.92) calc(var(--docs-fade) * 0.9),
    #000 var(--docs-fade)
  );
}

/* --- Home: patient stories ------------------------------------------------
   The chevrons on the nav buttons name a direction, so they swap sides with
   the buttons themselves. */

/* --- Departments ----------------------------------------------------------
   The intro image floats away from the text, which is the other side here. */
[dir="rtl"] .dept-intro-img-float {
  float: right;
  margin-right: 0;
  margin-left: 44px;
}
[dir="rtl"] .dept-intro-img-float img {
  margin-right: 0;
  margin-left: 32px;
}
/* Checklists and FAQ rows read from the right. */
[dir="rtl"] .dept-checklist-sub,
[dir="rtl"] .dept-facility-list {
  padding-left: 0;
  padding-right: 24px;
}

/* --- Footer --------------------------------------------------------------- */
[dir="rtl"] .footer-heading,
[dir="rtl"] .address-text,
[dir="rtl"] .newsletter-heading,
[dir="rtl"] .newsletter-privacy,
[dir="rtl"] .copyright-text {
  text-align: right;
}
/* The send icon points into the field, so it turns around with it. */
[dir="rtl"] .newsletter-submit .fa-paper-plane {
  transform: scaleX(-1);
}

/* --- Floating buttons -----------------------------------------------------
   All three are pinned to a corner. They move to the opposite one rather than
   staying put, so they never end up over the start of a line of text. */
[dir="rtl"] .whatsapp-floating,
[dir="rtl"] .announce-floating {
  left: auto;
  right: 24px;
}
[dir="rtl"] .scroll-to-top {
  right: auto;
  left: 24px;
}
/* The announcements pill grows away from its icon, which is now on the right. */
[dir="rtl"] .announce-floating-label {
  padding-right: 0;
  padding-left: 26px;
}


/* --- Announcements ticker -------------------------------------------------
   The track is printed twice and slid exactly half its own width, which is what
   makes the loop seamless. In a right-to-left track the lists are laid out from
   the right, so the slide is the same distance the other way; the arrow on the
   "view all" link points the way it now travels. */
@keyframes annMarqueeRtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
[dir="rtl"] .ann-ticker-track {
  animation-name: annMarqueeRtl;
}
/* The date stamp is digits and a month name, so it reads left-to-right inside
   the otherwise right-to-left line. */
[dir="rtl"] .ann-ticker-date {
  direction: rtl;
  unicode-bidi: plaintext;
}

/* --- Department sections and FAQs ----------------------------------------- */
/* The numbered checklist puts its number before the text, which is now on the
   right of the row. */
[dir="rtl"] .dept-check-num,
[dir="rtl"] .dept-check-icon,
[dir="rtl"] .dept-sub-icon {
  margin-left: 10px;
  margin-right: 0;
}

/* --- Doctor cards --------------------------------------------------------- */
[dir="rtl"] .doctor-card-overlay {
  text-align: right;
}

/* --- Mixed English and Arabic --------------------------------------------
   Until every record is translated, an Arabic page carries English text that
   has fallen back. Inside dir="rtl" the bidi algorithm moves the trailing
   punctuation of an English run to the visual left, so a sentence renders as
   ".before surgery" and a question as "?What is the best way" - correct by the
   standard, and wrong to every reader.

   unicode-bidi: plaintext fixes it at the source: each block takes its
   direction from its own first strong character, so an English paragraph lays
   out left-to-right with its full stop where it belongs and an Arabic one
   lays out right-to-left. text-align: start then follows that resolved
   direction rather than a fixed side, which is why these rules use start
   rather than right - a fully translated page still comes out entirely
   right-aligned, and a half translated one stays readable in both languages.

   Applied to the leaf that holds the text, never to a wrapper: a wrapper would
   hand its own first paragraph's direction to every paragraph under it. */
[dir="rtl"] .dept-section .section-title,
[dir="rtl"] .dept-section .section-subtitle,
[dir="rtl"] .dept-title-label,
[dir="rtl"] .dept-title-name,
[dir="rtl"] .dept-facility-name,
[dir="rtl"] .faq-question-text,
[dir="rtl"] .dept-checklist-lead,
[dir="rtl"] .dept-checklist-title,
[dir="rtl"] .dept-checklist-desc,
[dir="rtl"] .dept-checklist-subtitle,
[dir="rtl"] .dept-checklist-subdesc,
[dir="rtl"] .card-title,
[dir="rtl"] .designation,
[dir="rtl"] .story-name,
[dir="rtl"] .spec-name,
[dir="rtl"] .footer-animated-link,
[dir="rtl"] .ann-ticker-item,
[dir="rtl"] .docs-aside-text {
  text-align: start;
  unicode-bidi: plaintext;
}

/* ...except the doctors heading, which is centred in both languages. The rule
   above matches it too and outranks the plain .dept-section-doctors selector in
   style.css, so the centring has to be restated here. unicode-bidi still comes
   from the rule above - only the alignment is overridden. */
[dir="rtl"] .dept-section-doctors .section-title {
  text-align: center;
}

/* Body copy keeps the justified setting the rest of the site uses - only the
   direction is resolved per paragraph. */
[dir="rtl"] .content-area p,
[dir="rtl"] .dept-unit-content p,
[dir="rtl"] .dept-unit-content li,
[dir="rtl"] .dept-facility-text p,
[dir="rtl"] .faq-answer-inner p,
[dir="rtl"] .faq-answer-inner li,
[dir="rtl"] .card-text,
[dir="rtl"] .home-feature-text {
  text-align: justify;
  unicode-bidi: plaintext;
}

/* --- Lists inside body copy ----------------------------------------------
   The bullet indent is a physical padding, so it has to move to the other side
   or the markers hang off the edge of the text. */
[dir="rtl"] .dept-unit-content ul,
[dir="rtl"] .dept-unit-content ol,
[dir="rtl"] .faq-answer-inner ul,
[dir="rtl"] .faq-answer-inner ol,
[dir="rtl"] .content-area ul,
[dir="rtl"] .content-area ol {
  padding-left: 0;
  padding-right: 24px;
}

/* The coloured bar before an About block heading leads the text, so it swaps
   to the right where the line now starts. */
[dir="rtl"] .content-area .about-block-heading {
  flex-direction: row-reverse;
}

/* --- Patient story cards -------------------------------------------------- */
[dir="rtl"] .story-card {
  text-align: right;
}

/* --- Floated photographs ------------------------------------------------
   A float is a physical side, so dir="rtl" leaves it exactly where it was:
   the picture stays on the same edge in both languages while the text around
   it mirrors, which is what makes the page look untranslated. The asymmetric
   margin that holds the text off the picture has to swap with it, or the gap
   ends up on the outside edge where nothing needs it.

   Every float in the stylesheet is mirrored here. The department intro photo
   is further up this file; these are the rest. */
[dir="rtl"] .about-featured-img {
  float: left;
  margin: 0 32px 20px 0;
}

/* Home care alternates its photo side block by block, so both the base rule
   and the nth-of-type override need turning around - and they have to stay
   opposite each other, or the alternating rhythm collapses. */
[dir="rtl"] .homecare-img-float {
  float: right;
  margin: 4px 0 28px 44px;
}
[dir="rtl"] .homecare-item-block:nth-of-type(even) .homecare-img-float {
  float: left;
  margin: 4px 44px 28px 0;
}

/* --- TPA & Insurance list ------------------------------------------------
   The sub-item check icon is absolutely positioned rather than flexed, because
   the list flows in two CSS columns and flex items break unpredictably across
   a column boundary. Absolute positioning is a physical side, so dir="rtl"
   leaves the icon pinned to the left while the text it belongs to moves to the
   right - the icon and its label end up on opposite sides of the column. The
   indent that makes room for it has to swap with it. */
[dir="rtl"] .tpa-sublist-item {
  padding-left: 0;
  padding-right: 30px;
}

[dir="rtl"] .tpa-check-icon {
  left: auto;
  right: 0;
}

/* Justified copy leaves its last line on the start edge, and in Arabic that is
   the right - text-align-last is a physical keyword and does not mirror. */
[dir="rtl"] .tpa-subtitle {
  text-align-last: right;
}

/* A bulleted list inside the intro copy indents from its own start edge. */
[dir="rtl"] .tpa-subtitle ul,
[dir="rtl"] .tpa-subtitle ol {
  margin-left: 0;
  margin-right: 20px;
  padding-left: 0;
  padding-right: 8px;
}

/* --- Biomedical waste report ----------------------------------------------
   The waste table scrolls sideways with its month column pinned. Sticky
   positioning is a physical side, so dir="rtl" moves the column itself to the
   right while leaving it pinned to the left - it detaches from its own rows and
   slides over the figures. The pin has to swap with it. */
[dir="rtl"] .bmw-th-month,
[dir="rtl"] .bmw-td-month {
  left: auto;
  right: 0;
}

[dir="rtl"] .bmw-table thead .bmw-th-month,
[dir="rtl"] .bmw-td-month {
  text-align: right;
}

/* The divider between header cells, and the one between the hero's figures,
   both sit on the start edge. */
[dir="rtl"] .bmw-th + .bmw-th {
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

[dir="rtl"] .bmw-stat {
  padding-left: 0;
  padding-right: 40px;
  border-left: 0;
  border-right: 2px solid rgba(255, 255, 255, 0.28);
  text-align: right;
}

[dir="rtl"] .bmw-stat:first-child {
  padding-right: 0;
  border-right: 0;
}

/* The share bar grows from the start edge and is rounded at the far end, so
   both the origin and the rounded corners turn around with it. */
[dir="rtl"] .bmw-meter-fill {
  transform-origin: right center;
  border-radius: 4px 0 0 4px;
}

[dir="rtl"] .bmw-download-card::after {
  transform-origin: right center;
}

/* The accent stripe down the side of the closing note. */
[dir="rtl"] .bmw-note-card {
  border-left: 1px solid var(--border-color);
  border-right: 3px solid var(--primary);
}

[dir="rtl"] .bmw-scroll-hint i {
  margin-right: 0;
  margin-left: 5px;
}


/* --- Chat assistant -------------------------------------------------------
   In Arabic the right corner belongs to WhatsApp and announcements, so the
   assistant crosses to the left and takes the corner there - back to top,
   which is already on the left in Arabic, keeps its place above it. The panel
   and the nudge grow out of the launcher, so their anchors and their transform
   origins cross over with it, or they would unfold off the side of the
   screen. */
[dir="rtl"] .chatbot {
  right: auto;
  left: 24px;
  align-items: flex-start;
}

[dir="rtl"] .chatbot-panel {
  right: auto;
  left: 0;
  transform-origin: bottom left;
}

/* The tail of the nudge points back at the button, which is now on its left,
   and it slides in from that side too. */
[dir="rtl"] .chatbot-teaser {
  right: auto;
  left: calc(100% + 16px);
  padding: 13px 16px 13px 13px;
  border-radius: 18px 18px 18px 6px;
  transform: translateX(-14px) scale(0.94);
  transform-origin: bottom left;
}

[dir="rtl"] .chatbot-teaser.is-shown {
  transform: none;
}

[dir="rtl"] .chatbot-launcher-dot {
  right: auto;
  left: 7px;
}

[dir="rtl"] .chatbot-avatar-dot {
  right: auto;
  left: 0;
}

/* The lights behind the header drift from the other side, so the brighter one
   still falls away from the title rather than across it. */
[dir="rtl"] .chatbot-head::before {
  right: auto;
  left: -10%;
}

[dir="rtl"] .chatbot-head::after {
  left: auto;
  right: 8%;
}

/* The sheen on the launcher sweeps the way the page reads. */
[dir="rtl"] .chatbot-launcher::before {
  transform: translateX(120%);
}

[dir="rtl"] .chatbot-launcher:hover::before,
[dir="rtl"] .chatbot-launcher:focus-visible::before {
  transform: translateX(-120%);
}

/* An answer's links underline from their own starting edge. */
[dir="rtl"] .chatbot-link::after {
  transform-origin: right;
}

/* The suggestion row scrolls the other way, so the edge that fades is the one
   it scrolls towards. */
[dir="rtl"] .chatbot-chips {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
}

@media (max-width: 768px) {
  [dir="rtl"] .chatbot {
    left: 16px;
  }

  /* The panel spans the viewport on a phone in either direction, so the only
     thing to undo here is the left: 0 anchor above. */
  [dir="rtl"] .chatbot-panel {
    right: 12px;
    left: 12px;
  }
}