/* ==========================================================================
   مدهام — التنسيقات العامة
   المرجع: DESIGN-SPEC.md (Figma 77:29 — 1920×8483)
   كل الأرقام بالبكسل منقولة من Figma Dev Mode.
   ========================================================================== */

:root {
	--mdh-cream: #f2e4d9;
	--mdh-olive: #323625;
	--mdh-olive-hover: #22261a;
	--mdh-ink: #303030;
	--mdh-sale: #ff0707;
	--mdh-price-old: rgba(48, 48, 48, 0.6);
	--mdh-gray-300: #a5a5a5;
	--mdh-gold: #ab8710;
	--mdh-off-white: #faf7f3;
	--mdh-white: #fff;
	--mdh-black: #000;

	--mdh-font-plex: "IBM Plex Sans Arabic", system-ui, sans-serif;
	--mdh-font-cairo: "Cairo", system-ui, sans-serif;

	/* الشبكة: حاوية 1736 + هامش 92 على عرض 1920 */
	--mdh-container: 1736px;
	--mdh-gutter: clamp(16px, 4.8vw, 92px);
}

/* ── أساسيات ─────────────────────────────────────────────────────────── */

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

html {
	/* clip (مش hidden) عشان position: sticky بتاع الهيدر يفضل شغال */
	overflow-x: clip;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── شاشة التحميل ─────────────────────────────────────────────────────── */

.mdh-loader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	background: var(--mdh-cream);
	transition: opacity 0.45s ease, visibility 0.45s ease;
	/* احتياطي لو الجافاسكربت متحملش: تختفي لوحدها بعد ٦ ثواني */
	animation: mdh-loader-out 0.45s ease 6s forwards;
}

.mdh-loader.is-done {
	opacity: 0;
	visibility: hidden;
}

.mdh-loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.mdh-loader__logo {
	width: clamp(160px, 22vw, 240px);
	height: auto;
	animation: mdh-loader-pulse 1.6s ease-in-out infinite;
}

.mdh-loader__bar {
	position: relative;
	width: 120px;
	height: 3px;
	overflow: hidden;
	background: rgba(50, 54, 37, 0.15);
	border-radius: 3px;
}

.mdh-loader__bar::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 40%;
	background: var(--mdh-olive);
	border-radius: inherit;
	animation: mdh-loader-slide 1.1s ease-in-out infinite;
}

@keyframes mdh-loader-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(0.96); }
}

@keyframes mdh-loader-slide {
	from { transform: translateX(-100%); }
	to { transform: translateX(250%); }
}

