@charset "UTF-8";
/* ==========================================================================
   SOF — نظام التصميم
   نقابة أصحاب محطات الغاز وتوزيع المحروقات
   --------------------------------------------------------------------------
   • عربي أولاً، مبني بخصائص CSS المنطقية (inline-start/end) فيعمل RTL و LTR.
   • بدون أي إطار عمل خارجي. لا Bootstrap ولا Tailwind.
   • الترتيب: 1) الرموز  2) التهيئة  3) التخطيط  4) المكوّنات  5) الأقسام
              6) الصفحات الداخلية  7) الاستجابة  8) الطباعة
   ========================================================================== */

/* ==========================================================================
   1) الرموز التصميمية — Design tokens
   ========================================================================== */
:root {
	/* الألوان — الأساسي مطابق للبوابة، والثانوي من الشعار الرسمي */
	--sof-primary: #7B0000;
	--sof-primary-hover: #96110D;
	--sof-primary-dark: #520000;
	--sof-primary-tint: #FBF1F1;
	--sof-primary-tint-2: #F3E3E3;

	--sof-accent: #047A42;
	--sof-accent-hover: #036536;
	--sof-accent-tint: #EDF6F1;

	--sof-flame: #C02D24;

	--sof-ink: #211A18;
	--sof-ink-2: #4A403D;
	--sof-muted: #6B615D;
	--sof-faint: #9A908C;

	--sof-line: #E7E1E0;
	--sof-line-soft: #F0ECEB;
	--sof-surface: #F8F6F6;
	--sof-surface-2: #FBFAFA;
	--sof-white: #FFFFFF;

	--sof-ok: #1E7A46;
	--sof-warn: #A96A00;

	/* المسافات — مقياس 8pt */
	--sof-s1: .5rem;
	--sof-s2: 1rem;
	--sof-s3: 1.5rem;
	--sof-s4: 2rem;
	--sof-s5: 3rem;
	--sof-s6: 4rem;
	--sof-s7: 6rem;

	/* الأنصاف القُطرية */
	--sof-r-sm: 8px;
	--sof-r-md: 14px;
	--sof-r-lg: 22px;
	--sof-r-pill: 999px;

	/* الظلال — ثلاث درجات فقط */
	--sof-sh-1: 0 1px 2px rgba(33, 26, 24, .05), 0 2px 8px rgba(33, 26, 24, .04);
	--sof-sh-2: 0 2px 6px rgba(33, 26, 24, .06), 0 12px 28px rgba(33, 26, 24, .07);
	--sof-sh-3: 0 8px 20px rgba(33, 26, 24, .10), 0 24px 60px rgba(33, 26, 24, .12);

	/* التخطيط */
	--sof-wrap: 1240px;
	--sof-wrap-narrow: 820px;
	--sof-header-h: 76px;

	/* الحركة */
	--sof-ease: cubic-bezier(.22, .61, .36, 1);
	--sof-t: .28s var(--sof-ease);
}

/* ==========================================================================
   2) التهيئة — Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sof-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--sof-white);
	color: var(--sof-ink);
	font-family: Cairo, system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.85;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sof-s2);
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--sof-ink);
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); line-height: 1.22; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); font-weight: 700; }
h4 { font-size: 1.175rem; font-weight: 700; }

p { margin: 0 0 var(--sof-s2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--sof-primary); text-decoration: none; transition: color var(--sof-t); }
a:hover { color: var(--sof-primary-hover); }

ul, ol { margin: 0 0 var(--sof-s2); padding-inline-start: 1.4em; }
li { margin-bottom: .35em; }

strong, b { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--sof-line); margin: var(--sof-s4) 0; }

blockquote {
	margin: var(--sof-s3) 0;
	padding: var(--sof-s2) var(--sof-s3);
	border-inline-start: 4px solid var(--sof-primary);
	background: var(--sof-surface);
	border-radius: var(--sof-r-sm);
	font-size: 1.1rem;
}

code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

table { width: 100%; border-collapse: collapse; margin-bottom: var(--sof-s3); }
th, td { padding: .7rem .9rem; border: 1px solid var(--sof-line); text-align: start; }
th { background: var(--sof-surface); font-weight: 700; }

/* إمكانية الوصول ------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--sof-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.sof-skip {
	position: absolute;
	inset-inline-start: 50%;
	top: -100px;
	transform: translateX(-50%);
	z-index: 999;
	background: var(--sof-primary);
	color: #fff;
	padding: .75rem 1.5rem;
	border-radius: 0 0 var(--sof-r-sm) var(--sof-r-sm);
	font-weight: 700;
	transition: top .2s var(--sof-ease);
}
.sof-skip:focus { top: 0; color: #fff; }

.sof-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ==========================================================================
   3) التخطيط — Layout
   ========================================================================== */
.sof-wrap {
	width: 100%;
	max-width: var(--sof-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.sof-wrap--narrow { max-width: var(--sof-wrap-narrow); }

.sof-section { padding-block: clamp(3rem, 7vw, 6rem); }
.sof-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sof-section--surface { background: var(--sof-surface); }
.sof-section--tint { background: var(--sof-primary-tint); }

.sof-grid { display: grid; gap: var(--sof-s3); }
.sof-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sof-grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.sof-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ترويسة القسم -------------------------------------------------------- */
.sof-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sof-head--center { margin-inline: auto; text-align: center; }

.sof-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .85rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--sof-primary);
	text-transform: uppercase;
}
.sof-eyebrow::before {
	content: "";
	width: 26px; height: 2px;
	background: var(--sof-accent);
	border-radius: 2px;
}
.sof-head--center .sof-eyebrow::before { display: none; }

.sof-head__title { margin-bottom: .75rem; }
.sof-head__text { color: var(--sof-muted); font-size: 1.075rem; margin: 0; }

/* ==========================================================================
   4) المكوّنات — Components
   ========================================================================== */

