/*
Theme Name: Medad
Author: Medad
Author URI: https://www.instagram.com/medad.sy
Description: مداد 4: واجهة احترافية جديدة مفعّلة تلقائياً، رئيسية كحلية وهوية موحّدة للبطاقات والأقسام، معاينة سريعة وأربعة أوضاع للكتالوج. مع المحافظة على الطلب عبر واتساب والحسابات والسيرة الذاتية والعمولات وصيد العملاء. يمكن العودة للتصميم السابق من إعدادات المتجر.
Version: 4.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medad
Tags: rtl-language-support, e-commerce, custom-logo, custom-menu, featured-images, translation-ready, grid-layout
*/

/* ==========================================================================
   نظام التصميم (3.1)
   --------------------------------------------------------------------------
   الأوزان:
   - 400 عادي: النصوص المقروءة (الوصف، الفقرات، الإجابات، التقييمات، روابط
     التذييل، التواريخ والبيانات الثانوية، مسار التنقل، نصوص الحقول).
   - 500 متوسط: عناصر الواجهة غير الرئيسية (القائمة، الشرائح والأقسام،
     عناوين الحقول، الشارات الصغيرة، بيانات البطاقة).
   - 700 عريض: العناوين، أسماء المنتجات، الأسعار، الأزرار، العنصر النشط.
   - 800 أعرض: للعرض فقط (عنوان الواجهة، عناوين الأشرطة المتدرجة، 404).
   المقاسات: سلم واحد يكبر بسلاسة من الجوال (360px) إلى الكمبيوتر (1280px):
   12 / 13 / 14 ثابتة للنصوص الصغيرة، و15→16 للنص الأساسي، ثم العناوين.
   ========================================================================== */

/* ==========================================================================
   1. الخطوط
   ========================================================================== */
@font-face { font-family: 'Tajawal'; src: url('assets/fonts/tajawal-400.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('assets/fonts/tajawal-500.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('assets/fonts/tajawal-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('assets/fonts/tajawal-800.woff2') format('woff2'); font-weight: 800 900; font-style: normal; font-display: swap; }

/* ==========================================================================
   2. المتغيرات (الألوان الأساسية تأتي من إعدادات المتجر)
   ========================================================================== */
:root {
	--mdd-accent: #FFC21A;
	--mdd-accent-ink: #1B1606;
	--mdd-accent-text: #8A6100;
	--mdd-grad-from: #EDEDF0;
	--mdd-grad-to: #E3E3E8;
	--mdd-ease-out: cubic-bezier(.23, 1, .32, 1);

	--mdd-bg: #F2F2F5;
	--mdd-surface: #FFFFFF;
	--mdd-surface-2: #F6F6F8;
	--mdd-border: #DCDCE3;
	--mdd-input-border: #8E8E9C; /* حدود الحقول: تباين 3:1 على الأبيض لتظهر بوضوح. */
	--mdd-text: #17171E;
	--mdd-muted: #63636F;
	--mdd-badge: #CF3150;
	--mdd-wa: #15803D;
	--mdd-wa-hover: #116B33;
	--mdd-success: #15803D;
	--mdd-danger: #C8303E;

	/* هوية البطاقات (من تصميم المتجر) */
	--mdd-plum-1: #242429;
	--mdd-plum-2: #34343B;
	--mdd-ring: #D9D9DE;
	--mdd-glow: rgba(20, 20, 30, .35);
	--mdd-marquee: var(--mdd-accent);
	--mdd-marquee-ink: var(--mdd-accent-ink);
	--mdd-screen: #EDEDF0;

	/* الخط والأوزان */
	--mdd-font: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
	--mdd-fw-regular: 400;
	--mdd-fw-medium: 500;
	--mdd-fw-bold: 700;
	--mdd-fw-heavy: 800;

	/* سلم المقاسات: ثابت للنصوص الصغيرة، ومرن (360px ← 1280px) لما فوقها */
	--mdd-fs-xs: 12px;
	--mdd-fs-sm: 13px;
	--mdd-fs-md: 14px;
	--mdd-fs-card: clamp(14px, 13.609px + .1087vw, 15px);
	--mdd-fs-base: clamp(15px, 14.609px + .1087vw, 16px);
	--mdd-fs-lg: clamp(16px, 15.217px + .2174vw, 18px);
	--mdd-fs-xl: clamp(18px, 16.826px + .3261vw, 21px);
	--mdd-fs-2xl: clamp(20px, 17.652px + .6522vw, 26px);
	--mdd-fs-3xl: clamp(23px, 19.478px + .9783vw, 32px);
	--mdd-fs-display: clamp(25px, 18.348px + 1.8478vw, 42px);

	--mdd-lh-tight: 1.3;
	--mdd-lh-heading: 1.4;
	--mdd-lh-body: 1.7;
	--mdd-lh-long: 1.85;

	/* المسافات */
	--mdd-gutter: clamp(14px, 10.087px + 1.087vw, 24px);
	--mdd-section-y: clamp(24px, 16.174px + 2.1739vw, 44px);

	/* الأشكال والظلال */
	--mdd-radius-sm: 4px;
	--mdd-radius: 6px;
	--mdd-radius-lg: 8px;
	--mdd-radius-xl: 12px;
	--mdd-shadow-sm: 0 1px 2px rgba(20, 20, 35, .06);
	--mdd-shadow: 0 1px 2px rgba(20, 20, 35, .05), 0 3px 10px -4px rgba(20, 20, 35, .12);

	/* عناصر التحكم (44px على الأقل للمس المريح) */
	--mdd-control-sm: 36px;
	--mdd-control: 44px;
	--mdd-control-lg: 50px;
	--mdd-header-h: clamp(56px, 52.087px + 1.087vw, 66px);

	/*
	 * معاملات التصغير المرن القديمة: ما زال محرّر السيرة (cv-builder.css) يستخدمها.
	 * --mdd-s يساوي 0 على الشاشات العريضة و1px على أضيق هاتف.
	 */
	--mdd-s: clamp(0px, calc((1280px - 100vw) / 960), 1px);
	--mdd-s-1180: clamp(0px, calc((1180px - 100vw) / 860), 1px);
	--mdd-s-1100: clamp(0px, calc((1100px - 100vw) / 780), 1px);
	--mdd-s-1023: clamp(0px, calc((1023px - 100vw) / 703), 1px);
	--mdd-s-960: clamp(0px, calc((960px - 100vw) / 640), 1px);
	--mdd-s-900: clamp(0px, calc((900px - 100vw) / 580), 1px);
	--mdd-s-782: clamp(0px, calc((782px - 100vw) / 462), 1px);
	--mdd-s-640: clamp(0px, calc((640px - 100vw) / 320), 1px);
	--mdd-s-560: clamp(0px, calc((560px - 100vw) / 240), 1px);
	--mdd-s-380: clamp(0px, calc((380px - 100vw) / 60), 1px);
	--mdd-s-360: clamp(0px, calc((360px - 100vw) / 40), 1px);
	--mdd-s-340: clamp(0px, calc((340px - 100vw) / 20), 1px);
}

.mdd-scheme-dark {
	color-scheme: dark;
	--mdd-bg: #0C121B;
	--mdd-surface: #141B26;
	--mdd-surface-2: #1A2331;
	--mdd-border: #253145;
	--mdd-text: #EEF2F8;
	--mdd-muted: #9AA6B8;
	--mdd-input-border: #5A6B85;
	--mdd-danger: #EF5B67;
	--mdd-accent-text: var(--mdd-accent);
	--mdd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	--mdd-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -16px rgba(0, 0, 0, .7);
}

/* أدوات المتصفح (أشرطة التمرير والحقول) بلون الوضع الحالي. */
html:has(body.mdd-scheme-dark) { color-scheme: dark; }
.mdd-scheme-light { color-scheme: light; }
/* الوضع الداكن: لوحة الخدمات الإضافية والرسائل المؤقتة أوضح فوق الخلفية الداكنة. */
.mdd-scheme-dark .mdd-svc-panel { box-shadow: inset 0 0 0 1px rgba(205, 182, 247, .16), 0 22px 44px -30px rgba(0, 0, 0, .8); }
.mdd-scheme-dark .mdd-toast { background: #EEF2F8; color: #0C121B; }

/* ==========================================================================
   3. الأساسيات
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--mdd-header-h) + 16px); }
body {
	margin: 0;
	background: var(--mdd-bg);
	color: var(--mdd-text);
	font-family: var(--mdd-font);
	font-size: var(--mdd-fs-base);
	font-weight: var(--mdd-fw-regular);
	line-height: var(--mdd-lh-body);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
body.mdd-nav-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--mdd-accent-text); }
h1, h2, h3, h4, h5, h6 { font-weight: var(--mdd-fw-bold); line-height: 1.35; margin: 0 0 .5em; color: var(--mdd-text); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.3em; }
button, input, select, textarea { font: inherit; color: inherit; }
/* 16px في الحقول يمنع التكبير التلقائي المزعج على iPhone عند الكتابة. */
input, select, textarea { font-size: 16px; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.mdd-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }

.mdd-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--mdd-gutter); }
.mdd-main { display: block; min-height: 50vh; outline: none; }

:focus-visible { outline: 3px solid var(--mdd-accent); outline-offset: 2px; border-radius: 6px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important; clip-path: none; height: auto; width: auto; display: block;
	top: 6px; inset-inline-start: 6px; z-index: 100000; padding: 12px 20px;
	background: var(--mdd-surface); color: var(--mdd-text); border-radius: 8px; box-shadow: var(--mdd-shadow);
}
.mdd-skip {
	position: absolute; top: -100px; inset-inline-start: 12px; z-index: 100000;
	padding: 10px 18px; border-radius: 10px; background: var(--mdd-accent); color: var(--mdd-accent-ink); font-weight: var(--mdd-fw-bold);
}
.mdd-skip:focus { top: 12px; color: var(--mdd-accent-ink); }

/* ==========================================================================
   4. الأزرار
   ========================================================================== */
.mdd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--mdd-control); padding: 8px 18px;
	border: 1.5px solid var(--mdd-accent); border-radius: var(--mdd-radius);
	background: var(--mdd-accent); color: var(--mdd-accent-ink);
	font-family: inherit; font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); line-height: var(--mdd-lh-tight); text-align: center;
	cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
	-webkit-tap-highlight-color: transparent;
}
.mdd-btn:hover { color: var(--mdd-accent-ink); filter: brightness(.94); }
.mdd-btn-outline { background: transparent; color: var(--mdd-accent-text); }
.mdd-btn-outline:hover { background: var(--mdd-accent); color: var(--mdd-accent-ink); filter: none; }
.mdd-btn-wa { background: var(--mdd-wa); border-color: var(--mdd-wa); color: #fff; }
.mdd-btn-wa:hover { background: var(--mdd-wa-hover); border-color: var(--mdd-wa-hover); color: #fff; filter: none; }
.mdd-btn-ghost { background: var(--mdd-surface); border-color: var(--mdd-border); color: var(--mdd-text); }
.mdd-btn-ghost:hover { border-color: var(--mdd-text); color: var(--mdd-text); filter: none; }
.mdd-btn-block { display: flex; width: 100%; }
.mdd-btn-lg { min-height: var(--mdd-control-lg); padding-inline: 22px; font-size: var(--mdd-fs-base); }
.mdd-btn-sm { min-height: var(--mdd-control-sm); padding: 6px 12px; font-size: var(--mdd-fs-sm); border-radius: 10px; }
.mdd-link { color: var(--mdd-accent-text); font-weight: var(--mdd-fw-bold); }

.mdd-icon-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 40px; height: 40px; padding: 0 8px;
	border: 0; border-radius: var(--mdd-radius); background: transparent; color: var(--mdd-text); cursor: pointer;
}
.mdd-icon-btn:hover { background: var(--mdd-surface-2); }

/* ==========================================================================
   5. الشريط العلوي والترويسة
   ========================================================================== */
.mdd-topbar {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 7px var(--mdd-gutter); background: var(--mdd-accent); color: var(--mdd-accent-ink);
	font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); line-height: 1.5; text-align: center; text-wrap: balance;
}
.mdd-topbar .mdd-icon { color: var(--mdd-accent-ink); }

.mdd-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--mdd-surface); border-bottom: 1px solid var(--mdd-border);
	box-shadow: var(--mdd-shadow-sm);
}
.admin-bar .mdd-header { top: 32px; }
.mdd-header-row { display: flex; align-items: center; gap: 16px; min-height: var(--mdd-header-h); }

.mdd-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mdd-brand:hover { color: var(--mdd-text); }
.mdd-brand-logo { width: auto; height: 40px; max-width: 170px; object-fit: contain; }
.mdd-brand-logo.is-mark { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.mdd-brand-name { font-size: clamp(17px, 15.826px + .3261vw, 20px); font-weight: var(--mdd-fw-heavy); line-height: 1.2; }

.mdd-nav-toggle { display: none; }
.mdd-nav { flex: 1; }
.mdd-nav-head { display: none; }
.mdd-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.mdd-menu > li { position: relative; }
.mdd-menu a { display: block; padding: 8px 12px; border-radius: 10px; font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); line-height: 1.5; color: var(--mdd-text); }
.mdd-menu a:hover, .mdd-menu .current-menu-item > a { background: var(--mdd-surface-2); color: var(--mdd-accent-text); }
.mdd-menu .current-menu-item > a { font-weight: var(--mdd-fw-bold); }
.mdd-menu .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 7px; vertical-align: 3px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.mdd-menu .sub-menu {
	position: absolute; top: 100%; inset-inline-start: 0; z-index: 20; min-width: 220px;
	list-style: none; margin: 0; padding: 6px;
	background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); box-shadow: var(--mdd-shadow);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.mdd-menu li:hover > .sub-menu, .mdd-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mdd-menu .sub-menu a { font-weight: var(--mdd-fw-medium); padding: 8px 12px; }
.mdd-submenu-toggle { display: none; }

.mdd-header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.mdd-header-wa { min-height: 40px; padding: 6px 14px; font-size: var(--mdd-fs-sm); }

.mdd-header-search { border-top: 1px solid var(--mdd-border); padding: 12px 0; background: var(--mdd-surface); }

.mdd-catbar { border-bottom: 1px solid var(--mdd-border); background: var(--mdd-surface); }
.mdd-catbar ul {
	list-style: none; margin: 0 calc(var(--mdd-gutter) * -1); padding: 8px var(--mdd-gutter); display: flex; gap: 8px; overflow-x: auto;
	scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.mdd-catbar ul::-webkit-scrollbar { display: none; }
.mdd-catbar li { flex: none; }
.mdd-catbar a {
	display: inline-flex; align-items: center; gap: 8px; height: 38px; white-space: nowrap;
	padding-block: 0; padding-inline: 5px 16px;
	border: 1px solid var(--mdd-border); border-radius: 999px; background: var(--mdd-surface-2);
	font-size: var(--mdd-fs-md); font-weight: var(--mdd-fw-medium); line-height: 1.4; transition: border-color .2s, background .2s;
}
.mdd-catbar a:hover, .mdd-catbar a.is-current { border-color: var(--mdd-accent); background: color-mix(in srgb, var(--mdd-accent) 14%, var(--mdd-surface)); color: var(--mdd-text); }
.mdd-catbar img { flex: none; width: 28px; height: 28px; max-width: none; border-radius: 50%; object-fit: cover; }
/* على الكمبيوتر تظهر كل الأقسام (صف أو صفان في المنتصف) بدل إخفاء بعضها خارج الشاشة. */
@media (min-width: 961px) {
	.mdd-catbar ul { flex-wrap: wrap; justify-content: center; overflow: visible; }
}

/* ==========================================================================
   6. البحث
   ========================================================================== */
.mdd-search {
	display: flex; align-items: center; gap: 4px; width: 100%; max-width: 600px; margin-inline: auto;
	padding: 4px; padding-inline-start: 14px;
	background: var(--mdd-surface); border: 1.5px solid var(--mdd-border); border-radius: var(--mdd-radius);
	transition: border-color .2s, box-shadow .2s;
}
.mdd-search:focus-within { border-color: var(--mdd-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mdd-accent) 22%, transparent); }
.mdd-search input[type="search"] {
	flex: 1; min-width: 0; min-height: 40px; border: 0; outline: 0; background: transparent; color: var(--mdd-text); font-size: 16px;
}
.mdd-search input::placeholder { color: var(--mdd-muted); font-size: var(--mdd-fs-md); opacity: 1; }
.mdd-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.mdd-search button {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 40px;
	border: 0; border-radius: 9px; background: var(--mdd-accent); color: var(--mdd-accent-ink); cursor: pointer;
}
.mdd-search.is-hero { max-width: 540px; margin: 0 0 16px; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .45); border-color: transparent; }
.mdd-search.is-inline { margin-top: 16px; }

/* ==========================================================================
   7. الواجهة (Hero)
   ========================================================================== */
.mdd-hero { padding: 16px 0 8px; }
.mdd-hero-inner {
	position: relative; width: 100%; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px;
	padding: clamp(20px, 10.609px + 2.6087vw, 44px); border-radius: var(--mdd-radius-xl);
	background: var(--mdd-surface-2); border: 1px solid var(--mdd-border);
	color: var(--mdd-text); box-shadow: var(--mdd-shadow);
}
.mdd-hero-text { position: relative; z-index: 1; }
.mdd-hero h1 { color: var(--mdd-text); font-size: var(--mdd-fs-display); font-weight: var(--mdd-fw-heavy); line-height: 1.25; margin-bottom: 12px; text-wrap: balance; }
.mdd-hero p { color: var(--mdd-muted); font-size: var(--mdd-fs-base); max-width: 520px; margin-bottom: 20px; }
.mdd-hero-perks { display: flex; flex-wrap: wrap; gap: 8px; }
.mdd-hero-perks span {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
	background: var(--mdd-surface); border: 1px solid var(--mdd-border); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); color: var(--mdd-text);
}
.mdd-hero-art { position: relative; z-index: 1; min-height: 260px; }
.mdd-hero-art > img { width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--mdd-radius-xl); box-shadow: 0 16px 32px -20px rgba(20, 20, 35, .25); }
.mdd-hero-collage { position: relative; height: 290px; }
.mdd-hero-collage img {
	position: absolute; width: 44%; aspect-ratio: 1; object-fit: cover; border-radius: 14px;
	border: 3px solid var(--mdd-surface); box-shadow: 0 14px 28px -16px rgba(20, 20, 35, .3);
}
.mdd-hero-collage .is-0 { top: 0; inset-inline-start: 6%; transform: rotate(-6deg); }
.mdd-hero-collage .is-1 { top: 6%; inset-inline-end: 4%; transform: rotate(7deg); }
.mdd-hero-collage .is-2 { bottom: 0; inset-inline-start: 18%; transform: rotate(4deg); z-index: 2; }
.mdd-hero-collage .is-3 { bottom: 4%; inset-inline-end: 12%; transform: rotate(-5deg); }

/* ==========================================================================
   8. الأقسام والعناوين
   ========================================================================== */
