/* ============================================================
   مبادرات تمكين — واجهة الزائر
   ============================================================
   الهوامش كلها مشتقة من رمزين اثنين لا غير:
     --ti-pad        داخل أي صندوق (بطاقة، لوحة، خطوة)
     --ti-pad-flush  نص يجلس على الصفحة مباشرة
   لا تكتب قيمة padding ثابتة في أي قاعدة أدناه — خذها من الرمزين
   حتى يبقى إيقاع المسافات واحداً في كل الإضافة، ولا يقترب أي نص
   من حافة مرئية. الحد المعتمد: 20px على سطح المكتب، 18px على الجوال.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

.ti-front {
	/* الألوان مأخوذة من شعار تمكين: الأخضر والأزرق الداكن فيه */
	--ti-green:      #3f8c6e;
	--ti-green-d:    #2b4a48;
	--ti-green-l:    #56a886;
	--ti-sand:       #c9a227;
	--ti-ink:        #22313a;
	--ti-muted:      #6b7a85;
	--ti-line:       #e3e9ed;
	--ti-bg:         #f6f8f9;
	--ti-white:      #ffffff;
	--ti-error:      #b3261e;
	--ti-error-bg:   #fdeceb;
	--ti-ok:         #1e7e4f;
	--ti-ok-bg:      #e9f7ef;

	--ti-pad:        36px;
	--ti-pad-flush:  24px;
	--ti-gap:        24px;
	--ti-radius:     16px;
	--ti-shadow:     0 1px 3px rgba(20,40,50,.05), 0 8px 28px rgba(20,40,50,.07);

	font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
	direction: rtl;
	text-align: right;
	color: var(--ti-ink);
	line-height: 1.9;
	font-size: 16px;

	/* القوالب تحصر المحتوى في عمود قد يكون 600px على شاشة 1400px،
	   فقياس عرض الشاشة يعطي أعمدة أكثر مما يتسع له المكان فعلاً.
	   نقيس عرض الحاوية نفسها. */
	container-type: inline-size;
	container-name: ti;
}

.ti-front *,
.ti-front *::before,
.ti-front *::after { box-sizing: border-box; }

/* ══════════════════════════════════════
   إخفاء العناصر — قاعدة إلزامية
   ──────────────────────────────────────
   خاصية hidden في HTML تأتي من ورقة المتصفح بأولوية ضعيفة
   (display:none بمحدِّد عنصر)، فأي قاعدة هنا فيها display
   وبمحدِّد صنف تتغلب عليها ويظهر العنصر رغم hidden.
   هكذا كان زر «إرسال الطلب» يظهر في كل الخطوات، وشارة
   «بريد موثّق» تظهر قبل التوثيق. لا تحذف هذه القاعدة.
══════════════════════════════════════ */
.ti-front [hidden] { display: none !important; }

/* ══════════════════════════════════════
   الواجهة التعريفية
══════════════════════════════════════ */

.ti-hero {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	margin-bottom: var(--ti-gap);
	background: linear-gradient(125deg, var(--ti-green-d) 0%, var(--ti-green) 52%, var(--ti-green-l) 100%);
}
.ti-hero-bg {
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 88% 14%, rgba(201,162,39,.30) 0, transparent 46%),
		radial-gradient(circle at 10% 90%, rgba(46,155,128,.42) 0, transparent 44%);
}
.ti-hero-inner {
	position: relative;
	padding: calc(var(--ti-pad) * 1.7) var(--ti-pad);
	text-align: center;
}

/* الشعار فيه أخضر ودرجة داكنة على خلفية شفافة، فلا يُقرأ فوق الهيرو
   الأخضر. البطاقة كريمية لا بيضاء ولا خضراء: تتمايز عن خلفية الهيرو
   وعن ألوان الشعار نفسه، فتبرز حروفه ويده الخضراء بوضوح. */
.ti-hero-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fdfaf1;
	border: 1px solid rgba(201,162,39,.30);
	border-radius: 22px;
	padding: 30px 46px;
	margin-bottom: 32px;
	max-width: 100%;
	box-shadow: 0 10px 30px rgba(0,0,0,.20);
}
.ti-hero-logo img {
	display: block;
	width: auto;
	height: 118px;
	max-width: 100%;
	object-fit: contain;
}
.ti-hero-title {
	margin: 0 0 18px;
	font-size: clamp(2rem, 5vw, 3.1rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.3;
}
.ti-hero-tagline {
	margin: 0 auto;
	max-width: 62ch;
	font-size: clamp(1rem, 2vw, 1.18rem);
	color: rgba(255,255,255,.88);
	line-height: 2;
}
.ti-hero-cta {
	display: inline-block;
	margin-top: 30px;
	padding: 16px 48px;
	background: #fff;
	border: 0;
	color: var(--ti-green-d);
	font-family: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.6;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s, box-shadow .18s;
	box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.ti-hero-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0,0,0,.24);
	color: var(--ti-green-d);
}

