/*
 * أنماط استمارة تقديم الطلاب.
 * كل الأنماط مُسبَقة بـ .sa- لعدم التعارض مع تصميم القالب.
 */

.sa-form-wrapper {
	--sa-primary: #0f4c46;
	--sa-primary-dark: #0a3733;
	--sa-accent: #c98a3c;
	--sa-bg: #f6f4ef;
	--sa-card-bg: #ffffff;
	--sa-border: #e2e0d8;
	--sa-text: #23281f;
	--sa-muted: #6b7166;
	--sa-error: #b3261e;
	--sa-error-bg: #fbeceb;
	--sa-success-bg: #eef5ee;
	--sa-success-text: #1e4620;
	--sa-radius: 10px;

	direction: rtl;
	font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
	color: var(--sa-text);
	max-width: 720px;
	width: 100%;
	margin: 2rem auto;
	padding: 0 1rem;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.sa-form-wrapper * {
	box-sizing: border-box;
}

.sa-form-card {
	background: var(--sa-card-bg);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius);
	padding: 2rem;
	box-shadow: 0 1px 3px rgba(20, 20, 15, 0.06);
}

.sa-form-header {
	border-bottom: 3px solid var(--sa-accent);
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

.sa-form-title {
	margin: 0 0 0.4rem;
	font-size: 1.5rem;
	color: var(--sa-primary-dark);
}

.sa-form-subtitle {
	margin: 0;
	color: var(--sa-muted);
	font-size: 0.95rem;
}

.sa-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1.2rem;
}

.sa-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sa-field-inline {
	grid-column: 1 / -1;
}

.sa-submit-field {
	grid-column: 1 / -1;
	margin-top: 0.5rem;
}

.sa-field label,
.sa-label {
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--sa-primary-dark);
}

.sa-required {
	color: var(--sa-error);
}

.sa-field input[type="text"],
.sa-field input[type="tel"],
.sa-field input[type="date"],
.sa-field input[type="number"],
.sa-field textarea {
	-webkit-appearance: none;
	appearance: none;
}

.sa-field input[type="text"],
.sa-field input[type="tel"],
.sa-field input[type="date"],
.sa-field input[type="number"],
.sa-field select,
.sa-field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--sa-border);
	border-radius: 8px;
	font-size: 16px; /* 16px يمنع تكبير Safari/iOS التلقائي عند التركيز على الحقل */
	font-family: inherit;
	background: #fff;
	color: var(--sa-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sa-field textarea {
	resize: vertical;
	min-height: 90px;
}

.sa-field input:focus,
.sa-field select:focus,
.sa-field textarea:focus {
	outline: none;
	border-color: var(--sa-primary);
	box-shadow: 0 0 0 3px rgba(15, 76, 70, 0.12);
}

.sa-field input.sa-invalid,
.sa-field select.sa-invalid,
.sa-field textarea.sa-invalid {
	border-color: var(--sa-error);
}

.sa-field-error {
	color: var(--sa-error);
	font-size: 0.82rem;
	min-height: 1.1em;
}

.sa-radio-group {
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
}

.sa-radio {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.sa-radio input {
	width: 20px;
	height: 20px;
	accent-color: var(--sa-primary);
}

.sa-submit-btn {
	background: var(--sa-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 0.85rem 1.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	width: 100%;
	min-height: 48px; /* حجم لمس مريح على شاشات اللمس بحسب توصيات إمكانية الوصول */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease;
}

.sa-submit-btn:hover {
	background: var(--sa-primary-dark);
}

.sa-submit-btn:disabled {
	background: var(--sa-muted);
	cursor: not-allowed;
}

.sa-alert {
	border-radius: 8px;
	padding: 1rem 1.1rem;
	margin-bottom: 1.5rem;
}

.sa-alert-success {
	background: var(--sa-success-bg);
	color: var(--sa-success-text);
	border: 1px solid #bcdcbc;
}

.sa-alert-error {
	background: var(--sa-error-bg);
	color: var(--sa-error);
	border: 1px solid #f0c3c0;
}

.sa-alert-title {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 0.3rem;
}

.sa-alert-text {
	margin: 0 0 0.25rem;
}

.sa-alert-hint {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.85;
}

.sa-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sa-receipt {
	text-align: center;
	padding-bottom: 0.5rem;
}

.sa-receipt-logos {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto 0.75rem;
	width: 100%;
}

/* منطقتا اليمين واليسار: جزء طبيعي من تدفّق flex، تثبَّتان عند طرفي الصف. */
.sa-logo-zone-right,
.sa-logo-zone-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

/* منطقة الوسط: تُموضَع في منتصف الصف تماماً بشكل مستقل عن المنطقتين الأخريين. */
.sa-logo-zone-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sa-receipt-logo {
	max-width: 100%;
	margin: 0;
	display: block;
	object-fit: contain;
}

.sa-receipt-college {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 0.8rem;
	color: var(--sa-primary-dark);
}

.sa-receipt-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 0.25rem;
	border-bottom: 1px dashed #cfe3cf;
	text-align: right;
}

.sa-receipt-extra-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sa-receipt-extra-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 0.25rem;
	border-bottom: 1px dashed #cfe3cf;
	text-align: right;
}

.sa-receipt-extra-list li:last-child,
.sa-receipt-row:last-of-type {
	border-bottom: none;
}

.sa-receipt-label {
	color: var(--sa-muted);
	font-size: 0.9rem;
}

.sa-receipt-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 1rem auto 0;
}

