/* ===== مفتاح - تنسيق أوصاف المنتجات =====
   ألوان مفتاح افتراضية. لألوان منتج معيّن أضف كلاس في الوصف:
   mf-c-داكن-مميز-فاتح   مثال: mf-c-0f0460-a435f0-f3e8fd  (يحتاج كود JavaScript)
*/
.mf-desc {
  --mf-dark: #0f0460;
  --mf-accent: #8b37ff;
  --mf-soft: #f8e5f9;
  --mf-hi: color-mix(in srgb, var(--mf-accent) 40%, #fff);
  --mf-line: #ececf1;
  --mf-muted: #6b7280;
  direction: rtl; color: #1f2937; line-height: 1.8; max-width: 100%;
}
.mf-desc, .mf-desc * { box-sizing: border-box; }
.mf-desc p { margin: 0 0 10px; }
.mf-desc h2, .mf-desc h3 { color: var(--mf-dark) !important; font-weight: 800 !important; line-height: 1.5 !important; }
.mf-desc h2 { font-size: 24px !important; margin: 0 0 10px !important; }
.mf-desc h3 { font-size: 20px !important; margin: 0 0 14px !important; }
.mf-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* الشطفة: توقيع الهوية على الكتل الكبيرة والعناصر الصغيرة فقط */
.mf-hero, .mf-final, .mf-dark, .mf-price, .mf-note { --mf-cut: 18px; }
.mf-badge, .mf-chip, .mf-cta, .mf-num, .mf-ico, .mf-final-note { --mf-cut: 8px; }
.mf-hero, .mf-final, .mf-dark, .mf-price, .mf-note,
.mf-badge, .mf-chip, .mf-cta, .mf-num, .mf-ico, .mf-final-note {
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--mf-cut)) 0, 100% var(--mf-cut), 100% 100%, 0 100%);
}