.mdd-section { padding: var(--mdd-section-y) 0; }
.mdd-section-title { text-align: center; margin-bottom: clamp(16px, 13.652px + .6522vw, 22px); }
.mdd-section-title h2 {
	display: flex; align-items: center; gap: 16px; margin: 0;
	font-size: var(--mdd-fs-2xl); font-weight: var(--mdd-fw-bold);
}
.mdd-section-title h2::before, .mdd-section-title h2::after {
	content: ""; flex: 1; height: 1px; background: linear-gradient(to left, transparent, var(--mdd-accent) 40%, var(--mdd-accent) 60%, transparent);
	opacity: .6;
}
.mdd-section-title h2 span { position: relative; padding-bottom: 4px; }
.mdd-section-title h2 span::after {
	content: ""; position: absolute; inset-inline: 22%; bottom: -5px; height: 3px; border-radius: 3px; background: var(--mdd-accent);
}
.mdd-section-title p { color: var(--mdd-muted); margin: 12px 0 0; font-size: var(--mdd-fs-md); }

/* شبكة الأقسام */
.mdd-cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.mdd-cat-tile {
	display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 12px; text-align: center;
	background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.mdd-cat-tile-img {
	display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
	background: linear-gradient(135deg, var(--mdd-grad-from), var(--mdd-grad-to));
}
.mdd-cat-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mdd-cat-tile-name { font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); line-height: 1.4; }
.mdd-cat-tile-count { font-size: var(--mdd-fs-xs); color: var(--mdd-muted); margin-top: -4px; }

/* شريط القسم */
.mdd-banner {
	position: relative; display: flex; align-items: center; gap: 16px; min-height: 84px; margin: 12px 0 20px;
	padding: 12px 22px; padding-inline-end: 18px; border-radius: var(--mdd-radius-lg); color: var(--mdd-text);
	background: var(--mdd-surface-2); border: 1px solid var(--mdd-border);
}
.mdd-banner-art {
	flex-shrink: 0; width: 76px; height: 76px; margin-block: -18px; border-radius: var(--mdd-radius-lg); overflow: hidden;
	border: 3px solid var(--mdd-surface); box-shadow: var(--mdd-shadow);
}
.mdd-banner-art img { width: 100%; height: 100%; object-fit: cover; }
.mdd-banner-text { flex: 1; min-width: 0; }
.mdd-banner h2 { margin: 0; color: var(--mdd-text); font-size: var(--mdd-fs-2xl); font-weight: var(--mdd-fw-heavy); line-height: 1.3; }
.mdd-banner p { margin: 2px 0 0; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.6; }
.mdd-banner-more {
	display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
	background: var(--mdd-accent); color: var(--mdd-accent-ink); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-sm);
}
.mdd-banner-more:hover { filter: brightness(.94); }

/* ==========================================================================
   9. بطاقة الاشتراك
   ========================================================================== */
/* (بطاقة الاشتراك الكلاسيكية: انظر القسم 35) */

/* السعر */
.mdd-price { font-weight: var(--mdd-fw-bold); color: var(--mdd-text); }
.mdd-amount { display: inline-flex; align-items: baseline; gap: 4px; }
.mdd-amount-num { font-size: var(--mdd-fs-lg); font-weight: var(--mdd-fw-bold); }
.mdd-amount-cur { font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); color: var(--mdd-muted); }
.mdd-amount.is-empty { font-size: var(--mdd-fs-md); font-weight: var(--mdd-fw-medium); color: var(--mdd-muted); }
.mdd-old-price { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-regular); }
.mdd-price.is-lg .mdd-amount-num { font-size: clamp(24px, 21.652px + .6522vw, 30px); }
.mdd-price.is-lg .mdd-amount-cur { font-size: var(--mdd-fs-base); }

/* ==========================================================================
   10. مسار التنقل ورؤوس الصفحات
   ========================================================================== */
.mdd-breadbar { background: color-mix(in srgb, var(--mdd-surface) 55%, var(--mdd-bg)); border-bottom: 1px solid var(--mdd-border); }
.mdd-breadcrumbs ol { list-style: none; margin: 0; padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--mdd-fs-sm); line-height: 1.5; color: var(--mdd-muted); }
.mdd-breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.mdd-breadcrumbs a:hover { color: var(--mdd-accent-text); }
.mdd-breadcrumbs [aria-current] { color: var(--mdd-text); font-weight: var(--mdd-fw-medium); }
.mdd-crumb-sep { opacity: .55; }

.mdd-page-head { padding: clamp(20px, 16.087px + 1.087vw, 30px) 0 4px; text-align: center; }
.mdd-page-head h1 { font-size: var(--mdd-fs-3xl); margin-bottom: 6px; }
.mdd-page-head p { color: var(--mdd-muted); max-width: 640px; margin: 0 auto; }
.mdd-page-head.is-category { text-align: start; }
.mdd-page-head-row { display: flex; align-items: center; gap: clamp(14px, 10.087px + 1.087vw, 22px); }
.mdd-page-head-art { flex-shrink: 0; width: clamp(64px, 53.043px + 3.0435vw, 92px); height: clamp(64px, 53.043px + 3.0435vw, 92px); border-radius: 22%; overflow: hidden; box-shadow: var(--mdd-shadow); transform: rotate(-4deg); border: 3px solid var(--mdd-surface); }
.mdd-page-head-art img { width: 100%; height: 100%; object-fit: cover; }
.mdd-page-head.is-category p { margin: 0; }
.mdd-page-head-count { display: inline-block; margin-top: 8px; padding: 2px 12px; border-radius: 999px; background: var(--mdd-surface); border: 1px solid var(--mdd-border); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); line-height: 1.7; color: var(--mdd-muted); }
.mdd-page-head.is-category .mdd-page-head-actions { margin-top: 12px; }

.mdd-catalog { padding-top: 20px; padding-bottom: clamp(28px, 23.304px + 1.3043vw, 40px); }
.mdd-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.mdd-found { margin: 0; color: var(--mdd-muted); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); }
.mdd-chips { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mdd-chips::-webkit-scrollbar { display: none; }
.mdd-chip {
	flex-shrink: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--mdd-border); background: var(--mdd-surface);
	font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); line-height: 1.4; white-space: nowrap;
}
.mdd-chip:hover { border-color: var(--mdd-accent); color: var(--mdd-text); }
.mdd-chip.is-active { background: var(--mdd-accent); border-color: var(--mdd-accent); color: var(--mdd-accent-ink); }
.mdd-sort { display: flex; align-items: center; gap: 6px; padding: 3px; padding-inline-start: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius); background: var(--mdd-surface); }
.mdd-sort label { display: inline-flex; color: var(--mdd-muted); }
.mdd-sort select { min-height: 36px; border: 0; background: transparent; font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); cursor: pointer; outline: none; }

.mdd-pagination { margin-top: 28px; }
.mdd-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mdd-pagination a.page-numbers, .mdd-pagination span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
	border-radius: var(--mdd-radius); border: 1px solid var(--mdd-border); background: var(--mdd-surface); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md);
}
.mdd-pagination .page-numbers.current { background: var(--mdd-accent); border-color: var(--mdd-accent); color: var(--mdd-accent-ink); font-weight: var(--mdd-fw-bold); }
.mdd-pagination .is-prev { transform: scaleX(-1); }

.mdd-empty {
	display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(28px, 22.522px + 1.5217vw, 42px) 20px; text-align: center;
	background: var(--mdd-surface); border: 1.5px dashed var(--mdd-border); border-radius: var(--mdd-radius-lg); color: var(--mdd-muted);
}
.mdd-empty .mdd-icon { color: var(--mdd-accent-text); margin-bottom: 6px; }
.mdd-empty h1, .mdd-empty h2 { font-size: var(--mdd-fs-xl); margin: 0; }
.mdd-empty p { margin: 0; }
.mdd-empty p + p { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   11. صفحة الاشتراك
   ========================================================================== */
.mdd-product {
	display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(18px, 14.478px + .9783vw, 27px); align-items: start;
	padding-top: 20px; padding-bottom: 16px;
}

/* البطاقة (يمين) */
.mdd-pcard {
	position: sticky; top: calc(var(--mdd-header-h) + 16px);
	background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg);
	box-shadow: var(--mdd-shadow); overflow: hidden;
}
.admin-bar .mdd-pcard { top: calc(var(--mdd-header-h) + 48px); }
.mdd-pcard.is-static { position: static; }
.mdd-pcard-media { position: relative; aspect-ratio: 1; overflow: hidden; background: #F6F6F8; }
.mdd-pcard-media img { width: 100%; height: 100%; object-fit: cover; }
.mdd-pcard-media .mdd-badge { top: 12px; inset-inline-start: 12px; font-size: var(--mdd-fs-xs); padding: 3px 10px; }
.mdd-share {
	position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
	background: rgba(255, 255, 255, .9); color: #17171E; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4);
}
.mdd-share:hover { background: #fff; }
.mdd-pcard-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.mdd-pcard-cat { align-self: flex-start; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); }
.mdd-pcard-title { margin: -6px 0 0; font-size: clamp(19px, 17.435px + .4348vw, 23px); line-height: 1.4; }
.mdd-pcard-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: -4px; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }

.mdd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.mdd-facts > div { padding: 8px 12px; border-radius: var(--mdd-radius); background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); }
.mdd-facts dt { display: flex; align-items: center; gap: 6px; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-regular); }
.mdd-facts dt .mdd-icon { color: var(--mdd-accent-text); }
.mdd-facts dd { margin: 2px 0 0; font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); line-height: 1.5; }
.mdd-facts dd.is-in { color: var(--mdd-success); }
.mdd-facts dd.is-in::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.mdd-facts dd.is-out { color: var(--mdd-danger); }

.mdd-plans { margin: 0; padding: 0; border: 0; min-width: 0; }
.mdd-plans legend { padding: 0; margin-bottom: 8px; font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); }
.mdd-plan-list { display: grid; gap: 8px; }
.mdd-plan { position: relative; display: block; cursor: pointer; }
.mdd-plan input { position: absolute; opacity: 0; inset-inline-start: 14px; top: 50%; }
.mdd-plan-box {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; padding-inline-start: 42px;
	border: 1.5px solid var(--mdd-border); border-radius: var(--mdd-radius); background: var(--mdd-surface); transition: border-color .2s, background .2s;
	position: relative;
}
.mdd-plan-box::before {
	content: ""; position: absolute; inset-inline-start: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
	border-radius: 50%; border: 2px solid var(--mdd-border); background: var(--mdd-surface); transition: border-color .2s, box-shadow .2s;
}
.mdd-plan:hover .mdd-plan-box { border-color: color-mix(in srgb, var(--mdd-accent) 60%, var(--mdd-border)); }
.mdd-plan input:checked + .mdd-plan-box { border-color: var(--mdd-accent); background: color-mix(in srgb, var(--mdd-accent) 10%, var(--mdd-surface)); }
.mdd-plan input:checked + .mdd-plan-box::before { border-color: var(--mdd-accent); box-shadow: inset 0 0 0 4px var(--mdd-surface), inset 0 0 0 10px var(--mdd-accent); }
.mdd-plan input:focus-visible + .mdd-plan-box { outline: 3px solid var(--mdd-accent); outline-offset: 2px; }
.mdd-plan-name { display: flex; flex-direction: column; line-height: 1.4; }
.mdd-plan-name b { font-size: var(--mdd-fs-md); }
.mdd-plan-name small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-plan-price { display: flex; flex-direction: column; align-items: flex-end; font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); white-space: nowrap; line-height: 1.4; }
.mdd-plan-price del { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-regular); }

.mdd-pcard-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 2px; }
.mdd-pcard-price .mdd-old-price { font-size: var(--mdd-fs-base); }
.mdd-save { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mdd-success) 14%, var(--mdd-surface)); color: var(--mdd-success); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-bold); }
.mdd-pcard-body .mdd-btn + .mdd-btn { margin-top: -4px; }
.mdd-pcard-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.6; }
.mdd-pcard-note .mdd-icon { margin-top: 3px; color: var(--mdd-success); }
.mdd-notice { margin: 0; padding: 12px; border-radius: var(--mdd-radius); background: color-mix(in srgb, var(--mdd-danger) 10%, var(--mdd-surface)); color: var(--mdd-danger); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); }

/* الشرح (يسار) */
.mdd-pinfo { min-width: 0; }
.mdd-tablist { display: flex; gap: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--mdd-border); }
.mdd-pinfo:not(.is-tabbed) .mdd-tablist { display: none; }
.mdd-tab {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 0 12px; margin-bottom: -1px;
	border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
	font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); line-height: var(--mdd-lh-tight); color: var(--mdd-muted); cursor: pointer; transition: color .2s, border-color .2s;
}
.mdd-tab:hover { color: var(--mdd-text); }
.mdd-tab.is-active { border-color: var(--mdd-accent); color: var(--mdd-text); }
.mdd-tab-count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--mdd-surface-2); color: var(--mdd-muted); font-size: var(--mdd-fs-xs); line-height: 1.6; text-align: center; }
.mdd-panel {
	padding: clamp(16px, 12.087px + 1.087vw, 26px); background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg);
}
.mdd-pinfo:not(.is-tabbed) .mdd-panel + .mdd-panel { margin-top: 16px; }
.mdd-lead { max-width: 62ch; margin: 0 0 22px; color: var(--mdd-text); font-size: var(--mdd-fs-lg); font-weight: var(--mdd-fw-regular); line-height: 1.75; text-wrap: pretty; }
.mdd-block + .mdd-block { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--mdd-border); }
.mdd-block-title { display: flex; align-items: center; gap: 10px; font-size: var(--mdd-fs-lg); margin-bottom: 12px; }
.mdd-block-title::before { content: ""; flex-shrink: 0; width: 5px; height: 20px; border-radius: 3px; background: var(--mdd-accent); }
.mdd-checklist, .mdd-infolist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mdd-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mdd-checklist li, .mdd-infolist li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.7; }
.mdd-checklist .mdd-icon {
	width: 22px; height: 22px; padding: 4px; margin-top: 2px; border-radius: 50%;
	background: color-mix(in srgb, var(--mdd-success) 14%, var(--mdd-surface)); color: var(--mdd-success); stroke-width: 2.6;
}
.mdd-infolist .mdd-icon { width: 20px; height: 20px; margin-top: 3px; color: var(--mdd-accent-text); }
.mdd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: mdd-step; }
.mdd-steps li {
	position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; padding-top: 46px;
	border-radius: var(--mdd-radius-lg); background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); counter-increment: mdd-step;
}
.mdd-steps li::before {
	content: counter(mdd-step); position: absolute; top: 14px; inset-inline-start: 14px;
	display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
	background: var(--mdd-accent); color: var(--mdd-accent-ink); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-sm);
}
.mdd-steps b { font-size: var(--mdd-fs-md); line-height: 1.5; }
.mdd-steps span { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.6; }

/* محتوى المحرر */
.mdd-entry { color: var(--mdd-text); font-size: var(--mdd-fs-base); line-height: var(--mdd-lh-long); overflow-wrap: anywhere; }
.mdd-entry > *:last-child { margin-bottom: 0; }
.mdd-entry h2 { font-size: var(--mdd-fs-xl); margin-top: 1.4em; }
.mdd-entry h3 { font-size: var(--mdd-fs-lg); margin-top: 1.3em; }
.mdd-entry h4, .mdd-entry h5, .mdd-entry h6 { font-size: var(--mdd-fs-base); margin-top: 1.2em; }
.mdd-entry ul li::marker { color: var(--mdd-accent-text); }
.mdd-entry ol li::marker { color: var(--mdd-accent-text); font-weight: var(--mdd-fw-bold); }
.mdd-entry a { color: var(--mdd-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.mdd-entry img { border-radius: var(--mdd-radius); }
.mdd-entry blockquote { margin: 1.2em 0; padding: 14px 18px; border: 1px solid var(--mdd-border); background: var(--mdd-surface-2); border-radius: var(--mdd-radius); font-size: var(--mdd-fs-lg); }
.mdd-entry table { width: 100%; border-collapse: collapse; margin-bottom: 1em; font-size: var(--mdd-fs-md); }
.mdd-entry th, .mdd-entry td { padding: 8px 10px; border: 1px solid var(--mdd-border); }
.mdd-entry iframe { max-width: 100%; }
.mdd-panel .mdd-entry h3:first-child { margin-top: 0; }

/* التقييمات */
.mdd-rating-summary { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--mdd-border); }
.mdd-rating-score { text-align: center; }
.mdd-rating-score > b { display: block; font-size: clamp(34px, 30.087px + 1.087vw, 44px); line-height: 1; font-weight: var(--mdd-fw-heavy); }
.mdd-rating-score .mdd-stars { margin-top: 8px; }
.mdd-rating-score > span { display: block; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); margin-top: 4px; }
.mdd-rating-bars { display: grid; gap: 6px; }
.mdd-rating-bar { display: grid; grid-template-columns: 36px 1fr 28px; align-items: center; gap: 10px; font-size: var(--mdd-fs-sm); color: var(--mdd-muted); }
.mdd-bar { height: 8px; border-radius: 99px; background: var(--mdd-surface-2); overflow: hidden; border: 1px solid var(--mdd-border); }
.mdd-bar i { display: block; height: 100%; border-radius: 99px; background: var(--mdd-accent); }
.mdd-stars { display: inline-flex; gap: 1px; line-height: 1; }
.mdd-star { color: color-mix(in srgb, var(--mdd-muted) 35%, transparent); }
.mdd-star.is-on { color: #F2B200; }
.mdd-stars.is-sm { font-size: 14px; }
.mdd-stars.is-md { font-size: 18px; }

.mdd-review-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.mdd-review-list .children { list-style: none; margin: 10px 0 0; padding: 0; padding-inline-start: clamp(14px, 10.087px + 1.087vw, 24px); display: grid; gap: 10px; }
.mdd-review-card { padding: 14px 16px; border-radius: var(--mdd-radius-lg); background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); }
.mdd-review-head { display: flex; align-items: center; gap: 12px; }
.mdd-review-head .mdd-stars { margin-inline-start: auto; }
.mdd-avatar {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
	background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); color: var(--mdd-text); font-weight: var(--mdd-fw-bold); font-size: 16px; line-height: 1;
}
.mdd-avatar.is-lg { width: 56px; height: 56px; font-size: 22px; border: 3px solid var(--mdd-surface); box-shadow: var(--mdd-shadow); }
.mdd-review-who { display: flex; flex-direction: column; line-height: 1.4; }
.mdd-review-who b { font-size: var(--mdd-fs-md); }
.mdd-review-who time { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-review-body { margin-top: 10px; color: var(--mdd-text); }
.mdd-review-body p:last-child { margin-bottom: 0; }
.mdd-review-pending { margin: 8px 0 0; color: var(--mdd-accent-text); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); }
.comment-reply-link { display: inline-block; margin-top: 8px; color: var(--mdd-accent-text); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-bold); }
.mdd-no-reviews { color: var(--mdd-muted); }

