/* Mediproz Clinical Precision — design tokens + utilities (v2 redesign, 2026-09)
   Builder surfaces (Blocksy palette, Elementor globals) hold the primary values;
   these variables mirror them for utilities and custom components. */

:root {
	--mp-navy-900: #0B1F33;
	--mp-navy-700: #17385A;
	--mp-accent: #1873A8;
	--mp-brand-blue: #329FD8;
	--mp-tint: #E6F3FB;
	--mp-surface: #F6F8FA;
	--mp-ink: #14212E;
	--mp-ink-muted: #52677E;
	--mp-border: #D5DEE7;
	--mp-white: #FFFFFF;
	--mp-radius-control: 10px;
	--mp-radius-card: 12px;
	--mp-shadow-hover: 0 12px 32px rgba(11, 31, 51, 0.08);
	--mp-font-latin: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif;
	--mp-font-arabic: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Tajawal', sans-serif;
	--mp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Arabic typography ---------- */
html[lang^="ar"] body,
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6,
html[lang^="ar"] .elementor-heading-title,
html[lang^="ar"] .elementor-widget-text-editor,
html[lang^="ar"] button, html[lang^="ar"] input, html[lang^="ar"] select, html[lang^="ar"] textarea,
html[lang^="ar"] .elementor-button, html[lang^="ar"] .ct-button, html[lang^="ar"] .ct-menu-link,
.mp-rtl-demo, .mp-rtl-demo * {
	font-family: var(--mp-font-arabic) !important;
	letter-spacing: 0 !important;
}
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] .elementor-heading-title,
.mp-rtl-demo h1, .mp-rtl-demo h2, .mp-rtl-demo h3, .mp-rtl-demo .elementor-heading-title { line-height: 1.3; }
html[lang^="ar"] body, .mp-rtl-demo p { line-height: 1.8; }
html[lang^="ar"] h6, .mp-rtl-demo h6, html[lang^="ar"] .mp-eyebrow, .mp-rtl-demo .mp-eyebrow { text-transform: none; }

/* Numbers, phones, emails and brand names keep LTR order inside Arabic text */
.mp-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- Direction-aware icons ---------- */
[dir="rtl"] .mp-dir-icon,
[dir="rtl"] .mp-btn-arrow .elementor-button-icon svg,
[dir="rtl"] .mp-btn-arrow .elementor-button-icon i,
[dir="rtl"] .mp-link-arrow svg { transform: scaleX(-1); }

/* ---------- Eyebrow label (use on at most one in three sections) ---------- */
.mp-eyebrow .elementor-heading-title,
.mp-eyebrow {
	font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--mp-accent);
}
.mp-on-dark .mp-eyebrow .elementor-heading-title, .mp-on-dark.mp-eyebrow { color: var(--mp-brand-blue); }

/* ---------- Buttons (Elementor button widget variants) ---------- */
.mp-btn .elementor-button {
	border-radius: var(--mp-radius-control);
	padding: 14px 28px; min-height: 48px;
	font-weight: 600; font-size: 16px; line-height: 1.25;
	transition: background-color .2s var(--mp-ease), color .2s var(--mp-ease), border-color .2s var(--mp-ease), transform .15s var(--mp-ease);
	display: inline-flex; align-items: center; gap: 10px;
}
.mp-btn .elementor-button:active { transform: translateY(1px); }
.mp-btn-primary .elementor-button { background: var(--mp-accent); color: var(--mp-white); border: 1px solid var(--mp-accent); }
.mp-btn-primary .elementor-button:hover, .mp-btn-primary .elementor-button:focus-visible { background: var(--mp-navy-700); border-color: var(--mp-navy-700); color: var(--mp-white); }
.mp-btn-secondary .elementor-button { background: transparent; color: var(--mp-navy-900); border: 1px solid var(--mp-navy-900); }
.mp-btn-secondary .elementor-button:hover, .mp-btn-secondary .elementor-button:focus-visible { background: var(--mp-navy-900); color: var(--mp-white); }
.mp-btn-ghost .elementor-button { background: transparent; color: var(--mp-white); border: 1px solid rgba(255,255,255,.6); }
.mp-btn-ghost .elementor-button:hover, .mp-btn-ghost .elementor-button:focus-visible { background: var(--mp-white); color: var(--mp-navy-900); border-color: var(--mp-white); }

