/* ============================================================
   قدها — الهوية البصرية الموحدة
   الألوان والخطوط والظلال منقولة حرفيًا من التصميم المرجعي
   (artifacts/qadaha-game/src/index.css)
   ============================================================ */

:root {
	/* البنفسج الأساسي — خلفية اللعبة كلها */
	--purple: #492F9B;
	--purple-radiance-a: #5336A4;
	--purple-radiance-b: #5034A1;

	/* درجات بنفسجية للأسطح (من التصميم) */
	--purple-deep: #3A2280;      /* أعمق سطح (حبوب/أشرطة) */
	--purple-canvas: #432A95;    /* خلفيات الكانفس */
	--purple-surface: #5A3DB2;   /* بطاقات opt-card */
	--purple-surface-2: #643DC3; /* بطاقات القوانين */
	--purple-card: #4B30A6;      /* بطاقة السؤال الداكنة */
	--purple-icon: #482E9B;      /* دوائر الأيقونات */
	--purple-light: #8C52FF;     /* بنفسج التمييز */

	/* نص داكن فوق الأسطح البيضاء */
	--ink: #35226F;
	--ink-soft: #6F668D;

	/* ذهبي — لون الإجراءات الأساسية */
	--gold: #EBBA17;
	--gold-hover: #F1C52B;

	/* مرجاني — للتمييز والعناوين الصغيرة */
	--coral: #FA826E;
	--coral-soft: #F27D6C;

	/* ألوان النتائج */
	--teal: #19D8B4;
	--blue: #1AE2F8;
	--correct-bg: #D8F2E8;
	--correct-fg: #197653;
	--wrong-bg: #FAE1DF;
	--wrong-fg: #B63D43;

	/* أسطح بيضاء وحدود */
	--paper: #FFFFFF;
	--line: rgba(53, 34, 111, .14);
	--line-light: rgba(255, 255, 255, .14);

	/* شفافيات بيضاء معتمدة في التصميم */
	--w-90: rgba(255, 255, 255, .9);
	--w-75: rgba(255, 255, 255, .75);
	--w-60: rgba(255, 255, 255, .6);
	--w-40: rgba(255, 255, 255, .4);

	/* أنصاف أقطار */
	--radius-sm: 12px;
	--radius-md: 18px;
	--radius-lg: 22px;
	--radius-xl: 26px;
	--radius-pill: 999px;

	/* ظلال التصميم المميزة */
	--shadow-drop: 0 22px 48px rgba(20, 7, 66, .28);
	--shadow-stack: 0 10px 0 rgba(26, 13, 80, .56), 0 14px 18px rgba(26, 13, 80, .4), inset 0 1px 0 rgba(255, 255, 255, .035);
	--shadow-btn-gold: 0 11px 25px rgba(22, 8, 65, .35), inset 0 -3px 0 rgba(116, 74, 0, .16);
}

* { box-sizing: border-box; }

::selection { background: var(--gold); color: #fff; }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

html { overflow-x: hidden; }

body {
	margin: 0;
	background: var(--purple);
	color: #fff;
	font-family: 'Cairo', sans-serif;
	line-height: 1.8;
	min-height: 100vh;
	direction: rtl;
}

a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-family: 'Cairo', sans-serif; font-weight: 800; margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
.bolt { display: inline-block; transform: translateY(2px); margin-left: 4px; }
.qadha-site-main { display: block; }
body:not(.front-page) .qadha-site-main { padding-top: 60px; }

/* ===== الهيدر ===== ===== */
/* في التصميم الهيدر شفاف دائمًا فوق الخلفية البنفسجية */
.qadha-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	display: flex;
	align-items: center;
	gap: clamp(18px, 3.5vw, 28px);
	padding: 0 clamp(16px, 4vw, 32px);
	z-index: 50;
	direction: ltr;
}
.qadha-back-btn {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .07);
	border: 1.5px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform .2s ease, background .2s ease;
}
.qadha-back-btn:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .15);
}
.qadha-site-nav { display: flex; align-items: center; gap: clamp(20px, 4vw, 32px); direction: rtl; }
.qadha-site-nav a {
	color: var(--w-75);
	font-weight: 700;
	font-size: clamp(12.5px, 1.6vw, 14px);
	font-family: 'Cairo', sans-serif;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: border-color .25s ease-out, color .25s ease-out;
}
.qadha-site-nav a:hover { color: #fff; border-bottom-color: var(--gold); }

/* صفحة اللعبة: سهم الهيدر فوق هو سهم رجوع الخطوة، ومتخفي سهم اللعبة الجوه */
.qadha-game-template .qadha-site-header .qadha-back-btn { display: none; }

/* ===== الأزرار ===== */
/* زر ذهبي مطابق لـ gold-btn في التصميم: نص أبيض + ظل مزدوج */
.qadha-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gold);
	color: #fff;
	font-family: 'Cairo', sans-serif;
	font-weight: 800;
	border: none;
	border-radius: var(--radius-pill);
	min-height: 54px;
	padding: 0 42px;
	font-size: 16px;
	box-shadow: var(--shadow-btn-gold);
	transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.qadha-btn-primary:hover {
	transform: translateY(-3px);
	background: var(--gold-hover);
	box-shadow: 0 15px 30px rgba(22, 8, 65, .38);
}
.qadha-btn-small { min-height: 46px; padding: 0 26px; font-size: 14px; }

