/* ============================================================
 * core.css — الأنماط المشتركة (يُحمَّل على كل الصفحات)
 * يتضمن: المتغيرات، التخطيط، الهيدر/الفوتر، الأزرار،
 *         الأدوات المساعدة، الاستعلامات التكيفية للصفحات الداخلية
 * ============================================================ */

/**
 * Vida Clinic | مجمع فيدا الطبي — الأنماط المخصصة (مولّد ومُدمج من style.css)
 * ============================================================
 * يُحمَّل بعد أنماط قالب Blocksy الأب. مصدر القيم: branding.json + vida_redesign/assets/css/style.css.
 * قاعدة CLAUDE.md: RTL · mobile-first · احترام prefers-reduced-motion · أهداف لمس ≥ 44px.
 *
 * ملاحظات التكييف:
 *   - استُبعدت أنماط الهيدر/الفوتر (Blocksy Builder يصيغها).
 *   - استُبعدت resets العامة (Blocksy يوفّرها) باستثناء ما يخص العلامة.
 *   - دُمجت الطبقات المكررة (base + refresh) خاصية-بخاصية (آخر تعريف يفوز).
 *   - الرموز في :root أدناه هي المصدر الوحيد للألوان.
 */

/* ============================================================
 * 0) Global Reset — مطلوب لأن Blocksy لا يضمن box-sizing للعناصر المخصصة
 * ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

/* ============================================================
 * 1) رموز الهوية الموحّدة (Unified Brand Tokens)
 *    - الأسماء الأصلية (--vida-gold ... إلخ) هي المرجع: تعتمد عليها كل مكونات
 *      style.css المنقولة لاحقًا، فلا يُعاد تسميتها.
 *    - الألقاب الدلالية (--vida-primary ...) مستعارة منها للوضوح، وقيمها من branding.json.
 *    - الرموز المنتهية بـ -deep كانت مستخدمة في .btn الأصلي وغير مُعرَّفة؛ عرّفناها هنا.
 * ============================================================ */