.comment-respond { margin-top: 10px; padding: clamp(14px, 11.652px + .6522vw, 20px); border-radius: var(--mdd-radius-lg); border: 1.5px dashed color-mix(in srgb, var(--mdd-accent) 55%, var(--mdd-border)); }
.comment-reply-title { font-size: var(--mdd-fs-lg); margin-bottom: 10px; }
.comment-reply-title small { margin-inline-start: 10px; font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); }
.comment-form p { margin-bottom: 12px; }
.comment-form label { display: block; margin-bottom: 4px; font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 10px 14px; border-radius: var(--mdd-radius); border: 1.5px solid var(--mdd-border); background: var(--mdd-surface); color: var(--mdd-text); font-size: 16px; line-height: 1.6;
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--mdd-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdd-accent) 22%, transparent); }
.comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--mdd-fs-sm); }
.comment-form-cookies-consent label { font-weight: var(--mdd-fw-regular); display: inline; }
.comment-notes, .logged-in-as { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.form-submit { margin: 0; }
.mdd-rating-field { margin-bottom: 12px; }
.mdd-rating-label { display: block; font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); margin-bottom: 4px; }
.mdd-rating-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border-radius: 10px; }
.mdd-rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mdd-rating-input label { margin: 0; cursor: pointer; color: color-mix(in srgb, var(--mdd-muted) 40%, transparent); transition: color .15s, transform .15s; }
.mdd-rating-input label .mdd-icon { fill: currentColor; }
.mdd-rating-input label:hover, .mdd-rating-input label:hover ~ label,
.mdd-rating-input input:checked ~ label { color: #F2B200; }
.mdd-rating-input input:focus-visible + label { outline: 3px solid var(--mdd-accent); outline-offset: 2px; border-radius: 6px; }
.mdd-rating-input.is-invalid { outline: 2px solid var(--mdd-danger); outline-offset: 4px; }

.mdd-related { padding-top: 12px; }

/* شريط الطلب الثابت */
.mdd-orderbar {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 55; padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--mdd-surface); border-top: 1px solid var(--mdd-border); box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .3);
	transform: translateY(110%); transition: transform .3s ease;
}
.mdd-orderbar.is-visible { transform: none; }
.mdd-has-orderbar .mdd-footer { padding-bottom: 72px; }
.mdd-orderbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; }
.mdd-orderbar-product { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mdd-orderbar-product img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.mdd-orderbar-product > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mdd-orderbar-product b { font-size: var(--mdd-fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdd-orderbar-product .mdd-amount-num { font-size: var(--mdd-fs-base); }
.mdd-orderbar-product small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-orderbar .mdd-btn { flex-shrink: 0; }

/* ==========================================================================
   12. آراء العملاء والأسئلة
   ========================================================================== */
.mdd-testimonials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 18px; padding-top: 30px; }
.mdd-testimonial {
	position: relative; margin: 0; padding: 38px 18px 18px; text-align: center;
	background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg);
}
.mdd-testimonial .mdd-avatar { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); }
.mdd-testimonial::before { content: "“"; position: absolute; top: 6px; inset-inline-start: 14px; font-size: 44px; line-height: 1; color: var(--mdd-border); font-family: Georgia, serif; }
.mdd-testimonial figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mdd-testimonial figcaption b { font-size: var(--mdd-fs-base); }
.mdd-testimonial blockquote { margin: 10px 0 8px; color: var(--mdd-muted); font-size: var(--mdd-fs-md); line-height: 1.75; }
.mdd-testimonial-product { color: var(--mdd-accent-text); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); }

.mdd-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.mdd-faq-item { background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); overflow: hidden; }
.mdd-faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
	font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-base); line-height: 1.5; cursor: pointer; list-style: none;
}
.mdd-faq-item summary::-webkit-details-marker { display: none; }
.mdd-faq-item summary .mdd-icon { color: var(--mdd-accent-text); transition: transform .25s; }
.mdd-faq-item[open] summary .mdd-icon { transform: rotate(180deg); }
.mdd-faq-item[open] summary { border-bottom: 1px dashed var(--mdd-border); }
.mdd-faq-answer { padding: 12px 18px 16px; color: var(--mdd-muted); line-height: 1.8; }
.mdd-faq-answer > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   13. الصفحات والمدونة
   ========================================================================== */
.mdd-page { padding-top: clamp(18px, 14.87px + .8696vw, 26px); padding-bottom: clamp(28px, 23.304px + 1.3043vw, 40px); max-width: 900px; }
.mdd-article { padding: clamp(18px, 12.522px + 1.5217vw, 32px); background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); }
.mdd-article-title { font-size: var(--mdd-fs-3xl); }
.mdd-article-meta { display: flex; gap: 12px; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); margin: -4px 0 16px; }
.mdd-article-media { margin: 0 0 18px; }
.mdd-article-media img { border-radius: var(--mdd-radius); width: 100%; }
.mdd-article-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.mdd-article-tags a { padding: 3px 12px; border-radius: 999px; background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); }
.mdd-page .comments-area, .mdd-page .mdd-comments { margin-top: 22px; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.post-navigation a { display: block; padding: 12px 16px; border-radius: var(--mdd-radius); background: var(--mdd-surface); border: 1px solid var(--mdd-border); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); }
.post-navigation a span { display: block; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-regular); }
.mdd-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mdd-post-card { padding: 16px; background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); }
.mdd-post-card-media { display: block; margin: -16px -16px 14px; }
.mdd-post-card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--mdd-radius-lg) var(--mdd-radius-lg) 0 0; }
.mdd-post-card h2 { font-size: var(--mdd-fs-lg); margin-bottom: 4px; }
.mdd-post-card time { display: block; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); margin-bottom: 8px; }
.mdd-post-card p { color: var(--mdd-muted); font-size: var(--mdd-fs-md); }

.mdd-404 { padding: clamp(40px, 29.043px + 3.0435vw, 68px) 20px; text-align: center; }
.mdd-404-code {
	display: block; font-size: clamp(72px, 50.087px + 6.087vw, 128px); font-weight: var(--mdd-fw-heavy); line-height: 1;
	color: var(--mdd-accent-text); letter-spacing: -.03em;
}
.mdd-404 h1 { margin-top: 12px; font-size: var(--mdd-fs-2xl); }
.mdd-404 p { color: var(--mdd-muted); }
.mdd-404 .mdd-search { margin-bottom: 18px; }

.alignleft { float: left; margin: 0 1.2em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.2em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); text-align: center; }
.sticky, .gallery-caption, .bypostauthor { outline: 0; }

/* ==========================================================================
   14. التذييل
   ========================================================================== */
.mdd-footer { margin-top: clamp(28px, 22.522px + 1.5217vw, 42px); background: var(--mdd-surface); border-top: 1px solid var(--mdd-border); }
.mdd-backtop-row { display: flex; justify-content: center; transform: translateY(-50%); }
.mdd-backtop {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; cursor: pointer;
	background: var(--mdd-surface); border: 1px solid var(--mdd-border); box-shadow: var(--mdd-shadow-sm); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-sm); line-height: 1.5; color: var(--mdd-text);
}
.mdd-backtop:hover { border-color: var(--mdd-accent); }
.mdd-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: clamp(20px, 15.304px + 1.3043vw, 32px); padding-top: 8px; padding-bottom: 24px; }
.mdd-footer-about p { margin: 12px 0; color: var(--mdd-muted); font-size: var(--mdd-fs-md); line-height: 1.8; }
.mdd-footer-title { font-size: var(--mdd-fs-base); margin-bottom: 12px; color: var(--mdd-accent-text); }
.mdd-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mdd-footer-list a { color: var(--mdd-muted); font-size: var(--mdd-fs-md); line-height: 1.5; }
.mdd-footer-list a:hover { color: var(--mdd-accent-text); }
.mdd-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mdd-social a {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--mdd-radius);
	border: 1px solid var(--mdd-border); background: var(--mdd-surface-2); color: var(--mdd-text); transition: background .2s, border-color .2s;
}
.mdd-social a:hover { background: var(--mdd-accent); border-color: var(--mdd-accent); color: var(--mdd-accent-ink); }
.mdd-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mdd-contact-list a { display: inline-flex; align-items: center; gap: 10px; color: var(--mdd-muted); font-size: var(--mdd-fs-md); }
.mdd-contact-list a:hover { color: var(--mdd-text); }
.mdd-contact-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
	border: 1px solid var(--mdd-border); background: var(--mdd-surface-2); color: var(--mdd-text);
}
.mdd-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 14px; padding-bottom: 18px; border-top: 1px solid var(--mdd-border); color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-footer-bottom p { margin: 0; }
.mdd-footer.is-compact .mdd-footer-bottom { border-top: 0; }
.mdd-footer-inline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.mdd-footer-inline a { color: var(--mdd-muted); }
.mdd-footer-inline a:hover { color: var(--mdd-text); }

.mdd-wa-float {
	position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 18px; z-index: 50;
	display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%;
	background: var(--mdd-wa); color: #fff; box-shadow: 0 12px 26px -10px rgba(30, 158, 80, .7);
	animation: mdd-pulse 2.4s ease-out 4;
}
.mdd-wa-float svg { width: 26px; height: 26px; }
.mdd-wa-float:hover { color: #fff; background: var(--mdd-wa-hover); }
@keyframes mdd-pulse {
	0% { box-shadow: 0 0 0 0 rgba(30, 158, 80, .45); }
	70% { box-shadow: 0 0 0 14px rgba(30, 158, 80, 0); }
	100% { box-shadow: 0 0 0 0 rgba(30, 158, 80, 0); }
}

.mdd-toast {
	position: fixed; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 100; transform: translate(-50%, 20px); opacity: 0;
	padding: 10px 18px; border-radius: var(--mdd-radius); background: #17171E; color: #fff; font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md);
	transition: opacity .25s, transform .25s;
}
.mdd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   16. الترويسة: الحساب والوضع الليلي
   ========================================================================== */
.mdd-account-btn { gap: 6px; font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); color: var(--mdd-text); }
.mdd-account-btn:hover { color: var(--mdd-text); }
.mdd-account-btn.is-in { padding-inline: 4px 12px; border: 1px solid var(--mdd-border); border-radius: 999px; }
.mdd-avatar.is-sm { width: 30px; height: 30px; font-size: 13px; }
.mdd-account-name { max-width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mdd-when-dark { display: none; }
.mdd-scheme-dark .mdd-when-dark { display: inline-flex; }
.mdd-scheme-dark .mdd-when-light { display: none; }
.mdd-when-light, .mdd-when-dark { align-items: center; gap: 8px; }
.mdd-nav-extra { display: none; }
.mdd-flash { background: color-mix(in srgb, var(--mdd-success) 12%, var(--mdd-surface)); border-bottom: 1px solid color-mix(in srgb, var(--mdd-success) 30%, var(--mdd-border)); color: var(--mdd-text); }
.mdd-flash .mdd-container { display: flex; align-items: center; gap: 8px; padding-block: 10px; font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); }
.mdd-flash .mdd-icon { color: var(--mdd-success); }

/* ==========================================================================
   17. شريط عنوان القسم (كما في هوية المتجر)
   ========================================================================== */
.mdd-shelf { padding: clamp(16px, 11.304px + 1.3043vw, 28px) 0 clamp(8px, 4.087px + 1.087vw, 18px); }
.mdd-pill { max-width: 1120px; margin: clamp(12px, 9.652px + .6522vw, 18px) auto 0; }
.mdd-pill-bar {
	position: relative; display: flex; align-items: center; min-height: 50px;
	padding-block: 4px; padding-inline: clamp(16px, 4%, 40px) 24%;
	border-radius: var(--mdd-radius-lg); isolation: isolate;
	background: var(--mdd-surface-2); border: 1px solid var(--mdd-border);
}
.mdd-pill-texture {
	position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden;
	background-size: 60% auto; background-position: 45% 50%; background-repeat: no-repeat;
	opacity: .08; mix-blend-mode: luminosity; filter: blur(1px) saturate(.6);
	-webkit-mask-image: linear-gradient(to left, transparent 8%, #000 35%, #000 60%, transparent 85%);
	mask-image: linear-gradient(to left, transparent 8%, #000 35%, #000 60%, transparent 85%);
}
.mdd-pill-title {
	margin: 0; color: var(--mdd-text); font-size: clamp(17px, 15.435px + .4348vw, 21px); font-weight: var(--mdd-fw-heavy); line-height: 1.2;
	letter-spacing: 0; text-wrap: balance;
}
.mdd-pill-art {
	position: absolute; inset-inline-end: 4%; bottom: 6%; width: auto; height: 116%; aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center; pointer-events: none;
}
/* مقاس واحد ثابت لرسم الشريط: الصورة والرسم الشفاف يملآن المربع نفسه. */
.mdd-pill-art img { width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(20, 20, 35, .18)); }
.mdd-pill-art.is-photo img { object-fit: cover; border-radius: 20%; border: 2.5px solid var(--mdd-surface); filter: none; }

/* ==========================================================================
   18. عرض البطاقات: القبّة والملصق
   أعمدة ثابتة لكل شاشة (6 ← 5 ← 4 ← 3 ← 2) بدل المسافات الضخمة.
   ========================================================================== */
.mdd-showcase {
	--mdd-cols: 6; --mdd-gap-x: 24px;
	display: flex; flex-wrap: wrap; justify-content: center;
	max-width: 1120px; margin: clamp(16px, 10.522px + 1.5217vw, 30px) auto 0; padding: 0;
	gap: clamp(20px, 16.087px + 1.087vw, 30px) var(--mdd-gap-x);
}
.mdd-showcase > * { flex: 0 1 calc((100% - (var(--mdd-cols) - 1) * var(--mdd-gap-x)) / var(--mdd-cols) - .1px); min-width: 0; }
.mdd-stretch { color: inherit; }
.mdd-stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.mdd-stretch:focus-visible { outline: none; }
.mdd-stretch:focus-visible::after { outline: 3px solid var(--mdd-accent); outline-offset: 4px; }

/* القبّة */
.mdd-arch { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 20px; }
.mdd-arch-media { position: relative; width: 100%; padding-top: 11%; }
.mdd-arch-dome {
	position: relative; display: block; width: 100%; aspect-ratio: 1.36;
	border-radius: 48% 48% 16px 16px / 64% 64% 16px 16px;
	background:
		radial-gradient(120% 90% at 50% 105%, var(--mdd-plum-2) 0%, color-mix(in srgb, var(--mdd-plum-2) 55%, var(--mdd-plum-1)) 45%, var(--mdd-plum-1) 78%);
	box-shadow: inset 0 -10px 22px -14px rgba(255, 255, 255, .08), 0 10px 20px -14px var(--mdd-glow);
}
.mdd-arch-dome::before {
	content: ""; position: absolute; inset: -6px; z-index: -1;
	border: 1.5px solid color-mix(in srgb, var(--mdd-ring) 80%, transparent); border-radius: inherit;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 98%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 98%);
}
.mdd-arch-icon {
	position: absolute; top: 0; left: 50%; width: 68%; aspect-ratio: 1; transform: translateX(-50%);
	border-radius: 23%; overflow: hidden; background: #fff;
	box-shadow: 0 16px 24px -14px rgba(12, 4, 30, .7), 0 0 0 1px rgba(255, 255, 255, .08);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.mdd-arch-icon img { width: 100%; height: 100%; object-fit: cover; }
.mdd-arch-flag {
	position: absolute; z-index: 2; bottom: 8px; left: 50%; transform: translateX(-50%); max-width: 92%;
	padding: 1px 10px; border-radius: 999px; background: rgba(12, 6, 30, .82); color: #fff;
	font-size: 11.5px; font-weight: var(--mdd-fw-bold); line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mdd-arch-flag.is-badge { background: var(--mdd-accent); color: var(--mdd-accent-ink); }
.mdd-arch.is-out .mdd-arch-icon img { filter: grayscale(.85); }
.mdd-arch-name { margin: 14px 0 0; font-size: clamp(13px, 12.217px + .2174vw, 15px); font-weight: var(--mdd-fw-bold); line-height: 1.4; color: var(--mdd-text); }
.mdd-arch-name a:hover { color: var(--mdd-text); }
.mdd-arch-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0 0; }

/* الملصق */
.mdd-showcase.is-poster {
	--mdd-cols: 4; --mdd-gap-x: 20px;
	max-width: 1180px; margin-top: clamp(40px, 32.957px + 1.9565vw, 58px); row-gap: clamp(44px, 37.739px + 1.7391vw, 60px);
}
.mdd-poster { position: relative; display: flex; flex-direction: column; border-radius: var(--mdd-radius-lg); }
.mdd-poster-screen {
	position: relative; display: block; aspect-ratio: 2 / 1; border-radius: var(--mdd-radius-lg) var(--mdd-radius-lg) 0 0;
	background: var(--mdd-screen); overflow: visible;
}
.mdd-poster-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: .22; filter: saturate(.7) blur(1.5px); }
.mdd-poster-bg.is-cover { opacity: .3; filter: saturate(.8); }
.mdd-poster-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(11, 14, 36, .2), rgba(11, 14, 36, .78)); }
.mdd-poster-icon {
	position: absolute; z-index: 2; top: 0; left: 50%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -40%);
	border: 3px solid var(--mdd-marquee); border-radius: 24%; overflow: hidden; background: var(--mdd-screen);
	box-shadow: 0 14px 22px -12px rgba(0, 0, 0, .5);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.mdd-poster-icon img { width: 100%; height: 100%; object-fit: cover; }
.mdd-poster-top { position: relative; }
.mdd-poster-flag { padding: 1px 10px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11.5px; font-weight: var(--mdd-fw-medium); line-height: 1.6; white-space: nowrap; }
.mdd-poster.is-out .mdd-poster-icon img { filter: grayscale(.85); }
.mdd-poster-meta { position: absolute; z-index: 2; bottom: 8px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; margin: 0; pointer-events: none; }
.mdd-poster.is-out .mdd-poster-meta { justify-content: center; }
.mdd-poster-name {
	margin: 0; padding: 9px 12px 10px; border-radius: 0 0 var(--mdd-radius-lg) var(--mdd-radius-lg);
	background: var(--mdd-marquee); color: var(--mdd-marquee-ink);
	font-size: clamp(13px, 11.826px + .3261vw, 16px); font-weight: var(--mdd-fw-bold); line-height: 1.35; text-align: center;
	box-shadow: 0 10px 20px -16px rgba(255, 170, 0, .8);
}
.mdd-poster-name a:hover { color: var(--mdd-marquee-ink); }

/* شارات التقييم والسعر */
.mdd-rate, .mdd-pricechip {
	display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px;
	background: var(--mdd-surface); border: 1px solid var(--mdd-border); color: var(--mdd-text);
	font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); line-height: 1.7; white-space: nowrap;
}
.mdd-rate small { color: var(--mdd-muted); font-weight: var(--mdd-fw-regular); font-size: 11px; }
.mdd-rate-star { color: #F2B200; }
.mdd-rate.is-dark, .mdd-pricechip.is-dark { background: rgba(10, 12, 30, .72); border-color: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(4px); }
.mdd-rate.is-dark small { color: rgba(255, 255, 255, .7); }
.mdd-pricechip { font-weight: var(--mdd-fw-bold); background: color-mix(in srgb, var(--mdd-accent) 16%, var(--mdd-surface)); border-color: color-mix(in srgb, var(--mdd-accent) 40%, var(--mdd-border)); }

.mdd-more { margin: clamp(18px, 14.087px + 1.087vw, 28px) 0 0; text-align: center; }
.mdd-more-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; background: var(--mdd-surface); border: 1px solid var(--mdd-border); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-sm); line-height: 1.5; color: var(--mdd-text); }
.mdd-more-link:hover { border-color: var(--mdd-accent); color: var(--mdd-text); }
.mdd-more-link .mdd-icon { color: var(--mdd-accent-text); }

/* ==========================================================================
   18ب. العرض الدوّار: بطاقات موزعة على دائرة، تُسحب يميناً ويساراً وتدور بلا نهاية
   (موضع كل بطاقة من المتغيرين --a البعد و--s الجهة؛ يحدّثهما theme.js أثناء السحب)
   ========================================================================== */