/* زر ثانوي شفاف مطابق لـ outline-btn في التصميم */
.qadha-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .3);
	font-family: 'Cairo', sans-serif;
	font-weight: 700;
	border-radius: var(--radius-pill);
	min-height: 48px;
	padding: 0 25px;
	font-size: 15px;
	transition: background .2s ease;
}
.qadha-btn-secondary:hover { background: rgba(255, 255, 255, .13); }

.qadha-badge {
	display: inline-block;
	background: var(--coral);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 20px;
	margin-top: 10px;
}

.qadha-link-back {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--w-75);
	font-weight: 700;
	font-size: 14px;
	transition: color .2s ease;
}
.qadha-link-back:hover { color: #fff; }

/* ===== خلفية الإشعاع الدائري (من التصميم حرفيًا) ===== */
.qadha-radiance-bg {
	background: conic-gradient(
		from 271deg at 50% 50%,
		#5336a4 0deg,
		rgb(80, 52, 161) 3.498142567748741deg,
		rgb(73, 47, 155) 10.8deg,
		rgb(83, 54, 164) 40.942632529148014deg,
		rgb(73, 47, 155) 54deg,
		rgb(83, 54, 164) 79.2deg,
		rgb(73, 47, 155) 100.8deg,
		rgb(83, 54, 164) 122.4deg,
		rgb(73, 47, 155) 144.82764934671337deg,
		rgb(83, 54, 164) 169.2deg,
		rgb(73, 47, 155) 191.3793734846444deg,
		rgb(83, 54, 164) 213.1035114156789deg,
		rgb(73, 47, 155) 238.96551724137933deg,
		rgb(83, 54, 164) 259.6552355536099deg,
		rgb(73, 47, 155) 285.51724137931035deg,
		rgb(83, 54, 164) 307.2413793103448deg,
		rgb(73, 47, 155) 324.4690322343633deg,
		rgb(73, 54, 164) 349.2deg,
		#5336a4 360deg
	);
}

/* طبقة النقاط الزخرفية — تُضاف كعنصر داخل أي قسم (اختياري) */
.qadha-dots-overlay { position: relative; isolation: isolate; }
.qadha-dots-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .22;
	background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(135deg, black, transparent 62%);
	-webkit-mask-image: linear-gradient(135deg, black, transparent 62%);
}

/* ===== الهيرو (الصفحة الرئيسية) ===== */
.qadha-hero {
	position: relative;
	height: calc(100vh - 64px);
	min-height: 600px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: clamp(24px, 6vh, 48px);
	overflow: hidden;
	text-align: center;
}
.qadha-hero-logo {
	font-size: clamp(48px, 10vw, 100px);
	line-height: 1.05;
	color: #fff;
	font-weight: 900;
	text-shadow: 0 13px 0 rgba(38, 17, 96, .18);
	opacity: 0;
	z-index: 2;
	flex-shrink: 0;
	margin-bottom: clamp(8px, 2vh, 20px);
}
.qadha-hero-logo .bolt { color: var(--gold); display: inline-block; }
.qadha-hero-tag {
	font-size: clamp(16px, 2vw, 24px);
	color: var(--w-70, rgba(255, 255, 255, .7));
	font-weight: 600;
	margin: 0 0 34px;
}
.qadha-hero-man {
	flex: 1 1 auto;
	max-height: clamp(300px, 52vh, 520px);
	width: auto;
	object-fit: contain;
	z-index: 1;
	margin-top: clamp(4px, 1vh, 12px);
	margin-bottom: clamp(20px, 3.5vh, 32px);
}
.qadha-hero .qadha-btn-primary {
	flex-shrink: 0;
	margin-bottom: clamp(16px, 4vh, 32px);
}

