/* ==========================================================================
   SITE FIXES  -  bugs in the approved stylesheet, corrected
   ==========================================================================

   base.css is generated from the design and never edited by hand, so the
   handful of places where it contradicts itself are corrected here instead.
   Each one is a defect with a visible consequence, and each is listed in
   DESIGN-NOTES.md under "Bugs in the design that are fixed here".

   Nothing in this file changes a design decision. Every rule either completes
   an intent the design states and then defeats, or supplies a token it uses
   and never defines.

   Loaded last, after every design sheet, so these win on equal specificity.
   Copied to public/ and hashed by `npm run sync:design` - see AUTHORED_SHEETS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The header on a phone
   --------------------------------------------------------------------------

   This used to let the navbar wrap so the booking button took a second row.
   That stopped the sideways scroll but made the header 64px taller than any
   hero allows for, so the button sat on top of every English page's
   headline. Now handled in responsive.css (section 3), which keeps the
   header to one row instead.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   `--radius-pill` is used but never defined
   --------------------------------------------------------------------------

   `.status-badge` sets `border-radius: var(--radius-pill)`. The variable does
   not exist, so the whole declaration is invalid and the browser drops it,
   leaving square corners on something drawn as a pill. `--radius-full` is
   defined in the same block and is plainly what was meant.
   -------------------------------------------------------------------------- */

:root {
    --radius-pill: var(--radius-full, 9999px);
}

/* --------------------------------------------------------------------------
   Consultant cards have to survive the hospital's real data
   --------------------------------------------------------------------------

   The design's cards were drawn against four consultants with a portrait each,
   a two-word specialty and chips like "CT angiography". The hospital's actual
   directory has 47, most of them with no portrait yet and role lines like
   "Senior Consultant, Paediatric Respiratory Medicine & Allergy". Two rules
   only worked for the shorter copy:

     * `.doctor-tag` sets `white-space: nowrap`, so a chip longer than the card
       runs out through its side rather than wrapping inside it.
     * `.doctor-img-wrapper` reserves 350px and expects an `<img>`. A consultant
       with no photograph yet leaves the area to collapse, and cards in the same
       row then sit at different heights.
   -------------------------------------------------------------------------- */

.doctor-tag {
    /* Wrap instead of overflowing. A two-line chip is not what the design
       drew, but it is inside the card and it can be read. */
    white-space: normal;
    max-width: 100%;
    /* Long clinical words - "Electroencephalography" - have nowhere to break
       otherwise. */
    overflow-wrap: anywhere;
}

.doctor-spec,
.doctor-name {
    overflow-wrap: anywhere;
}

/* The stand-in while a consultant has no portrait: their initials, on the
   same tint the chips use, filling exactly the space a photograph would. */
.doctor-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, rgba(28, 151, 212, 0.10), rgba(1, 61, 98, 0.06));
    color: #12719F;
    font-family: inherit;
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    user-select: none;
}

/* The same stand-in on the consultant's own page, where the portrait is the
   full height of the hero rather than a card thumbnail. */
.dr-portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 320px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(28, 151, 212, 0.12), rgba(1, 61, 98, 0.07));
    color: #12719F;
    font-size: clamp(3rem, 9vw, 5rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    user-select: none;
}

/* ==========================================================================
   Home page - About section media column
   --------------------------------------------------------------------------
   The photographs sat at fixed heights (`480px`, and `400px` further down),
   so the media column stopped short of the copy beside it and left a band of
   white below the picture. base.css already stretches the grid and gives the
   wrapper `height: 100%`; what was missing was letting the boxes inside it use
   that height.

   base.css is generated from the approved design, so the override lives here -
   site-fixes.css is loaded last precisely for this.
   ========================================================================== */

.about-section .about-grid {
    align-items: stretch;
}

.about-section .new-about-media-wrapper {
    height: 100%;
    min-height: 0;
}

.about-section .new-about-main-img-box,
.about-section .new-about-overlay-img-box {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.about-section .new-about-main-img-box img,
.about-section .new-about-overlay-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * With only one photograph set, it takes both rows rather than leaving the
 * second one empty - which is the shape this section has when an editor has
 * filled in the main image and left the second blank.
 */
.about-section .new-about-media-wrapper:not(:has(.new-about-overlay-img-box img[src]:not([src='']))) .new-about-main-img-box {
    grid-row: 1 / -1;
}

/* Stacked layouts get their height back from the content, not the column. */
@media screen and (max-width: 992px) {
    .about-section .new-about-media-wrapper,
    .about-section .new-about-main-img-box,
    .about-section .new-about-overlay-img-box {
        height: auto;
    }

    .about-section .new-about-main-img-box img,
    .about-section .new-about-overlay-img-box img {
        height: auto;
    }
}

/* The contact form's tile choices and tick-boxes ------------------------- */

/* The approved design draws "I am contacting you as" and "Preferred way to
   reply" as three bordered panels rather than as radio buttons. They are radio
   buttons underneath - the keyboard, the screen reader and the browser's own
   validation all behave - so everything here is appearance. */

.mph-form-legend {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #004e75;
}

.mph-form-legend > span {
    color: #ed1c24;
}

.mph-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.mph-tile {
    position: relative;
    display: block;
    cursor: pointer;
}

.mph-tile input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mph-tile-body {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    border: 1px solid rgba(0, 78, 117, 0.14);
    border-radius: 10px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: #22364a;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.mph-tile-body i {
    font-size: 18px;
    color: #1c97d4;
}

.mph-tile input:hover + .mph-tile-body {
    border-color: rgba(28, 151, 212, 0.5);
}

/* The chosen tile, and the keyboard focus ring on it. */
.mph-tile input:checked + .mph-tile-body {
    border-color: #1c97d4;
    background: #f1f7fc;
    box-shadow: inset 0 0 0 1px #1c97d4;
}

.mph-tile input:focus-visible + .mph-tile-body {
    outline: 2px solid #1c97d4;
    outline-offset: 2px;
}

.mph-form-consent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.mph-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.55;
    cursor: pointer;
}

.mph-check input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #1c97d4;
    flex-shrink: 0;
}

/* The acknowledgement that replaces the form once it has sent. */
.mph-form-card--sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 3rem 2rem;
    text-align: center;
}

.mph-form-sent-icon i {
    font-size: 46px;
    color: #16a34a;
}

/* The enquiry form's labels read in sentence case, as the approved design has
   them ("First Name *"). base.css uppercases `.mph-form-group label`, a rule
   written for an earlier revision of this form; the current design labels its
   fields with Tailwind classes and no transform. Scoped to the contact page so
   the call-back dialog, which does use the older styling, is untouched. */
.mph-contact .mph-form-group label,
.mph-contact .mph-form-legend {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   The BOOK AN APPOINTMENT arrow disappears on the two directory pages
   --------------------------------------------------------------------------

   `.subpage` - the design's legacy subpage reset - whitens the header CTA's
   text with:

       .subpage .btn-pill-navy span,
       .subpage #nav-cta-btn span { color: #ffffff !important; }

   The pill contains two spans: the label and `.icon-circle`, the white bubble
   holding the north-east arrow. The arrow is drawn with `currentColor`, so
   whitening every span paints a white arrow inside a white bubble and the
   badge reads as an empty circle. `.icon-circle` sets `color: #004e75
   !important` for exactly this reason, but `#nav-cta-btn span` carries an id
   and wins the cascade.

   No design page hits this: `.subpage` is only reached through the doctors and
   specialties directories, which the approved design does not include - its
   own subpages (contact.html and the rest) carry `mph-contact` and friends
   instead, so there the arrow stays navy. The two directories opt into
   `.subpage` because the approved stylesheet writes their rules inside it,
   which is what brings the two rules into contact for the first time.

   Restated at a specificity that wins, rather than by narrowing the design's
   rule to `span:not(.icon-circle)` - base.css is generated and would lose the
   edit on the next `npm run sync:design`.
   -------------------------------------------------------------------------- */
.subpage .btn-pill-navy .icon-circle,
.subpage #nav-cta-btn .icon-circle {
    color: #004e75 !important;
}

/* --------------------------------------------------------------------------
   A third list in the department page's list band
   --------------------------------------------------------------------------

   `.dept-duo-grid` is two columns, drawn for "Conditions Treated" and
   "Facilities & Equipment". Four of the client's department documents close
   with a "Why Choose Us" list, which the approved design has no band for, so
   it renders as a third panel here - the treatment the design already gives a
   titled list on this page.

   A third panel wraps to the second row and fills one column, leaving the
   other empty beside it, which reads as a panel that failed to load rather
   than as a closing list. Spanning the row makes it read as the band's last
   word, which is what it is.

   Only when there are exactly three, so a department with one list or two is
   laid out exactly as the design draws it.
   -------------------------------------------------------------------------- */
