/* =========================================================
 * MyTheme Child - Growth Blocks
 * 1) شريط الدعوة للتسجيل (cb-cta)   2) زر ثابت للجوال (cb-sticky-cta)
 * 3) الأسئلة الشائعة (cb-faq)
 * ---------------------------------------------------------
 * نفس هوية الواجهة العلوية. بدون أي مكتبة/خط/صورة خارجية.
 * الألوان: --cb-primary و --cb-accent (قابلة للتغيير من الإعدادات).
 * ========================================================= */

.cb-cta, .cb-faq, .cb-sticky-cta {
	--cb-primary: #1d4ed8;
	--cb-accent: #f5b50a;
	--cb-text: #1f2937;
	--cb-muted: #64748b;
	--cb-border: #e5e7eb;
	direction: rtl;
	font-family: inherit;
}
.cb-cta *, .cb-cta *::before, .cb-cta *::after,
.cb-faq *, .cb-faq *::before, .cb-faq *::after,
.cb-sticky-cta *, .cb-sticky-cta *::before, .cb-sticky-cta *::after { box-sizing: border-box; }

/* =========================================================
 * 1) شريط الدعوة للتسجيل
 * ========================================================= */
.cb-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 48px 0;
	border-radius: 28px;
	color: #fff;
	text-align: right;
	container-type: inline-size;
	container-name: cbcta;
	background:
		radial-gradient(50% 120% at 100% 0%, color-mix(in srgb, var(--cb-accent) 22%, transparent), transparent 70%),
		linear-gradient(135deg, color-mix(in srgb, var(--cb-primary) 40%, #020617) 0%, color-mix(in srgb, var(--cb-primary) 80%, #020617) 55%, var(--cb-primary) 100%);
}
/* حلقات زخرفية */
.cb-cta::before, .cb-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.cb-cta::before { top: -120px; left: -80px; width: 320px; height: 320px; border: 1.5px solid rgba(255, 255, 255, .13); box-shadow: 0 0 0 36px rgba(255, 255, 255, .04); }
.cb-cta::after { bottom: -90px; right: 22%; width: 200px; height: 200px; border: 1.5px dashed rgba(255, 255, 255, .16); }

.cb-cta-inner {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 38px 24px;
}
.cb-cta-content { min-width: 0; }

.cb-cta .cb-cta-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}
.cb-cta .cb-cta-badge i { color: var(--cb-accent); }

.cb-cta .cb-cta-title {
	margin: 0 0 10px;
	padding: 0;
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: right;
}
.cb-cta .cb-cta-text { max-width: 60ch; margin: 0; color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.9; }

.cb-cta ul.cb-cta-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.cb-cta ul.cb-cta-checks li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .92); font-size: 13.5px; font-weight: 600; }
.cb-cta ul.cb-cta-checks li::before { content: none; }
.cb-cta ul.cb-cta-checks i { color: var(--cb-accent); }

.cb-cta-actions { display: flex; flex-direction: column; gap: 12px; }
.cb-cta a.cb-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 28px;
	border: 1.5px solid transparent;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}