/* شريط الدعوة للتسجيل أسفل الشروط */
.ti-cta-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ti-gap);
	flex-wrap: wrap;
	margin-top: 32px;
	padding: var(--ti-pad-flush);
	background: var(--ti-ok-bg);
	border: 1.5px solid #bfe3d3;
	border-radius: 13px;
}
.ti-cta-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ti-cta-text strong { font-size: 1.08rem; color: var(--ti-green-d); }
.ti-cta-text span   { font-size: .9rem; color: var(--ti-muted); line-height: 1.85; }
.ti-cta-band .ti-btn { flex: 0 0 auto; }

/* بطاقتا «جاهز للتقديم؟» و«سجّلت من قبل؟» في صف واحد على كل الشاشات.
   flex لا grid: حين تُخفى بطاقة التسجيل بعد فتح النموذج تملأ الأخرى الصف. */
.ti-cta-area { margin-top: 32px; }
.ti-cta-pair {
	display: flex;
	gap: 16px;
	align-items: stretch;
}
.ti-cta-pair > .ti-cta-band {
	flex: 1 1 0;
	min-width: 0;
	margin-top: 0;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: 18px;
	text-align: center;
}
.ti-cta-pair > .ti-cta-band .ti-btn {
	width: 100%;
	padding-inline: 16px;
	white-space: normal;
}

/* بطاقة «تعديل طلب سابق» — شقيقة بطاقة التسجيل بلون الذهبي في الشعار */
.ti-cta-band.ti-cta-return {
	background: #fffaf0;
	border-color: #f0d9a0;
}
.ti-cta-return .ti-cta-text strong { color: #7a5c0e; }
.ti-btn.ti-btn-return {
	background: var(--ti-white);
	color: #7a5c0e;
	border: 1.5px solid var(--ti-sand);
}
.ti-btn.ti-btn-return:hover { background: #fdf3d8; color: #5e470b; }

/* لوحة البحث تنفتح تحت البطاقتين بعرض الصف كله */
.ti-find {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
	padding: var(--ti-pad-flush);
	background: #fffaf0;
	border: 1.5px solid #f0d9a0;
	border-radius: 13px;
	text-align: right;
}
.ti-find-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ti-find-input { flex: 1 1 240px; min-width: 0; }
.ti-find-row .ti-btn { flex: 0 0 auto; }
.ti-find-result .ti-dup { margin-top: 4px; background: var(--ti-white); }

/* ترويسة صفحات الروابط (عرض الطلب / رابط التعديل): أصغر، بلا نبذة ولا زر */
.ti-hero-compact .ti-hero-inner { padding: var(--ti-pad) var(--ti-pad); }
.ti-hero-compact .ti-hero-logo { padding: 16px 28px; margin-bottom: 16px; }
.ti-hero-compact .ti-hero-logo img { height: 64px; }
.ti-hero-compact .ti-hero-title { margin: 0; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }

/* حاوية النموذج — مخفية حتى يضغط الزائر زر التسجيل */
.ti-form-gate { scroll-margin-top: 20px; }
.ti-form-gate:not([hidden]) { animation: ti-reveal .32s ease both; }
@keyframes ti-reveal {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.ti-panel {
	background: var(--ti-white);
	border: 1px solid var(--ti-line);
	border-radius: var(--ti-radius);
	padding: var(--ti-pad);
	margin-bottom: var(--ti-gap);
	box-shadow: var(--ti-shadow);
}
.ti-panel-invite {
	border-right: 5px solid var(--ti-sand);
	background: linear-gradient(180deg, #fffdf6 0%, #fff 100%);
}

.ti-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: var(--ti-gap);
}
.ti-cols .ti-panel { margin-bottom: var(--ti-gap); height: calc(100% - var(--ti-gap)); }

.ti-h2 {
	margin: 0 0 18px;
	font-size: 1.42rem;
	font-weight: 800;
	color: var(--ti-green-d);
	line-height: 1.5;
}
.ti-h3 {
	margin: 30px 0 16px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ti-green-d);
}
.ti-lead   { margin: 0; font-size: 1.08rem; line-height: 2.1; color: var(--ti-ink); }
.ti-text   { margin: 0; line-height: 2.1; color: var(--ti-muted); }

.ti-goals { margin: 0; padding: 0; list-style: none; counter-reset: ti-goal; }
.ti-goals li {
	counter-increment: ti-goal;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px dashed var(--ti-line);
}
.ti-goals li:last-child { border-bottom: 0; padding-bottom: 0; }
.ti-goals li::before {
	content: counter(ti-goal);
	flex: 0 0 auto;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ti-ok-bg);
	color: var(--ti-green);
	font-weight: 800;
	font-size: .92rem;
}
.ti-goal-text { font-weight: 500; }

.ti-conditions { margin: 0; padding: 0; list-style: none; }
.ti-conditions li {
	position: relative;
	padding: 12px 34px 12px 0;
	line-height: 2;
	color: var(--ti-muted);
}
.ti-conditions li::before {
	content: '✓';
	position: absolute;
	right: 0; top: 12px;
	width: 22px; height: 22px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ti-ok-bg);
	color: var(--ti-ok);
	font-size: .76rem;
	font-weight: 700;
}