.dept-duo-grid > .dept-duo-panel:nth-child(3):last-child {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Arabic pages carrying untranslated English
   --------------------------------------------------------------------------

   Most of the Arabic site is still English fallback - the CMS holds Arabic for
   19 fields on About and nothing else - and English inside an RTL paragraph
   renders wrongly: ".More Than Two Decades" instead of "More Than Two Decades."

   Nothing is corrupt. `.` `,` `:` and `()` are bidi-*neutral*, so the Unicode
   Bidirectional Algorithm gives them the paragraph's direction rather than the
   direction of the words beside them. The paragraph is RTL (rtl.css sets
   `direction: rtl` on the body), so a sentence-final full stop is placed at the
   paragraph's trailing edge - which in RTL is the left. The Latin words still
   run left-to-right, which is why only the punctuation looks displaced.

   `unicode-bidi: plaintext` resolves each block's direction from its own first
   strong character instead: Arabic copy stays RTL exactly as now, and an
   untranslated English block renders LTR with its punctuation back where it
   belongs. `AssistantWidget` already does this per-element with `dir="auto"`;
   this is the same rule applied to the copy the CMS fills.

   Deliberately no `text-align` here. The body sets `text-align: right` and a
   great many headings are centred by the design; forcing `start` would drag
   every one of those to an edge. Direction is the bug, alignment is not.

   This is a safety net for partially-translated pages, not a substitute for
   the translations - see the Arabic content notes.
   -------------------------------------------------------------------------- */
html[dir="rtl"] {
    font-family: 'Araboto', 'Cairo', 'Tajawal', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif !important;
    line-height: 1.6;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .section-title,
html[dir="rtl"] .dr-h2,
html[dir="rtl"] .sidebar-title,
html[dir="rtl"] .doctor-name,
html[dir="rtl"] .mph-dr__name {
    font-family: 'Araboto', 'Cairo', 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
    letter-spacing: 0 !important;
}

html[dir="rtl"] p,
html[dir="rtl"] .section-desc {
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Doctor Card Primary Action Buttons — Force Crisp White Text
   -------------------------------------------------------------------------- */
.mph-dr__btn--primary,
a.mph-dr__btn--primary,
button.mph-dr__btn--primary,
.mph-dr__actions .mph-dr__btn--primary,
.mph-dr__actions a.mph-dr__btn--primary,
.doctor-btn-profile,
a.doctor-btn-profile,
button.doctor-btn-profile,
.doctor-card-actions .doctor-btn-profile,
.doctor-card-actions a.doctor-btn-profile {
    color: #ffffff !important;
    background: linear-gradient(135deg, #004e75 0%, #0b1e36 100%) !important;
    border-color: #004e75 !important;
}

.mph-dr__btn--primary *,
a.mph-dr__btn--primary *,
.doctor-btn-profile *,
a.doctor-btn-profile * {
    color: #ffffff !important;
}

.mph-dr__btn--primary:hover,
a.mph-dr__btn--primary:hover,
button.mph-dr__btn--primary:hover,
.mph-dr__actions .mph-dr__btn--primary:hover,
.mph-dr__actions a.mph-dr__btn--primary:hover,
.doctor-btn-profile:hover,
a.doctor-btn-profile:hover,
button.doctor-btn-profile:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1c97d4 0%, #004e75 100%) !important;
    border-color: #1c97d4 !important;
}

/* --------------------------------------------------------------------------
   Doctor Directory Grid
   -------------------------------------------------------------------------- */
.doctor-listing-grid {
    display: grid !important;
    gap: 28px !important;
    align-items: stretch !important;
}

/* --------------------------------------------------------------------------
   Departments Section Background Image
   -------------------------------------------------------------------------- */
.departments-section {
    background: linear-gradient(rgba(11, 30, 54, 0.55), rgba(11, 30, 54, 0.25)), url('/assets/images/4-department.jpeg') no-repeat center center / cover !important;
    background-attachment: scroll !important;
}


/* --------------------------------------------------------------------------
   The directory's consultant cards, matched to the home page's rail
   --------------------------------------------------------------------------

   Both pages render the same `DoctorCard` component, but the run of
   refinements that makes the home page's cards line up is scoped to
   `.doctors-track` / `.doctors-slides` - the carousel. The directory lays the
   same cards out in a grid, so it got none of it, and the difference was not
   subtle:

     * The photograph area was 350px against the rail's 452px, so the portrait
       was a cropped head rather than the head-and-shoulders the design draws.
     * The info panel is absolutely positioned against the bottom of the card,
       and nothing fixed its height. A name that wrapped to three lines - and
       at 272px wide, "Dr. Ahmad Mohammad Nasir Al Ani" does - grew the panel
       upward over the portrait. Measured across one row: panels of 266, 289,
       300 and 311px, each starting at a different height. That is what made
       the grid look ragged while the rail looked clean.

   The one thing not copied from the rail is the name treatment. There it is a
   single line with an ellipsis, which is fine for four hand-picked consultants
   with short names and wrong for a directory of sixty-odd where truncating
   would hide which Dr Al Wahaibi this is. Two lines are reserved instead, so
   the panels still align and the names still read.
   -------------------------------------------------------------------------- */

/* The specialty sidebar is gone, so the grid has the whole row.
   It listed about forty specialties for sixty-two consultants, most of them
   naming one person; the filter pills above the grid do the same job without
   spending a third of the page on it. */
.doctor-listing-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.doctor-listing-grid {
    /* Four across at full width, which is what the home page's rail shows.
       270 rather than 280: the row is 1192px and four 280s plus three 28px
       gaps is 1204, so 280 quietly fell back to three columns of 379px - wider
       than the card was drawn for. At 270 it fits four at ~277px, within a
       hair of the rail's 297. */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
}

.doctor-listing-grid .doctor-card {
    /* The home page's rail exactly, plus the one extra name line this page
       reserves - 552 + 23. */
    min-height: 575px !important;
}

.doctor-listing-grid .doctor-img-wrapper {
    height: 452px !important;
}

.doctor-listing-grid .doctor-info-box {
    /* The rail's 200px, plus the one extra name line. */
    min-height: 223px !important;
    justify-content: flex-start !important;
}

/* Two lines reserved for the name, whether or not it needs them.
   Two rather than the rail's one: the longest names the hospital has -
   "Dr. Ali Abdulmunaem Ajel Alsabbagh", "Dr. Ahmad Mohammad Nasir Al Ani" -
   take two lines at this width, and a directory that truncates the thing you
   came to read is worse than one with a little space under the short names.
   It was three while the sidebar squeezed the cards to 272px; at 379px that
   third line was 23px of empty space on every card. */
.doctor-listing-grid .doctor-name {
    min-height: 46px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Designation and specialty always occupy three lines, and never more.
   "Senior Consultant / General, Laparoscopic and Bariatric Surgery" needs all
   three in this column; without the clamp a fourth line pushed the panel up
   again and put the row back out of line. */
.doctor-listing-grid .doctor-spec {
    min-height: 57px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* One chip row, as on the home page's rail.
   Seventeen of the twenty-four cards fit both chips on one row at this width;
   on the other seven the second chip wraps and is hidden whole. That is the
   point of wrapping rather than `nowrap`: `nowrap` with `overflow: hidden`
   slices a chip down the middle, and an earlier attempt at ellipsis gave
   "Osteoporo…", which tells a patient nothing. A chip either reads or it is
   not there. */
.doctor-listing-grid .doctor-tags {
    flex-wrap: wrap;
    overflow: hidden;
    min-height: 25px;
    max-height: 25px;
    align-items: flex-start;
}

.doctor-listing-grid .doctor-tag {
    font-size: 10px;
    padding: 3.5px 9px;
}

/* Buttons pinned to the bottom of the panel on every card. */
.doctor-listing-grid .doctor-card-actions {
    margin-top: auto !important;
}

@media (max-width: 640px) {
    .doctor-listing-grid .doctor-img-wrapper {
        height: 356px !important;
    }

    .doctor-listing-grid .doctor-card {
        min-height: 479px !important;
    }

    .doctor-listing-grid .doctor-info-box {
        min-height: 213px !important;
    }
}


/* --------------------------------------------------------------------------
   The Specialties mega menu wraps its card text
   --------------------------------------------------------------------------

   `a.megamenu-card` inherits `white-space: nowrap` from the navigation's link
   styling - sensible for a menu item that must stay on one line, wrong for a
   card with a sentence in it. The card's description was laid out as a single
   17px line inside a 129px card and simply ran out sideways, over the card next
   to it, so the panel read as two overlapping paragraphs.

   It never showed while the panel was empty, and the approved design's own
   descriptions are short enough to fit on one line at the widths it was drawn
   at, which is why it arrived with the copy rather than with the markup.
   -------------------------------------------------------------------------- */
.megamenu-card,
.megamenu-card .card-desc,
.megamenu-card .card-title-wrap h4,
.megamenu-card .card-tags span {
    white-space: normal;
}

/*
 * Accreditations rail - one height for every year card.
 *
 * Each award is its own three-row grid (badge, node on the rail, card) and the
 * card row is `auto` with `align-self: start`, so a card is exactly as tall as
 * its text. JCI carries four years where the others carry one, "2012, 2018,
 * 2021, 2023" wraps onto a second line, and its card hangs below the row of
 * three beside it.
 *
 * The items already stretch to the tallest of them, so the fix is to let the
 * card have that height instead of leaving it at the top: the card row takes
 * what is left over, and the card fills it with its content centred, so a one
 * line card and a two line card end up the same size.
 */
.awards-timeline .award-item {
  grid-template-rows: var(--award-badge-size) var(--award-node-row) 1fr;
}

.awards-timeline .award-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*
 * Below 900px the dot on the line is hidden, so the three rows above put the
 * card in the dot's 54px row - squashed, the year on its top edge (2026-10-04).
 * There each award is two rows: badge, then card.
 */
@media (max-width: 900px) {
  .awards-timeline .award-item {
    grid-template-rows: auto auto;
  }
}

/*
 * Accreditation badges - smaller.
 *
 * The rail sizes them from one variable, `--award-badge-size`, at 186px. Four
 * of those fill most of the band's width and leave the logo inside each circle
 * bigger than the hospital's own logo in the header, which reads as shouting
 * rather than as a quiet row of credentials.
 *
 * Changing the variable is enough: the rail's hairline is positioned off it
 * (`top: calc(var(--award-badge-size) + …)`) and so is each item's first grid
 * row, so the nodes and the year cards follow the badges down without any
 * other rule needing to know.
 */
.awards-section {
  --award-badge-size: 132px;
}

@media (max-width: 900px) {
  .awards-section {
    --award-badge-size: 112px;
  }
}

/*
 * Room between "View all insurance partners" and the logo strip.
 *
 * The button's own `margin-top` separates it from the heading above, and
 * nothing separated it from the strip below - so the two sat almost touching
 * while the heading had room to breathe.
 */
.insurance-partners-cta {
  margin-bottom: 26px;
}

/*
 * Department card headings - break where the name does.
 *
 * "Cardiology & Heart Care" wrapped as "CARDIOLOGY & HEART / CARE", splitting
 * "Heart Care" down the middle and leaving one word on the second line, while
 * "Obstetrics & Gynaecology" beside it broke cleanly at its "&".
 *
 * `balance` asks the browser to even the lines out rather than filling the
 * first one and letting the remainder fall over, which puts the break at the
 * "&" on every card in the rail. `pretty` is the fallback for browsers that
 * have it but not `balance`; both degrade to ordinary wrapping.
 */
.dept-card .dept-name {
  text-wrap: pretty;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The values grid's text runs into the rules between its columns
   --------------------------------------------------------------------------

   "Three Words We Are Measured Against" is a three-column grid with a hairline
   between the columns, and the design pads each cell on one side only:

       .ab-value { padding: 2.5rem clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
                   border-right: 1px solid var(--ab-rule-soft); }

   That keeps the *first* column's text away from the rule it draws on its own
   right edge, and leaves every column after it starting hard against the rule
   the column before drew - "Respect and Compassion" and "Customer Driven" both
   touch the line to their left. A gutter is two-sided or it is not a gutter.

   Two more consequences of padding by position rather than by column: only
   `:last-child` drops its right border, so the third cell of a row that is not
   the last row draws a rule down the outside of the grid; and the fourth item
   starts a new row in column one, where it should be flush left and is not.
   Both are fixed by keying off the column - `3n+1` is column one, `3n` is
   column three - rather than off the position in the list.
   -------------------------------------------------------------------------- */

:where(.mph-page-about) .ab-value {
    padding-block: 2.5rem 0;
    padding-inline: clamp(1.25rem, 2.5vw, 2.25rem);
    /* Logical, so the Arabic grid mirrors with it. */
    border-right: 0;
    border-inline-end: 1px solid var(--ab-rule-soft);
}

/* Column one sits on the container's edge; it needs no gutter outside it. */
:where(.mph-page-about) .ab-value:nth-child(3n + 1) {
    padding-inline-start: 0;
}

/* Column three likewise, and it draws no rule down the outside of the grid. */
:where(.mph-page-about) .ab-value:nth-child(3n) {
    padding-inline-end: 0;
    border-inline-end: 0;
}

/* Stacked, there are no columns to divide - so no side padding either, and
   the single-column rules the design already writes take over. */
@media (max-width: 860px) {
    :where(.mph-page-about) .ab-value,
    :where(.mph-page-about) .ab-value:nth-child(3n + 1),
    :where(.mph-page-about) .ab-value:nth-child(3n) {
        padding-inline: 0;
        border-inline-end: 0;
    }
}

/*
 * Hero figures - one height for all of them.
 *
 * The column is a flex stack, so each box is exactly as tall as its own text.
 * On Paediatrics the middle figure reads "Level 3" with "NICU" raised after it,
 * which is far wider than "24/7" or "15+" beside it; the wide number squeezed
 * the text column, the heading wrapped onto two lines and the description onto
 * five, and that one box stood a third taller than the two around it.
 *
 * A grid with `1fr` rows makes every box the height of the tallest, which is
 * what the eye expects of a stack of cards. The gap carries over from the flex
 * rule underneath, so nothing else changes.
 */
.hero-trust {
  /*
   * `!important` because the department pages' own sheet carries
   * `:where(.mph-page-obgyn) .hero-trust { display: flex !important }`, which
   * no amount of ordinary specificity beats. site-fixes.css is loaded last
   * precisely so a matching `!important` here settles it.
   */
  display: grid !important;
  grid-auto-rows: 1fr;
  align-content: center;
}

/*
 * And stop a long value from starving the words beside it.
 *
 * `.trust-num` is 3.5rem with no upper bound, so "Level 3" took nearly half the
 * box. Capping the column and letting the type shrink to fit keeps the number
 * the loudest thing in the box without leaving the description in a gutter.
 */
.hero-trust .trust-num {
  max-width: 48%;
  font-size: clamp(1.9rem, 2.6vw, 3.5rem);
  white-space: nowrap;
}

.hero-trust .trust-content {
  min-width: 0;
}

/*
 * The figure's value, at a size that fits it.
 *
 * `.trust-num` is 3.5rem, which is right for "24/7" and "15+" and wrong for
 * everything longer. Contact's figures carry a telephone number and an email
 * address, and Paediatrics carries "Level 3" with "NICU" raised after it; at
 * full size the email left the box entirely and the raised text landed on the
 * heading next to it.
 *
 * `HeroBanner` measures the value and asks for one of three steps.
 */
.hero-trust .trust-num[data-size='lg'] {
  font-size: clamp(2rem, 2.6vw, 3.5rem);
  white-space: nowrap;
}

.hero-trust .trust-num[data-size='md'] {
  font-size: clamp(1.25rem, 1.7vw, 1.9rem);
  line-height: 1.2;
  /* Wrapping, not nowrap: "Level 3" with "NICU" raised after it is eleven
     characters and still ran past the edge of the box when held on one line. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.hero-trust .trust-num[data-size='sm'] {
  font-size: clamp(0.95rem, 1.15vw, 1.2rem);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

/* A raised suffix should not out-shout, or overlap, the value it follows. */
.hero-trust .trust-num sup {
  font-size: 0.45em;
  margin-inline-start: 2px;
  vertical-align: super;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   The key figures band holds eight figures, not six
   --------------------------------------------------------------------------

   The design drew `.new-about-stats` as one row of six. The hospital's own
   "MPH by the numbers" - what Home Page → Key figures transcribes - has eight,
   and eight in a six-column grid is a full row and two orphans. With seven or
   more tiles the band becomes two rows of four; at six or fewer the design's
   own row stands. The phone layout (three columns, below 992px) is unchanged.
   -------------------------------------------------------------------------- */

@media (min-width: 993px) {
    .new-about-stats:has(> :nth-child(7)) {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 40px;
    }
}

/*
 * White text on the red emergency cards.
 *
 * `base.css` carries `.mph-contact section p { color: #000 }` - the contact
 * page's body copy in the site's own colour rather than Tailwind's greys. It is
 * unscoped, so it also painted the paragraphs inside the red emergency card and
 * the red band black on red: "Immediate medical assistance" sat under a white
 * heading in black type.
 *
 * The markup already asks for white (`text-white/90`), but Tailwind's utilities
 * are emitted inside `:where(...)`, which carries no specificity at all, so a
 * two-class selector beats them every time. This restores what the markup
 * asked for, at a weight that holds.
 */
.mph-contact section .bg-brand-red p,
.mph-contact .bg-brand-red p {
  color: rgba(255, 255, 255, 0.9);
}

.mph-contact section .bg-brand-red h2,
.mph-contact section .bg-brand-red h3,
.mph-contact .bg-brand-red h3 {
  color: #ffffff;
}

/*
 * Approximate driving times - two larger tiles per row.
 *
 * Four across in a half-width panel left each tile about 110px wide, so the
 * number was small and the place under it ("Muscat Airport") wrapped onto two
 * lines. Two across gives each one room to be read at a glance, which is the
 * only reason the panel exists.
 */
.mph-drive-times > div {
  padding-block: 1.6rem;
}

.mph-drive-times .block:first-child {
  font-size: 2rem;
  line-height: 1.1;
}

.mph-drive-times .block:last-child {
  font-size: 13px;
  margin-top: 0.4rem;
}

/*
 * The enquiry form's send button.
 *
 * `.mph-form-foot` is a flex row built for a paragraph of small print beside
 * the button, and with that line removed the button was left stretched and its
 * label wrapping onto two lines. It sizes to its own content now, and sits
 * where the paragraph used to leave it - at the end of the row.
 */
.mph-form-foot {
  justify-content: flex-end;
}

.mph-form-foot .btn-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

/*
 * The "plan your visit" card beside the map.
 *
 * Its own rules in `base.css` set white text on the dark gradient, but the
 * contact page's blanket body rules - `.mph-contact section p { color: #000 }`
 * and the matching heading rule - are more specific and won: the heading came
 * out brand navy on near-black and the address below it black on near-black.
 * Nearly the whole card was unreadable.
 *
 * Everything inside it inherits the card's own white again.
 */
.mph-contact section .mph-visit-card h3,
.mph-contact section .mph-visit-card h4 {
  /* `!important` to match `.mph-contact section h3 { color: var(--heading-color)
     !important }` in base.css, which no ordinary specificity beats. */
  color: #ffffff !important;
}

.mph-contact section .mph-visit-card p,
.mph-contact section .mph-visit-card li,
.mph-contact section .mph-visit-card address,
.mph-contact section .mph-visit-card span:not(.mph-visit-eyebrow) {
  color: rgba(255, 255, 255, 0.88);
}

/* The little all-caps labels stay the accent the card was drawn with. */
.mph-contact section .mph-visit-card .mph-visit-eyebrow {
  color: var(--card-link-color-on-dark, #6fc4f0);
}

/*
 * Map and card, the same width.
 *
 * The design gives the map the larger share (1.35fr to 0.65fr), which left the
 * card narrow enough that every line of the address wrapped.
 */
.mph-location-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .mph-location-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * The telephone number on the Contact page's closing card.
 *
 * Contact ends on the same card as About now, and the number is the one thing
 * it carries that About's does not, so it needs a size of its own rather than
 * reading as another line of body copy.
 */
.ab-cta-phone {
  display: inline-block;
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 0.2rem;
}

.ab-cta-phone:hover,
.ab-cta-phone:focus-visible {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/*
 * The shared hero and closing card, on pages that are not About or a department.
 *
 * `HeroBanner` and `ClosingCta` are used by About, Contact, the departments and
 * the doctor profiles, but two of the classes they rely on were only ever
 * styled inside a page scope: `.ab-wrap` under `:where(.mph-page-about)` and
 * `.dr-hero-cta` under `:where(.mph-page-obgyn)` and `:where(.mph-page-doctor)`.
 *
 * On Contact that meant the closing card stretched from edge to edge while
 * About's sat in the 1260px content column, and the hero's two buttons had no
 * flex row and so no gap - they sat against each other with only the whitespace
 * between the tags holding them apart.
 *
 * These are the same declarations the scoped copies make, without the scope, so
 * a component works wherever it is used. A page that scopes its own still wins.
 */
.ab-wrap {
  width: min(1260px, 92%);
  margin-inline: auto;
  padding-inline: 0;
}

.dr-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2rem;
}

/*
 * Hero figures: one width, one left edge, no drift.
 *
 * `base.css` staggers the three boxes - `margin-left: -35px`, `35px`, `-10px` -
 * and floats each one on its own six-second animation. That is a decorative
 * effect from the original home page mockup, where the boxes sat over open
 * photograph; the home page does not render them at all any more, and on a
 * real banner it just makes three cards of different widths whose edges never
 * line up, drifting as you read them.
 *
 * The department pages already turned it off in their own sheet. This does the
 * same wherever the shared banner is used, which is the remaining three.
 *
 * With the margins gone the boxes stretch to the grid column, so they end up
 * the same width as each other without one being named - `width: auto` undoes
 * the fixed 350px the department sheet sets for the same reason.
 */
.hero-trust .trust-box {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  animation: none !important;
}

/* The hover lift stays - that one responds to the reader. */

/*
 * The outline button, on a banner.
 *
 * `.dr-btn-ghost` is navy type inside a navy hairline - right on a white
 * section, unreadable on a photograph. The design already knew this and wrote
 * `.hero--contact .dr-hero-cta .dr-btn-ghost` to turn it into a white pill, but
 * that fix named one page, so the About banner - which now uses the same shared
 * hero - had "Book an appointment" in dark navy on a dark picture.
 *
 * The same treatment for any banner, since every `.hero` has a dark scrim over
 * a photograph. The declarations are the ones the contact rule already makes.
 */
.hero .dr-hero-cta .dr-btn-ghost {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: var(--heading-color) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hero .dr-hero-cta .dr-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #ffffff !important;
  color: #00395a !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
}

/*
 * The solid button, on the department banner.
 *
 * `.dr-btn-light` in base.css is navy type on a transparent fill inside a navy
 * hairline - an outline button drawn for a white section. On a photograph it is
 * navy on navy, and "Call now" all but disappeared into the picture.
 *
 * The design already answers this with `.dr-hero-cta .dr-btn-light`, a navy
 * gradient pill with white type. That rule names the wrapper the shared hero
 * uses; the department banner has a wrapper of its own, so the button fell
 * through to the outline. These are the declarations that rule makes.
 */
.mph-sp-hero-new__actions .dr-btn-light {
  background: linear-gradient(135deg, rgba(7, 23, 44, 0.95), rgba(0, 78, 117, 0.95)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 28px rgba(7, 23, 44, 0.32);
}

.mph-sp-hero-new__actions .dr-btn-light:hover {
  background: linear-gradient(135deg, rgba(7, 23, 44, 1), rgba(0, 78, 117, 1)) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 36px rgba(7, 23, 44, 0.4);
}

/*
 * The banner's scrim, in one place so it can be flipped.
 *
 * `.hero` in base.css puts a navy gradient over the photograph, running dark
 * on the left to nearly clear on the right - which is where the headline is,
 * in English. `HeroBanner` has to set the photograph inline (the stylesheet
 * hard-codes one), and setting `background-image` replaces the whole list, so
 * it names this property rather than repeating the gradient.
 *
 * Arabic reads the other way, and the headline was landing on the pale end.
 */
:root {
  --hero-scrim: transparent;
}

html[dir='rtl'] {
  --hero-scrim: transparent;
}

/* Ensure no hero section has extra background color or overlay scrim */
.hero::before,
.search-hero-section::before,
.mph-sp-hero::before,
.mph-sp-hero-new::before,
.mph-dr-hero::before,
.dr-hero::before,
.aw-hero::before,
.ab-hero::before {
  background: none !important;
  display: none !important;
}

/* Fix skip-links in RTL pushing document width by 9999px */
.dr-skip,
:where(.mph-page-doctor) .dr-skip,
.ab-skip,
:where(.mph-page-about) .ab-skip {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  left: auto;
  right: auto;
  transform: translateY(-250%);
}

.dr-skip:focus,
:where(.mph-page-doctor) .dr-skip:focus,
.ab-skip:focus,
:where(.mph-page-about) .ab-skip:focus {
  transform: none;
}

/* Doctor Profile: Qualification tabs & Expertise tabs inside Hero */
:where(.mph-page-doctor) .dr-hero .dr-postnom {
  margin-top: 1.25rem;
  gap: 8px;
}

:where(.mph-page-doctor) .dr-hero .dr-tags {
  margin-top: 0.85rem;
  gap: 8px;
}

:where(.mph-page-doctor) .dr-hero .dr-tags li {
  background: rgba(255, 255, 255, 0.94);
  color: #004e75;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

:where(.mph-page-doctor) .dr-hero .dr-tags li:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

/* Doctor Profile: Nationality Flag */
:where(.mph-page-doctor) .dr-facts .dr-flag {
  font-size: 2.2rem;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}


/* ─── Specialties mega menu: white icons ───────────────────────────────────
   The design tints each card's icon to match its box (pink, purple, blue...).
   The client asked for white icons; the tinted boxes behind them stay. */
.megamenu-card .card-icon-box,
.megamenu-card .card-icon-box svg,
.megamenu-card .card-icon-box i {
  color: #ffffff;
}

/* ─── Call-back dialog: the "Reason to Call Back" list and the doctor ──────
   The design's dialog only has text inputs; the list and the read-only
   doctor field are drawn to match them. */
.dr-input-box select {
  width: 100%;
  padding: 13px 40px 13px 42px;
  border-radius: 12px;
  border: 1px solid var(--dr-rule-soft, #e2e8f0);
  background: var(--dr-card, #ffffff);
  font-family: var(--dr-text, inherit);
  font-size: 14.5px;
  color: var(--dr-navy, #004e75);
  outline: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: all 0.25s ease;
}

.dr-input-box select:focus {
  border-color: var(--dr-cyan, #1c97d4);
  box-shadow: 0 0 0 3px rgba(28, 151, 212, 0.18);
}

.dr-input-box select:invalid,
.dr-input-box select option[value=''] {
  color: #94a3b8;
}

[dir='rtl'] .dr-input-box select {
  padding: 13px 42px 13px 40px;
  background-position: 15px 50%, 20px 50%;
}

.dr-input-box input[readonly] {
  background: #f1f5f9;
  cursor: default;
}

/* ─── Department page: booking box, clinic hours, worry cards ────────────── */

/* The booking box heading inherited the body's loose line height, so a
   two-line heading ("Connect with Our Obstetrics & Gynaecology Team") sat
   further apart than every other card heading on the page. */
.book-box-hdr h3 {
  line-height: 1.3;
}

/* "Clinic hours": larger than the 11px eyebrow, and both the day and the
   time bold, at the client's request. */
.book-box-body > p:first-child {
  font-size: 13px;
}

.avail-row .ar-day,
.avail-row .ar-time,
.avail-row .ar-time.na {
  font-weight: 700;
}

/* Worry cards on the pink (Women's Health) band: the pink theme coloured the
   question and the proof line #E0529C, pink on pink. White, like the answer. */
body.theme-pink .trust-trinity .trinity-objection {
  color: #ffffff !important;
}

body.theme-pink .trust-trinity .trinity-proof {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ─── Hero headings: weight 700 on every page (client's request) ────────── */
.mph-dr-hero__title,
h1.hero-title,
.search-hero-section h1,
h1.dr-name {
  font-weight: 700 !important;
}

/* ─── Department sidebar: "Location & getting here" ───────────────────────
   Filled with the page's theme gradient - pink on the Women's Health theme,
   blue everywhere else - with white text and icons. The pink theme and the
   directions link's inline colour use !important, so these selectors are
   more specific. */
.sticky-sidebar .info-card {
  background: linear-gradient(135deg, #004e75 0%, #1c97d4 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 30px rgba(0, 78, 117, 0.22);
}

body.theme-pink .sticky-sidebar .info-card {
  background: linear-gradient(135deg, #e0529c 0%, #d95c96 100%) !important;
  box-shadow: 0 12px 30px rgba(224, 82, 156, 0.25);
}

.sticky-sidebar .info-card .ic-title {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.28) !important;
}

.sticky-sidebar .info-card .ic-row,
.sticky-sidebar .info-card .ic-row .ic-i,
.sticky-sidebar .info-card .ic-row .ic-i i,
.sticky-sidebar .info-card .ic-row a {
  color: #ffffff !important;
}

.sticky-sidebar .info-card .ic-row a {
  opacity: 0.9;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Department sidebar: "All insurance partners" as a button ─────────── */
body .sticky-sidebar .gold-card a.ins-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #004e75 0%, #1c97d4 100%);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 78, 117, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.theme-pink .sticky-sidebar .gold-card a.ins-all-btn {
  background: linear-gradient(135deg, #e0529c 0%, #d95c96 100%);
  box-shadow: 0 8px 20px rgba(224, 82, 156, 0.25);
}

body .sticky-sidebar .gold-card a.ins-all-btn:hover,
body .sticky-sidebar .gold-card a.ins-all-btn:focus-visible {
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Doctor profile: the FAQ band started right under the education list with
   no space above it (the design gives .faq-section only a bottom margin). */
.mph-page-doctor .faq-section {
  padding-top: clamp(3rem, 6vw, 5rem);
}

/* ─── Doctor directory cards: the photo reaches the card's bottom edge ─────
   The image rendered at its HTML height (200px) inside a column that
   stretches with the card, so a card with a longer name or role left a white
   strip under the photo. Pinned to the column on all four sides. */
.mph-dr-card .mph-dr-card__portrait > .mph-dr-card__portrait-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
}

/* ─── Department "steps" row: the connecting line ─────────────────────────
   Drawn at 41px, but each step has 1rem of padding above its 82px circle, so
   the line ran through the circles' upper third. Centred on them; pink on the
   Women's Health theme. */
.journey-steps::after {
  top: calc(1rem + 41px);
  transform: translateY(-50%);
}

/* Pink theme drawn like the blue one: a light hairline that runs between the
   circles and stops at each one. The pink circles were see-through (12% pink,
   no ring), so the line showed through them; they get a solid light-pink fill
   and the same page-coloured ring the blue theme's circles have. */
body.theme-pink .journey-steps::after {
  height: 1.5px;
  background: rgba(224, 82, 156, 0.28);
}

body.theme-pink .journey-step .js-circle {
  background: #fdeef5 !important;
  box-shadow: 0 0 0 8px var(--warm-white), 0 4px 12px rgba(241, 116, 173, 0.15) !important;
}

/* ─── Worry cards on every theme: question and proof line white ──────────
   Extends the pink-theme rule above to the navy band the other departments
   use, where the question was cyan and the proof line 45% white. */
.trust-trinity .trinity-objection {
  color: #ffffff !important;
}

.trust-trinity .trinity-proof {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Doctor profile: Conditions treated and Procedures & services side by side. */
.mph-page-doctor .dr-list-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.mph-page-doctor .dr-list-pair--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Half-width columns: one card per row inside each. */
.mph-page-doctor .dr-list-pair:not(.dr-list-pair--single) .dr-expertise {
  grid-template-columns: minmax(0, 1fr);
}

.mph-page-doctor .dr-list-col {
  scroll-margin-top: 140px;
}

@media (max-width: 900px) {
  .mph-page-doctor .dr-list-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Doctor profile: sticky header like every other page ───────────────
   The profile used to opt out of the sticky header, so its section strip
   stuck to the very top. Now the header sticks too; the strip and the booking
   box sit under it (--mph-stuck-header is set by useStickyHeader), and the
   header stays above the strip so its menus open over it. */
.mph-page-doctor .main-header {
  z-index: 1000;
}

.mph-page-doctor .dr-nav {
  top: var(--mph-stuck-header, 0px);
  transition: top 0.2s ease;
}

.mph-page-doctor .dr-rail {
  top: calc(var(--mph-stuck-header, 0px) + 90px);
}

.mph-page-doctor .dr-band,
.mph-page-doctor .dr-list-col {
  scroll-margin-top: calc(var(--mph-stuck-header, 0px) + 70px);
}

/* ─── Doctor profile: "A Message from Dr X" ─────────────────────────────
   The doctor's own words as a quote, after the biography. The design has
   no quote block, so it is drawn here from the profile's own tokens: a pale
   card with a cyan rule on the leading edge and the quote mark above the
   heading. `border-inline-start` so the rule flips to the right in Arabic. */
.mph-page-doctor .dr-message {
  padding-top: 0;
}

.mph-page-doctor .dr-message-card {
  position: relative;
  margin: 0;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.25rem);
  background: var(--dr-card);
  border-inline-start: 4px solid var(--dr-cyan);
  border-radius: 18px;
}

.mph-page-doctor .dr-message-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #fff;
  color: var(--dr-cyan);
  font-size: 1.1rem;
  box-shadow: 0 6px 16px rgba(0, 78, 117, 0.1);
}

.mph-page-doctor .dr-message-title {
  margin: 0 0 1.25rem;
  font-family: var(--dr-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dr-navy);
}

.mph-page-doctor .dr-message-quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.mph-page-doctor .dr-message-quote p {
  margin: 0 0 1rem;
  font-family: var(--dr-text);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-style: italic;
  line-height: 1.75;
  color: var(--dr-ink);
}

.mph-page-doctor .dr-message-quote p:last-child {
  margin-bottom: 0;
}

/* Arabic has no italic; the slant only distorts the letterforms. */
html[dir="rtl"] .mph-page-doctor .dr-message-quote p {
  font-style: normal;
}

/* ─── Doctor profile: career dates stay in their column ────────────────
   The design sets the date on one line (`white-space: nowrap`) in a fixed
   140px column, so a longer period - "November 2007–present", or a date
   range in Arabic - ran across the timeline and under the card beside it.
   It wraps inside its own column instead. */
.mph-page-doctor #experience .dr-yr {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* ─── Doctor profile: emergency row in the consultation hours ─────────
   The emergency department's line is marked out from the clinic hours: a
   siren before the label and its hours in red. */
.mph-page-doctor .dr-line--emergency span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.mph-page-doctor .dr-line--emergency .ph-siren {
  color: #dc2626;
  font-size: 1.05rem;
}

.mph-page-doctor .dr-line--emergency b {
  color: #dc2626;
}

/* ─── Doctor profile: booking card buttons in capitals ────────────────
   The hospital's wording sets them as CALL FOR APPOINTMENT, BOOK ON
   WHATSAPP, REQUEST A CALL BACK. Upper-cased here, so the fields in
   wp-admin can be typed normally; Arabic has no capitals and is unchanged. */
.mph-page-doctor .dr-booking .dr-book-btn {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* In capitals "CALL FOR APPOINTMENT" broke onto two lines in the rail. */
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ─── Doctor profile: closing band buttons in capitals ────────────────
   Like the header's BOOK AN APPOINTMENT. Scoped to the doctor profile: the
   same buttons close other pages, which keep their own casing. */
.mph-page-doctor .ab-cta-btn {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ─── Doctor profile: even gaps between the booking buttons ───────────
   The design spaces "the first button after the hours" with
   `.dr-line ~ .dr-book-btn:first-of-type`. `:first-of-type` counts by
   element, and Request a Call Back is the card's only <button> - so it got
   the 1.6rem gap too, and sat further from WhatsApp than WhatsApp from Call.
   Same 14px as the others. */
.mph-page-doctor .dr-booking .dr-book-btn.dr-book-callback {
  margin-top: 14px;
}

/* The closing band's buttons, on every page that has one: 12px, as asked. */
.ab-cta-btn {
  font-size: 12px;
}

/* ─── Emergency row in every hours list ──────────────────────────────
   As on the doctor profile: the emergency department's line gets a siren
   and red hours - in a department's booking box and the Plan Your Visit
   hours panel too. */
.avail-row--emergency .ar-day,
.ge-hours-row--emergency dt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.avail-row--emergency .ph-siren,
.ge-hours-row--emergency .ph-siren {
  color: #dc2626;
  font-size: 1.05rem;
}

.avail-row--emergency .ar-time,
.ge-hours-row--emergency dd {
  color: #dc2626 !important;
}

/* The emergency row's label in red too, each word capitalised -
   "Emergency Department" - whichever list it sits in. */
.mph-page-doctor .dr-line--emergency span,
.avail-row--emergency .ar-day,
.ge-hours-row--emergency dt {
  color: #dc2626 !important;
  text-transform: capitalize;
}

/* ─── Buttons in capitals, 2026-09-28 ──────────────────────────────────
   The closing band's buttons and the banner buttons, on every page: BOOK AN
   APPOINTMENT, GET DIRECTIONS, BOOK ON WHATSAPP. The wp-admin text is typed
   normally. */
.ab-cta-btn,
.mph-dr-hero .dr-btn {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* The closing band's WhatsApp button is WhatsApp green wherever it appears. */
.ab-cta-btn--wa,
.ab-cta-btn--wa:hover {
  border-color: #25d366 !important;
  background: #25d366 !important;
  color: #fff !important;
}

/* Home "Also Available" chips carry their specialty's icon. */
.dept-tag-pill--icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dept-tag-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
  color: var(--brand-primary, #004e75);
  font-size: 15px;
}

/* Doctor names in the carousels wrap onto a second line instead of being cut
   off ("Dr. Alaa Mohammad Ah…"). */
.doctors-track .doctor-name,
.doctors-slides .doctor-name {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.25;
}

/*
 * The second hero button on the general pages (About, Contact, Patient Care
 * and the rest) is an outline: no fill, a white hairline, white type
 * (2026-09-30). It wins over the WhatsApp green set inline and over the
 * white pill above. The department banners keep their own buttons.
 */
.mph-dr-hero:not(.mph-dr-hero--department) .dr-hero-cta > .dr-btn:nth-child(2):not(.dr-btn-wa) {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.mph-dr-hero:not(.mph-dr-hero--department) .dr-hero-cta > .dr-btn:nth-child(2):not(.dr-btn-wa):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.mph-dr-hero:not(.mph-dr-hero--department) .dr-hero-cta > .dr-btn:nth-child(2):not(.dr-btn-wa)::after {
  background: #ffffff !important;
  color: var(--heading-color) !important;
}

/*
 * The general pages' type follows the home page and the doctor profile
 * (2026-09-30): section headings 45px navy, paragraphs 17px, list items and
 * card text 16px, card titles 18px navy. The colours are black (the grey came
 * from the guide sheets' text variables, now black too).
 */
.mph-page-guide .guide-body .cg-chapter-head--centred h2 {
  font-size: clamp(1.9rem, 3.2vw, 45px) !important;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #004e75;
}

.mph-page-guide .guide-body .cg-chapter-title h2,
.mph-page-guide .guide-body :is(.cg-chapter, .cg-highlight) h3 {
  color: #004e75;
}

.mph-page-guide .guide-body :is(.cg-chapter, .cg-highlight) h3 {
  font-size: 18px;
}

.mph-page-guide .guide-body :is(.cg-chapter-intro, .cg-lede) {
  font-size: 17px;
}

.mph-page-guide .guide-body :is(.cg-chapter, .cg-highlight, .guide-clause) p:not(.cg-note):not(.cg-subhead):not(.cg-lead-line):not(.cg-chapter-intro):not(.cg-lede) {
  font-size: 16px;
}

.mph-page-guide .guide-body :is(.cg-ticks, .cg-icon-rows, .cg-timeline, .cg-steps, .guide-clause) li {
  font-size: 16px;
}

/*
 * The Patient Care pages on the department and doctor pages' type scale
 * (2026-10-04). Measured from /specialties/cardiology and a doctor profile:
 *   bare section heading 45px / 700 navy; a card's heading 36.8px / 700;
 *   small labels 11px / 700 #1c97d4 capitals; card titles 18px / 700 navy;
 *   lead text 17px black; body text, lists and notes 15px black;
 *   buttons 14px / 600.
 * Titles that were the darker #0b2f5b are the theme navy #004e75.
 */
.lay-cardguide .guide-body .cg-chapter--bare h2 {
  font-size: clamp(2rem, 4vw, 45px) !important;
  line-height: 1.2 !important;
}

.lay-cardguide .guide-body :is(.cg-chapter--card, .cg-rcard) h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
  line-height: 1.2 !important;
}

.lay-cardguide .guide-body .cg-chapter--stepcard h2 {
  font-size: 18px !important;
}

.lay-cardguide .guide-body :is(.cg-eyebrow, .cg-highlight-badge, .guide-eyebrow, .ge-fact-label),
.lay-cardguide .guide-essentials > h2 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #1c97d4 !important;
}

.lay-cardguide .guide-body :is(h3, .ge-panel h3, .guide-sb-title) {
  font-size: 18px !important;
  font-weight: 700 !important;
}

.lay-cardguide .guide-body .ge-panel--hours h3 {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.lay-cardguide .guide-body :is(.cg-chapter-intro, .cg-lede, .cg-rcard-lede) {
  font-size: 17px !important;
}

.lay-cardguide .guide-body :is(.cg-chapter, .cg-highlight, .cg-rcard, .ge-panel, .guide-sb-card)
  :is(p:not(.cg-chapter-intro):not(.cg-lede):not(.cg-rcard-lede), li, dt, dd, label, .cg-step-text, .cg-note span, .cg-subhead) {
  font-size: 15px !important;
}

.lay-cardguide .guide-body .cg-bar-list a {
  font-size: 15px !important;
}

.lay-cardguide .guide-body :is(.ge-fact-note, small) {
  font-size: 13px !important;
}

.lay-cardguide .guide-body :is(.cg-btn, .cg-form-tab, .ge-link) {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.lay-cardguide .guide-body .cg-tile b {
  font-size: 18px !important;
}

/* Colours: theme navy for titles, black for text (light text on the dark
   and red cards is left as it is). */
.lay-cardguide .guide-body :is(.cg-chapter, .cg-highlight, .cg-rcard, .ge-panel):not(.cg-chapter--dark):not(.cg-rcard--dark):not(.cg-chapter--alertrow):not(.cg-chapter--documents)
  :is(h2, h3, .cg-subhead, .cg-lead-line, .ge-fact-value) {
  color: #004e75 !important;
}

/* The amenity tiles' labels: navy, except on Plan Your Visit, whose tiles are
   solid navy with white labels. */
.lay-cardguide:not(.guide-plan-your-visit) .guide-body .cg-amenities li {
  color: #004e75 !important;
}

.lay-cardguide .guide-body :is(.cg-chapter, .cg-highlight, .cg-rcard, .ge-panel):not(.cg-chapter--dark):not(.cg-rcard--dark):not(.cg-chapter--alertrow):not(.cg-chapter--documents)
  :is(p:not(.cg-subhead):not(.cg-lead-line):not(.cg-lede), li:not(.cg-amenities li), dd, .cg-step-text, .ge-fact-note) {
  color: #000 !important;
}

.lay-cardguide .guide-body .cg-chapter--alertrow .cg-alertrow li span {
  color: #fff !important;
}

.lay-cardguide .guide-body .ge-hours-row.is-closed :is(dt, dd) {
  color: #94a3b8 !important;
}

.lay-cardguide .guide-body .ge-hours-row--emergency :is(dt, dd) {
  color: #dc2626 !important;
}

.lay-cardguide .guide-body :is(.cg-hours dt, .cg-tile b, .cg-form-tab:not(.is-active), .cg-form label) {
  color: #004e75 !important;
}

.lay-cardguide .guide-body :is(.cg-note--box strong, .cg-alert strong) {
  font-size: 18px !important;
}

/* Solid comfort tiles keep their white labels. */
.lay-cardguide.guide-plan-your-visit .guide-body .cg-chapter--amenities .cg-amenities li {
  color: #fff !important;
}

/* Insurance partner chips all one height, the name centred in each, so a
   two-line name ("Oman Qatar Insurance") does not make its row taller
   (2026-10-04). */
.lay-cardguide .cg-chips {
  grid-auto-rows: 1fr;
}

.lay-cardguide .cg-chips li {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

/*
 * The hero on a phone (2026-10-04): the heading, text and pillars are
 * centred there, and the buttons now follow - stacked, the same width,
 * centred - instead of sitting left at two different widths.
 */
@media (max-width: 768px) {
  .mph-dr-hero .dr-hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .mph-dr-hero .dr-hero-cta > .dr-btn {
    width: 100%;
    max-width: 320px;
    margin: 0 !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   Scroll booking bars on desktop (2026-10-04) - see ScrollCta.tsx.
   Phones keep `.float-bar`; these show from 901px up.
   ========================================================================== */
.scta {
  display: none;
}

@media (min-width: 901px) {
  .scta {
    position: fixed;
    z-index: 9000;
    display: flex;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
  }

  .scta.is-shown {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .scta-who {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
  }

  .scta-who > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .scta-title {
    overflow: hidden;
    color: #004e75;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scta-sub {
    overflow: hidden;
    color: #000;
    font-size: 13.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scta-actions {
    display: flex;
    gap: 10px;
  }

  .scta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .scta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 78, 117, 0.2);
  }

  .scta-btn--call {
    background: #004e75;
    color: #fff;
  }

  .scta-btn--wa {
    background: #25d366;
    color: #fff;
  }

  /* Also `.book-callback` (it opens the call-back form), whose sidebar
     styles would otherwise size it differently from its neighbours. */
  .scta .scta-btn--callback {
    margin: 0 !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none;
  }

  /* Filled, as the call-back button in the page's booking card. */
  .scta-btn--callback {
    border-color: transparent;
    background: #1c97d4;
    color: #fff;
  }

  /* Option 1 - doctor profile: a full-width bar along the bottom. */
  .scta--doctor {
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 12px max(24px, calc((100vw - 1240px) / 2));
    border-top: 1px solid rgba(0, 78, 117, 0.1);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -12px 32px rgba(11, 47, 91, 0.1);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    transform: translateY(110%);
  }

  .scta-photo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 2px solid #eef6fc;
    border-radius: 50%;
    background: #eef6fc;
    object-fit: cover;
    object-position: 50% 12%;
  }

  /* The assistant's buttons rise above the bar while it is up. */
  body.has-scroll-cta--doctor .mphw-stack {
    bottom: 100px;
    transition: bottom 0.35s ease;
  }

  /* Option 2 - department page: a floating card at the bottom-left. */
  .scta--department {
    bottom: 24px;
    left: 24px;
    flex-direction: column;
    gap: 1rem;
    width: 300px;
    padding: 1.15rem;
    border: 1px solid rgba(0, 78, 117, 0.1);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 50px rgba(11, 47, 91, 0.2);
    transform: translateY(calc(100% + 40px));
  }

  .scta-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #eef6fc;
    color: #004e75;
    font-size: 1.15rem;
  }

  .scta--department .scta-actions {
    flex-direction: column;
    gap: 8px;
  }

  .scta--department .scta-btn {
    width: 100%;
  }

  .theme-pink .scta-btn--call,
  .theme-pink .scta-icon {
    background: var(--brand-primary, #004e75);
    color: #fff;
  }
}

/* The outline button on the dark closing band: white text (2026-10-04) -
   the doctors directory's link colour turned it navy on navy. */
.ab-cta-card .ab-cta-btn--line,
.ab-cta-card .ab-cta-btn--line:hover {
  color: #fff !important;
}

/* A department's contact button that is a link (Get directions, Contact
   hospital) - the call-back button's look, but not its class, which opens
   the call-back form (2026-10-04). */
.book-box .book-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 14px;
  padding: 15px 18px;
  border: 1px solid #1c97d4;
  border-radius: 999px;
  background: #1c97d4;
  box-shadow: 0 8px 20px rgba(28, 151, 212, 0.24);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}

.book-box .book-link:hover {
  background: #1683bb;
  color: #fff;
  transform: translateY(-2px);
}

/* The department banner's outline buttons (a department without
   appointments: Get directions, Contact hospital) - white on the banner. */
.mph-dr-hero--department .dr-hero-cta .dr-btn-ghost {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.mph-dr-hero--department .dr-hero-cta .dr-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.mph-dr-hero--department .dr-hero-cta .dr-btn-ghost::after {
  background: #fff !important;
  color: var(--heading-color) !important;
}

/* "On this page": each link at its own width on one line, the row wrapping
   whole links, rather than six fixed columns that broke the longer titles
   ("What Happens During Discharge") over two lines (2026-10-06). */
.lay-cardguide .cg-bar-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem !important;
}

.lay-cardguide .cg-bar-list a {
  white-space: nowrap;
}

/* Medical Records: the heading column wide enough for its heading. */
.lay-cardguide.guide-medical-records .cg-chapter--amenities {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) !important;
}

/* Contact rows on a phone: the long e-mail address breaks rather than
   pushing the card past the screen (2026-10-06). */
.lay-cardguide .cg-contacts li,
.lay-cardguide .cg-contacts li > div {
  min-width: 0;
}

.lay-cardguide .cg-contacts a,
.lay-cardguide .cg-contacts b {
  overflow-wrap: anywhere;
}

/* Opening hours: a time never breaks ("8:00 am – 8:00 / pm"); the day
   name wraps instead (2026-10-06). */
.lay-cardguide .ge-hours-row dd {
  flex: 0 0 auto;
  white-space: nowrap;
}

.lay-cardguide .ge-hours-row dt {
  min-width: 0;
}

@media (max-width: 480px) {
  .lay-cardguide .guide-body .ge-hours-row :is(dt, dd) {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   Patient Care pages, matched to the hospital's mockups (2026-10-08).
   ========================================================================== */

/* Card headings at the mockups' size; the centred section headings stay 45px. */
.lay-cardguide .guide-body :is(.cg-chapter--card, .cg-rcard) h2 {
  font-size: clamp(1.35rem, 2vw, 1.6rem) !important;
  line-height: 1.25 !important;
}

/* "On this page": a filled disc, white icon. */
.lay-cardguide .cg-bar-label .cg-circle {
  background: #004e75;
  color: #fff;
}

/* Contact Information: a heading, not a small label. */
.lay-cardguide .guide-essentials > h2 {
  margin-bottom: 1.1rem !important;
  color: #004e75 !important;
  font-size: clamp(1.35rem, 2vw, 1.6rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Opening hours: the icon in a round disc, the heading in the theme blue. */
.lay-cardguide .ge-panel--hours h3 {
  color: #1c97d4 !important;
}

.lay-cardguide .ge-panel-icon,
.lay-cardguide .ge-fact-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* The Emergency row on a pink strip. */
.lay-cardguide .ge-hours-row--emergency {
  margin-top: 0.4rem;
  padding: 0.7rem 0.85rem !important;
  border: 0 !important;
  border-radius: 10px;
  background: #fdecee;
}

/* ==========================================================================
   Specialties menu: every department, A-Z (2026-10-09).
   ========================================================================== */
.megamenu-all {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  max-height: min(62vh, 560px);
  margin: 14px 0 0;
  padding: 0 6px 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.megamenu-all-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.megamenu-all-link:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

.megamenu-all-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
}

.megamenu-all-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.megamenu-all-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.megamenu-all-link .arrow {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}

.megamenu-all-link:hover .arrow {
  color: #fff;
}

@media (max-width: 1200px) {
  .megamenu-all {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.megamenu-all-name {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Doctor cards in the rails: every card the same - the name on one line,
   the title on two, then the two buttons (2026-10-09). */
/* The name at its usual size on up to two lines, the title on two; both
   reserve their two lines so every card is the same height, and the box
   no longer keeps room for the tags (2026-10-09). */
.doctors-track .doctor-card .doctor-name,
.doctor-card .doctor-name {
  display: -webkit-box !important;
  height: calc(2 * 1.25em);
  min-height: 0 !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.doctors-track .doctor-info-box,
.doctors-slides .doctor-info-box,
.doctor-card .doctor-info-box {
  min-height: 0 !important;
}


.doctor-card .doctor-spec {
  display: -webkit-box;
  height: calc(2 * 1.45em);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.doctor-card .doctor-tags {
  display: none !important;
}

/* The emergency number's button: red wherever it appears (2026-10-09). */
:is(.book-call, .book-link, .dr-btn, .dr-book-btn, .scta-btn, .fb-btn).is-emergency {
  border-color: #dc2626 !important;
  background: #dc2626 !important;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25) !important;
  color: #fff !important;
}

:is(.book-call, .book-link, .dr-btn, .dr-book-btn, .scta-btn, .fb-btn).is-emergency:hover {
  border-color: #b91c1c !important;
  background: #b91c1c !important;
}

/* With the emergency button red, the link that follows it ("Contact
   Hospital") takes the dark navy of the call button. */
.book-box .is-emergency ~ .book-link:last-of-type {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(7, 23, 44, 0.95), rgba(0, 78, 117, 0.95));
  box-shadow: 0 8px 20px rgba(0, 57, 90, 0.25);
}

.mph-dr-hero .dr-hero-cta .dr-btn.is-emergency,
.mph-dr-hero--department .dr-hero-cta .dr-btn.is-emergency {
  border-color: #dc2626 !important;
  background: #dc2626 !important;
  color: #fff !important;
}

/* Doctor profile lists (Areas of Expertise, Conditions, Procedures): the
   rows closer together (2026-10-09). */
.mph-page-doctor .dr-expertise {
  row-gap: 0 !important;
}

.mph-page-doctor .dr-exp-card {
  padding: 0.75rem 0 !important;
  gap: 1rem !important;
}


/* A second banner button that opens WhatsApp: WhatsApp green (2026-10-10). */
.mph-dr-hero .dr-hero-cta > .dr-btn-wa {
  border: 1px solid #25d366 !important;
  background: #25d366 !important;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28) !important;
  color: #fff !important;
}

/* Highlight cards under the banner: the icon above the text (2026-10-10). */
.lay-cardguide .cg-highlight {
  flex-direction: column;
  gap: 0.85rem;
}

/* Required Documents: the faint clipboard of the design between the list and
   the Important box (2026-10-10). */
.lay-cardguide .cg-chapter--documents {
  position: relative;
  overflow: hidden;
}

.lay-cardguide .cg-chapter--documents::after {
  position: absolute;
  top: 50%;
  right: calc(260px + 3.5rem);
  transform: translateY(-50%) rotate(-8deg);
  color: rgba(255, 255, 255, 0.1);
  font-family: 'Font Awesome 6 Free';
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  content: '\f46d';
  pointer-events: none;
}

@media (max-width: 900px) {
  .lay-cardguide .cg-chapter--documents::after {
    display: none;
  }
}

/* Emergency Care, What to Bring: the photograph under the list, across the
   card's foot, as the design draws it (2026-10-10). */
.lay-cardguide.guide-emergency-care #what-to-bring {
  display: flex;
  flex-direction: column;
}

.lay-cardguide.guide-emergency-care #what-to-bring .cg-with-photo {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.lay-cardguide.guide-emergency-care #what-to-bring .cg-photo {
  flex: 1;
  min-height: 180px;
  margin: 1.25rem -1.75rem -1.6rem;
  border-radius: 0 0 20px 20px;
  aspect-ratio: auto;
}

/* Numbered steps on the dark band (records request, how it works, feedback):
   the number on the line joining the steps, then the step's icon in a white
   disc above its title (2026-10-10). */
.lay-cardguide .cg-chapter--dark .cg-process li {
  position: relative;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 0.85rem !important;
}

.lay-cardguide .cg-chapter--dark .cg-process li::before {
  position: absolute;
  top: 16px;
  left: 44px;
  right: 1.75rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  content: '';
}

.lay-cardguide .cg-chapter--dark .cg-process li:last-child::before {
  display: none;
}

.lay-cardguide .cg-chapter--dark .cg-process .cg-step-num {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.lay-cardguide .cg-chapter--dark .cg-process .cg-circle {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 46px !important;
  height: 46px !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #fff !important;
  font-size: 1.1rem !important;
}

.lay-cardguide .cg-chapter--dark .cg-process .cg-circle i {
  color: var(--cg-blue) !important;
}

.lay-cardguide .cg-chapter--dark .cg-process .cg-circle::after {
  display: none !important;
}

.lay-cardguide .cg-chapter--dark .cg-process li > div {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

/* Help cards as a band (Our Journey and others): the three the same height,
   the address card a white card with its content centred (2026-10-10). */
:where(.mph-page-guide) .lay-sb-band {
  align-items: stretch !important;
}

:where(.mph-page-guide) .lay-sb-band .guide-sb-card--info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(0, 78, 117, 0.1) !important;
  border-style: solid !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(11, 47, 91, 0.05);
}

:where(.mph-page-guide) .lay-sb-band .guide-sb-card--info .guide-sb-info-row strong {
  font-size: 18px;
}

:where(.mph-page-guide) .lay-sb-band .guide-sb-card--info .guide-sb-info-row span {
  font-size: 15px;
}

/* Contact Information band on any page: one row of cards, no gap at the
   right (2026-10-10). */
.mph-page-guide .ge-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

.mph-page-guide .ge-panel--facts {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* A news article's back button: a white outline on the banner. */
.mph-article__hero .dr-hero-cta .dr-btn-ghost,
.mph-dr-hero .dr-hero-cta > .dr-btn-ghost:only-child {
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Inpatient Guide's cards: three side by side in the reading column, no card
   left alone on a row (2026-10-10). */
.mph-page-guide .guide-cards.lay-cards--grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.mph-page-guide .guide-cards.lay-cards--grid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 760px) {
  .mph-page-guide .guide-cards.lay-cards--grid:has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Policy pages: one number per clause - the badge; the heading's own
   counter was printing it a second time ("13. 13.") (2026-10-10). */
.mph-page-guide .guide-clause:has(> .lay-clause-num) h3::before {
  content: none !important;
  display: none !important;
}

/* Refund policy: the clauses one under another at full width, as the other
   policies, instead of three narrow columns. */
.mph-page-guide .guide-clauses.lay-clauses--cards {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Help cards: each card's buttons at its foot, so they line up across the
   band. */
.mph-page-guide .lay-sb-band .guide-sb-card {
  display: flex;
  flex-direction: column;
}

.mph-page-guide .lay-sb-band .guide-sb-card .guide-sb-btn:first-of-type {
  margin-top: auto;
}

/*
 * Who Should You Contact?: each email address on one line (2026-10-12) -
 * smaller than the phone above it, so the longest one fits a quarter-width
 * card.
 */
#who-to-contact .dl-email {
  font-size: 11.5px;
  white-space: nowrap;
  letter-spacing: -0.01em;
}


/* ─── Patient Care pages: balance pass (2026-10-12) ─────────────────────
 * The hospital's mockups of 2026-10-12 against the built pages: the same
 * containers, with their alignment and spacing corrected. Nothing here adds
 * or removes content.
 */

/* Highlight cards: icon on the left, text beside it, centred - as every
   mockup has them (this replaces the icon-above layout of 2026-10-10). */
.lay-cardguide .cg-highlight {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 901px) {
  .lay-cardguide .cg-highlight {
    padding: 0.4rem 1.25rem;
  }
}

/* Stacked, one per row, once they no longer fit across. */
@media (max-width: 900px) {
  .lay-cardguide .cg-highlights {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lay-cardguide .cg-highlight > .cg-circle {
  flex: 0 0 auto;
}

.lay-cardguide .cg-highlight > div {
  flex: 1 1 auto;
  min-width: 0;
}

.lay-cardguide .cg-highlight h3 {
  margin: 0 0 0.3rem;
}

.lay-cardguide .cg-highlight-go {
  flex: 0 0 auto;
  align-self: center;
}

/* Emergency's highlight titles in the emergency red (they had been
   overridden to navy). */
/* (The class repeats outweigh the navy heading rule's long :not() chain.) */
.lay-cardguide.guide-emergency-care.guide-emergency-care.guide-emergency-care .guide-body .cg-highlights .cg-highlight.cg-highlight.cg-highlight :is(.cg-highlight-badge, h3) {
  color: #c81e1e !important;
}

/* One gap between all cards: 24px, the same as under the highlights (rows
   were 48px apart). */
.lay-cardguide .cg-chapters {
  gap: 24px;
}

/* No white field between the last section and the closing band. */
.lay-cardguide .guide-body {
  padding-bottom: 24px;
}

.lay-cardguide .cg-chapters {
  margin-bottom: 24px;
}

.lay-cardguide .ab-cta-band {
  padding-top: 32px;
}

.lay-cardguide .guide-body .guide-faq-band {
  margin-bottom: 0;
}

/* Dark checklist cards (Visiting Hours): the list spreads over the card's
   height instead of bunching at the top beside a taller neighbour. */
.lay-cardguide .cg-chapter--checklist.cg-chapter--dark {
  display: flex;
  flex-direction: column;
}

.lay-cardguide .cg-chapter--checklist.cg-chapter--dark > div,
.lay-cardguide .cg-chapter--checklist.cg-chapter--dark > div > div,
.lay-cardguide .cg-chapter--checklist.cg-chapter--dark > div > div > div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.lay-cardguide .cg-chapter--checklist.cg-chapter--dark .cg-ticks {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-evenly;
  margin-bottom: 0;
}

/* Plan Your Visit's step cards: the titles on one line, as the mockup. */
.lay-cardguide .guide-body .cg-chapter--stepcard h2 {
  font-size: 1.2rem !important;
  line-height: 1.3;
}

/* Medical Records, Who Can Request?: the photograph under the list, the
   card's full width, rather than beside it with the lower half empty. */
.lay-cardguide.guide-medical-records #who-can-request .cg-with-photo {
  grid-template-columns: minmax(0, 1fr);
}

.lay-cardguide.guide-medical-records #who-can-request .cg-photo {
  aspect-ratio: 16 / 7;
}

/* ... and the red Important Information beside it spreads its points over
   the shared height. */
.lay-cardguide.guide-medical-records #important-information {
  display: flex;
  flex-direction: column;
}

.lay-cardguide.guide-medical-records #important-information .cg-alertrow {
  flex: 1 1 auto;
  align-content: space-evenly;
}

/* Emergency "When to Come" and Insurance "What to Bring": the photograph
   fades in along the card's right side, full height, as the mockups. */
.lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency,
.lay-cardguide:is(.guide-insurance-billing) #what-to-bring {
  position: relative;
  overflow: hidden;
}

.lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency .cg-with-photo,
.lay-cardguide:is(.guide-insurance-billing) #what-to-bring .cg-with-photo {
  display: block;
}

.lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency .cg-with-photo > div:first-child,
.lay-cardguide:is(.guide-insurance-billing) #what-to-bring .cg-with-photo > div:first-child,
.lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency :is(.cg-chapter-head, .cg-note) {
  position: relative;
  z-index: 1;
}

.lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency .cg-with-photo > div:first-child,
.lay-cardguide:is(.guide-insurance-billing) #what-to-bring .cg-with-photo > div:first-child {
  max-width: 58%;
}

.lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency .cg-photo,
.lay-cardguide:is(.guide-insurance-billing) #what-to-bring .cg-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.6) 30%, #000 60%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.6) 30%, #000 60%);
}

/* Emergency's photograph is a dark night shot: below the heading, so the
   heading stays on white. */
.lay-cardguide.guide-emergency-care #when-to-come-to-emergency .cg-photo {
  top: 5.5rem;
  width: 42%;
}

.lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency .cg-photo img,
.lay-cardguide:is(.guide-insurance-billing) #what-to-bring .cg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 760px) {
  .lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency .cg-with-photo > div:first-child,
  .lay-cardguide:is(.guide-insurance-billing) #what-to-bring .cg-with-photo > div:first-child {
    max-width: none;
  }

  .lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency .cg-photo,
  .lay-cardguide:is(.guide-insurance-billing) #what-to-bring .cg-photo {
    position: static;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-top: 1rem;
    border-radius: 12px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Emergency's red Arrival and Triage card: the large people icon in its
   top corner, as the mockup. */
.lay-cardguide.guide-emergency-care #arrival-and-triage {
  position: relative;
}

.lay-cardguide.guide-emergency-care #arrival-and-triage::before {
  content: '\f0c0';
  position: absolute;
  top: 1.6rem;
  right: 1.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Font Awesome 6 Free';
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

[dir='rtl'] .lay-cardguide.guide-emergency-care #arrival-and-triage::before {
  right: auto;
  left: 1.75rem;
}

/* Insurance, Payment & Financing: the faint wallet of the mockup on the
   right of the list. */
.lay-cardguide.guide-insurance-billing #payment-financing {
  position: relative;
  overflow: hidden;
}

.lay-cardguide.guide-insurance-billing #payment-financing::after {
  content: '\f555';
  position: absolute;
  top: 55%;
  right: 2rem;
  transform: translateY(-50%);
  color: rgba(28, 151, 212, 0.12);
  font-family: 'Font Awesome 6 Free';
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

[dir='rtl'] .lay-cardguide.guide-insurance-billing #payment-financing::after {
  right: auto;
  left: 2rem;
}

/* ─── Department "steps" row: as many columns as steps ────────────────────
   The design draws four, so a department with five wrapped its last step onto
   a row of its own. Three, five and six get their own count; the line runs
   from the first circle's centre to the last's (half a column in from each
   edge). The design's two-column layout at 800px and below is untouched. */
@media (min-width: 801px) {
  .journey-steps:has(> .journey-step:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
  .journey-steps:has(> .journey-step:nth-child(3):last-child)::after {
    left: 16.667%;
    right: 16.667%;
  }
  .journey-steps:has(> .journey-step:nth-child(5):last-child) {
    grid-template-columns: repeat(5, 1fr);
  }
  .journey-steps:has(> .journey-step:nth-child(5):last-child)::after {
    left: 10%;
    right: 10%;
  }
  .journey-steps:has(> .journey-step:nth-child(6):last-child) {
    grid-template-columns: repeat(6, 1fr);
  }
  .journey-steps:has(> .journey-step:nth-child(6):last-child)::after {
    left: 8.333%;
    right: 8.333%;
  }
}

/* ─── Department team rail: fewer consultants than fit ────────────────────
   One to three cards sat at the start of an otherwise empty row. Centred
   while they all fit (four per view from 1024px), so nothing can slide. */
@media (min-width: 1024px) {
  .doctors-slides:not(:has(> :nth-child(4))) {
    justify-content: center;
  }
}

/* ═══ Arabic (RTL) pass, 2026-10-13 ═══════════════════════════════════════
   Everything below is scoped to html[dir="rtl"]: the English site is not
   touched. Grouped by area - site chrome and home, the About/News/Contact
   pages, doctors and departments, patient care and legal pages. */

/* A call link whose label holds the number ("اتصل بـ +968 2458 3600"):
   rtl.css makes every tel: link left-to-right, which put the Arabic words on
   the wrong side of the number. The number is now its own <bdi dir="ltr">
   (isolateNumbers), so the link can follow the page. */
html[dir="rtl"] a[href^="tel:"]:has(bdi) {
  direction: rtl;
  unicode-bidi: isolate;
}

/* "→" after a button label is a span.arw, which rtl.css mirrors - but a
   transform needs a box, and the span was inline. */
html[dir="rtl"] .arw {
  display: inline-block;
}

/* ==========================================================================
   Arabic (RTL) chrome + homepage fixes  (agent A)
   ========================================================================== */

/* Header ran in English order: rtl.css reverses the rows on top of dir=rtl,
   which already lays flex rows out from the right - a double flip that put
   the logo on the left. A plain row under dir=rtl is the mirrored layout. */
html[dir="rtl"] .top-header-content,
html[dir="rtl"] .navbar,
html[dir="rtl"] .nav-menu,
html[dir="rtl"] .top-header-left,
html[dir="rtl"] .top-header-right {
    flex-direction: row;
}

/* Book button: the design pads the text side (left in English) and keeps the
   arrow badge tight to the edge; mirror that so the badge hugs the left. */
html[dir="rtl"] .btn-pill-navy {
    padding: 10px 24px 10px 10px !important;
}

@media (max-width: 1420px) {
    html[dir="rtl"] .btn-pill-navy#nav-cta-btn,
    html[dir="rtl"] #nav-cta-btn {
        padding: 9px 18px 9px 8px !important;
    }
}

/* Book button ran off the left edge (by ~73px at 1440, ~29px at 1280): the
   Arabic menu is wider than the English one the row was sized for. Tighten
   the item spacing while the full menu shows (it collapses below 1251px). */
@media (min-width: 1251px) {
    html[dir="rtl"] .main-header .nav-menu {
        gap: 5px !important;
    }

    html[dir="rtl"] .main-header .nav-menu a {
        font-size: 12.5px !important;
    }

    html[dir="rtl"] .main-header .nav-link.nav-ai-link {
        padding: 6px 10px;
    }
}

/* Collapsed menu: responsive.css pushes the button with margin-left:auto,
   written for the old reversed row. In a real RTL row the free space is on
   the button's right, so the auto margin goes there. `body` outranks it. */
@media (max-width: 1250px) {
    html[dir="rtl"] body .main-header .navbar #nav-cta-btn {
        margin-left: 0;
        margin-right: auto;
    }
}

/* Top bar: rtl.css makes every tel: link direction:ltr + inline-block, but
   these links hold an Arabic caption and are flex rows - keep the item RTL
   and flex, and isolate only the number. */
html[dir="rtl"] .top-header a.top-info-item {
    direction: rtl;
    display: flex;
}

html[dir="rtl"] #top-phone-link .top-info-text strong {
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* Top bar separators hang on the item's right edge in English; mirror them
   and drop the leading padding on the right-most item instead. */
html[dir="rtl"] .top-info-item:not(:last-child)::after {
    right: auto;
    left: 0;
}

html[dir="rtl"] .top-info-item:first-child {
    padding-left: 22px;
    padding-right: 0;
}

/* Language switch divider sits on the physical left of the 2nd option. */
html[dir="rtl"] .lang-option + .lang-option {
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, .22);
}

/* Slider chevrons: prev sits on the right in RTL and must point right,
   next on the left and point left. */
html[dir="rtl"] .slider-prev i,
html[dir="rtl"] .slider-next i {
    transform: scaleX(-1);
}

/* Phone numbers inside Arabic labels: <bdi dir="ltr"> keeps them reading
   +968 ... left-to-right. */
html[dir="rtl"] bdi[dir="ltr"] {
    unicode-bidi: isolate;
    direction: ltr;
}

/* Homepage emergency call button: the tel: link was forced ltr and
   inline-block by rtl.css, so the Arabic label ran in English order and the
   arrow badge sat on top of the number. The number is a <bdi> now. */
html[dir="rtl"] .emerg__acts a.btn--emerg {
    direction: rtl;
}

html[dir="rtl"] .emerg__acts a.btn {
    display: inline-flex;
}

/* Arrow badges (↗) drawn by ::after: point them up-and-left like the
   flipped icon-circle arrows elsewhere in Arabic. */
html[dir="rtl"] .new-about-btn-secondary:not(:has(.icon-circle))::after,
html[dir="rtl"] .emerg__acts .btn:not(:has(.icon-circle))::after,
html[dir="rtl"] .btn-location-directions:not(:has(.icon-circle))::after,
html[dir="rtl"] .btn-location-review:not(:has(.icon-circle))::after {
    transform: scaleX(-1);
}

html[dir="rtl"] .new-about-btn-secondary:hover::after,
html[dir="rtl"] .emerg__acts .btn:hover::after,
html[dir="rtl"] .btn-location-directions:hover::after,
html[dir="rtl"] .btn-location-review:hover::after {
    transform: scaleX(-1) translate(2px, -2px);
}

/* rtl.css mirrors the whole About "secondary" button (meant for an arrow),
   which mirrored its Arabic label too. Keep the button upright. */
html[dir="rtl"] .new-about-btn-secondary {
    transform: none;
}

html[dir="rtl"] .new-about-btn-secondary:hover {
    transform: translateY(-1px);
}

/* Literal → arrows (now wrapped in .arw, which rtl.css mirrors) need a box
   to take the transform; the mega-menu arrows likewise. */
html[dir="rtl"] .pvs-step-link .arw,
html[dir="rtl"] .btn-location-directions .arw,
html[dir="rtl"] .btn-location-review .arw,
html[dir="rtl"] .megamenu-panel .arrow {
    display: inline-block;
    transform: scaleX(-1);
}

html[dir="rtl"] .megamenu-card:hover .card-title-wrap .arrow {
    transform: scaleX(-1) translateX(4px);
}

/* Stats band: the longer Arabic figures ("أكثر من 4 ملايين") wrapped to two
   lines while their neighbours took one. Keep every figure on one line. */
@media (min-width: 992px) {
    html[dir="rtl"] .new-about-stat-number {
        white-space: nowrap;
        font-size: clamp(22px, 2.1vw, 34px);
    }
}

/* Below 992px the design sets these at 40-56px, which in two narrow columns
   broke each Arabic figure into three or four one-word lines. */
@media (max-width: 991px) {
    html[dir="rtl"] .new-about-stat-number {
        font-size: clamp(24px, 4.5vw, 36px);
        line-height: 1.25;
    }
}

/* Specialties header: the design pins this column to text-align:left, so
   the Arabic heading and badge hugged the wrong edge. */
html[dir="rtl"] .dept-header-area {
    text-align: right;
}

/* "Additional specialised services" heading was left-aligned. */
html[dir="rtl"] .dept-extra-tags-container {
    text-align: right;
}

/* Award years ("2012, 2018, 2021, 2023") are a Latin list: keep its order. */
html[dir="rtl"] .award-year {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Emergency capability cards: rtl.css adds a divider layout (border-right,
   zero padding on first/odd/all cards at various widths) meant for
   hairline-split columns; these are white cards now, so card text ran into
   or past the card's right edge. `body` + :nth-child(n) outranks rtl.css. */
html[dir="rtl"] body .feats > article:nth-child(n) {
    border: 1px solid rgba(226, 235, 245, 0.9);
    padding: 28px 24px 26px;
}

/* Doctors carousel: 25 dots at 8px gaps are ~410px wide, wider than a phone,
   so the rail hung off both edges (there are more dots than fit even when
   small). Smaller dots and gaps, wrapping onto a second centred row. */
@media (max-width: 600px) {
    html[dir="rtl"] .doctors-carousel-controls .doctors-dots {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 4px;
    }

    html[dir="rtl"] .doctors-carousel-controls .doctors-dots .carousel-dot {
        flex: 0 0 6px;
        width: 6px;
        height: 6px;
    }

    html[dir="rtl"] .doctors-carousel-controls .doctors-dots .carousel-dot.is-active {
        flex-basis: 18px;
        width: 18px;
    }
}

/* Footer column headings: the accent bar sat on the left, away from the
   right-aligned text. */
html[dir="rtl"] .footer-title-bar {
    border-left: 0;
    padding-left: 0;
    border-right: 3px solid #1c97d4;
    padding-right: 18px;
}

/* Footer contact row: the e-mail broke mid-word ("...co m"). Let the value
   drop under its label instead, and never break the address itself. */
html[dir="rtl"] .footer-contact-row .contact-item {
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 2px;
}

html[dir="rtl"] .footer-contact-row .contact-item a[href^="mailto:"],
html[dir="rtl"] .footer-contact-row .contact-item a[href^="tel:"] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Testimonial author meta line ("مريض جراحة • مسقط") was left-aligned. */
html[dir="rtl"] .testi-who .testi-meta {
    text-align: right;
}

/* ==========================================================================
   Agent B - Arabic (RTL) fixes for the About / news / gallery / packages /
   insurers / booking / contact page bodies. Every rule is RTL-only.
   ========================================================================== */

/* About + Our Journey: milestone timeline. The rule and the dots sat on the
   left of right-aligned text; move both to the right edge. */
html[dir="rtl"] .ab-spine {
  padding-left: 0;
  padding-right: 2.5rem;
}
html[dir="rtl"] .ab-spine::before {
  left: auto;
  right: 6px;
}
html[dir="rtl"] .ab-node::before {
  left: auto;
  right: -2.5rem;
}

/* About: pull quote. Accent rule, padding and the oversized quote mark
   belong on the right in Arabic. */
html[dir="rtl"] .ab-quote {
  border-left: 0;
  border-right: 3px solid var(--ab-cyan);
  padding-left: 0;
  padding-right: 2rem;
}
html[dir="rtl"] .ab-quote::before {
  left: auto;
  right: 1.35rem;
}

/* About: the drop cap floated left, i.e. into the middle of the line in an
   RTL paragraph; float it to the start (right) with mirrored padding. */
html[dir="rtl"] .ab-cols > p:first-of-type::first-letter {
  float: right;
  padding: 6px 0 0 14px;
}

/* Contact: service-hours table. Header row and row headers carry
   Tailwind's text-left; Arabic columns read from the right. */
html[dir="rtl"] .hours-card table tr.text-left,
html[dir="rtl"] .hours-card table th.text-left,
html[dir="rtl"] .hours-card table th,
html[dir="rtl"] .hours-card table td {
  text-align: right;
}

/* Page banners (About, Journey, Awards, Careers, News, Gallery, Packages,
   Insurers, Booking): at the Latin line-height of 1.15 the Arabic title's
   ascenders and dots collide between lines. Shared banner component. */
html[dir="rtl"] .mph-dr-hero__title {
  line-height: 1.32;
}

/* rtl.css gives every RTL `ul` padding-right:1.2em, which out-ranks the
   page sheets' `padding:0` on these bullet-less grids and lists. They sat
   ~19px in from the right edge, so the grid was off-centre (Gallery,
   Awards, Insurers, Our Journey, Careers job list). */
html[dir="rtl"] .gal-grid,
html[dir="rtl"] .acc-grid,
html[dir="rtl"] .ins-grid,
html[dir="rtl"] .jf-grid,
html[dir="rtl"] .job-list,
html[dir="rtl"] .job-meta,
html[dir="rtl"] .aw-fact-list,
html[dir="rtl"] .mph-aside-list {
  padding-right: 0;
}

/* Same leak on Tailwind utility lists (Contact directory/direct-line icon
   rows, chip rows): preflight's padding:0 loses to rtl.css. */
html[dir="rtl"] main ul[class*="space-y-"],
html[dir="rtl"] main ul.flex,
html[dir="rtl"] main ul.grid {
  padding-right: 0;
}

/* Contact + Awards/Careers sidebar: the red emergency card's "Call now" /
   "Ambulance" buttons are icon + Arabic label but inherit the global
   tel-link direction:ltr, so the icon sat on the wrong (left) side. */
html[dir="rtl"] .bg-brand-red .border-t > a[href^="tel:"] {
  direction: rtl;
}

/* ==========================================================================
   RTL fixes - doctor directory, doctor profiles, specialties directory and
   department pages (agent C). Every rule is scoped to html[dir="rtl"].
   ========================================================================== */

/* Call buttons: rtl.css makes every tel: link an LTR box so bare numbers read
   correctly, but these hold an Arabic label + icon, so the icon landed on the
   wrong side. They contain no number - give them back the page direction. */
html[dir="rtl"] a[href^="tel:"].dr-btn,
html[dir="rtl"] a[href^="tel:"].dr-book-btn,
html[dir="rtl"] a[href^="tel:"].book-call,
html[dir="rtl"] a[href^="tel:"].doctor-btn-book,
html[dir="rtl"] a[href^="tel:"].panel-book-btn,
html[dir="rtl"] a[href^="tel:"].scta-btn,
html[dir="rtl"] a[href^="tel:"].fb-btn {
    direction: rtl;
}

/* The same rtl.css rule also forces display:inline-block, which beat these
   buttons' flex layout and dropped the icon-to-label gap (icon glued to the
   text): the sticky contact bar on department pages and the doctor profile's
   bottom bar on phones. Restore their own display. */
html[dir="rtl"] a[href^="tel:"].scta-btn {
    display: inline-flex;
}
html[dir="rtl"] a[href^="tel:"].fb-btn {
    display: flex;
}

/* Department team rail: doctor name and specialty sat flush left. */
html[dir="rtl"] .doctor-card .doctor-details,
html[dir="rtl"] .doctor-card .doctor-name,
html[dir="rtl"] .doctor-card .doctor-spec {
    text-align: right;
}

/* Doctor profile consultation hours: Latin times / day names ("8:00 am – 8:00 pm",
   "24 hours") were reordered by the RTL paragraph ("am – 8:00 pm 8:00").
   Isolate each value so it keeps its own reading order. */
html[dir="rtl"] .dr-line > b,
html[dir="rtl"] .dr-line > span {
    unicode-bidi: plaintext;
}

/* Hero trust figures carrying English copy ("34 Medical Specialties") were
   reordered to "Medical 34 Specialties". */
html[dir="rtl"] .mph-dr-hero__trust-text strong {
    unicode-bidi: plaintext;
}

/* Doctor profile career timeline: the spine and markers stayed at left:156px,
   so they ran down the far side of the cards instead of between the dates and
   the cards. Mirror them, and the dates hug the spine from the right column. */
html[dir="rtl"] #experience .dr-ledger::before {
    left: auto;
    right: 156px;
}
html[dir="rtl"] #experience .dr-ledger li::before {
    left: auto;
    right: 150px;
}
html[dir="rtl"] #experience .dr-yr {
    text-align: left;
}
html[dir="rtl"] #experience .dr-ledger li:hover > div:last-child {
    transform: translateX(-5px);
}
@media (max-width: 860px) {
    html[dir="rtl"] #experience .dr-yr {
        text-align: right;
    }
}

/* Department team rail (shared CardSlider): prev sits on the right and next on
   the left under RTL, but the chevrons still pointed the English way. */
html[dir="rtl"] #team .slider-controls .slider-prev i,
html[dir="rtl"] #team .slider-controls .slider-next i {
    transform: scaleX(-1);
}

/* Agent D: Arabic (RTL) layout pass for Patient Care + legal pages.
   Every rule is scoped to html[dir="rtl"]; English is untouched. */

/* Page hero (.mph-dr-hero): the banner photos carry a blue fade baked into
   their left edge, behind the English copy. In Arabic the copy sits on the
   right, over bare photo (or, where the sheet anchors the crop left, over a
   flat blue panel with no photo at all). An overlay layer (::after, unused
   here; ::before is disabled site-wide) puts the fade back under the copy.
   Scoped to this pass's pages by their guide-* page class. */
html[dir="rtl"] :is(.guide-plan-your-visit,.guide-admission-discharge,.guide-inpatient-guide,.guide-emergency-care,.guide-insurance-billing,.guide-medical-records,.guide-visiting-hours,.guide-patient-safety-complaints,.guide-patient-rights,.guide-privacy-policy,.guide-terms-conditions,.guide-refund-policy,.guide-cancellation-policy) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
html[dir="rtl"] :is(.guide-plan-your-visit,.guide-admission-discharge,.guide-inpatient-guide,.guide-emergency-care,.guide-insurance-billing,.guide-medical-records,.guide-visiting-hours,.guide-patient-safety-complaints,.guide-patient-rights,.guide-privacy-policy,.guide-terms-conditions,.guide-refund-policy,.guide-cancellation-policy) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own) > .container {
  position: relative;
  z-index: 1;
}

/* Hero, most pages: draw the photo mirrored (English crop, flipped), so the
   fade lands on the right and the subject on the left. The only lettering
   on these photos is small and out of focus (laptop screen, clipboard,
   calendar). */
html[dir="rtl"] :is(.guide-admission-discharge,.guide-inpatient-guide,.guide-insurance-billing,.guide-medical-records,.guide-visiting-hours,.guide-patient-rights,.guide-privacy-policy,.guide-terms-conditions,.guide-patient-safety-complaints,.guide-refund-policy,.guide-cancellation-policy) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
  background: inherit;
  background-position: right center;
  transform: scaleX(-1);
}

/* Hero, Plan your visit and Emergency: the photos show the hospital's
   Arabic sign and the ambulance livery, which mirroring would print
   backwards. Keep the photo and lay the baked-in fade colour
   (rgb 90,123,158) along the right edge, under the Arabic copy. Plan's crop
   leaves the building clear, so it takes the full fade; Emergency's subject
   sits under the copy, so it gets a lighter scrim that keeps the photo. */
html[dir="rtl"] .guide-plan-your-visit .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
  background: linear-gradient(to left,
    rgba(90, 123, 158, 1) 0%,
    rgba(90, 123, 158, 0.94) 30%,
    rgba(90, 123, 158, 0.5) 46%,
    rgba(90, 123, 158, 0) 62%);
}
html[dir="rtl"] .guide-emergency-care .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
  background: linear-gradient(to left,
    rgba(90, 123, 158, 0.78) 0%,
    rgba(90, 123, 158, 0.6) 35%,
    rgba(90, 123, 158, 0) 58%);
}

/* Phones and tablets: the copy spans the full width, so there is no side
   to fade. The Arabic sheet's left-anchored crop showed only the pale
   baked-in fade there (white copy on near-white on Emergency); use the
   English crop and drop the fade on these two pages. */
@media (max-width: 991px) {
  html[dir="rtl"] :is(.guide-plan-your-visit,.guide-emergency-care) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own) {
    background-position: right center;
  }
  html[dir="rtl"] :is(.guide-plan-your-visit,.guide-emergency-care) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
    background: none;
  }
}

/* Card-guide buttons: the trailing arrow (fa-arrow-right) points back the
   way Arabic reads; turn it to point left. */
html[dir="rtl"] .lay-cardguide .cg-btn-arrow {
  transform: scaleX(-1);
}

/* Emergency "When to come" / Billing "What to bring": the photo fades in
   from the card's right edge in English. Mirror it to the left edge, fading
   in towards the text, which now sits on the right. */
@media (min-width: 761px) {
  html[dir="rtl"] .lay-cardguide:is(.guide-emergency-care) #when-to-come-to-emergency .cg-photo,
  html[dir="rtl"] .lay-cardguide:is(.guide-insurance-billing) #what-to-bring .cg-photo {
    inset: 0 auto 0 0;
    -webkit-mask-image: linear-gradient(to left, transparent 0, rgba(0, 0, 0, 0.6) 30%, #000 60%);
    mask-image: linear-gradient(to left, transparent 0, rgba(0, 0, 0, 0.6) 30%, #000 60%);
  }
  html[dir="rtl"] .lay-cardguide.guide-emergency-care #when-to-come-to-emergency .cg-photo {
    top: 5.5rem;
  }
}

/* Icon-and-label link buttons (call, e-mail): rtl.css makes every tel: and
   mailto: link a left-to-right inline-block, so in Arabic these lost their
   flex layout (icon glued to the label) and ran left to right. They follow
   the page again and get their own display back; any number in a label is a
   <bdi dir="ltr"> (isolateNumbers), so it still reads left to right. */
html[dir="rtl"] :is(a[href^="tel:"], a[href^="mailto:"]):is(.ab-cta-btn, .guide-sb-btn, .mph-visit-btn, .mph-dr-card__btn, .flex, .inline-flex) {
  direction: rtl;
  unicode-bidi: isolate;
}

html[dir="rtl"] :is(a[href^="tel:"], a[href^="mailto:"]):is(.ab-cta-btn, .inline-flex) {
  display: inline-flex;
}

html[dir="rtl"] :is(a[href^="tel:"], a[href^="mailto:"]):is(.guide-sb-btn, .flex) {
  display: flex;
}


/* ─── Doctor key-fact strip: one column per fact ──────────────────────────
   The strip shows the facts entered in wp-admin, so it can hold three or
   five; the design's grid was fixed at four. The component sets --dr-facts
   to the count. Desktop only - the 2-up and 1-up layouts below 1024px stand. */
@media (min-width: 1025px) {
  .mph-page-doctor .dr-facts-grid {
    grid-template-columns: repeat(var(--dr-facts, 4), minmax(0, 1fr));
  }
}

/* Nationality flag drawn as an image (CountryFlag): flag emoji print as two
   letters on Windows. Sized like the emoji it replaces, 3:2, with a hairline
   so white-edged flags (Lebanon, Japan) keep their outline. */
.mph-page-doctor .dr-facts svg.dr-flag {
  display: inline-block;
  width: 2.6rem;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
  vertical-align: middle;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ─── Home about: YouTube video in place of the photograph ────────────────
   The video fills the same box the photograph did, cropped like it, with no
   black bands (client, 2026-10-19). Before play, the Large photograph (or
   YouTube's thumbnail) is the cover, with a play button. */
.about-section .new-about-main-img-box--video {
  /* Same box as the photograph; the player is sized against it. */
  container-type: size;
  background: #0b2238;
}

/* The player covers the box the way the photograph did (object-fit: cover):
   scaled to the larger of width and height, centred, the overflow cut off -
   so no black bands above and below. It is made 140px taller again, which
   puts YouTube's own title bar and logo strip outside the box. */
.about-section .new-about-main-img-box--video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(max(100cqh, 56.25cqw) + 140px);
  width: calc((max(100cqh, 56.25cqw) + 140px) * 16 / 9);
  max-width: none;
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.about-section .new-about-video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stacked layout: the box takes its height from the photo's proportion. */
@media screen and (max-width: 992px) {
  .about-section .new-about-main-img-box--video {
    height: auto !important;
    aspect-ratio: 4 / 3;
  }
}

.about-section .new-about-video-cover {
  padding: 0;
  cursor: pointer;
  background: none;
}

.about-section .new-about-video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-section .new-about-video-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 48, 87, 0.05), rgba(0, 48, 87, 0.35));
  transition: background 0.25s ease;
}

.about-section .new-about-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  color: var(--primary-blue, #004e75);
  background: #ffffff;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.28), 0 14px 30px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-section .new-about-video-play svg {
  margin-inline-start: 4px;
}

.about-section .new-about-video-cover:hover .new-about-video-play,
.about-section .new-about-video-cover:focus-visible .new-about-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.32), 0 16px 34px rgba(0, 0, 0, 0.3);
}

.about-section .new-about-video-cover:focus-visible {
  outline: 3px solid #1c97d4;
  outline-offset: 3px;
}

/* The play triangle points the same way in Arabic. */
html[dir="rtl"] .about-section .new-about-video-play svg {
  margin-inline-start: 0;
  margin-left: 4px;
}

/* ─── Department pages: Conditions / Facilities band to the team ──────────
   The band's 88px bottom padding plus the team section's 80px top margin
   left 168px of empty page between the two (client, 2026-10-19). Now 56px. */
.dept-duo {
  padding-bottom: 3.5rem;
}

.dept-duo + #team {
  margin-top: 0 !important;
}

/* ─── Specialty concern tabs: the sticky header stays on top ──────────────
   The concern bar (.concern-wrap, sticky top:0, z-index 999) covered the
   pinned header (fixed, z-index 100), so the header seemed to vanish once
   the bar stuck. The bar now sticks under the header (--mph-stuck-header is
   set by useStickyHeader), and the header stays above it so its menus open
   over it. */
:root:has(.concern-wrap) .main-header.is-stuck {
  z-index: 1000;
}

.concern-wrap {
  top: var(--mph-stuck-header, 0px);
  transition: top 0.2s ease;
}

/* Choosing a tab scrolls to the panels; land below both bars. */
.panels-wrap {
  scroll-margin-top: calc(var(--mph-stuck-header, 0px) + 150px);
}

/* ─── Arabic: position: sticky was dead on every page ─────────────────────
   rtl.css clips overflow-x on <html>, so body's overflow-x:hidden (base.css)
   no longer reaches the viewport and turns body into a scroll container that
   never scrolls - so no sticky element stuck in Arabic. clip clips the same
   without creating a scroll container. */
html[dir="rtl"] body {
  overflow-x: clip;
}

/* ─── Home specialties band: the design's fixed photograph ────────────────
   The design pins this photo (background-attachment: fixed) so the cards
   scroll over it; an older override above set it to scroll everywhere and the
   effect was lost (client, 2026-10-19). Restored on desktop mice/trackpads
   only: iOS Safari ignores `fixed` and Android repaints it badly, so phones
   and tablets keep the scrolling photo. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .departments-section {
    background-attachment: fixed !important;
  }
}

/* The rails take horizontal swipes; vertical page scrolling still works. */
.dept-viewport,
.doctors-viewport {
  touch-action: pan-y;
}

/* ─── Supportive departments: a small tag (2026-10-19) ────────────────────
   ICU, laboratory, therapies ... marked in the Specialties menu and on the
   Specialties page; wording from the Specialties page screen. */
.megamenu-all-tag,
.mph-sp-card__tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.megamenu-all-tag {
  margin-inline-start: 6px;
  color: #bfe6fa;
  background: rgba(28, 151, 212, 0.28);
  border: 1px solid rgba(191, 230, 250, 0.35);
}

.mph-sp-card__tag {
  margin: 2px 0 3px;
  color: #0b6e9f;
  background: #e6f4fb;
  border: 1px solid #c9e7f6;
}

html[dir="rtl"] .megamenu-all-tag,
html[dir="rtl"] .mph-sp-card__tag {
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Specialties page panel: the three buttons alike ─────────────────────
   "Book an Appointment" is the longest label, so its icon and arrow were
   pressed against the button's edges. Slightly smaller, even text on all
   three keeps them identical and roomy. */
/* (!important: the design's shared button rule sets 14px and 28px padding
   with !important on every .dr-book-btn.) */
.mph-sp-promo-card__actions .dr-book-btn {
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  padding: 13px 16px !important;
  gap: 8px !important;
  white-space: nowrap;
}

/* Top bar: the emergency item's heading is now the emergency number
   (2026-10-20). In Arabic the two phone items' numbers run left to right
   (+968 2458 3790, not 3790 2458 968+), aligned to the right of their note. */
html[dir="rtl"] a[href^="tel:"].top-info-item .top-info-text strong {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* ═══ Arabic pass, 2026-10-20 (client's screenshots) ═══════════════════════
   Arabic only. The banner fade added on 2026-10-13 behind Arabic banner copy
   was removed at the client's request. */
/* Arabic menu: room between the items (they ran together at 5px). */
@media (min-width: 1401px) {
  html[dir="rtl"] .main-header .nav-menu { gap: 14px !important; }
  html[dir="rtl"] .main-header .nav-menu a { font-size: 12px !important; }
}
@media (min-width: 1251px) and (max-width: 1400px) {
  html[dir="rtl"] .main-header .nav-menu { gap: 9px !important; }
  html[dir="rtl"] .main-header .nav-menu a { font-size: 11.5px !important; }
}

/* Home "also available" pills: all one width, six to a row, the last row centred. */
html[dir="rtl"] .dept-extra-tags-list {
  justify-content: center;
}
html[dir="rtl"] .dept-extra-tags-list > * {
  flex: 0 0 calc((100% - 5 * var(--pill-gap, 14px)) / 6);
  max-width: calc((100% - 5 * var(--pill-gap, 14px)) / 6);
  box-sizing: border-box;
}

/* Home doctor cards: Arabic names and titles are longer. Names may take
   three lines; the text panel (pinned to the card's foot) grows upward. */
html[dir="rtl"] .doctors-track .doctor-name {
  font-size: 15px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  height: auto;
  max-height: none;
}
html[dir="rtl"] .doctors-track .doctor-spec {
  font-size: 11.5px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  height: auto;
  max-height: none;
}

/* Home about: mirrored like the rest of the page - the video / photograph on
   the right, the text on the left (asked for 2026-10-27; it was pinned to the
   English order before). */

/* Footer contact: label and value on one line; the address lines aligned. */
html[dir="rtl"] .site-footer .contact-item {
  flex-wrap: nowrap;
  align-items: flex-start;
}
html[dir="rtl"] .site-footer .contact-item > span {
  text-align: right;
}
html[dir="rtl"] .site-footer .contact-item > span:not(:has(span)) {
  white-space: nowrap;
}
html[dir="rtl"] .site-footer .contact-item a[href^="mailto:"] {
  white-space: nowrap;
  margin-inline-start: 4px;
}

/* Find a Doctor cards: photograph on the left as in English, text on the right. */
html[dir="rtl"] .mph-dr-card { flex-direction: row-reverse; }

/* Arabic floating call button: rtl.css turns tel: links into blocks, so its
   phone icon sat in the circle's top-left corner. Back to the centred flex
   box the other two buttons use. */
html[dir="rtl"] a[href^="tel:"].mphw-btn {
  display: flex;
}

/* ═══ Arabic pass, 2026-10-21 (every page, screenshot by screenshot) ═══════
   Arabic only. */

/* Page banners the patient-care pass above did not reach. The photos fade on
   their left, behind the English copy; in Arabic the copy sat on bare photo.
   No colour is laid over them (the client had the navy fade removed on
   2026-10-20): photos with no lettering are drawn mirrored, as on the
   patient-care pages, so their own fade lands under the copy; photos showing
   the hospital's sign, which mirroring would print backwards, take the
   photo's own fade colour along the right edge, as Plan Your Visit does. */
html[dir="rtl"] :is(.guide-awards,.guide-book-an-appointment,.guide-careers,.guide-insurance-partners,.guide-our-journey,.guide-who-we-are,.mph-page-contact,.mph-page-about,.guide-health-packages,.guide-news-events,.guide-picture-gallery) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
html[dir="rtl"] :is(.guide-awards,.guide-book-an-appointment,.guide-careers,.guide-insurance-partners,.guide-our-journey,.guide-who-we-are,.mph-page-contact,.mph-page-about,.guide-health-packages,.guide-news-events,.guide-picture-gallery) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own) > .container {
  position: relative;
  z-index: 1;
}
html[dir="rtl"] :is(.guide-awards,.guide-book-an-appointment,.guide-careers,.guide-insurance-partners,.guide-our-journey,.guide-who-we-are,.mph-page-contact) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
  background: inherit;
  background-position: right center;
  transform: scaleX(-1);
}
html[dir="rtl"] :is(.mph-page-about,.guide-health-packages,.guide-news-events,.guide-picture-gallery) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
  background: linear-gradient(to left,
    rgba(90, 123, 158, 1) 0%,
    rgba(90, 123, 158, 0.94) 30%,
    rgba(90, 123, 158, 0.5) 46%,
    rgba(90, 123, 158, 0) 62%);
}
@media (max-width: 991px) {
  html[dir="rtl"] :is(.mph-page-about,.guide-health-packages,.guide-news-events,.guide-picture-gallery) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own) {
    background-position: right center;
  }
  html[dir="rtl"] :is(.mph-page-about,.guide-health-packages,.guide-news-events,.guide-picture-gallery) .mph-dr-hero:not(.mph-dr-hero--department):not(.mph-dr-hero--own)::after {
    background: none;
  }
}

/* Home specialty cards: the English captions fit one line; the Arabic ones
   are longer and were cut off mid-word at the card's edge. */
html[dir="rtl"] .dept-grid .dept-card .dept-sub {
  white-space: normal;
  text-wrap: balance;
}

/* Department "Book this package": the button is a tel: link, which rtl.css
   makes a left-to-right block, so its arrow badge sat on the first word. */
html[dir="rtl"] a[href^="tel:"].pkg-btn {
  display: flex;
  direction: rtl;
}

/* Department team rail: "الملف الشخصي" broke over two lines in its button. */
html[dir="rtl"] #team :is(.doctor-btn-profile, .doctor-btn-book) {
  white-space: nowrap;
}

/* ═══ Arabic = English, 2026-10-24 ═══════════════════════════════════════
   Measured section by section against the English pages (every element's
   size, spacing, colour and layout, Arabic mirrored); these are the places
   the Arabic looked different. Arabic only. */

/* Banner: no navy shade under the menu (the client's request). The stuck
   header keeps its own background. Not on a news article: its banner starts
   below the menu, and without the shade the white menu sat on white. */
html[dir="rtl"] body .main-header:not(.is-stuck) {
  background: none;
}

/* rtl.css indents every list 1.2em; these have no indent in English. */
html[dir="rtl"] :is(.footer-links, .premium-list, .dr-expertise, .dr-edu-grid, .dr-ledger, .dr-postnom, .dr-tags, .mph-sp-promo-card__features, .nav-menu),
html[dir="rtl"] main :is(ul, ol):is([class*="space-y-"], .flex, .grid, .mt-2),
html[dir="rtl"] :is(#international, #feedback) ol {
  padding-right: 0;
}

/* Contact "how it works" steps: the number and its rail on the right. */
html[dir="rtl"] .step-line {
  padding-left: 0;
  padding-right: 4rem;
}
html[dir="rtl"] .step-line > .absolute.left-0 {
  left: auto;
  right: 0;
}
html[dir="rtl"] :where(.mph-page-contact) .step-line::before {
  left: auto;
  right: 1.375rem;
}

/* Text pinned to the left in the design: on the right in Arabic. */
html[dir="rtl"] :is(.faq-btn, .doctor-card, .doctor-info-box, .doctor-card-actions, .pkg-card, .pkg-name, .pkg-price, .pkg-feature, .ab-eyebrow, .dr-eyebrow, .journey-steps) {
  text-align: right;
}
/* The byline's place and visit type sit at the far end: left in Arabic. */
html[dir="rtl"] .testi-who .testi-meta {
  text-align: left;
}

/* Home stats: the English size (the shrink was for long figures that are
   now short). */
@media (min-width: 992px) {
  html[dir="rtl"] .new-about-stat-number {
    font-size: clamp(28px, 2.6vw, 40px);
  }
}

/* Home "also available" pills: sized to their name and on one line, as in
   English, with the padding mirrored. */
html[dir="rtl"] .dept-extra-tags-list {
  justify-content: flex-start;
}
html[dir="rtl"] .dept-extra-tags-list > * {
  flex: 0 0 auto;
  max-width: none;
  white-space: nowrap;
}
html[dir="rtl"] .dept-tag-pill--icon {
  padding-left: 11px !important;
  padding-right: 20px !important;
}

/* Doctor cards (department team rail and the home rail): Arabic sits taller,
   so the specialty's second line was cut in half and long names ran into
   the title. Room for two lines of each. */
html[dir="rtl"] .doctor-card .doctor-name {
  line-height: 1.45;
  height: auto;
  max-height: calc(2 * 1.45em);
  -webkit-line-clamp: 2;
}
html[dir="rtl"] .doctor-card .doctor-spec {
  line-height: 1.7;
  height: auto;
  max-height: calc(2 * 1.7em);
}

/* Arabic menu: "صفحة الرئيسية" is longer than "الرئيسية", and the first item
   ran into the logo. Keep clear space after the logo and let the menu give a
   little instead. */
html[dir="rtl"] .main-header .nav-brand {
  flex-shrink: 0;
  margin-left: 28px;
}
@media (min-width: 1401px) {
  html[dir="rtl"] .main-header .nav-menu { gap: 12px !important; }
}

/* Doctor profile: the sticky section strip (z-index 900) sat over the menu's
   drop-downs - Specialties, About, Patient Care opened underneath it. The
   header, and anything it opens, stays above it. Both languages. */
body:has(.mph-page-doctor) .main-header {
  z-index: 1000;
}

/* OB-GYN check lists: the tick goes before the line, on the right. obgyn.css
   pins it to the left with the text indented from the left (2026-10-27). */
html[dir="rtl"] .mph-page-obgyn .premium-list li {
  padding-left: 0;
  padding-right: 2rem;
}
html[dir="rtl"] .mph-page-obgyn .premium-list li::before {
  left: auto;
  right: 0;
}

/* OB-GYN (theme-pink): its doctor cards' View Profile stays pink. The
   site-wide gradient above is as specific as base.css's pink rule and loads
   later, so it had turned them blue (2026-10-27). */
body.theme-pink .doctor-card-actions a.doctor-btn-profile {
  background: #E0529C !important;
  border-color: #E0529C !important;
}
body.theme-pink .doctor-card-actions a.doctor-btn-profile:hover {
  background: #bf1e6e !important;
  border-color: #bf1e6e !important;
}

/* Doctor education, Arabic: the rail on the right, the year badge on the
   left - it sat on the cap icon (2026-10-27). */
html[dir="rtl"] #education .dr-edu-card {
  border-left: none;
  border-right: 2px solid rgba(28, 151, 212, 0.22);
  border-radius: 14px 0 0 14px;
}
html[dir="rtl"] #education .dr-edu-yr {
  right: auto;
  left: 1.1rem;
}
html[dir="rtl"] #education .dr-edu-body {
  padding-right: 0;
  padding-left: 3.75rem;
}