:root {
	/* الألوان الأساسية — مطابقة branding.json */
	--vida-gold:       #dd9933;  /* primary  · #DD9933 */
	--vida-gold-soft:  #ddae68;  /* accent/link · #DDAE68 */
	--vida-gold-mid:   #e4b977;  /* درجة متوسطة للأساسي */
	--vida-gold-deep:  #b87322;  /* درجة داكنة للأساسي (من refresh :root L2278) */
	--vida-gold-dark:  #a7641b;  /* درجة أغمق للأساسي */
	--vida-teal:       #0cb8b6;  /* secondary · #0CB8B6 */
	--vida-teal-dark:  #087e7d;
	--vida-teal-deep:  #087e7d;  /* = teal-dark (مستخدمة في نص الأزرار الثانوية) */

	/* الأحبار والخلفيات */
	--vida-ink:        #24323f;  /* عنوان داكن */
	--vida-ink-deep:   #162530;  /* درجة أعمق (من refresh :root L2280) */
	--vida-text:       #444444;  /* نص أساسي · #444444 */
	--vida-muted:      #6f7d86;  /* نص ثانوي */
	--vida-line:       #e6edf0;  /* حدود فاتحة */
	--vida-bg:         #ffffff;  /* خلفية · #FFFFFF */
	--vida-bg-soft:    #f5faf9;  /* خلفية باردة فاتحة */
	--vida-bg-warm:    #fff8ef;  /* خلفية دافئة فاتحة */
	--vida-surface:          #ffffff;               /* من refresh L2281 */
	--vida-surface-raised:   rgba(255, 255, 255, 0.94); /* من refresh L2282 */

	/* الظلال ونصف القطر */
	--vida-shadow:        0 18px 55px rgba(36, 50, 63, 0.12);
	--vida-shadow-soft:   0 14px 38px rgba(22, 37, 48, 0.09);    /* من refresh L2283 */
	--vida-shadow-strong: 0 22px 70px rgba(22, 37, 48, 0.18);    /* من refresh L2284 */
	--vida-radius:        8px;        /* بطاقات/حاويات — من التصميم المعتمد */
	--vida-radius-sm:     4px;
	--vida-radius-lg:     12px;
	--vida-radius-xl:     20px;
	--vida-radius-pill:   999px;
	--vida-radius-full:   50%;
	/* ملاحظة: branding.json يقول radius=4، لكن التصميم المعتمد يستخدم 8px.
	   نحافظ على التصميم (8px) لأن الهدف الصريح استبدال الموقع بهذا التصميم. */

	/* الحدود الموحدة */
	--vida-border:        1px solid var(--vida-line);
	--vida-border-light:  1px solid rgba(230, 237, 240, 0.92);
	--vida-border-teal:   1px solid rgba(12, 184, 182, 0.18);
	--vida-border-white:  1px solid rgba(255, 255, 255, 0.2);

	/* الخط والأبعاد */
	--vida-font: "El Messiri", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	--container: 1180px;
	--header-height: 76px;

	/* المسافات الموحدة */
	--vida-space-xs:  4px;
	--vida-space-sm:  8px;
	--vida-space-md:  16px;
	--vida-space-lg:  24px;
	--vida-space-xl:  32px;
	--vida-space-2xl: 48px;
	--vida-space-3xl: 64px;
	--vida-space-4xl: 80px;
	--vida-space-5xl: 100px;
	--vida-space-6xl: 120px;

	/* الألقاب الدلالية المستعارة (للوضوح — تشير إلى نفس القيم) */
	--vida-primary:    var(--vida-gold);
	--vida-secondary:  var(--vida-teal);
	--vida-accent:     var(--vida-gold-soft);
	--vida-background: var(--vida-bg);
	--vida-link:       var(--vida-gold-soft);

	/* أحجام الطباعة المتجاوبة */
	--vida-fs-h1: clamp(2.5rem, 4vw + 1rem, 4.375rem);     /* ← 70px */
	--vida-fs-h2: clamp(1.75rem, 1.5vw + 1rem, 2.1875rem);  /* ← 35px */
	--vida-fs-h3: clamp(1.375rem, 0.8vw + 0.9rem, 1.625rem);

	/* انتقالات موحدة */
	--vida-transition:      180ms ease;
	--vida-transition-fast: 120ms ease;
	--vida-transition-slow: 220ms ease;
	--vida-motion: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);  /* من refresh L2285 — للحركات الأطول */
}

/* ────────────────────────────────────────────────────────────
 * عناصر أساسية (body / روابط / focus)
 * ──────────────────────────────────────────────────────────── */
a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible {
	outline: 3px solid rgba(12, 184, 182, 0.45);
	outline-offset: 3px;
}

body {
	margin: 0;
	overflow-x: hidden;
	background: linear-gradient(180deg, rgba(245, 250, 249, 0.55) 0, rgba(255, 255, 255, 0) 380px),
        var(--vida-bg);
	color: var(--vida-text);
	font-family: var(--vida-font);
	font-size: 16px;
	line-height: 1.7;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ────────────────────────────────────────────────────────────
 * العناوين — توحيد الخط والوزن لمطابقة المرجع (El Messiri 600/700).
 * هذه القاعدة تسبق أي تخصيص لاحق في الأنماط الخاصة بكل صفحة،
 * فتضمن أساساً موحّداً ثم تُعدَّل عند الحاجة فقط.
 * ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--vida-font);
	font-weight: 600;
	line-height: 1.4;
	color: var(--vida-ink-deep);
}

h1 {
	font-weight: 700;
}

/* ────────────────────────────────────────────────────────────
 * شريط الحجز الجوّال (.mobile-booking-bar)
 * يُخفى افتراضياً ويظهر فقط على الشاشات ≤ 700px.
 * ──────────────────────────────────────────────────────────── */
.mobile-booking-bar {
	display: none;
}

/* ────────────────────────────────────────────────────────────
 * Blocksy Overrides — تحييد padding/margin التي يضيفها Blocksy
 * على #main وعناصر المقال لمنع التعارض مع تخطيط فيدا المخصص.
 * ──────────────────────────────────────────────────────────── */
#main.vida-main {
	margin: 0;
	padding: 0;
}

