/*
 * v9 — إعادة تصميم الأقسام التي بقيت تقليدية:
 * 1) شريط الختام (الرئيسية و«من نحن») على هيئة بطاقة دعوة مخرّمة.
 * 2) قوائم «من نحن» (ما نؤمن به، فريق مذاكرة) كبطاقات تحريرية بأرقام شبحية.
 * 3) تذييل الموقع.
 * يُحمَّل بعد v8-refine.css.
 */

/* ==========================================================================
   1 — شريط الختام: بطاقة دعوة بثقبين وخط تخريم، بدل المستطيل المصمت
   ========================================================================== */
.m-close,
.page-template-page-about .cta-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 28px !important;
	background:
		radial-gradient(520px 300px at 88% -20%, rgba(107, 204, 165, .30), transparent 70%),
		radial-gradient(420px 320px at 8% 120%, rgba(113, 64, 214, .55), transparent 72%),
		linear-gradient(135deg, #42239C 0%, #2E1570 55%, #4A2496 100%) !important;
	/* ثقبا البطاقة على الجانبين */
	-webkit-mask: radial-gradient(circle 15px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 15px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
	mask: radial-gradient(circle 15px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 15px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
/* شبكة نقاط خفيفة تملأ الفراغ */
.m-close::before,
.page-template-page-about .cta-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.4px);
	background-size: 20px 20px;
	-webkit-mask-image: radial-gradient(ellipse at 85% 50%, #000 0%, transparent 62%);
	mask-image: radial-gradient(ellipse at 85% 50%, #000 0%, transparent 62%);
	pointer-events: none;
}
/* قوس ضوئي رفيع يعبر البطاقة */
.m-close::after,
.page-template-page-about .cta-box::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline-end: -140px;
	top: -180px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .16);
	box-shadow: inset 0 0 0 28px rgba(255, 255, 255, .05);
	pointer-events: none;
}

/* خط تخريم يفصل النص عن زر الإجراء */
.m-close { gap: clamp(16px, 2.4vw, 30px) !important; }
.m-close-act {
	position: relative;
	padding-inline-start: clamp(16px, 2.4vw, 30px);
}
.m-close-act::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 6%;
	bottom: 6%;
	border-inline-start: 2px dashed rgba(255, 255, 255, .26);
}
/* لوحة الشعار: بطاقة زجاجية بدل المربع المصمت */
.m-close-tile {
	background: rgba(255, 255, 255, .1) !important;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 20px 36px -24px rgba(0, 0, 0, .8) !important;
	backdrop-filter: blur(2px);
}
.m-close-copy h2 { letter-spacing: -.2px; }
/* شارة صغيرة فوق العنوان */
.m-close-copy::before {
	content: "ابدأ اليوم";
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 4px 14px;
	border-radius: 99px;
	background: rgba(107, 204, 165, .18);
	box-shadow: inset 0 0 0 1px rgba(107, 204, 165, .45);
	color: #9BE3C6;
	font-size: .78rem;
	font-weight: 800;
}
.m-close-teach { text-decoration-color: rgba(255, 255, 255, .45); }

@media (max-width: 760px) {
	.m-close-act { padding-inline-start: 0; padding-top: 18px; }
	.m-close-act::before { inset-inline-start: 6%; inset-inline-end: 6%; top: 0; bottom: auto; border-inline-start: 0; border-top: 2px dashed rgba(255, 255, 255, .26); }
	.m-close, .page-template-page-about .cta-box {
		-webkit-mask: radial-gradient(circle 13px at 50% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 13px at 50% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
		mask: radial-gradient(circle 13px at 50% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 13px at 50% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
	}
}

/* ==========================================================================
   2 — قوائم «من نحن»: بطاقات تحريرية بأرقام شبحية وشريط لوني
   ========================================================================== */
.page-template-page-about .entry-content > ul {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}
.page-template-page-about .entry-content > ul > li {
	--ac: var(--violet);
	--ac-bg: var(--tint);
	position: relative;
	overflow: hidden;
	padding: 24px 20px 48px !important;
	border-radius: 22px !important;
	background: linear-gradient(170deg, var(--ac-bg) 0%, #fff 46%) !important;
	box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(36, 22, 71, .04) !important;
}
.page-template-page-about .entry-content > ul > li:nth-child(3n+2) { --ac: var(--teal); --ac-bg: var(--mint-bg); }
.page-template-page-about .entry-content > ul > li:nth-child(3n) { --ac: var(--amber-ink); --ac-bg: var(--amber-bg); }
/* شريط لوني علوي */
.page-template-page-about .entry-content > ul > li::after {
	content: "";
	position: absolute;
	inset-inline: 20px;
	top: 0;
	height: 4px;
	border-radius: 0 0 6px 6px;
	background: var(--ac);
}
/* الرقم: كبير وشبحي في زاوية البطاقة بدل المربع الصغير */
.page-template-page-about .entry-content > ul > li::before {
	content: counter(v, decimal-leading-zero);
	position: absolute;
	inset-inline-end: 16px;
	bottom: 2px;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: none !important;
	color: var(--ac) !important;
	opacity: .15;
	font-family: Poppins, var(--f, sans-serif);
	font-size: 3.2rem;
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
}
.page-template-page-about .entry-content > ul > li strong {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 9px;
	margin-bottom: 6px !important;
	font-size: 1.08rem !important;
}
.page-template-page-about .entry-content > ul > li strong::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var(--ac);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 18%, transparent);
}
.page-template-page-about .entry-content > ul > li:hover { box-shadow: inset 0 0 0 1px var(--ac), 0 18px 32px -24px rgba(59, 29, 122, .55) !important; }

/* الفقرة الأخيرة (تنويه المحتوى التجريبي): سطر بعلامة بدل مستطيل رمادي */
.page-template-page-about .entry-content > p:last-child {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px !important;
	border-radius: 14px !important;
	background: var(--neutral) !important;
	border-inline-start: 3px solid var(--violet);
}

/* ==========================================================================
   3 — التذييل
   ========================================================================== */
.site-footer { position: relative; }
.site-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--violet) 0%, var(--teal) 42%, var(--amber) 72%, var(--violet) 100%);
	opacity: .85;
}
.site-footer .widget-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .82rem !important;
	letter-spacing: .4px;
	text-transform: none;
}
.site-footer .widget-title::before {
	content: "";
	width: 18px;
	height: 6px;
	flex: none;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--violet) 0 50%, var(--mint) 50%);
}
.site-footer .widget-title::after { display: none !important; }
.site-footer .footer-menu a { position: relative; border-radius: 8px; }
.site-footer .footer-menu a:hover { color: var(--deep); }
.footer-switch .flag-row a { box-shadow: inset 0 0 0 1px var(--line); }
.footer-switch .flag-row a:hover { box-shadow: inset 0 0 0 1px var(--tint-2); }

