/*
 * Folliculis design system.
 *
 * Reference-work restraint rather than clinic marketing: hairline rules,
 * generous whitespace, one accent used sparingly, numerals given weight
 * because the numbers are the product. No gradients, no oversized calls to
 * action, no promotional colour.
 */

.fx {
	--ink: #101c24;
	--ink-2: #4a5661;
	--ink-3: #78848d;
	--accent: #15679c;
	--accent-ink: #0e4a72;
	--accent-wash: #eaf2f8;
	--canvas: #fbfcfd;
	--surface: #ffffff;
	--line: #e4e8ec;
	--line-2: #d2d8de;
	--gold: #8a6d2f;
	--gold-wash: #f7f3e9;
	--warn: #a8442a;
	--star: #d99b2e;

	--r: 10px;
	--r-sm: 7px;
	--shadow: 0 1px 2px rgba(16, 28, 36, .04), 0 12px 32px -18px rgba(16, 28, 36, .22);
	--wrap: 1200px;

	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
		"Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}

.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }

/* The hidden attribute must win over any display rule below. The browser's
   own [hidden] rule loses to author CSS: the consent banner (display: flex)
   stayed on screen after Accept, and for visitors who had already chosen. */
.fx [hidden] { display: none !important; }

.fx h1, .fx h2, .fx h3, .fx h4 {
	margin: 0 0 .4em;
	line-height: 1.18;
	letter-spacing: -.021em;
	font-weight: 640;
	color: var(--ink);
}

.fx p { margin: 0 0 1em; }
.fx a { color: var(--accent-ink); }
.fx img { max-width: 100%; height: auto; }

.fx-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fx-skip {
	position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
	padding: 12px 18px; background: var(--ink); color: #fff;
}
.fx-skip:focus { inset-inline-start: 0; }

.fx-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* ==========================================================  header  ==== */

.fx-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(251, 252, 253, .92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--line);
}

.fx-header__bar {
	display: flex; align-items: center; gap: 26px;
	max-width: var(--wrap); margin: 0 auto; padding: 0 22px; height: 82px;
}

.fx-brand {
	display: flex; align-items: center;
	text-decoration: none; color: var(--ink); flex-shrink: 0;
}
.fx-brand__text { display: block; line-height: 1.1; }
.fx-brand__word {
	display: block; font-size: 29px; font-weight: 680; letter-spacing: -.035em;
}
.fx-brand__tag {
	display: block; margin-top: 2px;
	font-size: 10.5px; font-weight: 600; letter-spacing: .11em;
	text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

/* Only hidden in the band where the full desktop nav competes for the row.
   Below 1080px the nav collapses to the burger, so the tagline fits again. */
@media (max-width: 1240px) and (min-width: 1081px) {
	.fx-brand__tag { display: none; }
}
@media (max-width: 520px) {
	.fx-brand__word { font-size: 25px; }
	.fx-brand__tag { font-size: 9px; letter-spacing: .07em; }
}

.fx-nav { flex: 1; min-width: 0; }
.fx-nav ul {
	display: flex; align-items: center; gap: 2px;
	margin: 0; padding: 0; list-style: none;
}
.fx-nav a, .fx-nav__toggle {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 8px 11px; border: 0; border-radius: var(--r-sm);
	background: none; font: inherit; font-size: 14.5px; font-weight: 520;
	color: var(--ink-2); text-decoration: none; cursor: pointer;
	white-space: nowrap;
}
.fx-nav a:hover, .fx-nav__toggle:hover { background: rgba(16, 28, 36, .05); color: var(--ink); }
.fx-nav__caret { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fx-nav__toggle[aria-expanded="true"] { background: rgba(16, 28, 36, .07); color: var(--ink); }
.fx-nav__toggle[aria-expanded="true"] .fx-nav__caret { transform: rotate(180deg); }

.fx-header__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.fx-burger { display: none; border: 0; background: none; padding: 8px; cursor: pointer; }
.fx-burger svg { width: 20px; height: 14px; stroke: var(--ink); stroke-width: 1.7; fill: none; }

/* ==========================================================  search  ==== */

.fx-search { display: flex; align-items: center; }

.fx-search--hero {
	gap: 8px; width: 100%; max-width: 620px;
	padding: 6px; background: var(--surface);
	border: 1px solid var(--line-2); border-radius: 12px;
	box-shadow: var(--shadow);
}
.fx-search--hero input {
	flex: 1; min-width: 0; padding: 12px 14px;
	border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink);
}
.fx-search--hero input:focus { outline: none; }
.fx-search--hero button {
	padding: 12px 22px; border: 0; border-radius: 8px;
	background: var(--ink); color: #fff;
	font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.fx-search--hero button:hover { background: var(--accent-ink); }

/* =====================================================  mega menu  ===== */

.fx-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--surface); border-bottom: 1px solid var(--line);
	box-shadow: 0 20px 40px -28px rgba(16, 32, 30, .4);
	max-height: 72vh; overflow-y: auto;
}
.fx-mega__inner { max-width: var(--wrap); margin: 0 auto; padding: 22px; }

