/* ==========================================================================
   QThemy — تصميم الموقع: فاتح من الأول، والغامق اختيار.
   الفهرس (دوّر على الاسم بين العلامتين ===):
     1. COLORS        الألوان (الفاتح ثم الغامق) والمقاسات
     2. FONTS         الخطوط
     3. BASE          الأساسيات
     4. TYPE          العناوين والتسميات الصغيرة
     5. BUTTONS       الأزرار والروابط
     6. HEADER        الكبسولة الطايرة والقائمة وقائمة الموبايل والانتقال بين الصفحات
     7. MENU ICONS    أيقونة الإضافة ومربع Soon جوه القائمة
     8. SLOTS         أماكن السلايدرات والصور المتحركة الفاضية
   الرئيسية:
     9. HERO          أول قسم
    10. STATEMENT     الجملة اللي كلماتها بتتلوّن
    11. PRODUCT       الخطوات والشاشة الثابتة
    12. SHOWCASE      السلايدر الكبير
    13. FEATURES      الكروت بأحجام مختلفة (bento) ورسمة الأجهزة الأربعة
    14. PRO           كارت Pro
    15. STUDIO        الصورة والكلام
    16. THEMES        الثيمات جاية
    17. FOOTER        الفوتر
   باقي الصفحات:
    18. PAGE HEAD     رأس الصفحات الداخلية (المسار والعنوان)
    19. CARDS         الكروت بحواف دائرية (المميزات، الباقات، الأسئلة، التواصل...) بنفس شكل كروت الرئيسية
    20. PRICING       الباقات
    21. COMPARE       جدول Free وPro
    22. GET STARTED   الخطوات التلاتة
    23. FAQ           الأسئلة
    24. CTA & BAND    الجملة الأخيرة، والشريط الكحلي
    25. DOC           المحتوى المكتوب (السياسات والمقالات) والفهرس اللي على الجنب
    26. SINGLE POST   المقال: الصورة والوسوم وخط القراية
    27. BLOG          قائمة المقالات وأرقام الصفحات
    28. CONTACT       صفحة التواصل
    29. ABOUT         صفحة عن الشركة
    30. PLUGINS & THEMES  كارت الإضافة (هيرو صفحة Slider Builder) ورسمة الثيمات (LTR ← RTL)
    31. 404           صفحة الرابط الغلط
    32. FORMS & STORE الحقول وصفحات WooCommerce
    33. MOTION        حركات الظهور
    34. ARABIC        اللي بيختلف في الصفحات العربي (/ar/): الخط والمسافات والسطور
   ملاحظات:
   - أي لون تغيّره من قسم 1 بس.
   - الاتجاهات مكتوبة بـ inline-start/end علشان العربي يشتغل لوحده.
   ========================================================================== */

/* === 1. COLORS === */
:root {
	color-scheme: light;
	--bg: #f8fcff;                 /* خلفية الموقع (أبيض مزرق خفيف) */
	--bg-2: #edf3fa;               /* خلفية الأماكن الفاضية والأقسام المختلفة (نفس الدرجة الباردة، أغمق شوية) */
	--nav-active: #e9f5ff;         /* خلفية الصفحة الحالية في القائمة */
	--surface: #ffffff;            /* الكروت والقائمة */
	--ink: #0b1530;                /* العناوين (كحلي اللوجو) */
	--ink-2: #3c4459;              /* الكلام */
	--ink-3: #656b7a;              /* الكلام الخفيف والتسميات (أغمق شوية علشان يتقري كويس: تباين 4.5:1 على الخلفية) */
	--line: rgba(11, 21, 48, 0.1);
	--line-2: rgba(11, 21, 48, 0.2);
	--hover: rgba(11, 21, 48, 0.06);
	--accent: #0265df;             /* أزرق اللوجو */
	--accent-2: #0238b4;
	--yellow: #fdbf38;             /* لون الإضافة (في قسم Pro بس) */
	--header-bg: rgba(255, 255, 255, 0.9);  /* خلفية الهيدر وإنت نازل: شبه مصمتة علشان الكلام اللي تحته ما يبانش */
	--shadow: 0 30px 80px -40px rgba(11, 21, 48, 0.35);
	--shadow-sm: 0 10px 30px -18px rgba(11, 21, 48, 0.3);
	--footer-bg: #0b1530;
	/* المربعات الغامقة في الرئيسية (أهلًا بيك، $0، Pro، الاستوديو) وشريط "ما يضيفه Pro" في Slider Builder */
	--panel: #141b2d;
	--panel-2: #1c2539;
	--panel-bg: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.07), transparent 55%), linear-gradient(160deg, #1c2539 0%, #141b2d 58%, #10162a 100%);
	--wrap: 1240px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--font: "Manrope", "Qthemy Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--serif: "Literata", Georgia, "Times New Roman", serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0a0e18;
	--bg-2: #121829;
	--surface: #141b2e;
	--ink: #eef1f7;
	--ink-2: #b3bccd;
	--ink-3: #7c869c;
	--line: rgba(255, 255, 255, 0.1);
	--line-2: rgba(255, 255, 255, 0.22);
	--hover: rgba(255, 255, 255, 0.07);
	--accent: #4c8dff;
	--accent-2: #9cc2ff;
	--header-bg: rgba(20, 27, 46, 0.9);
	--nav-active: rgba(76, 141, 255, 0.16);
	--shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
	--shadow-sm: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
	--footer-bg: #060912;
}

/* === 2. FONTS === */
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope.woff2") format("woff2");
	font-weight: 200 800;
	font-display: swap;
}
/* الحروف العربي: خط Readex Pro. اسمه "Qthemy Arabic" وجاي بعد Manrope في --font (قسم 1)، فأي حرف عربي
   (ومنروب ما فيهوش عربي) بيتكتب بيه لوحده، والإنجليزي والأرقام بيفضلوا Manrope.
   بيتحمّل بس لو فيه كلام عربي في الصفحة. أتقل وزن فيه 700، فالعناوين اللي مكتوب لها 800 بتاخد 700. */
@font-face {
	font-family: "Qthemy Arabic";
	src: url("../fonts/readex-pro-arabic.woff2") format("woff2");
	font-weight: 160 700;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}
@font-face {
	font-family: "Literata";
	src: url("../fonts/literata-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* === 3. BASE === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink-2);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	transition: background-color 0.4s, color 0.4s;
	/* الفوتر يفضل تحت في آخر الشاشة حتى لو الصفحة قصيرة (زي سلة فاضية) */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
body.admin-bar { min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)); }
.v2-main { flex: 1 0 auto; }
.v2-footer { flex-shrink: 0; }
::selection { background: var(--accent); color: #fff; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 1002; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); }
.skip-link:focus { top: 12px; color: var(--bg); }
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }
[data-theme="dark"] .logo-light { display: none !important; }
.v2-wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.v2-wrap-wide { width: min(1440px, 100% - 32px); margin-inline: auto; }
.v2-center { text-align: center; }
.v2-section { position: relative; padding-block: clamp(56px, 7vw, 100px); }
.icon { width: 20px; height: 20px; }