/* 4.1 الأزرار ---------------------------------------------------------- */
.sof-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .8rem 1.6rem;
	border: 1.5px solid transparent;
	border-radius: var(--sof-r-pill);
	font: inherit;
	font-weight: 700;
	font-size: .975rem;
	line-height: 1.4;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--sof-t), color var(--sof-t), border-color var(--sof-t), transform var(--sof-t), box-shadow var(--sof-t);
}
.sof-btn:active { transform: translateY(1px); }
.sof-btn__icon { opacity: .75; }

.sof-btn--primary { background: var(--sof-primary); color: #fff; box-shadow: var(--sof-sh-1); }
.sof-btn--primary:hover { background: var(--sof-primary-hover); color: #fff; box-shadow: var(--sof-sh-2); }

.sof-btn--accent { background: var(--sof-accent); color: #fff; }
.sof-btn--accent:hover { background: var(--sof-accent-hover); color: #fff; }

.sof-btn--ghost { background: transparent; color: var(--sof-primary); border-color: var(--sof-line); }
.sof-btn--ghost:hover { background: var(--sof-primary-tint); border-color: var(--sof-primary); color: var(--sof-primary); }

.sof-btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(4px); }
.sof-btn--light:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: rgba(255, 255, 255, .6); }

.sof-btn--solidlight { background: #fff; color: var(--sof-primary); }
.sof-btn--solidlight:hover { background: #fff; color: var(--sof-primary-hover); box-shadow: var(--sof-sh-2); }

.sof-btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }
.sof-btn--block { width: 100%; }

/* رابط نصّي بسهم */
.sof-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 700;
	font-size: .95rem;
	color: var(--sof-primary);
}
.sof-link svg { transition: transform var(--sof-t); }
.sof-link:hover svg { transform: translateX(4px); }
[dir="rtl"] .sof-link:hover svg { transform: translateX(-4px); }

/* 4.2 الشارات --------------------------------------------------------- */
.sof-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .18rem .65rem;
	border-radius: var(--sof-r-pill);
	background: var(--sof-accent-tint);
	color: var(--sof-accent);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.7;
}
.sof-badge--warn { background: #FDF4E3; color: var(--sof-warn); }
.sof-badge--muted { background: var(--sof-surface); color: var(--sof-muted); }

/* 4.3 البطاقات -------------------------------------------------------- */
.sof-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sof-white);
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	padding: var(--sof-s3);
	transition: transform var(--sof-t), box-shadow var(--sof-t), border-color var(--sof-t);
}
.sof-card:hover { transform: translateY(-4px); box-shadow: var(--sof-sh-2); border-color: var(--sof-line-soft); }