.fx-mega__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.fx-mega__search input {
	width: 320px; max-width: 100%; padding: 10px 14px;
	border: 1px solid var(--line-2); border-radius: var(--r-sm);
	font: inherit; font-size: 15px;
}
.fx-mega__search input:focus {
	outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}
.fx-mega__meta { margin: 0; font-size: 13px; color: var(--ink-3); }

.fx-mega__body { columns: 5; column-gap: 26px; }
@media (max-width: 1100px) { .fx-mega__body { columns: 4; } }
@media (max-width: 860px)  { .fx-mega__body { columns: 3; } }
@media (max-width: 620px)  { .fx-mega__body { columns: 2; } }

.fx-mega__group { break-inside: avoid; margin-bottom: 16px; }
.fx-mega__letter {
	margin: 0 0 5px; font-size: 11px; font-weight: 700;
	letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase;
	border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.fx-mega__group ul { margin: 0; padding: 0; list-style: none; }
.fx-mega__group a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
	padding: 3px 0; font-size: 14px; text-decoration: none; color: var(--ink-2);
}
.fx-mega__group a:hover { color: var(--accent-ink); }
.fx-mega__group li.is-empty a { color: var(--ink-3); }
.fx-mega__count {
	font-size: 11.5px; font-weight: 650; color: var(--accent-ink);
	background: var(--accent-wash); border-radius: 4px; padding: 0 5px;
}
.fx-mega__empty { padding: 20px 0; color: var(--ink-3); }

/* ======================================================  mobile  ======= */

.fx-mobile {
	border-top: 1px solid var(--line); background: var(--surface); padding: 16px 22px 22px;
}
.fx-mobile ul { margin: 0; padding: 0; list-style: none; }
.fx-mobile a {
	display: block; padding: 11px 0; border-bottom: 1px solid var(--line);
	font-size: 16px; font-weight: 540; color: var(--ink); text-decoration: none;
}

/* The nav needs about 1030px in English and Turkish with the language
   flags beside it; below that it slid under the search box. Longer
   labels (German) need more, and no fixed width fits every language: a script
   in the shell measures the row and adds --notag (drop the tagline) or
   --compact (switch to the burger) when the nav still does not fit. */
@media (max-width: 1080px) {
	.fx-nav { display: none; }
	.fx-burger { display: block; }
	.fx-header__bar { justify-content: space-between; gap: 12px; }
}
@media (min-width: 1081px) { .fx-mobile { display: none; } }

.fx-header--notag .fx-brand__tag { display: none; }
.fx-header--compact .fx-nav { display: none; }
.fx-header--compact .fx-burger { display: block; }
.fx-header--compact .fx-header__bar { justify-content: space-between; gap: 12px; }
.fx-header--compact .fx-mobile:not([hidden]) { display: block; }

/* Languages as a row of flags, in the header and at the top of the mobile
   menu; the name is in title. The row has a 264px budget, what search and
   the language button took before: wider, and the English and Turkish
   taglines no longer fit at full width. Twelve 20px flags fit it only 2px
   apart, too close for a ring, so the current language is underlined. */
.fx-langflags {
	display: flex; align-items: center; gap: 0;
	margin: 0; padding: 0; list-style: none;
}
.fx-langflag {
	display: flex; align-items: center; justify-content: center;
	padding: 6px 1px; border-radius: 3px; text-decoration: none;
	transition: background-color .15s ease;
}
.fx-langflag .fx-flag__img { width: 20px; }
.fx-langflag:hover { background: rgba(16, 28, 36, .07); }
.fx-langflag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fx-langflag[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.fx-mobile .fx-langflag[aria-current="true"] { box-shadow: none; }
.fx-mobile .fx-langflag[aria-current="true"] .fx-flag__img {
	box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--accent);
}

/* In the burger menu the flags are larger tap targets and wrap. The header
   row keeps them down to 760px; below that they live only in the menu. */