/* Doctor facts strip, Arabic: the dividers between the facts mirrored, so
   Languages and Nationality are parted by a line again (2026-10-27). */
html[dir="rtl"] .mph-page-doctor .dr-fact {
  border-right: 0;
  border-left: 1px solid var(--dr-rule-soft);
}
html[dir="rtl"] .mph-page-doctor .dr-fact:first-child {
  padding-left: clamp(1rem, 2.5vw, 2.25rem);
  padding-right: 0;
}
html[dir="rtl"] .mph-page-doctor .dr-fact:last-child {
  border-left: 0;
  padding-left: 0;
  padding-right: clamp(1rem, 2.5vw, 2.25rem);
}
@media (max-width: 1024px) {
  html[dir="rtl"] .mph-page-doctor .dr-fact:nth-child(2n) { border-left: 0; padding-left: 0; }
  html[dir="rtl"] .mph-page-doctor .dr-fact:nth-child(2n+1) { padding-right: 0; }
}

/* Picture gallery: a slider per category / department (2026-10-27). */
.gal--rows { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.gal-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.gal-row-title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  color: #004e75;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.gal-row-nav { display: flex; gap: 0.5rem; }
.gal-row-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 78, 117, 0.2);
  background: #fff;
  color: #004e75;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gal-row-btn:hover { background: #004e75; color: #fff; }