/* ══════════════════════════════════════
   الجهات — المالك والداعم والشريك
   ──────────────────────────────────────
   صف واحد على كل الشاشات، بطاقات متساوية العرض والارتفاع،
   والشعار في إطار ثابت النسبة بـ object-fit: contain فتتساوى
   الشعارات بصرياً رغم اختلاف أبعاد ملفاتها.
══════════════════════════════════════ */

.ti-partners { margin-top: var(--ti-gap); }
.ti-partners-grid {
	display: grid;
	grid-template-columns: repeat(var(--ti-partners, 3), minmax(0, 1fr));
	gap: var(--ti-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ti-partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: var(--ti-pad-flush);
	background: var(--ti-white);
	border: 1px solid var(--ti-line);
	border-radius: var(--ti-radius);
	box-shadow: var(--ti-shadow);
	text-align: center;
}
.ti-partner-role {
	display: block;
	width: 100%;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--ti-line);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ti-green-d);
}
/* الصورة مثبّتة داخل الإطار (absolute) حتى لا تمدّه أبعادها الطبيعية —
   وإلا طال إطار الشعار الطولي عن الآخرَين رغم aspect-ratio. */
.ti-partner-logo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
}
.ti-partner-logo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* ══════════════════════════════════════
   مسجّل مسبقاً / وضع التعديل
══════════════════════════════════════ */

.ti-dup {
	margin-top: 28px;
	padding: var(--ti-pad-flush);
	border-radius: 13px;
	border: 1.5px solid #f0d9a0;
	background: #fffaf0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.ti-dup-owner  { border-color: #bfe3d3; background: var(--ti-ok-bg); }
.ti-dup-locked,
.ti-dup-error  { border-color: #f1c4c0; background: var(--ti-error-bg); }
.ti-dup-title  { font-size: 1.08rem; font-weight: 800; color: var(--ti-green-d); line-height: 1.6; }
.ti-dup-locked .ti-dup-title,
.ti-dup-error  .ti-dup-title { color: var(--ti-error); }
.ti-dup-text   { margin: 0; line-height: 1.95; color: var(--ti-ink); }
.ti-dup-email  {
	margin: 0;
	padding: 8px 16px;
	background: var(--ti-white);
	border: 1px solid var(--ti-line);
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ti-green-d);
}
.ti-dup-code   { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 100%; }
.ti-dup-code-input { max-width: 180px; text-align: center; font-size: 1.2rem; letter-spacing: .3em; }
.ti-dup-reason { width: 100%; }
.ti-dup-msg    { margin: 0; font-size: .93rem; line-height: 1.8; }
.ti-dup-msg.is-ok      { color: var(--ti-ok); font-weight: 700; }
.ti-dup-msg.is-error   { color: var(--ti-error); font-weight: 700; }
.ti-dup-msg.is-pending { color: var(--ti-muted); }
.ti-dup-msg.is-muted   { color: var(--ti-muted); font-size: .88rem; }

.ti-edit-banner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 28px;
	padding: var(--ti-pad-flush);
	border-radius: 13px;
	border: 1.5px solid #f0d9a0;
	border-right: 5px solid var(--ti-sand);
	background: #fffaf0;
}
.ti-edit-banner-title { color: var(--ti-green-d); font-size: 1.05rem; }
.ti-edit-banner-text  { color: var(--ti-muted); font-size: .92rem; line-height: 1.85; }