.sof-card__icon {
	display: inline-grid;
	place-items: center;
	width: 52px; height: 52px;
	margin-bottom: var(--sof-s2);
	border-radius: var(--sof-r-sm);
	background: var(--sof-primary-tint);
	color: var(--sof-primary);
	transition: background-color var(--sof-t), color var(--sof-t);
}
.sof-card:hover .sof-card__icon { background: var(--sof-primary); color: #fff; }

.sof-card__title { margin: 0 0 .5rem; font-size: 1.175rem; font-weight: 700; }
.sof-card__title a { color: inherit; }
.sof-card__text { margin: 0 0 var(--sof-s2); color: var(--sof-muted); font-size: .975rem; line-height: 1.75; }
.sof-card__foot { margin-top: auto; padding-top: .25rem; }

/* رابط يغطي البطاقة كاملة — يبقي البطاقة قابلة للنقر ودلالياً سليمة */
.sof-card__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* 4.4 القوائم المؤشَّرة ------------------------------------------------ */
.sof-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.sof-checks li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: .7rem;
	align-items: start;
	margin: 0;
	color: var(--sof-ink-2);
}
.sof-checks li::before {
	content: "";
	width: 22px; height: 22px;
	margin-top: .35em;
	border-radius: 50%;
	background: var(--sof-accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047A42' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* قائمة مرقّمة بأرقام دائرية */
.sof-steps { list-style: none; margin: 0; padding: 0; counter-reset: sofstep; display: grid; gap: var(--sof-s2); }
.sof-steps li {
	counter-increment: sofstep;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: var(--sof-s2);
	align-items: start;
	margin: 0;
	color: var(--sof-ink-2);
}
.sof-steps li::before {
	content: counter(sofstep);
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--sof-primary-tint);
	color: var(--sof-primary);
	font-weight: 800;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}

/* 4.5 بطاقة المحتوى الناقص -------------------------------------------- */
.sof-required {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
	padding: .85rem 1.1rem;
	border: 1px dashed #D9B48A;
	border-radius: var(--sof-r-sm);
	background: #FDF8F0;
	color: #7A5620;
	font-size: .925rem;
	line-height: 1.7;
}
.sof-required__icon { color: #C08A3E; }
.sof-required__tag { font-weight: 800; letter-spacing: .02em; }
.sof-required__hint {
	flex-basis: 100%;
	font-size: .82rem;
	color: #9A7645;
}

/* 4.6 الأكورديون ------------------------------------------------------ */
.sof-acc { display: grid; gap: .75rem; }

.sof-acc__item {
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	background: var(--sof-white);
	overflow: hidden;
	transition: border-color var(--sof-t), box-shadow var(--sof-t);
}
.sof-acc__item[open] { border-color: var(--sof-primary-tint-2); box-shadow: var(--sof-sh-1); }

.sof-acc__q {
	display: flex;
	align-items: center;
	gap: var(--sof-s2);
	padding: 1.1rem var(--sof-s3);
	cursor: pointer;
	font-weight: 700;
	font-size: 1.05rem;
	list-style: none;
	transition: background-color var(--sof-t);
}
.sof-acc__q::-webkit-details-marker { display: none; }
.sof-acc__q:hover { background: var(--sof-surface-2); }

.sof-acc__mark {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	margin-inline-start: auto;
	border-radius: 50%;
	background: var(--sof-primary-tint);
	color: var(--sof-primary);
	transition: transform var(--sof-t), background-color var(--sof-t), color var(--sof-t);
}
.sof-acc__item[open] .sof-acc__mark { transform: rotate(45deg); background: var(--sof-primary); color: #fff; }

.sof-acc__a {
	padding: 0 var(--sof-s3) var(--sof-s3);
	color: var(--sof-muted);
	font-size: 1rem;
}
.sof-acc__a > :first-child { margin-top: 0; }

/* 4.7 فتات الخبز ------------------------------------------------------ */
.sof-crumbs { margin-bottom: var(--sof-s2); font-size: .875rem; }
.sof-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.sof-crumbs__item { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--sof-muted); }
.sof-crumbs__item + .sof-crumbs__item::before { content: "/"; color: var(--sof-faint); }
.sof-crumbs a { color: var(--sof-muted); }
.sof-crumbs a:hover { color: var(--sof-primary); }
.sof-crumbs [aria-current] { color: var(--sof-ink); font-weight: 600; }

/* 4.8 ترويسة الصفحة الداخلية ------------------------------------------ */
.sof-pagehead {
	position: relative;
	padding-block: clamp(2.25rem, 5vw, 3.75rem);
	background: linear-gradient(160deg, var(--sof-primary-tint) 0%, var(--sof-surface) 70%);
	border-bottom: 1px solid var(--sof-line);
	overflow: hidden;
}
.sof-pagehead::after {
	content: "";
	position: absolute;
	inset-block: -40%;
	inset-inline-end: -6%;
	width: 340px;
	background: radial-gradient(circle, rgba(123, 0, 0, .07) 0%, transparent 68%);
	pointer-events: none;
}
.sof-pagehead__eyebrow { margin: 0 0 .35rem; color: var(--sof-primary); font-weight: 700; font-size: .875rem; }
.sof-pagehead__title { margin: 0; font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.85rem); }
.sof-pagehead__sub { margin: .85rem 0 0; max-width: 68ch; color: var(--sof-muted); font-size: 1.075rem; }

/* 4.9 ترقيم الصفحات --------------------------------------------------- */
.sof-pager { margin-top: var(--sof-s5); }
.sof-pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.sof-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px; height: 44px;
	padding-inline: .75rem;
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-sm);
	color: var(--sof-ink-2);
	font-weight: 700;
	font-size: .95rem;
	transition: all var(--sof-t);
}
.sof-pager .page-numbers:hover { border-color: var(--sof-primary); color: var(--sof-primary); }
.sof-pager .page-numbers.current { background: var(--sof-primary); border-color: var(--sof-primary); color: #fff; }
.sof-pager .dots { border-color: transparent; }

/* 4.10 النماذج -------------------------------------------------------- */
.sof-field { display: grid; gap: .4rem; margin-bottom: var(--sof-s2); }
.sof-field__label { font-weight: 700; font-size: .95rem; }
.sof-field__label .req { color: var(--sof-flame); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], select, textarea {
	width: 100%;
	padding: .8rem 1rem;
	border: 1.5px solid var(--sof-line);
	border-radius: var(--sof-r-sm);
	background: var(--sof-white);
	color: var(--sof-ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color var(--sof-t), box-shadow var(--sof-t);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--sof-primary);
	box-shadow: 0 0 0 3px var(--sof-primary-tint);
}
textarea { min-height: 150px; resize: vertical; }
::placeholder { color: var(--sof-faint); }

.sof-search { display: flex; gap: .5rem; }
.sof-search input { flex: 1; }

/* 4.11 الحركة عند الظهور ---------------------------------------------- */
.sof-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .65s var(--sof-ease), transform .65s var(--sof-ease);
	will-change: opacity, transform;
}
.sof-reveal.is-in { opacity: 1; transform: none; }
.sof-reveal[data-delay="1"] { transition-delay: .07s; }
.sof-reveal[data-delay="2"] { transition-delay: .14s; }
.sof-reveal[data-delay="3"] { transition-delay: .21s; }
.sof-reveal[data-delay="4"] { transition-delay: .28s; }

/* 4.12 زر العودة للأعلى ----------------------------------------------- */
.sof-top {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border: 1px solid var(--sof-line);
	border-radius: 50%;
	background: var(--sof-white);
	color: var(--sof-primary);
	box-shadow: var(--sof-sh-2);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--sof-t), transform var(--sof-t), visibility var(--sof-t);
}
.sof-top.is-on { opacity: 1; visibility: visible; transform: none; }
.sof-top:hover { background: var(--sof-primary); color: #fff; border-color: var(--sof-primary); }

/* ==========================================================================
   5) الرأس والتذييل
   ========================================================================== */

/* 5.1 الشريط العلوي --------------------------------------------------- */
.sof-topbar {
	background: var(--sof-ink);
	color: rgba(255, 255, 255, .82);
	font-size: .85rem;
	line-height: 2.6;
}
.sof-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sof-s2); flex-wrap: wrap; }
.sof-topbar__group { display: flex; align-items: center; gap: var(--sof-s3); flex-wrap: wrap; }
.sof-topbar a { color: rgba(255, 255, 255, .82); display: inline-flex; align-items: center; gap: .4rem; }
.sof-topbar a:hover { color: #fff; }
.sof-topbar svg { opacity: .6; }

/* زر لوحة التحكم — يقود مسؤول الموقع إلى صفحة الدخول.
   مقصود أن يكون هادئاً: زر «الخدمات الإلكترونية» في الرأس للأعضاء،
   وهذا الزر لموظّف واحد، فلا يجوز أن ينافسه بصرياً. */
.sof-adminbtn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .1rem .7rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	color: rgba(255, 255, 255, .82);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.9;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.sof-adminbtn:hover,
.sof-adminbtn:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}
.sof-topbar .sof-adminbtn svg { opacity: .85; }