/* دخول الشعار: Fade In + Slide Down مرة واحدة فقط، كوحدة واحدة */
@keyframes qadhaEntrance {
	from { opacity: 0; transform: translateY(-18px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes qadhaRise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.qadha-anim-entrance {
	animation: qadhaEntrance 800ms ease-out forwards;
}

/* وميض خفيف للأيقونة كل 5.5 ثانية */
@keyframes qadhaBoltPulse {
	0%, 85%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
	92% { filter: drop-shadow(0 0 7px rgba(255, 255, 255, .55)); }
}
.qadha-anim-pulse {
	animation: qadhaBoltPulse 5.5s ease-in-out 2.4s infinite;
}

/* ===== شريط شعارات البراندات (مطابق لـ home-marquee) ===== */
.qadha-brand-strip {
	padding: clamp(20px, 4vh, 48px) 0;
	overflow: hidden;
}
.qadha-marquee { width: 100%; overflow: hidden; }
.qadha-marquee-track {
	display: flex;
	align-items: center;
	gap: clamp(28px, 6vw, 48px);
	width: max-content;
	animation: qadhaMarquee 14s linear infinite;
}
.qadha-marquee:hover .qadha-marquee-track { animation-play-state: paused; }
.qadha-marquee-track img {
	height: clamp(42px, 5vw, 58px);
	width: auto;
	object-fit: contain;
	opacity: .85;
	transition: opacity .2s ease;
}
.qadha-marquee-track img:hover { opacity: 1; }
@keyframes qadhaMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* قسم البراندات — غير متاح */
.qadha-brand-disabled {
	text-align: center;
	padding: clamp(24px, 4vh, 40px) clamp(16px, 4vw, 32px);
	background: var(--purple-deep);
	border-radius: var(--radius-lg);
	margin: 0 clamp(16px, 4vw, 48px);
}
.qadha-brand-disabled-icon {
	font-size: 32px;
	display: block;
	margin-bottom: 10px;
}
.qadha-brand-disabled p {
	color: var(--w-60);
	font-size: clamp(14px, 1.8vw, 18px);
	font-weight: 600;
	margin: 0;
}

/* ===== صفحة التصنيفات (Hub) — بطاقات opt-card من التصميم ===== */
.qadha-hub { padding: clamp(88px, 14vh, 120px) clamp(20px, 6vw, 60px) clamp(64px, 11vh, 100px); }
.qadha-hub-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.qadha-hub-title {
	font-size: clamp(32px, 5.8vw, 84px);
	color: #fff;
	font-weight: 900;
	margin-bottom: clamp(36px, 6vh, 56px);
	line-height: 1.05;
}
.qadha-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(24px, 4vw, 56px);
	row-gap: clamp(20px, 4vw, 32px);
	justify-content: center;
}
.qadha-hub-card {
	background: var(--purple-surface);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 3.5vh, 34px) clamp(14px, 2.5vw, 24px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 20px;
	aspect-ratio: 1 / .72;
	max-width: 340px;
	width: 100%;
	margin: 0 auto;
	color: #fff;
	box-shadow: 0 8px 20px rgba(10, 4, 30, .28);
	transition: transform 280ms ease-out, box-shadow 280ms ease-out;
}
.qadha-hub-card:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 14px 30px rgba(10, 4, 30, .36);
	background: var(--purple-surface);
}
.qadha-hub-card h2 { font-size: clamp(16px, 1.7vw, 22px); color: #fff; font-weight: 800; margin: 0; }
.qadha-hub-card p { font-size: clamp(11px, 1.2vw, 15px); color: var(--w-60); font-weight: 600; margin: 0; }
.qadha-hub-card-locked {
	background: rgba(255, 255, 255, .05);
	border: 1px dashed rgba(255, 255, 255, .28);
	cursor: pointer;
}
.qadha-hub-card-locked:hover {
	transform: none;
	box-shadow: 0 8px 20px rgba(10, 4, 30, .28);
	background: rgba(255, 255, 255, .05);
}
.qadha-hub-card-locked .qadha-hub-icon { -webkit-filter: grayscale(1); filter: grayscale(1); opacity: .55; }
.qadha-hub-lock {
	margin-top: 2px;
	font-size: clamp(10px, 1vw, 12px);
	font-weight: 700;
	color: var(--w-60);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	padding: 4px 14px;
}
.qadha-hub-locked-notice {
	position: fixed;
	left: 50%;
	bottom: 40px;
	transform: translate(-50%, 20px);
	background: rgba(10, 4, 30, .95);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .2);
	padding: 12px 22px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
	font-size: 14px;
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease-out, transform 250ms ease-out;
	z-index: 9999;
}
.qadha-hub-locked-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }
.qadha-hub-icon {
	width: clamp(52px, 5vw, 62px);
	height: clamp(52px, 5vw, 62px);
	border-radius: 14px;
	background: rgba(255, 255, 255, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(20px, 2vw, 26px);
	color: #fff;
	flex-shrink: 0;
}

/* ===== غلاف صفحة اللعبة — كانفس كامل زي المرجع ===== */
.qadha-game-page { padding: 0; }
.qadha-game-page-inner { max-width: none; width: 100%; margin: 0; }

/* ===== أكواد الخصم / صفحة قيد الإنشاء ===== */
.qadha-soon-page { padding: 110px 24px; text-align: center; }
.qadha-soon-inner { max-width: 480px; margin: 0 auto; }
.qadha-soon-inner h1 { font-size: 26px; color: #fff; margin: 12px 0; }
.qadha-soon-inner p { color: var(--w-75); margin-bottom: 26px; }

/* ===== الألعاب الورقية وأكواد الخصم =====
   نفس لغة التصميم: خلفية بنفسجية + بطاقات بيضاء بظل ناعم ونص داكن */
.qadha-papers-page { padding: 50px 24px 90px; }
.qadha-papers-inner { max-width: 1100px; margin: 0 auto; }
.qadha-papers-title { font-size: clamp(28px, 4.5vw, 46px); color: #fff; font-weight: 900; margin-bottom: 6px; }
.qadha-papers-sub { color: var(--w-75); font-weight: 600; margin-bottom: 34px; }
.qadha-papers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 2vw, 24px);
}
.qadha-paper-card {
	background: var(--paper);
	border-radius: var(--radius-lg);
	padding: 18px;
	text-align: center;
	color: var(--ink);
	box-shadow: var(--shadow-drop);
	transition: transform 280ms ease-out, box-shadow 280ms ease-out;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.qadha-paper-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 28px 55px rgba(20, 7, 66, .36);
}
.qadha-paper-cover {
	background: #F4F1FB;
	border-radius: 12px;
	height: 160px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.qadha-paper-cover img { width: 100%; height: 100%; object-fit: cover; }
.qadha-paper-placeholder { font-size: 42px; color: var(--ink-soft); opacity: .5; }
.qadha-paper-card h2 { font-size: 16px; color: var(--ink); margin: 4px 0 0; }
.qadha-paper-card p { font-size: 13px; color: var(--ink-soft); margin: 0; }
.qadha-discount-code {
	display: inline-block;
	background: rgba(235, 186, 23, .15);
	border: 1px dashed rgba(235, 186, 23, .55);
	color: #8A6A00;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 10px;
	letter-spacing: 1px;
}
.qadha-papers-pagination { text-align: center; margin-top: 30px; }
.qadha-papers-pagination a,
.qadha-papers-pagination span {
	color: var(--w-75);
	padding: 4px 10px;
}
.qadha-papers-pagination .current { color: var(--gold); font-weight: 800; }

/* ===== الصفحات العامة ===== */
.qadha-generic-page { padding: 60px 24px 90px; }
.qadha-generic-inner { max-width: 760px; margin: 0 auto; }
.qadha-generic-inner h1 { font-size: clamp(28px, 4vw, 42px); color: #fff; font-weight: 900; margin-bottom: 20px; }
.qadha-generic-content { color: rgba(255, 255, 255, .88); font-size: 16px; }
.qadha-generic-content a { color: var(--gold); text-decoration: underline; }
.qadha-empty { color: var(--w-60); text-align: center; padding: 40px 0; }

/* ===== الفوتر (شفاف مطابق لـ opt-footer في التصميم) ===== */
.qadha-site-footer {
	color: var(--w-40);
	padding: 14px clamp(16px, 4vw, 32px);
}
.qadha-site-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 20px;
}
.qadha-footer-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qadha-footer-links a {
	color: var(--w-40);
	font-size: 11px;
	font-weight: 400;
	padding-bottom: 3px;
	border-bottom: 1.5px solid transparent;
	transition: color 250ms ease-out, border-color 250ms ease-out;
}
.qadha-footer-links a:hover { color: #fff; border-bottom-color: var(--gold); }
.qadha-footer-sep { color: var(--gold); font-size: 12px; }
.qadha-footer-copy { font-size: 10px; color: var(--w-40); margin: 0; font-weight: 400; }

/* ===== Responsive ===== */
@media (max-width: 780px) {
	body:not(.front-page) .qadha-site-main { padding-top: 58px; }
	.qadha-site-header { height: 58px; }
	.qadha-hub-grid, .qadha-papers-grid { grid-template-columns: 1fr; gap: 14px; }
	.qadha-hub-card { aspect-ratio: auto; min-height: 142px; max-width: none; }
	.qadha-btn-primary { min-height: 50px; padding: 0 32px; }
	.qadha-hero { height: calc(100vh - 58px); min-height: 500px; }
}