#main.booking-main {
	padding: clamp(34px, 6vw, 72px) 0 48px;
}

.vida-main .entry-content,
.vida-main .page-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.vida-main > article {
	padding: 0;
	margin: 0;
}

button {
	font: inherit;
}

button:focus-visible {
	outline: 3px solid rgba(12, 184, 182, 0.45);
	outline-offset: 3px;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

select {
	font: inherit;
	width: 100%;
	min-height: 50px;
	padding: 8px 12px;
	border: var(--vida-border);
	border-radius: var(--vida-radius);
	background: var(--vida-bg);
	color: var(--vida-ink-deep);
	border-color: rgba(111, 125, 134, 0.26);
	transition: border-color var(--vida-motion), box-shadow var(--vida-motion);
}

select:focus-visible {
	outline: 3px solid rgba(12, 184, 182, 0.45);
	outline-offset: 3px;
}

select:hover {
	border-color: rgba(12, 184, 182, 0.45);
}


/* ────────────────────────────────────────────────────────────
 * عناصر التخطيط العامة (.container / .section / .center-action)
 * ──────────────────────────────────────────────────────────── */
.app-links {
	display: grid;
	gap: 12px;
}

.app-links a {
	margin-top: 0;
}

.app-links img {
	max-width: min(160px, 100%);
}

.card-icon {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--vida-radius-full);
	transition: transform var(--vida-transition-slow), color var(--vida-transition-slow), background var(--vida-transition-slow), border-color var(--vida-transition-slow);
	margin-bottom: 18px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.card-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card-icon--gold {
	background: rgba(221, 174, 104, 0.16);
	color: var(--vida-gold);
	border-color: rgba(221, 174, 104, 0.26);
}

.card-icon--light {
	background: rgba(255, 255, 255, 0.18);
	color: var(--vida-bg);
}

.center-action {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.container {
	width: min(100% - 32px, var(--container));
	margin-inline: auto;
}

.eyebrow {
	margin: 0 0 10px;
	color: var(--vida-gold-soft);
	font-weight: 700;
	letter-spacing: 0;
}

.icon-mark {
	width: 52px;
	height: 52px;
	display: inline-grid;
	place-items: center;
	border-radius: var(--vida-radius-full);
	border: 1px solid rgba(12, 184, 182, 0.16);
	background: linear-gradient(135deg, rgba(12, 184, 182, 0.14), rgba(221, 174, 104, 0.18));
	color: var(--vida-teal-deep);
	font-weight: 700;
	font-size: inherit;
	transition: transform var(--vida-transition-slow), color var(--vida-transition-slow), background var(--vida-transition-slow), border-color var(--vida-transition-slow);
	flex: 0 0 auto;
	margin-bottom: 16px;
}

.icon-mark svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.section {
	padding-block: clamp(68px, 8vw, 112px);
}

.section-icon {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--vida-radius-full);
}

.section-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.section__heading {
	max-width: 760px;
	margin: 0 auto 38px;
	text-align: center;
	margin-bottom: clamp(32px, 5vw, 48px);
}

.section__heading h2 {
	margin: 0;
	color: var(--vida-ink-deep);
	font-size: var(--vida-fs-h2);
	line-height: 1.18;
	text-wrap: balance;
}

.section__heading p:not(.eyebrow) {
	margin: 14px auto 0;
	color: var(--vida-muted);
}

.section__heading--light h2 {
	color: var(--vida-bg);
}

.section__heading--light p:not(.eyebrow) {
	color: var(--vida-bg);
	opacity: 0.78;
}

.svg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}


/* ════════════════════════════════════════════════════════════
 * Top bar — شريط التواصل السريع (يظهر في كل الصفحات)
 * ════════════════════════════════════════════════════════════ */

.top-bar {
	position: relative;
	z-index: 1001;
	width: 100%;
	background: var(--vida-bg);
}

.contact-ribbon__icon {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--vida-radius-full);
	border: var(--vida-border-teal);
	background: linear-gradient(135deg, rgba(12, 184, 182, 0.12), rgba(221, 174, 104, 0.12));
	color: var(--vida-teal-deep);
}