.mdd-carousel {
	--mdd-cc-w: min(62vw, 268px);
	--mdd-cc-step1: 70%;
	--mdd-cc-step2: 46%;
	--mdd-cc-tilt: -24deg;
	position: relative; max-width: 1120px; margin: clamp(16px, 12.087px + 1.087vw, 26px) auto 0; padding: 12px 0 4px; overflow: hidden;
}
.mdd-carousel-stage {
	display: grid; justify-content: center; align-items: start; perspective: 1100px;
	touch-action: pan-y; -webkit-user-select: none; user-select: none; outline: none; cursor: grab;
}
.mdd-carousel.is-single .mdd-carousel-stage { cursor: auto; }
.mdd-carousel.is-dragging .mdd-carousel-stage { cursor: grabbing; }
.mdd-carousel-stage:focus-visible { outline: 3px solid var(--mdd-accent); outline-offset: -3px; border-radius: var(--mdd-radius-lg); }
.mdd-cc {
	--a: 0; --s: 0;
	grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; width: var(--mdd-cc-w);
	border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); overflow: hidden;
	box-shadow: 0 18px 34px -24px rgba(20, 20, 35, .5);
	transform:
		translateX(calc(var(--s) * (min(var(--a), 1) * var(--mdd-cc-step1) + max(var(--a) - 1, 0) * var(--mdd-cc-step2))))
		translateZ(calc(var(--a) * -120px))
		rotateY(calc(var(--s) * min(var(--a), 2) * var(--mdd-cc-tilt)))
		scale(calc(1 - min(var(--a), 2.5) * .1));
	opacity: clamp(0, calc(1 - (var(--a) - 1) * .5), 1);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s, border-color .3s, box-shadow .3s;
	backface-visibility: hidden;
}
.mdd-carousel.is-dragging .mdd-cc { transition: border-color .3s, box-shadow .3s; }
.mdd-cc.is-active { border-color: color-mix(in srgb, var(--mdd-accent) 75%, var(--mdd-border)); box-shadow: 0 22px 40px -24px rgba(20, 20, 35, .55), 0 0 0 3px color-mix(in srgb, var(--mdd-accent) 22%, transparent); }
.mdd-cc.is-far { pointer-events: none; }
.mdd-cc-media { position: relative; aspect-ratio: 1; background: #F6F6F8; }
.mdd-cc-media img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.mdd-cc.is-out .mdd-cc-media img { filter: grayscale(.85); }
.mdd-cc-badge {
	position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; max-width: calc(100% - 70px);
	padding: 2px 10px; border-radius: 999px; background: var(--mdd-accent); color: var(--mdd-accent-ink);
	font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-bold); line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4);
}
.mdd-cc-badge.is-out { background: rgba(12, 6, 30, .82); color: #fff; }
.mdd-cc-off {
	position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; padding: 2px 8px; border-radius: 6px;
	background: var(--mdd-badge); color: #fff; font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-bold); line-height: 1.6;
}
.mdd-cc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; text-align: center; }
.mdd-cc-name { margin: 0; font-size: var(--mdd-fs-base); font-weight: var(--mdd-fw-bold); line-height: 1.4; color: var(--mdd-text); }
.mdd-cc-name a:hover { color: var(--mdd-text); }
.mdd-cc-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); line-height: 1.6; }
.mdd-cc-rate { color: var(--mdd-text); font-weight: var(--mdd-fw-medium); }
.mdd-cc-rate span { color: #F2B200; }
.mdd-cc-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; }
.mdd-cc-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 6px; font-weight: var(--mdd-fw-bold); }
.mdd-cc-price small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-regular); }
.mdd-cc-cta { position: relative; z-index: 4; }
.mdd-carousel-nav { display: none; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.mdd-carousel.is-ready .mdd-carousel-nav { display: flex; }
.mdd-carousel-btn {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
	border: 1px solid var(--mdd-border); border-radius: 50%; background: var(--mdd-surface); color: var(--mdd-text); cursor: pointer; box-shadow: var(--mdd-shadow-sm);
	transition: border-color .2s, background .2s;
}
.mdd-carousel-btn:hover { border-color: var(--mdd-accent); background: color-mix(in srgb, var(--mdd-accent) 12%, var(--mdd-surface)); }
.mdd-carousel-prev .mdd-icon { transform: scaleX(-1); }
.mdd-carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; max-width: 60%; }
.mdd-carousel-dot { position: relative; width: 20px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.mdd-carousel-dot::before {
	content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px;
	background: color-mix(in srgb, var(--mdd-muted) 38%, transparent); transition: width .25s, margin .25s, background .25s;
}
.mdd-carousel-dot.is-active::before { width: 18px; margin-left: -9px; background: var(--mdd-accent); }

/* ==========================================================================
   19. قسم السيرة الذاتية في الرئيسية
   ========================================================================== */
.mdd-cvhome { padding: clamp(28px, 21.739px + 1.7391vw, 44px) 0 clamp(20px, 14.522px + 1.5217vw, 34px); }
/* قسم السيرة: رسم الشريط بالمربع الثابت نفسه لكل الأقسام. */
.mdd-cvhome-lead { max-width: 640px; margin: clamp(16px, 12.87px + .8696vw, 24px) auto 0; color: var(--mdd-muted); font-size: var(--mdd-fs-base); line-height: 1.8; text-align: center; }
.mdd-cvs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: clamp(18px, 14.087px + 1.087vw, 28px) auto 0; }
.mdd-cvs { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: clamp(16px, 13.652px + .6522vw, 22px); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); }
.mdd-cvs-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: radial-gradient(120% 120% at 50% 100%, var(--mdd-plum-2), var(--mdd-plum-1)); color: var(--mdd-marquee); box-shadow: 0 10px 18px -12px rgba(20, 20, 30, .5); }
.mdd-cvs-title { margin: 0; font-size: var(--mdd-fs-lg); }
.mdd-cvs-title a { color: var(--mdd-text); }
.mdd-cvs-text { margin: 6px 0 0; color: var(--mdd-muted); font-size: var(--mdd-fs-md); line-height: 1.75; }
.mdd-cvs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.mdd-cvs-price { display: inline-flex; align-items: baseline; gap: 6px; }
.mdd-cvs-price .mdd-amount-num { font-size: var(--mdd-fs-xl); }
.mdd-cvs-price small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-regular); }
.mdd-cvs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

.mdd-rail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; max-width: 1120px; margin: clamp(28px, 24.087px + 1.087vw, 38px) auto 0; }
.mdd-rail-title { margin: 0; font-size: var(--mdd-fs-lg); }
.mdd-rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: 160px; gap: 16px;
	max-width: 1120px; margin: 16px auto 0; padding: 6px 4px 18px; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--mdd-muted) 40%, transparent) transparent;
	-webkit-mask-image: linear-gradient(to left, #000 92%, transparent); mask-image: linear-gradient(to left, #000 92%, transparent);
}
.mdd-rail:focus-visible { outline: 3px solid var(--mdd-accent); outline-offset: 2px; }
.mdd-rail-item { display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; color: var(--mdd-text); text-align: center; }
.mdd-rail-item:hover { color: var(--mdd-text); }
.mdd-rail-name { font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-sm); line-height: 1.4; }
.mdd-sheet {
	position: relative; display: block; width: 100%; aspect-ratio: 210 / 297; overflow: hidden;
	border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(20, 20, 35, .08), 0 12px 22px -16px rgba(20, 20, 35, .4);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.mdd-sheet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(20, 20, 35, .06); pointer-events: none; }
.mdd-sheet .cv-scaled, .mdd-sheet .cv-scale-box { width: 100%; }

.mdd-cvsteps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1120px; margin: clamp(22px, 18.87px + .8696vw, 30px) auto 0; padding: 0; counter-reset: mdd-cvstep; }
.mdd-cvsteps li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px; padding-inline-start: 52px; border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); border: 1px solid var(--mdd-border); counter-increment: mdd-cvstep; }
.mdd-cvsteps li::before {
	content: counter(mdd-cvstep); position: absolute; top: 14px; inset-inline-start: 14px;
	display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--mdd-plum-1); color: var(--mdd-marquee); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-sm);
}
.mdd-cvsteps b { font-size: var(--mdd-fs-md); line-height: 1.5; }
.mdd-cvsteps span { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.6; }

/* ==========================================================================
   19ب. الخدمات الإضافية (أسفل الرئيسية، بتصميم مختلف عن الاشتراكات)
   ========================================================================== */
.mdd-svc-shelf { padding-top: clamp(20px, 15.304px + 1.3043vw, 32px); padding-bottom: clamp(8px, 5.652px + .6522vw, 14px); }
.mdd-svc-panel {
	max-width: 1120px; margin: 0 auto; padding: clamp(14px, 8.522px + 1.5217vw, 28px);
	border-radius: var(--mdd-radius-xl); color: #fff;
	background: radial-gradient(120% 140% at 88% 0%, var(--mdd-plum-2) 0%, var(--mdd-plum-1) 70%);
	box-shadow: 0 22px 44px -30px rgba(20, 20, 30, .5);
}
.mdd-svc-head { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(14px, 11.652px + .6522vw, 20px); }
.mdd-svc-head-art { flex: none; width: 50px; height: 50px; border-radius: 15px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .85); transform: rotate(-5deg); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6); }
.mdd-svc-head-art img { width: 100%; height: 100%; object-fit: cover; }
.mdd-svc-head-text { flex: 1; min-width: 0; }
.mdd-svc-title { margin: 0; color: #fff; font-size: var(--mdd-fs-xl); font-weight: var(--mdd-fw-bold); line-height: 1.35; }
.mdd-svc-head-text p { margin: 2px 0 0; color: rgba(255, 255, 255, .78); font-size: var(--mdd-fs-sm); line-height: 1.6; }
.mdd-svc-all {
	flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
	background: var(--mdd-accent); color: var(--mdd-accent-ink); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-bold); line-height: 1.5;
}
.mdd-svc-all:hover { color: var(--mdd-accent-ink); filter: brightness(.96); }
.mdd-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mdd-svc {
	position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: stretch;
	padding: 14px; border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); color: var(--mdd-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12); transition: transform .25s, box-shadow .25s;
}
.mdd-svc-media { display: block; align-self: start; width: 76px; height: 76px; border-radius: 16px; overflow: hidden; background: #F6F6F8; }
.mdd-svc-media img { width: 100%; height: 100%; object-fit: cover; }
.mdd-svc.is-out .mdd-svc-media img { filter: grayscale(.85); }
.mdd-svc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mdd-svc-badge {
	padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--mdd-accent) 20%, var(--mdd-surface)); color: var(--mdd-accent-text);
	font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); line-height: 1.7;
}
.mdd-svc-badge.is-out { background: color-mix(in srgb, var(--mdd-danger) 12%, var(--mdd-surface)); color: var(--mdd-danger); }
.mdd-svc-name { margin: 0; font-size: var(--mdd-fs-base); font-weight: var(--mdd-fw-bold); line-height: 1.4; color: var(--mdd-text); }
.mdd-svc-name a:hover { color: var(--mdd-text); }
.mdd-svc-desc {
	margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.6;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mdd-svc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; margin-top: auto; padding-top: 6px; }
.mdd-svc-price { display: inline-flex; align-items: baseline; gap: 4px; font-weight: var(--mdd-fw-bold); }
.mdd-svc-price small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-regular); }
.mdd-svc-cta { position: relative; z-index: 4; margin-inline-start: auto; }
@media (hover: hover) {
	.mdd-svc:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .55); }
}
@media (max-width: 760px) {
	.mdd-svc-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
	.mdd-svc-head { flex-wrap: wrap; gap: 10px 12px; }
	.mdd-svc-head-art { width: 44px; height: 44px; border-radius: 13px; }
	.mdd-svc-all { order: 3; }
	.mdd-svc { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
	.mdd-svc-media { width: 64px; height: 64px; border-radius: 14px; }
}

/* ==========================================================================
   تأثيرات المؤشر (للأجهزة التي تدعم التمرير فقط، لا تعلق على شاشات اللمس)
   ========================================================================== */
@media (hover: hover) {
	.mdd-cat-tile:hover { transform: translateY(-3px); border-color: var(--mdd-accent); box-shadow: var(--mdd-shadow); }
	.mdd-cat-tile:hover .mdd-cat-tile-img img { transform: scale(1.05); }
	.mdd-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mdd-accent) 70%, var(--mdd-border)); box-shadow: var(--mdd-shadow); }
	.mdd-card:hover .mdd-card-media img { transform: scale(1.04); }
	.mdd-arch:hover .mdd-arch-icon { transform: translate(-50%, -4px); }
	.mdd-poster:hover .mdd-poster-icon { transform: translate(-50%, calc(-40% - 4px)); }
	.mdd-rail-item:hover .mdd-sheet { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20, 20, 35, .08), 0 20px 30px -18px rgba(20, 20, 35, .5); }
}
.mdd-cat-tile:hover { color: var(--mdd-text); }
.mdd-cat-tile:focus-visible { border-color: var(--mdd-accent); }
.mdd-arch:focus-within .mdd-arch-icon { transform: translate(-50%, -4px); }
.mdd-poster:focus-within .mdd-poster-icon { transform: translate(-50%, calc(-40% - 4px)); }
.mdd-rail-item:focus-visible .mdd-sheet { transform: translateY(-4px); }

/* ==========================================================================
   15. الاستجابة للشاشات
   ========================================================================== */
@media (max-width: 1100px) {
	.mdd-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mdd-product { grid-template-columns: minmax(0, 350px) minmax(0, 1fr); }
	.mdd-checklist { grid-template-columns: minmax(0, 1fr); }
	.mdd-showcase { --mdd-cols: 5; }
	.mdd-showcase.is-poster { --mdd-cols: 3; }
}

@media (max-width: 960px) {
	.mdd-nav-toggle { display: inline-flex; order: -1; margin-inline-start: -6px; }
	.mdd-nav-toggle-text { display: none; }
	.mdd-header-row { gap: 6px; }
	.mdd-nav {
		position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 80; width: min(86vw, 330px);
		background: var(--mdd-surface); box-shadow: var(--mdd-shadow); padding: 14px 16px 28px; overflow-y: auto;
		transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s;
	}
	.mdd-nav.is-open { transform: none; visibility: visible; }
	.admin-bar .mdd-nav { top: 46px; }
	.mdd-nav-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--mdd-border); }
	.mdd-nav-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(10, 10, 18, .45); }
	.mdd-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.mdd-menu > li { display: flex; flex-wrap: wrap; align-items: center; }
	.mdd-menu > li > a { flex: 1; padding: 11px 12px; font-size: var(--mdd-fs-base); }
	.mdd-menu .menu-item-has-children > a::after { display: none; }
	.mdd-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--mdd-surface-2); cursor: pointer; color: var(--mdd-text); }
	.mdd-menu li.is-open > .mdd-submenu-toggle svg { transform: rotate(180deg); }
	.mdd-menu .sub-menu { position: static; display: none; width: 100%; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-inline-start: 2px solid var(--mdd-accent); border-radius: 0; margin: 2px 12px 8px; padding: 0 6px; background: transparent; }
	.mdd-menu .sub-menu a { font-size: var(--mdd-fs-md); font-weight: var(--mdd-fw-regular); color: var(--mdd-muted); padding: 8px 10px; }
	.mdd-menu li.is-open > .sub-menu { display: block; }
	.mdd-header-wa span { display: none; }
	.mdd-header-wa { width: 40px; min-height: 40px; padding: 0; border-radius: var(--mdd-radius); }

	.mdd-hero-inner { grid-template-columns: minmax(0, 1fr); }
	.mdd-hero-art { display: none; }
	.mdd-product { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
	.mdd-pcard-body { padding: 14px 14px 16px; }
	.mdd-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mdd-testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
}

@media (max-width: 782px) {
	.admin-bar .mdd-header { top: 0; }
}

@media (max-width: 760px) {
	.mdd-product { grid-template-columns: minmax(0, 1fr); }
	.mdd-pcard { position: static; }
	.mdd-pcard-media { aspect-ratio: 1; }
	.mdd-has-orderbar .mdd-footer { padding-bottom: 70px; }
}

@media (max-width: 960px) {
	.mdd-catbar a { height: 36px; font-size: var(--mdd-fs-sm); padding-inline: 4px 14px; }
	.mdd-catbar img { width: 26px; height: 26px; }
}

@media (max-width: 640px) {
	.mdd-topbar { font-size: var(--mdd-fs-xs); padding-block: 6px; }
	.mdd-catbar ul { padding-block: 7px; }
	.mdd-badge { top: 7px; inset-inline-start: 7px; font-size: 11px; padding: 1px 6px; }
	.mdd-discount { top: 7px; inset-inline-end: 7px; font-size: 11px; padding: 1px 6px; }
	.mdd-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.mdd-cat-tile { padding: 8px 6px 10px; border-radius: 14px; gap: 6px; }
	.mdd-cat-tile-img { border-radius: 10px; }
	.mdd-cat-tile-name { font-size: 12.5px; }
	.mdd-cat-tile-count { font-size: 11px; }
	.mdd-banner { min-height: 0; padding: 12px 14px; gap: 12px; border-radius: 20px; flex-wrap: wrap; }
	.mdd-banner-art { width: 56px; height: 56px; margin-block: -4px; border-radius: 14px; border-width: 3px; }
	.mdd-banner p { display: none; }
	.mdd-banner h2 { font-size: var(--mdd-fs-xl); }
	.mdd-banner-more { padding: 6px 12px; font-size: var(--mdd-fs-xs); }
	.mdd-section-title h2 { gap: 12px; }
	.mdd-hero { padding-top: 12px; }
	.mdd-hero-perks span { font-size: var(--mdd-fs-xs); padding: 4px 10px; }
	.mdd-chips { margin-inline: calc(var(--mdd-gutter) * -1); padding-inline: var(--mdd-gutter); flex-basis: 100%; }
	.mdd-chips + .mdd-sort { align-self: flex-start; }
	.mdd-tab { flex: 1; justify-content: center; padding: 8px 10px; }
	.mdd-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.mdd-steps li { padding: 12px 14px; padding-inline-start: 52px; }
	.mdd-steps li::before { top: 12px; }
	.mdd-rating-summary { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.mdd-orderbar-product img { width: 40px; height: 40px; }
	.mdd-orderbar-product b { font-size: var(--mdd-fs-sm); }
	.mdd-orderbar .mdd-btn { min-height: 42px; padding: 8px 14px; font-size: var(--mdd-fs-sm); }
	.mdd-orderbar .mdd-btn .mdd-icon { display: none; }
	.mdd-footer-grid { gap: 22px 16px; }
	.mdd-footer-grid > .mdd-footer-about, .mdd-footer-grid > div:last-child { grid-column: 1 / -1; }
	/* آراء العملاء: شريط أفقي يُسحب بالإصبع بدل قائمة طويلة. */
	.mdd-testimonials {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 84%); gap: 12px;
		margin-inline: calc(var(--mdd-gutter) * -1); padding: 32px var(--mdd-gutter) 6px; overflow-x: auto;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--mdd-gutter); overscroll-behavior-x: contain; scrollbar-width: none;
	}
	.mdd-testimonials::-webkit-scrollbar { display: none; }
	.mdd-testimonial { scroll-snap-align: start; }
	.mdd-faq-item summary { padding: 13px 14px; }
	.mdd-faq-answer { padding: 12px 14px 14px; }
	.mdd-wa-float { width: 50px; height: 50px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 14px; }
	.mdd-wa-float svg { width: 24px; height: 24px; }
	.mdd-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px); }
}