/* ---------- Cards ---------- */
.mp-card {
	background: var(--mp-white);
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-radius-card);
	overflow: hidden;
	transition: box-shadow .25s var(--mp-ease), transform .25s var(--mp-ease), border-color .25s var(--mp-ease);
}
.mp-card--on-white { background: var(--mp-surface); }
.mp-card--link:hover, .mp-card--link:focus-within { box-shadow: var(--mp-shadow-hover); transform: translateY(-2px); }
.mp-card img { border-radius: 0; }
.mp-radius img, img.mp-radius { border-radius: var(--mp-radius-card); }

/* ---------- Partner logo tile ---------- */
.mp-logo-tile img {
	height: 48px !important; width: auto !important; max-width: 100%; object-fit: contain;
	filter: grayscale(1); opacity: .72;
	transition: filter .25s var(--mp-ease), opacity .25s var(--mp-ease);
}
.mp-logo-tile a:hover img, .mp-logo-tile a:focus-visible img, .mp-logo-tile:hover img { filter: none; opacity: 1; }
.mp-on-dark .mp-logo-tile img { filter: grayscale(1) brightness(0) invert(1); opacity: .8; }
.mp-on-dark .mp-logo-tile:hover img { opacity: 1; }

/* ---------- Stat block ---------- */
.mp-stat .elementor-counter-number-wrapper, .mp-stat-number .elementor-heading-title {
	font-size: 48px; font-weight: 600; line-height: 1; color: var(--mp-navy-900); font-variant-numeric: tabular-nums;
}
.mp-on-dark .mp-stat .elementor-counter-number-wrapper, .mp-on-dark .mp-stat-number .elementor-heading-title { color: var(--mp-white); }

/* ---------- Hairline divider list ---------- */
.mp-hairline-list > .e-con-inner > .e-con, .mp-hairline-list > .e-con { border-block-end: 1px solid var(--mp-border); }

/* ---------- Text link with arrow ---------- */
.mp-link .elementor-button { background: none; padding: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--mp-accent); font-weight: 600; }
.mp-link .elementor-button:hover { color: var(--mp-navy-900); background: none; }

