/**
 * القوالب اللونية واتساع الكتلة.
 *
 * كل قالب يعيد تعريف متغيّرات اللون فقط — لا يتكرّر أي تنسيق، فإضافة قالب
 * جديد تكلّف بضعة أسطر لا أكثر.
 */

/* ==========================================================================
   1) ملكي ذهبي
   ========================================================================== */

.sa--skin-royal {
	--sa-bg: #0a0a0c;
	--sa-bg-2: #15130d;
	--sa-text: #f6efdf;
	--sa-text-dim: #b3a47f;
	--sa-gold: #d4af37;
	--sa-gold-2: #f3d98b;
	--sa-violet: #8a6d1f;
	--sa-pink: #c9a227;
	--sa-cyan: #e0c874;
	--sa-border: rgba( 212, 175, 55, 0.24 );
	--sa-border-soft: rgba( 212, 175, 55, 0.13 );
	--sa-surface: rgba( 212, 175, 55, 0.05 );
	--sa-surface-2: rgba( 212, 175, 55, 0.1 );
	--sa-wheel-inner: #14120c;
	--sa-wheel-outer: #0a0a0c;
	--sa-wheel-line: rgba( 212, 175, 55, 0.28 );

	background:
		radial-gradient( 1100px 520px at 12% -8%, rgba( 212, 175, 55, 0.16 ), transparent 62% ),
		radial-gradient( 900px 480px at 92% 6%, rgba( 201, 162, 39, 0.12 ), transparent 60% ),
		linear-gradient( 165deg, var( --sa-bg ) 0%, var( --sa-bg-2 ) 100% );
}

/* ==========================================================================
   2) نيون
   ========================================================================== */

.sa--skin-neon {
	--sa-bg: #12002e;
	--sa-bg-2: #1e0140;
	--sa-text: #f2e9ff;
	--sa-text-dim: #a68fd6;
	--sa-gold: #00e5ff;
	--sa-gold-2: #7cf9ff;
	--sa-violet: #7c4dff;
	--sa-pink: #ff2ec4;
	--sa-cyan: #00e5ff;
	--sa-border: rgba( 0, 229, 255, 0.24 );
	--sa-border-soft: rgba( 255, 46, 196, 0.14 );
	--sa-wheel-inner: #1a0138;
	--sa-wheel-outer: #12002e;

	background:
		radial-gradient( 1100px 520px at 12% -8%, rgba( 124, 77, 255, 0.4 ), transparent 62% ),
		radial-gradient( 900px 480px at 92% 6%, rgba( 255, 46, 196, 0.28 ), transparent 60% ),
		radial-gradient( 760px 420px at 50% 110%, rgba( 0, 229, 255, 0.24 ), transparent 62% ),
		linear-gradient( 165deg, var( --sa-bg ) 0%, var( --sa-bg-2 ) 100% );
}

/* ==========================================================================
   3) زمردي
   ========================================================================== */

.sa--skin-emerald {
	--sa-bg: #04211c;
	--sa-bg-2: #062f26;
	--sa-text: #e7fff6;
	--sa-text-dim: #8fc4b2;
	--sa-gold: #ffd479;
	--sa-gold-2: #ffe7b0;
	--sa-violet: #2ee6a8;
	--sa-pink: #5ad1b0;
	--sa-cyan: #2ee6a8;
	--sa-border: rgba( 46, 230, 168, 0.2 );
	--sa-border-soft: rgba( 46, 230, 168, 0.11 );
	--sa-wheel-inner: #062b23;
	--sa-wheel-outer: #04211c;

	background:
		radial-gradient( 1100px 520px at 12% -8%, rgba( 46, 230, 168, 0.18 ), transparent 62% ),
		radial-gradient( 900px 480px at 92% 6%, rgba( 255, 212, 121, 0.12 ), transparent 60% ),
		linear-gradient( 165deg, var( --sa-bg ) 0%, var( --sa-bg-2 ) 100% );
}

/* ==========================================================================
   4) وردي حالم
   ========================================================================== */

.sa--skin-rose {
	--sa-bg: #2a0f26;
	--sa-bg-2: #3d1634;
	--sa-text: #ffeef6;
	--sa-text-dim: #d3a3bd;
	--sa-gold: #ffb997;
	--sa-gold-2: #ffd9c4;
	--sa-violet: #c77dff;
	--sa-pink: #ff8fb1;
	--sa-cyan: #ffb997;
	--sa-border: rgba( 255, 143, 177, 0.22 );
	--sa-border-soft: rgba( 255, 143, 177, 0.12 );
	--sa-wheel-inner: #36132f;
	--sa-wheel-outer: #2a0f26;

	background:
		radial-gradient( 1100px 520px at 12% -8%, rgba( 199, 125, 255, 0.3 ), transparent 62% ),
		radial-gradient( 900px 480px at 92% 6%, rgba( 255, 143, 177, 0.26 ), transparent 60% ),
		linear-gradient( 165deg, var( --sa-bg ) 0%, var( --sa-bg-2 ) 100% );
}