/* نسخة الدرج على الجوال — الشريط العلوي الثانوي مخفيّ هناك. */
.sof-adminbtn--block {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: var(--sof-s2);
	padding: .55rem 1rem;
	border-color: var(--sof-line, #e6e0de);
	color: var(--sof-ink, #211A18);
	font-size: .9rem;
}
.sof-adminbtn--block:hover,
.sof-adminbtn--block:focus-visible {
	background: rgba(123, 0, 0, .06);
	border-color: var(--sof-primary, #7B0000);
	color: var(--sof-primary, #7B0000);
}


/* 5.2 الرأس ----------------------------------------------------------- */
.sof-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--sof-t), border-color var(--sof-t), background-color var(--sof-t);
}
.sof-header.is-stuck { border-bottom-color: var(--sof-line); box-shadow: var(--sof-sh-1); background: rgba(255, 255, 255, .97); }

.sof-header__in {
	display: flex;
	align-items: center;
	gap: var(--sof-s3);
	min-height: var(--sof-header-h);
}

.sof-brand { display: flex; align-items: center; gap: .8rem; color: var(--sof-ink); flex-shrink: 0; }
.sof-brand:hover { color: var(--sof-ink); }
.sof-brand__logo { width: 54px; height: 54px; object-fit: contain; }
.sof-brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.sof-brand__name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.sof-brand__sub { font-size: .74rem; font-weight: 600; color: var(--sof-muted); }

/* 5.3 التنقل المكتبي -------------------------------------------------- */
.sof-nav { margin-inline-start: auto; }
.sof-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.sof-nav__list li { position: relative; margin: 0; }

.sof-nav a {
	display: block;
	padding: .6rem .85rem;
	border-radius: var(--sof-r-sm);
	color: var(--sof-ink-2);
	font-weight: 600;
	font-size: .96rem;
	white-space: nowrap;
	transition: color var(--sof-t), background-color var(--sof-t);
}
.sof-nav a:hover { color: var(--sof-primary); background: var(--sof-primary-tint); }

.sof-nav .current-menu-item > a,
.sof-nav .current_page_item > a,
.sof-nav .current-menu-ancestor > a { color: var(--sof-primary); font-weight: 700; }

/* القوائم المنسدلة */
.sof-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	z-index: 10;
	min-width: 250px;
	padding: .5rem;
	list-style: none;
	margin: 0;
	background: var(--sof-white);
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	box-shadow: var(--sof-sh-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--sof-t), transform var(--sof-t), visibility var(--sof-t);
}
.sof-nav li:hover > .sub-menu,
.sof-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sof-nav .sub-menu a { padding: .55rem .8rem; font-weight: 600; font-size: .93rem; white-space: normal; }

.sof-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .42em; height: .42em;
	margin-inline-start: .45em;
	border-inline-end: 1.8px solid currentColor;
	border-block-end: 1.8px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	opacity: .5;
}

.sof-header__cta { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* 5.4 زر القائمة والدرج للجوال ---------------------------------------- */
.sof-burger {
	display: none;
	place-items: center;
	width: 46px; height: 46px;
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-sm);
	background: var(--sof-white);
	color: var(--sof-ink);
	cursor: pointer;
	transition: background-color var(--sof-t), border-color var(--sof-t);
}
.sof-burger:hover { background: var(--sof-surface); border-color: var(--sof-primary); }

.sof-drawer {
	position: fixed;
	inset: 0;
	z-index: 80;
	visibility: hidden;
	pointer-events: none;
}
.sof-drawer.is-open { visibility: visible; pointer-events: auto; }

.sof-drawer__veil {
	position: absolute;
	inset: 0;
	background: rgba(33, 26, 24, .45);
	opacity: 0;
	transition: opacity var(--sof-t);
}
.sof-drawer.is-open .sof-drawer__veil { opacity: 1; }

.sof-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(390px, 88vw);
	display: flex;
	flex-direction: column;
	background: var(--sof-white);
	box-shadow: var(--sof-sh-3);
	transform: translateX(100%);
	transition: transform .34s var(--sof-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}
[dir="rtl"] .sof-drawer__panel { transform: translateX(-100%); }
.sof-drawer.is-open .sof-drawer__panel { transform: none; }

.sof-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sof-s2);
	padding: var(--sof-s2) var(--sof-s3);
	border-bottom: 1px solid var(--sof-line);
	position: sticky;
	top: 0;
	background: var(--sof-white);
	z-index: 2;
}

.sof-drawer__body { padding: var(--sof-s2) var(--sof-s3) var(--sof-s4); }

.sof-drawer__list { list-style: none; margin: 0 0 var(--sof-s3); padding: 0; }
.sof-drawer__list li { margin: 0; border-bottom: 1px solid var(--sof-line-soft); }
.sof-drawer__list > li:last-child { border-bottom: 0; }
.sof-drawer__list a {
	display: block;
	padding: .95rem .25rem;
	color: var(--sof-ink);
	font-weight: 600;
	font-size: 1.03rem;
}
.sof-drawer__list a:hover { color: var(--sof-primary); }
.sof-drawer__list .sub-menu { list-style: none; margin: 0 0 .5rem; padding-inline-start: 1rem; }
.sof-drawer__list .sub-menu li { border: 0; }
.sof-drawer__list .sub-menu a { padding: .5rem .25rem; font-size: .95rem; font-weight: 500; color: var(--sof-muted); }
.sof-drawer__list .current-menu-item > a { color: var(--sof-primary); }

.sof-drawer__meta { display: grid; gap: .6rem; margin-top: var(--sof-s3); padding-top: var(--sof-s3); border-top: 1px solid var(--sof-line); font-size: .93rem; color: var(--sof-muted); }
.sof-drawer__meta a { display: flex; align-items: center; gap: .5rem; color: var(--sof-ink-2); }

body.sof-locked { overflow: hidden; }