@media (max-width: 360px) {
}

@media (pointer: coarse) {
	.mdd-sort select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
	.mdd-header, .mdd-topbar, .mdd-footer, .mdd-orderbar, .mdd-wa-float, .mdd-tablist { display: none !important; }
	.mdd-panel[hidden] { display: block !important; }
}

/* ==========================================================================
   20. الاستجابة للمكوّنات الجديدة
   ========================================================================== */
@media (max-width: 900px) {
	.mdd-showcase { --mdd-cols: 4; --mdd-gap-x: 18px; }
	.mdd-showcase.is-poster { --mdd-cols: 3; --mdd-gap-x: 14px; }
	.mdd-cvs-grid { grid-template-columns: minmax(0, 1fr); }
	.mdd-cvsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mdd-header-actions .mdd-scheme-toggle { display: none; }
	.mdd-nav-extra { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mdd-border); }
	.mdd-nav-scheme { display: flex; align-items: center; justify-content: center; min-height: var(--mdd-control); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius); background: var(--mdd-surface-2); color: var(--mdd-text); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); cursor: pointer; }
	.mdd-account-name { display: none; }
	.mdd-account-btn.is-in { padding: 0; border: 0; }
}
@media (max-width: 640px) {
	.mdd-pill-bar { padding-block: 4px; padding-inline: 16px 26%; }
	.mdd-pill-art { height: 108%; bottom: 8%; inset-inline-end: 3%; }
	.mdd-pill-art.is-photo img { border-width: 2px; }
	.mdd-carousel { --mdd-cc-step1: 54%; --mdd-cc-step2: 30%; --mdd-cc-tilt: -18deg; margin-inline: calc(var(--mdd-gutter) * -1); }
	.mdd-carousel-stage { perspective: 900px; }
	.mdd-cc-body { padding: 10px 12px 12px; }
	.mdd-showcase { --mdd-cols: 3; --mdd-gap-x: 10px; row-gap: 18px; }
	.mdd-showcase.is-poster { --mdd-cols: 2; --mdd-gap-x: 12px; row-gap: 44px; }
	.mdd-arch-dome::before { inset: -5px; }
	.mdd-arch-name { margin-top: 10px; line-height: 1.35; }
	.mdd-arch-flag { bottom: 6px; padding: 0 7px; font-size: 11px; }
	.mdd-arch-meta { margin-top: 5px; gap: 3px; }
	.mdd-showcase .mdd-rate small { display: none; }
	.mdd-rate, .mdd-pricechip { padding: 0 7px; font-size: 11.5px; }
	.mdd-poster-meta { bottom: 6px; left: 6px; right: 6px; gap: 4px; }
	.mdd-poster-icon { border-width: 2px; }
	.mdd-poster-name { padding: 8px 10px 9px; }
	.mdd-cvs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.mdd-cvs-icon { width: 46px; height: 46px; border-radius: 14px; }
	.mdd-cvs-actions .mdd-btn { flex: 1 1 auto; }
	.mdd-rail { grid-auto-columns: 128px; gap: 12px; margin-inline: calc(var(--mdd-gutter) * -1); padding-inline: var(--mdd-gutter); scroll-padding-inline: var(--mdd-gutter); }
	.mdd-cvsteps { gap: 8px; }
	.mdd-cvsteps li { padding: 46px 12px 12px; }
	.mdd-cvsteps li::before { top: 12px; inset-inline-start: 12px; width: 26px; height: 26px; }
	.mdd-cvsteps b { font-size: var(--mdd-fs-sm); }
	.mdd-cvsteps span { font-size: var(--mdd-fs-xs); }
}
@media (max-width: 359px) {
	.mdd-showcase { --mdd-cols: 2; --mdd-gap-x: 12px; }
	.mdd-cvsteps { grid-template-columns: minmax(0, 1fr); }
	.mdd-cvsteps li { padding: 12px; padding-inline-start: 48px; }
}
.mdd-flash { transition: opacity .35s, transform .35s; }
.mdd-flash.is-hiding { opacity: 0; transform: translateY(-6px); }
.mdd-pay-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding: 10px 12px; border-radius: var(--mdd-radius); background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.7; }
.mdd-pay-note .mdd-icon { flex-shrink: 0; margin-top: 3px; color: var(--mdd-success); }

/* ==========================================================================
   21. النماذج والتنبيهات
   ========================================================================== */
.mdd-form { display: grid; gap: 14px; }
.mdd-field { display: grid; gap: 6px; margin: 0; }
.mdd-field label { font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); }
.mdd-field label small { color: var(--mdd-muted); font-weight: var(--mdd-fw-regular); }
.mdd-field input[type="text"], .mdd-field input[type="email"], .mdd-field input[type="password"], .mdd-field input[type="tel"], .mdd-field input[type="url"], .mdd-field select, .mdd-field textarea, .mdd-pass input {
	width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--mdd-input-border); border-radius: var(--mdd-radius);
	background: var(--mdd-surface); color: var(--mdd-text); font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.mdd-field input:focus, .mdd-field select:focus, .mdd-field textarea:focus, .mdd-pass input:focus { outline: none; border-color: var(--mdd-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mdd-accent) 22%, transparent); }
.mdd-field input[dir="ltr"] { text-align: left; }
.mdd-field-hint { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-pass { position: relative; display: block; }
.mdd-pass input { padding-inline-end: 48px; }
.mdd-pass-toggle { position: absolute; top: 50%; inset-inline-end: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--mdd-muted); cursor: pointer; }
.mdd-pass-toggle:hover { color: var(--mdd-text); background: var(--mdd-surface-2); }
.mdd-pass-toggle[aria-pressed="true"] { color: var(--mdd-accent-text); }
.mdd-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--mdd-fs-md); line-height: 1.6; }
.mdd-check input { flex-shrink: 0; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--mdd-accent); }
.mdd-check a { color: var(--mdd-accent-text); font-weight: var(--mdd-fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.mdd-form-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mdd-link-sm { color: var(--mdd-accent-text); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); }
.mdd-hp { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mdd-alert { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--mdd-radius); font-size: var(--mdd-fs-md); font-weight: var(--mdd-fw-medium); line-height: 1.7; }
.mdd-alert ul { margin: 0; padding-inline-start: 18px; }
.mdd-alert.is-error { background: color-mix(in srgb, var(--mdd-danger) 10%, var(--mdd-surface)); border: 1px solid color-mix(in srgb, var(--mdd-danger) 35%, var(--mdd-border)); color: var(--mdd-danger); }
.mdd-alert.is-success { background: color-mix(in srgb, var(--mdd-success) 10%, var(--mdd-surface)); border: 1px solid color-mix(in srgb, var(--mdd-success) 35%, var(--mdd-border)); color: var(--mdd-success); }
.mdd-btn-danger { background: var(--mdd-danger); border-color: var(--mdd-danger); color: #fff; }
.mdd-btn-danger:hover { color: #fff; filter: brightness(.95); }
.mdd-icon-btn.is-danger:hover { color: var(--mdd-danger); background: color-mix(in srgb, var(--mdd-danger) 10%, var(--mdd-surface)); }

/* ==========================================================================
   21ب. نافذة تسجيل رقم واتساب قبل الطلب
   ========================================================================== */
.mdd-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mdd-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 30, .55); backdrop-filter: blur(2px); }
.mdd-modal-box {
	position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto;
	padding: clamp(20px, 16.087px + 1.087vw, 28px); border-radius: var(--mdd-radius-xl);
	background: var(--mdd-surface); box-shadow: 0 30px 60px -20px rgba(20, 20, 30, .5);
	animation: mdd-modal-in .22s var(--mdd-ease-out);
}
@keyframes mdd-modal-in {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to { opacity: 1; transform: none; }
}
.mdd-modal-close {
	position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--mdd-surface-2); color: var(--mdd-muted); cursor: pointer;
}
.mdd-modal-close:hover { color: var(--mdd-text); }
.mdd-modal-title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding-inline-end: 30px; font-size: var(--mdd-fs-lg); }
.mdd-modal-title .mdd-icon { flex-shrink: 0; color: var(--mdd-accent-text); }
.mdd-modal-text { margin: 0 0 18px; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.7; }
.mdd-modal .mdd-field { margin-bottom: 14px; }
.mdd-modal .mdd-alert { margin: -2px 0 14px; }
@media (prefers-reduced-motion: reduce) {
	.mdd-modal-box { animation: none; }
}

/* ==========================================================================
   21ج. الطلب المضمون: نافذة "تم تسجيل طلبك" وصفحة متابعة الطلب (3.7)
   ========================================================================== */
.mdd-order-modal .mdd-modal-box { max-width: 440px; }
.mdd-order-modal .mdd-modal-box:focus, .mdd-order-modal [tabindex="-1"]:focus { outline: none; }
.mdd-om-item { margin: -2px 0 10px; padding: 8px 12px; border-radius: var(--mdd-radius); background: var(--mdd-surface-2); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); line-height: 1.6; overflow-wrap: anywhere; }
.mdd-om-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-om-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 0 28px; font-weight: var(--mdd-fw-bold); }
.mdd-om-spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--mdd-wa) 22%, transparent); border-top-color: var(--mdd-wa); animation: mdd-spin .8s linear infinite; }
@keyframes mdd-spin { to { transform: rotate(360deg); } }
.mdd-om-ok { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 2px auto 10px; border-radius: 50%; background: color-mix(in srgb, var(--mdd-success) 14%, var(--mdd-surface)); color: var(--mdd-success); }
.mdd-om-title { margin: 0; text-align: center; font-size: var(--mdd-fs-xl); }
.mdd-om-code { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 2px; }
.mdd-om-code span { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-om-code b { font-size: clamp(22px, 20px + .5vw, 27px); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.mdd-om-code .mdd-icon-btn { min-width: 34px; height: 34px; color: var(--mdd-muted); }
.mdd-om-summary { margin: 0 0 14px; text-align: center; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.mdd-om-steps { list-style: none; display: grid; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface-2); font-size: var(--mdd-fs-md); }
.mdd-om-steps li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.65; }
.mdd-om-steps li > .mdd-icon, .mdd-om-steps li > b { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; font-size: 12px; box-sizing: border-box; }
.mdd-om-steps li.is-done > .mdd-icon { padding: 4px; background: var(--mdd-success); color: #fff; }
.mdd-om-steps li.is-next > b { background: var(--mdd-wa); color: #fff; }
.mdd-om-steps bdi { font-weight: var(--mdd-fw-bold); white-space: nowrap; }
.mdd-om-steps .mdd-link-sm { padding: 0 2px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--mdd-fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.mdd-om-alt { margin: 10px 0 0; font-size: var(--mdd-fs-sm); }
.mdd-om-alt summary { padding: 6px; color: var(--mdd-muted); text-align: center; cursor: pointer; list-style: none; }
.mdd-om-alt summary::-webkit-details-marker { display: none; }
.mdd-om-alt summary::after { content: " ▾"; }
.mdd-om-alt[open] summary::after { content: " ▴"; }
.mdd-om-alt-body { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.mdd-om-assure { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--mdd-radius); background: color-mix(in srgb, var(--mdd-success) 9%, var(--mdd-surface)); color: var(--mdd-text); font-size: var(--mdd-fs-sm); line-height: 1.7; }
.mdd-om-assure .mdd-icon { flex-shrink: 0; margin-top: 4px; color: var(--mdd-success); }
.mdd-om-track { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; color: var(--mdd-accent-text); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); }
.mdd-order-modal [data-mdd-step="error"] .mdd-btn + .mdd-btn { margin-top: 8px; }
.mdd-om-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0 0 14px; font-size: var(--mdd-fs-md); line-height: 1.6; }
.mdd-om-who span { color: var(--mdd-muted); }
.mdd-om-who bdi { font-weight: var(--mdd-fw-bold); white-space: nowrap; }
.mdd-om-who .mdd-link-sm { padding: 0 2px; border: 0; background: none; color: inherit; cursor: pointer; font-family: inherit; font-size: var(--mdd-fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.mdd-om-web-send { display: block; width: 100%; margin: 10px 0 0; padding: 6px; border: 0; background: none; color: var(--mdd-muted); cursor: pointer; font-family: inherit; font-size: var(--mdd-fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.mdd-om-web-send:hover { color: var(--mdd-text); }

.mdd-track { padding-top: clamp(18px, 12.522px + 1.5217vw, 32px); padding-bottom: clamp(32px, 25.739px + 1.7391vw, 48px); }
.mdd-track-card { max-width: 620px; margin: 0 auto; padding: clamp(18px, 14.087px + 1.087vw, 28px); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); box-shadow: var(--mdd-shadow); }
.mdd-track-card.is-lookup { max-width: 460px; }
.mdd-track-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mdd-track-kicker { margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-track-code { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: var(--mdd-fs-2xl); font-variant-numeric: tabular-nums; }
.mdd-track-code .mdd-icon-btn { min-width: 34px; height: 34px; color: var(--mdd-muted); }
.mdd-track-product { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px; border-radius: var(--mdd-radius-lg); background: var(--mdd-surface-2); }
.mdd-track-product img { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--mdd-radius); object-fit: cover; }
.mdd-track-product > div { min-width: 0; }
.mdd-track-title { display: block; color: var(--mdd-text); font-weight: var(--mdd-fw-bold); overflow-wrap: anywhere; }
.mdd-track-product small { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-track-steps { list-style: none; margin: 0 0 18px; padding: 0; }
.mdd-track-steps li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.mdd-track-steps li:last-child { padding-bottom: 0; }
.mdd-track-steps li::before { content: ""; position: absolute; top: 26px; bottom: 2px; inset-inline-start: 11px; width: 2px; background: var(--mdd-border); }
.mdd-track-steps li:last-child::before { display: none; }
.mdd-track-steps li.is-done::before { background: var(--mdd-success); }
.mdd-track-dot { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--mdd-border); border-radius: 50%; background: var(--mdd-surface); box-sizing: border-box; }
.mdd-track-steps .is-done > .mdd-track-dot { border-color: var(--mdd-success); background: var(--mdd-success); color: #fff; }
.mdd-track-steps .is-current > .mdd-track-dot { border-color: var(--mdd-wa); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mdd-wa) 18%, transparent); }
.mdd-track-steps .is-closed > .mdd-track-dot { border-color: var(--mdd-danger); }
.mdd-track-steps .is-off { opacity: .55; }
.mdd-track-step { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; line-height: 1.6; }
.mdd-track-step small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-variant-numeric: tabular-nums; }
.mdd-track-steps .is-current .mdd-track-step b { color: var(--mdd-wa); }
.mdd-track-actions { display: grid; gap: 8px; }
.mdd-track-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--mdd-border); color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-track-foot .mdd-link-sm { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: var(--mdd-fw-bold); color: var(--mdd-accent-text); }
.mdd-track-mine { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--mdd-border); }
.mdd-track-mine h2 { margin: 0 0 8px; font-size: var(--mdd-fs-md); }
.mdd-track-mine ul { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.mdd-track-mine a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius); color: var(--mdd-text); }
.mdd-track-mine a:hover { border-color: var(--mdd-text); }
.mdd-track-mine a b { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mdd-track-mine a span { min-width: 0; overflow: hidden; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.mdd-order-actions { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
@media (prefers-reduced-motion: reduce) {
	.mdd-om-spinner { animation-duration: 2.4s; }
}

/* ==========================================================================
   22. صفحة الحساب
   ========================================================================== */
.mdd-account { padding-top: clamp(18px, 12.522px + 1.5217vw, 32px); padding-bottom: clamp(32px, 25.739px + 1.7391vw, 48px); }
.mdd-auth { display: grid; grid-template-columns: minmax(0, 450px) minmax(0, 320px); justify-content: center; align-items: start; gap: clamp(18px, 14.087px + 1.087vw, 28px); }
.mdd-auth-card { padding: clamp(18px, 14.087px + 1.087vw, 28px); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); box-shadow: var(--mdd-shadow); }
.mdd-auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: var(--mdd-radius); background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); }
.mdd-auth-tabs a { padding: 8px 10px; border-radius: 9px; text-align: center; font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); line-height: 1.5; color: var(--mdd-muted); }
.mdd-auth-tabs a.is-active { background: var(--mdd-surface); color: var(--mdd-text); box-shadow: var(--mdd-shadow-sm); }
.mdd-auth-title { margin: 0 0 4px; font-size: var(--mdd-fs-2xl); }
.mdd-auth-lead { margin: 0 0 18px; color: var(--mdd-muted); font-size: var(--mdd-fs-md); }
.mdd-auth-switch { margin: 16px 0 0; text-align: center; color: var(--mdd-muted); font-size: var(--mdd-fs-md); }
.mdd-auth-switch a { color: var(--mdd-accent-text); font-weight: var(--mdd-fw-bold); }
/* الدخول بلا كلمة مرور: زر الرمز البديل، ملاحظة الحماية، وخانة الرمز. */
.mdd-auth-alt { margin-top: 10px; gap: 8px; }
.mdd-auth-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding: 10px 12px; border-radius: var(--mdd-radius); background: var(--mdd-surface-2); color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.7; }
.mdd-auth-note .mdd-icon { flex-shrink: 0; margin-top: 4px; color: var(--mdd-success); }
.mdd-otp-input { font-size: clamp(22px, 19px + .8vw, 28px) !important; font-weight: var(--mdd-fw-bold); letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding-inline-start: calc(14px + .5em) !important; }
.mdd-otp-input::placeholder { letter-spacing: .5em; }
.mdd-otp-resend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 14px 0 0; color: var(--mdd-muted); font-size: var(--mdd-fs-md); }
.mdd-otp-resend .mdd-link-sm { padding: 4px 2px; border: 0; background: none; cursor: pointer; font-family: inherit; }
.mdd-otp-resend .mdd-link-sm:hover { text-decoration: underline; }
.mdd-verify-box { border-color: color-mix(in srgb, var(--mdd-accent) 55%, var(--mdd-border)); }
.mdd-verify-box.is-danger { border-color: color-mix(in srgb, var(--mdd-danger) 45%, var(--mdd-border)); }
.mdd-verify-box h2 { margin: 0 0 10px; font-size: var(--mdd-fs-lg); overflow-wrap: anywhere; }
.mdd-verify-box.is-danger h2 { color: var(--mdd-danger); }
.mdd-auth-side { position: relative; overflow: hidden; padding: clamp(18px, 14.087px + 1.087vw, 26px) clamp(16px, 12.87px + .8696vw, 24px); border-radius: var(--mdd-radius-xl); color: #fff; background: radial-gradient(120% 120% at 80% 0%, var(--mdd-plum-2), var(--mdd-plum-1) 70%); }
.mdd-auth-side h2 { margin: 0 0 14px; color: #fff; font-size: var(--mdd-fs-lg); }
.mdd-auth-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mdd-auth-side li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--mdd-fs-md); line-height: 1.7; color: rgba(255, 255, 255, .88); }
.mdd-auth-side .mdd-icon { flex-shrink: 0; margin-top: 2px; color: var(--mdd-marquee); }

