/* RSA controls layer v28 (2026-10-25) — one design system for every button.
   Loaded last on every page, after responsive.css. It is the single source of
   truth for button geometry, icons, states and floating positions; the older
   per-file size rules it replaces were removed from site.css, phase1-video.css,
   audit-fixes.css and responsive.css in the same release.

   Families
   .btn               text actions (primary / secondary), pill or rounded
   .ctl               icon-only circular controls (header, video, gallery)
   .fab               floating actions (WhatsApp, back to top)
   Surfaces           light page  ·  dark/video (header over video, hero)    */

:root{
  /* colour — taken from the existing brand */
  --c-navy:#073448;          /* text on light, primary fill on dark */
  --c-deep:#07343c;          /* header bar */
  --c-teal:#087e86;          /* links, focus on light (4.8:1 on white) */
  --c-mint:#b7f4ea;          /* accent text and focus ring on dark (10.7:1 on navy) */
  --c-mint-pale:#e9f4ef;     /* light pill on dark */
  --c-coral:#ff795a;         /* primary action on light pages (navy text 5.1:1) */
  --c-wa:#1a9e52;            /* WhatsApp green, deep enough for a white mark (3.5:1) */
  --c-wa-hover:#168f4a;
  /* glass used on video and dark surfaces; fallback is the solid value */
  --glass-fill:rgba(4,36,44,.5);
  --glass-fill-solid:rgba(4,36,44,.74);
  --glass-line:rgba(255,255,255,.62);
  --glass-hover:rgba(4,36,44,.72);
  /* geometry */
  --ctl:44px;                /* icon controls: equal width and height */
  --ctl-video:48px;          /* hero video controls on larger screens */
  --icon:20px;
  --icon-lg:22px;
  --fab:56px;                /* WhatsApp */
  --fab-sm:44px;             /* back to top */
  --fab-icon:26px;
  --fab-edge:24px;           /* distance from the screen edge */
  --fab-gap:12px;            /* gap between stacked floating buttons */
  --r-pill:999px;
  --r-btn:12px;
  --ring:3px;
  --shadow-fab:0 6px 18px rgba(0,28,46,.26);
  --shadow-ctl:0 2px 10px rgba(0,22,30,.18);
  /* motion */
  --dur:.18s;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* layers: header 100 > floating 45 > bottom bar 25; native dialogs sit above all */
  --z-fab:45;
}
@media (max-width:767px){
  :root{--fab:52px;--fab-icon:24px;--fab-edge:16px;--ctl-video:44px}
}
@media (max-width:374px){
  :root{--ctl:40px}           /* visual size; the hit area stays 44px (see ::after below) */
}

/* ---------- Shared icon rules ---------- */
.btn .icon,.ctl .icon,.fab .icon{flex:none;display:block;width:var(--icon);height:var(--icon);pointer-events:none}
.icon-ext{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}
[dir=rtl] .icon-mirror{transform:scaleX(-1)}

/* ---------- Text buttons (.btn) ---------- */
.btn{
  box-sizing:border-box;max-width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  line-height:1.3;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn .icon-ext{width:18px;height:18px}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none;pointer-events:none}