.fx-mobile .fx-langflags { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fx-mobile .fx-langflag { padding: 8px; border: 0; }
.fx-mobile .fx-langflag .fx-flag__img { width: 28px; }
@media (min-width: 761px) { .fx-mobile .fx-langflags { display: none; } }
@media (max-width: 760px) { .fx-header__tools .fx-langflags { display: none; } }

/* On a phone a long tagline (German) may wrap rather than push the burger
   off the screen. */
@media (max-width: 520px) {
	.fx-brand { flex-shrink: 1; min-width: 0; }
	.fx-brand__tag { white-space: normal; }
}

/* =========================================================  hero  ====== */

.fx-hero { padding: 58px 0 44px; border-bottom: 1px solid var(--line); }
.fx-hero__title {
	font-size: clamp(32px, 4.6vw, 52px); font-weight: 680;
	letter-spacing: -.033em; max-width: 17ch; margin-bottom: 16px;
}
.fx-hero__sub {
	max-width: 60ch; font-size: 17.5px; color: var(--ink-2); margin-bottom: 26px;
}
.fx-hero__hints {
	display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
	margin-top: 12px; font-size: 13.5px; color: var(--ink-3);
}
.fx-hero__hints a {
	padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 999px;
	text-decoration: none; color: var(--ink-2); background: var(--surface);
}
.fx-hero__hints a:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ========================================================  stats  ====== */

.fx-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0; margin: 32px 0 0; padding: 0; list-style: none;
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
	background: var(--surface);
}
.fx-stat { padding: 18px 20px; border-inline-end: 1px solid var(--line); }
.fx-stat:last-child { border-inline-end: 0; }
.fx-stat__value {
	display: block; font-size: 27px; font-weight: 680;
	letter-spacing: -.028em; line-height: 1.1; color: var(--ink);
}
.fx-stat__label {
	display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3);
	letter-spacing: .01em;
}

/* ======================================================  sections  ===== */

.fx-section { padding: 52px 0; border-bottom: 1px solid var(--line); }
.fx-section:last-of-type { border-bottom: 0; }
.fx-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.fx-section__title { font-size: 23px; margin: 0; }
.fx-section__note { margin: 6px 0 0; color: var(--ink-2); max-width: 68ch; }
.fx-more {
	font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--accent-ink);
	white-space: nowrap;
}
.fx-more:hover { text-decoration: underline; }

/* =========================================================  tiles  ===== */

.fx-tiles {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.fx-tile {
	display: block; padding: 16px 18px; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--r); text-decoration: none;
	transition: border-color .15s, transform .15s;
}
.fx-tile:hover { border-color: var(--line-2); transform: translateY(-1px); }
.fx-tile__name { display: block; font-weight: 620; font-size: 15.5px; color: var(--ink); }
.fx-tile__sub { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }

/* =========================================================  cards  ===== */

.fx-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 14px;
}

.fx-card {
	display: flex; flex-direction: column; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.fx-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.fx-card__body { padding: 17px 18px; display: flex; flex-direction: column; flex: 1; }

.fx-card__name { font-size: 16.5px; font-weight: 630; margin: 0 0 5px; }
.fx-card__name a { color: var(--ink); text-decoration: none; }
.fx-card__name a:hover { color: var(--accent-ink); }

.fx-card__place { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-3); }

.fx-card__rating {
	display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px;
	color: var(--ink-2);
}
.fx-card__score { font-weight: 680; color: var(--ink); font-size: 14px; }

.fx-card__tags {
	display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; padding: 0; list-style: none;
}
.fx-card__tags li {
	font-size: 12px; color: var(--ink-2);
	border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px;
}

.fx-card__langs { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }

.fx-card__actions {
	display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
	padding-top: 12px; border-top: 1px solid var(--line);
}
.fx-act {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 6px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
	text-decoration: none; border: 1px solid var(--line-2); color: var(--ink-2);
	background: var(--surface);
}
.fx-act:hover { border-color: var(--accent); color: var(--accent-ink); }
/* The label stays white in every state. Theme link colours cascade into
   buttons otherwise and turn a dark button's text dark. */
.fx-act--primary,
.fx-act--primary:link,
.fx-act--primary:visited,
.fx-act--primary:hover,
.fx-act--primary:focus,
.fx-act--primary:active {
	background: var(--ink);
	border-color: var(--ink);
	color: #ffffff !important;
}
.fx-act--primary:hover,
.fx-act--primary:focus { background: var(--accent-ink); border-color: var(--accent-ink); }

/* =========================================================  stars  ===== */