.mdd-dash { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(18px, 14.87px + .8696vw, 26px); align-items: start; }
.mdd-dash-side { position: sticky; top: calc(var(--mdd-header-h) + 16px); padding: 16px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); }
.admin-bar .mdd-dash-side { top: calc(var(--mdd-header-h) + 48px); }
.mdd-dash-user { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--mdd-border); }
.mdd-dash-user .mdd-avatar.is-lg { width: 48px; height: 48px; font-size: 20px; border-width: 3px; box-shadow: none; }
.mdd-dash-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.mdd-dash-who b { font-size: var(--mdd-fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdd-dash-who small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.mdd-dash-nav { display: grid; gap: 2px; }
.mdd-dash-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--mdd-radius); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); line-height: 1.4; color: var(--mdd-text); }
.mdd-dash-nav a .mdd-icon { color: var(--mdd-muted); }
.mdd-dash-nav a:hover { background: var(--mdd-surface-2); color: var(--mdd-text); }
.mdd-dash-nav a.is-active { background: color-mix(in srgb, var(--mdd-accent) 18%, var(--mdd-surface)); font-weight: var(--mdd-fw-bold); }
.mdd-dash-nav a.is-active .mdd-icon { color: var(--mdd-accent-text); }
.mdd-dash-nav a.is-quiet { color: var(--mdd-muted); }
.mdd-dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.mdd-dash-head h1 { margin: 0; font-size: var(--mdd-fs-2xl); }
.mdd-dash-head p { margin: 4px 0 0; color: var(--mdd-muted); max-width: 540px; font-size: var(--mdd-fs-md); }
.mdd-empty.is-soft { border-style: solid; }
.mdd-cvlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.mdd-cvcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); }
.mdd-cvcard-thumb { display: block; padding: 16px 16px 0; background: linear-gradient(to bottom, var(--mdd-surface-2), var(--mdd-surface)); }
.mdd-cvcard-thumb .mdd-sheet { border-radius: 6px 6px 0 0; aspect-ratio: 210 / 200; box-shadow: 0 -1px 0 rgba(20, 20, 35, .04), 0 10px 22px -14px rgba(20, 20, 35, .45); }
.mdd-cvcard-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; border-top: 1px solid var(--mdd-border); }
.mdd-cvcard-title { margin: 0; font-size: var(--mdd-fs-base); }
.mdd-cvcard-title a { color: var(--mdd-text); }
.mdd-cvcard-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-cvcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mdd-cvcard-head .mdd-cvcard-title { min-width: 0; padding-top: 4px; overflow-wrap: anywhere; }
.mdd-cvcard-tools { display: flex; gap: 4px; flex-shrink: 0; }
.mdd-cvcard-tools .mdd-icon-btn { width: 34px; min-width: 34px; height: 34px; border: 1px solid var(--mdd-border); }
.mdd-cvcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.mdd-cvcard-actions .mdd-btn { flex: 1 1 0; white-space: nowrap; }
.mdd-state { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-bold); line-height: 1.7; }
.mdd-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mdd-state.is-paid { background: color-mix(in srgb, var(--mdd-success) 13%, var(--mdd-surface)); color: var(--mdd-success); }
.mdd-state.is-requested { background: color-mix(in srgb, #E8A400 16%, var(--mdd-surface)); color: color-mix(in srgb, #B37A00 90%, var(--mdd-text)); }
.mdd-state.is-draft { background: var(--mdd-surface-2); color: var(--mdd-muted); }
.mdd-myreviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mdd-myreviews li { padding: 14px 16px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); }
.mdd-myreviews-product { font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-base); color: var(--mdd-text); }
.mdd-myreviews-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-myreviews p { margin: 0; color: var(--mdd-text); }
.mdd-panelset { display: grid; gap: 16px; max-width: 620px; }
.mdd-box { padding: clamp(16px, 13.652px + .6522vw, 22px); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); }
.mdd-box h2 { margin: 0; font-size: var(--mdd-fs-lg); }
.mdd-box .mdd-btn { justify-self: start; }
.mdd-danger { border-color: color-mix(in srgb, var(--mdd-danger) 30%, var(--mdd-border)); }
.mdd-danger summary { cursor: pointer; font-weight: var(--mdd-fw-bold); color: var(--mdd-danger); }
.mdd-danger form { margin-top: 12px; }
.mdd-danger p { margin: 0; }

/* ==========================================================================
   23. التقييمات: بوابة الدخول وشارة العميل
   ========================================================================== */
.mdd-review-gate { display: flex; align-items: flex-start; gap: 14px; margin-top: 10px; padding: clamp(14px, 12.435px + .4348vw, 18px); border-radius: var(--mdd-radius-lg); border: 1.5px dashed color-mix(in srgb, var(--mdd-accent) 55%, var(--mdd-border)); background: color-mix(in srgb, var(--mdd-accent) 6%, var(--mdd-surface)); }
.mdd-review-gate h3 { margin: 0 0 4px; font-size: var(--mdd-fs-lg); }
.mdd-review-gate p { margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-md); }
.mdd-review-gate-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--mdd-accent); color: var(--mdd-accent-ink); }
.mdd-review-gate-icon .mdd-icon { fill: currentColor; }
.mdd-review-gate.is-done { border-style: solid; border-color: color-mix(in srgb, var(--mdd-success) 35%, var(--mdd-border)); background: color-mix(in srgb, var(--mdd-success) 6%, var(--mdd-surface)); }
.mdd-review-gate.is-done .mdd-review-gate-icon { background: var(--mdd-success); color: #fff; }
.mdd-review-gate.is-done .mdd-review-gate-icon .mdd-icon { fill: none; }
.mdd-review-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.mdd-review-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mdd-review-sub time { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--mdd-success); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); }
.mdd-verified.is-team { color: var(--mdd-accent-text); }
.logged-in-as b { color: var(--mdd-text); }

/* ==========================================================================
   24. معرض قوالب السيرة
   ========================================================================== */
.mdd-tplpage { padding: clamp(20px, 16.087px + 1.087vw, 30px) 0 clamp(32px, 26.522px + 1.5217vw, 46px); }
.mdd-tplpage-head { max-width: 740px; margin: 0 auto clamp(18px, 14.87px + .8696vw, 26px); text-align: center; }
.mdd-tplpage-head h1 { margin: 0 0 8px; font-size: var(--mdd-fs-3xl); }
.mdd-tplpage-head p { margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-base); line-height: 1.8; }
.mdd-tplpage-intro { margin-top: 14px; text-align: start; }
.mdd-tplbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mdd-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mdd-chip { cursor: pointer; font-family: inherit; color: var(--mdd-text); }
.mdd-langswitch { display: inline-flex; padding: 3px; border-radius: var(--mdd-radius); background: var(--mdd-surface); border: 1px solid var(--mdd-border); }
.mdd-langswitch button { min-height: 34px; padding: 4px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--mdd-muted); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-sm); cursor: pointer; }
.mdd-langswitch button.is-active { background: var(--mdd-accent); color: var(--mdd-accent-ink); }
.mdd-tplcount { margin: 0 0 16px; color: var(--mdd-muted); font-size: var(--mdd-fs-md); }
.mdd-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(12px, 8.87px + .8696vw, 20px); }
.mdd-tplcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); scroll-margin-top: calc(var(--mdd-header-h) + 16px); }
.mdd-tplcard[hidden] { display: none; }
.mdd-tplcard:target { outline: 3px solid var(--mdd-accent); outline-offset: 3px; }
.mdd-tplcard-media { display: block; padding: 16px 18px 0; background: radial-gradient(140% 100% at 50% 0%, color-mix(in srgb, var(--mdd-grad-to) 9%, var(--mdd-surface-2)), var(--mdd-surface-2)); }
.mdd-tplcard-media .mdd-sheet { border-radius: 6px 6px 0 0; aspect-ratio: 210 / 250; }
.mdd-tplcard-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 16px; border-top: 1px solid var(--mdd-border); }
.mdd-tplcard-title { margin: 0; font-size: var(--mdd-fs-lg); }
.mdd-tplcard-desc { margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.7; }
.mdd-tplcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.mdd-tag { padding: 1px 10px; border-radius: 999px; background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); color: var(--mdd-muted); font-size: 11.5px; font-weight: var(--mdd-fw-medium); line-height: 1.7; }
.mdd-tag.is-ats { background: color-mix(in srgb, var(--mdd-success) 12%, var(--mdd-surface)); border-color: color-mix(in srgb, var(--mdd-success) 30%, var(--mdd-border)); color: var(--mdd-success); }
.mdd-tplcard-body .mdd-btn { margin-top: auto; }
.mdd-tplnote { max-width: 740px; margin: clamp(24px, 19.304px + 1.3043vw, 34px) auto 0; padding: clamp(16px, 13.652px + .6522vw, 22px) clamp(16px, 12.87px + .8696vw, 24px); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); border: 1px solid var(--mdd-border); }
.mdd-tplnote h2 { margin: 0 0 6px; font-size: var(--mdd-fs-lg); }
.mdd-tplnote p { margin: 0 0 8px; color: var(--mdd-muted); font-size: var(--mdd-fs-md); line-height: 1.8; }
.mdd-newcv { max-width: 540px; margin: 28px auto; padding: clamp(20px, 16.087px + 1.087vw, 30px); text-align: center; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); }
.mdd-newcv h1 { font-size: var(--mdd-fs-2xl); }
.mdd-newcv p { color: var(--mdd-muted); }

/* ==========================================================================
   25. صفحات السياسات و"من نحن"
   ========================================================================== */
.mdd-legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(18px, 14.87px + .8696vw, 26px); align-items: start; padding-top: clamp(18px, 14.087px + 1.087vw, 28px); padding-bottom: clamp(32px, 26.522px + 1.5217vw, 46px); max-width: 1100px; }
.mdd-legal-nav { position: sticky; top: calc(var(--mdd-header-h) + 16px); }
.mdd-legal-nav ul { list-style: none; margin: 0; padding: 6px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); display: grid; gap: 2px; }
.mdd-legal-nav a { display: block; padding: 10px 14px; border-radius: var(--mdd-radius); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); line-height: 1.5; color: var(--mdd-text); }
.mdd-legal-nav a:hover { background: var(--mdd-surface-2); color: var(--mdd-text); }
.mdd-legal-nav a.is-active { background: color-mix(in srgb, var(--mdd-accent) 18%, var(--mdd-surface)); font-weight: var(--mdd-fw-bold); }
.mdd-legal-doc { padding: clamp(18px, 12.522px + 1.5217vw, 32px); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); }
.mdd-legal-head { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--mdd-border); }
.mdd-legal-head h1 { margin: 0; font-size: var(--mdd-fs-3xl); }
.mdd-legal-date { margin: 6px 0 0; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-legal-doc .mdd-entry { font-size: var(--mdd-fs-base); line-height: 1.9; max-width: 70ch; }
.mdd-legal-doc .mdd-entry h2 { margin: 1.5em 0 .5em; font-size: var(--mdd-fs-xl); }
.mdd-legal-doc .mdd-entry li { margin-bottom: .35em; }
.mdd-legal-help { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; padding: 14px 16px; border-radius: var(--mdd-radius-lg); background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); }
.mdd-legal-help > div { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.mdd-legal-help b { font-size: var(--mdd-fs-base); }
.mdd-legal-help span { color: var(--mdd-muted); font-size: var(--mdd-fs-md); }
.mdd-legal-help-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--mdd-wa) 14%, var(--mdd-surface)); color: var(--mdd-wa); }

.mdd-about { padding: 8px 0 clamp(32px, 26.522px + 1.5217vw, 46px); }
.mdd-about .mdd-pill { margin-top: clamp(18px, 15.652px + .6522vw, 24px); }
.mdd-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(18px, 14.87px + .8696vw, 26px); align-items: start; max-width: 1120px; margin: clamp(22px, 17.304px + 1.3043vw, 34px) auto 0; }
.mdd-about-text { padding: clamp(18px, 12.522px + 1.5217vw, 32px); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); font-size: var(--mdd-fs-base); line-height: 1.9; }
.mdd-about-text h2 { font-size: var(--mdd-fs-xl); margin-top: 1.4em; }
.mdd-about-text > p:first-child { font-size: var(--mdd-fs-lg); font-weight: var(--mdd-fw-medium); color: var(--mdd-text); }
.mdd-about-side { position: sticky; top: calc(var(--mdd-header-h) + 16px); display: grid; gap: 14px; padding: clamp(16px, 14.435px + .4348vw, 20px); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-xl); background: var(--mdd-surface); }
.mdd-about-brand { display: flex; align-items: center; gap: 12px; }
.mdd-about-brand img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.mdd-about-brand b { font-size: var(--mdd-fs-lg); }
.mdd-about-facts { margin: 0; display: grid; gap: 8px; }
.mdd-about-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--mdd-radius); background: var(--mdd-surface-2); }
.mdd-about-facts dt { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-about-facts dd { margin: 0; font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-lg); white-space: nowrap; }
.mdd-about-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mdd-about-links a { color: var(--mdd-accent-text); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-md); }
.mdd-pill.no-art .mdd-pill-bar { padding-inline-end: clamp(16px, 4%, 40px); }

@media (max-width: 960px) {
	.mdd-auth { grid-template-columns: minmax(0, 500px); }
	.mdd-dash { grid-template-columns: minmax(0, 1fr); }
	.mdd-dash > * { min-width: 0; }
	.mdd-dash-side { position: static; padding: 12px; }
	.mdd-dash-user { padding-bottom: 10px; }
	.mdd-dash-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	.mdd-dash-nav a { justify-content: center; gap: 6px; min-height: 40px; padding: 8px; border: 1px solid var(--mdd-border); font-size: var(--mdd-fs-sm); white-space: nowrap; }
	.mdd-legal { grid-template-columns: minmax(0, 1fr); }
	.mdd-legal > * { min-width: 0; }
	.mdd-legal-nav { position: static; }
	.mdd-legal-nav ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; }
	.mdd-legal-nav li { flex: 1 1 auto; }
	.mdd-legal-nav a { padding: 8px 12px; border: 1px solid var(--mdd-border); font-size: var(--mdd-fs-sm); text-align: center; white-space: nowrap; }
	.mdd-about-grid { grid-template-columns: minmax(0, 1fr); }
	.mdd-about-side { position: static; }
}
@media (max-width: 640px) {
	.mdd-auth-card { border-radius: var(--mdd-radius-lg); }
	.mdd-cvlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mdd-cvcard-thumb { padding: 10px 10px 0; }
	.mdd-cvcard-body { padding: 10px 10px 12px; gap: 6px; }
	.mdd-cvcard-title { font-size: var(--mdd-fs-md); }
	.mdd-cvcard-actions .mdd-btn { flex: 1 1 100%; }
	.mdd-tplgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mdd-tplcard-media { padding: 12px 12px 0; }
	.mdd-tplcard-body { padding: 12px; gap: 6px; }
	.mdd-tplcard-title { font-size: var(--mdd-fs-base); }
	.mdd-tplcard-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--mdd-fs-xs); }
	.mdd-tplcard-body .mdd-btn { min-height: 38px; font-size: var(--mdd-fs-sm); padding: 6px 10px; }
	.mdd-tplbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.mdd-tplbar > * { min-width: 0; max-width: 100%; }
	.mdd-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(var(--mdd-gutter) * -1); padding-inline: var(--mdd-gutter); max-width: none; }
	.mdd-filters::-webkit-scrollbar { display: none; }
	.mdd-langswitch { align-self: flex-start; }
	.mdd-legal-doc { border-radius: var(--mdd-radius-lg); }
	.mdd-legal-doc .mdd-entry { line-height: 1.85; }
	.mdd-about-text { border-radius: var(--mdd-radius-lg); }
}
@media (max-width: 380px) {
	.mdd-tplgrid { gap: 10px; }
	.mdd-tplcard-media { padding: 10px 10px 0; }
	.mdd-tplcard-body { padding: 10px; }
	.mdd-tplcard-body .mdd-btn { font-size: var(--mdd-fs-xs); padding: 6px; }
}
@media (max-width: 340px) {
	.mdd-cvlist, .mdd-tplgrid { grid-template-columns: minmax(0, 1fr); }
}
.mdd-rail.is-compact { grid-auto-columns: 140px; max-width: none; margin: 0; padding-top: 4px; }
.mdd-pcard-note + .mdd-pcard-note { margin-top: -4px; }

/* ==========================================================================
   26. كثافة القراءة على الهاتف: أسطر أقرب قليلاً لنصوص أصغر
   ========================================================================== */
@media (max-width: 640px) {
	body { line-height: 1.68; }
	.mdd-entry, .mdd-about-text { line-height: 1.8; }
	.mdd-lead, .mdd-cvhome-lead, .mdd-tplpage-head p, .mdd-footer-about p, .mdd-testimonial blockquote, .mdd-cvs-text, .mdd-page-head p { line-height: 1.7; }
	.mdd-dash-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.mdd-cvlist { grid-template-columns: minmax(0, 1fr); }
	.mdd-cvcard-thumb .mdd-sheet { aspect-ratio: 210 / 118; }
}

/* ==========================================================================
   27. راحة العين (3.3): نمط "مريح للعين"، حجم النص، تقليل الحركة
   ========================================================================== */
/* نمط دافئ منخفض التباين والإشعاع الأزرق للقراءة الطويلة نهاراً. */
.mdd-scheme-comfort {
	color-scheme: light;
	--mdd-bg: #EDE5D6;
	--mdd-surface: #F7F1E5;
	--mdd-surface-2: #F0E8D9;
	--mdd-border: #DCCFB8;
	--mdd-text: #382F25;
	--mdd-muted: #6B5E4D;
	--mdd-success: #2F7D44;
	--mdd-danger: #B5473F;
	--mdd-shadow-sm: 0 1px 2px rgba(70, 50, 20, .06);
	--mdd-shadow: 0 1px 2px rgba(70, 50, 20, .05), 0 10px 28px -14px rgba(70, 50, 20, .2);
}
.mdd-scheme-comfort img { filter: saturate(.94); }
.mdd-scheme-comfort ::selection { background: color-mix(in srgb, var(--mdd-accent) 45%, transparent); }

/* حجم النص: كبير وأكبر (يكبر السلّم كله بالنسبة نفسها). */
.mdd-text-2, .mdd-text-3 {
	--mdd-fs-xs: calc(12px * var(--mdd-tscale));
	--mdd-fs-sm: calc(13px * var(--mdd-tscale));
	--mdd-fs-md: calc(14px * var(--mdd-tscale));
	--mdd-fs-card: calc(clamp(14px, 13.609px + .1087vw, 15px) * var(--mdd-tscale));
	--mdd-fs-base: calc(clamp(15px, 14.609px + .1087vw, 16px) * var(--mdd-tscale));
	--mdd-fs-lg: calc(clamp(16px, 15.217px + .2174vw, 18px) * var(--mdd-tscale));
	--mdd-fs-xl: calc(clamp(18px, 16.826px + .3261vw, 21px) * var(--mdd-tscale));
	--mdd-fs-2xl: calc(clamp(20px, 17.652px + .6522vw, 26px) * var(--mdd-tscale));
	--mdd-fs-3xl: calc(clamp(23px, 19.478px + .9783vw, 32px) * var(--mdd-tscale));
}
.mdd-text-2 { --mdd-tscale: 1.1; }
.mdd-text-3 { --mdd-tscale: 1.22; }
.mdd-text-2 .mdd-entry, .mdd-text-3 .mdd-entry, .mdd-text-2 .mdd-faq-answer, .mdd-text-3 .mdd-faq-answer { line-height: 1.95; }