/* 5.5 التذييل --------------------------------------------------------- */
.sof-footer {
	background: var(--sof-ink);
	color: rgba(255, 255, 255, .68);
	font-size: .95rem;
}
.sof-footer a { color: rgba(255, 255, 255, .68); }
.sof-footer a:hover { color: #fff; }

.sof-footer__main {
	display: grid;
	gap: var(--sof-s4);
	grid-template-columns: minmax(260px, 1.5fr) repeat(auto-fit, minmax(170px, 1fr));
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.sof-footer__brand { display: flex; align-items: center; gap: .85rem; margin-bottom: var(--sof-s2); }
/* الشعار على خلفية داكنة: قرص أبيض يعيد للشعار أرضيته الأصلية.
   الشعار الرسمي مرسوم على أبيض — حلقته وشريطه وحدوده سوداء، فتختفي
   على التذييل الداكن بدون هذا القرص. */
.sof-footer__brand img {
	width: 62px;
	height: 62px;
	padding: 5px;
	background: #fff;
	border-radius: 50%;
	object-fit: contain;
}
.sof-footer__name { color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.35; margin: 0; }
.sof-footer__motto { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 600; color: var(--sof-accent); letter-spacing: .04em; }
.sof-footer__about { max-width: 42ch; line-height: 1.9; }

.sof-footer__title {
	margin: 0 0 var(--sof-s2);
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .01em;
}

.sof-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sof-footer__list li { margin: 0; }

.sof-footer__contact { display: grid; gap: .75rem; }
.sof-footer__contact li { display: grid; grid-template-columns: 20px 1fr; gap: .65rem; align-items: start; margin: 0; }
.sof-footer__contact svg { margin-top: .45em; opacity: .55; }

.sof-social { display: flex; gap: .5rem; margin-top: var(--sof-s2); }
.sof-social a {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	transition: background-color var(--sof-t), border-color var(--sof-t), color var(--sof-t);
}
.sof-social a:hover { background: var(--sof-primary); border-color: var(--sof-primary); color: #fff; }

.sof-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sof-s2);
	padding-block: var(--sof-s3);
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .875rem;
}
.sof-footer__bar p { margin: 0; }
.sof-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sof-s2); list-style: none; margin: 0; padding: 0; }
.sof-footer__legal li { margin: 0; }

.sof-footer .sof-required {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .7);
	padding: .5rem .75rem;
	font-size: .85rem;
}
.sof-footer .sof-required__icon { color: rgba(255, 255, 255, .5); }
.sof-footer .sof-required__hint { color: rgba(255, 255, 255, .45); }

/* ==========================================================================
   6) أقسام الصفحة الرئيسية
   ========================================================================== */

/* 6.1 الواجهة --------------------------------------------------------- */
.sof-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--sof-primary-dark) 0%, var(--sof-primary) 46%, #9A1A12 100%);
	color: #fff;
	isolation: isolate;
}
.sof-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: .22;
}
.sof-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: -30%;
	inset-inline-start: -12%;
	width: 620px; height: 620px;
	background: radial-gradient(circle, rgba(4, 122, 66, .28) 0%, transparent 62%);
	pointer-events: none;
}
.sof-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-end: -45%;
	inset-inline-end: -8%;
	width: 560px; height: 560px;
	background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 65%);
	pointer-events: none;
}

.sof-hero__in {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(3.5rem, 9vw, 7rem);
}

.sof-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: var(--sof-s2);
	padding: .35rem 1rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--sof-r-pill);
	background: rgba(255, 255, 255, .1);
	font-size: .85rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .95);
}
.sof-hero__kicker::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #56D19A;
	box-shadow: 0 0 0 4px rgba(86, 209, 154, .22);
}

.sof-hero__title { color: #fff; margin-bottom: var(--sof-s2); }
.sof-hero__title em { font-style: normal; color: #FFD9A0; }

.sof-hero__text {
	max-width: 56ch;
	margin-bottom: var(--sof-s4);
	color: rgba(255, 255, 255, .86);
	font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
	line-height: 1.9;
}

.sof-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.sof-hero__note {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: var(--sof-s3);
	font-size: .875rem;
	color: rgba(255, 255, 255, .62);
}

.sof-hero__crest { display: grid; place-items: center; }
/* نفس المبدأ في الواجهة: القرص الأبيض يجعل الشعار يُقرأ كخاتم رسمي
   فوق التدرّج العنابي، بدل أن تذوب حدوده السوداء فيه. */
.sof-hero__crest img {
	width: min(320px, 78%);
	padding: 5.5%;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 24px 48px rgba(0, 0, 0, .32);
	animation: sof-float 7s ease-in-out infinite;
}
@keyframes sof-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

/* 6.2 شريط الوصول السريع --------------------------------------------- */
.sof-quick {
	position: relative;
	z-index: 2;
	margin-top: -2.75rem;
	margin-bottom: -1rem;
}
.sof-quick__card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
	background: var(--sof-white);
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-lg);
	box-shadow: var(--sof-sh-3);
	overflow: hidden;
}
.sof-quick__item {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 1.35rem 1.25rem;
	border-inline-end: 1px solid var(--sof-line-soft);
	color: var(--sof-ink);
	transition: background-color var(--sof-t), color var(--sof-t);
}
.sof-quick__item:last-child { border-inline-end: 0; }
.sof-quick__item:hover { background: var(--sof-primary-tint); color: var(--sof-primary); }
.sof-quick__item svg { color: var(--sof-primary); }
.sof-quick__label { font-weight: 700; font-size: .95rem; line-height: 1.4; }

/* 6.3 عن النقابة ------------------------------------------------------ */
.sof-about__in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.sof-about__media { position: relative; }
/* صورة مبنى النقابة بدل الشعار المكرّر — إطار مقصوص بنسبة ثابتة حتى لا
   يتغيّر ارتفاع القسم مهما كانت أبعاد الصورة الأصلية. */
.sof-about__photo {
	position: relative;
	margin: 0;
	max-width: 460px;
	margin-inline: auto;
	border-radius: var(--sof-r-lg);
	border: 1px solid var(--sof-line);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}
.sof-about__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}
.sof-about__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1.6rem .9rem .7rem;
	color: var(--sof-white);
	font-size: .9rem;
	font-weight: 700;
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0));
}