html[dir="rtl"] .gal-row-btn i { transform: scaleX(-1); }
.gal-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 16px) / 3);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gal-rail::-webkit-scrollbar { display: none; }
.gal-slide { scroll-snap-align: start; }
.gal-rail .gal-tile { height: 300px; min-height: 0 !important; }
@media (max-width: 900px) { .gal-rail { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .gal-rail { grid-auto-columns: 85%; } .gal-rail .gal-tile { height: 240px; } }

/* Required Documents: the whole box on red (2026-10-29), the "Important"
   note a lighter panel inside it. */
.lay-cardguide .cg-chapter--documents {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
}
.lay-cardguide .cg-chapter--documents .cg-note--box {
  background: rgba(255, 255, 255, 0.14);
}
.lay-cardguide .cg-chapter--documents .cg-circle {
  color: #b91c1c;
}
.lay-cardguide .cg-chapter--documents .cg-tick {
  color: #fff;
}

/* Language switch: English on the left and العربية on the right on both
   sites, not mirrored on the Arabic one (2026-10-28). */
html[dir="rtl"] .lang-switch {
  direction: ltr;
}

/* Opening hours: Friday (closed) in black like the other days, not greyed
   out (2026-10-29). */
html body .ge-hours-row.is-closed :is(dt, dd) {
  color: #000 !important;
}

/* A centred intro: its paragraphs centred under the heading too, not a
   68ch box hung off the left edge (2026-10-29). */
.mph-page-guide .guide-intro.lay-center p {
  margin-inline: auto;
}

/* Package cards: the Book Now button at the foot of each (2026-10-29). */
.lay-chapters--catalogue .guide-chapter {
  display: flex;
  flex-direction: column;
}
.lay-chapters--catalogue .guide-chapter-book {
  margin-top: auto;
  padding-top: 1rem;
}
.lay-chapters--catalogue .guide-chapter-book a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: #004e75;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}
.lay-chapters--catalogue .guide-chapter-book a:hover {
  background: #1c97d4;
}

/* News card without a photograph: its tag sits in the flow above the date. */
.mph-na__tagline { padding: 1.1rem 1.25rem 0; }
.mph-na__tagline .mph-na__tag { position: static; display: inline-block; }

/* Specialties menu: the Supportive tag smaller, with room around it
   (2026-10-29). */
.megamenu-all-name .megamenu-all-tag {
  display: table;
  margin: 5px 0 0;
  padding: 1px 6px;
  font-size: 8px;
  letter-spacing: 0.06em;
}

/* The assistant button carries its label ("Ask MPH AI") all the time, not
   only on hover (2026-10-29). */
.mphw-btn-ai[data-tip]::before {
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Banners on phones: plain brand navy by default on every page (the
   hospital's request, 2026-10-29); a page's own phone photograph or colour,
   set in wp-admin, overrides it. The desktop banner is untouched. */
@media (max-width: 767px) {
  .mph-dr-hero:not([data-m-img]):not([data-m-color]) {
    background-image: none !important;
    background-color: #587c99 !important;
  }
  .mph-dr-hero:not([data-m-img]):not([data-m-color])::after {
    display: none !important;
  }
  /* The homepage slider: the photographs give way to the same navy. */
  #home.hero-section {
    background: #587c99 !important;
  }
  #home.hero-section .hero-bg-slider,
  #home.hero-section .hero-slider-nav {
    display: none !important;
  }
  .mph-dr-hero[data-m-color] {
    background-color: var(--hero-m-color) !important;
  }
  .mph-dr-hero[data-m-color]:not([data-m-img]) {
    background-image: none !important;
  }
  .mph-dr-hero[data-m-img] {
    background-image: var(--hero-m-img) !important;
    background-size: cover !important;
    background-position: center !important;
  }
  /* The Arabic mirrored-photo overlay would repaint the desktop banner. */
  .mph-dr-hero:is([data-m-img], [data-m-color])::after {
    display: none !important;
  }
}

/* News article: the article's top padding pushed the banner ~64px down, so
   the menu sat on white (a pale band) instead of on the photograph. The
   banner now starts under the menu as on every other page (2026-10-29). */
.mph-page-guide .mph-article:has(> .mph-article__hero) {
  padding-top: 0 !important;
}

/* Arabic article banner: the photograph on the left, the text on the right,
   as every other Arabic banner (the photograph drawn mirrored). */
html[dir="rtl"] .mph-article__hero {
  position: relative;
}
html[dir="rtl"] .mph-article__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-position: right center;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
}
html[dir="rtl"] .mph-article__hero > .container {
  position: relative;
  z-index: 1;
}