/* ==========================================================================
   4 — الأسئلة الشائعة المضمّنة (الأسعار وأي صفحة): نفس أسلوب صفحة الأسئلة
   ========================================================================== */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq > details {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
.faq > details > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0 !important;
	border: 0 !important;
	background: none !important;
	cursor: pointer;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--deep);
	transition: color .2s;
}
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary::marker { content: ""; }
.faq > details > summary::before { content: none !important; }
/* علامة + دائرية تتحول إلى − عند الفتح (تلغي علامة السهم القديمة) */
.faq > details > summary::after {
	content: "";
	position: relative !important;
	inset: auto !important;
	flex: none;
	width: 32px !important;
	height: 32px !important;
	border: 0 !important;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--line);
	background:
		linear-gradient(var(--deep), var(--deep)) center / 12px 2px no-repeat,
		linear-gradient(var(--deep), var(--deep)) center / 2px 12px no-repeat;
	transform: none !important;
	transition: box-shadow .25s, background .25s;
}
.faq > details > summary:hover { color: var(--violet); }
.faq > details > summary:hover::after { box-shadow: inset 0 0 0 1.5px var(--violet-2); }
.faq > details > summary:focus-visible { outline: 3px solid var(--violet-2); outline-offset: 4px; border-radius: 6px; }
.faq > details[open] > summary::after {
	box-shadow: none;
	background: var(--deep) linear-gradient(#fff, #fff) center / 12px 2px no-repeat;
}
.faq > details > p {
	margin: 0 !important;
	padding: 0 0 22px !important;
	padding-inline-end: 50px !important;
	max-width: 64ch;
	font-size: .97rem;
	line-height: 1.95;
	color: var(--muted);
}

/* ==========================================================================
   5 — بطاقات المواد (الرئيسية وصفحة المنهج): أيقونة، عدّاد، شارات سنوات، وزر فتح
   ========================================================================== */
.m-subjects { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.m-subject {
	grid-template-columns: auto 1fr auto;
	align-content: start;
	row-gap: 14px;
	padding: 18px 18px 14px !important;
	background: linear-gradient(175deg, var(--k-bg) 0%, #fff 58%) !important;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 14%, var(--line)), 0 1px 2px rgba(36, 22, 71, .04) !important;
}
.m-subject::after { display: none; }
.m-subject:hover { box-shadow: inset 0 0 0 1.5px var(--k), 0 20px 34px -24px color-mix(in srgb, var(--k) 60%, #000) !important; }
.m-subject-ico { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 22%, transparent), 0 8px 16px -12px var(--k); }
.m-subject-txt small { font-weight: 600; }
.m-subject .demo-badge { grid-column: 1 / -1; margin: 0; }
.m-subject-foot {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 12px;
	border-top: 1.5px dashed color-mix(in srgb, var(--k) 26%, transparent);
}
.m-subject-years { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.m-subject-years em { font-style: normal; font-size: .76rem; font-weight: 700; color: var(--muted); margin-inline-end: 2px; }
.m-subject-years i { font-style: normal; font-size: .76rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: #fff; color: var(--k); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 30%, transparent); }
.m-subject-go { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 800; color: var(--k); white-space: nowrap; }
.m-subject-go svg { width: 16px; height: 16px; transition: transform .25s; }
.m-subject:hover .m-subject-go svg { transform: translateX(-4px); }

/* مسار «كيف تبدأ» بجانب عنوان قسم المواد */
.x-path { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.x-path li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 99px; background: var(--tint); color: var(--deep); font-size: .86rem; font-weight: 700; }
.x-path li:not(:last-child)::after { content: "←"; margin-inline-start: 6px; color: var(--violet-2); font-weight: 800; }
.x-path b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; font-size: .75rem; }
@media (max-width: 640px) { .x-path { display: none; } }
.m-subject-years { flex-wrap: nowrap; }
.m-subject-years em { display: none; }
.m-subject-years i { white-space: nowrap; }
.sec-head.split { align-items: flex-end; }