.contact-ribbon__icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.contact-ribbon__inner {
	min-height: 78px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	align-items: center;
	padding-block: 10px;
}

.contact-ribbon__item {
	min-width: 0;
	min-height: 58px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid rgba(230, 237, 240, 0.86);
	border-radius: var(--vida-radius);
	background: rgba(255, 255, 255, 0.72);
	color: var(--vida-ink-deep);
	box-shadow: 0 10px 28px rgba(22, 37, 48, 0.06);
	transition: transform var(--vida-transition-slow), box-shadow var(--vida-transition-slow), border-color var(--vida-transition-slow), background var(--vida-transition-slow);
}

.contact-ribbon__item small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 2px;
	color: var(--vida-muted);
	font-size: 0.78rem;
	line-height: 1.45;
}

.contact-ribbon__item strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--vida-ink-deep);
	font-size: 0.96rem;
	font-weight: 700;
	line-height: 1.35;
}

.contact-ribbon__phone {
	direction: ltr;
	unicode-bidi: plaintext;
}

.contact-ribbon__item:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(221, 174, 104, 0.44);
	background: var(--vida-bg);
	color: var(--vida-ink-deep);
	box-shadow: 0 16px 34px rgba(22, 37, 48, 0.1);
}

.contact-ribbon__item:hover {
	transform: translateY(-2px);
	border-color: rgba(221, 174, 104, 0.44);
	background: var(--vida-bg);
	color: var(--vida-ink-deep);
	box-shadow: 0 16px 34px rgba(22, 37, 48, 0.1);
}

.contact-ribbon__item:hover .contact-ribbon__icon {
	transform: translateY(-2px) scale(1.03);
}

.contact-ribbon__panel {
	display: contents;
}

.contact-ribbon__toggle {
	display: none;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 1px solid rgba(221, 174, 104, 0.34);
	border-radius: var(--vida-radius-full);
	background: linear-gradient(135deg, var(--vida-gold), var(--vida-gold-soft));
	color: var(--vida-bg);
	box-shadow: 0 14px 30px rgba(221, 174, 104, 0.28);
	cursor: pointer;
	transition: transform var(--vida-transition-slow), box-shadow var(--vida-transition-slow);
}

.contact-ribbon__toggle svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.contact-ribbon__toggle:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 18px 34px rgba(221, 174, 104, 0.34);
}

.contact-ribbon__toggle:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 34px rgba(221, 174, 104, 0.34);
}


/* ════════════════════════════════════════════════════════════
 * Header — الهيدر الثابت + القائمة الرئيسية
 * ════════════════════════════════════════════════════════════ */

.site-header {
	position: sticky;
	z-index: 1000;
	top: 0;
	border-bottom: 1px solid rgba(230, 237, 240, 0.9);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(16px);
	box-shadow: 0 10px 30px rgba(22, 37, 48, 0.04);
}

.header-shell {
	min-height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vida-radius-xl);
}

.brand {
	display: inline-flex;
	align-items: center;
}

.brand img {
	width: 108px;
	transition: transform var(--vida-motion), opacity var(--vida-motion);
}

.brand:hover img {
	transform: translateY(-1px);
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--vida-ink);
	font-weight: 600;
}

.primary-nav a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--vida-radius);
	transition: color var(--vida-transition), background var(--vida-transition), transform var(--vida-transition);
}

.primary-nav a:not(.btn) {
	position: relative;
	padding-inline: 3px;
}

.primary-nav a:not(.btn)::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 7px;
	width: 100%;
	height: 2px;
	background: var(--vida-gold);
	opacity: 0;
	transform: scaleX(0.55);
	transform-origin: right;
	transition: opacity var(--vida-motion), transform var(--vida-motion);
}

.primary-nav a:not(.btn):hover::after,
.primary-nav a:not(.btn):focus-visible::after {
	opacity: 1;
	transform: scaleX(1);
}

.primary-nav a:hover {
	color: var(--vida-gold);
}

.nav-store {
	color: var(--vida-teal);
}

.nav-whatsapp {
	color: var(--vida-teal);
}