/* ==========================================================================
   5) أسود ناري — خلفية سوداء صافية وكتابة برتقالية وذهبية
   ========================================================================== */

.sa--skin-fire {
	--sa-bg: #000000;
	--sa-bg-2: #0d0703;
	--sa-text: #ffd9a8;
	--sa-text-dim: #c99257;
	--sa-gold: #ff8c1a;
	--sa-gold-2: #ffd400;
	--sa-violet: #ff5e00;
	--sa-pink: #ffb300;
	--sa-cyan: #ffd400;
	--sa-border: rgba( 255, 140, 26, 0.3 );
	--sa-border-soft: rgba( 255, 140, 26, 0.16 );
	--sa-surface: rgba( 255, 140, 26, 0.055 );
	--sa-surface-2: rgba( 255, 140, 26, 0.12 );
	--sa-shadow: 0 10px 24px -12px rgba( 255, 94, 0, 0.35 );
	--sa-moon-light: #ffd400;
	--sa-moon-dark: #140a02;
	--sa-wheel-inner: #0d0703;
	--sa-wheel-outer: #000000;
	--sa-wheel-line: rgba( 255, 140, 26, 0.28 );
	--sa-wheel-angle: #ffd400;

	background:
		radial-gradient( 1000px 480px at 12% -8%, rgba( 255, 94, 0, 0.2 ), transparent 60% ),
		radial-gradient( 900px 460px at 92% 6%, rgba( 255, 212, 0, 0.12 ), transparent 58% ),
		linear-gradient( 165deg, #000000 0%, var( --sa-bg-2 ) 100% );
}

/* العناوين والأرقام ذهبية، والمتن برتقالي فاتح — أعلى تباين على الأسود. */
.sa--skin-fire h2,
.sa--skin-fire h3,
.sa--skin-fire h4,
.sa--skin-fire .sa-card__title,
.sa--skin-fire .sa-sign__name,
.sa--skin-fire .sa-facts dd,
.sa--skin-fire .sa-sky__name,
.sa--skin-fire .sa-big3__value,
.sa--skin-fire .sa-score__num,
.sa--skin-fire .sa-welcome strong,
.sa--skin-fire .sa-confirm strong,
.sa--skin-fire .sa-moonbox strong {
	color: #ffd400;
}

.sa--skin-fire .sa-card__text,
.sa--skin-fire .sa-section__body,
.sa--skin-fire .sa-traits li,
.sa--skin-fire .sa-tool__head p {
	color: #ffc98a;
}

.sa--skin-fire .sa-btn {
	background: linear-gradient( 96deg, #ffd400, #ff8c1a 55%, #ff5e00 );
	color: #140a02;
}

.sa--skin-fire .sa-score__ring::before {
	background: #0d0703;
}

/* النجوم على الأسود تكون ذهبية لا بيضاء. */
.sa--skin-fire::before {
	background-image:
		radial-gradient( 1.4px 1.4px at 18% 22%, rgba( 255, 212, 0, 0.7 ), transparent ),
		radial-gradient( 1.1px 1.1px at 72% 14%, rgba( 255, 140, 26, 0.55 ), transparent ),
		radial-gradient( 1.6px 1.6px at 41% 66%, rgba( 255, 212, 0, 0.6 ), transparent ),
		radial-gradient( 1px 1px at 88% 48%, rgba( 255, 140, 26, 0.45 ), transparent ),
		radial-gradient( 1.3px 1.3px at 9% 78%, rgba( 255, 212, 0, 0.5 ), transparent ),
		radial-gradient( 1.1px 1.1px at 61% 88%, rgba( 255, 140, 26, 0.4 ), transparent ),
		radial-gradient( 1.5px 1.5px at 33% 38%, rgba( 255, 212, 0, 0.55 ), transparent );
}

.sa--skin-fire::after {
	background-image:
		radial-gradient( 1px 1px at 28% 12%, rgba( 255, 94, 0, 0.6 ), transparent ),
		radial-gradient( 1px 1px at 82% 72%, rgba( 255, 212, 0, 0.55 ), transparent ),
		radial-gradient( 1px 1px at 54% 34%, rgba( 255, 140, 26, 0.5 ), transparent );
}

/* ==========================================================================
   6) نهاري فاتح
   ========================================================================== */

.sa--skin-light {
	--sa-bg: #f7f6fb;
	--sa-bg-2: #ecebf6;
	--sa-text: #1c1a2e;
	--sa-text-dim: #6b6785;
	--sa-gold: #b8860b;
	--sa-gold-2: #8a6508;
	--sa-violet: #6c5ce7;
	--sa-pink: #e84393;
	--sa-cyan: #0a7d7d;
	--sa-border: rgba( 28, 26, 46, 0.14 );
	--sa-border-soft: rgba( 28, 26, 46, 0.08 );
	--sa-surface: rgba( 255, 255, 255, 0.75 );
	--sa-surface-2: #ffffff;
	--sa-shadow: 0 8px 20px -12px rgba( 28, 26, 46, 0.28 );
	--sa-moon-light: #f0b429;
	--sa-moon-dark: #cfcada;
	--sa-wheel-inner: #ffffff;
	--sa-wheel-outer: #f4f3fa;
	--sa-wheel-line: rgba( 28, 26, 46, 0.2 );
	--sa-wheel-angle: #6c5ce7;

	background:
		radial-gradient( 1000px 480px at 12% -8%, rgba( 108, 92, 231, 0.13 ), transparent 60% ),
		radial-gradient( 900px 460px at 92% 6%, rgba( 232, 67, 147, 0.09 ), transparent 58% ),
		linear-gradient( 165deg, var( --sa-bg ) 0%, var( --sa-bg-2 ) 100% );
}

.sa--skin-light h2,
.sa--skin-light h3,
.sa--skin-light h4,
.sa--skin-light .sa-card__title,
.sa--skin-light .sa-sign__name,
.sa--skin-light .sa-facts dd,
.sa--skin-light .sa-sky__name,
.sa--skin-light .sa-big3__value,
.sa--skin-light .sa-score__num,
.sa--skin-light .sa-welcome strong,
.sa--skin-light .sa-confirm strong,
.sa--skin-light .sa-moonbox strong {
	color: #14122a;
}

.sa--skin-light .sa-card__text,
.sa--skin-light .sa-section__body {
	color: #3b3856;
}

.sa--skin-light .sa-field input,
.sa--skin-light .sa-field select,
.sa--skin-light .sa-dob select,
.sa--skin-light .sa-dob input {
	background: #ffffff;
	color: #1c1a2e;
}

.sa--skin-light .sa-dob select option,
.sa--skin-light .sa-suggest {
	background: #ffffff;
	color: #1c1a2e;
}

.sa--skin-light .sa-traits li,
.sa--skin-light .sa-moon__stats li,
.sa--skin-light .sa-sign__symbol,
.sa--skin-light .sa-sky__glyph {
	background: rgba( 28, 26, 46, 0.05 );
}

.sa--skin-light .sa-score__ring::before {
	background: #ffffff;
}

/* النجوم لا معنى لها على خلفية فاتحة. */
.sa--skin-light::before,
.sa--skin-light::after {
	display: none;
}

/* ==========================================================================
   اتساع الكتلة
   ========================================================================== */

/* عريض: يتجاوز حدود القالب دون أن يلمس حواف الشاشة. */
.sa--w-wide {
	width: min( 1400px, 94vw );
	max-width: min( 1400px, 94vw );
	margin-inline: calc( 50% - min( 700px, 47vw ) );
}

/**
 * عرض كامل: الخروج من حاوية القالب المحدودة العرض.
 *
 * القيمة calc( 50% - 50vw ) تساوي بالضبط المسافة بين حافة الشاشة وحافة حاوية
 * القالب حين تكون الحاوية موسّطة، فتسحب الكتلة إلى حافة الشاشة تماماً.
 *
 * نستخدم !important هنا لأن قوالب البلوكات تفرض max-width على كل ابن مباشر
 * داخل is-layout-constrained، وبدونها تُلغى القاعدة في بعض القوالب.
 */
.sa--w-full {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-inline: calc( 50% - 50vw ) !important;
	padding-inline: clamp( 16px, 4vw, 60px );
	border-radius: 0;
}

/* المحتوى الداخلي يبقى محصوراً حتى لا يمتد السطر بطول يتعب العين. */
.sa--w-full > * {
	max-width: 1500px;
	margin-inline: auto;
}

/* 100vw يشمل عرض شريط التمرير، فنمنع أي تمرير أفقي ناتج عن ذلك. */
body:has( .sa--w-full ) {
	overflow-x: hidden;
}

/**
 * كتلة محشورة داخل تخطيط لا تتمدّد أبداً.
 *
 * الشورت كودات ترث عرض الكتلة من الإعداد العام، فصندوق مثل صندوق القمر —
 * وهو يعيش داخل الشريط الجانبي — كان يأخذ العرض الكامل فيخرج من الشريط
 * ويمتدّ بعرض الشاشة كلها فيغطّي نصّ العمود الرئيسي.
 *
 * المحدّد هنا ‎.sa > * .sa--w-full‎ لا ‎.sa .sa--w-full‎ عن قصد: الفارق بينهما
 * عمق واحد. كتلة الصفحة ابن مباشر للغلاف الخارجي ويجب أن تبقى ممتدّة بعرض
 * الشاشة، أما ما يقع على عمق أكبر فهو داخل عمود أو شريط أو بطاقة — ومكانه
 * حدود حاويته لا حدود الشاشة.
 */
.sa > * .sa--w-full,
.sa > * .sa--w-wide {
	width: auto !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0;
	border-radius: var( --sa-radius );
}

.sa > * .sa--w-full > * {
	max-width: none;
	margin-inline: 0;
}

/* على الشاشات الصغيرة لا معنى لتوسيع الكتلة. */
@media ( max-width: 782px ) {
	.sa--w-wide {
		width: auto;
		max-width: 100%;
		margin-inline: 0;
	}
}