/* الكتل الداكنة */
.mf-hero, .mf-final { background: linear-gradient(135deg, var(--mf-dark) 0%, var(--mf-dark) 45%, color-mix(in srgb, var(--mf-dark) 45%, var(--mf-accent)) 100%); color: #fff; padding: 28px 22px; margin-bottom: 8px; }
.mf-dark { background: var(--mf-dark); padding: 28px 22px; margin: 8px 0 24px; }
.mf-desc .mf-hero h2, .mf-desc .mf-hero h3, .mf-desc .mf-final h2, .mf-desc .mf-final h3, .mf-desc .mf-dark h3 { color: #fff !important; }
.mf-hero p, .mf-final p { color: color-mix(in srgb, var(--mf-dark) 15%, #fff); font-size: 15px; }
.mf-final { text-align: center; margin: 8px 0 0; }
.mf-badge { display: inline-block; background: color-mix(in srgb, var(--mf-accent) 25%, transparent); color: var(--mf-hi); padding: 4px 14px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }

/* الكبسولات */
.mf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.mf-chip, .mf-chip--light { display: inline-block; padding: 6px 12px; font-size: 14px; font-weight: 500; background: rgba(255,255,255,.12); color: #fff; }
.mf-chip--accent { background: var(--mf-accent); color: #fff; font-weight: 700; }
.mf-chip--soft { background: var(--mf-soft); color: var(--mf-dark); }

/* الأقسام: بدون صناديق، يفصلها خط رفيع ومساحة */
.mf-card { padding: 24px 2px; border-bottom: 1px solid var(--mf-line); }
.mf-card strong { color: var(--mf-dark); }

/* أرقام سريعة */
.mf-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px 0; border-bottom: 1px solid var(--mf-line); }
.mf-card .mf-stats { border-bottom: 0; padding: 4px 0 0; }
.mf-stat { text-align: center; padding: 0 6px; }
.mf-stat + .mf-stat { border-right: 1px solid var(--mf-line); }
.mf-stat-num { font-size: 26px; font-weight: 800; color: var(--mf-dark); line-height: 1.3; }
.mf-stat-label { font-size: 13px; color: var(--mf-muted); }

/* شبكة البطاقات: عناوين بخط فاصل فوقها بدل الخلفيات */
.mf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); column-gap: 24px; }
.mf-tile { padding: 14px 0; border-top: 1px solid var(--mf-line); }
.mf-tile-t { font-weight: 800; color: var(--mf-dark); margin-bottom: 2px; }
.mf-tile-d { font-size: 14px; color: var(--mf-muted); line-height: 1.7; }
.mf-dark .mf-tile { border-top-color: rgba(255,255,255,.14); }
.mf-dark .mf-tile-t { color: #fff; }
.mf-dark .mf-tile-d { color: color-mix(in srgb, var(--mf-dark) 25%, #fff); }

/* التصنيفات */
.mf-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; }
.mf-cat { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--mf-dark); font-size: 14px; line-height: 1.5; }
.mf-ico { flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--mf-soft); color: var(--mf-accent); font-weight: 800; font-size: 14px; direction: ltr; }

/* قائمة علامات صح */
.mf-ticks { margin: 0 0 14px; }
.mf-tick { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--mf-line); font-weight: 700; color: var(--mf-dark); }
.mf-tick::after { content: "✓"; color: var(--mf-accent); font-weight: 800; }
.mf-check { color: var(--mf-accent); font-weight: 800; margin-left: 4px; }

/* خطوات */
.mf-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.mf-step:last-child { margin-bottom: 0; }
.mf-num { flex: 0 0 30px; width: 30px; height: 30px; background: var(--mf-accent); color: #fff; text-align: center; line-height: 30px; font-weight: 800; }

/* تقييمات */
.mf-review { padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--mf-line); font-size: 15px; color: #374151; }
.mf-review::before { content: "”"; display: block; color: var(--mf-accent); font-size: 32px; font-weight: 800; line-height: .8; }
.mf-review-by { font-weight: 700; color: var(--mf-muted); font-size: 13px; margin-top: 4px; }

/* ملاحظة وسعر (للقالب القديم) */
.mf-note { background: var(--mf-soft); padding: 18px 20px; margin: 16px 0; color: #4b5563; font-size: 15px; }
.mf-note strong { color: var(--mf-dark); }
.mf-price { background: color-mix(in srgb, var(--mf-dark) 70%, #000); padding: 18px; text-align: center; margin-top: 16px; }
.mf-price-label, .mf-price-sub { font-size: 13px; color: color-mix(in srgb, var(--mf-dark) 30%, #fff); }
.mf-price-num { font-size: 40px; font-weight: 800; color: #fff; line-height: 1.2; }
.mf-price-sub { margin-bottom: 12px; }
.mf-cta { background-color: var(--mf-accent); color: #fff; padding: 10px; font-weight: 800; font-size: 15px; }

/* الأسئلة */
.mf-faq { border-bottom: 1px solid var(--mf-line); padding: 12px 0; }
.mf-faq:last-child { border-bottom: 0; padding-bottom: 0; }
.mf-q { font-weight: 800; color: var(--mf-dark); }
.mf-a { font-size: 14px; color: var(--mf-muted); }
.mf-desc details.mf-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mf-desc details.mf-faq summary::-webkit-details-marker { display: none; }
.mf-desc details.mf-faq summary::after { content: "+"; color: var(--mf-accent); font-weight: 800; font-size: 20px; line-height: 1; }
.mf-desc details.mf-faq[open] summary::after { content: "−"; }
.mf-desc details.mf-faq .mf-a { margin-top: 6px; }

/* الخاتمة */
.mf-final-note { display: inline-block; margin-top: 6px; background: var(--mf-accent); color: #fff; padding: 6px 14px; font-weight: 700; font-size: 14px; }

/* الحركة */
@keyframes mf-shine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -50% 0; } }
.mf-glow { background-image: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%); background-size: 250% 100%; background-repeat: no-repeat; animation: mf-shine 3s ease-in-out infinite; }
@keyframes mf-flow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.mf-flow {
  background: linear-gradient(120deg, var(--mf-dark) 0%, var(--mf-dark) 25%, color-mix(in srgb, var(--mf-dark) 35%, var(--mf-accent)) 45%, color-mix(in srgb, var(--mf-dark) 60%, var(--mf-accent)) 55%, var(--mf-dark) 75%, var(--mf-dark) 100%);
  background-size: 300% 300%;
  animation: mf-flow 6s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .mf-glow, .mf-flow { animation: none; } .mf-glow { background-image: none; } }

@media (max-width: 420px) { .mf-stat-num { font-size: 21px; } .mf-hero, .mf-final, .mf-dark { padding: 24px 18px; } }

/* ===== تقييمات: بطاقات تنسحب ===== */
.mf-rv-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 18px; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mf-rv-track::-webkit-scrollbar { display: none; }
.mf-rv { --mf-cut: 14px; position: relative; clip-path: polygon(0 0, calc(100% - var(--mf-cut)) 0, 100% var(--mf-cut), 100% 100%, 0 100%); flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; background: var(--mf-soft); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; }
.mf-stars { color: #f5b301; letter-spacing: 2px; font-size: 14px; }
.mf-rv-q { font-size: 15px; color: #1f2937; margin: 8px 0 14px; line-height: 1.8; }
.mf-rv-who { display: flex; align-items: center; gap: 10px; }
.mf-rv-av { --mf-cut: 6px; clip-path: polygon(0 0, calc(100% - var(--mf-cut)) 0, 100% var(--mf-cut), 100% 100%, 0 100%); flex: 0 0 34px; width: 34px; height: 34px; background: var(--mf-accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mf-rv-by { font-weight: 800; color: var(--mf-dark); font-size: 14px; line-height: 1.3; }
.mf-rv-v { font-size: 12px; color: var(--mf-muted); }
.mf-rv-hint { font-size: 12px; color: var(--mf-muted); margin-top: 6px; }

/* ===== التصميم الزجاجي: أضف mf-tc في السطر الأول من الوصف ===== */
.mf-desc.mf-tc { background: linear-gradient(160deg, var(--mf-soft) 0%, #fff 45%, color-mix(in srgb, var(--mf-accent) 14%, #fff) 100%); padding: 12px; }
.mf-desc.mf-tc .mf-card, .mf-desc.mf-tc .mf-stats { --mf-cut: 16px; clip-path: polygon(0 0, calc(100% - var(--mf-cut)) 0, 100% var(--mf-cut), 100% 100%, 0 100%); background: rgba(255,255,255,.72); backdrop-filter: blur(8px); border: 0; padding: 22px 18px; margin-bottom: 12px; box-shadow: 0 8px 30px color-mix(in srgb, var(--mf-dark) 8%, transparent); }
.mf-desc.mf-tc .mf-stats { padding: 16px 6px; }
.mf-desc.mf-tc .mf-tile { border-top-color: color-mix(in srgb, var(--mf-accent) 18%, #fff); }
.mf-desc.mf-tc .mf-rv { background: #fff; }
.mf-desc.mf-tc .mf-dark { margin: 0 0 12px; background: linear-gradient(135deg, var(--mf-dark), color-mix(in srgb, var(--mf-dark) 60%, var(--mf-accent))); }
.mf-desc.mf-tc .mf-dark .mf-tile { border-top-color: rgba(255,255,255,.14); }

/* ===== أيقونات Tabler Icons (رخصة MIT — tabler.io/icons) =====
   الاستخدام: <span class="mf-ico mf-i-code"></span> */
.mf-ico[class*="mf-i-"] { font-size: 0; }
.mf-ico[class*="mf-i-"]::before { content: ""; width: 22px; height: 22px; background: var(--mf-accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.mf-i-code::before { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M7 8l-4 4l4 4' /><path d='M17 8l4 4l-4 4' /><path d='M14 4l-4 16' /></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M7 8l-4 4l4 4' /><path d='M17 8l4 4l-4 4' /><path d='M14 4l-4 16' /></svg>"); }
.mf-i-design::before { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25' /><path d='M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /><path d='M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /><path d='M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25' /><path d='M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /><path d='M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /><path d='M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /></svg>"); }
.mf-i-marketing::before { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M18 8a3 3 0 0 1 0 6' /><path d='M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5' /><path d='M12 8l4.524 -3.77a.9 .9 0 0 1 1.476 .692v12.156a.9 .9 0 0 1 -1.476 .692l-4.524 -3.77h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h8' /></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M18 8a3 3 0 0 1 0 6' /><path d='M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5' /><path d='M12 8l4.524 -3.77a.9 .9 0 0 1 1.476 .692v12.156a.9 .9 0 0 1 -1.476 .692l-4.524 -3.77h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h8' /></svg>"); }
.mf-i-ai::before { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6' /></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6' /></svg>"); }
.mf-i-business::before { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M3 9a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -9' /><path d='M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2' /><path d='M12 12l0 .01' /><path d='M3 13a20 20 0 0 0 18 0' /></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M3 9a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -9' /><path d='M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2' /><path d='M12 12l0 .01' /><path d='M3 13a20 20 0 0 0 18 0' /></svg>"); }
.mf-i-productivity::before { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M9.615 20h-2.615a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8' /><path d='M14 19l2 2l4 -4' /><path d='M9 8h4' /><path d='M9 12h2' /></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' ><path d='M9.615 20h-2.615a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8' /><path d='M14 19l2 2l4 -4' /><path d='M9 8h4' /><path d='M9 12h2' /></svg>"); }

/* تحكم التقييمات: أسهم ورابط كل التقييمات */
.mf-rv { cursor: pointer; }
.mf-rv-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mf-rv-arrows { display: flex; gap: 6px; }
.mf-rv-btn { --mf-cut: 7px; clip-path: polygon(0 0, calc(100% - var(--mf-cut)) 0, 100% var(--mf-cut), 100% 100%, 0 100%); width: 36px; height: 36px; border: 0; background: var(--mf-dark); color: #fff; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; font-family: inherit; }
.mf-rv-btn:disabled { opacity: .3; cursor: default; }
.mf-rv-all { color: var(--mf-accent) !important; font-weight: 800; font-size: 14px; text-decoration: none !important; }
.mf-rv-all:hover { text-decoration: underline !important; }