/* =========================================================
   Basrawe Digital Identity System v3.1 — Identity Polish
   هوية هادئة مستوحاة من شط العرب والنخيل والشناشيل.
   ========================================================= */

:root {
	--basrawe-primary: #135A73;
	--basrawe-secondary: #4C7A52;
	--basrawe-accent: #B08355;
	--basrawe-ink: #17242a;
	--basrawe-sand: #f7f4ee;
}

/* ---------- محاذاة الشعار لليمين: تُطبَّق فقط على العنصر الذي حدده JS ---------- */
.basrawe-branding-right {
	float: right !important;
	text-align: right !important;
	margin-right: 0 !important;
	margin-left: auto !important;
	max-width: 100%;
}
.basrawe-branding-right img,
.basrawe-branding-right .custom-logo {
	display: block;
	margin-right: 0 !important;
	margin-left: auto !important;
}
.basrawe-branding-parent {
	position: relative;
	width: 100%;
}
.basrawe-branding-parent .basrawe-branding-right {
	max-width: 100%;
}

/* ---------- بوابة بصراوي ---------- */
.basrawe-visual-nav {
	position: relative;
	background:
		linear-gradient(180deg, rgba(19, 90, 115, .035), rgba(255, 255, 255, 0) 72%),
		#fff;
	border-bottom: 1px solid rgba(19, 90, 115, .10);
	isolation: isolate;
}
.basrawe-visual-nav::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(19,90,115,.22), transparent);
}
.basrawe-visual-nav-track {
	position: relative;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 11px 14px 12px;
	max-width: 1500px;
	margin: 0 auto;
}
.basrawe-visual-nav-track::-webkit-scrollbar { display: none; }

.basrawe-visual-nav-track::before {
	content: "";
	position: absolute;
	inset-inline: 14px;
	bottom: 7px;
	height: 7px;
	border-bottom: 1px solid rgba(19,90,115,.10);
	border-radius: 50%;
	pointer-events: none;
}


.basrawe-visual-nav-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-width: 86px;
	min-height: 72px;
	padding: 6px 10px 8px;
	border-radius: 12px;
	text-decoration: none;
	color: #34434a;
	transition: color .18s ease, transform .18s ease, background .18s ease;
}
.basrawe-visual-nav-item::before {
	content: "";
	position: absolute;
	inset-inline: 16px;
	bottom: 3px;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--basrawe-primary), transparent);
	opacity: 0;
	transform: scaleX(.45);
	transition: opacity .18s ease, transform .18s ease;
}
.basrawe-visual-nav-item:hover,
.basrawe-visual-nav-item:focus-visible {
	background: rgba(19, 90, 115, .045);
	color: var(--basrawe-primary);
	transform: translateY(-1px);
}
.basrawe-visual-nav-item:hover::before,
.basrawe-visual-nav-item:focus-visible::before {
	opacity: .9;
	transform: scaleX(1);
}
.basrawe-visual-nav-item:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--basrawe-primary) 72%, white);
	outline-offset: 2px;
}
.basrawe-visual-nav-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 42px;
	color: var(--basrawe-primary);
	background: transparent;
}
.basrawe-visual-nav-icon::after {
	content: "";
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: 0;
	height: 6px;
	border-bottom: 1px solid rgba(19,90,115,.20);
	border-radius: 50%;
}
.basrawe-visual-nav-icon svg {
	width: 34px;
	height: 34px;
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
	stroke-width: 1.55;
}
.basrawe-visual-nav-label {
	font-size: 11.5px;
	line-height: 1.25;
	font-weight: 800;
	white-space: normal;
	max-width: 92px;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}

@media (min-width: 760px) {
	.basrawe-visual-nav-track {
		gap: 8px;
		padding-block: 12px 13px;
	}
	.basrawe-visual-nav-item {
		min-width: 104px;
		min-height: 82px;
		padding-inline: 12px;
	}
	.basrawe-visual-nav-icon {
		width: 58px;
		height: 46px;
	}
	.basrawe-visual-nav-icon svg {
		width: 38px;
		height: 38px;
	}
	.basrawe-visual-nav-label { font-size: 12px; max-width: 104px; }
}