.cb-cta a.cb-cta-btn:hover { transform: translateY(-2px); text-decoration: none; }
.cb-cta a.cb-cta-btn i { transition: transform .2s ease; }
.cb-cta a.cb-cta-btn:hover i { transform: translateX(-4px); }
.cb-cta a.cb-cta-btn--primary { background: var(--cb-accent); color: #1a1305; box-shadow: 0 12px 26px color-mix(in srgb, var(--cb-accent) 36%, transparent); }
.cb-cta a.cb-cta-btn--primary:hover { color: #1a1305; filter: brightness(1.06); }
.cb-cta a.cb-cta-btn--ghost { border-color: rgba(255, 255, 255, .45); background: transparent; color: #fff; }
.cb-cta a.cb-cta-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.cb-cta a.cb-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@container cbcta (min-width: 760px) {
	.cb-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 48px 48px; }
	.cb-cta .cb-cta-title { font-size: 32px; }
	.cb-cta-actions { flex: 0 0 auto; min-width: 240px; }
}
@container cbcta (max-width: 520px) {
	.cb-cta { border-radius: 22px; }
	.cb-cta .cb-cta-title { font-size: 22px; }
}

/* =========================================================
 * 2) زر التسجيل الثابت على الجوال
 * ========================================================= */
.cb-sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	border-top: 2px solid var(--cb-accent);
	background: linear-gradient(135deg, color-mix(in srgb, var(--cb-primary) 45%, #020617), color-mix(in srgb, var(--cb-primary) 85%, #020617));
	box-shadow: 0 -10px 30px rgba(2, 6, 23, .25);
	color: #fff;
	visibility: hidden;
	transform: translateY(110%);
	transition: transform .3s ease, visibility 0s linear .3s;
}
.cb-sticky-cta.is-visible { visibility: visible; transform: none; transition-delay: 0s; }
.cb-sticky-text { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cb-sticky-cta a.cb-sticky-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	padding: 10px 18px;
	border-radius: 12px;
	background: var(--cb-accent);
	color: #1a1305;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
.cb-sticky-cta a.cb-sticky-btn:hover { color: #1a1305; filter: brightness(1.06); text-decoration: none; }
.cb-sticky-cta .cb-sticky-close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	box-shadow: none;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
.cb-sticky-cta .cb-sticky-close:hover { background: rgba(255, 255, 255, .26); }
.cb-sticky-cta a:focus-visible, .cb-sticky-cta button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* على الجوال والتابلت الصغير فقط */
@media (min-width: 783px) { .cb-sticky-cta { display: none; } }
/* لا يغطّي زر "للأعلى" الخاص بالثيم */
html.cb-sticky-on #go-to-top { bottom: 84px; }

/* =========================================================
 * 3) الأسئلة الشائعة
 * ========================================================= */
.cb-faq { max-width: 880px; margin: 48px auto; color: var(--cb-text); }

.cb-faq-heading { margin-bottom: 30px; text-align: center; }
.cb-faq .cb-faq-heading h2 { margin: 0 0 10px; padding: 0; color: var(--cb-text); font-size: 28px; font-weight: 800; line-height: 1.4; }
.cb-faq .cb-faq-heading h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 12px auto 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--cb-accent), var(--cb-primary));
}
.cb-faq .cb-faq-heading p { margin: 0; color: var(--cb-muted); font-size: 15px; }

.cb-faq-list { display: flex; flex-direction: column; gap: 12px; }

.cb-faq details.cb-faq-item {
	overflow: hidden;
	border: 1px solid var(--cb-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.cb-faq details.cb-faq-item:hover { border-color: color-mix(in srgb, var(--cb-primary) 35%, #fff); }
.cb-faq details.cb-faq-item[open] {
	border-color: color-mix(in srgb, var(--cb-primary) 40%, #fff);
	background: color-mix(in srgb, var(--cb-primary) 3%, #fff);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--cb-primary) 10%, transparent);
}

.cb-faq details.cb-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	list-style: none;
	cursor: pointer;
	color: var(--cb-text);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.6;
	user-select: none;
}
.cb-faq details.cb-faq-item > summary::-webkit-details-marker { display: none; }
.cb-faq details.cb-faq-item > summary::marker { content: ""; }
.cb-faq details.cb-faq-item > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--cb-primary) 50%, #fff); outline-offset: -3px; border-radius: 16px; }

/* أيقونة + / − مرسومة بالـ CSS */
.cb-faq-icon {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cb-primary) 9%, #fff);
	transition: background .25s ease, transform .3s ease;
}
.cb-faq-icon::before, .cb-faq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: var(--cb-primary);
	transition: transform .3s ease, background .25s ease;
}
.cb-faq-icon::after { transform: rotate(90deg); }
.cb-faq details[open] > summary .cb-faq-icon { background: var(--cb-primary); transform: rotate(180deg); }
.cb-faq details[open] > summary .cb-faq-icon::before { background: #fff; }
.cb-faq details[open] > summary .cb-faq-icon::after { background: #fff; transform: rotate(0deg); }

.cb-faq-answer {
	padding: 0 22px 20px;
	color: var(--cb-muted);
	font-size: 15px;
	line-height: 1.95;
	animation: cbfaq-in .3s ease both;
}
.cb-faq-answer > :first-child { margin-top: 0; }
.cb-faq-answer > :last-child { margin-bottom: 0; }
.cb-faq-answer p { margin: 0 0 .8em; }
.cb-faq-answer a { color: var(--cb-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@keyframes cbfaq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cb-faq-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin-top: 26px;
	padding: 18px 22px;
	border: 1px dashed color-mix(in srgb, var(--cb-primary) 30%, #fff);
	border-radius: 16px;
	background: color-mix(in srgb, var(--cb-primary) 4%, #fff);
	color: var(--cb-muted);
	font-size: 14.5px;
	text-align: center;
}
.cb-faq .cb-faq-help a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--cb-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: filter .2s ease, transform .2s ease;
}
.cb-faq .cb-faq-help a:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); text-decoration: none; }

@media (max-width: 520px) {
	.cb-faq .cb-faq-heading h2 { font-size: 23px; }
	.cb-faq details.cb-faq-item > summary { padding: 15px 16px; font-size: 15.5px; }
	.cb-faq-answer { padding: 0 16px 16px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.cb-cta *, .cb-faq *, .cb-faq *::before, .cb-faq *::after, .cb-sticky-cta { animation: none !important; transition: none !important; }
}