/* مراجعة البيانات قبل الإرسال */
.ti-review {
	margin-bottom: 32px;
	padding: var(--ti-pad-flush);
	border: 1.5px solid #bfe3d3;
	border-radius: 13px;
	background: #fbfefc;
}
.ti-review-title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: var(--ti-green-d); }
.ti-review-lead  { margin: 0 0 18px; color: var(--ti-muted); font-size: .92rem; line-height: 1.85; }
.ti-review-sec {
	padding: 16px 0;
	border-top: 1px dashed var(--ti-line);
}
.ti-review-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	color: var(--ti-green-d);
}
.ti-review-edit {
	flex: 0 0 auto;
	padding: 5px 16px;
	border: 1.5px solid var(--ti-green);
	border-radius: 999px;
	background: var(--ti-white);
	color: var(--ti-green);
	font-family: inherit;
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
}
.ti-review-edit:hover { background: var(--ti-green); color: #fff; }
.ti-review-sec dl {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 8px 18px;
	margin: 0;
	font-size: .92rem;
	line-height: 1.8;
}
.ti-review-sec dt { color: var(--ti-muted); }
.ti-review-sec dd { margin: 0; color: var(--ti-ink); font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.ti-review-sec dd.is-empty { color: var(--ti-muted); }

@container ti (max-width: 520px) {
	.ti-review-sec dl { grid-template-columns: 1fr; gap: 2px; }
	.ti-review-sec dd { margin-bottom: 10px; }
}

.ti-front .ti-input[readonly]:not(.ti-code-input) {
	background: var(--ti-bg);
	color: var(--ti-muted);
	cursor: not-allowed;
}

/* ══════════════════════════════════════
   النموذج
══════════════════════════════════════ */

.ti-form-wrap {
	background: var(--ti-white);
	border: 1px solid var(--ti-line);
	border-radius: var(--ti-radius);
	padding: var(--ti-pad);
	box-shadow: var(--ti-shadow);
	scroll-margin-top: 24px;
}

.ti-form-head { margin-bottom: 28px; }
.ti-required-note {
	margin: 0;
	font-size: .9rem;
	color: var(--ti-muted);
}

/* ── شريط التقدم ── */
.ti-progress { margin-bottom: 34px; }
.ti-progress-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--ti-bg);
	overflow: hidden;
}
.ti-progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ti-green-l), var(--ti-green));
	transition: width .35s ease;
}
.ti-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-top: 14px;
	font-size: .92rem;
}
.ti-progress-step { color: var(--ti-muted); }
.ti-progress-step b { color: var(--ti-green); font-size: 1.05rem; }
.ti-progress-name { font-weight: 700; color: var(--ti-green-d); }

.ti-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.ti-dot {
	flex: 0 0 auto;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ti-bg);
	border: 2px solid var(--ti-line);
	color: var(--ti-muted);
	font-size: .86rem;
	font-weight: 700;
	cursor: pointer;
	transition: all .2s;
}
.ti-dot:hover { border-color: var(--ti-green-l); }
.ti-dot.is-active {
	background: var(--ti-green);
	border-color: var(--ti-green);
	color: #fff;
	transform: scale(1.08);
}
.ti-dot.is-done {
	background: var(--ti-ok-bg);
	border-color: var(--ti-green-l);
	color: var(--ti-green);
}
/* الدائرة شبكة تُوزّع أبناءها على صفوف. font-size:0 يُخفي الرقم
   لكن خليته تبقى، فتنزل علامة الصح إلى صف ثانٍ خارج الدائرة.
   display:none يزيل الخلية نفسها فتبقى العلامة وحدها في المنتصف. */
.ti-dot.is-done span { display: none; }
.ti-dot.is-done::after {
	content: '✓';
	font-size: .95rem;
	line-height: 1;
}

/* ── الخطوة ── */
.ti-step {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.ti-step-legend {
	display: block;
	width: 100%;
	padding: 0 0 20px;
	margin-bottom: 26px;
	border-bottom: 2px solid var(--ti-bg);
}
.ti-step-num {
	display: block;
	font-size: .82rem;
	font-weight: 700;
	color: var(--ti-sand);
	letter-spacing: .4px;
	margin-bottom: 6px;
}
.ti-step-title {
	display: block;
	font-size: 1.36rem;
	font-weight: 800;
	color: var(--ti-green-d);
	line-height: 1.5;
}
.ti-step-desc {
	margin: 0 0 30px;
	padding: var(--ti-pad-flush);
	background: var(--ti-bg);
	border-radius: 12px;
	font-size: .95rem;
	line-height: 2.05;
	color: var(--ti-muted);
}

/* ── الحقول ── */
.ti-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px var(--ti-gap);
	align-items: start;   /* الحقول تبدأ من الأعلى ولا تتمدد لتساوي أطولها */
}
.ti-field { min-width: 0; }
.ti-w-full { grid-column: 1 / -1; }

/* الاختيارات والنصوص الطويلة تأخذ الصف كاملاً دائماً */
.ti-field-radio,
.ti-field-checkbox,
.ti-field-textarea { grid-column: 1 / -1; }

.ti-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 1rem;
	color: var(--ti-ink);
	line-height: 1.75;
}
.ti-req { color: var(--ti-error); font-style: normal; margin-right: 4px; }
.ti-optional { color: var(--ti-muted); font-weight: 400; font-size: .86rem; margin-right: 6px; }