.fx-stars { display: inline-flex; gap: 1px; color: var(--star); }
.fx-star { width: 12px; height: 12px; }
.fx-star--full, .fx-star--half { fill: currentColor; }
.fx-star--empty { fill: #dfe3e8; }

/* ========================================================  badges  ===== */

.fx-badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px; border-radius: 999px;
	font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
	border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface);
}
.fx-badge--member { background: var(--gold-wash); border-color: #e7dcc2; color: var(--gold); }
.fx-badge--checked { background: var(--accent-wash); border-color: #c9dcec; color: var(--accent-ink); }
.fx-badge--warn { background: #fbefeb; border-color: #efd2c8; color: var(--warn); }

/* =======================================================  promise  ===== */

.fx-promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
	background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fx-promise > div { background: var(--surface); padding: 22px; }
.fx-promise h3 { font-size: 15.5px; margin-bottom: 7px; }
.fx-promise p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ==========================================================  steps  ==== */

.fx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.fx-step__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 27px; height: 27px; border-radius: 50%;
	background: var(--ink); color: #fff; font-size: 13px; font-weight: 680; margin-bottom: 11px;
}
.fx-step h3 { font-size: 16px; margin-bottom: 6px; }
.fx-step p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ========================================================  footer  ===== */

.fx-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 20px; }
.fx-footer__inner {
	max-width: var(--wrap); margin: 0 auto; padding: 46px 22px 34px;
	display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px;
}
@media (max-width: 860px) { .fx-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fx-footer__inner { grid-template-columns: 1fr; } }

.fx-footer__word { font-size: 18px; font-weight: 660; letter-spacing: -.03em; margin: 0 0 10px; }
.fx-footer__line { font-size: 13.5px; color: var(--ink-2); max-width: 44ch; margin: 0 0 8px; }
.fx-footer__line--muted { color: var(--ink-3); }

.fx-footer__col h2 {
	font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
	color: var(--ink-3); font-weight: 700; margin-bottom: 11px;
}
.fx-footer__col ul { margin: 0; padding: 0; list-style: none; }
.fx-footer__col li { margin-bottom: 7px; }
.fx-footer__col a {
	display: flex; justify-content: space-between; gap: 10px;
	font-size: 14px; color: var(--ink-2); text-decoration: none;
}
.fx-footer__col a:hover { color: var(--accent-ink); }
.fx-footer__col a span { color: var(--ink-3); font-size: 12.5px; }

.fx-footer__legal { border-top: 1px solid var(--line); }
.fx-footer__legal p {
	max-width: var(--wrap); margin: 0 auto; padding: 18px 22px;
	font-size: 12.5px; color: var(--ink-3);
}

/* =====================================================  breadcrumb  ==== */

.fx-crumbs { padding: 18px 0 0; }
.fx-crumbs ol {
	display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
	font-size: 13px; color: var(--ink-3);
}
.fx-crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--line-2); }
.fx-crumbs a { color: var(--ink-2); text-decoration: none; }
.fx-crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ====================================================  clinic page  ==== */

.fx-clinic__head { padding: 20px 0 26px; border-bottom: 1px solid var(--line); }
.fx-clinic__title { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 8px; }
.fx-clinic__place { font-size: 16px; color: var(--ink-2); margin: 0 0 14px; }
.fx-clinic__signals { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.fx-contact-bar {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.fx-contact-bar .fx-act { padding: 10px 18px; font-size: 14px; }

.fx-cols {
	display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px;
	align-items: start; padding: 34px 0 20px;
}
@media (max-width: 940px) {
	.fx-cols { grid-template-columns: 1fr; gap: 26px; }
	.fx-cols__side { order: -1; }
}

.fx-facts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px; background: var(--line);
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
	margin: 0 0 30px;
}
.fx-fact { background: var(--surface); padding: 14px 16px; }
.fx-fact__k {
	display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--ink-3); margin-bottom: 4px;
}
.fx-fact__v { display: block; font-size: 15px; color: var(--ink); font-weight: 540; word-break: break-word; }
.fx-fact__v a { color: var(--accent-ink); text-decoration: none; }
.fx-fact__v a:hover { text-decoration: underline; }

