/* Language switcher — built to sit inside the existing navy/teal header. */

.safwat-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-family: inherit;
	font-size: 13px;
	letter-spacing: .02em;
	white-space: nowrap;
}

.safwat-lang__opt {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	color: #4a5a72;
	text-decoration: none;
	line-height: 1;
	transition: color .15s ease, background-color .15s ease;
}

.safwat-lang__opt:hover,
.safwat-lang__opt:focus-visible {
	color: #18335A;
	background: rgba(17, 170, 174, .10);
}

.safwat-lang__opt.is-active {
	color: #18335A;
	font-weight: 600;
	background: rgba(17, 170, 174, .14);
}

.safwat-lang__opt.is-partial { opacity: .55; }

.safwat-lang__opt[lang="ar"] {
	font-size: 14px;
	padding-top: 5px;
	padding-bottom: 7px;
}

.safwat-lang--header { margin-inline-end: 4px; }

.safwat-lang--mobile {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	gap: 6px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(24, 51, 90, .12);
}

.safwat-lang--mobile .safwat-lang__opt {
	padding: 10px 14px;
	font-size: 15px;
}

@media (max-width: 1100px) {
	.safwat-lang--header .safwat-lang__opt { padding: 6px 7px; }
}

/* The desktop control may hide on narrow screens ONLY when a mobile control
   was actually inserted into the mobile navigation. Without that class the
   switcher stays visible at every width — never leave a visitor with no way
   to change language. */
@media (max-width: 860px) {
	.safwat-lang-mobile-ok .safwat-lang--header.is-placed { display: none; }
}

/* Patient handout block */
.safwat-guide {
	margin: 32px 0;
	padding: 24px 28px;
	border: 1px solid rgba(24, 51, 90, .14);
	border-inline-start: 3px solid #11AAAE;
	background: #FAFAF7;
}

.safwat-guide__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #11AAAE;
}

.safwat-guide__title {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 600;
	color: #18335A;
}