/* ---------- Dark bands ---------- */
.mp-on-dark, .mp-on-dark p, .mp-on-dark li { color: #C9D6E3; }
.mp-on-dark h1, .mp-on-dark h2, .mp-on-dark h3, .mp-on-dark h4, .mp-on-dark .elementor-heading-title { color: var(--mp-white); }

/* ---------- Marquee (partner logos) ---------- */
.mp-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mp-marquee__track { display: flex; gap: 64px; width: max-content; animation: mp-marquee 40s linear infinite; }
.mp-marquee:hover .mp-marquee__track { animation-play-state: paused; }
.mp-marquee__track, .mp-marquee__dup { align-items: center; }
.mp-marquee__dup { display: flex; gap: 64px; }
.mp-marquee .mp-logo-tile { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mp-marquee .mp-logo-tile img { height: 40px !important; max-width: 180px; }

/* ---------- Hero ---------- */
.mp-hero .mp-crumb a { color: #C9D6E3; text-decoration: none; }
.mp-hero .mp-crumb a:hover { color: #FFFFFF; }
/* RTL hero: mirror the whole container (photo + gradient) so the dark side sits behind the text, then un-mirror the content */
[dir="rtl"] .mp-hero { transform: scaleX(-1); }
[dir="rtl"] .mp-hero > .e-con-inner { transform: scaleX(-1); }
@media (max-width: 767px) {
	.mp-hero::before, .mp-hero > .elementor-background-overlay {
		background-image: linear-gradient(180deg, rgba(11,31,51,0.55) 0%, rgba(11,31,51,0.9) 55%, rgba(11,31,51,0.96) 100%) !important;
		opacity: 1 !important; transform: none !important;
	}
}
.mp-card .elementor-widget-image img { border-radius: 0; }
.mp-card .elementor-widget-image a, .mp-mfr .elementor-widget-image a { display: block; }
.mp-mfr .mp-mfr-img img { border-radius: var(--mp-radius-card); }
[dir="rtl"] .mp-marquee__track { animation-name: mp-marquee-rtl; }
@keyframes mp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mp-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- Forms ---------- */
.mp-form .elementor-field-group { margin-block-end: 18px; }
.mp-form .elementor-field-label { font-size: 14px; font-weight: 600; color: var(--mp-ink); margin-block-end: 6px; }
.mp-form .elementor-field-textual, .mp-form select.elementor-field {
	border: 1px solid var(--mp-border) !important; border-radius: var(--mp-radius-control) !important;
	background: var(--mp-white) !important; min-height: 48px; font-size: 16px; color: var(--mp-ink); padding: 10px 14px;
}
.mp-form textarea.elementor-field-textual { min-height: 140px; }
.mp-form .elementor-field-textual:focus, .mp-form select.elementor-field:focus { border-color: var(--mp-accent) !important; box-shadow: 0 0 0 3px rgba(26,123,179,0.15); outline: none; }
.mp-form .elementor-button { background: var(--mp-accent) !important; border-radius: var(--mp-radius-control) !important; min-height: 52px; font-weight: 600; font-size: 16px; }
.mp-form .elementor-button:hover { background: var(--mp-navy-700) !important; }
.mp-form .elementor-field-type-acceptance label { font-size: 14px; color: var(--mp-ink-muted); }
.mp-form .elementor-message-success { color: #1B7F4B; }

/* ---------- FAQ ---------- */
.mp-faq .elementor-accordion-item { border: 0 !important; border-block-end: 1px solid var(--mp-border) !important; }
.mp-faq .elementor-tab-title { padding: 22px 0 !important; font-weight: 600; font-size: 18px; }
.mp-faq .elementor-tab-title a { color: var(--mp-navy-900); }
.mp-faq .elementor-tab-content { padding: 0 0 22px !important; border: 0 !important; color: var(--mp-ink-muted); }

/* ---------- Jobs ---------- */
.mp-jobs { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--mp-border); }
.mp-job a { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-block-end: 1px solid var(--mp-border); text-decoration: none; color: var(--mp-navy-900); }
.mp-job__title { font-weight: 600; }
.mp-job__meta { color: var(--mp-ink-muted); }
.mp-jobs-empty { padding: 28px 32px; background: var(--mp-white); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-card); max-width: 720px; }
.mp-map iframe { border-radius: var(--mp-radius-card); }

/* ---------- Footer ---------- */
.ct-footer .mp-footer-title { color: var(--mp-white); font-weight: 600; font-size: 15px; margin-block-end: 16px; }
.ct-footer .mp-footer-links { list-style: none; padding-inline-start: 0; margin: 0; }
.ct-footer .mp-footer-links li { margin-block-end: 10px; }
.ct-footer .mp-footer-links a { text-decoration: none; }
.ct-footer .mp-footer-statement { max-width: 34ch; margin-block: 20px; }
.ct-footer .mp-footer-logo { margin: 0; }
.ct-footer [data-row="bottom"] { border-block-start: 1px solid rgba(255, 255, 255, 0.12); }
.ct-footer [data-row="bottom"] .ct-footer-copyright { font-size: 14px; }

/* ---------- Focus + motion ---------- */
:where(a, button, input, select, textarea, .elementor-button):focus-visible {
	outline: 2px solid var(--mp-brand-blue); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.mp-marquee__track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* Language switcher (header) */
.mp-lang{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap}
.mp-lang__item{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:44px;padding-inline:4px;color:inherit;text-decoration:none}
a.mp-lang__item{opacity:.8;transition:opacity .2s}
a.mp-lang__item:hover,a.mp-lang__item:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}
.mp-lang__item.is-current{font-weight:700}
.mp-lang__item[lang=ar]{font-size:17px}
html[lang^="ar"] .mp-lang__item[lang=ar]{font-family:var(--mp-font-arabic,'IBM Plex Sans Arabic'),sans-serif}
.mp-lang__sep{opacity:.45}
[data-transparent-row="yes"] .mp-lang{color:#fff}
[data-sticky*="yes"] [data-row] .mp-lang{color:var(--mp-ink,#14212E)}
.ct-header-text .mp-lang{margin:0}

/* Card rows wrap at tablet (cards use 48% there) */
.e-con:has(> .mp-card){--flex-wrap:wrap;flex-wrap:wrap}
/* Icon + text rows: text column takes remaining space (fixes mobile overflow) */
.e-con > .elementor-widget-icon + .e-con{--width:auto;flex:1 1 0;min-width:0}
/* RTL: phone/email fields type left-to-right */
[dir="rtl"] .mp-form input[type=tel],[dir="rtl"] .mp-form input[type=email]{direction:ltr;text-align:right}