.sof-fields { display: grid; gap: .85rem; margin-top: var(--sof-s3); }
.sof-fields__item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--sof-s2);
	align-items: center;
	padding: .85rem 1rem;
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	background: var(--sof-white);
	transition: border-color var(--sof-t), transform var(--sof-t);
}
.sof-fields__item:hover { border-color: var(--sof-accent); transform: translateX(-4px); }
[dir="ltr"] .sof-fields__item:hover { transform: translateX(4px); }
.sof-fields__icon {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: var(--sof-r-sm);
	background: var(--sof-accent-tint);
	color: var(--sof-accent);
}
/* الاسم والوصف داخل حاوية شبكية عادية — يحتاجان display:block لينفصلا. */
.sof-fields__name { display: block; font-weight: 700; font-size: 1rem; line-height: 1.5; }
/* المهنة الرسمية كما تُطبع على شهادة العضوية — تُعرض بجانب نوع المنشأة. */
.sof-fields__prof {
	display: inline-block;
	margin-inline-start: .45rem;
	padding: .05rem .55rem;
	border-radius: var(--sof-r-pill);
	background: var(--sof-accent-tint);
	color: var(--sof-accent);
	font-size: .78rem;
	font-weight: 600;
	vertical-align: middle;
}
.sof-fields__desc { display: block; margin-top: .1rem; font-size: .9rem; color: var(--sof-muted); line-height: 1.65; }

/* 6.4 الإحصائيات ------------------------------------------------------ */
.sof-stats {
	background: var(--sof-ink);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.sof-stats::before {
	content: "";
	position: absolute;
	inset-block-start: -60%;
	inset-inline-start: 8%;
	width: 480px; height: 480px;
	background: radial-gradient(circle, rgba(123, 0, 0, .5) 0%, transparent 62%);
}
.sof-stats__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sof-s3);
	text-align: center;
}
.sof-stats__item { padding: var(--sof-s2); }
.sof-stats__num {
	display: block;
	font-size: clamp(2.5rem, 2rem + 2.4vw, 3.6rem);
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}
.sof-stats__label { display: block; margin-top: .45rem; font-size: .95rem; color: rgba(255, 255, 255, .7); }
.sof-stats__note { margin-top: var(--sof-s3); text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .45); }

/* 6.5 الخدمات --------------------------------------------------------- */
.sof-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: var(--sof-s3); }

.sof-svc { position: relative; }
.sof-svc__badge { position: absolute; inset-block-start: var(--sof-s3); inset-inline-end: var(--sof-s3); }

/* 6.6 العضوية -------------------------------------------------------- */
.sof-member__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sof-docs { display: grid; gap: var(--sof-s2); }
.sof-docs__group {
	padding: var(--sof-s3);
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	background: var(--sof-white);
}
.sof-docs__title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .85rem; font-size: 1.02rem; font-weight: 700; color: var(--sof-primary); }
.sof-docs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sof-docs__list li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; align-items: start; margin: 0; font-size: .95rem; color: var(--sof-ink-2); }
.sof-docs__list li::before { content: ""; width: 6px; height: 6px; margin-top: .78em; margin-inline-start: 6px; border-radius: 50%; background: var(--sof-accent); }

/* 6.7 خطوات العملية -------------------------------------------------- */
.sof-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sof-s3); counter-reset: flow; position: relative; }
.sof-flow__item { position: relative; padding-top: var(--sof-s2); }
.sof-flow__num {
	display: grid;
	place-items: center;
	width: 58px; height: 58px;
	margin-bottom: var(--sof-s2);
	border-radius: 50%;
	background: var(--sof-white);
	border: 2px solid var(--sof-primary-tint-2);
	color: var(--sof-primary);
	font-size: 1.4rem;
	font-weight: 800;
	position: relative;
	z-index: 1;
}
.sof-flow__item::before {
	content: "";
	position: absolute;
	top: calc(var(--sof-s2) + 29px);
	inset-inline-end: calc(58px + var(--sof-s2));
	width: calc(100% - 58px - var(--sof-s2));
	height: 2px;
	background: repeating-linear-gradient(to left, var(--sof-line) 0 8px, transparent 8px 16px);
}
.sof-flow__item:last-child::before { display: none; }
[dir="ltr"] .sof-flow__item::before { inset-inline-end: auto; inset-inline-start: calc(58px + var(--sof-s2)); background: repeating-linear-gradient(to right, var(--sof-line) 0 8px, transparent 8px 16px); }
.sof-flow__title { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 700; }
.sof-flow__text { margin: 0; font-size: .95rem; color: var(--sof-muted); line-height: 1.75; }

/* 6.8 الأخبار --------------------------------------------------------- */
.sof-news__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sof-s3); }

.sof-post {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sof-white);
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	overflow: hidden;
	transition: transform var(--sof-t), box-shadow var(--sof-t);
}
.sof-post:hover { transform: translateY(-4px); box-shadow: var(--sof-sh-2); }

.sof-post__media { position: relative; aspect-ratio: 16 / 10; background: var(--sof-surface); overflow: hidden; }
.sof-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sof-ease); }
.sof-post:hover .sof-post__media img { transform: scale(1.05); }

.sof-post__ph {
	display: grid;
	place-items: center;
	height: 100%;
	background: linear-gradient(140deg, var(--sof-primary-tint) 0%, var(--sof-surface) 100%);
	color: var(--sof-primary);
	opacity: .35;
}
.sof-post__ph img { width: 42%; height: auto; object-fit: contain; }

.sof-post__cat {
	position: absolute;
	inset-block-start: .85rem;
	inset-inline-start: .85rem;
	padding: .2rem .7rem;
	border-radius: var(--sof-r-pill);
	background: rgba(255, 255, 255, .93);
	color: var(--sof-primary);
	font-size: .78rem;
	font-weight: 700;
	backdrop-filter: blur(4px);
}