.ti-hint {
	margin: 0 0 12px;
	font-size: .88rem;
	line-height: 1.85;
	color: var(--ti-muted);
}

.ti-input {
	width: 100%;
	padding: 15px 18px;
	border: 1.5px solid var(--ti-line);
	border-radius: 11px;
	background: var(--ti-white);
	font-family: inherit;
	font-size: 1rem;
	color: var(--ti-ink);
	line-height: 1.7;
	transition: border-color .18s, box-shadow .18s;
}
.ti-input:focus {
	outline: 0;
	border-color: var(--ti-green-l);
	box-shadow: 0 0 0 4px rgba(46,155,128,.13);
}
.ti-input::placeholder { color: #b6c1c8; }
.ti-input[readonly] { background: var(--ti-bg); color: var(--ti-muted); }
.ti-textarea { resize: vertical; min-height: 122px; }

/* ── الاختيارات ──
   عدد الأعمدة يأتي من المخطط لا من auto-fit: الشبكة التلقائية كانت
   تعطي كل سؤال عدد أعمدة مختلفاً حسب طول خياراته، فيبدو النموذج
   غير مرتب. الآن كل سؤال له شبكة معلومة وثابتة. */
.ti-options {
	display: grid;
	gap: 12px;
	align-items: stretch;
}
.ti-cols-1 { grid-template-columns: 1fr; }
.ti-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ti-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ti-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ti-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* auto: خيارات قصيرة (نعم/لا، ذكر/أنثى) بعرض المحتوى لا ممتدة عبر الصفحة */
.ti-cols-auto {
	display: flex;
	flex-wrap: wrap;
}
.ti-cols-auto .ti-option { flex: 0 1 auto; min-width: 150px; }

/* حقل «أخرى» يأخذ الصف كاملاً في كل الأوضاع */
.ti-options .ti-other-wrap { grid-column: 1 / -1; flex-basis: 100%; }

.ti-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 15px 17px;
	border: 1.5px solid var(--ti-line);
	border-radius: 11px;
	cursor: pointer;
	transition: border-color .18s, background .18s;
	line-height: 1.8;
}
.ti-option:hover { border-color: var(--ti-green-l); background: #fbfdfc; }
.ti-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.ti-option-box {
	flex: 0 0 auto;
	width: 21px; height: 21px;
	margin-top: 3px;
	border: 2px solid #c3ced5;
	background: #fff;
	transition: all .16s;
}
.ti-option input[type="radio"] ~ .ti-option-box { border-radius: 50%; }
.ti-option input[type="checkbox"] ~ .ti-option-box { border-radius: 6px; }

.ti-option input:checked ~ .ti-option-box {
	border-color: var(--ti-green);
	background: var(--ti-green);
}
.ti-option input[type="radio"]:checked ~ .ti-option-box {
	box-shadow: inset 0 0 0 4px #fff;
}
.ti-option input[type="checkbox"]:checked ~ .ti-option-box::after {
	content: '✓';
	display: grid;
	place-items: center;
	height: 100%;
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
}
.ti-option input:focus-visible ~ .ti-option-box {
	box-shadow: 0 0 0 4px rgba(46,155,128,.2);
}
.ti-option:has(input:checked) {
	border-color: var(--ti-green);
	background: var(--ti-ok-bg);
}
.ti-option-text { font-size: .97rem; }

.ti-other-wrap { grid-column: 1 / -1; margin-top: 4px; }

/* ── الأخطاء ── */
.ti-error {
	margin: 10px 0 0;
	padding: 11px 15px;
	background: var(--ti-error-bg);
	border-right: 3px solid var(--ti-error);
	border-radius: 8px;
	color: var(--ti-error);
	font-size: .89rem;
	line-height: 1.85;
}
.ti-has-error .ti-input { border-color: var(--ti-error); }
.ti-has-error .ti-label { color: var(--ti-error); }

.ti-alert {
	margin-bottom: 26px;
	padding: var(--ti-pad-flush);
	border-radius: 12px;
	font-size: .96rem;
	line-height: 1.95;
}
.ti-alert-error {
	background: var(--ti-error-bg);
	border-right: 4px solid var(--ti-error);
	color: #7f1d19;
}

/* ══════════════════════════════════════
   التحقق من البريد
══════════════════════════════════════ */

.ti-verify { margin-top: 14px; }
.ti-verify.is-shaking { animation: ti-shake .42s; }
@keyframes ti-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-7px); }
	40%, 80% { transform: translateX(7px); }
}

.ti-verify-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.ti-verify-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: var(--ti-ok-bg);
	color: var(--ti-ok);
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 700;
}