.sa-print-btn {
	display: inline-block;
	margin: 0;
	background: #fff;
	color: var(--sa-primary);
	border: 1px solid var(--sa-primary);
	border-radius: 8px;
	padding: 0.55rem 1.4rem;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.sa-print-btn:hover {
	background: var(--sa-primary);
	color: #fff;
}

.sa-download-btn {
	background: var(--sa-primary);
	color: #fff;
}

.sa-download-btn:hover {
	background: #fff;
	color: var(--sa-primary);
}

.sa-print-btn:disabled {
	opacity: 0.65;
	cursor: default;
	pointer-events: none;
}

/* عند الطباعة، إظهار وصل التقديم فقط وإخفاء كل شيء آخر في الصفحة */
@media print {
	body * {
		visibility: hidden;
	}
	.sa-receipt,
	.sa-receipt * {
		visibility: visible;
	}
	/* 1.9.8: .sa-form-wrapper يحمل position:relative + overflow-x:hidden
	 * لإصلاح مشكلة أندرويد (انظر 1.9.7). أثناء الطباعة يبقى غلافاً مخفياً
	 * (visibility:hidden) لكن صندوقه وخاصيته overflow لا تزالان فعّالتين،
	 * فيصبح هو نقطة إسناد .sa-receipt أدناه بدل صفحة الطباعة، ما يقصّ جزءاً
	 * من الوصل والشعار. نُبطل الخاصيتين هنا فقط، ضمن وضع الطباعة حصراً،
	 * ليعود .sa-receipt يتموضع وسط صفحة الطباعة بالكامل كما كان. */
	.sa-form-wrapper {
		position: static;
		overflow: visible;
	}
	.sa-receipt {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 92%;
		max-width: 620px; /* يطابق تقريباً عرض الوصل كما يظهر على الشاشة، بدل تمديده على كامل عرض الصفحة */
	}
	.sa-print-btn,
	.sa-receipt-actions,
	.sa-form,
	.sa-form-header,
	.sa-form-footer-caption {
		display: none !important;
	}
}

.sa-form-footer-caption {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--sa-border);
	text-align: center;
	font-size: 0.85rem;
	color: var(--sa-muted);
}

/* استجابة للهاتف */
@media (max-width: 620px) {
	.sa-form-wrapper {
		margin: 1rem auto;
	}

	.sa-form-card {
		padding: 1.25rem;
	}

	.sa-form {
		grid-template-columns: 1fr;
	}
}