.btn[aria-busy=true]{cursor:progress;position:relative;color:transparent!important}
.btn[aria-busy=true]::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-color:var(--c-navy) transparent var(--c-navy) var(--c-navy);animation:rsa-spin .8s linear infinite}
@keyframes rsa-spin{to{transform:rotate(1turn)}}
.btn:focus-visible{outline:var(--ring) solid var(--c-teal);outline-offset:3px;box-shadow:0 0 0 3px #fff}

/* Hero (video surface): primary white pill, secondary outlined glass pill */
.cinema-actions .btn{border-radius:var(--r-pill);gap:12px}
.cinema-actions .btn.primary{background:#fff;color:var(--c-navy);border:1px solid #fff;box-shadow:0 4px 16px rgba(0,22,30,.22)}
.cinema-actions .cinema-secondary{color:#fff;border:1px solid var(--glass-line);background:var(--glass-fill-solid)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cinema-actions .cinema-secondary{background:var(--glass-fill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
.cinema-actions .btn:focus-visible,.cinema-foot a:focus-visible{outline:var(--ring) solid var(--c-mint);outline-offset:3px;box-shadow:none}
@media (hover:hover){
  .cinema-actions .btn.primary:hover{background:var(--c-mint-pale);border-color:var(--c-mint-pale);transform:translateY(-1px)}
  .cinema-actions .cinema-secondary:hover{background:var(--glass-hover);border-color:#fff}
}
.cinema-foot a{gap:6px}
.cinema-foot a .icon-ext{width:15px;height:15px}

/* ---------- Icon-only circular controls (.ctl and the header circles) ---------- */
.ctl,
.rsa-nav.site-header .iconbtn,
.rsa-nav.site-header .mobile-menu{
  box-sizing:border-box;position:relative;flex:none;
  inline-size:var(--ctl);block-size:var(--ctl);min-inline-size:var(--ctl);min-block-size:var(--ctl);
  padding:0;margin:0;border-radius:50%;
  align-items:center;justify-content:center;line-height:0;font-size:0;
  appearance:none;-webkit-appearance:none;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
/* hit area never smaller than 44px, even when the visual circle is 40px */
.ctl::after,
.rsa-nav.site-header .iconbtn::after,
.rsa-nav.site-header .mobile-menu::after,
.rsa-nav.site-header .header-cta::after,
.rsa-nav.site-header .staff-entry::after,
.rsa-nav.site-header .language-picker summary::after{content:"";position:absolute;inset:min(0px,calc((var(--ctl) - 44px)/2));border-radius:inherit}
.ctl .icon,
.rsa-nav.site-header .iconbtn svg,
.rsa-nav.site-header .mobile-menu svg{width:var(--icon);height:var(--icon)}
.ctl:active,.rsa-nav.site-header .iconbtn:active{transform:scale(.94)}
.ctl:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ctl{display:inline-grid;place-items:center}
.ctl[hidden]{display:none}

/* Video-surface variant: glass circle that stays legible over light and dark frames */
.ctl-video{color:#fff;border:1px solid var(--glass-line);background:var(--glass-fill-solid);box-shadow:var(--shadow-ctl)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ctl-video{background:var(--glass-fill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
@media (hover:hover){.ctl-video:hover{background:var(--glass-hover);border-color:#fff}}
.ctl-video:focus-visible,.cinema .ctl-video:focus-visible{outline:var(--ring) solid var(--c-mint);outline-offset:3px}

/* Play / pause share one button: both icons are present, only one is shown,
   so swapping state never changes the button's size or position. */
.ctl .icon-play,.ctl .icon-pause{grid-area:1/1;fill:currentColor;stroke:currentColor}
.ctl[data-state=playing] .icon-play,.ctl[data-state=paused] .icon-pause{visibility:hidden}

/* ---------- Hero foot: caption + video controls ---------- */
.phase1-home .cinema-foot{
  --foot-mx:clamp(24px,5vw,80px);
  flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:12px;
  margin-inline:var(--foot-mx);
  /* reserve the column used by the floating WhatsApp button so the two never touch */
  padding-inline-end:max(0px,calc(var(--fab-edge) + var(--fab) + var(--fab-gap) - 12px - var(--foot-mx)));
}
.phase1-home .cinema-foot>div:first-child{flex:1 1 200px;min-width:0}
.cinema-foot>.cinema-controls{display:flex;flex-direction:row;align-items:center;gap:var(--fab-gap);margin-inline-start:auto;flex:none}
.cinema-controls .ctl-video{inline-size:var(--ctl-video);block-size:var(--ctl-video);min-inline-size:var(--ctl-video);min-block-size:var(--ctl-video)}
.cinema-controls .ctl-video .icon{width:var(--icon-lg);height:var(--icon-lg)}
.cinema-controls .cinema-down{display:inline-grid}
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  /* Phones: WhatsApp is set aside while the hero foot is on screen (see below), so no column is reserved */
  .phase1-home .cinema-foot{--foot-mx:20px;padding-inline-end:0}
}
@media (orientation:landscape) and (max-height:520px){
  .phase1-home .cinema-foot{padding-block:10px 12px}
}

/* ---------- Header controls (over the video and on light pages) ---------- */
.rsa-nav.site-header .header-tools{gap:8px;align-items:center}
.rsa-nav.site-header .iconbtn,
.rsa-nav.site-header .mobile-menu{color:#fff;border:1px solid var(--glass-line);background:transparent}
.rsa-nav.site-header .header-cta,
.rsa-nav.site-header .staff-entry,
.rsa-nav.site-header .header-tools>.langnav,
.rsa-nav.site-header .language-picker summary{box-sizing:border-box;position:relative;flex:none;min-block-size:var(--ctl);block-size:var(--ctl);border-radius:var(--r-pill);line-height:1.2}
.rsa-nav.site-header .header-cta{padding-block:0;padding-inline:14px;gap:8px}
.rsa-nav.site-header .header-cta .icon{width:18px;height:18px}
.rsa-nav.site-header .staff-entry{padding-block:0;padding-inline:12px;gap:6px}
.rsa-nav.site-header .staff-entry svg{width:18px;height:18px;flex:none}
.rsa-nav.site-header .header-tools>.langnav{padding:3px;align-items:center;gap:2px}
.rsa-nav.site-header .header-tools>.langnav a{box-sizing:border-box;display:inline-grid;place-items:center;min-inline-size:36px;block-size:36px;min-block-size:36px;padding:0 6px;border-radius:var(--r-pill);line-height:1}
/* Over the video the bar is transparent, so the circles carry their own glass fill */
.rsa-nav.over-video .iconbtn,.rsa-nav.over-video .mobile-menu,.rsa-nav.over-video .staff-entry,.rsa-nav.over-video .language-picker summary{background:var(--glass-fill-solid)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rsa-nav.over-video .iconbtn,.rsa-nav.over-video .mobile-menu,.rsa-nav.over-video .staff-entry,.rsa-nav.over-video .language-picker summary{background:var(--glass-fill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
@media (hover:hover){
  .rsa-nav.site-header .iconbtn:hover,.rsa-nav.site-header .mobile-menu:hover,.rsa-nav.site-header .staff-entry:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
  .rsa-nav.site-header .header-cta:hover{background:#fff}
}
.rsa-nav.site-header .header-cta:active,.rsa-nav.site-header .staff-entry:active,.rsa-nav.site-header .mobile-menu:active{transform:scale(.96)}
.rsa-nav a:focus-visible,.rsa-nav button:focus-visible,.rsa-nav summary:focus-visible{outline:var(--ring) solid var(--c-mint);outline-offset:3px;box-shadow:none}

/* Tablet widths share the bar with the link strip: same 44px height, tighter widths */
@media (min-width:761px) and (max-width:1100px){
  .rsa-nav.site-header .header-tools{gap:4px}
  .rsa-nav.site-header .header-tools>.langnav{gap:0;padding:2px}
  .rsa-nav.site-header .header-tools>.langnav a{min-inline-size:28px;padding:0 3px}
  .rsa-nav.site-header .header-cta{padding-inline:10px;gap:6px}
  .rsa-nav.site-header .staff-entry{padding-inline:8px;gap:4px}
}
@media (max-width:760px){
  .rsa-nav.site-header .header-tools{gap:6px}
  /* Phones: every header control is the same 44px circle (the language control
     is a 44px-high pill because it carries the code "ID / EN / AR"). */
  .rsa-nav.site-header .header-cta,
  .rsa-nav.site-header .staff-entry{inline-size:var(--ctl);block-size:var(--ctl);min-inline-size:var(--ctl);min-block-size:var(--ctl);padding:0;border-radius:50%;display:inline-grid;place-items:center;gap:0}
  .rsa-nav.site-header .header-cta span,.rsa-nav.site-header .staff-entry span{display:none}
  .rsa-nav.site-header .header-cta .icon,.rsa-nav.site-header .staff-entry svg{width:var(--icon);height:var(--icon)}
  .rsa-nav.site-header .staff-entry{border:1px solid var(--glass-line)}
  .rsa-nav.site-header .mobile-menu{display:inline-grid!important;order:10}
  .rsa-nav.site-header .language-picker summary{block-size:var(--ctl);min-block-size:var(--ctl);min-inline-size:var(--ctl);padding-block:0;padding-inline:10px;gap:4px;justify-content:center;border:1px solid var(--glass-line)}
  .rsa-nav.site-header .language-picker summary>.icon{width:18px;height:18px}
  .rsa-nav.site-header .language-picker summary>.icon:last-child{width:14px;height:14px}
}
@media (max-width:374px){
  .rsa-nav.site-header .header-tools{gap:4px}
  .rsa-nav.site-header .language-picker summary{padding-inline:8px}
}

/* ---------- Floating actions ---------- */
.floating-contact{
  position:fixed;z-index:var(--z-fab);
  inset-inline-end:max(var(--fab-edge),env(safe-area-inset-right));
  inset-block-end:calc(var(--fab-edge) + var(--rsa-bottom-ui,0px) + env(safe-area-inset-bottom));
  /* WhatsApp stays anchored at the bottom; back-to-top appears above it,
     so showing or hiding it never moves the WhatsApp button. */
  display:flex;flex-direction:column-reverse;align-items:center;gap:var(--fab-gap);
  pointer-events:none;
}
[dir=rtl] .floating-contact{inset-inline-end:max(var(--fab-edge),env(safe-area-inset-left))}
.floating-contact>*{pointer-events:auto}
.fab{box-sizing:border-box;position:relative;flex:none;display:grid;place-items:center;padding:0;margin:0;border-radius:50%;line-height:0;font-size:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease),visibility var(--dur)}
.fab-wa.floating-wa{inline-size:var(--fab);block-size:var(--fab);background:var(--c-wa)!important;color:#fff!important;border:2px solid #fff!important;box-shadow:var(--shadow-fab)!important}
.fab-wa .whatsapp-icon{width:var(--fab-icon);height:var(--fab-icon)}
/* no endless pulsing: the halo is retired */
.fab-wa.floating-wa::before,.fab-wa.floating-wa::after{content:none;animation:none}
.fab-secondary{inline-size:var(--fab-sm);block-size:var(--fab-sm);background:#fff;color:var(--c-navy);border:1px solid #bfd1d7;box-shadow:0 4px 14px rgba(0,28,46,.16)}
.fab-secondary .icon{width:var(--icon);height:var(--icon)}
.fab-secondary[hidden]{display:none}
@media (hover:hover){
  .fab-wa.floating-wa:hover{background:var(--c-wa-hover)!important;transform:translateY(-2px)}
  .fab-secondary:hover{background:#eef6f4;border-color:#8fb3ba}
}
.fab:active{transform:scale(.94)}
.fab:focus-visible{outline:var(--ring) solid var(--c-teal);outline-offset:3px;box-shadow:0 0 0 3px #fff,var(--shadow-fab)}
.cinema .fab:focus-visible{outline-color:var(--c-mint)}

/* Phones: WhatsApp steps aside while the hero's own buttons or video controls are on screen (v27 rule, extended to the controls) */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .hero-cta-visible .floating-contact .floating-wa{opacity:0;visibility:hidden;transform:scale(.85);pointer-events:none}
}
/* On-screen keyboard: fixed bars and floating buttons give way to the field being typed in */
@media (max-width:760px){
  .rsa-typing .floating-contact,.rsa-typing .mobilebar{visibility:hidden;opacity:0;pointer-events:none}
}
/* Leave room at the page end (inside the footer's own background) so the last
   links can scroll clear of the floating button or the bottom bar. */
.phase1-home .footer-refined{padding-block-end:calc(var(--fab) + var(--fab-edge) + var(--fab-gap))}
@media (max-width:640px){
  body:not(.phase1-home) .footer-refined{padding-block-end:max(18px,var(--rsa-bottom-ui,0px))}
}

/* ---------- Bottom bar (inner pages, phones) ---------- */
.mobilebar{transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.mobilebar .btn{min-height:48px}

/* ---------- Story pager: previous / next are icon controls (44px circles);
   the numbered steps stay compact (36×40, above the 24px WCAG 2.2 minimum). ---------- */
.hero-system .hero-pager .hero-prev,.hero-system .hero-pager .hero-next{box-sizing:border-box;flex:0 0 44px;inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;padding:0;border-radius:50%;display:inline-grid;place-items:center}
.hero-system .hero-pager .hero-prev .icon,.hero-system .hero-pager .hero-next .icon{width:var(--icon);height:var(--icon)}

/* Media format switch (wide / portrait): full 44px height */
.media-format button{min-height:44px}

/* ---------- Clinic gallery toggle ---------- */
.space-toggle.ctl{inline-size:var(--ctl);block-size:var(--ctl)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.ctl,.fab,.mobilebar,.floating-contact .floating-wa,.rsa-nav.site-header .iconbtn,.rsa-nav.site-header .header-cta,.rsa-nav.site-header .staff-entry{transition:none}
  .btn:active,.ctl:active,.fab:active,.btn:hover,.fab-wa.floating-wa:hover{transform:none}
  .btn[aria-busy=true]::after{animation-duration:2.4s}
}
/* Forced colours (Windows high contrast): keep a visible edge on every control */
@media (forced-colors:active){
  .ctl,.fab,.btn,.rsa-nav.site-header .header-cta,.rsa-nav.site-header .staff-entry{border:1px solid ButtonText}
}