.menu-toggle {
	width: 48px;
	height: 48px;
	display: none;
	place-items: center;
	border: var(--vida-border);
	border-radius: var(--vida-radius);
	background: var(--vida-bg);
	cursor: pointer;
}

.menu-toggle span:not(.screen-reader-text) {
	width: 22px;
	height: 2px;
	display: block;
	margin: 3px 0;
	background: var(--vida-ink);
	transition: transform var(--vida-transition), opacity var(--vida-transition);
}

/* Contact navigation dropdown */
.nav-dropdown {
	position: relative;
	display: flex;
	align-items: center;
}

.nav-dropdown__toggle {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 3px;
	border: 0;
	background: transparent;
	color: var(--vida-ink);
	font-weight: 600;
	cursor: pointer;
}

.nav-dropdown__toggle::after {
	width: 7px;
	height: 7px;
	border-inline-end: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--vida-transition);
}

.nav-dropdown.is-open .nav-dropdown__toggle,
.nav-dropdown__toggle:hover {
	color: var(--vida-gold);
}

.nav-dropdown.is-open .nav-dropdown__toggle::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.nav-dropdown__menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 10px);
	right: 0;
	width: 190px;
	display: none;
	padding: var(--vida-radius);
	border: var(--vida-border);
	border-radius: var(--vida-radius);
	background: var(--vida-bg);
	box-shadow: 0 18px 45px rgba(36, 50, 63, 0.14);
}

.nav-dropdown.is-open .nav-dropdown__menu {
	display: grid;
}

.primary-nav .nav-dropdown__menu a:not(.btn) {
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--vida-radius);
}

.primary-nav .nav-dropdown__menu a:not(.btn)::after {
	display: none;
}

.primary-nav .nav-dropdown__menu a:hover,
.primary-nav .nav-dropdown__menu a[aria-current="page"] {
	background: var(--vida-bg-soft);
	color: var(--vida-teal-dark);
}

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
	padding-top: 58px;
	background: #17232e;
	color: rgba(255, 255, 255, 0.78);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 34px;
}

.footer-logo {
	width: 112px;
	margin-bottom: 16px;
	filter: brightness(0) invert(1);
}

.site-footer h2 {
	margin: 0 0 14px;
	color: var(--vida-bg);
	font-size: 1.1rem;
}