/* ---------- Watermarks ---------- */
.basrawe-watermark {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.basrawe-watermark-palm { width: 250px; height: 270px; opacity: .055; }
.basrawe-watermark-wave { width: 100%; height: 42px; opacity: .14; }
.basrawe-watermark-shanasheel { width: 250px; height: 205px; opacity: .045; }
.basrawe-watermark-port { width: 270px; height: 190px; opacity: .04; }

@media (prefers-reduced-motion: reduce) {
	.basrawe-visual-nav-item,
	.basrawe-visual-nav-item::before { transition: none; }
}

/* لمسات لونية محدودة من الهوية — بدون تحويل البوابة إلى لوحة ألوان. */
.basrawe-nav-icon-palm .basrawe-visual-nav-icon,
.basrawe-nav-icon-boat .basrawe-visual-nav-icon,
.basrawe-nav-icon-map .basrawe-visual-nav-icon,
.basrawe-nav-icon-bridge .basrawe-visual-nav-icon { color: var(--basrawe-secondary); }
.basrawe-nav-icon-shanasheel .basrawe-visual-nav-icon,
.basrawe-nav-icon-coffee .basrawe-visual-nav-icon,
.basrawe-nav-icon-iraq .basrawe-visual-nav-icon,
.basrawe-nav-icon-bank .basrawe-visual-nav-icon { color: var(--basrawe-accent); }
.basrawe-nav-icon-port .basrawe-visual-nav-icon,
.basrawe-nav-icon-building .basrawe-visual-nav-icon,
.basrawe-nav-icon-investment .basrawe-visual-nav-icon,
.basrawe-nav-icon-oil .basrawe-visual-nav-icon { color: var(--basrawe-primary); }

/* محاذاة فيزيائية لكتلة الشعار داخل تخطيطات Jannah الواسعة. */
.basrawe-branding-host {
	box-sizing: border-box;
}
.basrawe-branding-host .basrawe-branding-parent {
	margin-inline: 0 !important;
}

/* =========================================================
   Basrawe Identity Polish v3.1
   بوابة بصراوي: لغة رسومية واحدة مستوحاة من الشناشيل وشط العرب.
   ========================================================= */
.basrawe-visual-nav {
	background:
		linear-gradient(180deg, rgba(176,131,85,.045), transparent 72%),
		#fff;
	border-top: 1px solid rgba(19,90,115,.06);
}
.basrawe-visual-nav-track {
	justify-content: center;
	gap: clamp(4px, .7vw, 12px);
	padding: 10px 16px 13px;
}
.basrawe-visual-nav-item {
	min-width: 96px;
	min-height: 82px;
	padding: 7px 10px 9px;
	border-radius: 14px;
}
.basrawe-visual-nav-icon {
	width: 58px;
	height: 48px;
	isolation: isolate;
}
/* إطار رفيع مستوحى من نافذة شناشيل، وليس دائرة أيقونات عامة. */
.basrawe-visual-nav-icon::before {
	content: "";
	position: absolute;
	inset: 1px 5px 5px;
	border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
	border-bottom: 0;
	border-radius: 24px 24px 4px 4px;
	z-index: -1;
	opacity: .72;
}
.basrawe-visual-nav-icon::after {
	left: 4px;
	right: 4px;
	bottom: 1px;
	height: 8px;
	border-bottom: 1px solid color-mix(in srgb, currentColor 32%, transparent);
	box-shadow: 0 3px 0 -2px color-mix(in srgb, currentColor 20%, transparent);
}
.basrawe-visual-nav-icon svg {
	width: 37px;
	height: 37px;
	stroke-width: 1.52;
}
.basrawe-visual-nav-label {
	font-size: 12px;
	font-weight: 800;
	color: #24383f;
}
.basrawe-visual-nav-item:hover,
.basrawe-visual-nav-item:focus-visible {
	background: linear-gradient(180deg, rgba(19,90,115,.055), rgba(76,122,82,.025));
}
.basrawe-visual-nav-item:hover .basrawe-visual-nav-icon {
	transform: translateY(-1px);
}

/* تثبيت محاذاة الشعار عند نجاح اكتشاف غلاف Jannah. */
.basrawe-logo-right-ready .basrawe-branding-host {
	direction: rtl !important;
	justify-content: flex-start !important;
}
.basrawe-logo-right-ready .basrawe-branding-host .basrawe-branding-right {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
	text-align: right !important;
}

@media (max-width: 780px) {
	.basrawe-visual-nav-track { justify-content: flex-start; }
	.basrawe-visual-nav-item { min-width: 88px; }
	.basrawe-visual-nav-icon { width: 52px; height: 44px; }
	.basrawe-visual-nav-icon svg { width: 33px; height: 33px; }
}

/* =========================================================
   Basrawe Child v3.1 — Identity Polish
   تلميع الهيدر والبوابة استعداداً للإطلاق على بصراوي.
   ========================================================= */

/* ضغط مساحة الشعار فقط عندما يحدد JS منطقة الشعار الفعلية. */
.basrawe-header-polished .basrawe-header-logo-zone,
.basrawe-header-logo-zone {
	box-sizing: border-box;
	min-height: 0 !important;
	height: auto !important;
	padding-top: clamp(8px, 1vw, 14px) !important;
	padding-bottom: clamp(8px, 1vw, 14px) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	align-items: center !important;
}
.basrawe-header-logo-zone .basrawe-branding-right,
.basrawe-header-logo-zone .logo-container,
.basrawe-header-logo-zone .tie-logo,
.basrawe-header-logo-zone #logo,
.basrawe-header-logo-zone .site-branding,
.basrawe-header-logo-zone .header-logo {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.basrawe-header-logo-zone .custom-logo,
.basrawe-header-logo-zone .basrawe-logo-image-polished {
	width: auto !important;
	max-width: min(320px, 42vw) !important;
	max-height: 84px !important;
	object-fit: contain;
}
@media (max-width: 780px) {
	.basrawe-header-logo-zone { padding-block: 7px !important; }
	.basrawe-header-logo-zone .custom-logo,
	.basrawe-header-logo-zone .basrawe-logo-image-polished {
		max-height: 64px !important;
		max-width: min(240px, 56vw) !important;
	}
}

/* بوابة بصراوي: تقليل إحساس "القائمة الثانية" وإبراز الرمز أكثر من الإطار. */
.basrawe-visual-nav-track {
	padding-top: 9px;
	padding-bottom: 10px;
}
.basrawe-visual-nav-item {
	min-height: 74px;
	padding-top: 5px;
	padding-bottom: 7px;
}
.basrawe-visual-nav-icon::before {
	opacity: .46;
}
.basrawe-visual-nav-icon svg {
	filter: none;
}
.basrawe-visual-nav-label {
	letter-spacing: 0;
}

/* =========================================================
   Basrawe Child v3.3 — Mobile Header & Visual Nav Polish
   ========================================================= */
@media (max-width: 780px) {
	/* JS يضيف هذه الفئة فقط إلى الأغلفة الفعلية الواقعة حول الشعار، لا إلى شريط القائمة. */
	.basrawe-mobile-header-collapse {
		min-height: 0 !important;
		height: auto !important;
		max-height: none !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		align-items: center !important;
	}

	.basrawe-header-logo-zone {
		min-height: 0 !important;
		height: auto !important;
		padding-block: 6px !important;
	}
	.basrawe-header-logo-zone .custom-logo,
	.basrawe-header-logo-zone .basrawe-logo-image-polished {
		max-height: 52px !important;
		max-width: min(190px, 48vw) !important;
	}

	/* البوابة تبقى قابلة للسحب لكن تصبح أخف ارتفاعاً على الهاتف. */
	.basrawe-visual-nav-track {
		padding: 7px 9px 8px !important;
		gap: 4px !important;
	}
	.basrawe-visual-nav-item {
		min-width: 78px !important;
		min-height: 64px !important;
		padding: 4px 6px 5px !important;
		gap: 3px !important;
	}
	.basrawe-visual-nav-icon {
		width: 46px !important;
		height: 38px !important;
	}
	.basrawe-visual-nav-icon svg {
		width: 30px !important;
		height: 30px !important;
	}
	.basrawe-visual-nav-label {
		font-size: 10.5px !important;
		line-height: 1.2 !important;
		max-width: 78px !important;
		min-height: 1.2em !important;
		-webkit-line-clamp: 1 !important;
	}
}

/* =========================================================
   Basrawe Child v3.4 — Launch Hotfix
   ضغط الهيدر الحقيقي ونسخة Sticky على الهاتف من دون تغيير سطح المكتب.
   ========================================================= */
@media (max-width: 780px) {
	html.basrawe-mobile-launch-hotfix .basrawe-mobile-primary-logo-shell {
		box-sizing: border-box !important;
		min-height: 0 !important;
		height: auto !important;
		max-height: 82px !important;
		padding: 5px 10px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		overflow: hidden !important;
		align-items: center !important;
	}

	html.basrawe-mobile-launch-hotfix .basrawe-mobile-logo-compact,
	html.basrawe-mobile-launch-hotfix .basrawe-header-logo-zone .custom-logo,
	html.basrawe-mobile-launch-hotfix .basrawe-header-logo-zone .basrawe-logo-image-polished {
		width: auto !important;
		height: auto !important;
		max-height: 48px !important;
		max-width: 138px !important;
		object-fit: contain !important;
	}

	/* نسخة Jannah الثابتة التي تظهر بعد التمرير: لا يُسمح لها بالتحول إلى صندوق أبيض ضخم. */
	html.basrawe-mobile-launch-hotfix .basrawe-mobile-sticky-shell {
		box-sizing: border-box !important;
		min-height: 56px !important;
		height: auto !important;
		max-height: 68px !important;
		padding-top: 4px !important;
		padding-bottom: 4px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		overflow: hidden !important;
		align-items: center !important;
	}
	html.basrawe-mobile-launch-hotfix .basrawe-mobile-sticky-logo-inner {
		min-height: 0 !important;
		height: auto !important;
		max-height: 58px !important;
		padding: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		overflow: hidden !important;
	}
	html.basrawe-mobile-launch-hotfix .basrawe-mobile-sticky-logo-inner img {
		max-height: 44px !important;
		max-width: 126px !important;
		width: auto !important;
		height: auto !important;
	}

	/* أي غلاف اكتشفه الإصدار السابق حول الشعار يبقى مضغوطاً أيضاً. */
	html.basrawe-mobile-launch-hotfix .basrawe-mobile-header-collapse {
		min-height: 0 !important;
		height: auto !important;
		max-height: 84px !important;
		padding-top: 4px !important;
		padding-bottom: 4px !important;
		margin-block: 0 !important;
		overflow: hidden !important;
	}
}

/* =========================================================
   Basrawe Child v3.4.1 — Mobile Header Final Fix
   الهدف: إنهاء الصندوق الأبيض الكبير للشعار في Sticky Header
   مع إبقاء الهيدر الأساسي مضغوطاً فقط، من دون لمس بقية الواجهة.
   ========================================================= */
@media (max-width: 780px) {
	/* الهيدر الأساسي: مساحة ثابتة ومعتدلة حول الشعار، لا مساحة عرض ضخمة. */
	html.basrawe-mobile-header-final-fix .basrawe-mobile-primary-header-final {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		min-height: 76px !important;
		height: 76px !important;
		max-height: 76px !important;
		padding: 6px 12px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		overflow: hidden !important;
	}

	html.basrawe-mobile-header-final-fix .basrawe-mobile-primary-branding-final {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		min-height: 0 !important;
		height: auto !important;
		max-height: 62px !important;
		padding: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		overflow: hidden !important;
	}

	html.basrawe-mobile-header-final-fix .basrawe-mobile-primary-logo-final {
		display: block !important;
		width: auto !important;
		height: auto !important;
		max-height: 54px !important;
		max-width: 150px !important;
		object-fit: contain !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* أي شعار داخل نسخة Sticky/Clone يختفي نهائياً على الهاتف. */
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-logo-hidden,
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-logo-branch {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
	}

	/* إذا كانت نسخة الـSticky كلها مجرد شعار أبيض عائم، نخفيها بالكامل. */
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-logo-only-shell {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: hidden !important;
		pointer-events: none !important;
	}

	/* إن كانت نسخة الـSticky تحتوي تنقلاً فعلياً، يبقى التنقل فقط ويختفي فرع الشعار. */
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-header-final:not(.basrawe-mobile-sticky-logo-only-shell) {
		box-sizing: border-box !important;
		min-height: 0 !important;
		height: auto !important;
		max-height: 64px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		overflow: visible !important;
	}

	/* احتياط مباشر لأشهر أغلفة شعار Jannah داخل أي Sticky تم اكتشافه. */
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-header-final .logo-container,
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-header-final .tie-logo,
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-header-final #logo,
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-header-final .site-branding,
	html.basrawe-mobile-header-final-fix .basrawe-mobile-sticky-header-final .header-logo {
		display: none !important;
	}
}