.sof-post__body { display: flex; flex-direction: column; flex: 1; padding: var(--sof-s3); }
.sof-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .6rem; font-size: .82rem; color: var(--sof-faint); }
.sof-post__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.sof-post__title { margin: 0 0 .55rem; font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.sof-post__title a { color: inherit; }
.sof-post__title a::after { content: ""; position: absolute; inset: 0; }
.sof-post__excerpt { margin: 0 0 var(--sof-s2); color: var(--sof-muted); font-size: .95rem; line-height: 1.75; }
.sof-post__more { margin-top: auto; }

/* 6.9 روابط مهمة ------------------------------------------------------ */
.sof-links__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--sof-s2); }
.sof-links__item {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	background: var(--sof-white);
	color: var(--sof-ink);
	font-weight: 700;
	font-size: .98rem;
	transition: all var(--sof-t);
}
.sof-links__item:hover { border-color: var(--sof-primary); background: var(--sof-primary-tint); color: var(--sof-primary); transform: translateY(-3px); }
.sof-links__item svg { color: var(--sof-primary); }
.sof-links__item .sof-links__go { margin-inline-start: auto; opacity: .4; }

/* 6.10 دعوة التواصل --------------------------------------------------- */
.sof-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(140deg, var(--sof-primary) 0%, var(--sof-primary-dark) 100%);
	color: #fff;
}
.sof-cta::after {
	content: "";
	position: absolute;
	inset-block-start: -50%;
	inset-inline-end: -5%;
	width: 480px; height: 480px;
	background: radial-gradient(circle, rgba(4, 122, 66, .3) 0%, transparent 62%);
}
.sof-cta__in { position: relative; display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sof-cta__title { color: #fff; margin-bottom: .75rem; }
.sof-cta__text { margin: 0; color: rgba(255, 255, 255, .82); font-size: 1.075rem; max-width: 52ch; }
.sof-cta__actions { display: grid; gap: .75rem; }
.sof-cta__actions .sof-required { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .85); }
.sof-cta__actions .sof-required__icon { color: rgba(255, 255, 255, .6); }
.sof-cta__actions .sof-required__hint { color: rgba(255, 255, 255, .55); }

/* ==========================================================================
   7) الصفحات الداخلية
   ========================================================================== */

/* 7.1 المحتوى النصّي -------------------------------------------------- */
.sof-prose { font-size: 1.075rem; line-height: 1.95; color: var(--sof-ink-2); }
.sof-prose > h2 { margin-top: var(--sof-s5); }
.sof-prose > h3 { margin-top: var(--sof-s4); }
.sof-prose > :first-child { margin-top: 0; }
.sof-prose img { border-radius: var(--sof-r-md); }
.sof-prose figure { margin: var(--sof-s3) 0; }
.sof-prose figcaption { margin-top: .6rem; font-size: .875rem; color: var(--sof-faint); text-align: center; }

/* 7.2 لوح جانبي ------------------------------------------------------- */
.sof-split { display: grid; grid-template-columns: 1fr 330px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.sof-aside { position: sticky; top: calc(var(--sof-header-h) + 20px); display: grid; gap: var(--sof-s2); }
.sof-aside__box {
	padding: var(--sof-s3);
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	background: var(--sof-surface-2);
}
.sof-aside__title { margin: 0 0 var(--sof-s2); font-size: 1.02rem; font-weight: 700; }
.sof-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sof-aside__list li { margin: 0; }
.sof-aside__list a {
	display: block;
	padding: .5rem .75rem;
	border-radius: var(--sof-r-sm);
	color: var(--sof-ink-2);
	font-size: .95rem;
	font-weight: 600;
	transition: all var(--sof-t);
}
.sof-aside__list a:hover { background: var(--sof-primary-tint); color: var(--sof-primary); }
.sof-aside__list .is-current a { background: var(--sof-primary); color: #fff; }

/* 7.3 صفحة الخدمة ----------------------------------------------------- */
.sof-svcpage__block { margin-bottom: var(--sof-s5); }
.sof-svcpage__block:last-child { margin-bottom: 0; }
.sof-svcpage__h {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: var(--sof-s2);
	font-size: 1.35rem;
	font-weight: 700;
}
.sof-svcpage__h svg { color: var(--sof-accent); }

.sof-notice {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: .85rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--sof-r-md);
	background: var(--sof-primary-tint);
	border-inline-start: 4px solid var(--sof-primary);
	color: var(--sof-ink-2);
	font-size: .98rem;
	line-height: 1.8;
}
.sof-notice svg { margin-top: .35em; color: var(--sof-primary); }
.sof-notice--accent { background: var(--sof-accent-tint); border-inline-start-color: var(--sof-accent); }
.sof-notice--accent svg { color: var(--sof-accent); }

/* 7.4 صفحة التواصل ---------------------------------------------------- */
.sof-contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.sof-contact__list { display: grid; gap: var(--sof-s2); }
.sof-contact__row {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: var(--sof-s2);
	align-items: start;
	padding: 1.1rem var(--sof-s2);
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-md);
	background: var(--sof-white);
}
.sof-contact__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--sof-r-sm); background: var(--sof-primary-tint); color: var(--sof-primary); }
/* التسمية والقيمة عنصران كتليّان — بدون display:block يلتصقان في سطر واحد. */
.sof-contact__k {
	display: block;
	margin-bottom: .15rem;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--sof-faint);
}
.sof-contact__v {
	display: block;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.75;
	color: var(--sof-ink);
	overflow-wrap: anywhere;
}
.sof-contact__v a { color: var(--sof-ink); }
.sof-contact__v a:hover { color: var(--sof-primary); }

.sof-map { margin-top: var(--sof-s4); border-radius: var(--sof-r-md); overflow: hidden; border: 1px solid var(--sof-line); }
.sof-map iframe { display: block; width: 100%; height: 380px; border: 0; }

.sof-form { padding: var(--sof-s4); border: 1px solid var(--sof-line); border-radius: var(--sof-r-lg); background: var(--sof-surface-2); }
.sof-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sof-s2); }