.ti-verify-panel {
	margin-top: 18px;
	padding: var(--ti-pad-flush);
	background: var(--ti-bg);
	border: 1.5px solid var(--ti-line);
	border-radius: 13px;
}
.ti-verify-lead {
	margin: 0 0 18px;
	font-size: .93rem;
	color: var(--ti-muted);
	text-align: center;
	line-height: 1.9;
}

/* حقل الرمز: إدخال واحد حقيقي شفاف فوق ست خانات عرض.
   لا تقسمه إلى ستة حقول — الالتقاط التلقائي في iOS وأندرويد
   يملأ الحقل الأول فقط عندها. */
.ti-code-field {
	position: relative;
	max-width: 372px;
	margin: 0 auto;
}
.ti-code-cells {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 9px;
	direction: ltr;
}
.ti-code-cell {
	height: 62px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 2px solid var(--ti-line);
	border-radius: 11px;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--ti-ink);
	font-variant-numeric: tabular-nums;
	transition: border-color .16s, box-shadow .16s;
}
.ti-code-cell.is-filled { border-color: var(--ti-green-l); }
.ti-code-cell.is-cursor {
	border-color: var(--ti-green);
	box-shadow: 0 0 0 4px rgba(46,155,128,.15);
}
.ti-code-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	caret-color: transparent;
	font-size: 1.6rem;
	letter-spacing: 3rem;
	text-align: center;
	direction: ltr;
	outline: 0;
	cursor: pointer;
}
/* إخفاء مؤشر النص دون إخفاء الحقل عن قارئات الشاشة أو عن الالتقاط التلقائي */
.ti-code-input::selection { background: transparent; }

.ti-verify-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.ti-verify-msg {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 9px;
	font-size: .9rem;
	line-height: 1.9;
}
.ti-verify-msg.is-ok    { background: var(--ti-ok-bg);    color: var(--ti-ok); }
.ti-verify-msg.is-error { background: var(--ti-error-bg); color: var(--ti-error); }
.ti-verify-msg.is-pending {
	background: #fff8e1;
	color: #7d5a00;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ti-verify-msg.is-pending::before {
	content: '';
	flex: 0 0 auto;
	width: 15px; height: 15px;
	border: 2px solid rgba(125,90,0,.25);
	border-top-color: #7d5a00;
	border-radius: 50%;
	animation: ti-spin .7s linear infinite;
}
@keyframes ti-spin { to { transform: rotate(360deg); } }

/* الزر أثناء انتظار الخادم */
.ti-btn.is-busy { position: relative; opacity: .75; cursor: progress; }

.ti-verify-suggest { margin: 12px 0 0; }
.ti-suggest-btn {
	background: #fff8e1;
	border: 1.5px dashed var(--ti-sand);
	border-radius: 9px;
	padding: 10px 18px;
	font-family: inherit;
	font-size: .93rem;
	font-weight: 700;
	color: #7d5a00;
	cursor: pointer;
	direction: ltr;
}
.ti-suggest-btn:hover { background: #fff3cd; }

/* ══════════════════════════════════════
   الأزرار والتنقل
══════════════════════════════════════ */

.ti-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 34px;
	border: 1.5px solid transparent;
	border-radius: 11px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: all .18s;
	line-height: 1.5;
}
.ti-btn:disabled { opacity: .55; cursor: not-allowed; }

.ti-btn-primary { background: var(--ti-green); color: #fff; }
.ti-btn-primary:not(:disabled):hover { background: var(--ti-green-d); }

.ti-btn-submit {
	background: linear-gradient(120deg, var(--ti-green), var(--ti-green-l));
	color: #fff;
	padding-inline: 52px;
}
.ti-btn-submit:not(:disabled):hover { filter: brightness(1.07); }

.ti-btn-ghost {
	background: transparent;
	border-color: var(--ti-line);
	color: var(--ti-muted);
}
.ti-btn-ghost:hover { border-color: var(--ti-green-l); color: var(--ti-green); }

.ti-btn-verify {
	background: var(--ti-white);
	border-color: var(--ti-green);
	color: var(--ti-green);
	padding: 13px 28px;
	font-size: .95rem;
}
.ti-btn-verify:not(:disabled):hover { background: var(--ti-ok-bg); }

.ti-btn-link {
	background: none;
	border: 0;
	padding: 10px 14px;
	color: var(--ti-green);
	font-size: .9rem;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.ti-btn-link:not(:disabled):hover { color: var(--ti-green-d); }

.ti-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 2px solid var(--ti-bg);
}
.ti-nav .ti-next,
.ti-nav .ti-back-review,
.ti-nav .ti-submit { margin-inline-start: auto; }

.ti-autosave {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	margin: 20px 0 0;
	font-size: .85rem;
	color: var(--ti-muted);
}
.ti-autosave-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--ti-green-l);
}
.ti-clear-draft {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ti-muted);
	font-family: inherit;
	font-size: .85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ti-clear-draft:hover { color: var(--ti-error); }