/* === 4. TYPE === */
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 800; letter-spacing: -0.04em; line-height: 1; text-wrap: balance; }
/* السطر الأخير في الفقرة ميبقاش كلمة لوحدها */
p, li { text-wrap: pretty; }
/* الكلمة المايلة الأنيقة جوه أي عنوان */
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--accent); }
.v2-display { font-size: clamp(50px, 9vw, 140px); line-height: 0.92; letter-spacing: -0.055em; max-width: 13ch; }
.v2-h2 { font-size: clamp(40px, 6vw, 92px); line-height: 0.96; letter-spacing: -0.05em; }
.v2-lead { max-width: 34em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); }
/* التسميات الصغيرة بخط آلة كاتبة (خط الجهاز نفسه، من غير تحميل) */
.v2-label { margin: 0 0 22px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* === 5. BUTTONS === */
.v2-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.v2-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 54px; padding: 0 26px; border-radius: 999px;
	font-weight: 700; font-size: 15.5px; line-height: 1; white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.v2-btn:hover { transform: translateY(-2px); }
.v2-btn-ink { background: var(--ink); color: var(--bg); }
.v2-btn-ink:hover { background: var(--accent); color: #fff; }
.v2-btn-line { border-color: var(--line-2); color: var(--ink); }
.v2-btn-line:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.v2-btn-yellow { background: var(--yellow); color: #0b1530; }
.v2-btn-yellow:hover { background: #ffd36b; color: #0b1530; }
.v2-btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.v2-arrow { display: inline-block; transition: transform 0.4s var(--ease); }
.v2-btn:hover .v2-arrow, .v2-link:hover .v2-arrow, .v2-jump a:hover .v2-arrow { transform: translateX(4px); }
.v2-btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
[dir="rtl"] .v2-arrow { transform: scaleX(-1); }
.v2-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: border-color 0.3s, color 0.3s; }
.v2-link:hover { color: var(--accent); border-color: var(--accent); }

/* === 6. HEADER === */
/* في أول الصفحة: القائمة بعرض الصفحة ومن غير خلفية.
   أول ما تنزل (is-scrolled من v2.js): بتضيق لكبسولة في النص، وتطلع لفوق شوية، وتاخد خلفية زجاج وضل. */
/* z-index عالي: الهيدر فوق أي حاجة في الصفحة (نقط السلايدر مثلًا) */
.v2-header { position: fixed; top: 14px; inset-inline: 0; z-index: 1000; pointer-events: none; }
/* لو إنت عامل Login، شريط ووردبريس الأسود فوق، فالكبسولة بتنزل تحته */
.admin-bar .v2-header { top: calc(14px + var(--wp-admin--admin-bar--height, 32px)); }

/* ANNOUNCEMENT: شريط الإعلان (inc/customizer.php) أعلى الصفحة، كحلي في الوضعين.
   الكبسولة بتنزل تحته، ولما تنزل في الصفحة بتطلع معاه لحد مكانها العادي:
   v2.js بيحط في --announce-shift الجزء اللي لسه باين من الشريط (42px قبل ما الـ JavaScript يشتغل). */
.v2-announce {
	position: relative; z-index: 1001;
	display: flex; align-items: center; justify-content: center;
	min-height: 42px; padding: 8px 52px;
	background: var(--footer-bg); color: #c9d1e2;
	font-size: 14px; font-weight: 500; line-height: 1.45; text-align: center;
}
.v2-announce-text { margin: 0; }
.v2-announce-text a { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 10px; color: #fff; font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.25s; }
.v2-announce-text a:hover { text-decoration-color: currentColor; }
.v2-announce-text .v2-arrow { transition: transform 0.25s var(--ease); }
.v2-announce-text a:hover .v2-arrow { transform: translateX(3px); }
[dir="rtl"] .v2-announce-text .v2-arrow { transform: scaleX(-1); }
[dir="rtl"] .v2-announce-text a:hover .v2-arrow { transform: scaleX(-1) translateX(3px); }
.v2-announce-close {
	position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: #9aa5bd;
	font: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: background-color 0.25s, color 0.25s;
}
.v2-announce-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.v2-announce-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.has-announce .v2-header { top: calc(14px + var(--announce-shift, 42px)); }
.admin-bar.has-announce .v2-header { top: calc(14px + var(--wp-admin--admin-bar--height, 32px) + var(--announce-shift, 42px)); }
/* الزائر قفل نفس الإعلان قبل كده (theme-init.js): الشريط مش بيظهر خالص */
.announce-off { --announce-shift: 0px; }
.announce-off .v2-announce { display: none; }
@media (max-width: 600px) {
	.v2-announce { padding-inline: 16px 46px; font-size: 13.5px; text-align: start; }
}
.v2-header-inner {
	pointer-events: auto;
	display: flex; align-items: center; gap: 16px;
	width: min(var(--wrap), 100% - 28px); height: 66px; margin-inline: auto;
	padding-inline: 8px;
	border-radius: 999px; border: 1px solid transparent;
	background: transparent;
	transition: width 0.8s var(--ease), height 0.6s var(--ease), padding 0.6s var(--ease), transform 0.6s var(--ease),
		background-color 0.4s, border-color 0.4s, box-shadow 0.5s;
}
.v2-header.is-scrolled .v2-header-inner {
	width: min(1020px, 100% - 28px); height: 58px;
	padding-inline: 18px 9px;
	transform: translateY(-4px);
	border-color: var(--line);
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	box-shadow: var(--shadow-sm);
}
.v2-brand img { width: 128px; height: auto; transition: width 0.6s var(--ease); }
.v2-header.is-scrolled .v2-brand img { width: 112px; }
/* صفحة محتواها بيبدأ خلف الهيدر (مسافات الصفحة → بدون مسافة أعلى المحتوى، inc/page-options.php):
   الكبسولة بخلفية الزجاج من أول الصفحة، علشان اللوجو والقائمة يبانوا فوق أي سلايدر (فاتح أو غامق).
   الصفحات العادية مش بتتأثر. */
.has-flush-top .v2-header-inner {
	border-color: var(--line);
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	box-shadow: var(--shadow-sm);
}
@media (min-width: 901px) {
	.has-flush-top .v2-header-inner { padding-inline: 18px 9px; }
}
/* الموبايل: الكبسولة على طول (القائمة بتفتح تحتها) */
@media (max-width: 900px) {
	.v2-header-inner { padding-inline: 16px 8px; border-color: var(--line); background: var(--header-bg); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
	.v2-header.is-scrolled .v2-header-inner { width: min(var(--wrap), 100% - 28px); }
}
/* القائمة جنب اللوجو، وزراير اللغة والوضع وتواصل معنا على الطرف التاني */
.v2-nav { margin-inline: clamp(12px, 2vw, 28px) auto; }
.v2-nav .menu { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.v2-nav li { position: relative; }
.v2-nav .menu > li > a { display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; color: var(--ink-2); font-size: 15px; font-weight: 600; transition: background-color 0.25s, color 0.25s; }
.v2-nav .menu > li > a:hover, .v2-nav .menu > li:focus-within > a { color: var(--ink); background: var(--hover); }
/* الصفحة اللي إنت فيها: خلفية زرقا فاتحة (--nav-active في قسم 1) */
.v2-nav .menu > .current-menu-item > a, .v2-nav .menu > .current-menu-ancestor > a { color: var(--ink); background: var(--nav-active); }
/* Plugins وThemes مش روابط: بيفتحوا القائمة بس (functions.php → qthemy_menu_parent_attrs) */
.v2-nav .menu > li > a:not([href]) { cursor: default; }
.v2-nav .menu-item-has-children > a::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); opacity: 0.6; }
.v2-nav .sub-menu {
	position: absolute; top: calc(100% + 16px); left: 50%; z-index: 2; min-width: 330px;
	list-style: none; margin: 0; padding: 8px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
	transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}
.v2-nav .sub-menu::before { content: ""; position: absolute; inset: -18px 0 auto; height: 18px; }
.v2-nav li:hover > .sub-menu, .v2-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.v2-nav .sub-menu a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: var(--ink); }
.v2-nav .sub-menu a:hover { background: var(--hover); }
.v2-nav .sub-menu strong { display: block; font-size: 15px; }
.v2-nav .sub-menu small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.v2-nav .sub-menu .menu-icon { width: 46px; height: 46px; }
.v2-actions { display: flex; align-items: center; gap: 8px; }
/* زرار اللغة (inc/lang.php → qthemy_lang_switch): EN | عربي.
   اللغة الحالية عليها كبسولة زرقا، ولما الماوس يقف على التانية الكبسولة بتميل ناحيتها، ولما تدوس بتتزحلق لها (v2.js). */
:root { --dir: 1; }
[dir="rtl"] { --dir: -1; }
.v2-lang { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; height: 40px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.v2-lang::before {
	content: ""; position: absolute; z-index: -1; inset-block: 3px; inset-inline-start: 3px; width: calc(50% - 3px);
	border-radius: 999px; background: linear-gradient(135deg, #4c8dff, var(--accent) 70%); box-shadow: 0 6px 16px -6px rgba(2, 101, 223, 0.75);
	transition: transform 0.55s var(--ease);
}
.v2-lang[data-lang="ar"]::before { transform: translateX(calc(100% * var(--dir))); }
.v2-lang[data-lang="en"]:has(a[hreflang="ar"]:hover)::before { transform: translateX(calc(7px * var(--dir))); }
.v2-lang[data-lang="ar"]:has(a[hreflang="en"]:hover)::before { transform: translateX(calc((100% - 7px) * var(--dir))); }
.v2-lang a { display: grid; place-items: center; min-width: 46px; padding-inline: 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-2); transition: color 0.3s; }
.v2-lang a[lang="ar"] { padding-bottom: 1px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.v2-lang a:hover { color: var(--ink); }
.v2-lang a[aria-current] { color: #fff; }
.v2-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background-color 0.25s, transform 0.4s var(--ease); }
.v2-icon-btn:hover { background: var(--hover); }
[data-theme-toggle]:hover { transform: rotate(-15deg); }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }
.v2-menu-btn { display: none; position: relative; }
.v2-menu-bars, .v2-menu-bars::before { position: absolute; left: 50%; width: 16px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform 0.35s var(--ease); }
.v2-menu-bars { top: calc(50% - 4px); transform: translateX(-50%); }
.v2-menu-bars::before { content: ""; top: 7px; transform: translateX(-50%); }
.nav-open .v2-menu-bars { transform: translate(-50%, 3.5px) rotate(45deg); }
.nav-open .v2-menu-bars::before { transform: translate(-50%, -7px) rotate(-90deg); }

@media (max-width: 900px) {
	.v2-menu-btn { display: grid; }
	.v2-actions { margin-inline-start: auto; }
	.v2-brand img { width: 112px; }
	.v2-nav {
		position: fixed; top: 88px; left: 14px; right: 14px; margin: 0;
		max-height: calc(100vh - 104px); overflow-y: auto;
		padding: 10px; border-radius: 24px; border: 1px solid var(--line);
		background: var(--surface); box-shadow: var(--shadow);
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s;
		/* الاسكرول جوه القائمة ما يوصلش للصفحة اللي وراها */
		overscroll-behavior: contain;
	}
	/* القائمة مفتوحة: الصفحة اللي وراها ما بتتحركش (v2.js بيحط nav-lock على <html>) */
	.nav-lock, .nav-lock body { overflow: hidden; }
	.admin-bar .v2-nav { top: calc(88px + var(--wp-admin--admin-bar--height, 46px)); }
	/* القائمة ما تنزلش تحت آخر الشاشة لما شريط الإعلان باين */
	.has-announce .v2-nav { max-height: calc(100vh - 104px - var(--announce-shift, 42px)); }
	.nav-open .v2-nav { opacity: 1; visibility: visible; transform: none; }
	.v2-nav .menu { flex-direction: column; }
	.v2-nav .menu > li > a { padding: 14px 16px; border-radius: 14px; font-size: 17px; }
	.v2-nav .menu-item-has-children > a::after { display: none; }
	.v2-nav .menu > .menu-item-has-children > a { padding-bottom: 4px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: none; }
	.v2-nav .sub-menu { position: static; min-width: 0; margin: 0; padding: 0 0 6px; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
	.v2-nav .sub-menu::before { display: none; }
}
@media (max-width: 420px) {
	.v2-header-inner { padding-inline: 14px 8px; gap: 8px; }
	.v2-brand img { width: 100px; }
	.v2-btn-sm { padding: 0 14px; }
	.v2-actions { gap: 6px; }
	.v2-lang { height: 38px; }
	.v2-lang a { min-width: 38px; padding-inline: 6px; }
}
/* الموبايل كله (لحد 600px، يعني الآيفون الكبير 428–440 كمان): زرار Contact بينزل تحت القائمة (header.php → v2-nav-cta)
   علشان اللوجو وزرار اللغة وزرار القائمة ياخدوا مكانهم. لو فضل فوق، كان بيزق زرار القائمة بره الشاشة. */
@media (max-width: 600px) {
	.v2-actions > .v2-btn { display: none; }
	.v2-nav .v2-nav-cta { display: flex; margin: 8px 6px 4px; }
}
.v2-nav-cta { display: none; }
/* نص الزرار من التخصيص ممكن يبقى طويل: ما يكبرش عن كده، وزرار القائمة ما يتزقش بره */
.v2-actions > .v2-btn { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-actions > .v2-menu-btn { flex: none; }
.v2-brand { flex: none; }
/* الانتقال بين الصفحات: الصفحة بتبهت وتظهر الجديدة، والهيدر ثابت مكانه (المتصفحات اللي بتدعمها بس) */
@view-transition { navigation: auto; }
.v2-header { view-transition-name: v2-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }

/* === 7. MENU ICONS === */
/* أيقونة Qthemy Slider Builder (functions.php → qthemy_get_plugin_icon) وبتترسم من الأول لما تاخد is-playing */
.qpi { display: block; flex: none; --qpi-line: 34px; }
.qpi-bg { fill: #0f172a; }
.qpi-light { mix-blend-mode: overlay; opacity: 0.5; }
.qpi-line { opacity: 0; }
.qpi-line path { stroke-width: var(--qpi-line); stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100 110; }
.qpi-sweep { opacity: 0; }
.qpi-shape { transform-origin: 512px 512px; }
.qpi.is-playing .qpi-shape { animation: qpi-shape 3.3s both; }
.qpi.is-playing .qpi-fill { animation: qpi-fill 3.3s both; }
.qpi.is-playing .qpi-light { animation: qpi-light 3.3s both; }
.qpi.is-playing .qpi-line { animation: qpi-line 3.3s both; }
.qpi.is-playing .qpi-line path { animation: qpi-draw 3.3s both; }
.qpi.is-playing .qpi-sweep { animation: qpi-sweep 3.3s both; }
@keyframes qpi-shape { 0% { transform: scale(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 10.6%, 13.5% { transform: scale(0.95); } 13.6%, 100% { transform: scale(1); } }
@keyframes qpi-fill { 0% { opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 10.6%, 37.9% { opacity: 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } 51.5%, 100% { opacity: 1; } }
@keyframes qpi-light { 0%, 10.6% { opacity: 0.5; } 13.6%, 48.5% { opacity: 0; animation-timing-function: ease-in-out; } 78.8%, 100% { opacity: 0.5; } }
@keyframes qpi-line { 0%, 13.5% { opacity: 0; } 13.6%, 39.4% { opacity: 1; animation-timing-function: ease-in-out; } 53%, 100% { opacity: 0; } }
@keyframes qpi-draw { 0%, 13.6% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 43.9%, 100% { stroke-dashoffset: 0; } }
@keyframes qpi-sweep { 0%, 74.2% { opacity: 0; transform: translateX(-220px); animation-timing-function: ease-in-out; } 74.3% { opacity: 1; } 97% { opacity: 1; transform: translateX(1244px); } 100% { opacity: 0; transform: translateX(1244px); } }
/* مربع Soon بتاع الثيمات: صفحة صغيرة بتتبني وتعيد */
.soon-tile { position: relative; display: block; flex: none; width: 46px; height: 46px; border-radius: 10%; overflow: hidden; background: #0f172a; }
.soon-tile i { position: absolute; border-radius: 2px; transform-origin: left center; animation: soon-build 3.2s var(--ease) infinite both; }
[dir="rtl"] .soon-tile i { transform-origin: right center; }
.soon-tile i:nth-child(1) { top: 15%; inset-inline-start: 14%; width: 72%; height: 8%; background: rgba(255, 255, 255, 0.55); }
.soon-tile i:nth-child(2) { top: 31%; inset-inline-start: 14%; width: 40%; height: 24%; background: linear-gradient(135deg, #4c8dff, #0265df); animation-delay: 0.18s; }
.soon-tile i:nth-child(3) { top: 31%; inset-inline-start: 60%; width: 26%; height: 24%; background: #9cc2ff; animation-delay: 0.36s; }
.soon-tile i:nth-child(4) { top: 62%; inset-inline-start: 14%; width: 33%; height: 22%; background: rgba(255, 255, 255, 0.28); animation-delay: 0.54s; }
.soon-tile i:nth-child(5) { top: 62%; inset-inline-start: 53%; width: 33%; height: 22%; background: rgba(255, 255, 255, 0.28); animation-delay: 0.7s; }
@keyframes soon-build { 0% { transform: scaleX(0); opacity: 1; } 18%, 80% { transform: scaleX(1); opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }
.badge-soon { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; color: var(--accent); background: var(--hover); }
[data-theme="dark"] .badge-soon { color: var(--accent-2); }

/* === 8. SLOTS === */
/* المقاسات الثابتة للأماكن (علشان الصفحة متتنططش وهي بتحمّل).
   مكان السلايدر بياخد المقاس ده بس وهو فاضي؛ لما السلايدر يتحط، طوله بيتحدد من الإضافة لكل جهاز. */
.v2-ratio-hero > .slot-empty { aspect-ratio: 1200 / 620; }
.v2-ratio-media { aspect-ratio: 1200 / 750; }
.v2-ratio-portrait { aspect-ratio: 800 / 1000; }
.media-file { width: 100%; height: 100%; object-fit: cover; }
/* مكان لسه ما اتضافلوش سلايدر أو صورة: خطوط مايلة هادية، والأدمن بس بيشوف المطلوب */
.slot-empty {
	display: grid; place-content: center; gap: 8px; justify-items: center;
	width: 100%; height: 100%; min-height: 220px; padding: 24px; text-align: center;
	background: repeating-linear-gradient(-45deg, transparent 0 14px, var(--line) 14px 15px), var(--bg-2);
	color: var(--ink-3);
}
.slot-empty-mark { width: 44px; height: 44px; border-radius: 12px; border: 1.5px dashed var(--line-2); }
.slot-empty-title { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.slot-empty-hint { max-width: 40ch; font-family: var(--mono); font-size: 12px; }

/* === 9. HERO === */
.v2-hero { padding-top: clamp(130px, 16vw, 190px); }
.v2-hero-label { display: flex; flex-wrap: wrap; gap: 6px 0; }
.v2-hero-label span + span::before { content: "/"; margin-inline: 12px; opacity: 0.5; }
.v2-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: clamp(30px, 4vw, 48px); }
.v2-hero-row .v2-lead { margin: 0; max-width: 30em; }
/* المتصفح اللي جواه السلايدر: بيبدأ صغير (حوالي 55%) وبيكبر لحد مقاسه وإنت نازل، وبيصغر تاني لو طلعت.
   --p من 0 لـ 1 (v2.js)، ومتربّعة علشان الكبر يبدأ هادي ويسرّع. */
.v2-hero-stage { position: relative; width: min(1360px, 100% - 32px); margin: clamp(56px, 7vw, 90px) auto 0; }
.v2-browser {
	position: relative; z-index: 1;
	overflow: hidden; border-radius: 24px; border: 1px solid var(--line);
	background: var(--surface); box-shadow: var(--shadow);
	transform: scale(calc(0.55 + 0.45 * var(--p, 1) * var(--p, 1)));
	transform-origin: 50% 0;
	will-change: transform;
}
/* الكروت الصغيرة الطايرة حوالين المتصفح: بتطلع لفوق أسرع منه شوية وإنت نازل، وبتتهز هزة خفيفة */
.v2-chip {
	position: absolute; z-index: 2;
	display: flex; align-items: center; gap: 10px;
	padding-block: 10px; padding-inline: 10px 16px; border-radius: 16px;
	background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
	font-size: 14px; color: var(--ink);
	translate: 0 calc((1 - var(--p, 1)) * 70px);
	animation: v2-float 6s ease-in-out infinite;
}
.v2-chip b { font-weight: 700; white-space: nowrap; }
.v2-chip-devices { top: 6%; inset-inline-start: 2%; padding-inline-start: 12px; }
.v2-chip-rtl { top: 30%; inset-inline-end: 1%; animation-delay: -2s; }
.v2-chip-free { bottom: 10%; inset-inline-end: 3%; animation-delay: -4s; }
.v2-chip-dev { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ink-3); }
.v2-chip-dev.is-on { background: var(--accent); color: #fff; }
.v2-chip-dev i { display: block; border: 1.6px solid currentColor; border-radius: 2px; }
.v2-chip-dev .dev-desktop { width: 16px; height: 11px; }
.v2-chip-dev .dev-laptop { width: 14px; height: 9px; box-shadow: 0 3px 0 -1.4px currentColor; }
.v2-chip-dev .dev-tablet { width: 10px; height: 13px; }
.v2-chip-dev .dev-phone { width: 7px; height: 13px; border-radius: 2.5px; }
.v2-chip-ar { display: grid; place-items: center; height: 32px; padding-inline: 10px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; }
.v2-chip-wp { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--bg); }
@keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 760px) {
	.v2-chip { display: none; }
	/* على الموبايل الشاشة صغيرة أصلًا، فبيبدأ من 82% بس */
	.v2-browser { transform: scale(calc(0.82 + 0.18 * var(--p, 1) * var(--p, 1))); }
}
.v2-browser-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding-inline: 16px; border-bottom: 1px solid var(--line); }
.v2-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.v2-browser-bar span { display: inline-flex; align-items: center; gap: 8px; margin-inline: auto; padding: 4px 14px; border-radius: 8px; background: var(--bg); font-family: var(--mono); font-size: 12px; color: var(--ink-3); transform: translateX(-21px); }
/* isolation: أرقام z-index اللي جوه السلايدر تفضل جواه وما تطلعش فوق الهيدر */
.v2-browser-body { position: relative; isolation: isolate; background: var(--bg-2); }
.v2-caption { margin: 18px 0 0; text-align: center; }

/* === 10. STATEMENT === */
/* جملة في النص، أصغر من العناوين، ومن غير مسافة كبيرة تحتها */
.v2-statement { padding-block: clamp(56px, 7vw, 100px) clamp(24px, 3vw, 40px); text-align: center; }
.v2-statement .v2-label { display: block; }
.v2-statement-text { max-width: 31ch; margin: 0 auto; font-size: clamp(25px, 3.2vw, 44px); font-weight: 700; line-height: 1.24; letter-spacing: -0.03em; color: var(--ink); }
/* كل كلمة بتنوّر لما خط القراية يعدّي عليها: --p (من v2.js) × عدد الكلمات --n − ترتيب الكلمة --i */
.v2-statement-text .sw > span { opacity: calc(0.16 + 0.84 * clamp(0, var(--p, 1) * var(--n, 1) - var(--i, 0), 1)); transition: opacity 0.15s linear; }

/* === 11. PRODUCT === */
/* آخر خطوة فيها مسافة فاضية تحتها أصلًا، فالقسم نفسه مسافته من تحت أقل */
.v2-product { padding-bottom: clamp(24px, 3vw, 48px); }
.v2-section-head { margin-bottom: clamp(28px, 4vw, 52px); }
.v2-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-top: 28px; }
.v2-head-row .v2-lead { margin: 0; }
/* الشاشة على اليمين ثابتة، والخطوات على الشمال بتعدّي جنبها، والصورة بتتغير مع كل خطوة */
.v2-steps { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); grid-template-areas: "list screen"; gap: 0 clamp(40px, 6vw, 96px); }
.v2-steps-list { grid-area: list; list-style: none; margin: 0; padding: 0; }
/* الشاشة الثابتة في نص الشاشة بالظبط (تحت الهيدر) طول ما الخطوات بتعدّي.
   --sh = ارتفاع الشاشة (v2.js بيقيسه)، ومن غير JS بتقف تحت الهيدر على طول. */
.v2-steps-screen { grid-area: screen; position: sticky; top: max(84px, calc(50vh + 42px - var(--sh, 100vh) / 2)); align-self: start; }
.v2-steps-screen .v2-screen { width: 100%; }
.v2-step { display: flex; flex-direction: column; justify-content: center; min-height: clamp(280px, 46vh, 420px); padding-block: 20px; opacity: 0.3; transition: opacity 0.5s var(--ease); }
.v2-step.is-active { opacity: 1; }
.v2-step-num { margin-bottom: 18px; font-family: var(--mono); font-size: 13px; color: var(--accent); }
.v2-step h3 { margin-bottom: 16px; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.04em; line-height: 1.02; }
.v2-step p { max-width: 30ch; margin: 0; font-size: 18px; }
.v2-screen { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.v2-screen-item { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); }
.v2-screen-item.is-active { opacity: 1; transform: none; }
@media (max-width: 900px) {
	.v2-steps { grid-template-columns: minmax(0, 1fr); grid-template-areas: "screen" "list"; }
	.v2-steps-screen { top: 88px; z-index: 2; display: block; height: auto; padding-block: 0 16px; background: var(--bg); }
	.v2-step { min-height: 52vh; padding-block: 24px; }
}

/* === 12. SHOWCASE === */
.v2-showcase .v2-center .v2-lead { margin: 26px auto 0; }
.v2-showcase .v2-label { display: block; }
.v2-showcase-frame { position: relative; isolation: isolate; margin-top: clamp(32px, 4vw, 56px); }
.v2-showcase-frame .slot-empty { aspect-ratio: 1400 / 600; border-radius: 24px; }

/* === 13. FEATURES === */
/* عنوان على الشمال ووصف على اليمين، وتحتهم كروت بأحجام مختلفة (bento) */
.v2-split-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 24px 60px; margin-bottom: clamp(28px, 4vw, 52px); }
.v2-split-head .v2-lead { margin: 0; }
.v2-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); gap: 16px; }
.v2-card {
	position: relative; display: flex; flex-direction: column; gap: 10px;
	padding: clamp(24px, 2.4vw, 32px); border-radius: 26px; overflow: hidden;
	background: var(--surface); border: 1px solid var(--line);
	transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.v2-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.v2-card h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.035em; line-height: 1.1; }
.v2-card p { margin: 0; max-width: 40ch; font-size: 15.5px; }
.v2-card .v2-card-label { margin-bottom: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.v2-card .v2-card-big { max-width: none; font-size: clamp(54px, 5vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.v2-card-devices { grid-column: span 2; grid-row: span 2; }
.v2-card-ink { grid-column: span 2; }
/* الكارت الأزرق والكارت الكحلي */
.v2-card-accent { background: var(--panel-bg); border-color: transparent; color: #c3cbdb; }
.v2-card-ink { background: var(--panel-bg); border-color: transparent; color: #b9c3d8; }
[data-theme="dark"] :is(.v2-card-accent, .v2-card-ink) { border-color: rgba(255, 255, 255, 0.07); }
.v2-card-accent h3, .v2-card-ink h3, .v2-card-accent .v2-card-big, .v2-card-ink .v2-card-big { color: #fff; }
.v2-card-accent .v2-card-label, .v2-card-ink .v2-card-label { color: rgba(255, 255, 255, 0.6); }
.v2-card-accent .v2-card-big { font-weight: 800; line-height: 1.35; letter-spacing: 0; }
.v2-card-ink .v2-link { align-self: flex-start; margin-top: 6px; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.v2-card-ink .v2-link:hover { color: var(--yellow); border-color: var(--yellow); }
.v2-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; }
.v2-tags li { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; color: var(--ink); }
/* رسمة نفس الشريحة على 4 أجهزة: العنوان والوصف والزرار مكانهم بيختلف على كل جهاز */
.v2-devices { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 1.6vw, 18px); margin-top: auto; padding-top: 30px; }
.v2-dev { position: relative; flex: none; overflow: hidden; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(140deg, #0238b4, #4c8dff); }
.v2-dev-desktop { width: 44%; aspect-ratio: 16 / 10; }
.v2-dev-laptop { width: 29%; aspect-ratio: 16 / 10; border-radius: 10px 10px 4px 4px; }
.v2-dev-tablet { width: 14%; aspect-ratio: 3 / 4; }
.v2-dev-phone { width: 8.5%; aspect-ratio: 9 / 19; border-radius: 12px; }
.v2-dev i { position: absolute; height: 8%; border-radius: 3px; background: #fff; transition: inset 0.8s var(--ease), width 0.8s var(--ease); }
.v2-dev .s { height: 5%; opacity: 0.6; }
.v2-dev .b { height: 10%; border-radius: 99px; background: var(--yellow); }
.v2-dev-desktop .t { top: 30%; inset-inline-start: 8%; width: 46%; }
.v2-dev-desktop .s { top: 45%; inset-inline-start: 8%; width: 34%; }
.v2-dev-desktop .b { top: 58%; inset-inline-start: 8%; width: 16%; }
.v2-dev-laptop .t { top: 30%; inset-inline-start: 10%; width: 52%; }
.v2-dev-laptop .s { top: 45%; inset-inline-start: 10%; width: 40%; }
.v2-dev-laptop .b { top: 58%; inset-inline-start: 10%; width: 20%; }
.v2-dev-tablet .t { top: 28%; inset-inline-start: 14%; width: 72%; }
.v2-dev-tablet .s { top: 40%; inset-inline-start: 22%; width: 56%; }
.v2-dev-tablet .b { top: 52%; inset-inline-start: 30%; width: 40%; height: 8%; }
.v2-dev-phone .t { top: 34%; inset-inline-start: 13%; width: 74%; height: 5%; }
.v2-dev-phone .s { top: 42%; inset-inline-start: 13%; width: 56%; height: 3%; }
.v2-dev-phone .b { top: 50%; inset-inline-start: 13%; width: 60%; height: 5%; }
[data-theme="dark"] .v2-dev { border-color: #3a4766; }
@media (max-width: 900px) {
	.v2-split-head { grid-template-columns: 1fr; }
	.v2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v2-card-devices, .v2-card-ink { grid-column: span 2; }
	.v2-card-devices { grid-row: auto; }
}
@media (max-width: 600px) {
	.v2-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	.v2-card-devices, .v2-card-ink { grid-column: auto; }
}

/* === 14. PRO === */
/* كارت كحلي في الوضعين، والأصفر فيه لأنه لون الإضافة. الكارت نفسه فاصل، فمسافته أقل من باقي الأقسام */
.v2-pro { padding-block: clamp(24px, 3vw, 44px); }
.v2-pro-card {
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px 60px; align-items: end;
	padding: clamp(32px, 5vw, 72px); border-radius: 32px;
	background: var(--panel-bg);
	color: #b9c3d8;
}
[data-theme="dark"] .v2-pro-card { border: 1px solid var(--line); }
.v2-pro-card .v2-label { color: #8792ad; }
.v2-pro-card h2 { color: #fff; }
.v2-pro-card h2 em { color: var(--yellow); }
.v2-pro-text { max-width: 36ch; margin: 24px 0 0; font-size: 18px; }
.v2-pro-side { display: grid; gap: 18px; justify-items: start; }
.v2-pro-price { margin: 0; font-size: clamp(54px, 6vw, 84px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: #fff; }
.v2-pro-price span { font-size: 16px; font-weight: 600; letter-spacing: 0; color: #8792ad; }
.v2-pro-note { margin: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #8792ad; }
@media (max-width: 900px) { .v2-pro-card { grid-template-columns: 1fr; } }

/* === 15. STUDIO === */
.v2-studio-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px clamp(40px, 7vw, 110px); align-items: center; }
.v2-studio-photo { margin: 0; overflow: hidden; border-radius: 26px; background: var(--bg-2); }
.v2-studio-text .v2-lead { margin: 28px 0 30px; }
/* لما مفيش صورة studio.jpg: كارت كحلي (زي كارت Pro) فيه اللوجو، وتحته منتجات Qthemy */
.v2-studio-photo.is-card { background: none; }
.v2-studio-card {
	display: flex; flex-direction: column; gap: 18px; height: 100%; padding: clamp(22px, 2.6vw, 34px);
	border-radius: 26px; color: #b9c3d8;
	background: var(--panel-bg);
}
[data-theme="dark"] .v2-studio-card { border: 1px solid var(--line); }
.v2-studio-card-top { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #8792ad; }
.v2-studio-card-top [lang="ar"] { font-family: var(--font); font-size: 13px; letter-spacing: 0; }
.v2-studio-card-logo { width: 44%; margin: auto; filter: drop-shadow(0 24px 40px rgba(2, 101, 223, 0.5)); animation: v2-float 7s ease-in-out infinite; }
.v2-studio-card-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.v2-studio-card-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06); }
.v2-studio-card-icon { width: 40px; height: 40px; border-radius: 10px; }
.v2-studio-card-list li > span:not(.soon-tile) { display: grid; flex: 1; gap: 2px; min-width: 0; line-height: 1.3; }
.v2-studio-card-list strong { font-size: 15.5px; color: #fff; }
.v2-studio-card-list small { font-size: 13px; color: #8792ad; text-wrap: balance; }
.v2-studio-card-list em { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--yellow); font-family: var(--mono); font-size: 11px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #0b1530; }
.v2-studio-card-list em.is-soon { background: rgba(255, 255, 255, 0.1); color: #b9c3d8; }
@media (max-width: 480px) {
	.v2-studio-card { padding: 18px; }
	.v2-studio-card-list li { position: relative; gap: 12px; padding: 12px; }
	.v2-studio-card-icon { width: 36px; height: 36px; }
	.v2-studio-card-list strong { padding-inline-end: 84px; }
	.v2-studio-card-list em { position: absolute; top: 12px; inset-inline-end: 12px; padding: 3px 8px; font-size: 10px; }
}
@media (max-width: 900px) { .v2-studio-grid { grid-template-columns: 1fr; } .v2-studio-photo { max-width: 460px; } }

/* === 16. THEMES === */
.v2-themes, .v2-cta { padding-top: 0; }
.v2-themes-row, .v2-cta-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; padding-top: clamp(36px, 4.5vw, 60px); border-top: 1px solid var(--line-2); }

/* === 17. FOOTER === */
.v2-footer { overflow: hidden; background: var(--footer-bg); color: #9aa5bd; padding-top: clamp(56px, 7vw, 96px); }
.v2-footer .v2-label { color: #7d88a3; }
.v2-footer-top { padding-bottom: clamp(36px, 5vw, 64px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.v2-footer-mail { display: inline-flex; align-items: baseline; gap: 14px; font-size: clamp(30px, 5vw, 72px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: #fff; }
.v2-footer-mail:hover { color: #fff; }
.v2-footer-mail span { font-size: 0.6em; color: var(--yellow); transition: transform 0.4s var(--ease); }
.v2-footer-mail:hover span { transform: translate(4px, -4px); }
.v2-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 40px; }
.v2-footer-col ul { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.v2-footer-col a { color: #c9d1e1; font-size: 15.5px; }
.v2-footer-col a:hover { color: #fff; }
/* كلمة QTHEMY العملاقة في آخر الصفحة */
/* الكلمة العملاقة للزينة بس: الـ opacity بتخليها ترتسم فوق السطر اللي تحتها، فما بتاخدش أي ضغطة،
   وسطر الحقوق والسوشيال فوقها (من غير كده أيقونات السوشيال ماكانتش بتتداس) */
.v2-footer-word { margin-bottom: -0.2em; font-size: clamp(90px, 23vw, 380px); font-weight: 800; line-height: 1; letter-spacing: -0.07em; text-align: center; color: #fff; opacity: 0.06; user-select: none; pointer-events: none; }
.v2-footer-bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.v2-footer-bottom p { margin: 0; }
/* أيقونات السوشيال (بيظهر بس اللي ليه لينك) */
.v2-social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.v2-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); color: #c9d1e1; transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease); }
.v2-social a:hover { background: #fff; border-color: #fff; color: #0b1530; transform: translateY(-3px); }
.v2-social .icon { width: 19px; height: 19px; }
@media (max-width: 640px) { .v2-footer-cols { grid-template-columns: 1fr 1fr; } }

/* === 18. PAGE HEAD === */
/* رأس الصفحات الداخلية (template-parts/page-hero.php): مسار صغير، وعنوان كبير على الشمال، والوصف تحته */
.v2-page-head { padding-top: clamp(124px, 14vw, 180px); padding-bottom: clamp(40px, 5vw, 72px); }
.v2-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.v2-crumbs > * + *::before { content: "/"; margin-inline: 12px; opacity: 0.5; }
.v2-crumbs a { color: inherit; transition: color 0.25s; }
.v2-crumbs a:hover { color: var(--ink); }
.v2-page-title { max-width: 16ch; font-size: clamp(44px, 6.6vw, 100px); line-height: 0.95; letter-spacing: -0.05em; }
.v2-page-head > .v2-wrap > .v2-lead { margin: clamp(22px, 3vw, 36px) 0 0; }
.v2-page-head .v2-hero-row { margin-top: clamp(26px, 3.4vw, 40px); }
.v2-page-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
/* صفحات المتجر (السلة والدفع وحسابي): عنوان أصغر */
.v2-page-head.is-compact { padding-bottom: clamp(24px, 3vw, 40px); }
.v2-page-head.is-compact .v2-page-title { font-size: clamp(36px, 4.6vw, 64px); }
.v2-post-headline { max-width: 22ch; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; }
/* قسم بعد قسم بنفس الخلفية: من غير مسافة فوق، علشان المسافة متتضاعفش */
.v2-flush-top { padding-top: 0; }

/* === 19. CARDS === */
/* كل الكروت في الصفحات الداخلية بنفس شكل كروت الرئيسية (قسم 13): خلفية وإطار رفيع وحواف دائرية، وكل كارت منفصل عن التاني */
.v2-spec-item, .v2-plan, .v2-start li, .v2-roadmap li, .v2-faq details, .v2-contact-row, .v2-links a, .v2-jump a, .v2-post-nav-link, .v2-toc, .v2-facts {
	border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
}
/* بيطلع لفوق شوية لما الماوس يقف عليه (زي الرئيسية) */
.v2-spec-item, .v2-plan, .v2-start li, .v2-roadmap li, .v2-links a, .v2-jump a, .v2-post-nav-link { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), color 0.25s; }
.v2-spec-item:hover, .v2-plan:hover, .v2-start li:hover, .v2-roadmap li:hover, .v2-links a:hover, .v2-jump a:hover, .v2-post-nav-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
/* كروت المميزات: أيقونة ورقم فوق، وتحت العنوان والوصف. 3 أعمدة، أو 4 مع v2-spec-4 */
.v2-spec { --cols: 3; list-style: none; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.v2-spec-4 { --cols: 4; }
.v2-spec-item { display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px); }
.v2-spec-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(26px, 3.4vw, 44px); color: var(--ink-3); }
.v2-spec-top .icon { width: 22px; height: 22px; color: var(--ink); }
.v2-spec-top span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.v2-spec-item h3 { margin-bottom: 10px; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -0.03em; line-height: 1.2; }
.v2-spec-item p { margin: 0; max-width: 36ch; font-size: 15.5px; line-height: 1.55; }
@media (max-width: 900px) { .v2-spec, .v2-spec-4 { --cols: 2; } }
@media (max-width: 560px) {
	.v2-spec, .v2-spec-4 { --cols: 1; }
	.v2-spec-top { margin-bottom: 18px; }
}

/* === 20. PRICING === */
/* رسالة "البيع لسه مقفول" فوق الباقات */
.v2-note { max-width: 760px; margin: 0 0 24px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(253, 191, 56, 0.55); background: rgba(253, 191, 56, 0.12); color: var(--ink); font-size: 15px; }
.v2-note a { margin-inline-start: 6px; font-weight: 700; }
/* كل باقة كارت لوحدها، والمميزة كحلي في الوضعين */
.v2-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v2-plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: 28px; }
.v2-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.v2-plan-head h3 { font-size: 22px; letter-spacing: -0.03em; }
.v2-plan-for { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); }
.v2-plan-price { display: flex; align-items: baseline; gap: 8px; margin: clamp(28px, 4vw, 48px) 0 clamp(22px, 2.6vw, 30px); padding-bottom: clamp(22px, 2.6vw, 30px); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.v2-plan-amount { font-size: clamp(56px, 5.6vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -0.055em; color: var(--ink); }
.v2-plan-period { font-weight: 600; color: var(--ink-3); }
.v2-plan .v2-checks { margin-bottom: 32px; }
.v2-plan .v2-btn { width: 100%; margin-top: auto; }
.v2-plan.is-featured {
	--ink: #fff; --ink-2: #c3cbdc; --ink-3: #8792ad; --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.26); --accent: var(--yellow);
	background: radial-gradient(90% 70% at 100% 0%, rgba(2, 101, 223, 0.4), transparent 65%), #0b1530;
	color: var(--ink-2);
}
.v2-plan-flag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.v2-plan-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v2-plan-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 22px 0 0; padding: 0; font-size: 14.5px; }
.v2-plan-notes li { display: flex; align-items: center; gap: 8px; }
.v2-plan-notes .icon { width: 18px; height: 18px; color: var(--accent); }
/* علامة صح رفيعة قبل كل سطر */
.v2-checks { list-style: none; display: grid; gap: 11px; margin: 0 0 28px; padding: 0; font-size: 15.5px; }
.v2-checks li { position: relative; padding-inline-start: 28px; line-height: 1.5; }
.v2-checks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.42em; width: 12px; height: 6.5px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
@media (max-width: 900px) { .v2-plans { grid-template-columns: minmax(0, 1fr); } }

/* === 21. COMPARE === */
.v2-compare { overflow-x: auto; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.v2-compare table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; }
.v2-compare th, .v2-compare td { padding: 16px 22px; border-top: 1px solid var(--line); text-align: center; }
.v2-compare thead th { border-top: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.v2-compare thead th:first-child, .v2-compare tbody th { text-align: start; }
.v2-compare tbody th { font-weight: 600; line-height: 1.4; color: var(--ink); }
.v2-compare td { width: 120px; }
/* عمود Pro عليه لمسة أصفر خفيفة */
.v2-compare td:last-child, .v2-compare .v2-col-pro { background: rgba(253, 191, 56, 0.08); }
.v2-compare .v2-col-pro { color: #9a6500; }
[data-theme="dark"] .v2-compare .v2-col-pro { color: var(--yellow); }
.v2-compare tbody tr { transition: background-color 0.25s; }
.v2-compare tbody tr:hover { background: var(--hover); }
.v2-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); vertical-align: middle; }
.v2-yes .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.v2-compare td:last-child .v2-yes { background: var(--yellow); color: #0b1530; }
.v2-no { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--line-2); vertical-align: middle; }
@media (max-width: 560px) {
	/* على الموبايل الجدول كله بيبان من غير سحب للجنب: عمود الميزة بيلف على سطرين */
	.v2-compare table { min-width: 0; }
	.v2-compare th, .v2-compare td { padding: 12px 14px; font-size: 14px; }
	.v2-compare td { width: 56px; padding-inline: 6px; }
}

/* === 22. GET STARTED === */
/* 3 كروت جنب بعض، كل واحد عليه رقمه */
.v2-start { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.v2-start li { padding: clamp(24px, 2.4vw, 32px); }
.v2-start-num { display: block; margin-bottom: clamp(24px, 3vw, 40px); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; color: var(--ink-3); }
.v2-start h3 { margin-bottom: 10px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.035em; line-height: 1.1; }
.v2-start p { margin: 0; max-width: 34ch; }
@media (max-width: 760px) { .v2-start { grid-template-columns: minmax(0, 1fr); } }

/* === 23. FAQ === */
/* العنوان على الشمال ثابت وإنت نازل، والأسئلة على اليمين كل واحد في كارت، وعلامة + بتلف لما السؤال يفتح */
.v2-faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px clamp(40px, 7vw, 110px); align-items: start; }
.v2-faq-side { position: sticky; top: 110px; }
.v2-faq-more { max-width: 30ch; margin: 24px 0 0; color: var(--ink-3); }
.v2-faq-more a { font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.v2-faq-more a:hover { color: var(--accent); border-color: var(--accent); }
.v2-faq { display: grid; gap: 10px; }
.v2-faq details { padding: 0 24px; border-radius: 20px; transition: border-color 0.3s; }
.v2-faq details[open] { border-color: var(--line-2); }
.v2-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; list-style: none; cursor: pointer; font-size: clamp(17px, 1.4vw, 19px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); transition: color 0.25s; }
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat; transition: transform 0.4s var(--ease); }
.v2-faq details[open] summary::after { transform: rotate(135deg); }
.v2-faq summary:hover { color: var(--accent); }
.v2-faq details p { max-width: 62ch; margin: -4px 0 0; padding-bottom: 22px; }
@media (max-width: 900px) {
	.v2-faq-grid { grid-template-columns: minmax(0, 1fr); }
	.v2-faq-side { position: static; }
}

/* === 24. CTA & BAND === */
/* الجملة الأخيرة في الصفحة: نفس شكل "Themes are on the way" (قسم 16) */
.v2-label-icon { display: flex; align-items: center; gap: 10px; }
.v2-label-qpi { width: 26px; height: 26px; --qpi-line: 44px; }
/* شريط كحلي بعرض الصفحة (قسم Pro في صفحة الإضافة): الألوان بتتقلب جواه لوحدها، والكروت جواه كحلي أفتح */
.v2-band {
	--bg: var(--panel); --surface: var(--panel-2); --ink: #fff; --ink-2: #b9c3d8; --ink-3: #8792ad;
	--line: rgba(255, 255, 255, 0.1); --line-2: rgba(255, 255, 255, 0.2); --hover: rgba(255, 255, 255, 0.06); --accent: var(--yellow);
	--shadow-sm: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
	background: var(--bg); color: var(--ink-2);
}
[data-theme="dark"] .v2-band { border-block: 1px solid rgba(255, 255, 255, 0.06); }
.v2-band .v2-spec-top .icon { color: var(--yellow); }

/* === 25. DOC === */
/* السياسات والمقالات: عمود القراية، وجنبه كارت فيه فهرس العناوين (بيلزق وإنت نازل، والجزء اللي بتقراه بيتعلّم) */
.v2-doc { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 40px clamp(40px, 7vw, 110px); align-items: start; }
.v2-doc.no-toc { grid-template-columns: minmax(0, 1fr); }
.v2-toc { position: sticky; top: 104px; max-height: calc(100vh - 130px); overflow-y: auto; padding: 18px 12px 12px; border-radius: 20px; font-size: 14px; }
.v2-toc .v2-label { margin: 0 0 10px; padding-inline: 10px; }
.v2-toc ol { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.v2-toc a { display: block; padding: 7px 10px; border-radius: 10px; line-height: 1.35; color: var(--ink-3); transition: color 0.25s, background-color 0.25s; }
.v2-toc a:hover { color: var(--ink); background: var(--hover); }
.v2-toc a[aria-current="true"] { color: var(--ink); background: var(--hover); }
.v2-prose { max-width: 68ch; font-size: 18px; line-height: 1.72; color: var(--ink-2); }
.v2-prose > :first-child { margin-top: 0; }
/* فقرة فاضية من المحرر (سطر فاضي بعد سلايدر مثلًا) ما تعملش مسافة زيادة */
.v2-prose > p:empty { display: none; }
.v2-prose p { margin: 0 0 1.15em; }
.v2-prose h2 { margin: 2.1em 0 0.65em; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.15; scroll-margin-top: 104px; }
.v2-prose h3 { margin: 1.8em 0 0.5em; font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
.v2-prose h4 { margin: 1.6em 0 0.4em; font-size: 18px; color: var(--ink); }
.v2-prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color 0.25s, text-decoration-color 0.25s; }
.v2-prose a:hover { color: var(--accent); text-decoration-color: currentColor; }
.v2-prose strong { color: var(--ink); }
.v2-prose ul, .v2-prose ol { margin: 0 0 1.2em; padding-inline-start: 1.25em; }
.v2-prose li { margin-bottom: 0.45em; }
.v2-prose li::marker { color: var(--ink-3); }
.v2-prose img { border-radius: 18px; }
.v2-prose figure { margin: 2em 0; }
.v2-prose figcaption { margin-top: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.v2-prose blockquote { margin: 2em 0; padding-inline-start: 24px; border-inline-start: 2px solid var(--ink); font-family: var(--serif); font-style: italic; font-size: 1.25em; line-height: 1.5; color: var(--ink); }
.v2-prose blockquote p { margin: 0 0 0.6em; }
.v2-prose code { padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-family: var(--mono); font-size: 0.86em; }
.v2-prose pre { overflow-x: auto; padding: 18px 20px; border-radius: 14px; background: #0b1530; color: #e8ecf6; font-size: 14.5px; line-height: 1.6; }
.v2-prose pre code { padding: 0; border: 0; background: none; color: inherit; }
.v2-prose hr { height: 1px; margin: 2.6em 0; border: 0; background: var(--line-2); }
.v2-prose table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: 15.5px; }
.v2-prose th, .v2-prose td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.v2-prose th { color: var(--ink); }
.v2-prose .wp-block-button__link { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; }
.v2-prose .wp-block-button__link:hover { background: var(--accent); color: #fff; }
/* صفحة فيها سلايدر (Slider Builder): العمود بياخد عرض الصفحة كله علشان السلايدر مايتصغّرش جامد،
   والكلام العادي جنبه بيفضل بعرض مريح للقراية. وتنسيق الروابط (الخط اللي تحت) مايوصلش لأزرار السلايدر. */
.v2-prose:has(.qthemy-sb-wrap) { max-width: none; }
.v2-prose:has(.qthemy-sb-wrap) > :is(p, h2, h3, h4, ul, ol, blockquote, figure, table) { max-width: 68ch; }
.v2-prose .qthemy-sb-wrap a { text-decoration: none; }
/* قالب الصفحة "Full width" (page-templates/): المحتوى بعرض الموقع، والكلام بيفضل بعرض مريح للقراية.
   "Full width, no title": من غير العنوان الكبير، فالمحتوى بيبدأ تحت الهيدر على طول. */
.v2-prose-wide { max-width: none; }
.v2-prose-wide > :is(p, h2, h3, h4, ul, ol, blockquote) { max-width: 68ch; }
.v2-blank-page { padding-top: clamp(104px, 10vw, 128px); }
/* مربع "مسافات الصفحة" (inc/page-options.php): المحتوى يبدأ من أول الصفحة خلف الهيدر، أو آخر عنصر يلزق في الفوتر */
.v2-blank-page.is-flush-top { padding-top: 0; }
.is-flush-bottom { padding-bottom: 0; }
.is-flush-bottom .v2-prose > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
	.v2-doc { grid-template-columns: minmax(0, 1fr); }
	.v2-toc { position: static; max-height: none; }
}

/* === 26. SINGLE POST === */
.v2-post-cover { margin: 0 0 clamp(40px, 5vw, 72px); overflow: hidden; border-radius: 26px; background: var(--bg-2); }
.v2-post-cover img { width: 100%; max-height: 640px; object-fit: cover; }
.v2-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; }
.v2-post-tags a { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); transition: color 0.25s, border-color 0.25s; }
.v2-post-tags a:hover { color: var(--ink); border-color: var(--ink); }
/* المقال اللي قبله واللي بعده: كارتين جنب بعض */
.v2-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-post-nav-link { display: block; padding: 24px 28px; color: var(--ink); }
.v2-post-nav-link.is-next { grid-column: 2; text-align: end; }
.v2-post-nav-link .v2-label { margin-bottom: 10px; }
.v2-post-nav-link strong { display: block; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.02em; line-height: 1.3; transition: color 0.25s; }
.v2-post-nav-link:hover strong { color: var(--accent); }
/* خط رفيع فوق خالص بيكبر وإنت بتقرا (من غير JavaScript، في المتصفحات اللي بتدعمه بس) */
.v2-progress { display: none; }
@supports (animation-timeline: scroll()) {
	.v2-progress { display: block; position: fixed; top: 0; inset-inline: 0; z-index: 1001; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; animation: v2-progress linear both; animation-timeline: scroll(root); }
	[dir="rtl"] .v2-progress { transform-origin: 100% 50%; }
	.admin-bar .v2-progress { top: var(--wp-admin--admin-bar--height, 32px); }
}
@keyframes v2-progress { to { transform: scaleX(1); } }
@media (max-width: 640px) {
	.v2-post-nav { grid-template-columns: minmax(0, 1fr); }
	.v2-post-nav-link.is-next { grid-column: auto; text-align: start; }
}

/* === 27. BLOG === */
.v2-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 64px) clamp(20px, 2.4vw, 32px); }
.v2-post { display: flex; flex-direction: column; }
.v2-post-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 20px; border-radius: 20px; background: var(--bg-2); }
.v2-post-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.v2-post:hover .v2-post-media > img { transform: scale(1.04); }
.v2-post-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, transparent 0 14px, var(--line) 14px 15px); }
.v2-post-placeholder img { width: 44px; height: 44px; }
.v2-post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.v2-post-meta a { color: var(--accent); }
.v2-post-title { margin-bottom: 10px; font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -0.03em; line-height: 1.2; }
.v2-post-title a { color: var(--ink); }
/* خط تحت العنوان بيترسم من أوله لآخره لما الماوس يقف على المقال */
.v2-post-title a span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.6s var(--ease); }
[dir="rtl"] .v2-post-title a span { background-position: 100% 100%; }
.v2-post:hover .v2-post-title a span, .v2-post-title a:focus-visible span { background-size: 100% 1.5px; }
.v2-post-excerpt { margin: 0; font-size: 15.5px; }
/* أول مقال: كبير بعرض الصفحة، الصورة على جنب والكلام على الجنب التاني */
.v2-post.is-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: center; }
.v2-post.is-featured .v2-post-media { margin: 0; border-radius: 24px; }
.v2-post.is-featured .v2-post-title { margin-bottom: 16px; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.045em; line-height: 1.05; }
.v2-post.is-featured .v2-post-excerpt { max-width: 46ch; font-size: 17px; }
.v2-section .pagination { margin-top: clamp(48px, 6vw, 80px); }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); transition: background-color 0.25s, border-color 0.25s; }
.nav-links a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.nav-links .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.nav-links .page-numbers.dots { border-color: transparent; }
.v2-empty { max-width: 560px; padding-block: clamp(24px, 4vw, 48px); }
.v2-empty h2 { margin-bottom: 12px; font-size: clamp(28px, 3vw, 40px); }
@media (max-width: 980px) { .v2-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.v2-posts { grid-template-columns: minmax(0, 1fr); }
	.v2-post.is-featured { grid-template-columns: minmax(0, 1fr); }
}

/* === 28. CONTACT === */
/* كل طريقة تواصل في كارت: العنوان والوصف، والإيميل كبير، وزرار نسخ */
.v2-contact-list { display: grid; gap: 12px; }
.v2-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; align-items: center; gap: 14px clamp(20px, 3vw, 40px); padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px); }
.v2-contact-row h2 { margin-bottom: 6px; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.03em; line-height: 1.2; }
.v2-contact-row p { margin: 0; font-size: 15.5px; color: var(--ink-3); }
.v2-contact-mail { display: inline-flex; align-items: baseline; gap: 10px; font-size: clamp(22px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; transition: color 0.25s; }
.v2-contact-mail span { font-size: 0.6em; color: var(--accent); transition: transform 0.4s var(--ease); }
.v2-contact-mail:hover { color: var(--accent); }
.v2-contact-mail:hover span { transform: translate(3px, -3px); }
.v2-contact-row .v2-btn { justify-self: end; }
.v2-contact-row .v2-btn .icon { width: 17px; height: 17px; }
.v2-contact-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(24px, 4vw, 64px); margin-top: clamp(28px, 3.4vw, 44px); }
.v2-contact-notes p { display: flex; gap: 14px; margin: 0; font-size: 15.5px; }
.v2-contact-notes .icon { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--ink-3); }
.v2-contact-notes strong { color: var(--ink); }
/* روابط مفيدة: 4 كروت صغيرة وسهم في الركن */
.v2-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v2-links a { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 24px; border-radius: 20px; color: var(--ink); }
.v2-links a::after { content: "↗"; position: absolute; top: 20px; inset-inline-end: 22px; color: var(--ink-3); transition: transform 0.4s var(--ease), color 0.25s; }
.v2-links a:hover::after { color: var(--accent); transform: translate(3px, -3px); }
.v2-links strong { padding-inline-end: 24px; font-size: 17px; letter-spacing: -0.02em; }
.v2-links span { font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 900px) {
	.v2-contact-row { grid-template-columns: minmax(0, 1fr) auto; }
	.v2-contact-row > div { grid-column: 1 / -1; }
	.v2-contact-notes { grid-template-columns: minmax(0, 1fr); }
	.v2-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.v2-links { grid-template-columns: minmax(0, 1fr); }
	/* الإيميل في سطر لوحده علشان ميتقسمش، وزرار النسخ تحته */
	.v2-contact-row { grid-template-columns: minmax(0, 1fr); }
	.v2-contact-row .v2-btn { justify-self: start; }
	.v2-contact-row > span:empty { display: none; }
}

/* === 29. ABOUT === */
/* الحكاية: كارت المعلومات على الشمال (ثابت وإنت نازل)، والكلام على اليمين وأول جملة فيه كبيرة */
.v2-story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 7vw, 120px); align-items: start; padding-block: clamp(24px, 3.5vw, 56px); }
.v2-story-side { position: sticky; top: 110px; }
.v2-story-text p { max-width: 54ch; margin: 0 0 1.1em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; }
.v2-story-text p:first-child { max-width: none; margin-bottom: 1.4em; font-size: clamp(24px, 2.5vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; color: var(--ink); }
.v2-facts { margin: 0; padding: 4px 22px; }
.v2-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.v2-facts div:last-child { border-bottom: 0; }
.v2-facts dt, .v2-product-facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.v2-facts dd { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); text-align: end; overflow-wrap: anywhere; }
.v2-facts a { color: inherit; border-bottom: 1px solid var(--line-2); }
.v2-facts a:hover { color: var(--accent); border-color: var(--accent); }
/* الخطة: 3 كروت، وفوق كل واحد نقطة وحالته (المتاح دلوقتي نقطته مليانة) */
.v2-roadmap { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.v2-roadmap li { padding: clamp(24px, 2.4vw, 32px); }
.v2-roadmap-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(22px, 3vw, 36px); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.v2-roadmap-tag::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.v2-roadmap li.is-now .v2-roadmap-tag { color: var(--accent); }
.v2-roadmap li.is-now .v2-roadmap-tag::before { background: currentColor; box-shadow: 0 0 0 4px rgba(2, 101, 223, 0.16); }
.v2-roadmap h3 { margin-bottom: 10px; font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -0.035em; line-height: 1.15; }
.v2-roadmap p:last-child { max-width: 32ch; margin: 0; }
@media (max-width: 900px) {
	.v2-story { grid-template-columns: minmax(0, 1fr); }
	.v2-story-side { position: static; }
}
@media (max-width: 760px) { .v2-roadmap { grid-template-columns: minmax(0, 1fr); } }

/* === 30. PLUGINS & THEMES === */
/* كارت الإضافة في هيرو صفحة Slider Builder: اللوجو على جنب، والكلام جنبه، وشريط معلومات تحت */
.v2-product-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "art main" "facts facts"; overflow: hidden; margin-top: clamp(32px, 4vw, 56px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); }
.v2-product-art { grid-area: art; display: grid; place-items: center; padding: clamp(32px, 5vw, 72px); border-inline-end: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 40%, rgba(2, 101, 223, 0.12), transparent 70%), var(--bg-2); }
.v2-product-art img { width: 100%; max-width: 420px; transition: transform 0.8s var(--ease); }
.v2-product-row:hover .v2-product-art img { transform: scale(1.03); }
.v2-product-main { grid-area: main; align-self: center; padding: clamp(28px, 4vw, 56px); }
.v2-product-main h2 { margin: 18px 0 14px; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.045em; line-height: 1.02; }
.v2-product-main > p { margin-bottom: 22px; font-size: 17px; }
.v2-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.v2-pills li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.v2-pills .is-pro { border-color: rgba(253, 191, 56, 0.6); background: rgba(253, 191, 56, 0.12); color: #9a6500; }
[data-theme="dark"] .v2-pills .is-pro { color: var(--yellow); }
.v2-product-facts { grid-area: facts; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.v2-product-facts div { padding: 20px clamp(18px, 2.4vw, 32px); border-inline-start: 1px solid var(--line); }
.v2-product-facts div:first-child { border-inline-start: 0; }
.v2-product-facts dd { margin: 6px 0 0; font-weight: 700; line-height: 1.35; color: var(--ink); }
@media (max-width: 980px) {
	.v2-product-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "main" "facts"; }
	.v2-product-art { border-inline-end: 0; border-bottom: 1px solid var(--line); }
	.v2-product-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v2-product-facts div:nth-child(3) { border-inline-start: 0; }
	.v2-product-facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* رسمة صفحة الثيمات: صفحة بتتبني جوه المتصفح، وبعدين بتختفي وتتبني تاني بالعكس (LTR ← RTL)، كل 9 ثواني */
.v2-theme-stage { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.v2-tm { position: relative; overflow: hidden; aspect-ratio: 16 / 8.5; background: var(--bg); }
.v2-tm .tm { position: absolute; display: block; top: var(--y); left: var(--x); width: var(--w); height: var(--h); border-radius: 8px; opacity: 0; animation: tm-block 9s var(--ease) infinite both; }
.v2-tm .tm-logo { --x: 5%; --y: 7%; --w: 4%; --h: 8%; display: flex; align-items: center; }
.tm-logo img { width: auto; height: 100%; }
.tm-nav { --x: 62%; --y: 10%; --w: 33%; --h: 2.6%; background: var(--line-2); animation-delay: 0.1s; }
.tm-h1 { --x: 5%; --y: 26%; --w: 42%; --h: 8%; background: var(--ink); animation-delay: 0.25s; }
.tm-h2 { --x: 5%; --y: 37.5%; --w: 30%; --h: 8%; background: var(--ink); animation-delay: 0.35s; }
.tm-text { --x: 5%; --y: 50%; --w: 36%; --h: 3%; background: var(--line-2); animation-delay: 0.45s; }
.tm-btn { --x: 5%; --y: 58%; --w: 13%; --h: 8%; border-radius: 99px; background: var(--accent); animation-delay: 0.55s; }
.v2-tm .tm-img { --x: 55%; --y: 22%; --w: 40%; --h: 46%; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(140deg, #0238b4, #4c8dff); animation-delay: 0.4s; }
.tm-img img { width: 16%; filter: brightness(0) invert(1); }
.tm-card1, .tm-card2, .tm-card3 { --y: 76%; --w: 28%; --h: 17%; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tm-card1 { --x: 5%; animation-delay: 0.7s; }
.tm-card2 { --x: 36%; animation-delay: 0.8s; }
.tm-card3 { --x: 67%; animation-delay: 0.9s; }
@keyframes tm-block {
	0% { opacity: 0; transform: translateY(10px) scale(0.94); left: var(--x); }
	7%, 42% { opacity: 1; transform: none; left: var(--x); }
	46% { opacity: 0; transform: translateY(-6px); left: var(--x); }
	47% { opacity: 0; transform: translateY(10px) scale(0.94); left: calc(100% - var(--x) - var(--w)); }
	54%, 88% { opacity: 1; transform: none; left: calc(100% - var(--x) - var(--w)); }
	95%, 100% { opacity: 0; transform: none; left: calc(100% - var(--x) - var(--w)); }
}
.v2-dir { position: absolute; z-index: 2; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); font-family: var(--mono); font-size: 12.5px; color: var(--ink); opacity: 0; }
.v2-dir-ltr { top: 20%; inset-inline-end: -12px; animation: chip-ltr 9s var(--ease) infinite; }
.v2-dir-rtl { bottom: 16%; inset-inline-start: -12px; font-family: var(--font); font-weight: 700; animation: chip-rtl 9s var(--ease) infinite; }
@keyframes chip-ltr { 0%, 8% { opacity: 0; transform: translateY(8px); } 12%, 42% { opacity: 1; transform: none; } 47%, 100% { opacity: 0; } }
@keyframes chip-rtl { 0%, 54% { opacity: 0; transform: translateY(8px); } 58%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; } }
@media (max-width: 760px) {
	.v2-dir-ltr { inset-inline-end: 8px; }
	.v2-dir-rtl { inset-inline-start: 8px; }
}

/* === 31. 404 === */
/* 404 عملاقة باهتة ورا الكلام (زي كلمة QTHEMY في الفوتر)، وتحت روابط كل واحد في كارت */
.v2-404 { position: relative; overflow: hidden; min-height: min(86vh, 900px); }
.v2-404 > .v2-wrap { position: relative; }
.v2-404-num { position: absolute; inset-inline: 0; bottom: -0.2em; font-size: clamp(180px, 40vw, 620px); font-weight: 800; line-height: 1; letter-spacing: -0.07em; text-align: center; color: var(--ink); opacity: 0.05; pointer-events: none; user-select: none; }
.v2-jump { list-style: none; display: grid; gap: 10px; max-width: 640px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; }
.v2-jump a { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-radius: 18px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.v2-jump a:hover { color: var(--accent); }

/* === 32. FORMS & STORE === */
/* الحقول في الموقع كله (بحث، حسابي، الدفع) */
:where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select) {
	max-width: 100%; padding: 12px 14px; border-radius: 12px;
	border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit;
	transition: border-color 0.2s, box-shadow 0.2s;
}
:where(input, textarea, select):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(2, 101, 223, 0.16); }
.search-form { display: flex; gap: 10px; max-width: 460px; margin-top: 24px; }
.search-form label { flex: 1; }
.search-field { width: 100%; }
.search-submit, .woocommerce :is(a, button, input).button, .woocommerce :is(a, button, input).button.alt, .woocommerce #respond input#submit {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
	background: var(--ink); color: var(--bg); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer;
	transition: background-color 0.3s, color 0.3s, transform 0.4s var(--ease);
}
.search-submit:hover, .woocommerce :is(a, button, input).button:hover, .woocommerce :is(a, button, input).button.alt:hover, .woocommerce #respond input#submit:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
/* WooCommerce: السلة والدفع وحسابي وصفحة المنتج */
.v2-shop-content { color: var(--ink-2); }
.v2-shop-content :is(h2, h3) { margin: 1.4em 0 0.7em; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.03em; line-height: 1.2; }
.v2-shop-content a:not(.button):not(.wc-block-components-button):not(.v2-btn) { color: var(--accent); }
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 14px; background: var(--surface); color: var(--ink); }
.woocommerce .woocommerce-error { border-top-color: #e5484d; }
.woocommerce .woocommerce-message { border-top-color: #12a35a; }
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { color: inherit; }
.woocommerce table.shop_table { border-color: var(--line-2); border-radius: 16px; }
.woocommerce table.shop_table :is(th, td) { border-color: var(--line); }
.woocommerce :is(form.login, form.register, form.checkout_coupon, form.lost_reset_password) { border-color: var(--line-2); border-radius: 20px; }
.woocommerce form .form-row :is(.input-text, select) { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.woocommerce form .form-row label { font-weight: 600; color: var(--ink); }
.woocommerce form .show-password-input { color: var(--ink-3); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation a { display: block; padding: 12px 4px; border-inline-start: 2px solid transparent; font-weight: 600; color: var(--ink-2); transition: color 0.25s, padding 0.3s var(--ease); }
.woocommerce-MyAccount-navigation a:hover { color: var(--ink); }
.woocommerce-MyAccount-navigation .is-active a { padding-inline-start: 14px; border-color: var(--ink); color: var(--ink); }
.woocommerce span.onsale { background: var(--yellow); color: #0b1530; }
.woocommerce :is(div.product p.price, div.product span.price, ul.products li.product .price) { color: var(--ink); }
/* بلوك السلة والدفع الجديد */
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-blocks-components-select .wc-blocks-components-select__select { border-color: var(--line-2) !important; border-radius: 12px !important; background: var(--surface) !important; color: var(--ink) !important; }
.wc-block-components-text-input label, .wc-blocks-components-select .wc-blocks-components-select__label { color: var(--ink-3) !important; }
.wc-block-components-button:not(.is-link) { border-radius: 999px !important; }
.wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button { background: var(--ink) !important; color: var(--bg) !important; }
.wc-block-components-checkout-place-order-button:hover, .wc-block-cart__submit-button:hover { background: var(--accent) !important; color: #fff !important; }
.wc-block-components-panel, .wc-block-components-totals-wrapper, .wc-block-components-order-summary, .wc-block-components-checkout-step { border-color: var(--line) !important; }
.wc-block-components-notice-banner { border-radius: 14px; }

/* === 33. MOTION === */
/* العناوين: كل كلمة بتطلع من تحت (v2.js بيقسم الكلام لكلمات، وبيحط is-in لما العنوان يظهر) */
/* المسافة على الجنبين علشان أطراف الحروف ما تتقصّش (زي s في Tools والكلمة المايلة)، والمارجن السالب بيرجّع المسافات زي ما هي */
.sw { display: inline-block; vertical-align: top; overflow: hidden; padding: 0 0.09em 0.3em; margin: 0 -0.09em -0.3em; }
.sw > span { display: inline-block; }
.js [data-split] .sw > span { transform: translateY(140%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js [data-split].is-in .sw > span { transform: none; }
/* باقي العناصر: بتظهر وهي طالعة لفوق */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js [data-split] .sw > span, .js [data-reveal] { opacity: 1 !important; transform: none !important; }
	.v2-browser { transform: none; }
	.v2-chip { translate: none; }
	/* رسمة الثيمات بتفضل ظاهرة ثابتة (نسخة الإنجليزي) */
	.v2-tm .tm, .v2-dir-ltr { opacity: 1 !important; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* === 34. ARABIC === */
/* الصفحات العربي (/ar/ → inc/lang.php). الحروف العربي بتيجي من خط Readex Pro لوحدها (قسم 2)، والاتجاهات كلها inline-start/end.
   هنا بس اللي بيختلف في العربي:
   - مفيش مسافات بين الحروف (الحروف العربي متصلة، والمسافة بتقطعها). الأرقام والكلام الإنجليزي الكبير بيفضلوا زي ما هم.
   - السطور أعلى شوية (النقط والهمزات فوق وتحت الحروف).
   - مفيش مائل في العربي: الكلمة المميزة في العنوان بتاخد اللون الأزرق بس.
   - التسميات الصغيرة (01 — ...) بخط الموقع بدل خط الكود (خطوط الكود ما فيهاش حروف عربي). */
html[lang="ar"] { --mono: var(--font); }
html[lang="ar"] :is(code, kbd, pre, samp) { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; }
html[lang="ar"] body :not(.qthemy-sb-wrap, .qthemy-sb-wrap *, .v2-footer-word, .v2-404-num, .v2-plan-amount, .v2-pro-price, .v2-card-big, .v2-footer-mail, .v2-contact-mail, .v2-lang a[lang="en"]) { letter-spacing: 0 !important; }
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] :is(h1, h2, h3) { line-height: 1.3; }
html[lang="ar"] :is(h1, h2) em { font-family: inherit; font-style: normal; font-weight: inherit; }
/* المقاسات: الحروف العربي في Readex Pro أعرض وأتقل من الإنجليزي في نفس المقاس، فالعناوين أصغر شوية */
html[lang="ar"] .v2-display { max-width: 16ch; font-size: clamp(36px, 5.4vw, 80px); line-height: 1.22; }
html[lang="ar"] .v2-h2 { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.3; }
html[lang="ar"] .v2-page-title { max-width: 20ch; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.28; }
html[lang="ar"] .v2-step h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; }
html[lang="ar"] :is(.v2-card, .v2-start, .v2-roadmap) h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; }
html[lang="ar"] .v2-statement-text { font-size: clamp(21px, 2.5vw, 34px); line-height: 1.65; }
html[lang="ar"] .v2-story-text p:first-child { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.6; }
html[lang="ar"] .v2-label { font-size: 13px; font-weight: 500; }
html[lang="ar"] .v2-nav .menu > li > a { font-size: 13.5px; font-weight: 500; }
html[lang="ar"] .v2-nav .sub-menu strong { font-size: 14px; }
html[lang="ar"] .v2-nav .sub-menu small { font-size: 12.5px; }
html[lang="ar"] .v2-btn { font-size: 14.5px; }
/* زرار "تواصل معنا" في الهيدر وتحت قائمة الموبايل: أصغر وأخف */
html[lang="ar"] .v2-header .v2-btn-sm, html[lang="ar"] .v2-nav-cta { font-size: 13px; font-weight: 500; }
/* الكروت الصغيرة الطايرة حوالين سلايدر الهيرو */
html[lang="ar"] .v2-chip b { font-size: 13px; font-weight: 500; }
html[lang="ar"] .v2-chip-ar { font-size: 13px; font-weight: 600; }
@media (max-width: 900px) {
	html[lang="ar"] .v2-nav .menu > li > a { font-size: 16px; }
	html[lang="ar"] .v2-nav .menu > .menu-item-has-children > a { font-size: 12.5px; }
}
/* كارت "أهلًا بيك" في الرئيسية (عربي في الصفحتين) */
.v2-card .v2-card-big[lang="ar"] { font-size: clamp(30px, 2.6vw, 40px); font-weight: 600; }
/* قناع الكلمات اللي بتطلع من تحت: مساحة فوق كمان علشان الهمزات والنقط ما تتقصّش */
html[lang="ar"] .sw { padding-top: 0.18em; margin-top: -0.18em; }
/* صفحة لسه مالهاش نسخة عربي (inc/lang.php): سطر فوق المحتوى الإنجليزي */
.v2-lang-note { display: flex; align-items: center; gap: 10px; margin: 0 0 2em; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.v2-lang-note::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
html[lang="ar"] .v2-prose [lang="en"] { line-height: 1.7; }
/* عنوان كله إنجليزي في صفحة عربي (v2.js بيديله dir="ltr"): بيتكتب من الشمال بس بيفضل في مكانه (يمين أو نص زي اللي حواليه) */
[dir="rtl"] [data-split][dir="ltr"] { text-align: -webkit-match-parent; text-align: match-parent; }
/* السهم بيلف للشمال، ولما الماوس يقف عليه بيتحرك ناحية الشمال */
[dir="rtl"] :is(.v2-btn, .v2-link, .v2-jump a):hover .v2-arrow { transform: scaleX(-1) translateX(4px); }