@keyframes mdh-loader-out {
	to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.mdh-loader__logo,
	.mdh-loader__bar::after {
		animation: none;
	}
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* قوالب البلوكات بتضيف مسافات تلقائية بين الأجزاء — التصميم مالوش مسافات بين الأقسام */
.wp-site-blocks > * + *,
.wp-site-blocks > main > * + * {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	margin-block: 0;
}

/* الأقسام بعرض كامل بتلغي هامش الصفحة */
.mdh-section {
	position: relative;
	width: 100%;
}

.mdh-container {
	width: 100%;
	max-width: calc(var(--mdh-container) + 2 * var(--mdh-gutter));
	margin-inline: auto;
	padding-inline: var(--mdh-gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ── أزرار مشتركة ────────────────────────────────────────────────────── */

/* زر مربع بحدود — Figma 77:619 / 77:624 (خطوات التصميم، الاكسسوارات، CTA) */
.mdh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
	font-family: var(--mdh-font-plex);
	font-size: 24px;
	font-weight: 400;
	line-height: 36px;
	white-space: nowrap;
	text-decoration: none;
	/* المصمت بدون حدود (ارتفاع 52)، المحدد بحد 1px (ارتفاع 54) — زي التصميم */
	border: 0 solid transparent;
	border-radius: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mdh-btn--outline,
.mdh-btn--outline-white,
.mdh-btn--ghost-light {
	border-width: 1px;
}

.mdh-btn:hover {
	text-decoration: none;
}

.mdh-btn--solid {
	background: var(--mdh-olive);
	border-color: var(--mdh-olive);
	color: var(--mdh-white);
}

.mdh-btn--solid:hover {
	background: var(--mdh-olive-hover);
	border-color: var(--mdh-olive-hover);
	color: var(--mdh-white);
}

.mdh-btn--outline {
	background: transparent;
	border-color: var(--mdh-olive);
	color: var(--mdh-olive);
}

.mdh-btn--outline:hover {
	background: var(--mdh-olive);
	color: var(--mdh-white);
}

.mdh-btn--light {
	background: var(--mdh-white);
	border-color: var(--mdh-white);
	color: var(--mdh-olive);
}

.mdh-btn--light:hover {
	background: transparent;
	color: var(--mdh-white);
}

.mdh-btn--ghost-light {
	background: transparent;
	border-color: var(--mdh-white);
	color: var(--mdh-white);
}

.mdh-btn--ghost-light:hover {
	background: var(--mdh-white);
	color: var(--mdh-olive);
}

/* أبيض بحد زيتوني — "اطلب تسعير الكميات" (Figma 103:101) */
.mdh-btn--outline-white {
	background: var(--mdh-white);
	border-color: var(--mdh-olive);
	color: var(--mdh-olive);
}

.mdh-btn--outline-white:hover {
	background: var(--mdh-olive);
	color: var(--mdh-white);
}

/* رابط نصي بخط سفلي — "للمزيد" / "مشاهدة جميع المشاريع" / "اكتشف قصة مدهام"
   IBM Plex Bold 20، الخط 1px على بعد 4px تحت صندوق النص (Figma 77:767) */
.mdh-link-underline {
	display: inline-block;
	padding-bottom: 4px;
	font-family: var(--mdh-font-plex);
	font-weight: 700;
	font-size: 20px;
	line-height: 30px;
	color: var(--mdh-black);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid currentColor;
}

.mdh-link-underline:hover {
	text-decoration: none;
	opacity: 0.7;
}

/* ==========================================================================
   الهيدر — Figma 77:30
   شريط عائم 1309×103، نصف قطر 90، خلفية rgba(242,228,217,.5) + blur 14.45
   ========================================================================== */

.wp-block-template-part:has(> .mdh-header),
header:has(> .mdh-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-block-template-part:has(> .mdh-header),
.admin-bar header:has(> .mdh-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.mdh-header {
	position: relative;
	height: 103px;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

/* المسافة بين اللوجو والقائمة مرنة: space-between بيوزّع المساحة الفاضية،
   فبـ 4 روابط بتطلع 158px بالظبط زي التصميم، ولو اتضاف رابط بتصغر لوحدها (حد أدنى 48) */
.mdh-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	width: min(1309px, 100% - 32px);
	height: 103px;
	margin-inline: auto;
	padding-inline: 40px;
	background: rgba(242, 228, 217, 0.5);
	-webkit-backdrop-filter: blur(14.45px);
	backdrop-filter: blur(14.45px);
	border-radius: 90px;
}

/* اللوجو 298×120 — أطول من الشريط (103) زي التصميم بالظبط */
.mdh-header__logo {
	flex: 0 0 auto;
	display: block;
	width: 298px;
	height: 120px;
}

/* contain: اللوجو ممكن يتغير من (إعدادات مدهام) بأي نسبة أبعاد */
.mdh-header__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* المجموعة: القائمة ← الأيقونات ← زر الدخول (من اليمين للشمال) */
.mdh-header__group {
	display: flex;
	align-items: center;
	height: 56px;
}

/* ── القائمة ── */

.mdh-header__nav {
	margin-inline-end: 103px; /* المسافة بين القائمة وأيقونة البحث */
}

.mdh-header__menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdh-header__menu > li {
	position: relative;
}

.mdh-header__menu > li > a {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--mdh-font-cairo);
	font-weight: 500;
	font-size: 17px;
	line-height: normal;
	color: var(--mdh-black);
	text-decoration: none;
	white-space: nowrap;
}

/* سهم القوائم المنسدلة 14×14 */
.mdh-header__menu > li.menu-item-has-children > a::after {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background: url("../icons/arrow-down.svg") no-repeat center / contain;
}

/* العنصر النشط — Cairo Bold 18 + خط سفلي، padding 10/10/6 */
/* current_page_parent / current-menu-ancestor: رابط "المدونة" جوه صفحة مقال، والرابط الأب جوه صفحة فرعية */
.mdh-header__menu > li.current-menu-item > a,
.mdh-header__menu > li.current_page_item > a,
.mdh-header__menu > li.current_page_parent > a,
.mdh-header__menu > li.current-menu-ancestor > a {
	padding: 10px 10px 6px;
	font-weight: 700;
	font-size: 18px;
	border-bottom: 1px solid var(--mdh-black);
}

/* في الفيجما الـ padding بتاع الرابط النشط بيطلع برا حدود القائمة (10px يمين)
   والمسافة بعده 10px بدل 24 — ده بيخلي عرض القائمة 339 زي التصميم بالظبط */
@media (min-width: 1181px) {
	.mdh-header__menu > li.current-menu-item,
	.mdh-header__menu > li.current_page_item,
	.mdh-header__menu > li.current_page_parent,
	.mdh-header__menu > li.current-menu-ancestor {
		margin-inline: -10px -8px; /* -8 (مش -14) عشان عرض النص في المتصفح أعرض سنة من فيجما */
	}
}

/* لو القائمة فيها 6 روابط أو أكتر (أكتر من التصميم): نقرّب المسافات عشان زر الدخول يفضل جوه الشريط */
@media (min-width: 1401px) {
	.mdh-header__nav:has(> .mdh-header__menu > li:nth-child(6)) {
		margin-inline-end: 56px;
	}

	.mdh-header__menu:has(> li:nth-child(6)) {
		gap: 16px;
	}
}

.mdh-header__menu > li > a:hover {
	text-decoration: none;
	opacity: 0.7;
}

/* القائمة الفرعية */
.mdh-header__menu .sub-menu {
	position: absolute;
	top: calc(100% + 18px);
	inset-inline-start: 0;
	min-width: 200px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: var(--mdh-cream);
	border: 1px solid var(--mdh-olive);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(50, 54, 37, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.mdh-header__menu > li:hover > .sub-menu,
.mdh-header__menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mdh-header__menu .sub-menu a {
	display: block;
	padding: 8px 20px;
	font-family: var(--mdh-font-cairo);
	font-weight: 500;
	font-size: 16px;
	color: var(--mdh-olive);
	text-decoration: none;
}

.mdh-header__menu .sub-menu a:hover {
	background: rgba(50, 54, 37, 0.06);
}

/* ── الأيقونات ── */

.mdh-header__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-inline-end: 32px; /* المسافة بين السلة وزر الدخول */
}

.mdh-header__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--mdh-black);
}

.mdh-header__icon svg {
	width: 24px;
	height: 24px;
}

.mdh-header__icon:hover {
	opacity: 0.7;
}

/* السلة: صندوق 30×30، الأيقونة تحت وعلى الشمال، والشارة فوق وعلى اليمين */
.mdh-header__cart {
	position: relative;
	width: 30px;
	height: 30px;
	align-items: flex-end;
	justify-content: flex-start;
}

[dir="rtl"] .mdh-header__cart {
	justify-content: flex-end;
}

.mdh-header__cart-count {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-family: var(--mdh-font-cairo);
	font-size: 10px;
	line-height: 1;
	color: var(--mdh-off-white);
	background: var(--mdh-black);
	border: 1px solid var(--mdh-black);
	border-radius: 30px;
}

.mdh-header__cart-count.is-empty {
	display: none;
}

/* ── زر الدخول 173×56 ── */

.mdh-header__login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 173px;
	height: 56px;
	font-family: var(--mdh-font-cairo);
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	color: var(--mdh-white);
	text-decoration: none;
	white-space: nowrap;
	background: var(--mdh-olive);
	border-radius: 50px;
	transition: background-color 0.2s ease;
}

.mdh-header__login:hover {
	color: var(--mdh-white);
	text-decoration: none;
	background: var(--mdh-olive-hover);
}

/* ── زر القائمة للموبايل ── */

.mdh-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
}

.mdh-header__burger span {
	display: block;
	height: 2px;
	background: var(--mdh-olive);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.mdh-header.is-menu-open .mdh-header__burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mdh-header.is-menu-open .mdh-header__burger span:nth-child(2) {
	opacity: 0;
}

.mdh-header.is-menu-open .mdh-header__burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── شريط البحث ── */

.mdh-header__search {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline: 0;
	width: min(720px, 100% - 32px);
	margin-inline: auto;
	padding: 16px;
	background: var(--mdh-cream);
	border: 1px solid var(--mdh-olive);
	border-radius: 24px;
	box-shadow: 0 12px 32px rgba(50, 54, 37, 0.12);
}

.mdh-header__search[hidden] {
	display: none;
}

.mdh-header__search form {
	display: flex;
	gap: 12px;
}

.mdh-header__search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding-inline: 16px;
	font-family: var(--mdh-font-cairo);
	font-size: 16px;
	color: var(--mdh-olive);
	background: transparent;
	border: 1px solid var(--mdh-olive);
	border-radius: 16px;
}

.mdh-header__search button[type="submit"] {
	height: 48px;
	padding-inline: 24px;
	font-family: var(--mdh-font-cairo);
	font-weight: 700;
	color: var(--mdh-white);
	background: var(--mdh-olive);
	border-radius: 16px;
}

/* ── الهيدر: الشاشات الأصغر من التصميم ── */

@media (max-width: 1400px) {
	.mdh-header__bar {
		gap: 32px;
	}

	.mdh-header__logo {
		width: 240px;
		height: 97px;
	}

	.mdh-header__nav {
		margin-inline-end: 40px;
	}

	.mdh-header__menu {
		gap: 18px;
	}

	.mdh-header__actions {
		gap: 20px;
		margin-inline-end: 24px;
	}

	.mdh-header__login {
		width: 150px;
	}
}

@media (max-width: 1280px) {
	.mdh-header__logo {
		width: 200px;
		height: 81px;
	}

	.mdh-header__nav {
		margin-inline-end: 28px;
	}

	.mdh-header__menu {
		gap: 14px;
	}

	.mdh-header__menu > li > a {
		font-size: 16px;
	}

	.mdh-header__actions {
		gap: 16px;
		margin-inline-end: 20px;
	}

	.mdh-header__login {
		width: 130px;
	}
}

/* 6 روابط مش بتساع في الشريط تحت 1180 — القائمة بتتحول لزرار ☰ */
@media (max-width: 1180px) {
	.mdh-header,
	.mdh-header__bar {
		height: 80px;
	}

	.mdh-header__bar {
		gap: 16px;
		padding-inline: 20px;
	}

	.mdh-header__logo {
		width: 170px;
		height: 68px;
	}

	.mdh-header__burger {
		display: flex;
	}

	/* القائمة تتحول لقائمة منسدلة تحت الشريط */
	.mdh-header__nav {
		position: absolute;
		top: calc(100% + 8px);
		inset-inline: 16px;
		margin: 0;
		padding: 16px;
		background: var(--mdh-cream);
		border: 1px solid var(--mdh-olive);
		border-radius: 24px;
		box-shadow: 0 12px 32px rgba(50, 54, 37, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.mdh-header.is-menu-open .mdh-header__nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.mdh-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.mdh-header__menu > li > a {
		justify-content: space-between;
		padding: 12px 8px;
		font-size: 18px;
	}

	.mdh-header__menu > li.current-menu-item > a,
	.mdh-header__menu > li.current_page_item > a,
	.mdh-header__menu > li.current_page_parent > a,
	.mdh-header__menu > li.current-menu-ancestor > a {
		padding: 12px 8px;
		border-bottom: 0;
	}

	.mdh-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		padding: 0 16px 8px;
	}

	.mdh-header__actions {
		margin-inline-end: 16px;
		gap: 16px;
	}

	.mdh-header__login {
		display: none;
	}
}

@media (max-width: 480px) {
	.mdh-header__bar {
		width: calc(100% - 16px);
		padding-inline: 14px;
	}

	.mdh-header__logo {
		width: 130px;
		height: 52px;
	}

	.mdh-header__actions {
		gap: 12px;
		margin-inline-end: 8px;
	}
}

/* ==========================================================================
   الفوتر — Figma 77:955 (1920×605.33)
   القياسات من الصورة المصدّرة 1:1 — الفوتر 529.06 + شريط سفلي 76.27
   ========================================================================== */

.mdh-footer {
	position: relative;
	z-index: 1;
	font-family: var(--mdh-font-cairo);
	color: var(--mdh-olive);
	background: var(--mdh-cream);
	/* ظل ناعم لفوق (~72px) زي التصميم */
	box-shadow: 0 -18px 54px rgba(0, 0, 0, 0.1);
}

.mdh-footer p {
	margin: 0;
}

.mdh-footer a {
	color: inherit;
	text-decoration: none;
}

.mdh-footer a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.mdh-footer__main {
	display: flex;
	align-items: flex-start;
	gap: 89.47px;
	width: 100%;
	max-width: calc(var(--mdh-container) + 2 * var(--mdh-gutter));
	min-height: 529.06px;
	margin-inline: auto;
	padding-block: 72.5px 0;
	/* يمين 92+43.67 — شمال 92+49.3 */
	padding-inline: calc(var(--mdh-gutter) + 43.67px) calc(var(--mdh-gutter) + 49.3px);
}

/* ── العمود اليمين: اللوجو + النشرة ── */

.mdh-footer__brand {
	flex: 0 0 414.67px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5.333px;
}

.mdh-footer__logo {
	display: block;
	width: 298px;
	height: 120px;
}

.mdh-footer__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mdh-footer__newsletter-title {
	font-weight: 400;
	font-size: 26.667px;
	line-height: 40px;
	white-space: nowrap;
}

.mdh-footer__newsletter-text {
	width: 404px;
	max-width: 100%;
	font-weight: 400;
	font-size: 18.667px;
	line-height: normal;
}

/* ── الجسم: النموذج + التطبيقات ثم الأعمدة ── */

.mdh-footer__body {
	flex: 1 1 1138.9px;
	min-width: 0;
	padding-top: 9.83px;
}

.mdh-footer__top {
	display: flex;
	align-items: flex-start;
	gap: 64.6px;
}

.mdh-footer__form {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 32.8px;
}

.mdh-footer__input {
	width: 423.6px;
	height: 53.27px;
	padding: 0 19.2px;
	font-family: var(--mdh-font-cairo);
	font-size: 16px;
	line-height: normal;
	color: var(--mdh-olive);
	background: var(--mdh-cream);
	border: 1.333px solid var(--mdh-olive);
	border-radius: 0;
	outline: none;
}

.mdh-footer__input::placeholder {
	color: var(--mdh-gray-300);
	opacity: 1;
}

.mdh-footer__input:focus {
	box-shadow: 0 0 0 2px rgba(50, 54, 37, 0.2);
}

.mdh-footer__subscribe {
	width: 247.2px;
	height: 48.43px;
	font-family: var(--mdh-font-cairo);
	font-size: 24px;
	line-height: normal;
	/* ملاحظة: في التصميم النص بلون الخلفية (#F2E4D9) فالزر بيبان فاضي — خليناه زيتوني عشان يتقري */
	color: var(--mdh-olive);
	background: var(--mdh-cream);
	border: 1.333px solid var(--mdh-olive);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mdh-footer__subscribe:hover {
	color: var(--mdh-cream);
	background: var(--mdh-olive);
}

.mdh-footer__form-note {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	font-size: 15px;
	color: var(--mdh-olive);
}

.mdh-footer__form-note.is-error {
	color: #b3261e;
}

.mdh-footer__apps {
	display: flex;
	gap: 10.667px;
	margin-top: 4.84px;
}

.mdh-footer__apps a {
	display: block;
	width: 178.67px;
	height: 50.85px;
}

.mdh-footer__apps img {
	width: 100%;
	height: 100%;
}

/* الأعمدة: 233.33 / 210 / 210 / 333.6 */
.mdh-footer__cols {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin-top: 83.88px;
	padding-inline-start: 2.07px;
}

.mdh-footer__col {
	display: flex;
	flex-direction: column;
	gap: 21.333px;
}

.mdh-footer__col--main {
	flex: 0 0 233.33px;
}

.mdh-footer__col--links,
.mdh-footer__col--contact {
	flex: 0 0 210px;
}

.mdh-footer__col--contact {
	margin-top: 114.04px;
}

.mdh-footer__col--social {
	flex: 0 0 333.6px;
	margin-top: 11.04px;
}

.mdh-footer__heading {
	font-weight: 700;
	font-size: 24px;
	line-height: 33.333px;
}

.mdh-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10.667px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdh-footer__list li {
	display: flex;
	align-items: stretch;
	min-height: 33.333px;
	font-weight: 500;
	font-size: 21.333px;
	line-height: 33.333px;
}

/* «« — سهمين 5.33×9.6 بمسافة 5.33 من الجانبين، في أسفل السطر */
.mdh-footer__chevron {
	display: flex;
	align-items: flex-end;
	flex: 0 0 auto;
	padding: 0 5.333px 6.667px;
}

.mdh-footer__chevron::before,
.mdh-footer__chevron::after {
	content: "";
	width: 5.333px;
	height: 9.6px;
	background: var(--mdh-olive);
	-webkit-mask: url("../icons/chevron-left.svg") center / contain no-repeat;
	mask: url("../icons/chevron-left.svg") center / contain no-repeat;
}

.mdh-footer__social {
	display: flex;
	gap: 10.667px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdh-footer__social a {
	display: block;
	width: 45.333px;
	height: 45.333px;
}

.mdh-footer__social svg {
	width: 100%;
	height: 100%;
}

/* ── الشريط السفلي 76.27 ── */

.mdh-footer__bottom {
	display: flex;
	align-items: center;
	gap: 32px;
	/* ارتفاع ثابت 76.27 — صورة الضريبة (40px) بتتوسّط جواه زي التصميم */
	height: 76.27px;
	padding-block: 0;
	/* يمين 50 — شمال 266.67 (من الصورة المصدّرة) */
	padding-inline: 50px 266.67px;
	background: var(--mdh-cream);
}

.mdh-footer__legal {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 32px;
}

.mdh-footer__copyright {
	font-size: 18.667px;
	line-height: normal;
	text-align: start;
}

/* روابط قانونية جنب سطر الحقوق — مش في التصميم، بنفس لون ومقاس الشريط */
.mdh-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: normal;
}

.mdh-footer__legal-links a {
	opacity: 0.75;
}

.mdh-footer__legal-links a:hover {
	opacity: 1;
	text-decoration: underline;
}

.mdh-footer__tax {
	display: flex;
	align-items: center;
	gap: 10.667px;
	font-size: 18.667px;
	line-height: normal;
	white-space: nowrap;
}

.mdh-footer__tax img {
	width: 30px;
	height: 40px;
	border-radius: 2.667px;
	object-fit: cover;
}

.mdh-footer__payments {
	display: flex;
	gap: 10.667px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdh-footer__payment {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 41.333px;
	background: var(--mdh-gold);
	border-radius: 2.667px;
	overflow: hidden;
}

.mdh-footer__payment img {
	width: 61.333px;
	height: auto;
	object-fit: contain;
}

.mdh-footer__payment--visa {
	width: 85.333px;
}

.mdh-footer__payment--visa img {
	height: 20px;
}

.mdh-footer__payment--mastercard img {
	width: 53.333px;
	height: 32px;
}

.mdh-footer__payment--paypal img {
	height: 33.333px;
}

.mdh-footer__payment--mada img {
	height: 25.333px;
}

/* ── الفوتر: الشاشات الأصغر من التصميم ── */

@media (max-width: 1700px) {
	.mdh-footer__main {
		gap: 48px;
		padding-inline: var(--mdh-gutter);
	}

	.mdh-footer__brand {
		flex-basis: 360px;
	}

	.mdh-footer__top {
		flex-wrap: wrap;
		gap: 24px 40px;
	}

	.mdh-footer__form {
		flex: 1 1 520px;
		gap: 16px;
	}

	.mdh-footer__input {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.mdh-footer__subscribe {
		flex: 0 0 180px;
	}

	.mdh-footer__cols {
		flex-wrap: wrap;
		gap: 32px 40px;
		margin-top: 56px;
		padding-inline-start: 0;
	}

	.mdh-footer__col--main,
	.mdh-footer__col--links,
	.mdh-footer__col--contact,
	.mdh-footer__col--social {
		flex: 1 1 200px;
		margin-top: 0;
	}

	.mdh-footer__bottom {
		flex-wrap: wrap;
		row-gap: 16px;
		height: auto;
		min-height: 76.27px;
		padding-block: 16px;
		padding-inline: var(--mdh-gutter);
	}
}

@media (max-width: 1100px) {
	.mdh-footer__main {
		flex-direction: column;
		gap: 40px;
		padding-top: 48px;
	}

	.mdh-footer__brand {
		flex-basis: auto;
		width: 100%;
	}

	.mdh-footer__newsletter-text {
		width: auto;
	}

	.mdh-footer__body {
		width: 100%;
		padding-top: 0;
	}
}

@media (max-width: 640px) {
	.mdh-footer__logo {
		width: 220px;
		height: 89px;
	}

	.mdh-footer__newsletter-title {
		font-size: 22px;
		white-space: normal;
	}

	.mdh-footer__newsletter-text {
		font-size: 16px;
	}

	.mdh-footer__form {
		flex-direction: column;
		flex-basis: 100%;
		align-items: stretch;
	}

	.mdh-footer__input,
	.mdh-footer__subscribe {
		width: 100%;
		flex: 0 0 auto;
	}

	.mdh-footer__subscribe {
		height: 48px;
	}

	.mdh-footer__apps {
		flex-wrap: wrap;
	}

	.mdh-footer__apps a {
		width: 150px;
		height: 42.7px;
	}

	.mdh-footer__cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px 24px;
	}

	.mdh-footer__list li {
		font-size: 17px;
	}

	.mdh-footer__heading {
		font-size: 20px;
	}

	.mdh-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.mdh-footer__copyright,
	.mdh-footer__tax {
		font-size: 15px;
	}

	.mdh-footer__payments {
		flex-wrap: wrap;
	}
}