/* Health Packages: the packages as the department pages' price cards
   (2026-10-29). The card is a column so every button sits at the foot. */
.hp-pkg-grid .pkg-card {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 140px;
}
.hp-pkg-grid .pkg-btn {
  margin-top: auto;
}
.hp-pkg-grid .pkg-card .pkg-feature:last-of-type {
  margin-bottom: 1.5rem;
}
.hp-pkg-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--card-body-color, #475569);
  margin: 0.25rem 0 1rem;
}
.hp-pkg-grid .pkg-price span {
  font-size: 0.8rem;
}
@media (min-width: 768px) and (max-width: 1100px) {
  .hp-pkg-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phones: the menu button sits in the top bar and "Book an Appointment"
   takes the freed width on one line (2026-10-29). The header's own toggle
   stays in the page (the top-bar button works it) but out of sight. */
.top-menu-toggle {
  display: none;
}
@media (max-width: 640px) {
  .top-header-right {
    display: flex !important;
    align-items: center;
    margin-inline-start: auto;
  }
  .top-header-right .lang-switch {
    display: none !important;
  }
  .top-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .main-header .mobile-nav-toggle,
  html[dir="rtl"] .main-header .mobile-nav-toggle {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
  }
  .main-header .navbar #nav-cta-btn,
  html[dir="rtl"] .main-header .navbar #nav-cta-btn {
    max-width: none;
    white-space: nowrap;
    margin-inline-start: auto;
  }
  .main-header .navbar #nav-cta-btn > span:first-child {
    white-space: nowrap;
  }
}