.fx-panel {
	position: sticky; top: 84px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r); padding: 20px; box-shadow: var(--shadow);
}
.fx-panel h2 { font-size: 17px; margin-bottom: 3px; }
.fx-panel__note { font-size: 13px; color: var(--ink-2); margin: 0 0 15px; }
.fx-panel__list { margin: 0; padding: 0; list-style: none; }
.fx-panel__row {
	display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px;
	padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.fx-panel__row:first-child { border-top: 0; }
.fx-panel__k {
	font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
}
.fx-panel__v { font-size: 14.5px; color: var(--ink); word-break: break-word; }
a.fx-panel__v { color: var(--accent-ink); text-decoration: none; font-weight: 540; }
a.fx-panel__v:hover { text-decoration: underline; }

.fx-block { margin-bottom: 34px; }
.fx-block h2 { font-size: 20px; margin-bottom: 12px; }
.fx-block p { color: var(--ink-2); max-width: 72ch; }

.fx-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; padding: 0; list-style: none; }
.fx-pills a {
	display: inline-block; padding: 6px 13px; border: 1px solid var(--line-2);
	border-radius: 999px; font-size: 13.5px; color: var(--ink-2);
	text-decoration: none; background: var(--surface);
}
.fx-pills a:hover { border-color: var(--accent); color: var(--accent-ink); }

.fx-note { font-size: 13px; color: var(--ink-3); max-width: 74ch; }

.fx-sources {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r); padding: 20px 22px;
}
.fx-sources h2 { font-size: 17px; }
.fx-sources ul { margin: 0 0 12px; padding: 0 0 0 18px; color: var(--ink-2); font-size: 14px; }
.fx-sources li { margin-bottom: 4px; }

.fx-surgeon {
	display: grid; gap: 3px; padding: 14px 16px; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 9px;
}
.fx-surgeon__name { font-weight: 630; font-size: 15.5px; }
.fx-surgeon__meta { font-size: 12.5px; font-weight: 640; color: var(--gold); letter-spacing: .02em; }
.fx-surgeon__proc { font-size: 13px; color: var(--ink-3); }

.fx-map {
	width: 100%; height: 320px; border: 1px solid var(--line);
	border-radius: var(--r); display: block; background: var(--accent-wash);
}
/* Until the reader asks for the map, the same box holds a note and a button. */
.fx-map--gate {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; padding: 24px; text-align: center;
}
.fx-map--gate p { margin: 0; max-width: 420px; font-size: 14px; color: var(--ink-2); }

/* ====================================================  pagination  ==== */

.fx .nav-links, .fx .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.fx .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 12px;
	border: 1px solid var(--line-2); border-radius: var(--r-sm);
	background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 14px;
}
.fx .page-numbers:hover { border-color: var(--accent); color: var(--accent-ink); }
.fx .page-numbers.current {
	background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 620;
}

/* =======================================================  empty  ====== */

.fx-empty {
	background: var(--surface); border: 1px dashed var(--line-2);
	border-radius: var(--r); padding: 34px; text-align: center;
}
.fx-empty h2 { font-size: 19px; }
.fx-empty p { color: var(--ink-2); max-width: 54ch; margin-left: auto; margin-right: auto; }

/* =======================================================  filters  ===== */

.fx-filters {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r); padding: 15px 17px; margin-bottom: 20px;
}
.fx-filters__row {
	display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
}
.fx-filters__row + .fx-filters__row {
	margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line);
	align-items: center;
}
.fx-filters label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-3); }
.fx-filters label > span { letter-spacing: .04em; text-transform: uppercase; font-weight: 640; }
.fx-filters select {
	padding: 8px 11px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
	background: var(--surface); font: inherit; font-size: 14px; color: var(--ink);
	min-width: 150px;
}
.fx-filters select:focus { outline: none; border-color: var(--accent); }