.site-footer ul {
	display: grid;
	gap: var(--vida-radius);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer a {
	min-height: 34px;
	display: inline-flex;
	align-items: center;
}

.site-footer a:hover {
	color: var(--vida-gold-soft);
}

.footer-bottom {
	margin-top: 34px;
	padding-block: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
}

.footer-bottom p {
	margin: 0;
}

/* توافق مخرجات wp_nav_menu في الفوتر (.footer-links) */
.site-footer .footer-links {
	display: grid;
	gap: var(--vida-radius);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .footer-links li {
	margin: 0;
}

.site-footer .footer-links a {
	min-height: 34px;
	display: inline-flex;
	align-items: center;
}

/* ── Header & Footer Responsive ─────────────────────────── */

@media (max-width: 1080px) {
	.primary-nav {
		gap: 12px;
		font-size: 0.94rem;
	}
}

@media (max-width: 880px) {
	.menu-toggle {
		display: grid;
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.primary-nav {
		position: fixed;
		inset: calc(var(--header-height) + 42px) 0 auto 0;
		max-height: calc(100dvh - var(--header-height) - 42px);
		display: none;
		overflow-y: auto;
		flex-direction: column;
		align-items: stretch;
		gap: var(--vida-radius-sm);
		padding: 18px;
		border-top: var(--vida-border);
		background: var(--vida-bg);
		box-shadow: var(--vida-shadow);
	}

	.primary-nav.is-open {
		display: flex;
	}

	.primary-nav a {
		justify-content: center;
		padding: 10px 14px;
	}

	.nav-dropdown {
		width: 100%;
		display: block;
	}

	.nav-dropdown__toggle {
		width: 100%;
		justify-content: center;
		padding: 10px 14px;
	}

	.nav-dropdown__menu {
		position: static;
		width: 100%;
		margin-top: var(--vida-radius-sm);
		padding: var(--vida-radius-sm);
		border: 0;
		background: var(--vida-bg-soft);
		box-shadow: none;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.brand img {
		width: 92px;
	}
}


/* ────────────────────────────────────────────────────────────
 * نظام الأزرار (.btn)
 * ──────────────────────────────────────────────────────────── */
.btn {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vida-radius);
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--vida-radius-sm);
	font-weight: 700;
	line-height: 1.2;
	transition: transform var(--vida-transition), background var(--vida-transition), color var(--vida-transition), box-shadow var(--vida-transition), border-color var(--vida-transition);
	letter-spacing: 0;
	touch-action: manipulation;
	cursor: pointer;
	--theme-button-shadow: none;
	--theme-button-transform: none;
}

.btn svg {
	width: var(--vida-radius-xl);
	height: var(--vida-radius-xl);
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--vida-transition);
}

.btn--ghost {
	border-color: rgba(255, 255, 255, 0.72);
	background: rgba(255, 255, 255, 0.08);
	color: var(--vida-bg);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 24px rgba(22, 37, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--vida-bg);
	box-shadow: 0 14px 32px rgba(22, 37, 48, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: var(--vida-bg);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.btn--ghost:hover svg {
	transform: translateX(-2px);
}

.btn--light {
	background: var(--vida-bg);
	color: var(--vida-ink-deep);
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 10px 24px rgba(22, 37, 48, 0.12);
}

.btn--light:hover {
	background: var(--vida-bg-soft);
	color: var(--vida-teal-dark);
	border-color: rgba(12, 184, 182, 0.45);
	box-shadow: 0 14px 32px rgba(22, 37, 48, 0.16);
}

.btn--light:focus-visible {
	background: var(--vida-bg-soft);
	border-color: var(--vida-teal);
	color: var(--vida-teal-dark);
}

.btn--primary {
	background: linear-gradient(135deg, var(--vida-gold) 0%, #e8a84a 100%);
	color: var(--vida-bg);
	box-shadow: 0 14px 32px rgba(221, 153, 51, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn--primary:hover {
	background: linear-gradient(135deg, #c78325 0%, #d8953a 100%);
	color: var(--vida-bg);
	box-shadow: 0 18px 38px rgba(221, 153, 51, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn--primary:focus-visible {
	background: linear-gradient(135deg, #c78325 0%, #d8953a 100%);
	box-shadow: 0 0 0 3px rgba(221, 153, 51, 0.35);
}

.btn--primary:hover svg {
	transform: translateX(-2px);
}

.btn--secondary {
	border-color: rgba(12, 184, 182, 0.34);
	background: rgba(12, 184, 182, 0.12);
	color: var(--vida-teal-dark);
}

.btn--secondary:hover {
	background: rgba(12, 184, 182, 0.2);
	border-color: rgba(12, 184, 182, 0.5);
}

.btn--secondary:focus-visible {
	background: rgba(12, 184, 182, 0.24);
	border-color: var(--vida-teal);
}

.btn:active {
	transform: translateY(0) scale(0.98);
}

.btn:hover {
	transform: translateY(-2px);
}



/* ════════════════════════════════════════════════════════════
 * استعلامات الوسائط (Responsive) — المشتركة فقط
 * ════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
	.doctor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 880px) {
	.contact-ribbon__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		min-height: 0;
		padding-block: 8px;
	}

	.contact-ribbon__item {
		min-height: 54px;
	}

	.device-grid {
		grid-template-columns: 1fr;
		display: grid;
	}

	.trust-strip {
		margin-top: 0;
		padding-block: 18px var(--vida-radius);
		background: var(--vida-bg);
	}
}

@media (max-width: 640px) {
	.card-icon {
		width: 46px;
		height: 46px;
	}

	.card-icon svg {
		width: 23px;
		height: 23px;
	}

	.center-action .btn {
		width: 100%;
	}

	.contact-ribbon.is-panel-open .contact-ribbon__panel {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.contact-ribbon__icon {
		width: 42px;
		height: 42px;
	}

	.contact-ribbon__icon svg {
		width: 22px;
		height: 22px;
	}

	.contact-ribbon__inner {
		width: min(100% - 24px, var(--container));
		grid-template-columns: minmax(0, 1fr) 48px;
		gap: 10px;
		position: relative;
		min-height: 64px;
		align-items: center;
		padding-block: var(--vida-radius);
	}

	.contact-ribbon__item {
		min-height: 52px;
		gap: var(--vida-radius);
		padding: var(--vida-radius);
	}

	.contact-ribbon__item small {
		display: none;
	}

	.contact-ribbon__item strong {
		font-size: 0.86rem;
	}

	.contact-ribbon__item--primary {
		width: 100%;
		justify-self: stretch;
		min-height: 48px;
		padding: 8px 10px;
		border-color: rgba(12, 184, 182, 0.22);
		background: rgba(255, 255, 255, 0.88);
	}

	.contact-ribbon__item--primary .contact-ribbon__icon {
		width: 40px;
		height: 40px;
	}

	.contact-ribbon__item--primary small {
		display: none;
	}

	.contact-ribbon__item--primary strong {
		font-size: 1rem;
	}

	.contact-ribbon__panel {
		position: absolute;
		top: calc(100% + var(--vida-radius));
		right: 0;
		left: 0;
		z-index: 1200;
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--vida-radius);
		padding: 10px;
		border: var(--vida-border-light);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 22px 44px rgba(22, 37, 48, 0.16);
		transform: translateY(-6px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--vida-transition-slow), transform var(--vida-transition-slow), visibility var(--vida-transition-slow);
	}

	.contact-ribbon__panel .contact-ribbon__item {
		width: 100%;
		min-height: 58px;
		padding: 10px;
	}

	.contact-ribbon__panel .contact-ribbon__item small {
		display: block;
		white-space: normal;
	}

	.contact-ribbon__toggle {
		display: grid;
	}

	.container {
		width: min(100% - 28px, var(--container));
	}

	.device-card {
		grid-template-columns: 1fr;
	}

	.device-card img {
		max-width: 210px;
		margin-inline: auto;
	}

	.doctor-card h3 {
		align-items: flex-start;
		text-align: center;
	}

	.doctor-grid {
		grid-template-columns: 1fr;
	}

	.icon-mark {
		width: 46px;
		height: 46px;
	}

	.icon-mark svg {
		width: 23px;
		height: 23px;
	}

	.section {
		padding-block: 58px;
	}

	.section-icon {
		width: 46px;
		height: 46px;
	}

	.section-icon svg {
		width: 23px;
		height: 23px;
	}

	.section__heading {
		text-align: right;
	}

	.section__heading h2 {
		font-size: clamp(1.72rem, 9vw, 2.25rem);
	}

	.service-icon {
		width: 46px;
		height: 46px;
	}

	.service-icon svg {
		width: 23px;
		height: 23px;
	}

	.trust-strip__grid {
		grid-template-columns: 1fr;
	}

	body {
		overflow-x: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	#why-vida .feature-card {
		transform: none;
		transition: none;
	}

	#why-vida .feature-card:hover {
		transform: none;
		transition: none;
	}

	.about-excellence__figure {
		transform: none;
		transition: none;
	}

	.about-excellence__figure:hover {
		transform: none;
		transition: none;
	}

	.about-value-card {
		transform: none;
		transition: none;
	}

	.about-value-card:hover {
		transform: none;
		transition: none;
	}

	.booking-date {
		animation: none;
		scroll-behavior: auto;
		transition: none;
	}

	.booking-option {
		animation: none;
		scroll-behavior: auto;
		transition: none;
	}

	.booking-progress__track span {
		animation: none;
		scroll-behavior: auto;
		transition: none;
	}

	.booking-step {
		animation: none;
		scroll-behavior: auto;
		transition: none;
	}

	.booking-time {
		animation: none;
		scroll-behavior: auto;
		transition: none;
	}

	.card-icon {
		transition: none !important;
	}

	.contact-card__icon {
		transition: none !important;
	}

	.contact-ribbon__icon {
		transition: none !important;
	}

	.contact-ribbon__item {
		transition: none !important;
	}

	.contact-ribbon__panel {
		transition: none !important;
	}

	.contact-ribbon__toggle {
		transition: none !important;
	}

	.device-card__icon {
		transition: none !important;
	}

	.devices-page__card {
		transition: none;
	}

	.devices-page__card button svg {
		transition: none;
	}

	.devices-page__card button:hover svg {
		transform: none;
	}

	.devices-page__card:hover {
		transform: none;
	}

	.devices-page__filters button {
		transition: none;
	}

	.doctor-card__cta {
		transform: none;
		transition: none;
	}

	.doctor-card__cta:hover {
		transform: none;
		transition: none;
	}

	.doctor-card__icon {
		transition: none !important;
	}

	.home-faq__more {
		transform: none;
		transition: none;
	}

	.home-faq__more:hover {
		transform: none;
		transition: none;
	}

	.icon-mark {
		transition: none !important;
	}

	.offer-band__icon {
		transition: none !important;
	}

	.offer-card {
		transform: none;
		transition: none;
	}

	.offer-card:hover {
		transform: none;
		transition: none;
	}

	.offer-card__cta {
		transform: none;
		transition: none;
	}

	.offer-card__cta:hover {
		transform: none;
		transition: none;
	}

	.offers-showcase__all {
		transform: none;
		transition: none;
	}

	.offers-showcase__all:hover {
		transform: none;
		transition: none;
	}

	.reveal-ready .reveal-item {
		opacity: 1 !important;
		transform: none !important;
	}

	.reveal-ready .reveal-item.is-visible {
		opacity: 1 !important;
		transform: none !important;
	}

	.section-icon {
		transition: none !important;
	}

	.service-card {
		transition: none !important;
	}

	.service-card img {
		transition: none !important;
	}

	.service-icon {
		transition: none !important;
	}

	.services-page__booking-link svg {
		transform: none;
		transition: none;
	}

	.services-page__card {
		transform: none;
		transition: none;
	}

	.services-page__card:hover {
		transform: none;
		transition: none;
	}

	.services-page__jump a {
		transform: none;
		transition: none;
	}

	.services-refined__card {
		transition: none !important;
	}

	.services-refined__card img {
		transition: none !important;
	}

	.services__cards article:nth-child(1) {
		opacity: 1 !important;
		transform: none !important;
	}

	.services__cards article:nth-child(4) {
		opacity: 1 !important;
		transform: none !important;
	}

	.team-doctor-card {
		transition: none;
	}

	.team-doctor-card:hover {
		transform: none;
	}

	.team-filter {
		transition: none;
	}

	.testimonial-card__icon {
		transition: none !important;
	}

	.testimonials-slider .testimonial-card {
		transform: none;
		transition: none;
	}

	.testimonials-slider__button {
		transform: none;
		transition: none;
	}

	.testimonials-slider__dots span {
		transform: none;
		transition: none;
	}
}

@media (max-width: 1180px) {
	.contact-ribbon__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.faq-list details p {
		padding-inline: 16px;
	}

	.faq-list summary {
		padding-inline: 16px;
	}

	.trust-strip {
			display: none;
		}

		.mobile-booking-bar {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 10050;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
			border-top: var(--vida-border-light);
			background: rgba(255, 255, 255, 0.96);
			box-shadow: 0 -12px 34px rgba(22, 37, 48, 0.12);
			backdrop-filter: blur(14px);
		}

		.mobile-booking-bar .btn {
			width: 100%;
			min-height: 48px;
			padding-inline: 12px;
		}

		body {
			padding-bottom: 84px;
		}
	}


/* ════════════════════════════════════════════════════════════
 * الإطارات المفتاحية (Keyframes)
 * ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.contact-ribbon__inner {
		grid-template-columns: minmax(0, 1fr) 48px;
	}

	.contact-ribbon__item--primary {
		width: 100%;
	}
}

@keyframes booking-step-enter {
	from { opacity: 0; transform: translateY(8px); }
	    to { opacity: 1; transform: translateY(0); }
}


/* ── احترام تقليل الحركة (catch-all) ── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}