/* 7.5 الأسئلة الشائعة ------------------------------------------------- */
.sof-faq__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sof-s4); }
.sof-faq__chip {
	padding: .45rem 1.05rem;
	border: 1px solid var(--sof-line);
	border-radius: var(--sof-r-pill);
	background: var(--sof-white);
	color: var(--sof-ink-2);
	font: inherit;
	font-size: .92rem;
	font-weight: 700;
	cursor: pointer;
	transition: all var(--sof-t);
}
.sof-faq__chip:hover { border-color: var(--sof-primary); color: var(--sof-primary); }
.sof-faq__chip.is-on { background: var(--sof-primary); border-color: var(--sof-primary); color: #fff; }
.sof-acc__item.is-hidden { display: none; }

/* 7.6 صفحة 404 والبحث ------------------------------------------------ */
.sof-empty { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.sof-empty__code { font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; line-height: 1; color: var(--sof-primary-tint-2); letter-spacing: -.04em; }
.sof-empty__title { margin: var(--sof-s2) 0 .75rem; }
.sof-empty__text { max-width: 48ch; margin-inline: auto; color: var(--sof-muted); }
.sof-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: var(--sof-s3); }

/* 7.7 المقال المفرد --------------------------------------------------- */
.sof-single__hero { margin-bottom: var(--sof-s4); border-radius: var(--sof-r-lg); overflow: hidden; }
.sof-single__hero img { width: 100%; }
.sof-single__meta { display: flex; flex-wrap: wrap; gap: var(--sof-s2); margin-bottom: var(--sof-s3); padding-bottom: var(--sof-s3); border-bottom: 1px solid var(--sof-line); font-size: .9rem; color: var(--sof-muted); }
.sof-single__meta span { display: inline-flex; align-items: center; gap: .4rem; }

.sof-share { display: flex; align-items: center; gap: .6rem; margin-top: var(--sof-s4); padding-top: var(--sof-s3); border-top: 1px solid var(--sof-line); }
.sof-share__label { font-size: .9rem; font-weight: 700; color: var(--sof-muted); }
.sof-share a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--sof-line); border-radius: 50%; color: var(--sof-muted); transition: all var(--sof-t); }
.sof-share a:hover { background: var(--sof-primary); border-color: var(--sof-primary); color: #fff; }

.sof-related { margin-top: var(--sof-s6); padding-top: var(--sof-s5); border-top: 1px solid var(--sof-line); }

/* ==========================================================================
   8) الاستجابة — Responsive
   ========================================================================== */

/* لابتوب صغير */
@media (max-width: 1120px) {
	.sof-nav a { padding-inline: .6rem; font-size: .92rem; }
	.sof-brand__logo { width: 48px; height: 48px; }
}

/* تابلت أفقي — يظهر درج الجوال */
@media (max-width: 1023px) {
	.sof-nav { display: none; }
	.sof-burger { display: grid; margin-inline-start: auto; }
	.sof-header__cta .sof-btn { display: none; }

	.sof-hero__in { grid-template-columns: 1fr; text-align: center; padding-block: clamp(3rem, 8vw, 4.5rem); }
	.sof-hero__text { margin-inline: auto; }
	.sof-hero__actions, .sof-hero__note { justify-content: center; }
	.sof-hero__crest { order: -1; }
	.sof-hero__crest img { width: min(210px, 55%); }

	.sof-quick { margin-top: -2rem; }

	.sof-about__in, .sof-member__in, .sof-cta__in, .sof-contact__grid { grid-template-columns: 1fr; }
	.sof-about__media { order: -1; }
	.sof-about__photo { max-width: 420px; }

	.sof-split { grid-template-columns: 1fr; }
	.sof-aside { position: static; }

	.sof-flow__item::before { display: none; }
}

/* تابلت رأسي */
@media (max-width: 767px) {
	:root { --sof-header-h: 66px; }

	.sof-topbar { font-size: .8rem; }
	.sof-topbar__in { justify-content: center; row-gap: 0; }
	.sof-topbar__group--secondary { display: none; }

	.sof-brand__logo { width: 42px; height: 42px; }
	.sof-brand__name { font-size: .92rem; }
	.sof-brand__sub { display: none; }

	.sof-quick { margin-top: 0; padding-top: var(--sof-s3); }
	.sof-quick__card { grid-template-columns: repeat(2, 1fr); box-shadow: var(--sof-sh-2); }
	.sof-quick__item { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem; border-bottom: 1px solid var(--sof-line-soft); }
	.sof-quick__item:nth-child(2n) { border-inline-end: 0; }
	.sof-quick__label { font-size: .88rem; }

	.sof-form__row { grid-template-columns: 1fr; }
	.sof-footer__main { grid-template-columns: 1fr; gap: var(--sof-s3); }
	.sof-footer__bar { flex-direction: column; text-align: center; }
	.sof-map iframe { height: 300px; }
	.sof-single__meta { gap: .75rem; }
}

/* هواتف */
@media (max-width: 479px) {
	body { font-size: 1rem; }
	.sof-btn { width: 100%; }
	.sof-hero__actions .sof-btn, .sof-empty__actions .sof-btn { width: 100%; }
	.sof-quick__card { grid-template-columns: 1fr; }
	.sof-quick__item { flex-direction: row; align-items: center; border-inline-end: 0; }
	.sof-card { padding: var(--sof-s2); }
	.sof-acc__q { padding: .95rem 1rem; font-size: .98rem; }
	.sof-acc__a { padding: 0 1rem 1.25rem; }
	.sof-form { padding: var(--sof-s2); }
	.sof-top { inset-block-end: 1rem; inset-inline-end: 1rem; width: 42px; height: 42px; }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.sof-reveal { opacity: 1 !important; transform: none !important; }
}

/* تباين عالٍ */
@media (prefers-contrast: more) {
	:root { --sof-muted: #4A403D; --sof-line: #B9AFAC; }
	.sof-btn { border-width: 2px; }
}

/* ==========================================================================
   9) الطباعة
   ========================================================================== */
@media print {
	.sof-topbar, .sof-header, .sof-footer, .sof-top, .sof-drawer,
	.sof-cta, .sof-quick, .sof-share, .sof-related { display: none !important; }
	body { font-size: 12pt; color: #000; }
	.sof-wrap { max-width: none; padding: 0; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
	.sof-reveal { opacity: 1 !important; transform: none !important; }
}