/* The floating stack's emergency button: red, dials the emergency line
   (2026-10-29). */
.mphw-btn-emergency {
  background: #dc2626 !important;
  color: #fff !important;
}
.mphw-btn-emergency:hover {
  background: #b91c1c !important;
}
.mphw-btn-emergency[data-tip]::before {
  background: #dc2626 !important;
}

/* Insurance & Billing: the insurance team's details beside a quick enquiry
   form (2026-10-30). Two columns on a desktop, stacked on a phone. */
.lay-cardguide .cg-insurance {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2rem;
    margin: 2.5rem 0;
    padding: 2rem;
    border: 1px solid var(--cg-line, #e2e8f0);
    border-radius: 20px;
    background: #f5f9fd;
    scroll-margin-top: 120px;
}

.cg-insurance-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 99px;
    background: #ebf8ff;
    color: #1c97d4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lay-cardguide .cg-insurance-info h2 {
    margin: 0.75rem 0 0.5rem;
    color: #004e75;
    font-size: 1.6rem;
    line-height: 1.25;
}

.lay-cardguide .cg-insurance-info > p {
    margin: 0;
    color: #334155;
    line-height: 1.7;
}

.cg-insurance-contact {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--cg-line, #e2e8f0);
}

.lay-cardguide .cg-insurance-contact h3 {
    margin: 0 0 0.5rem;
    color: #004e75;
    font-size: 1rem;
}

.cg-insurance-contact ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.cg-insurance-contact a {
    color: #004e75;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 860px) {
    .lay-cardguide .cg-insurance {
        grid-template-columns: 1fr;
        padding: 1.25rem;
        gap: 1.25rem;
    }
}