.fx-check {
	display: flex !important; flex-direction: row; align-items: center; gap: 7px;
	font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.fx-check span { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
.fx-check input { width: 15px; height: 15px; accent-color: var(--accent); }

.fx-filters button { cursor: pointer; font: inherit; }
.fx-filters__row--checks { justify-content: flex-start; }
.fx-filters__row--checks button, .fx-filters__row--checks .fx-act { margin-inline-start: auto; }
.fx-filters__row--checks .fx-act + .fx-act { margin-inline-start: 0; }

.fx-card__badges { margin: 0 0 10px; }

.fx-results__count {
	font-size: 14px; color: var(--ink-3); margin: 0 0 14px;
}

/* ====================================================  country rows  === */

.fx-country-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.fx-country-row:last-child { border-bottom: 0; }
.fx-country-row h3 {
	display: flex; align-items: baseline; gap: 12px; font-size: 17px; margin: 0 0 7px;
}
.fx-country-row h3 a { color: var(--ink); text-decoration: none; }
.fx-country-row h3 a:hover { color: var(--accent-ink); }
.fx-country-row h3 span {
	font-size: 12.5px; font-weight: 680; color: var(--accent-ink);
	background: var(--accent-wash); border-radius: 999px; padding: 1px 9px;
}
.fx-country-row__cities {
	display: flex; flex-wrap: wrap; gap: 5px 15px;
	margin: 0; padding: 0; list-style: none; font-size: 14px;
}
.fx-country-row__cities a { color: var(--ink-2); text-decoration: none; }
.fx-country-row__cities a:hover { color: var(--accent-ink); text-decoration: underline; }

.fx-countrylist {
	columns: 4; column-gap: 26px; margin: 0; padding: 0; list-style: none;
}
@media (max-width: 900px) { .fx-countrylist { columns: 3; } }
@media (max-width: 640px) { .fx-countrylist { columns: 2; } }
.fx-countrylist li { break-inside: avoid; }
.fx-countrylist a {
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
	padding: 5px 0; font-size: 14.5px; text-decoration: none; color: var(--ink-2);
	border-bottom: 1px solid var(--line);
}
.fx-countrylist a:hover { color: var(--accent-ink); }
.fx-countrylist li.is-empty a { color: var(--ink-3); }
.fx-countrylist em {
	font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--accent-ink);
}
.fx-countrylist em.is-zero { color: var(--line-2); font-weight: 400; }

/* ==================================================  long city lists  == */

.fx-morecities__title {
	font-size: 13px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase;
	color: var(--ink-3); margin: 26px 0 10px;
}
.fx-morecities {
	columns: 5; column-gap: 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px;
}
@media (max-width: 1000px) { .fx-morecities { columns: 3; } }
@media (max-width: 640px)  { .fx-morecities { columns: 2; } }
.fx-morecities li { break-inside: avoid; }
.fx-morecities a {
	display: flex; justify-content: space-between; gap: 8px;
	padding: 3px 0; color: var(--ink-2); text-decoration: none;
}
.fx-morecities a:hover { color: var(--accent-ink); }
.fx-morecities span { color: var(--ink-3); font-size: 12px; }

/* ========================================================  tables  ===== */

.fx-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.fx-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fx-table th, .fx-table td { padding: 11px 15px; text-align: start; border-bottom: 1px solid var(--line); }
.fx-table thead th {
	font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--ink-3); font-weight: 700; background: var(--canvas); white-space: nowrap;
}
.fx-table tbody tr:last-child td { border-bottom: 0; }
.fx-table a { color: var(--accent-ink); text-decoration: none; font-weight: 540; }
.fx-table a:hover { text-decoration: underline; }
.fx-table__num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-table__when { display: block; font-size: 12px; color: var(--ink-3); }

/* =======================================================  article  ===== */

.fx-article { max-width: 74ch; }
.fx-article__meta { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }

.fx-prose { padding-top: 30px; font-size: 16.5px; line-height: 1.72; color: var(--ink-2); }
.fx-prose h2 {
	font-size: 22px; margin: 38px 0 12px; color: var(--ink);
	padding-top: 20px; border-top: 1px solid var(--line);
}
.fx-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.fx-prose h3 { font-size: 17px; margin: 26px 0 8px; color: var(--ink); }
.fx-prose p { margin: 0 0 16px; }
.fx-prose ul { margin: 0 0 18px; padding-inline-start: 20px; }
.fx-prose li { margin-bottom: 7px; }
.fx-prose strong { color: var(--ink); font-weight: 640; }
.fx-prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.fx-prose .fx-note {
	margin-top: 32px; padding: 16px 18px; background: var(--canvas);
	border: 1px solid var(--line); border-radius: var(--r); font-size: 13.5px;
}

/* ==================================================  hero banner  ====== */

/* A flat ground rather than a photograph. A picture behind this much type
   needed so heavy a scrim that the image stopped reading anyway, and a plain
   field suits a reference directory better than stock imagery.

   Sky blue, but a deep one: white text on a pale sky (#87ceeb) is 1.74:1 and
   illegible. This tone holds white at about 7.6:1. */
.fx-banner {
	position: relative;
	background: #12588a;
	border-bottom: 1px solid rgba(255,255,255,.14);
}

.fx-banner__inner { position: relative; padding: 88px 22px 72px; }

.fx-banner__eyebrow {
	margin: 0 0 18px; font-size: 12px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: #bfe0f7;
}

/* Scoped to .fx-banner so it outranks the base `.fx h1` colour rule, which is
   more specific than a lone class and was rendering this heading dark on a
   dark photograph. */
