/* R48 — Arabic-first spatial system and premium interaction polish. */

:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid rgba(226,180,89,.68);
  outline-offset:4px;
}

.service-mobile-controls{display:none}

html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .site-header .nav-row{direction:rtl}
html[dir="rtl"] .site-header nav{direction:rtl}
html[dir="rtl"] .site-header nav a:after{left:100%;right:0}
html[dir="rtl"] .site-header nav a:hover:after{left:0}
html[dir="rtl"] .nav-cta span,
html[dir="rtl"] .hero-actions .button span,
html[dir="rtl"] .contact-action b,
html[dir="rtl"] .service-dialog .button span,
html[dir="rtl"] .doctor-content .button span{transform:scaleX(-1)}

/* Hero: mirror the composition, not only the typography. */
@media(min-width:721px){
  html[dir="rtl"] .hero-image{
    inset:0 45% 0 0;
    clip-path:ellipse(76% 74% at 24% 50%);
  }
  html[dir="rtl"] .hero-image img{object-position:58% center}
  html[dir="rtl"] .hero-image:after{
    background:linear-gradient(270deg,var(--navy2) 0,rgba(3,29,56,.82) 9%,transparent 51%),linear-gradient(0deg,rgba(3,29,56,.35),transparent);
  }
  html[dir="rtl"] .hero-shape{left:auto;right:-210px}
  html[dir="rtl"] .hero-layout{
    direction:ltr;
    grid-template-columns:220px minmax(0,1fr);
    grid-template-areas:"card copy";
  }
  html[dir="rtl"] .hero-copy{grid-area:copy;direction:rtl;padding-right:clamp(44px,6vw,96px);padding-left:0}
  html[dir="rtl"] .hero-copy:before{
    inset:-54px -4vw -48px -42px;
    background:linear-gradient(90deg,rgba(3,29,56,.06),rgba(3,29,56,.55) 50%,rgba(3,29,56,.88));
  }
  html[dir="rtl"] .hero-card{grid-area:card;direction:rtl}
}

html[dir="rtl"] .hero h1{max-width:760px;line-height:.94}
html[dir="rtl"] .hero-actions{justify-content:flex-start}
html[dir="rtl"] .hero-meta,.hero-meta .meta-grid{direction:rtl}
html[dir="rtl"] .meta-grid p{border-right:0;border-left:1px solid rgba(255,255,255,.12);padding-left:14px;padding-right:25px}
html[dir="rtl"] .meta-grid p:first-child{padding-right:0}
html[dir="rtl"] .meta-grid p:last-child{border-left:0}

/* Editorial sections and the service bento now start from the reading edge. */
html[dir="rtl"] .manifesto-grid,
html[dir="rtl"] .section-top,
html[dir="rtl"] .service-bento,
html[dir="rtl"] .journey-grid,
html[dir="rtl"] .practice-gallery,
html[dir="rtl"] .contact-grid{direction:rtl}
html[dir="rtl"] .service-card{direction:rtl;text-align:right}
html[dir="rtl"] .service-card .num{left:auto;right:18px}
html[dir="rtl"] .service-card .line-art{right:auto;left:-20px}
html[dir="rtl"] .service-card:before{left:auto;right:-80%;transform:skewX(18deg)}
html[dir="rtl"] .service-card:hover:before{left:auto;right:130%}
html[dir="rtl"] .card-copy button{text-align:right}
html[dir="rtl"] .card-copy button b{transform:scaleX(-1)}
html[dir="rtl"] .card-copy button:hover b{transform:scaleX(-1) translate(3px,-3px)}
html[dir="rtl"] .service-card:nth-child(1) img{object-position:57% center}
html[dir="rtl"] .service-card:nth-child(2) img{object-position:48% center}
html[dir="rtl"] .service-card:nth-child(3) img{object-position:43% center}
html[dir="rtl"] .service-card:nth-child(5) img{object-position:58% center}
html[dir="rtl"] .service-card:nth-child(6) img{object-position:52% center}