.safwat-guide__btn {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	background: #18335A;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.safwat-guide__btn:hover { background: #11AAAE; }

/* Clinical review line */
.safwat-review {
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid rgba(24, 51, 90, .12);
	font-size: 13px;
	color: #5c6b80;
}

/* German sets longer words; let navigation and buttons breathe rather than shrink. */
.safwat-lang-de .sm-btn,
.safwat-lang-de .safwat-guide__btn { white-space: normal; }

.safwat-lang-de h1,
.safwat-lang-de h2 { hyphens: auto; overflow-wrap: break-word; }

/* Visible fallback bar for the switcher before/without JavaScript. */
.safwat-lang-bar {
	display: flex;
	justify-content: flex-end;
	padding: 6px 24px;
	background: #F5F5EF;
	border-bottom: 1px solid rgba(24, 51, 90, .08);
}

.safwat-lang--inline { display: inline-flex; }

/* Unavailable-translation notice */
.safwat-unavailable {
	margin: 28px 0;
	padding: 20px 24px;
	border: 1px solid rgba(24, 51, 90, .16);
	border-inline-start: 3px solid #D3AE63;
	background: #FAFAF7;
}

.safwat-unavailable p { margin: 0 0 8px; }
.safwat-unavailable p:last-child { margin: 0; }
.safwat-unavailable a { color: #18335A; font-weight: 600; }

/* Mobile language control — full-size, inside the mobile navigation. */
.safwat-lang--mobile {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(24, 51, 90, .14);
}

.safwat-lang--mobile .safwat-lang__opt {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 12px 18px;
	font-size: 16px;
	border: 1px solid rgba(24, 51, 90, .18);
	border-radius: 999px;
}

.safwat-lang--mobile .safwat-lang__opt.is-active {
	background: #18335A;
	border-color: #18335A;
	color: #fff;
}

/* Untranslated-page state */
.safwat-untranslated-page {
	display: block;
	padding: 96px 24px 120px;
	background: #F5F5EF;
}

.safwat-untranslated-page__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.safwat-untranslated-page h1 {
	margin: 0 0 16px;
	font-size: clamp(28px, 4vw, 40px);
	color: #18335A;
}

.safwat-untranslated-page p { margin: 0 0 24px; color: #4a5a72; font-size: 17px; }

/* German: compact header so nav does not wrap onto two lines. */
.safwat-lang-de .sm-header-inner { gap: 18px; }
.safwat-lang-de .sm-header-inner a { white-space: nowrap; }
.safwat-lang-de .sm-btn--primary { padding-left: 18px; padding-right: 18px; white-space: nowrap; }

@media (max-width: 1280px) {
	.safwat-lang-de .sm-header-inner { gap: 12px; font-size: 15px; }
	.safwat-lang-de .safwat-lang--header .safwat-lang__opt { padding: 6px 6px; }
}

/* ---------------------------------------------------------------
   Header sizing — applies to EVERY language, not just German.
   The switcher adds width to the header bar, so the nav must be
   allowed to stay on one line at real desktop widths, and the type
   must not read as fine print next to a 22px brand lockup.
   --------------------------------------------------------------- */
.sm-header-inner { gap: 22px; }
.sm-header-inner nav a,
.sm-header-inner .sm-nav a,
.sm-header-inner > nav > ul > li > a { white-space: nowrap; }
.sm-header-inner a { white-space: nowrap; }

/* Navigation type: 16px, not 13–14px. */
.sm-header-inner nav a,
.sm-header-inner .sm-nav a {
	font-size: 16px;
	letter-spacing: .005em;
}

/* Brand credential line must never break to three lines. */
.sm-header-inner .sm-brand-sub,
.sm-header-inner .sm-logo small,
.sm-header-inner .sm-brand small { white-space: nowrap; font-size: 12.5px; }

/* Primary CTA stays one line. */
.sm-header-inner .sm-btn--primary {
	white-space: nowrap;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 15px;
}

/* Switcher: match the nav, and give back width as the viewport narrows. */
.safwat-lang { font-size: 15px; }
.safwat-lang__opt[lang="ar"] { font-size: 16px; }

@media (max-width: 1400px) {
	.sm-header-inner { gap: 16px; }
	.safwat-lang--header .safwat-lang__opt { padding: 6px 7px; }
}

@media (max-width: 1240px) {
	.sm-header-inner { gap: 12px; }
	.sm-header-inner nav a,
	.sm-header-inner .sm-nav a { font-size: 15px; }
	.safwat-lang { font-size: 14px; }
	.safwat-lang--header .safwat-lang__opt { padding: 5px 5px; }
}

/* Below this the desktop nav collapses to the mobile menu anyway. */

/* Arabic service pages: a readable continuous journey, with a compact index. */
.safwat-service { color:#18335a; background:#fff; }
.safwat-service__wrap { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.safwat-service__hero { padding:3rem 0; background:#f5f6f2; border-block-end:1px solid #dde3e8; }
.safwat-service__hero nav { font-size:.95rem; display:flex; gap:.65rem; flex-wrap:wrap; }
.safwat-service__hero h1 { font-size:clamp(2.2rem,4vw,3.5rem); margin:1rem 0 .5rem; }
.safwat-service__hero p { max-width:48rem; margin:0; font-size:1.2rem; color:#526477; }
.safwat-service__layout { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:3.5rem; padding-block:3rem; align-items:start; }
.safwat-service__index { position:sticky; top:8rem; padding:1.2rem; border:1px solid #dde3e8; border-radius:8px; background:#f8faf9; }
.safwat-service__index p { font-weight:600; margin:0 0 .7rem; }
.safwat-service__index a { display:block; padding:.45rem 0; color:#244563; font-size:1rem; line-height:1.6; }
.safwat-service__section { padding-block:0 2rem; margin-block-end:2rem; border-block-end:1px solid #dde3e8; scroll-margin-top:8rem; }
.safwat-service__section h2 { margin:0 0 .8rem; font-size:1.85rem; }
.safwat-service__section p,.safwat-service__section li { font-size:1.16rem; }
.safwat-service__step { color:#087c80; margin:0 0 .3rem; font-weight:600; }
.safwat-service__links { display:flex; flex-wrap:wrap; gap:.7rem 1.2rem; margin-block-start:1rem; }
.safwat-service__links a { color:#08777b; text-decoration:underline; text-underline-offset:.2em; overflow-wrap:anywhere; }
.safwat-service__cta { padding:2.7rem 0; background:#18335a; color:#fff; }
.safwat-service__cta h2 { margin:0 0 .5rem; }
.safwat-service__cta a { display:inline-block; background:#fff; color:#18335a; padding:.7rem 1.5rem; border-radius:4px; }
.safwat-service a:focus-visible { outline:3px solid #07989d; outline-offset:4px; }
@media(max-width:800px) {
 .safwat-service__wrap { width:calc(100% - 32px); }
 .safwat-service__layout { grid-template-columns:1fr; gap:1.75rem; padding-block:1.75rem; }
 .safwat-service__index { position:static; }
 .safwat-service__hero { padding:2rem 0; }
 .safwat-service__section { scroll-margin-top:6rem; }
}