.fx-banner .fx-banner__title {
	margin: 0 0 18px; max-width: 19ch;
	font-size: clamp(34px, 5.4vw, 62px); font-weight: 690;
	letter-spacing: -.035em; line-height: 1.06;
	color: #ffffff;
}

.fx-banner__sub {
	margin: 0 0 30px; max-width: 62ch; font-size: 17.5px;
	line-height: 1.6; color: rgba(255,255,255,.88);
}

.fx-banner .fx-search--hero {
	border-color: rgba(255,255,255,.16);
	box-shadow: 0 18px 50px -20px rgba(0,0,0,.75);
}

/* ------------------------------------------------  quick search  ------ */

.fx-quick {
	display: flex; flex-wrap: wrap; gap: 9px;
	margin: 20px 0 0; padding: 0; list-style: none;
}

.fx-quick__btn {
	display: inline-block; padding: 9px 18px; border-radius: 999px;
	font-size: 14px; font-weight: 640; letter-spacing: .005em;
	text-decoration: none; color: #fff !important;
	border: 1px solid rgba(255,255,255,.30);
	transition: transform .12s ease, filter .12s ease;
}
.fx-quick__btn:hover { transform: translateY(-1px); filter: brightness(1.09); }
.fx-quick__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Distinct hues, all dark enough to carry white text at 4.5:1 or better. */
/* Hues chosen to stay distinct from a blue ground; each carries white at
   4.8:1 or better. */