/* مصيدة الروبوتات — تبقى في DOM ليملأها الآلي، وتختفي عن البشر.
   لا تستخدم left:-9999px هنا: في صفحة عربية (RTL) يمتد ذلك خارج
   الصفحة فيصنع تمريراً أفقياً بعرض آلاف البكسلات. */
.ti-hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* ══════════════════════════════════════
   رسالة النجاح
══════════════════════════════════════ */

.ti-success {
	background: var(--ti-white);
	border: 1px solid var(--ti-line);
	border-top: 5px solid var(--ti-green);
	border-radius: var(--ti-radius);
	padding: calc(var(--ti-pad) * 1.4) var(--ti-pad);
	text-align: center;
	box-shadow: var(--ti-shadow);
}
.ti-success-mark {
	width: 76px; height: 76px;
	margin: 0 auto 26px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ti-ok-bg);
	color: var(--ti-ok);
	font-size: 2.3rem;
	font-weight: 700;
}
.ti-success-title {
	margin: 0 0 16px;
	font-size: 1.62rem;
	font-weight: 800;
	color: var(--ti-green-d);
	line-height: 1.5;
}
.ti-success-id {
	margin: 0 0 20px;
	font-size: 1.05rem;
	color: var(--ti-muted);
}
.ti-success-id strong { color: var(--ti-green); font-size: 1.22rem; }
.ti-success-text {
	margin: 0 auto;
	max-width: 58ch;
	color: var(--ti-muted);
	line-height: 2.1;
}

/* ══════════════════════════════════════
   الجوال
══════════════════════════════════════ */

@media (max-width: 782px) {
	.ti-front {
		--ti-pad:       22px;
		--ti-pad-flush: 18px;
		--ti-gap:       18px;
		font-size: 15.5px;
	}
	.ti-fields { grid-template-columns: 1fr; gap: 26px; }
	.ti-w-half { grid-column: 1 / -1; }

	/* على الجوال عمود واحد دائماً — عدا القصيرة جداً فعمودان */
	.ti-cols-2, .ti-cols-3, .ti-cols-4, .ti-cols-5 { grid-template-columns: 1fr; }
	.ti-cols-auto .ti-option { flex: 1 1 100%; min-width: 0; }

	.ti-cta-band { flex-direction: column; align-items: stretch; text-align: center; }
	.ti-cta-band .ti-btn { width: 100%; }
	.ti-hero-logo { padding: 20px 26px; margin-bottom: 24px; }
	.ti-hero-logo img { height: 82px; }
	.ti-hero-cta { width: 100%; padding-inline: 20px; }

	.ti-progress-meta { flex-direction: column; gap: 4px; align-items: flex-start; }
	.ti-dots { gap: 7px; }
	.ti-dot { width: 32px; height: 32px; font-size: .8rem; }

	.ti-nav { flex-direction: column-reverse; align-items: stretch; }
	.ti-nav .ti-btn { width: 100%; }
	.ti-nav .ti-next,
	.ti-nav .ti-submit { margin-inline-start: 0; }

	.ti-code-cells { gap: 6px; }
	.ti-code-cell { height: 54px; font-size: 1.35rem; }
	.ti-code-input { font-size: 1.35rem; letter-spacing: 2.4rem; }

	.ti-verify-actions { flex-direction: column; align-items: stretch; }
	.ti-verify-actions .ti-btn { width: 100%; }
}

/* الشاشات المتوسطة: نخفّف الأعمدة الكثيرة قبل أن تنضغط الخيارات */
@media (min-width: 783px) and (max-width: 1080px) {
	.ti-cols-4, .ti-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
	.ti-code-cell { height: 48px; font-size: 1.2rem; }
	.ti-code-cells { gap: 4px; }
}

/* ══════════════════════════════════════
   التكيّف مع عرض الحاوية
   ──────────────────────────────────────
   هذه هي القواعد الحاكمة فعلاً: استعلامات الشاشة أعلاه تبقى
   كاحتياطٍ للمتصفحات القديمة فقط. تأتي هنا في آخر الملف لتتغلب
   عليها عند التعارض.
══════════════════════════════════════ */