html[dir="rtl"] .journey-heading{direction:rtl}
html[dir="rtl"] .journey-step{text-align:right}
html[dir="rtl"] .journey-icon{right:auto;left:28px}
html[dir="rtl"] .journey-step p{margin-left:auto;margin-right:0}

/* Doctor and gallery: culturally natural right-to-left visual hierarchy. */
@media(min-width:721px){
  html[dir="rtl"] .doctor{
    direction:ltr;
    grid-template-columns:52% 48%;
    grid-template-areas:"content photo";
    min-height:620px;
  }
  html[dir="rtl"] .doctor-photo{
    grid-area:photo;
    align-self:center;
    width:calc(100% - 5vw);
    height:auto;
    aspect-ratio:2.03/1;
    margin:72px 5vw 72px 0;
    clip-path:none;
    border-radius:18px 120px 18px 120px;
    box-shadow:0 32px 75px rgba(0,18,38,.32);
  }
  html[dir="rtl"] .doctor-photo .doctor-real-photo{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
  html[dir="rtl"] .doctor-content{grid-area:content;direction:rtl;padding:82px 7vw 72px 9vw}
}
html[dir="rtl"] .photo-caption{right:11%;left:auto;padding-right:16px;padding-left:0;border-right:1px solid var(--gold);border-left:0}
html[dir="rtl"] .doctor-stats{direction:rtl}
html[dir="rtl"] .gallery-main{border-radius:110px 0 0 0}
html[dir="rtl"] .practice-gallery figcaption{text-align:right}

/* Testimonials: label on the right, quote on the left, logical arrows. */
@media(min-width:721px){
  html[dir="rtl"] .voices-layout{
    direction:ltr;
    grid-template-columns:minmax(0,62%) 38%;
    grid-template-areas:"quote label";
  }
  html[dir="rtl"] .voices-label{grid-area:label;direction:rtl}
  html[dir="rtl"] .quote-stage{grid-area:quote;direction:rtl}
}
html[dir="rtl"] .rating{direction:rtl}
html[dir="rtl"] .quote-mark{display:block;text-align:right}
html[dir="rtl"] .quote p small{margin-left:0;margin-right:12px}
html[dir="rtl"] .quote-controls{direction:ltr}
html[dir="rtl"] .quote-controls span{margin-left:auto;margin-right:0;direction:ltr}

/* Visit section: working information is first on the right, map gains the visual field. */
html[dir="rtl"] .visit-heading{direction:rtl}
@media(min-width:721px){
  html[dir="rtl"] .visit-grid{
    direction:ltr;
    grid-template-columns:1.1fr .9fr;
    grid-template-areas:"map hours";
  }
  html[dir="rtl"] .hours-card{grid-area:hours;direction:rtl}
  html[dir="rtl"] .map-card{grid-area:map;direction:rtl}
}
html[dir="rtl"] .hours-title,
html[dir="rtl"] .hours-title>div,
html[dir="rtl"] .hours-list>div,
html[dir="rtl"] .emergency-card,
html[dir="rtl"] .map-topbar,
html[dir="rtl"] .map-details{direction:rtl}
html[dir="rtl"] .hours-list time{direction:ltr;unicode-bidi:embed;text-align:right}
html[dir="rtl"] .map-details{grid-template-columns:auto 1fr auto}
html[dir="rtl"] .map-details p b{direction:ltr;unicode-bidi:embed;text-align:right}
html[dir="rtl"] .map-modes{direction:rtl}
html[dir="rtl"] .contact-action{text-align:right}
html[dir="rtl"] .contact-action b{align-self:flex-start}

/* Dialogs and inner routes have true RTL component order. */
@media(min-width:721px){
  html[dir="rtl"] .service-dialog[open]{
    direction:ltr;
    grid-template-columns:55% 45%;
    grid-template-areas:"copy media";
  }
  html[dir="rtl"] .service-dialog-media{grid-area:media}
  html[dir="rtl"] .service-dialog-copy{grid-area:copy;direction:rtl}
  html[dir="rtl"] .booking-dialog[open]{
    direction:ltr;
    grid-template-columns:60% 40%;
    grid-template-areas:"form side";
  }
  html[dir="rtl"] .booking-side{grid-area:side;direction:rtl}
  html[dir="rtl"] .booking-form{grid-area:form;direction:rtl}
  html[dir="rtl"] .doctor-page-grid{
    direction:ltr;
    grid-template-columns:1.08fr .92fr;
    grid-template-areas:"copy photo";
  }
  html[dir="rtl"] .doctor-page-photo{grid-area:photo}
  html[dir="rtl"] .doctor-page-copy{grid-area:copy;direction:rtl}
}
html[dir="rtl"] .booking-progress{direction:rtl}
html[dir="rtl"] .choice-grid input:checked+span{box-shadow:inset -4px 0 #d3a24a}
html[dir="rtl"] .booking-step.is-active{animation:stepInRtl .35s ease-out}
html[dir="rtl"] .inner-services,
html[dir="rtl"] .inner-journey,
html[dir="rtl"] .doctor-value-grid,
html[dir="rtl"] .credentials-grid,
html[dir="rtl"] .contact-planner-grid,
html[dir="rtl"] .service-detail-grid,
html[dir="rtl"] .service-process{direction:rtl}
html[dir="rtl"] .inner-service-card,
html[dir="rtl"] .doctor-page-copy,
html[dir="rtl"] .booking-help,
html[dir="rtl"] .service-detail-copy{text-align:right}
html[dir="rtl"] .page-hero{border-radius:0 0 0 70px}
html[dir="rtl"] .doctor-page-photo,
html[dir="rtl"] .service-detail-premium .service-detail-media{border-radius:15px 180px 15px 180px}
html[dir="rtl"] .doctor-page-photo{
  height:auto!important;
  aspect-ratio:2.03/1;
  margin-top:clamp(18px,4vw,60px);
}
html[dir="rtl"] .doctor-page-photo .doctor-real-photo{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center top!important;
  transform:none!important;
}
html[dir="rtl"] .inner-journey,
html[dir="rtl"] .service-process{border-radius:50px 0 0 0}
html[dir="rtl"] .service-benefits li{padding:18px 34px 18px 14px}
html[dir="rtl"] .service-benefits li:before{left:auto;right:14px}
html[dir="rtl"] .inner-service-card .service-body button span{transform:scaleX(-1)}
html[dir="rtl"] .footer-grid{direction:rtl;text-align:right}

@keyframes stepInRtl{from{opacity:0;transform:translateX(-18px)}}

@media(max-width:720px){
  html[dir="rtl"] .menu-button{margin-right:auto;margin-left:0}
  html[dir="rtl"] .menu-open .site-header .nav-row>nav{
    direction:rtl;
    align-items:stretch;
    text-align:right;
    padding:18px;
  }
  html[dir="rtl"] .menu-open .site-header .nav-row>nav a{
    justify-content:flex-start;
    padding-inline:16px;
    font-size:14px;
  }
  html[dir="rtl"] .hero-image{inset:390px -30px 108px -90px;clip-path:ellipse(80% 52% at 42% 52%)}
  html[dir="rtl"] .hero-image img{object-position:57% center}
  html[dir="rtl"] .hero-image:after{background:linear-gradient(180deg,var(--navy2),transparent 37%,rgba(3,29,56,.22))}
  html[dir="rtl"] .hero-shape{right:-250px;left:auto}
  html[dir="rtl"] .hero-copy:before{inset:-20px -15px -24px;background:linear-gradient(180deg,rgba(3,29,56,.9),rgba(3,29,56,.42))}
  html[dir="rtl"] .hero h1{font-size:clamp(49px,14vw,60px);line-height:1.02}
  html[dir="rtl"] .hero-actions{grid-template-columns:1fr}
  html[dir="rtl"] .meta-grid p:nth-child(odd){border-left:1px solid rgba(255,255,255,.12)}
  html[dir="rtl"] .meta-grid p:nth-child(even){border-left:0}

  .service-mobile-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:16px;
  }
  .service-slide-status{min-width:0;flex:1;display:flex;align-items:center;gap:13px}
  .service-slide-status>span{font-size:10px;font-weight:700;color:var(--navy);white-space:nowrap;direction:ltr}
  .service-slide-status>i{height:2px;flex:1;overflow:hidden;background:rgba(6,43,82,.14)}
  .service-slide-status>i>b{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--gold),var(--blue));transform:scaleX(var(--service-ratio,.1667));transform-origin:left;transition:transform .35s}
  .service-mobile-controls>div:last-child{display:flex;direction:ltr;gap:8px}
  .service-mobile-controls button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(6,43,82,.18);background:#fff;color:var(--navy);font-size:18px;box-shadow:0 10px 25px rgba(6,43,82,.09);cursor:pointer}
  .service-mobile-controls button:disabled{opacity:.35;box-shadow:none}
  html[dir="rtl"] .service-slide-status>i>b{transform-origin:right}
  html[dir="rtl"] .service-mobile-controls{direction:ltr}
  html[dir="rtl"] .service-slide-status{direction:rtl}
  html[dir="rtl"] .service-bento{margin-right:0;margin-left:-15px;padding-left:15px;padding-right:0;scroll-padding-inline:0 15px}
  html[dir="rtl"] .service-card,
  html[dir="rtl"] .service-card.featured,
  html[dir="rtl"] .service-card.wide{flex-basis:calc(100vw - 54px);scroll-snap-align:start}
  html[dir="rtl"] .journey-icon{left:24px}
  html[dir="rtl"] .doctor-photo{
    height:190px!important;
    clip-path:none;
    border-radius:0 0 0 56px;
  }
  html[dir="rtl"] .doctor-photo .doctor-real-photo{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
  html[dir="rtl"] .photo-caption{right:24px;bottom:18px}
  html[dir="rtl"] .gallery-main{border-radius:70px 0 0 0}
  html[dir="rtl"] .quote-stage{padding:50px 0 72px}
  html[dir="rtl"] .quote-controls{left:0;right:0}
  html[dir="rtl"] .visit-heading>p{padding-right:18px;padding-left:0;border-right:1px solid #d7e1e7;border-left:0}
  html[dir="rtl"] .map-details{grid-template-columns:auto 1fr}
  html[dir="rtl"] .map-details>div{grid-column:1/-1}
  html[dir="rtl"] .service-dialog-copy,
  html[dir="rtl"] .booking-side,
  html[dir="rtl"] .booking-form{direction:rtl}
  html[dir="rtl"] .doctor-page-photo,
  html[dir="rtl"] .service-detail-premium .service-detail-media{border-radius:10px 90px 10px 90px}
  html[dir="rtl"] .doctor-page-photo{margin-top:0;margin-bottom:34px}
  html[dir="rtl"] .doctor-page-copy,
  html[dir="rtl"] .contact-page-hero>div{padding-inline:8px}
  html[dir="rtl"] .doctor-page-copy h1,
  html[dir="rtl"] .contact-page-hero h1{font-size:52px;line-height:1.04}
  html[dir="rtl"] .contact-phone b{font-size:20px;white-space:nowrap;direction:ltr;unicode-bidi:isolate;text-align:right}
  html[dir="rtl"] .page-hero{border-radius:0 0 0 38px}
  html[dir="rtl"] .inner-journey,
  html[dir="rtl"] .service-process{border-radius:28px 0 0 0}
}

@media(prefers-reduced-motion:reduce){
  .service-slide-status>i>b{transition:none}
}