/*
 * YR theme: main stylesheet — design «الزجاج» (messages 30–31, _design/glass-final/GLASS_HANDOFF.md).
 * Fonts: Alexandria variable (headings/buttons/numbers 500-700) + IBM Plex Sans Arabic (text 400/600), self-hosted, subset, swap.
 * Glass: .yg-glass-d (on navy) and .yg-glass-l (on light) only. Motion: CSS only; never on the H1 or the hero image (LCP).
 * Logical properties so /en/ (LTR) mirrors correctly. Class prefix yg- (no collision with content classes).
 */

/* Fonts (message 33 / هـ): Alexandria VARIABLE (one file per script, weights 500–700) + IBM Plex Sans Arabic 400 and 600 only.
 * Subset to the characters the site uses (+ the core Arabic letters, marks, digits and punctuation) with HarfBuzz hb-subset.
 * Each face = 3 files: arabic (Arabic script) · common (space, digits, punctuation; every page) · latin (Latin LETTERS only,
 * so Arabic pages without Latin words never load it). Weight 500 of Plex is not shipped: 500 renders with 400. */
@font-face{font-family:"Alexandria";font-style:normal;font-display:swap;font-weight:500 700;src:url("../fonts/alexandria-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFE,U+200C-200E}
@font-face{font-family:"Alexandria";font-style:normal;font-display:swap;font-weight:500 700;src:url("../fonts/alexandria-common.woff2") format("woff2");unicode-range:U+0000-0040,U+005B-0060,U+007B-00BF,U+00D7,U+00F7,U+2000-200B,U+2010-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";font-style:normal;font-display:swap;font-weight:500 700;src:url("../fonts/alexandria-latin.woff2") format("woff2");unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-024F,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/plex-arabic-400.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFE,U+200C-200E}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/plex-common-400.woff2") format("woff2");unicode-range:U+0000-0040,U+005B-0060,U+007B-00BF,U+00D7,U+00F7,U+2000-200B,U+2010-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/plex-latin-400.woff2") format("woff2");unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-024F,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/plex-arabic-600.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFE,U+200C-200E}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/plex-common-600.woff2") format("woff2");unicode-range:U+0000-0040,U+005B-0060,U+007B-00BF,U+00D7,U+00F7,U+2000-200B,U+2010-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/plex-latin-600.woff2") format("woff2");unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-024F,U+1E00-1EFF}

:root {
	/* colours — glass handoff §1 */
	--yr-bg: #f4f7fb;
	--yr-tint: #e9eff8;
	--yr-card: #fff;
	--yr-ink: #102136;
	--yr-text: #26384f;
	--yr-text-2: #355575;
	--yr-text-3: #4a5b72;
	--yr-primary: #24417c;
	--yr-primary-2: #3a5da5;
	--yr-light: #9fb6de;
	--yr-line: rgba(36, 65, 124, .10);
	--yr-line-2: rgba(36, 65, 124, .16);
	--yr-navy: linear-gradient(160deg, #0e1d33 0%, #18305a 50%, #24417c 100%);
	--yr-focus: #3a5da5;
	--yr-wa: #18772f;
	--yr-wa-h: #13602a;
	--yr-call: #12385d;
	/* container */
	--yr-wrap: 1200px;
	--yr-gutter: 32px;
	--yr-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	--yr-font-h: "Alexandria", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	--yr-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 860px) { :root { --yr-gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--yr-bg);
	color: var(--yr-ink);
	font-family: var(--yr-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.9;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .yg-h { font-family: var(--yr-font-h); font-weight: 700; }
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--yr-primary); }
a:hover { color: var(--yr-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--yr-focus); outline-offset: 3px;
}
input, textarea, select, button { font: inherit; }
.yr-sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yr-skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100000; padding: 10px 16px; background: #0e1d33; color: #fff; border-radius: 10px; }
.yr-skip:focus { top: 8px; color: #fff; }
.yr-ico { width: 1em; height: 1em; flex: none; }

.yr-wrap { position: relative; width: 100%; max-width: var(--yr-wrap); margin-inline: auto; padding-inline: var(--yr-gutter); }
.yr-narrow { max-width: 820px; }
.yr-main { position: relative; display: block; min-height: 40vh; overflow-x: clip; }
.yr-main:focus { outline: 0; }

/* ---------------------------------------------------------------- Glass: two classes only (handoff §1) */
.yg-glass-d { background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.yg-glass-l { background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.66)); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 24px 60px -28px rgba(16,33,54,.5), inset 0 1px 0 #fff; }

/* ---------------------------------------------------------------- Buttons */
.yg-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 12px; font-family: var(--yr-font-h); font-weight: 600; font-size: 15px; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s; }
.yg-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60%; inset-inline-start: -80%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: inset-inline-start .6s ease; pointer-events: none; }
.yg-btn:hover { transform: translateY(-2px); }
.yg-btn:hover::after { inset-inline-start: 130%; }
.yg-btn svg { flex: none; transition: transform .3s; }
.yg-btn:hover svg { transform: scale(1.12); }
.yg-btn--w { background: linear-gradient(180deg, #fff, #eef3fa); color: var(--yr-primary); box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
.yg-btn--w:hover { color: var(--yr-ink); }
.yg-btn--o { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.yg-btn--o:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }
.yg-btn--p { background: linear-gradient(135deg, #3a5da5, #24417c); color: #fff; box-shadow: 0 12px 26px -12px rgba(36,65,124,.8); }
.yg-btn--p:hover { color: #fff; }
.yg-btn--s { background: linear-gradient(180deg, #fff, #f4f7fb); color: var(--yr-primary); border-color: #d5dde8; box-shadow: 0 6px 16px -12px rgba(36,65,124,.5); }
.yg-btn--s:hover { border-color: var(--yr-primary-2); color: var(--yr-ink); }
.yg-btn--wa { background: linear-gradient(135deg, #18772f, #13602a); color: #fff; box-shadow: 0 12px 26px -12px rgba(19,96,42,.75); }
.yg-btn--wa:hover { color: #fff; background: #13602a; }
.yg-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.yr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 12px; background: linear-gradient(135deg, #3a5da5, #24417c); color: #fff; font-family: var(--yr-font-h); font-weight: 600; font-size: 15px; text-decoration: none; }
.yr-btn:hover { color: #fff; }

/* ---------------------------------------------------------------- Navy band (header + hero / page head) */
.yg-band { position: relative; background: var(--yr-navy); color: #fff; padding: 20px 0 48px; }
.yg-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0, transparent 75%); mask-image: radial-gradient(ellipse at 30% 40%, #000 0, transparent 75%); pointer-events: none; }
.yg-band__fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* decorations clipped here, so menus can drop below the band */
.yg-band--home { padding-bottom: 150px; }
.yg-band--inner { padding-bottom: 112px; }
.yg-band--plain { padding-bottom: 28px; }
.yg-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; left: 4%; top: 110px; background: #3a5da5; filter: blur(110px); opacity: .6; pointer-events: none; animation: yg-breathe 9s ease-in-out infinite; }
.yg-band--inner .yg-glow { top: 40px; }
.yg-glow2 { position: absolute; width: 380px; height: 380px; border-radius: 50%; right: -80px; top: -120px; background: #6f8fcb; filter: blur(110px); opacity: .35; pointer-events: none; }
.yg-rings { position: absolute; pointer-events: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); width: 620px; height: 620px; left: -160px; top: -60px; }
.yg-band--home .yg-rings { width: 760px; height: 760px; left: -120px; top: 40px; }
.yg-rings::before, .yg-rings::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.yg-rings::before { inset: 12%; }
.yg-rings::after { inset: 26%; }

/* Header bar: glass panel inside the band (not sticky, like the design) */
.yg-nav { position: relative; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 10px 12px; padding-inline-start: 20px; border-radius: 16px; }
.yr-logo { display: flex; align-items: center; flex: none; line-height: 0; }
.yr-logo__img { width: auto; height: 42px; max-width: 220px; object-fit: contain; }
.yg-nav__tools { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.yg-lang { min-height: 44px; padding: 0 16px; font-size: 14px; }
.yr-lang--drawer { display: none; }
.yr-menu, .yr-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.yr-menu a[href="#"] { cursor: default; }
.yr-sub-toggle { display: none; }
.yr-menu-toggle { display: none; }

@media (min-width: 1100px) {
	.yr-nav { flex: 1 1 auto; min-width: 0; }
	.yr-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
	.yr-menu > li { position: relative; }
	.yr-menu > li > a { position: relative; display: flex; align-items: center; padding: 10px 11px; color: #dce4f0; font-size: 14.5px; font-weight: 500; line-height: 1.5; text-decoration: none; white-space: nowrap; transition: color .25s; }
	.yr-menu > li > a::after { content: ""; position: absolute; inset-inline: 11px; bottom: 4px; height: 2px; border-radius: 2px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--yr-ease); }
	.yr-menu > li > a:hover, .yr-menu > li:focus-within > a, .yr-menu > .current-menu-item > a, .yr-menu > .current-menu-ancestor > a { color: #fff; }
	.yr-menu > li > a:hover::after, .yr-menu > .current-menu-item > a::after, .yr-menu > .current-menu-ancestor > a::after { transform: scaleX(1); }
	.yr-menu > .menu-item-has-children > a { gap: 6px; }
	.yr-menu > .menu-item-has-children > a::before { content: ""; order: 2; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
	.yr-menu .sub-menu {
		position: absolute; top: 100%; inset-inline-start: 0; z-index: 60; min-width: 280px; max-height: calc(100vh - 140px); overflow-y: auto; padding: 8px;
		background: #fff; border: 1px solid var(--yr-line); border-radius: 16px; box-shadow: 0 26px 50px -24px rgba(16,33,54,.55); display: none;
	}
	.yr-menu > li:last-child > .sub-menu, .yr-menu > li:nth-last-child(2) > .sub-menu { inset-inline-start: auto; inset-inline-end: 0; }
	.yr-menu > li:hover > .sub-menu, .yr-menu > li:focus-within > .sub-menu { display: block; }
	.yr-menu .sub-menu a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--yr-text); font-size: 14.5px; font-weight: 500; line-height: 1.55; text-decoration: none; }
	.yr-menu .sub-menu a:hover { background: #eef3fa; color: var(--yr-primary); }
	.yr-menu .sub-menu a[href="#"] { color: var(--yr-text-3); font-size: 13px; font-weight: 600; background: none; }
	.yr-menu > li > .sub-menu:has(.sub-menu) { grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 0 12px; min-width: 520px; }
	.yr-menu > li:hover > .sub-menu:has(.sub-menu), .yr-menu > li:focus-within > .sub-menu:has(.sub-menu) { display: grid; }
	.yr-menu .sub-menu .sub-menu { position: static; display: block; min-width: 0; max-height: none; margin: 0 0 6px; padding: 0; padding-inline-start: 10px; border: 0; box-shadow: none; }
	.translatepress-en_US .yr-menu > li > a { padding-inline: 9px; font-size: 14px; }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
	.yg-nav { gap: 10px; padding-inline-start: 14px; }
	.yr-logo__img { height: 36px; max-width: 170px; }
	.yr-menu > li > a { padding-inline: 7px; font-size: 13.5px; }
	.yr-menu > li > a::after { inset-inline: 7px; }
	.yg-nav__tools .yg-btn { padding: 0 12px; }
}
/* Message 93: the English menu labels are longer (Orthopedic Services, Health Topics…): /en/ keeps the compact bar up to 1439px so the 6 items stay on one line at 1280. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
	.translatepress-en_US .yg-nav { gap: 10px; padding-inline-start: 14px; }
	.translatepress-en_US .yr-logo__img { height: 36px; max-width: 170px; }
	.translatepress-en_US .yr-menu > li > a { padding-inline: 7px; font-size: 13.5px; }
	.translatepress-en_US .yr-menu > li > a::after { inset-inline: 7px; }
	.translatepress-en_US .yg-nav__tools .yg-btn { padding: 0 12px; }
}

/* <1100px: ☰ opens the menu as a panel under the glass bar */
@media (max-width: 1099.98px) {
	.yr-menu-toggle {
		display: inline-flex; align-items: center; justify-content: center; flex: none;
		width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 12px;
		background: rgba(255,255,255,.06); color: #fff; font-size: 22px; cursor: pointer;
	}
	.yr-menu-toggle .yr-ico--close { display: none; }
	.yr-menu-toggle[aria-expanded="true"] .yr-ico--menu { display: none; }
	.yr-menu-toggle[aria-expanded="true"] .yr-ico--close { display: block; }
	.yr-nav {
		position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 60; display: none;
		max-height: calc(100vh - 110px); overflow-y: auto; padding: 8px 16px 16px;
		background: #fff; color: var(--yr-ink); border: 1px solid var(--yr-line); border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(16,33,54,.6);
	}
	.yr-nav.is-open { display: block; }
	.yr-menu > li { position: relative; border-bottom: 1px solid var(--yr-line); }
	.yr-menu > li:last-child { border-bottom: 0; }
	.yr-menu a { color: var(--yr-text); text-decoration: none; font-weight: 500; }
	.yr-menu > li > a { display: block; padding: 14px 4px; padding-inline-end: 52px; font-size: 16px; }
	.yr-sub-toggle {
		position: absolute; top: 6px; inset-inline-end: 0; display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; border: 1px solid var(--yr-line); border-radius: 10px; background: #fff; color: var(--yr-primary); font-size: 18px; cursor: pointer;
	}
	.yr-sub-toggle[aria-expanded="true"] .yr-ico { transform: rotate(180deg); }
	.yr-menu .sub-menu { display: none; padding: 0 0 10px; }
	.yr-menu .sub-menu.is-open, .yr-menu .sub-menu .sub-menu { display: block; }
	.yr-menu .sub-menu a { display: block; padding: 10px 14px; font-size: 15px; line-height: 1.55; }
	.yr-menu .sub-menu a[href="#"] { color: var(--yr-text-3); font-size: 13.5px; font-weight: 600; padding-top: 14px; }
}
/* ≤860px: logo and ☰ only (handoff); the language link moves into the menu panel; the call/WhatsApp are in the bottom bar */
@media (max-width: 860px) {
	.yg-band { padding-top: 14px; }
	.yg-nav { padding: 10px 12px; }
	.yg-nav__tools { display: none; }
	.yr-menu-toggle { margin-inline-start: auto; }
	.yr-lang--drawer { display: block; padding: 14px 4px; border-bottom: 1px solid var(--yr-line); color: var(--yr-primary); font-size: 16px; font-weight: 500; text-decoration: none; }
	.yr-logo__img { height: 36px; max-width: 170px; }
}

/* ---------------------------------------------------------------- Page head inside the band (articles, pages) */
.yr-crumbs { margin: 44px 0 0; font-size: 14px; color: #b8c6da; }
.yr-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.yr-crumbs li { display: inline-flex; align-items: center; }
.yr-crumbs li + li::before { content: "‹"; margin-inline: 8px; color: #8fa3c2; }
.translatepress-en_US .yr-crumbs li + li::before { content: "›"; }
.yr-crumbs a { color: #dce4f0; text-decoration: none; }
.yr-crumbs a:hover { color: #fff; text-decoration: underline; }
.yr-crumbs [aria-current] { color: #b8c6da; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 60ch; }
.yg-ihead { position: relative; max-width: 860px; }
.yg-ihead h1 { margin: 16px 0 0; color: #fff; font-size: 44px; line-height: 1.4; text-wrap: balance; }
.yg-ihead .yg-lead { margin: 16px 0 0; max-width: 46em; color: #d6dfec; font-size: 18px; line-height: 1.9; }
.yg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.yg-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 14px; border-radius: 999px; color: #e7ebee; font-size: 14px; line-height: 1.5; }
.yg-chip b { color: #fff; font-weight: 600; }
.yg-chip a { color: #fff; font-weight: 600; text-decoration: none; }
.yg-chip a:hover { text-decoration: underline; color: #fff; }
.yg-chip svg { flex: none; }
.yg-chip--ok { color: #fff; }
.yg-chip--ok svg { color: #8fe0a6; }
.yg-chip .yg-stars { color: #f6c445; letter-spacing: 1px; }

/* ---------------------------------------------------------------- Article / page layout: content card + sidebar 360 */
.yg-ilay { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; margin-top: -72px; }
.yg-ilay--full { grid-template-columns: minmax(0, 1fr); }
.yg-doc { min-width: 0; border-radius: 24px; padding: 44px 48px; background: #fff; border: 1px solid var(--yr-line); box-shadow: 0 1px 2px rgba(16,33,54,.04), 0 30px 60px -40px rgba(16,33,54,.45); }
.yg-doc > *:first-child { margin-top: 0; }
.yg-fig { margin: 0 0 30px; }
.yg-fig img { display: block; width: 100%; height: auto; border-radius: 18px; }

/* Content typography (inside the card) */
.yr-content { overflow-wrap: break-word; }
.yg-doc .yr-content > *:first-child { margin-top: 0; }
.yg-doc .yr-content h2 { margin: 44px 0 14px; color: var(--yr-primary); font-size: 27px; line-height: 1.5; }
.yg-doc .yr-content h3 { margin: 26px 0 10px; color: var(--yr-primary); font-size: 20px; line-height: 1.5; }
.yg-doc .yr-content h4, .yg-doc .yr-content h5, .yg-doc .yr-content h6 { margin: 22px 0 8px; color: var(--yr-primary); font-size: 18px; line-height: 1.5; font-weight: 600; }
.yr-content [id], .yr-content h2, .yr-content h3 { scroll-margin-top: 24px; }
.yg-doc .yr-content p { margin: 0 0 16px; color: var(--yr-text); font-size: 18px; line-height: 2; }
.yg-doc .yr-content li { color: var(--yr-text); font-size: 17px; line-height: 1.9; }
.yr-content ol { margin: 0 0 18px; padding-inline-start: 1.5em; }
.yr-content ol li { margin: .3em 0; }
/* Lists in the text (no class) → «pts» look */
.yg-doc .yr-content ul:not([class]) { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.yg-doc .yr-content ul:not([class]) > li { position: relative; margin: 0; padding: 14px 18px; padding-inline-start: 46px; border-radius: 14px; background: linear-gradient(90deg, #f4f7fb, rgba(244,247,251,.4)); border: 1px solid rgba(36,65,124,.08); }
.yg-doc .yr-content ul:not([class]) > li::before { content: ""; position: absolute; inset-inline-start: 18px; top: 24px; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(140deg, #3a5da5, #24417c); }
.yg-doc .yr-content ul:not([class]) ul { margin-top: 8px; }
.yg-doc .yr-content li b, .yg-doc .yr-content li strong { color: var(--yr-primary); }
/* Links in the text → «kw» look */
.yr-content a:not([class]) { color: var(--yr-primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(58,93,165,.35); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.yr-content a:not([class]):hover { text-decoration-color: var(--yr-primary-2); }
.yr-content figure { margin: 1.4em 0; }
.yr-content figcaption, .yr-content .wp-caption-text { color: var(--yr-text-3); font-size: 14px; text-align: center; margin-top: 8px; }
.yr-content img { border-radius: 14px; }
.yr-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15.5px; background: #fff; }
.yr-content th, .yr-content td { border: 1px solid var(--yr-line-2); padding: 9px 12px; }
.yr-content thead th { background: var(--yr-tint); color: var(--yr-ink); font-weight: 600; }
.yr-content .wp-block-table { overflow-x: auto; }
.yr-content blockquote { margin: 1.4em 0; padding: 16px 20px; border-inline-start: 4px solid var(--yr-primary-2); background: linear-gradient(135deg, #eef3fa, #f8fafd); border-radius: 14px; }
.yr-content iframe { border: 0; }
.yr-content .aligncenter { margin-inline: auto; display: block; }
.yr-content .alignleft { float: left; margin: 0 1.2em 1em 0; }
.yr-content .alignright { float: right; margin: 0 0 1em 1.2em; }
@media (max-width: 599.98px) { .yr-content .alignleft, .yr-content .alignright { float: none; margin: 1em auto; } }
.yr-content .kk-star-ratings { margin: 0 0 22px; }

/* Short answer (yr-site-ui box) → «sa» look */
.yg-doc .yr-short-answer { position: relative; overflow: hidden; max-width: none; margin: 0 0 28px; padding: 24px 26px 22px; border: 1px solid rgba(58,93,165,.22); border-radius: 18px; background: linear-gradient(135deg, #eef3fa, #f8fafd); box-shadow: none; }
.yg-doc .yr-short-answer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, #3a5da5, #24417c); }
.yg-doc .yr-short-answer .yr-short-answer__label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important; color: var(--yr-primary) !important; font-family: var(--yr-font-h); font-size: 16px !important; font-weight: 600 !important; }
.yg-doc .yr-short-answer .yr-short-answer__label::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, #3a5da5, #24417c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E") center / 18px no-repeat; }
.yg-doc .yr-short-answer .yr-short-answer__text { color: var(--yr-ink) !important; font-size: 17px !important; line-height: 1.95 !important; }

/* FAQ in content (Rank Math FAQ block) → «faq» look */
.yr-content .rank-math-faq-item, .yg-faq details { margin: 0 0 12px; border-radius: 14px; background: linear-gradient(180deg, #fff, #f8fafd); border: 1px solid var(--yr-line); box-shadow: 0 10px 26px -24px rgba(16,33,54,.5); }
.yr-content .rank-math-faq-item { padding: 18px 22px; }
.yr-content .rank-math-faq-item .rank-math-question { margin: 0 0 8px; color: var(--yr-primary); font-size: 17px; }
.yr-content .rank-math-faq-item .rank-math-answer p { font-size: 16px; color: var(--yr-text-2); margin: 0 0 8px; }
.yg-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-family: var(--yr-font-h); font-weight: 600; font-size: 16px; color: var(--yr-primary); }
.yg-faq summary::-webkit-details-marker { display: none; }
.yg-pm { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #eef3fa; color: var(--yr-primary); transition: transform .35s, background .35s, color .35s; }
.yg-pm::before { content: "+"; font-family: var(--yr-font-h); font-size: 20px; line-height: 1; }
details[open] > summary .yg-pm { transform: rotate(45deg); background: var(--yr-primary); color: #fff; }

/* Booking card inside the article (after the 2nd H2) */
.yg-icta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 34px 0; padding: 26px 28px; border-radius: 20px; background: linear-gradient(160deg, #0e1d33, #24417c); color: #fff; }
.yg-icta::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; left: -90px; top: -150px; background: #3a5da5; filter: blur(70px); opacity: .6; pointer-events: none; }
.yg-icta > * { position: relative; }
.yg-icta__t { display: block; font-family: var(--yr-font-h); font-size: 19px; font-weight: 700; line-height: 1.5; }
.yg-icta__s { display: block; margin-top: 4px; color: #d6dfec; font-size: 15px; line-height: 1.7; }
.yg-icta__row { display: flex; gap: 10px; flex: none; }

/* Doctor card at the end of the article */
.yg-author { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 40px; padding: 24px; border-radius: 20px; background: linear-gradient(180deg, #fff, #f4f7fb); border: 1px solid var(--yr-line); }
.yg-author img { display: block; width: 96px; height: 96px; border-radius: 20px; object-fit: cover; object-position: center 12%; background: #e6ecf4; }
.yg-author__k { display: block; color: var(--yr-primary-2); font-size: 13px; font-weight: 600; }
.yg-author__n { display: block; margin: 4px 0 6px; color: var(--yr-primary); font-family: var(--yr-font-h); font-size: 19px; font-weight: 700; line-height: 1.5; }
.yg-author p { margin: 0 0 10px; color: var(--yr-text-2); font-size: 15px; line-height: 1.8; }
.yg-more { display: inline-flex; align-items: center; gap: 6px; color: var(--yr-primary-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.yg-more svg { transition: transform .3s; }
.yg-more:hover svg { transform: translateX(-4px); }
.translatepress-en_US :is(.yg-more, .yg-clu__pillar, .yg-way__go) svg { transform: scaleX(-1); } /* message 116 / 5ب: the «←» arrows point right (→) on /en/; Arabic unchanged */
.translatepress-en_US .yg-more:hover svg { transform: scaleX(-1) translateX(-4px); } /* the hover nudge keeps the flip (it moved the arrow back to «←») */

/* ---------------------------------------------------------------- Sidebar */
.yg-side { display: flex; flex-direction: column; gap: 18px; height: 100%; min-width: 0; }
.yg-sbox { border-radius: 20px; padding: 22px; }
.yg-sbox__h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--yr-primary); font-family: var(--yr-font-h); font-size: 17px; font-weight: 700; line-height: 1.5; }
.yg-sbox__h i { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, #3a5da5, #24417c); color: #fff; font-style: normal; }
.yg-book { position: relative; overflow: hidden; background: linear-gradient(160deg, #0e1d33, #18305a 55%, #24417c); color: #fff; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 26px 54px -30px rgba(16,33,54,.85); }
.yg-book::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; left: -100px; top: -120px; background: #3a5da5; filter: blur(70px); opacity: .65; pointer-events: none; }
.yg-book > * { position: relative; }
.yg-book .yg-sbox__h { color: #fff; }
.yg-book .yg-sbox__h i { background: #fff; color: var(--yr-primary); }
.yg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yg-row2 .yg-btn { min-height: 48px; padding: 0 12px; }
.yg-br { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; }
.yg-br b { display: block; color: #fff; font-family: var(--yr-font-h); font-size: 15px; font-weight: 600; }
.yg-br span { display: block; margin-top: 2px; color: #c9d6ec; font-size: 12.5px; line-height: 1.6; }
.yg-br a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; background: #fff; color: var(--yr-primary); font-family: var(--yr-font-h); font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .25s; }
.yg-br a:hover { transform: translateY(-2px); color: var(--yr-ink); }
.yg-clu { background: linear-gradient(180deg, #fff, #f8fafd); border: 1px solid var(--yr-line); box-shadow: 0 14px 34px -26px rgba(16,33,54,.45); }
.yg-clu__pillar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #3a5da5, #24417c); color: #fff; text-decoration: none; box-shadow: 0 12px 26px -14px rgba(36,65,124,.8); transition: transform .25s; }
.yg-clu__pillar:hover { transform: translateY(-2px); color: #fff; }
.yg-clu__pillar small { display: block; color: #c9d6ec; font-size: 12px; }
.yg-clu__pillar b { display: block; font-family: var(--yr-font-h); font-size: 15px; font-weight: 600; line-height: 1.5; }
.yg-clu__pillar svg { flex: none; margin-inline-start: auto; }
.yg-clu ul { list-style: none; margin: 0; padding: 0; }
.yg-clu li a { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--yr-text); font-size: 15px; line-height: 1.6; text-decoration: none; transition: background .25s, color .25s, transform .25s; }
.yg-clu li a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--yr-light); transition: background .25s; }
.yg-clu li a:hover { background: #eef3fa; color: var(--yr-primary); transform: translateX(-4px); }
.translatepress-en_US .yg-clu li a:hover { transform: translateX(4px); } /* message 117 / 4: on /en/ the link moves right; Arabic unchanged */
.yg-clu li a:hover::before { background: var(--yr-primary); }
.yg-clu li a[aria-current] { background: #eef3fa; color: var(--yr-primary); font-weight: 600; }
.yg-clu li a[aria-current]::before { background: var(--yr-primary); box-shadow: 0 0 0 4px rgba(58,93,165,.18); }
.yg-clu__here { margin-inline-start: auto; color: var(--yr-primary-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.yg-clu .yg-more { margin-top: 10px; }
.yg-stick { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; }
.admin-bar .yg-stick { top: 56px; }
.yg-toc { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.7)); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(36,65,124,.12); box-shadow: 0 20px 50px -30px rgba(16,33,54,.5); }
.yg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; max-height: calc(100vh - 260px); overflow-y: auto; }
.yg-toc li { counter-increment: t; }
.yg-toc a { position: relative; display: flex; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--yr-text-2); font-size: 14.5px; line-height: 1.6; text-decoration: none; transition: background .25s, color .25s; }
.yg-toc a::before { content: counter(t); flex: none; width: 22px; color: #9fb0c8; font-family: var(--yr-font-h); font-size: 13px; font-weight: 600; }
.yg-toc a:hover { background: #eef3fa; color: var(--yr-primary); }
.yg-toc a.is-on { background: #eef3fa; color: var(--yr-primary); font-weight: 600; }
.yg-toc a.is-on::before { color: var(--yr-primary); }
.yg-toc a.is-on::after { content: ""; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--yr-primary); }
.yg-toc-m { display: none; }
/* old sidebar widgets (protected pages keep their old body) */
.yr-sidebar .yr-widget { margin-bottom: 24px; }

/* ---------------------------------------------------------------- Sections, white cards, «ذات صلة» */
.yg-sec { position: relative; padding-top: 96px; }
.yg-sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.yg-sec-h h2 { margin: 8px 0 0; color: var(--yr-primary); font-size: 34px; line-height: 1.4; }
.yg-sec--tight { padding-top: 48px; }
.yg-sec-h--c { flex-direction: column; align-items: center; text-align: center; }
.yg-sec-h--c p { margin-inline: auto; }
.yg-sec-h p { margin: 12px 0 0; max-width: 680px; color: var(--yr-text-2); font-size: 17px; line-height: 1.85; }
.yg-wc { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, #f8fafd 100%); border: 1px solid var(--yr-line); box-shadow: 0 1px 2px rgba(16,33,54,.04), 0 14px 34px -24px rgba(16,33,54,.35); transition: transform .35s var(--yr-ease), box-shadow .35s, border-color .35s; }
.yg-wc::before { content: ""; position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, #24417c, #3a5da5, #9fb6de); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--yr-ease); }
.yg-wc:hover { transform: translateY(-6px); border-color: rgba(58,93,165,.35); box-shadow: 0 2px 4px rgba(16,33,54,.04), 0 26px 50px -24px rgba(36,65,124,.55); }
.yg-wc:hover::before { transform: scaleX(1); }
.yg-ico { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(140deg, #eef3fa, #fff); border: 1px solid var(--yr-line); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -10px rgba(36,65,124,.5); color: var(--yr-primary); transition: background .35s, color .35s, transform .35s; }
.yg-wc:hover .yg-ico { background: linear-gradient(140deg, #3a5da5, #24417c); color: #fff; transform: rotate(-6deg) scale(1.05); }
.yg-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.yg-rel .yg-wc { display: flex; flex-direction: column; color: var(--yr-ink); text-decoration: none; }
.yg-rel__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.3px) 0 0 / 20px 20px, linear-gradient(160deg, #2c4c8c, #0e1d33); }
.yg-rel__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--yr-ease); }
.yg-rel .yg-wc:hover .yg-rel__img img { transform: scale(1.06); }
.yg-rel__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.yg-rel__body small { color: var(--yr-primary-2); font-size: 12px; font-weight: 600; }
.yg-rel__body b { color: var(--yr-primary); font-family: var(--yr-font-h); font-size: 17px; font-weight: 700; line-height: 1.6; }

/* Archives, search, 404 */
.yr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.yr-cards--archive { margin-bottom: 32px; }
.yr-card { display: flex; flex-direction: column; }
.yr-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.yr-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(160deg, #2c4c8c, #0e1d33); }
.yr-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--yr-ease); }
.yr-card:hover .yr-card__img img { transform: scale(1.06); }
.yr-card__title { display: block; padding: 16px 20px 20px; color: var(--yr-primary); font-family: var(--yr-font-h); font-weight: 600; font-size: 16.5px; line-height: 1.6; }
.yr-archive-desc { margin-top: 12px; color: #d6dfec; }
.yr-archive-desc p { margin: 0; }
.yg-list { position: relative; z-index: 3; margin-top: -72px; padding-bottom: 32px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 16px; }
.nav-links .page-numbers { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; background: #fff; border: 1px solid var(--yr-line-2); border-radius: 10px; text-decoration: none; color: var(--yr-primary); font-weight: 600; }
.nav-links .page-numbers:hover { border-color: var(--yr-primary); }
.nav-links .page-numbers.current { background: var(--yr-primary); color: #fff; border-color: var(--yr-primary); }
.yr-404 { padding-block: 60px; text-align: center; }
.search-form { display: flex; gap: 8px; max-width: 480px; margin: 20px auto; }
.search-form label { flex: 1; }
.search-field { width: 100%; min-height: 52px; padding: 0 14px; background: #fff; border: 1px solid var(--yr-line-2); border-radius: 12px; }
.search-submit { min-height: 52px; padding: 0 20px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #3a5da5, #24417c); color: #fff; font-weight: 600; cursor: pointer; }

/* Designed pages (own H1/sections) and protected pages: the old body under the new header */
.yg-page { padding-top: 28px; }
.yr-content--page { padding-bottom: 40px; }
.yr-content--page > :not(section):not(.alignfull):not(div[class^="yr-"]):not(style):not(script) { max-width: var(--yr-wrap); margin-inline: auto; padding-inline: var(--yr-gutter); }
.yr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 28px; padding-bottom: 48px; }
@media (min-width: 1100px) { .yr-layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; } }
.yr-article { min-width: 0; }
.yr-article__thumb { margin: 4px 0 20px; }
.yr-article__thumb img { display: block; width: 100%; border-radius: 16px; }
.yr-entry-head { padding-bottom: 8px; }
.yr-entry-head .yr-crumbs { margin: 0 0 12px; color: var(--yr-text-3); }
.yr-entry-head .yr-crumbs a { color: var(--yr-primary); }
.yr-entry-head .yr-crumbs [aria-current] { color: var(--yr-text-3); }
.yr-entry-head .yr-crumbs li + li::before { color: var(--yr-text-3); }
.yr-entry-head--bare { padding-top: 24px; padding-bottom: 0; }
.yr-entry-title { margin: 6px 0 10px; color: var(--yr-ink); font-size: clamp(28px, 3.3vw, 42px); line-height: 1.35; text-wrap: balance; }
.yr-meta { margin: 0 0 6px; color: var(--yr-text-3); font-size: 14px; }
.yr-meta__sep { margin-inline: 4px; }
.yr-entry-head .yr-review-badge { margin: 14px 0 0; max-width: none; }
.translatepress-en_US .yr-review-badge { text-align: left; }
.yr-layout .yr-content h2, .yr-content--page h2 { color: var(--yr-ink); line-height: 1.5; }
.yr-layout .yr-content p { margin: 0 0 1.05em; }
.yr-content #toc_container { width: 100% !important; max-width: 100%; background: #fff; border: 1px solid var(--yr-line); border-radius: 16px; padding: 16px 20px; }
.yr-content #toc_container .toc_title { font-weight: 600; color: var(--yr-ink); text-align: start; }
.yr-content #toc_container ul { padding-inline-start: 1.2em; }
@media (max-width: 1099.98px) { .yr-sidebar { max-width: 760px; width: 100%; margin-inline: auto; } }
.yr-sidebar .yr-clinics-card { border-color: var(--yr-line); border-radius: 16px; box-shadow: none; }
.yr-related { margin: 8px 0 48px; padding-top: 28px; border-top: 1px solid var(--yr-line); }
.yr-related__title { margin: 0 0 18px; color: var(--yr-ink); font-size: 24px; }
.yr-related .yr-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Comments form */
.yr-comments { padding-block: 24px 48px; }
.comment-reply-title, .yr-comments__title { color: var(--yr-ink); font-size: 22px; margin: 0 0 12px; }
.comment-form p { margin: 0 0 14px; }
.comment-form label { display: block; margin-bottom: 4px; font-weight: 500; color: var(--yr-ink); font-size: 15px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--yr-line-2); border-radius: 12px; background: #fff; color: var(--yr-ink);
}
.comment-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.comment-form .comment-form-cookies-consent label { display: inline; font-weight: 400; }
.comment-form .submit { min-height: 50px; padding: 0 24px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #3a5da5, #24417c); color: #fff; font-family: var(--yr-font-h); font-weight: 600; cursor: pointer; }
.yr-comments__list { padding-inline-start: 1.2em; }

/* ---------------------------------------------------------------- Footer (navy + dots) */
.yg-foot { position: relative; overflow: hidden; margin-top: 96px; padding-bottom: var(--yr-ui-bottom-space, 0px); background: linear-gradient(160deg, #0e1d33, #18305a); color: #d6dfec; font-size: 15px; line-height: 1.9; }
.yg-foot::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px); background-size: 22px 22px; pointer-events: none; }
.yg-foot a { color: #e7ebee; text-decoration: none; transition: color .25s; }
.yg-foot a:hover { color: #fff; text-decoration: underline; }
.yg-foot__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 48px 32px; }
.yg-foot .yr-widget { margin: 0; }
.yg-foot h2, .yg-foot h3, .yg-foot h4, .yg-foot .wp-block-heading, .yg-foot .yr-widget__title { margin: 0 0 14px; color: #fff; font-family: var(--yr-font-h); font-size: 16px; font-weight: 600; }
.yg-foot .yr-fw__h { margin: 0 0 10px; font-size: 18px; } /* the sizes the footer widgets had (message 34 / 1) */
.yg-foot .yr-fw__gap { margin-bottom: 20px; }
.yg-foot .yr-fw__next { margin-top: 8px; }
.yg-foot p { margin: 0 0 8px; color: #b8c6da; font-size: 14px; line-height: 1.85; }
.yg-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.yg-foot li { margin: 0; line-height: 1.6; }
.yg-foot img { max-width: 220px; }
.yg-foot__bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px 28px; border-top: 1px solid rgba(255,255,255,.12); }
.yr-footer__copy { margin: 0 !important; color: #9fb0c8 !important; font-size: 13px !important; }
.yr-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.yr-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; color: #fff; font-size: 19px; transition: background .25s, border-color .25s; }
.yr-social a:hover { border-color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }


/* shared by the home and the site pages (moved from home.css) */
.yg-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #c9d6ec; font-size: 14px; font-weight: 600; line-height: 1.7; }
.yg-kicker i { display: block; flex: none; width: 28px; height: 2px; background: linear-gradient(90deg, #9fb6de, #fff); }
.yg-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yg-cta-row--c { justify-content: center; }
.yg-feat { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 44px; border-radius: 24px; background: linear-gradient(160deg, #0e1d33, #24417c); color: #fff; }
.yg-feat h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.35; }
.yg-feat h2 a { color: #fff; text-decoration: none; }
.yg-feat h2 a:hover { text-decoration: underline; }
.yg-feat p { margin: 0; max-width: 40em; color: #d6dfec; font-size: 17px; line-height: 1.85; }
.yg-feat .yg-btn { flex: none; }
.yg-faq { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; }
.yg-faq details { transition: border-color .3s, box-shadow .3s; }
.yg-faq details:hover { border-color: rgba(58,93,165,.35); }
.yg-faq details[open] { border-color: rgba(58,93,165,.45); box-shadow: 0 18px 40px -26px rgba(36,65,124,.55); }
/* site pages: service blocks */
.yg-phead--svc { align-items: center; }
.yg-phead__side { width: 400px; max-width: 100%; }
.yg-cl-row__s { display: block; color: var(--yr-text-2); font-size: 13.5px; }
.yg-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.yg-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); border: 1px solid var(--yr-line); color: var(--yr-text); font-size: 15px; line-height: 1.7; }
.yg-checks svg { flex: none; margin-top: 3px; color: var(--yr-primary); }
.yg-feat-item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; }
.yg-feat-item b { display: block; color: var(--yr-primary); font-family: var(--yr-font-h); font-size: 16px; }
.yg-feat-item p { margin: 4px 0 0; color: var(--yr-text-2); font-size: 14.5px; line-height: 1.75; }

/* ---------------------------------------------------------------- Motion (CSS only; never on the H1 or the hero image) */
@keyframes yg-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes yg-side { from { opacity: 0; transform: translateX(-36px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes yg-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes yg-breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .7; transform: scale(1.08); } }
@keyframes yg-rv { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.yg-in { animation: yg-up .9s var(--yr-ease) both; }
.yg-d1 { animation-delay: .1s; } .yg-d2 { animation-delay: .22s; } .yg-d3 { animation-delay: .34s; } .yg-d4 { animation-delay: .46s; } .yg-d5 { animation-delay: .58s; } .yg-d6 { animation-delay: .75s; } .yg-d7 { animation-delay: .9s; }
@supports (animation-timeline: view()) {
	.yg-rv { animation: yg-rv linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
@media (max-width: 860px) {
	.yg-rings { display: none; }
	.yg-glow { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
	.yg-ilay { grid-template-columns: minmax(0, 1fr); margin-top: -60px; }
	.yg-side { height: auto; }
	.yg-book, .yg-stick { display: none; }
	.yg-toc-m { display: block; margin: 0 0 26px; border-radius: 16px; background: var(--yr-bg); border: 1px solid var(--yr-line); }
	.yg-toc-m summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; color: var(--yr-primary); font-family: var(--yr-font-h); font-weight: 600; font-size: 16px; }
	.yg-toc-m summary::-webkit-details-marker { display: none; }
	.yg-toc-m ol { margin: 0; padding: 0 18px 14px; padding-inline-start: 38px; color: var(--yr-text-2); }
	.yg-toc-m li { padding: 6px 0; font-size: 15px; line-height: 1.6; }
	.yg-toc-m a { color: var(--yr-text-2); text-decoration: none; }
	.yg-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.yg-band--inner { padding-bottom: 92px; }
	.yg-band--home { padding-bottom: 120px; }
	.yr-crumbs { margin-top: 26px; font-size: 13px; }
	.yg-ihead h1 { font-size: 28px; }
	.yg-ihead .yg-lead { font-size: 16px; }
	.yg-doc { padding: 24px 18px; border-radius: 18px; }
	.yg-doc .yr-content h2 { margin-top: 34px; font-size: 22px; }
	.yg-doc .yr-content p { font-size: 17px; }
	.yg-doc .yr-content ul:not([class]) > li { font-size: 16px; padding: 12px 14px; padding-inline-start: 40px; }
	.yg-doc .yr-content ul:not([class]) > li::before { inset-inline-start: 15px; top: 22px; }
	.yg-icta { flex-direction: column; align-items: stretch; }
	.yg-icta__row { display: grid; grid-template-columns: 1fr 1fr; }
	.yg-icta__row .yg-btn { padding: 0 10px; }
	.yg-author { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px; }
	.yg-author img { width: 64px; height: 64px; border-radius: 14px; }
	.yg-rel { grid-template-columns: minmax(0, 1fr); }
	.yg-sec { padding-top: 64px; }
	.yg-sec-h h2 { font-size: 26px; }
	.yg-foot { margin-top: 64px; }
}
@media (max-width: 599.98px) {
	.yg-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 40px 24px; }
}

/* yr-site-ui floating WhatsApp (≥1200px) sits in the inline-start corner: keep every .yr-wrap's text out of that column. */
@media (min-width: 1200px) {
	.yr-wrap { padding-inline-start: max(var(--yr-gutter), calc(var(--yr-ui-side-space, 0px) - (100vw - var(--yr-wrap)) / 2)); }
}


/* «Forget About Shortcode Buttons» links inside the content, without the plugin (message 33 / ح-4): the design's button look.
   The inline colours stored in the content are overridden; WhatsApp buttons (comment icon / wa.me) are green. */
a.fasc-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 50px; margin: 4px; padding: 0 24px !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient(135deg, #3a5da5, #24417c) !important; color: #fff !important; font-family: var(--yr-font-h) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important; text-decoration: none !important; text-shadow: none !important; box-shadow: 0 12px 26px -12px rgba(36,65,124,.8) !important; transition: transform .25s; }
a.fasc-button:hover { color: #fff !important; transform: translateY(-2px); }
a.fasc-button.dashicons-admin-comments, a.fasc-button[href*="wa.me"], a.fasc-button[href*="whatsapp"] { background: linear-gradient(135deg, #18772f, #13602a) !important; box-shadow: 0 12px 26px -12px rgba(19,96,42,.75) !important; }
a.fasc-button::before, a.fasc-button::after { content: none !important; display: none !important; }

/* /en/ only: capital first letter in headings that TranslatePress gives in lower case (e.g. «recurrent shoulder dislocation») — message 42 / 4 */
html[lang^="en"] .yg-clu__name { display: inline-block; }
html[lang^="en"] :is(.yg-clu__name, .yg-topic b, .yg-rel__body b, .yg-lead-post h2, .yg-post h3, .yr-content h2, .yr-content h3)::first-letter { text-transform: uppercase; }
html[lang^="en"] .yr-content :is(p, li, figcaption)::first-letter { text-transform: uppercase; } /* a sentence never starts in lower case (5717 <strong>, 6132 caption) */
figcaption::first-letter { text-transform: uppercase; } /* message 94 / 3: every image caption starts with a capital (also outside .yr-content); Arabic has no case, so no effect there */
.translatepress-en_US .yr-menu a::first-letter { text-transform: uppercase; } /* message 98 / 4: /en/ menu items start with a capital (row 1362 «the best orthopedic doctor in Egypt» is shared with sentences); Arabic and the 5399 button are not touched */
.translatepress-en_US .yg-hubc h3::first-letter { text-transform: uppercase; }
.translatepress-en_US .yg-clu__t::first-letter { text-transform: uppercase; } /* message 102 / 7: sidebar box links are flex, so the label has its own element */
.yg-toc__t, .yr-card-link__t { display: inline-block; vertical-align: top; } /* message 110: TOC links (flex) and old content buttons (inline-flex) keep their look; the label is its own box so ::first-letter applies */
.translatepress-en_US :is(.yg-toc__t, .yr-card-link__t)::first-letter { text-transform: uppercase; }
.translatepress-en_US .yr-crumbs :is(a, [aria-current])::first-letter { text-transform: uppercase; } /* message 110: breadcrumb items (7848 «best doctor for osteoporosis treatment», shared row 2272) */
.translatepress-en_US :is(h1, h2, h3, h4, li, p, summary, figcaption, .yr-video-card-title, [class*="card-title"], [class*="card"] :is(h3, h4, b))::first-letter { text-transform: uppercase; } /* message 101 / 6: on /en/ every heading, list item, paragraph and card title starts with a capital (shared rows like 878 / 13266 are lower case inside sentences); Arabic has body class translatepress-ar, so not affected */ /* message 99 / 8: /en/ home 7933 «by specialty» card titles start with a capital (row 878 is shared with sentences); Arabic not affected */

/* /en/ only: LTR for blocks that are forced RTL by a dir attribute / inline style in the content or by old CSS (message 46 / 2).
   Trustindex reviews, comments and the Arabic Shorts titles stay RTL (their text is Arabic). */
html[lang^="en"] :is(.yr-short-answer, .yr-faq-accordion, .yr-joint-hero, .yr-joint-box, .yr-ins-page, .yr-mobile-bar),
html[lang^="en"] .yr-content :is([dir="rtl"], [dir="auto"]) { direction: ltr; text-align: start; }
html[lang^="en"] .yr-content [style*="direction"], html[lang^="en"] .yr-content [style*="text-align: right"], html[lang^="en"] .yr-content [style*="text-align:right"] { direction: ltr !important; text-align: start !important; }
html[lang^="en"] :is(.yr-videos-carousel-section, .yr-ins-page) { direction: ltr !important; text-align: start !important; } /* old CSS forces rtl !important */
/* /en/ insurance page (7964): the page sits in the 646px content column, so the 2-column hero left the stats 195px wide and
   English words broke letter by letter. /en/ only: hero in one column, stats 2 × ~280px (1 column on phones), no broken words.
   «+10» (a number, not a TranslatePress string) is shown «10+» like «20+» — display only, content untouched. (message 46 / 3) */
html[lang^="en"] .yr-ins-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
html[lang^="en"] .yr-ins-stat, html[lang^="en"] .yr-ins-stat * { word-break: normal !important; overflow-wrap: normal !important; hyphens: manual !important; }
html[lang^="en"] .yr-ins-stat:nth-child(2) strong { direction: rtl; unicode-bidi: isolate; text-align: left !important; }
@media (min-width: 600px) { html[lang^="en"] .yr-ins-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Smart sticky header (message 47): see assets/js/nav.js. Fixed only after the bar left the screen (its slot keeps the
   height, so nothing moves); navy glass over the white page; slide on transform only; no slide with reduced motion.
   Anchors (TOC) land under the bar: scroll-padding-top + the existing scroll-margin-top. */
html { scroll-padding-top: 80px; }
.yg-nav.is-fixed { position: fixed; top: 8px; left: var(--yg-nav-l, 0); width: var(--yg-nav-w, 100%); z-index: 9985; background: rgba(14, 29, 58, .9); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 40px -22px rgba(16,33,54,.7); transform: translateY(calc(-100% - 16px)); }
.yg-nav.is-fixed.is-shown { transform: none; }
.yg-nav.is-anim { transition: transform .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .yg-nav.is-anim { transition: none; } }

/* Message 87: the sidebar TOC moves down under the header while the header is shown, and back when it hides (same .22s as
   the header). nav.js writes --yr-header-offset (header top gap + height while fixed and shown, else 0) and --yr-adminbar
   (the WordPress admin bar when it is fixed). The fixed header also sits under the admin bar now. Anchor scrolling: toc.js. */
html:has(> body.admin-bar) { --yr-adminbar: 32px; }
@media (max-width: 782px) { html:has(> body.admin-bar) { --yr-adminbar: 46px; } }
@media (max-width: 600px) { html:has(> body.admin-bar) { --yr-adminbar: 0px; } } /* the bar scrolls away on phones */
html { scroll-padding-top: var(--yr-adminbar, 0px); }
.yg-nav.is-fixed { top: calc(var(--yr-adminbar, 0px) + 8px); transform: translateY(calc(-100% - 16px - var(--yr-adminbar, 0px))); }
.yg-nav.is-fixed.is-shown { transform: none; }
.yg-stick, .admin-bar .yg-stick { top: calc(var(--yr-adminbar, 0px) + max(24px, var(--yr-header-offset, 0px) + 16px)); transition: top .22s ease-out; }
.yg-toc ol { max-height: calc(100vh - 260px - var(--yr-adminbar, 0px) - max(0px, var(--yr-header-offset, 0px) - 8px)); transition: max-height .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .yg-stick, .admin-bar .yg-stick, .yg-toc ol { transition: none; } }

/* ── Message 47: responsive fixes. CSS only: no content, no visible text changes. ─────────────────────────────────── */

/* 1) Insurance steps (7964). The number is the step's first <span>; the TOC anchor <span> inside the H3 had taken the same
      circle style (a second circle with the title in white over it). The title is plain dark text under the number again.
      Columns: 5 only when each column is ≥180px, else 3, 2, 1 (container query on the steps' parent). Empty <p> from
      wpautop are not grid cells. Number circle: darker 2nd stop, white digits ≥4.5:1 (was 2.77:1). */
.yr-ins-step h3 span { display: inline !important; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; background: none !important; color: inherit !important; font-weight: inherit !important; }
.yr-ins-steps > p:empty, .yr-ins-step > p:empty { display: none !important; }
:has(> .yr-ins-steps) { container-type: inline-size; }
.yr-ins-steps.yr-ins-steps { grid-template-columns: minmax(0, 1fr) !important; }
@container (min-width: 373px) { .yr-ins-steps.yr-ins-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@container (min-width: 566px) { .yr-ins-steps.yr-ins-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@container (min-width: 952px) { .yr-ins-steps.yr-ins-steps { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.yr-ins-step > span:first-child, .yr-petroleum-icon.yr-petroleum-icon, .yr-ins-category-icon.yr-ins-category-icon { background: linear-gradient(135deg, #2f6fa0, #13709c) !important; }

/* 2) Insurance card grids: as many columns as fit at ≥170–200px each (they were 5 / 3 fixed columns of ~100px). */
.yr-ins-company-grid.yr-ins-company-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)) !important; }
.yr-ins-mini-grid.yr-ins-mini-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)) !important; }
.yr-petroleum-grid.yr-petroleum-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)) !important; }

/* 3) Insurance hero, both languages (message 46 did /en/ only): text column full width, stats under it, 2 columns from 600px,
      no letter-by-letter breaking in the stats. */
.yr-ins-hero-grid.yr-ins-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
.yr-ins-stat, .yr-ins-stat * { word-break: normal !important; overflow-wrap: break-word !important; hyphens: manual !important; }
@media (min-width: 600px) { .yr-ins-stats.yr-ins-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* 4) Buttons never clip their label: any .yg-btn may wrap to a second line when it has no room; under 600px the booking card
      buttons are one per row (full width) (it was nowrap + overflow hidden: «احجز موعدك» showed as «جز موعد», «your appoint»). */
.yg-btn { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 599.98px) {
	.yg-icta__row { grid-template-columns: minmax(0, 1fr); }
	.yg-btn { line-height: 1.35; padding-block: 8px; }
}

/* 5) Cards / lists: normal word breaking; only a very long word (a URL in the references) may break inside.
      List items in grid lists can shrink (a figure with width:800px inline made the list item 856px wide on phones). */
.yr-content :is(ul, ol) > li { min-width: 0; }
.yr-content figure, .yr-content .wp-caption { max-width: 100% !important; }

/* 6) Contrast: big teal headings pasted with an inline colour (#0cb8b6, 2.46:1 on white) → same hue, darker (#08807e, 4.6:1). */
.yr-content [style*="#0cb8b6"] { color: #08807e !important; }

/* 7) Contrast in the joint/landing pages (3438 …): the old rule «.yr-joint-page p a» (navy text, transparent background,
      !important) beat the button design: the WhatsApp button was navy on green (1.38:1), the other buttons plain links, and the
      link in the dark final box navy on navy. Buttons get the theme design back (same as every other page), the link is white. */
.yr-joint-page a.fasc-button.fasc-button { display: inline-flex !important; padding: 0 24px !important; border-radius: 12px !important; background: linear-gradient(135deg, #3a5da5, #24417c) !important; color: #fff !important; text-decoration: none !important; }
.yr-joint-page a.fasc-button.fasc-button:is(.dashicons-admin-comments, [href*="wa.me"], [href*="whatsapp"]) { background: linear-gradient(135deg, #18772f, #13602a) !important; }
.yr-final-cta .yr-insurance-note a { color: #fff !important; text-decoration: underline; }

/* 8) Joint/landing hero: the photo card column was .55fr of a 646px column (text ~99px wide at 1280+). At least 210px now. */
@media (min-width: 1100px) { .yr-joint-hero-grid.yr-joint-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(210px, .55fr) !important; } }
@media (min-width: 1100px) { html[lang^="en"] .yr-joint-hero-title.yr-joint-hero-title { font-size: 34px !important; } } /* long English words (Comprehensive) fit the text column */

/* 9) Tables (message 48 / 2): a table keeps its own layout when it fits. Only a table that is wider than the column (cells
      need ≥140px of text) scrolls sideways inside a wrapper, any screen size, with a soft shadow on the side that has more.
      The wrapper is added at runtime by assets/js/nav.js (no content change). */
.yr-tscroll { position: relative; margin: 1.2em 0; }
.yr-tscroll__in { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.yr-tscroll__in > table { margin: 0; height: auto !important; }
.yr-tscroll:not(.is-off) > .yr-tscroll__in > table :is(td, th) { min-width: 164px; }
.yr-tscroll::before, .yr-tscroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1; }
.yr-tscroll::before { inset-inline-start: 0; background: linear-gradient(to var(--yr-ts-in, right), rgba(16,33,54,.16), transparent); }
.yr-tscroll::after { inset-inline-end: 0; background: linear-gradient(to var(--yr-ts-in, right), transparent, rgba(16,33,54,.16)); }
.yr-tscroll.is-more-start::before, .yr-tscroll.is-more-end::after { opacity: 1; }
.yr-tscroll:dir(rtl) { --yr-ts-in: left; }
.yr-tscroll:dir(ltr) { --yr-ts-in: right; }
@media (prefers-reduced-motion: reduce) { .yr-tscroll::before, .yr-tscroll::after { transition: none; } }

/* 10) Chips under the H1 on phones: a long chip («Medically reviewed by …») wraps as a whole, the name is not squeezed. */
@media (max-width: 599.98px) { .yg-chip { flex-wrap: wrap; row-gap: 0; } }

/* 11) Booking card in a narrow article column (≥1100px with the sidebar, long English labels): the text keeps ≥280px and the
       buttons go under it when both do not fit. */
.yg-icta { flex-wrap: wrap; }
.yg-icta > :first-child { flex: 1 1 280px; min-width: 0; }

/* 12) Headings pasted with an inline font size (e.g. 36pt = 48px) broke long words letter by letter on phones
       («Rehabilitation», «Osteoporosis» in 290px). Under 600px they take the theme heading size; text unchanged. */
@media (max-width: 599.98px) { .yr-content :is(h2, h3, h4) [style*="font-size"] { font-size: inherit !important; } }

/* ── Message 48 / 1: content width (approved proposal of message 47). ──────────────────────────────────────────────────
   ≥1360px: wrap 1320, sidebar 340 (content ≈778px at 1440). 1101–1359px: sidebar 300, gap 24, doc padding 40/36 (≈710px at
   1280). ≤1100px (one column, sidebar under): text blocks max 760px; tables, images, figures, cards and boxes keep the full width. */
@media (min-width: 1360px) { :root { --yr-wrap: 1320px; } .yg-ilay { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (min-width: 1101px) and (max-width: 1359.98px) { .yg-ilay { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; } .yg-doc { padding: 40px 36px; } }
@media (max-width: 1100px) { .yg-doc .yr-content > :is(p, h2, h3, h4, h5, h6, ul:not([class]), ol:not([class]), blockquote) { max-width: 760px; } }

/* ── Message 55: soft glow (halo) around every button and card — option A. ─────────────────────────────────────────────
   Static halo in the brand colour, a little stronger on hover / focus-visible / active. box-shadow + border-color only:
   no filter, no animation, no size change (an element without its own border gets a 1px ring inside the shadow instead of
   a border, so nothing moves). Text and background colours are untouched; any old box-shadow of these elements is replaced.
   Not on: links inside text, form fields, tables, article images, the header / footer bars themselves (their buttons yes),
   the mobile call/WhatsApp bar (full-width bar, not a button shape), the video play overlay. */
:root {
	--yr-glow: 58, 93, 165;                 /* = --yr-primary-2 #3a5da5 */
	--yr-glow-edge: rgba(var(--yr-glow), .35);
	--yr-glow-rest: 0 0 16px rgba(var(--yr-glow), .22);
	--yr-glow-hover: 0 0 26px rgba(var(--yr-glow), .38);
	--yr-glow-d-edge: rgba(159, 182, 222, .45);  /* on dark backgrounds (hero band, dark boxes, footer) */
	--yr-glow-d-rest: 0 0 18px rgba(120, 150, 220, .30);
	--yr-glow-d-hover: 0 0 30px rgba(120, 150, 220, .50);
	--yr-glow-wa: 24, 119, 47;              /* the site's WhatsApp green #18772f */
	--yr-glow-wa-edge: rgba(var(--yr-glow-wa), .35);
	--yr-glow-wa-rest: 0 0 16px rgba(var(--yr-glow-wa), .28);
	--yr-glow-wa-hover: 0 0 26px rgba(var(--yr-glow-wa), .45);
	--yr-glow-t: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
@media (max-width: 767.98px) {
	:root {
		--yr-glow-rest: 0 0 10px rgba(var(--yr-glow), .22); --yr-glow-hover: 0 0 16px rgba(var(--yr-glow), .38);
		--yr-glow-d-rest: 0 0 10px rgba(120, 150, 220, .30); --yr-glow-d-hover: 0 0 16px rgba(120, 150, 220, .50);
		--yr-glow-wa-rest: 0 0 10px rgba(var(--yr-glow-wa), .28); --yr-glow-wa-hover: 0 0 16px rgba(var(--yr-glow-wa), .45);
	}
}
/* what gets the halo: first the elements that have their own border (border-color = edge), then those without one (1px ring in the shadow). */
:is(.yg-btn, .yr-totop, .yg-chipf, .yr-lang, .yr-menu-toggle,
	.yg-wc, .yg-hubc, .yg-hospc, .yg-clinic, .yg-way, .yg-stats, .yg-paper, .yg-vid, .yg-lead-post, .yg-post, .yg-topic,
	.yg-sbox.yg-clu, .yg-sbox.yg-book, .yg-idcard, .yg-cl-card, .yg-mapc, .yg-about__tag,
	.yr-ins-company, .yr-ins-step, .yr-ins-mini-card, .yr-ins-info-card, .yr-petroleum-card, .yr-ins-stat, .yr-ins-hero-panel,
	.yr-joint-hero-card, .yr-video-card, .yr-joint-card) {
	border-color: var(--yr-glow-edge) !important; box-shadow: var(--yr-glow-rest) !important; transition: var(--yr-glow-t);
}
:is(a.fasc-button, .yr-joint-btn, .yr-book__send, .wp-block-button__link, .yg-tab, .yr-videos-arrow, input[type="submit"], .yg-rg, .yr-ins-cta) {
	box-shadow: 0 0 0 1px var(--yr-glow-edge), var(--yr-glow-rest) !important; transition: var(--yr-glow-t);
}
:is(.yg-btn, .yr-totop, .yg-chipf, .yr-lang, .yr-menu-toggle,
	.yg-wc, .yg-hubc, .yg-hospc, .yg-clinic, .yg-way, .yg-stats, .yg-paper, .yg-vid, .yg-lead-post, .yg-post, .yg-topic,
	.yg-sbox.yg-clu, .yg-sbox.yg-book, .yg-idcard, .yg-cl-card, .yg-mapc, .yg-about__tag,
	.yr-ins-company, .yr-ins-step, .yr-ins-mini-card, .yr-ins-info-card, .yr-petroleum-card, .yr-ins-stat, .yr-ins-hero-panel,
	.yr-joint-hero-card, .yr-video-card, .yr-joint-card):is(:hover, :focus-visible, :active, :focus-within) { box-shadow: var(--yr-glow-hover) !important; }
:is(a.fasc-button, .yr-joint-btn, .yr-book__send, .wp-block-button__link, .yg-tab, .yr-videos-arrow, input[type="submit"], .yg-rg, .yr-ins-cta):is(:hover, :focus-visible, :active) {
	box-shadow: 0 0 0 1px var(--yr-glow-edge), var(--yr-glow-hover) !important;
}
/* on dark backgrounds: the hero band, the dark booking box, the booking card, the dark home sections (features, call to action,
   quote, reviews, shorts), the dark final boxes, the footer */
:is(.yg-band, .yg-sbox.yg-book, .yg-icta, .yg-cta, .yg-feat, .yg-quote, .yg-rev, .yg-short, .yr-final-cta, .yg-foot, .yg-card) :is(.yg-btn, .yr-lang, .yr-menu-toggle, .yg-idcard, .yg-cl-card, .yg-about__tag) {
	border-color: var(--yr-glow-d-edge) !important; box-shadow: var(--yr-glow-d-rest) !important;
}
:is(.yg-band, .yg-sbox.yg-book, .yg-icta, .yg-cta, .yg-feat, .yg-quote, .yg-rev, .yg-short, .yr-final-cta, .yg-foot, .yg-card) :is(.yg-btn, .yr-lang, .yr-menu-toggle, .yg-idcard, .yg-cl-card, .yg-about__tag):is(:hover, :focus-visible, :active, :focus-within) { box-shadow: var(--yr-glow-d-hover) !important; }
:is(.yg-band, .yg-sbox.yg-book, .yg-icta, .yg-cta, .yg-feat, .yg-quote, .yg-rev, .yg-short, .yr-final-cta, .yg-foot, .yg-card) :is(a.fasc-button, .yr-joint-btn, .wp-block-button__link) { box-shadow: 0 0 0 1px var(--yr-glow-d-edge), var(--yr-glow-d-rest) !important; }
:is(.yg-band, .yg-sbox.yg-book, .yg-icta, .yg-cta, .yg-feat, .yg-quote, .yg-rev, .yg-short, .yr-final-cta, .yg-foot, .yg-card) :is(a.fasc-button, .yr-joint-btn, .wp-block-button__link):is(:hover, :focus-visible, :active) { box-shadow: 0 0 0 1px var(--yr-glow-d-edge), var(--yr-glow-d-hover) !important; }
/* WhatsApp buttons: green halo, always (the :not(#…) only raises the specificity above the dark / old rules) */
:is(.yr-wa-float, .yg-btn--wa, a.fasc-button.dashicons-admin-comments, a.fasc-button[href*="wa.me"], a.fasc-button[href*="whatsapp"], a.yr-joint-btn-whatsapp):not(#yr-glow-x) {
	border-color: var(--yr-glow-wa-edge) !important; box-shadow: 0 0 0 1px var(--yr-glow-wa-edge), var(--yr-glow-wa-rest) !important; transition: var(--yr-glow-t);
}
:is(.yr-wa-float, .yg-btn--wa, a.fasc-button.dashicons-admin-comments, a.fasc-button[href*="wa.me"], a.fasc-button[href*="whatsapp"], a.yr-joint-btn-whatsapp):not(#yr-glow-x):is(:hover, :focus-visible, :active) {
	box-shadow: 0 0 0 1px var(--yr-glow-wa-edge), var(--yr-glow-wa-hover) !important;
}
/* a white glass card inside a dark section (clinic hero card…): its buttons are on white, so the light halo */
:is(.yg-band, .yg-sbox.yg-book, .yg-icta, .yg-cta, .yg-feat, .yg-foot) .yg-glass-l :is(.yg-btn, a.fasc-button, .yr-joint-btn) { border-color: var(--yr-glow-edge) !important; box-shadow: var(--yr-glow-rest) !important; }
:is(.yg-band, .yg-sbox.yg-book, .yg-icta, .yg-cta, .yg-feat, .yg-foot) .yg-glass-l :is(.yg-btn, a.fasc-button, .yr-joint-btn):is(:hover, :focus-visible, :active) { box-shadow: var(--yr-glow-hover) !important; }
/* old rules that are more specific (legacy CSS of the landing / insurance pages): same halo, stronger selector */
.yr-joint-page a.yr-joint-btn.yr-joint-btn, .yr-ins-page a.fasc-button.fasc-button { box-shadow: 0 0 0 1px var(--yr-glow-edge), var(--yr-glow-rest) !important; transition: var(--yr-glow-t); }
:is(.yr-joint-page a.yr-joint-btn.yr-joint-btn, .yr-ins-page a.fasc-button.fasc-button):is(:hover, :focus-visible, :active) { box-shadow: 0 0 0 1px var(--yr-glow-edge), var(--yr-glow-hover) !important; }
.yr-joint-page :is(.yr-final-cta, .yg-band, .yg-icta) a.yr-joint-btn.yr-joint-btn { box-shadow: 0 0 0 1px var(--yr-glow-d-edge), var(--yr-glow-d-rest) !important; }
.yr-joint-page :is(.yr-final-cta, .yg-band, .yg-icta) a.yr-joint-btn.yr-joint-btn:is(:hover, :focus-visible, :active) { box-shadow: 0 0 0 1px var(--yr-glow-d-edge), var(--yr-glow-d-hover) !important; }
@media (prefers-reduced-motion: reduce) {
	:is(.yg-btn, .yr-totop, .yg-chipf, .yr-lang, .yr-menu-toggle, a.fasc-button, .yr-joint-btn, .yr-book__send, .wp-block-button__link, .yg-tab, .yr-videos-arrow, input[type="submit"], .yr-wa-float,
		.yg-wc, .yg-hubc, .yg-hospc, .yg-clinic, .yg-way, .yg-stats, .yg-paper, .yg-vid, .yg-lead-post, .yg-post, .yg-topic, .yg-rg,
		.yg-sbox.yg-clu, .yg-sbox.yg-book, .yg-idcard, .yg-cl-card, .yg-mapc, .yg-about__tag, .yr-ins-company, .yr-ins-step, .yr-ins-mini-card,
		.yr-ins-info-card, .yr-petroleum-card, .yr-ins-stat, .yr-ins-hero-panel, .yr-ins-cta, .yr-joint-hero-card, .yr-video-card, .yr-joint-card) { transition: none !important; }
}

/* Message 89 / 1: the [toc] shortcode in the content of 27 pages prints nothing now (the TOC is the theme's), so its frame
   <div class="yr-joint-toc-note"></div> showed as an empty box. Hidden only when it is empty; content untouched. */
.yr-joint-toc-note:empty { display: none; }

/* Message 93 / 1: a top menu item that is only a parent ("#", like «المزيد») opens on hover, on click and with the keyboard on
   desktop; a second click or Escape closes it (nav.js adds .is-open / .yr-closed). Its arrow and pointer show it can be opened. */
@media (min-width: 1100px) {
	.yr-menu > li > a[href="#"] { cursor: pointer; }
	.yr-menu > li.is-open > .sub-menu { display: block; }
	.yr-menu > li.is-open > .sub-menu:has(.sub-menu) { display: grid; }
	.yr-menu > li.yr-closed > .sub-menu { display: none !important; }
}