/* 1.9.4 Safe Mode: قواعد عرض بسيطة تمنع الانهيار على الشاشات الصغيرة وWebView. */
.sa-form-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    /* 1.9.7: يجعل هذا العنصر نقطة الإسناد (containing block) لأي عنصر بداخله
     * يستخدم position:absolute (مثل .sa-honeypot). بدونها، كان .sa-honeypot
     * بقيمته left:-9999px يتموضع بالنسبة لجذر الصفحة بأكملها بدل بطاقة
     * الاستمارة، فيتجاوز overflow-x:hidden أعلاه تماماً ويُنتج مساحة تمرير
     * أفقية إضافية تمتد آلاف البكسلات خارج حدود الصفحة الطبيعية — وهذا هو
     * السبب الحقيقي وراء ظهور مساحة بيضاء والحاجة للتمرير يميناً على أندرويد. */
    position: relative;
}
.sa-form-wrapper *, .sa-form-wrapper *::before, .sa-form-wrapper *::after {
    box-sizing: border-box;
}
.sa-form-card {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.sa-form input:not([type="radio"]):not([type="checkbox"]), .sa-form select, .sa-form textarea, .sa-form button {
    max-width: 100%;
    min-width: 0;
    -webkit-appearance: none;
}
/* 1.9.9: iOS Safari لا يعرف القيمة "-webkit-appearance: auto" فكانت تُتجاهل
 * وتبقى الدوائر (الجنس / نوع الدراسة) مخفية على الآيفون. القيم الصريحة
 * radio/checkbox مدعومة في WebKit وفي المتصفحات الأخرى عبر appearance:auto. */
.sa-form input[type="radio"] {
    max-width: none;
    min-width: 20px;
    -webkit-appearance: radio;
    appearance: auto;
}
.sa-form input[type="checkbox"] {
    max-width: none;
    min-width: 20px;
    -webkit-appearance: checkbox;
    appearance: auto;
}
.sa-form button {
    touch-action: manipulation;
}
.sa-safe-fallback {
    min-height: 120px;
}
@media (max-width: 480px) {
    .sa-form-card { margin: 0; border-radius: 0; }
    .sa-form-wrapper { padding-left: 10px; padding-right: 10px; }
    .sa-form input, .sa-form select, .sa-form textarea { width: 100%; font-size: 16px; }
    .sa-radio-group { max-width: 100%; flex-wrap: wrap; }
}


/* 1.9.5 Responsive rescue: works even when the WordPress theme keeps a narrow
 * sidebar/content column on mobile. The JS companion only activates this
 * when the form is actually trapped in a narrow parent. */
.sa-form-wrapper {
	width: 100%;
	max-width: 720px;
	min-width: 0;
	margin-inline: auto;
	padding-inline: 12px;
}

.sa-form-card,
.sa-form,
.sa-field,
.sa-field input,
.sa-field select,
.sa-field textarea,
.sa-submit-btn {
	min-width: 0;
	max-width: 100%;
}

.sa-form-card {
	overflow: hidden;
}

img.sa-receipt-logo {
	height: auto;
	max-width: 100%;
}

@media (max-width: 767px) {
	.sa-form-wrapper {
		width: 100%;
		max-width: 100%;
		margin-top: 12px;
		margin-bottom: 12px;
		padding-inline: 8px;
	}

	.sa-form-card {
		padding: 16px;
		border-radius: 8px;
	}

	.sa-form {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.sa-form-title {
		font-size: 1.25rem;
		line-height: 1.5;
	}

	.sa-form-subtitle,
	.sa-field label,
	.sa-label {
		line-height: 1.5;
	}

	.sa-radio-group {
		gap: 10px 16px;
	}

	.sa-radio {
		min-height: 44px;
	}

	.sa-field input[type="date"],
	.sa-field input[type="number"],
	.sa-field input[type="tel"],
	.sa-field input[type="text"],
	.sa-field select,
	.sa-field textarea {
		width: 100%;
		max-width: 100%;
		font-size: 16px;
	}

	.sa-submit-btn {
		font-size: 16px;
		min-height: 50px;
	}
}

@media (max-width: 380px) {
	.sa-form-wrapper {
		padding-inline: 4px;
	}
	.sa-form-card {
		padding: 12px;
	}
}

/* 1.9.9: قاعدة نهائية عالية الأولوية لدوائر الاختيار (الجنس / نوع الدراسة)
 * حتى لا تتأثر بقواعد width:100% العامة على الهاتف، ولتظهر على iOS Safari. */
.sa-form .sa-radio input[type="radio"] {
	-webkit-appearance: radio;
	appearance: auto;
	width: 20px;
	height: 20px;
	min-width: 20px;
	max-width: 20px;
	flex: 0 0 20px;
	margin: 0;
	opacity: 1;
	visibility: visible;
}

/* 1.10.1: يوضع في آخر الملف عمداً — قاعدة .sa-form-wrapper غير المشروطة أعلاه
 * كانت تتأخر في ترتيب الملف عن نسخة @media print فتُبطلها (نفس الأولوية والأحدث يفوز). */
@media print {
	.sa-form-wrapper,
	.sa-form-card {
		position: static;
		overflow: visible;
	}
}

/* 1.10.3: صفة hidden تُغلبها قواعد display الصريحة (مثل display:grid للاستمارة)،
 * فكانت الاستمارة تبقى ظاهرة بعد الإرسال. هذه القاعدة تضمن الإخفاء فعلاً. */
.sa-form-wrapper [hidden] {
	display: none !important;
}