/* عمود متوسط: نخفّف الأعمدة الكثيرة */
@container ti (max-width: 1000px) {
	.ti-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ti-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* عمود ضيق (قوالب المحتوى المحصور): حقل واحد وعمودا خيارات */
@container ti (max-width: 760px) {
	.ti-fields { grid-template-columns: 1fr; gap: 26px; }
	.ti-w-half { grid-column: 1 / -1; }

	.ti-cols-3, .ti-cols-4, .ti-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ti-progress-meta { flex-direction: column; gap: 4px; align-items: flex-start; }
	.ti-cta-band { flex-direction: column; align-items: stretch; text-align: center; }
	.ti-cta-band .ti-btn { width: 100%; }
}

/* عمود ضيق جداً / جوال: كل شيء في عمود واحد */
@container ti (max-width: 520px) {
	.ti-cols-2, .ti-cols-3, .ti-cols-4, .ti-cols-5 { grid-template-columns: 1fr; }
	.ti-cols-auto .ti-option { flex: 1 1 100%; min-width: 0; }

	.ti-nav { flex-direction: column-reverse; align-items: stretch; }
	.ti-nav .ti-btn { width: 100%; }
	.ti-nav .ti-next, .ti-nav .ti-back-review, .ti-nav .ti-submit { margin-inline-start: 0; }

	.ti-code-cells { gap: 6px; }
	.ti-code-cell { height: 54px; font-size: 1.35rem; }
	.ti-code-input { font-size: 1.35rem; letter-spacing: 2.4rem; }

	.ti-verify-actions { flex-direction: column; align-items: stretch; }
	.ti-verify-actions .ti-btn { width: 100%; }

	.ti-dots { gap: 7px; }
	.ti-dot { width: 32px; height: 32px; font-size: .8rem; }

	/* الجهات تبقى في صف واحد على الجوال — بطاقات أصغر لا عمود */
	.ti-partners-grid { gap: 10px; }
	.ti-partner { padding: 16px 10px; gap: 12px; border-radius: 12px; }
	/* «الشريك التشغيلي» ينكسر سطرين و«المالك» سطراً واحداً — نحجز سطرين
	   للجميع حتى يبقى الفاصل والشعار على خط واحد في البطاقات الثلاث */
	.ti-partner-role {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: calc(2 * 1.5em + 10px);
		padding-bottom: 10px;
		font-size: .8rem;
		line-height: 1.5;
	}
	.ti-partner-logo { aspect-ratio: 1 / 1; }

	/* بطاقتا التسجيل والتعديل تبقيان في صف واحد — أصغر حجماً لا عمودياً.
	   16px من كل جانب: الحد الأدنى للهامش على الجوال. */
	.ti-cta-pair { gap: 10px; }
	.ti-cta-pair > .ti-cta-band { padding: 18px 16px; gap: 14px; border-radius: 12px; }
	.ti-cta-pair .ti-cta-text strong { font-size: .98rem; line-height: 1.6; }
	.ti-cta-pair .ti-cta-text span   { font-size: .8rem; line-height: 1.75; }
	.ti-cta-pair > .ti-cta-band .ti-btn { font-size: .88rem; padding: 12px 10px; line-height: 1.5; }
	.ti-find-row .ti-btn { flex: 1 1 100%; }
}

/* أضيق من ذلك: الوصف الفرعي يطول أسطراً كثيرة في نصف الصف ⇐ العنوان والزر يكفيان */
@container ti (max-width: 400px) {
	.ti-cta-pair .ti-cta-text span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ti-front *, .ti-front *::before, .ti-front *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* عرض بيانات الطلب من رابط رسالة التسجيل */
.ti-view { scroll-margin-top: 20px; }
.ti-view-lead { margin-bottom: 20px; }
.ti-view-email { font-weight: 700; color: var(--ti-green-d); }
.ti-view-gate { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ti-view-result { margin-top: 8px; }
.ti-view-result .ti-review-sec:first-child { border-top: 0; padding-top: 0; }
.ti-view-edit { margin-top: 24px; padding-top: 20px; border-top: 2px solid var(--ti-bg); }

/* ══════════════════════════════════════
   رمز الريال السعودي الجديد (U+20C1)
   ──────────────────────────────────────
   الخط: Saudi Riyal Font © Emran Alhaddad — SIL Open Font License 1.1
   (assets/fonts/OFL-LICENSE.txt). مرفق داخل الإضافة لا من موقع خارجي،
   فيظهر الرمز دائماً. وزنان: العادي، والعريض للنص الغامق.
══════════════════════════════════════ */
@font-face {
	font-family: 'ti-riyal';
	src: url('../fonts/saudi-riyal.woff2') format('woff2'),
	     url('../fonts/saudi-riyal.woff') format('woff');
	font-weight: 100 600;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'ti-riyal';
	src: url('../fonts/saudi-riyal-bold.woff2') format('woff2'),
	     url('../fonts/saudi-riyal-bold.woff') format('woff');
	font-weight: 700 900;
	font-style: normal;
	font-display: block;
}
.ti-sar {
	display: inline-block;
	font-family: 'ti-riyal' !important;
	font-size: 1.55em;
	font-style: normal;
	line-height: 1;
	vertical-align: -0.18em;
	margin-inline: .14em;
	speak-as: none;
}