.fx-quick__btn--city    { background: #12406b; }
.fx-quick__btn--country { background: #a4611c; }
.fx-quick__btn--proc    { background: #4b3f9e; }
.fx-quick__btn--proc2   { background: #7a3d90; }
.fx-quick__btn--proc3   { background: #a83a4e; }

/* ------------------------------------------------  hero stats  -------- */

.fx-banner__stats {
	display: flex; flex-wrap: wrap; gap: 0;
	margin: 40px 0 0; padding: 0; list-style: none;
	border-top: 1px solid rgba(255,255,255,.24);
}
.fx-banner__stats li {
	flex: 1 1 130px; padding: 20px 22px 0 0;
}
.fx-banner__stats strong {
	display: block; font-size: 30px; font-weight: 690;
	letter-spacing: -.03em; color: #fff; line-height: 1.1;
}
.fx-banner__stats span {
	display: block; margin-top: 3px; font-size: 12.5px;
	letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.72);
}

@media (max-width: 700px) {
	.fx-banner__inner { padding: 56px 22px 48px; }
	.fx-banner__stats li { flex: 1 1 42%; padding-inline-end: 14px; }
	.fx-banner__stats strong { font-size: 25px; }
	.fx-search--hero { flex-wrap: wrap; }
	.fx-search--hero input { flex: 1 1 100%; }
	.fx-search--hero button { flex: 1 1 100%; }
}

/* ---------------------------------------------  country flag grid  ---- */

.fx-flags {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px;
}
.fx-flag {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 16px; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--r);
	text-decoration: none; transition: border-color .15s, transform .15s;
}
.fx-flag:hover { border-color: var(--line-2); transform: translateY(-1px); }
.fx-flag__mark {
	font-size: 25px; line-height: 1; flex-shrink: 0;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.fx-flag__body { min-width: 0; }
.fx-flag__name {
	display: block; font-weight: 630; font-size: 15px; color: var(--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-flag__count { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }

.fx-card__note { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }

/* ---------------------------------------------------  closing cta  ---- */

.fx-cta { border-bottom: 0; }
.fx-cta h2 { font-size: 25px; }
.fx-cta p { color: var(--ink-2); max-width: 62ch; }
.fx-cta__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

/* ------------------------------------------------  footer brand  ------ */

.fx-footer__tag {
	margin: -6px 0 12px; font-size: 10.5px; font-weight: 600;
	letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
}

/* ====================================================  card media  ===== */

.fx-card__media {
	display: block; position: relative; aspect-ratio: 16 / 10;
	background: var(--canvas); border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.fx-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .35s ease;
}
.fx-card:hover .fx-card__media img { transform: scale(1.03); }

/* Where a clinic publishes no usable image. Initials on a colour derived from
   the slug: stable per clinic, distinct in a grid, and plainly not a photo. */
.fx-card__media--mono {
	display: flex; align-items: center; justify-content: center;
	background: hsl(var(--mono-h, 205) 32% 92%);
}
.fx-card__media--mono span {
	font-size: 34px; font-weight: 680; letter-spacing: -.03em;
	color: hsl(var(--mono-h, 205) 38% 34%);
}

/* ---------------------------------------------------------  flags  ---- */

.fx-flag__img {
	display: block; width: 26px; height: auto; border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(16, 28, 36, .10);
}
.fx-flag__code {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 19px; border-radius: 3px;
	background: var(--accent-wash); color: var(--accent-ink);
	font-size: 10px; font-weight: 700; letter-spacing: .04em;
}

/* ===============================================  destination cards  === */

.fx-places {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}

.fx-place {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 16 / 11; border-radius: var(--r);
	background: var(--ink); text-decoration: none;
	border: 1px solid var(--line);
}

.fx-place__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.fx-place:hover .fx-place__img { transform: scale(1.05); }

/* The label sits on a gradient rather than a flat bar, so a bright sky and a
   dark skyline both keep the text readable. */
.fx-place__body {
	position: absolute; inset: auto 0 0 0; z-index: 1;
	padding: 16px 16px 14px;
	background: linear-gradient(180deg, rgba(9,19,18,0) 0%, rgba(9,19,18,.62) 45%, rgba(9,19,18,.88) 100%);
}
.fx-place__name {
	display: block; color: #fff; font-size: 18px; font-weight: 650; letter-spacing: -.02em;
}
.fx-place__meta {
	display: block; margin-top: 2px; font-size: 13px; color: rgba(255,255,255,.80);
}

/* A city with no photograph yet: same shape, brand ground, no empty frame. */
.fx-place--plain { background: var(--accent-ink); }
.fx-place--plain .fx-place__body { background: none; }

/* -------------------------------------------  countries dropdown  ----- */

.fx-mega__section + .fx-mega__section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.fx-mega__label {
	margin: 0 0 10px; font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.fx-mega__list {
	columns: 5; column-gap: 26px; margin: 0; padding: 0; list-style: none;
}
.fx-mega__list--rest { columns: 6; }
@media (max-width: 1100px) { .fx-mega__list, .fx-mega__list--rest { columns: 4; } }
@media (max-width: 860px)  { .fx-mega__list, .fx-mega__list--rest { columns: 3; } }
@media (max-width: 620px)  { .fx-mega__list, .fx-mega__list--rest { columns: 2; } }
.fx-mega__list li { break-inside: avoid; }

/* Language switcher, in the footer brand column. Empty until a second
   language is live, so it adds nothing to the English site before then. */
.fx-langs {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin: 14px 0 0; padding: 0; list-style: none;
}
.fx-langs a {
	display: inline-block; padding: 5px 11px;
	border: 1px solid var(--line); border-radius: 999px;
	font-size: 13px; color: var(--ink-2); text-decoration: none;
	background: var(--bg, #fff);
}
.fx-langs a:hover { border-color: var(--accent); color: var(--accent); }
.fx-langs a[aria-current="true"] {
	border-color: var(--accent); background: var(--accent); color: #fff;
}


/* Consent banner. A strip along the bottom that leaves the page usable;
   Reject and Accept are the same size, because refusing has to be as easy
   as agreeing. */
.fx-consent {
	position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
	max-width: 760px; margin: 0 auto;
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
	background: var(--surface, #fff); color: var(--ink);
	box-shadow: 0 10px 30px rgba(15, 30, 45, .14);
}
.fx-consent__text { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.fx-consent__text a { color: var(--accent); white-space: nowrap; }
.fx-consent__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.fx-consent__btn {
	min-width: 112px; padding: 9px 16px; border-radius: 8px; cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 600;
	border: 1px solid var(--ink); background: var(--surface, #fff); color: var(--ink);
}
.fx-consent__btn--accept { border-color: var(--accent); background: var(--accent); color: #fff; }
.fx-consent__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) {
	.fx-consent__actions { width: 100%; }
	.fx-consent__btn { flex: 1; }
}

/* A button that reads as a link, for "Cookie settings" in the footer. */
.fx-linkbtn {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; color: inherit; text-decoration: underline;
}


/* Right-to-left (Arabic). The layout is flexbox and logical properties, so it
   mirrors by itself; what is left is text that must keep its own direction.
   A phone number has no strong letters, so inside an Arabic line its digit
   groups would run right to left ("40 40 100 555 90+"); plaintext lets each
   value take its direction from its own content: Latin and digits read left
   to right, Arabic right to left. */
[dir="rtl"] .fx-panel__v,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="https://wa.me/"] { unicode-bidi: plaintext; }