.mdd-reduce-motion *, .mdd-reduce-motion *::before, .mdd-reduce-motion *::after {
	animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}

/* لوحة "راحة العين" في الترويسة */
.mdd-display { position: relative; }
.mdd-display-panel {
	position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 90; width: 300px; max-width: calc(100vw - 24px);
	display: grid; gap: 14px; padding: 14px;
	background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); box-shadow: var(--mdd-shadow);
}
.mdd-display-title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); }
.mdd-display-title .mdd-icon { color: var(--mdd-accent-text); }
.mdd-display-group { display: grid; gap: 6px; }
.mdd-display-label { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); }
.mdd-seg { display: grid; gap: 4px; padding: 4px; border-radius: var(--mdd-radius); background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); }
.mdd-seg.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mdd-seg button {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 4px;
	border: 0; border-radius: 9px; background: transparent; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); line-height: 1.3; cursor: pointer;
	transition: background .2s, color .2s;
}
.mdd-seg button:hover { color: var(--mdd-text); }
.mdd-seg button[aria-pressed="true"] { background: var(--mdd-surface); color: var(--mdd-text); font-weight: var(--mdd-fw-bold); box-shadow: var(--mdd-shadow-sm), inset 0 0 0 1.5px var(--mdd-accent); }
.mdd-seg button[aria-pressed="true"] .mdd-icon { color: var(--mdd-accent-text); }
.mdd-aa { font-weight: var(--mdd-fw-bold); line-height: 1; }
.is-size-1 .mdd-aa { font-size: 14px; }
.is-size-2 .mdd-aa { font-size: 17px; }
.is-size-3 .mdd-aa { font-size: 20px; }
.mdd-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); }
.mdd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mdd-switch-ui { position: relative; flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--mdd-border); transition: background .2s; }
.mdd-switch-ui::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .2s; }
.mdd-switch input:checked + .mdd-switch-ui { background: var(--mdd-accent); }
.mdd-switch input:checked + .mdd-switch-ui::after { inset-inline-start: 19px; }
.mdd-switch input:focus-visible + .mdd-switch-ui { outline: 3px solid var(--mdd-accent); outline-offset: 2px; }
.mdd-nav-display { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius); background: var(--mdd-surface-2); }
.mdd-nav-display .mdd-seg { background: var(--mdd-surface); }
.mdd-nav-display .mdd-seg button[aria-pressed="true"] { background: var(--mdd-surface-2); }
.mdd-menu-earn > a { color: var(--mdd-accent-text); }

/* ==========================================================================
   28. الكتالوج: التصفية وطريقة العرض (شبكة / قائمة)
   ========================================================================== */
.mdd-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -6px 0 18px; }
.mdd-filters-row { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.mdd-filters-row::-webkit-scrollbar { display: none; }
.mdd-fchip {
	flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 12px; border-radius: 999px;
	border: 1px dashed var(--mdd-border); background: transparent; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); line-height: 1.4; white-space: nowrap;
	transition: border-color .2s, background .2s, color .2s;
}
.mdd-fchip:hover { border-color: var(--mdd-accent); color: var(--mdd-text); }
.mdd-fchip.is-on { border-style: solid; border-color: var(--mdd-accent); background: color-mix(in srgb, var(--mdd-accent) 16%, var(--mdd-surface)); color: var(--mdd-text); }
.mdd-fchip.is-on .mdd-icon { color: var(--mdd-accent-text); }
.mdd-fchip.is-clear { border-style: solid; background: var(--mdd-surface); color: var(--mdd-text); }
.mdd-viewswitch { flex: none; display: inline-flex; padding: 3px; border-radius: var(--mdd-radius); border: 1px solid var(--mdd-border); background: var(--mdd-surface); }
.mdd-viewswitch button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--mdd-muted); cursor: pointer; }
.mdd-viewswitch button[aria-pressed="true"] { background: var(--mdd-accent); color: var(--mdd-accent-ink); }

/* تفاصيل إضافية تظهر في عرض القائمة فقط */
/* (تفاصيل عرض القائمة: انظر القسم 35) */

/* ==========================================================================
   29. الأسعار: الخيار الأوفر، المعدل الشهري، جدول المقارنة
   ========================================================================== */
.mdd-plan.is-best .mdd-plan-box { border-color: color-mix(in srgb, var(--mdd-success) 55%, var(--mdd-border)); }
.mdd-plan-best {
	display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; vertical-align: 1px;
	background: var(--mdd-success); color: #fff; font-style: normal; font-size: 11px; font-weight: var(--mdd-fw-bold); line-height: 1.7;
}
.mdd-plan-save { color: var(--mdd-success); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-bold); }
.mdd-compare-wrap { position: relative; overflow-x: auto; margin-inline: -4px; padding: 0 4px 4px; }
.mdd-compare { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: var(--mdd-fs-md); }
.mdd-compare th, .mdd-compare td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--mdd-border); vertical-align: middle; }
.mdd-compare thead th { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); background: var(--mdd-surface-2); }
.mdd-compare thead th:first-child { border-start-start-radius: var(--mdd-radius); }
.mdd-compare thead th:last-child { border-start-end-radius: var(--mdd-radius); }
.mdd-compare tbody th { font-weight: var(--mdd-fw-bold); }
.mdd-compare .is-price b { font-size: var(--mdd-fs-base); }
.mdd-compare del { display: block; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-compare td small { display: block; }
.mdd-compare tr.is-best > * { background: color-mix(in srgb, var(--mdd-success) 7%, var(--mdd-surface)); }
.mdd-compare td:last-child { text-align: end; }

/* شارك واربح (صفحة الخدمة) */
.mdd-earn {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--mdd-radius);
	background: linear-gradient(110deg, color-mix(in srgb, var(--mdd-accent) 15%, var(--mdd-surface)), color-mix(in srgb, var(--mdd-grad-to) 10%, var(--mdd-surface)));
	border: 1px dashed color-mix(in srgb, var(--mdd-accent) 60%, var(--mdd-border));
}
.mdd-earn-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--mdd-accent); color: var(--mdd-accent-ink); }
.mdd-earn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.mdd-earn-text b { font-size: var(--mdd-fs-md); }
.mdd-earn-text small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-earn .mdd-btn { flex: none; }

/* شاهدتها مؤخراً */
.mdd-recent-section.is-home { padding: 14px 0 0; }
.mdd-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mdd-recent-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--mdd-fs-base); }
.mdd-recent-head h2 .mdd-icon { color: var(--mdd-accent-text); }
.mdd-recent-head button { border: 0; background: none; cursor: pointer; padding: 4px 6px; }
.mdd-recent { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
.mdd-recent::-webkit-scrollbar { display: none; }
.mdd-recent-item {
	flex: none; display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 260px; padding: 8px 14px 8px 8px; padding-inline: 8px 14px;
	border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); scroll-snap-align: start; transition: border-color .2s;
}
.mdd-recent-item:hover { border-color: var(--mdd-accent); color: var(--mdd-text); }
.mdd-recent-item img { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--mdd-surface-2); }
.mdd-recent-item span { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.mdd-recent-item b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--mdd-fs-sm); }
.mdd-recent-item small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }

/* ==========================================================================
   30. البحث الفوري
   ========================================================================== */
.mdd-search.has-suggest { position: relative; }
.mdd-suggest {
	position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 85; max-height: min(70vh, 460px); overflow-y: auto;
	padding: 6px; text-align: start; background: var(--mdd-surface); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); box-shadow: var(--mdd-shadow);
}
.mdd-suggest-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--mdd-radius); color: var(--mdd-text); }
.mdd-suggest-item:hover, .mdd-suggest-item.is-active { background: var(--mdd-surface-2); color: var(--mdd-text); }
.mdd-suggest-item img { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--mdd-surface-2); }
.mdd-suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.mdd-suggest-text b { font-size: var(--mdd-fs-md); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mdd-suggest-text small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-suggest-price { flex: none; font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-sm); }
.mdd-suggest-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--mdd-border); color: var(--mdd-accent-text); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-sm); text-align: center; border-radius: 0 0 var(--mdd-radius) var(--mdd-radius); }
.mdd-suggest-all.is-active, .mdd-suggest-all:hover { background: var(--mdd-surface-2); }
.mdd-suggest-empty { margin: 0; padding: 12px; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); text-align: center; }

/* ==========================================================================
   31. شريط التنقل السفلي (الجوال)
   ========================================================================== */
.mdd-bottomnav { display: none; }
@media (max-width: 760px) {
	.mdd-bottomnav {
		position: fixed; inset-inline: 0; bottom: 0; z-index: 58; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
		padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--mdd-surface) 94%, transparent);
		border-top: 1px solid var(--mdd-border); box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .45); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
	}
	.mdd-bottomnav a, .mdd-bottomnav button {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px;
		border: 0; border-radius: 12px; background: transparent; color: var(--mdd-muted); font: inherit; font-size: 11.5px; font-weight: var(--mdd-fw-medium); line-height: 1.2; cursor: pointer;
	}
	.mdd-bottomnav .is-current { color: var(--mdd-text); font-weight: var(--mdd-fw-bold); }
	.mdd-bottomnav .is-current .mdd-icon { color: var(--mdd-accent-text); }
	.mdd-bottomnav .is-earn .mdd-icon { color: var(--mdd-accent-text); }
	.mdd-has-bottomnav .mdd-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	.mdd-has-bottomnav .mdd-wa-float { display: none; }
	.mdd-bottomnav .is-wa .mdd-icon { color: var(--mdd-wa); }
	.mdd-has-bottomnav .mdd-toast { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   32. حسابي: الطلبات و"اربح معنا"
   ========================================================================== */
.mdd-dash-subtitle { margin: 26px 0 12px; font-size: var(--mdd-fs-lg); }
.mdd-state.is-balance { background: color-mix(in srgb, #3B82C8 14%, var(--mdd-surface)); color: color-mix(in srgb, #2A6CB0 90%, var(--mdd-text)); }
.mdd-scheme-dark .mdd-state.is-balance { color: color-mix(in srgb, #3B82C8 40%, #fff); }

.mdd-aff-hero {
	position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px;
	padding: clamp(16px, 12.087px + 1.087vw, 26px); border-radius: var(--mdd-radius-xl); color: #fff;
	background: radial-gradient(120% 150% at 90% 0%, var(--mdd-plum-2) 0%, var(--mdd-plum-1) 72%);
	box-shadow: 0 22px 44px -30px rgba(20, 20, 30, .5);
}
.mdd-aff-hero::after { content: ""; position: absolute; inset-inline-end: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mdd-accent) 35%, transparent), transparent 65%); pointer-events: none; }
.mdd-aff-hero-main { position: relative; z-index: 1; display: grid; gap: 12px; min-width: 0; }
.mdd-aff-kicker { margin: 0; color: rgba(255, 255, 255, .78); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); }
.mdd-copybox { display: flex; gap: 6px; padding: 5px; border-radius: var(--mdd-radius); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.mdd-copybox input { flex: 1; min-width: 0; min-height: 42px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 15px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; text-align: left; outline: none; }
.mdd-copybox .mdd-btn { flex: none; }
.mdd-copybox.is-sm { background: var(--mdd-surface-2); border-color: var(--mdd-border); }
.mdd-copybox.is-sm input { color: var(--mdd-text); min-height: 36px; font-size: 14px; }
.mdd-aff-share { display: flex; flex-wrap: wrap; gap: 8px; }
.mdd-chip-btn {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); cursor: pointer;
}
.mdd-chip-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.mdd-chip-btn.is-wa { background: var(--mdd-wa); border-color: var(--mdd-wa); }
.mdd-aff-code { color: rgba(255, 255, 255, .8); font-size: var(--mdd-fs-sm); }
.mdd-aff-code summary { cursor: pointer; width: fit-content; }
.mdd-aff-code code { padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: var(--mdd-marquee); font-weight: var(--mdd-fw-bold); letter-spacing: .06em; }
.mdd-aff-code .mdd-inline { display: flex; gap: 6px; margin: 10px 0 6px; max-width: 360px; }
.mdd-aff-code input { flex: 1; min-width: 0; min-height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .2); color: #fff; text-transform: uppercase; }
.mdd-aff-code small { display: block; color: rgba(255, 255, 255, .65); }
.mdd-aff-badge { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; width: 132px; height: 132px; border-radius: 50%; text-align: center; background: var(--mdd-accent); color: var(--mdd-accent-ink); box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 18px 34px -16px rgba(0, 0, 0, .6); transform: rotate(-8deg); }
.mdd-aff-badge b { font-size: clamp(28px, 24px + 1vw, 36px); font-weight: var(--mdd-fw-heavy); line-height: 1; }
.mdd-aff-badge span { margin-top: 4px; font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-bold); }

.mdd-aff-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.mdd-stat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); }
.mdd-stat-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 10px; background: var(--mdd-surface-2); color: var(--mdd-accent-text); }
.mdd-stat small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-stat b { font-size: var(--mdd-fs-xl); line-height: 1.3; }
.mdd-stat em { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-style: normal; }
.mdd-stat.is-accent { border-color: color-mix(in srgb, var(--mdd-accent) 60%, var(--mdd-border)); background: color-mix(in srgb, var(--mdd-accent) 8%, var(--mdd-surface)); }
.mdd-stat.is-accent .mdd-stat-icon { background: var(--mdd-accent); color: var(--mdd-accent-ink); }

.mdd-aff-schedule h2, .mdd-linkgen h2 { margin: 0 0 12px; font-size: var(--mdd-fs-lg); }
.mdd-aff-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mdd-aff-timeline li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 18px; padding-inline-start: 30px; }
.mdd-aff-timeline li:last-child { padding-bottom: 0; }
.mdd-aff-timeline li::before { content: ""; position: absolute; top: 5px; inset-inline-start: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--mdd-border); background: var(--mdd-surface); }
.mdd-aff-timeline li:not(:last-child)::after { content: ""; position: absolute; top: 22px; bottom: 2px; inset-inline-start: 10px; width: 2px; background: var(--mdd-border); }
.mdd-aff-timeline li.is-now::before { border-color: var(--mdd-accent); background: var(--mdd-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mdd-accent) 25%, transparent); }
.mdd-aff-timeline li.is-done::before { border-color: var(--mdd-success); background: var(--mdd-success); }
.mdd-aff-timeline b { font-size: var(--mdd-fs-md); }
.mdd-aff-timeline span { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.7; }
.mdd-dots { display: flex !important; align-items: center; gap: 6px; margin-top: 4px; }
.mdd-dots i { width: 22px; height: 8px; border-radius: 99px; background: var(--mdd-border); }
.mdd-dots i.is-on { background: var(--mdd-accent); }
.mdd-dots small { margin-inline-start: 6px; color: var(--mdd-text); font-weight: var(--mdd-fw-medium); font-size: var(--mdd-fs-xs); }
.mdd-aff-warn { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--mdd-radius); background: color-mix(in srgb, #E8A400 12%, var(--mdd-surface)); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); }
.mdd-aff-warn .mdd-icon { color: #B37A00; flex: none; }
.mdd-aff-warn a { color: var(--mdd-text); text-decoration: underline; text-underline-offset: 3px; }
.mdd-aff-schedule, .mdd-linkgen { margin-top: 16px; }
.mdd-linkgen p { margin: -6px 0 12px; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); }
.mdd-linkgen-row { display: grid; gap: 8px; }
.mdd-linkgen select { width: 100%; min-height: 46px; padding: 8px 12px; border: 1.5px solid var(--mdd-input-border); border-radius: var(--mdd-radius); background: var(--mdd-surface); color: var(--mdd-text); }

.mdd-ledger { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); overflow: hidden; }
.mdd-ledger li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.mdd-ledger li + li { border-top: 1px solid var(--mdd-border); }
.mdd-ledger-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.mdd-ledger-main b { font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); overflow-wrap: anywhere; }
.mdd-ledger-main small { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-ledger-amount { flex: none; min-width: 64px; text-align: end; font-size: var(--mdd-fs-md); color: var(--mdd-success); }
.mdd-ledger li.is-void { opacity: .55; }
.mdd-ledger li.is-void .mdd-ledger-amount { color: var(--mdd-muted); text-decoration: line-through; }
.mdd-panelset.is-wide { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-top: 24px; }
.mdd-aff-terms .mdd-infolist { margin-top: 12px; font-size: var(--mdd-fs-sm); }

.mdd-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mdd-order { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); }
.mdd-order-thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.mdd-order-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mdd-order-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mdd-order-code { padding: 1px 8px; border-radius: 6px; background: var(--mdd-surface-2); border: 1px solid var(--mdd-border); font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-xs); direction: ltr; }
.mdd-order-title { font-weight: var(--mdd-fw-bold); font-size: var(--mdd-fs-md); color: var(--mdd-text); overflow-wrap: anywhere; }
.mdd-order-meta { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); }
.mdd-order .mdd-btn { flex: none; }

/* ==========================================================================
   33. صفحة "اربح معنا"
   ========================================================================== */
.mdd-earn-page { padding-top: clamp(16px, 12.087px + 1.087vw, 26px); padding-bottom: 8px; }
.mdd-earn-hero {
	position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 24px;
	padding: clamp(20px, 11.391px + 2.3913vw, 42px); border-radius: var(--mdd-radius-xl); color: #fff;
	background: radial-gradient(110% 140% at 85% 0%, var(--mdd-plum-2) 0%, var(--mdd-plum-1) 70%);
	box-shadow: 0 26px 50px -32px rgba(30, 10, 70, .75);
}
.mdd-earn-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 260px at 0% 110%, color-mix(in srgb, var(--mdd-grad-from) 30%, transparent), transparent 70%); }
.mdd-earn-hero-text { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; }
.mdd-earn-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); }
.mdd-earn-kicker .mdd-icon { color: var(--mdd-marquee); }
.mdd-earn-hero h1 { margin: 0; color: #fff; font-size: var(--mdd-fs-display); font-weight: var(--mdd-fw-heavy); line-height: 1.25; text-wrap: balance; }
.mdd-earn-hero p { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .86); font-size: var(--mdd-fs-base); line-height: 1.8; }
.mdd-earn-hero .mdd-copybox { width: 100%; max-width: 560px; }
.mdd-earn-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mdd-earn-hero .mdd-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.mdd-earn-hero .mdd-btn-ghost:hover { border-color: #fff; color: #fff; }
.mdd-earn-hero-art { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; }
.mdd-earn-coin {
	display: grid; place-items: center; align-content: center; width: clamp(150px, 120px + 8vw, 210px); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mdd-accent) 70%, #fff), var(--mdd-accent) 55%, color-mix(in srgb, var(--mdd-accent) 75%, #6b3b00));
	color: var(--mdd-accent-ink); text-align: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, .07), 0 0 0 22px rgba(255, 255, 255, .04), 0 26px 40px -18px rgba(0, 0, 0, .7);
	transform: rotate(-8deg);
}
.mdd-earn-coin b { font-size: clamp(38px, 30px + 2.2vw, 56px); font-weight: var(--mdd-fw-heavy); line-height: 1; }
.mdd-earn-coin span { margin-top: 6px; font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-bold); }
.mdd-earn-mini { display: flex; gap: 8px; }
.mdd-earn-mini span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-size: var(--mdd-fs-sm); }
.mdd-earn-mini b { color: var(--mdd-marquee); }
.mdd-steps.is-wide { max-width: 980px; margin: 0 auto; }
.mdd-earn-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto; }
.mdd-earn-card { display: grid; align-content: start; gap: 8px; padding: 18px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-lg); background: var(--mdd-surface); }
.mdd-earn-card h3 { margin: 0; font-size: var(--mdd-fs-lg); }
.mdd-earn-card p { margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.75; }
.mdd-earn-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mdd-surface-2); color: var(--mdd-accent-text); }
.mdd-earn-card.is-instant { border-color: color-mix(in srgb, var(--mdd-accent) 65%, var(--mdd-border)); background: color-mix(in srgb, var(--mdd-accent) 8%, var(--mdd-surface)); }
.mdd-earn-card.is-instant .mdd-earn-card-icon { background: var(--mdd-accent); color: var(--mdd-accent-ink); }
.mdd-earn-page .mdd-infolist { padding: 18px; }

/* ==========================================================================
   34. الاستجابة للمكوّنات الجديدة (3.3)
   ========================================================================== */
@media (max-width: 1100px) {
	.mdd-aff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.mdd-panelset.is-wide { grid-template-columns: minmax(0, 1fr); }
	.mdd-earn-hero { grid-template-columns: minmax(0, 1fr); }
	.mdd-earn-hero-art { justify-items: start; grid-auto-flow: column; align-items: center; }
	.mdd-earn-coin { width: 120px; }
	.mdd-earn-coin b { font-size: 34px; }
	.mdd-earn-mini { flex-direction: column; }
	.mdd-earn-plan { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.mdd-aff-hero { grid-template-columns: minmax(0, 1fr); }
	.mdd-aff-hero { gap: 12px; }
	.mdd-aff-badge { order: -1; justify-self: start; display: inline-flex; align-items: baseline; gap: 6px; width: auto; height: auto; padding: 5px 14px; border-radius: 999px; transform: none; box-shadow: none; }
	.mdd-aff-badge b { font-size: var(--mdd-fs-lg); }
	.mdd-aff-badge span { margin: 0; }
}
@media (max-width: 640px) {
	.mdd-compare { min-width: 0; font-size: var(--mdd-fs-sm); }
	.mdd-compare th:nth-child(2), .mdd-compare td:nth-child(2) { display: none; }
	.mdd-compare th, .mdd-compare td { padding: 9px 7px; }
	.mdd-compare .mdd-btn-sm { padding: 5px 10px; min-height: 32px; }
	.mdd-earn-coin { display: none; }
	.mdd-earn-hero-art:not(:has(.mdd-earn-mini)) { display: none; }
	.mdd-earn-mini { flex-direction: row; flex-wrap: wrap; }
	.mdd-earn-actions .mdd-btn { flex: 1 1 100%; }
	.mdd-filterbar { gap: 8px; margin-top: -8px; }
	.mdd-filters-row { margin-inline-start: calc(var(--mdd-gutter) * -1); padding-inline-start: var(--mdd-gutter); mask-image: linear-gradient(to left, #000 85%, transparent); -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); }
	.mdd-fchip { min-height: 34px; padding: 4px 11px; font-size: var(--mdd-fs-xs); }
	.mdd-viewswitch button { width: 34px; height: 32px; }
	.mdd-dash-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mdd-dash-nav a { font-size: var(--mdd-fs-xs); padding: 8px 4px; flex-direction: column; gap: 3px; min-height: 54px; }
	.mdd-aff-stats { gap: 8px; }
	.mdd-stat { padding: 12px; }
	.mdd-stat b { font-size: var(--mdd-fs-lg); }
	.mdd-copybox { flex-wrap: wrap; }
	.mdd-copybox input { flex-basis: 100%; }
	.mdd-copybox .mdd-btn { width: 100%; }
	.mdd-order { flex-wrap: wrap; }
	.mdd-order .mdd-btn { width: 100%; }
	.mdd-order-actions { width: 100%; }
	.mdd-order-actions .mdd-btn { flex: 1 1 0; width: auto; }
	.mdd-earn { flex-wrap: wrap; }
	.mdd-earn .mdd-btn { width: 100%; }
	.mdd-display-panel { position: fixed; top: calc(var(--mdd-header-h) + 8px); inset-inline: 12px; width: auto; }
}
@media (max-width: 420px) {
	.mdd-header-wa { display: none; }
}
@media print {
	.mdd-bottomnav, .mdd-display, .mdd-recent-section, .mdd-earn { display: none !important; }
}

/* ==========================================================================
   35. البطاقات والسعر الخارجي وطرق العرض (3.4)
   --------------------------------------------------------------------------
   ترتيب القراءة في كل بطاقة: ما هذا؟ (الصورة والاسم) ← كم سعره؟ ← اطلب.
   السعر وزر الطلب في شريط واحد مثبّت أسفل البطاقة، فتتحاذى الأسعار والأزرار في كل صف.
   ========================================================================== */

/* ---------- وسم السعر الموحّد ---------- */
.mdd-ptag {
	display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; min-width: 0;
	color: var(--mdd-text); line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.mdd-ptag .mdd-amount { gap: 3px; }
.mdd-ptag .mdd-amount-num { font-size: var(--mdd-fs-xl); font-weight: var(--mdd-fw-heavy); letter-spacing: -.01em; }
.mdd-ptag .mdd-amount-cur { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-bold); }
.mdd-ptag-from { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); }
.mdd-ptag-old { color: var(--mdd-muted); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--mdd-badge) 70%, transparent); }
.mdd-ptag.is-sm .mdd-amount-num { font-size: var(--mdd-fs-lg); }
.mdd-ptag.is-sm .mdd-amount-cur { font-size: var(--mdd-fs-xs); }
.mdd-ptag.is-lg .mdd-amount-num { font-size: var(--mdd-fs-2xl); }
.mdd-ptag.is-empty { color: var(--mdd-muted); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); white-space: normal; }
.mdd-ptag.is-on-accent, .mdd-ptag.is-on-accent .mdd-amount-num { color: var(--mdd-marquee-ink); }
.mdd-ptag.is-on-accent .mdd-amount-cur, .mdd-ptag.is-on-accent .mdd-ptag-from { color: color-mix(in srgb, var(--mdd-marquee-ink) 68%, transparent); }

/* ---------- الشبكة والبطاقة الكلاسيكية ---------- */
.mdd-grid { --mdd-cols: 4; display: grid; grid-template-columns: repeat(var(--mdd-cols), minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .mdd-grid { --mdd-cols: 3; } }
.mdd-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size;
	background: var(--mdd-surface); border: 1px solid color-mix(in srgb, var(--mdd-accent) 26%, var(--mdd-border)); border-radius: var(--mdd-radius-lg);
	transition: transform .3s var(--mdd-ease-out), border-color .2s ease, box-shadow .3s var(--mdd-ease-out);
}
.mdd-card:has(.mdd-card-link:focus-visible) { outline: 3px solid var(--mdd-accent); outline-offset: 2px; }
.mdd-card-link:focus-visible { outline: none; }
.mdd-card-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--mdd-screen); }
.mdd-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--mdd-ease-out); }
.mdd-badge {
	position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; max-width: calc(100% - 64px);
	padding: 2px 8px; border-radius: 6px; background: var(--mdd-badge); color: #fff;
	font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-bold); line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4);
}
.mdd-discount {
	position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; padding: 2px 7px; border-radius: 6px;
	background: var(--mdd-accent); color: var(--mdd-accent-ink); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-heavy); line-height: 1.6; font-variant-numeric: tabular-nums;
}
.mdd-card-rating {
	position: absolute; bottom: 8px; inset-inline-start: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px;
	background: rgba(10, 12, 28, .72); color: #fff; font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-bold); line-height: 1.7; backdrop-filter: blur(4px);
}
.mdd-card-rating span { color: #F2B200; }
.mdd-out-label { position: absolute; inset: auto 0 0; z-index: 2; padding: 5px; background: rgba(12, 14, 26, .84); color: #fff; font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-medium); text-align: center; }
.mdd-card.is-out .mdd-card-media img { filter: grayscale(.85); }

.mdd-card-body { display: flex; flex-direction: column; flex: 1; gap: 3px; padding: 12px 14px 12px; text-align: start; }
.mdd-card-title { margin: 0; font-size: var(--mdd-fs-card); font-weight: var(--mdd-fw-bold); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mdd-card-link { color: var(--mdd-text); }
.mdd-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mdd-card-link:hover { color: var(--mdd-text); }
.mdd-card-meta { margin: 0; color: var(--mdd-muted); font-size: var(--mdd-fs-xs); line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdd-card-cat { display: none; }
.mdd-card-desc { margin: 4px 0 0; color: var(--mdd-muted); font-size: var(--mdd-fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mdd-card-extra { display: none; }
.mdd-card-body > :nth-last-child(2) { margin-bottom: 10px; }

.mdd-card-buy {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--mdd-border) 75%, transparent);
}
.mdd-card-pricebox { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mdd-card-more { color: var(--mdd-muted); font-size: 11.5px; font-weight: var(--mdd-fw-medium); line-height: 1.3; }
.mdd-card-order {
	position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 40px; min-height: 40px; padding: 0 14px; border-radius: 12px;
	background: var(--mdd-accent); color: var(--mdd-accent-ink); font-size: var(--mdd-fs-sm); font-weight: var(--mdd-fw-bold); line-height: 1;
	box-shadow: 0 8px 16px -12px color-mix(in srgb, var(--mdd-accent) 90%, transparent);
	transition: transform .16s var(--mdd-ease-out), filter .2s ease, background-color .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.mdd-card-order:hover { color: var(--mdd-accent-ink); filter: brightness(.95); }
.mdd-card-order:active { transform: scale(.96); }
.mdd-card-order:focus-visible { outline: 3px solid var(--mdd-text); outline-offset: 2px; }
.mdd-card-order.is-ask { background: var(--mdd-surface-2); color: var(--mdd-text); box-shadow: inset 0 0 0 1px var(--mdd-border); }
.mdd-card-go { display: inline-flex; color: var(--mdd-muted); }

/* البطاقة الضيقة (عمودان على الجوال): زر بأيقونة فقط، والسعر يأخذ المساحة. */
@container (max-width: 210px) {
	.mdd-card-body { padding: 10px 11px 11px; }
	.mdd-card-desc { display: none; }
	.mdd-card-order { width: 40px; padding: 0; }
	.mdd-card-order span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.mdd-card-pricebox .mdd-amount-num { font-size: var(--mdd-fs-lg); }
}

/* ---------- عرض مضغوط: صورة واسم وسعر، وبطاقات أكثر في الصف ---------- */
.mdd-view-compact .mdd-grid[data-mdd-view] { --mdd-cols: 6; gap: 12px; }
@media (max-width: 1100px) { .mdd-view-compact .mdd-grid[data-mdd-view] { --mdd-cols: 4; } }
.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-card-body { padding: 8px 10px 10px; gap: 2px; }
.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-card-title { font-size: var(--mdd-fs-sm); -webkit-line-clamp: 1; }
.mdd-view-compact .mdd-grid[data-mdd-view] :is(.mdd-card-meta, .mdd-card-desc, .mdd-card-more, .mdd-card-order, .mdd-card-go, .mdd-badge, .mdd-card-rating) { display: none; }
.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-card-body > :nth-last-child(2) { margin-bottom: 4px; }
.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-card-buy { padding-top: 4px; border-top: 0; }
.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-ptag .mdd-amount-num { font-size: var(--mdd-fs-base); }
.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-out-label { padding: 3px; font-size: var(--mdd-fs-xs); }

/* ---------- عرض القائمة: التفاصيل والمزايا والخيارات، والشراء في عمود جانبي ---------- */
.mdd-view-list .mdd-grid[data-mdd-view] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card { flex-direction: row; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-media { flex: none; align-self: flex-start; width: 184px; height: 184px; aspect-ratio: 1; min-height: 0; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-body {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
	grid-template-areas: "title buy" "meta buy" "cat buy" "desc buy" "extra buy";
	align-content: start; column-gap: 24px; row-gap: 3px; padding: 16px 18px;
}
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-title { grid-area: title; font-size: var(--mdd-fs-lg); -webkit-line-clamp: 1; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-meta { grid-area: meta; white-space: normal; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-cat { grid-area: cat; display: block; color: var(--mdd-accent-text); font-size: var(--mdd-fs-xs); font-weight: var(--mdd-fw-medium); }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-desc { grid-area: desc; display: block; max-width: 70ch; margin-top: 6px; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-extra { grid-area: extra; display: grid; gap: 10px; margin-top: 10px; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-body > :nth-last-child(2) { margin-bottom: 0; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-buy {
	grid-area: buy; grid-row: 1 / -1; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px;
	margin: 0; padding: 0; padding-inline-start: 22px; border-top: 0; border-inline-start: 1px solid var(--mdd-border);
}
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-ptag .mdd-amount-num { font-size: var(--mdd-fs-2xl); }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-order { width: 100%; min-height: 44px; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-order span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-go { display: none; }
.mdd-card-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mdd-card-feats li { display: flex; align-items: flex-start; gap: 6px; color: var(--mdd-text); font-size: var(--mdd-fs-sm); line-height: 1.6; }
.mdd-card-feats .mdd-icon { flex: none; margin-top: 4px; color: var(--mdd-success); stroke-width: 2.6; }
.mdd-card-plans { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mdd-card-plans li { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--mdd-border); background: var(--mdd-surface-2); font-size: var(--mdd-fs-xs); font-variant-numeric: tabular-nums; }
.mdd-card-plans li span { color: var(--mdd-muted); }
.mdd-card-plans li.is-best { border-color: color-mix(in srgb, var(--mdd-success) 60%, var(--mdd-border)); background: color-mix(in srgb, var(--mdd-success) 10%, var(--mdd-surface)); }

/* انتقال طرق العرض (حيث يدعمه المتصفح) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--mdd-ease-out); }

/* ---------- القبّة: السعر تحت الاسم بخط بارز بدل الشارة الصغيرة ---------- */
.mdd-arch-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mdd-arch-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; margin: 5px 0 0; }
.mdd-arch .mdd-ptag { justify-content: center; }

/* ---------- الملصق: السعر داخل شريط الاسم الأصفر، والخلفية لون غامر بلا نص ظاهر ---------- */
.mdd-poster-bg { filter: blur(12px) saturate(1.35); opacity: .55; clip-path: inset(0 round var(--mdd-radius-lg) var(--mdd-radius-lg) 0 0); }
.mdd-poster-bg.is-cover { filter: saturate(.85); opacity: .32; }
.mdd-poster-meta { justify-content: space-between; align-items: center; }
.mdd-poster-flag.is-badge { background: var(--mdd-accent); color: var(--mdd-accent-ink); font-weight: var(--mdd-fw-bold); }
.mdd-poster-off { padding: 1px 7px; border-radius: 6px; background: var(--mdd-badge); color: #fff; font-size: 11.5px; font-weight: var(--mdd-fw-heavy); line-height: 1.6; }
.mdd-poster-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 8px 14px 9px;
	border-radius: 0 0 var(--mdd-radius-lg) var(--mdd-radius-lg); background: var(--mdd-marquee); color: var(--mdd-marquee-ink);
	box-shadow: 0 10px 20px -16px rgba(255, 170, 0, .8);
}
.mdd-poster-bar .mdd-poster-name { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; text-align: start; }
.mdd-poster-bar .mdd-ptag { flex: none; }

/* ---------- العرض الدوّار والخدمات الإضافية ---------- */
.mdd-cc-price.mdd-ptag { justify-content: center; }
.mdd-cc-cta { transition: transform .16s var(--mdd-ease-out), filter .2s ease; }
.mdd-cc-cta:active, .mdd-svc-cta:active, .mdd-btn:active { transform: scale(.97); }
.mdd-svc-price.mdd-ptag .mdd-amount-num { font-size: var(--mdd-fs-lg); }

/* ---------- الجوال ---------- */
@media (max-width: 640px) {
	.mdd-grid { --mdd-cols: 2; gap: 10px; }
	.mdd-card-title { font-size: 13.5px; }
	.mdd-view-compact .mdd-grid[data-mdd-view] { --mdd-cols: 3; gap: 8px; }
	.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-card-body { padding: 6px 8px 8px; }
	.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-card-title { font-size: 12px; }
	.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-ptag .mdd-amount-num { font-size: 14px; }
	.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-ptag-from, .mdd-view-compact .mdd-grid[data-mdd-view] .mdd-ptag .mdd-amount-cur { font-size: 10.5px; }
	.mdd-view-compact .mdd-grid[data-mdd-view] .mdd-discount { top: 5px; inset-inline-end: 5px; font-size: 10px; padding: 0 5px; }

	.mdd-view-list .mdd-grid[data-mdd-view] { gap: 10px; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-media { align-self: flex-start; width: 104px; height: 104px; min-height: 0; aspect-ratio: 1; margin: 10px; margin-inline-end: 0; border-radius: 12px; }
	.mdd-view-list .mdd-grid[data-mdd-view] :is(.mdd-badge, .mdd-card-rating) { display: none; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-discount { top: 5px; inset-inline-end: 5px; font-size: 10.5px; padding: 0 5px; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-body { display: flex; padding: 10px 12px 11px; gap: 2px; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-title { font-size: var(--mdd-fs-base); -webkit-line-clamp: 2; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-desc { -webkit-line-clamp: 2; display: -webkit-box; margin-top: 2px; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-extra { margin-top: 6px; gap: 6px; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-feats li:nth-child(n+3) { display: none; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-body > :nth-last-child(2) { margin-bottom: 10px; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-buy { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 0 0; padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid color-mix(in srgb, var(--mdd-border) 75%, transparent); }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-ptag .mdd-amount-num { font-size: var(--mdd-fs-xl); }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-order { width: auto; min-height: 40px; }

	/* أقسام الرئيسية: شريط أفقي يُسحب بالإصبع، وتظهر حافة البطاقة التالية لتدل على السحب. */
	.mdd-showcase.is-rail-m, .mdd-grid.is-rail-m {
		display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: var(--mdd-rail-w, 44%);
		justify-content: start; gap: 12px; max-width: none; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--mdd-gutter); scrollbar-width: none;
		margin-inline: calc(var(--mdd-gutter) * -1); padding: 10px var(--mdd-gutter) 14px;
	}
	.is-rail-m::-webkit-scrollbar { display: none; }
	.is-rail-m > * { scroll-snap-align: start; }
	.mdd-showcase.is-arch.is-rail-m { --mdd-rail-w: 38%; margin-top: 8px; }
	.mdd-showcase.is-poster.is-rail-m { --mdd-rail-w: 68%; margin-top: 4px; padding-top: 58px; }
	.mdd-grid.is-rail-m { --mdd-rail-w: 46%; }
	.mdd-showcase.is-arch.is-rail-m .mdd-arch-name { margin-top: 12px; font-size: 14px; }
	.mdd-showcase.is-arch .mdd-rate small { display: none; }
	.mdd-poster-bar { min-height: 42px; padding: 7px 12px 8px; }
	.mdd-poster-bar .mdd-poster-name { font-size: 14px; }
}
@media (max-width: 359px) {
	.mdd-grid { gap: 8px; }
	.mdd-showcase.is-arch.is-rail-m { --mdd-rail-w: 42%; }
	.mdd-view-list .mdd-grid[data-mdd-view] .mdd-card-media { width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}