/* ==========================================================================
   BO Intro -galliu — Frontend Styles
   كل الكلاسات الأساسية تبدأ بـ BO أو bo-intro
   ========================================================================== */

* {
	box-sizing: border-box;
}

.bo-intro-screen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bo-bg-color, #0a0a0a);
	z-index: var(--bo-z-index, 999999);
	transition: opacity var(--bo-fade-duration, 0.6s) ease, visibility var(--bo-fade-duration, 0.6s) ease;
	opacity: 1;
	visibility: visible;
	overflow: hidden;
}

.bo-intro-screen.bo-intro-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* تأمين عدم اسكرول الصفحة وقت ظهور الانترو */
body.bo-intro-active {
	overflow: hidden !important;
	height: 100vh !important;
}

/* غلاف الـ Padding من 4 اتجاهات */
.bo-intro-padding-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--bo-padding-top, 0px);
	padding-right: var(--bo-padding-right, 0px);
	padding-bottom: var(--bo-padding-bottom, 0px);
	padding-left: var(--bo-padding-left, 0px);
	box-sizing: border-box;
}

.bo-intro-content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* الوهج المحيط بالفريم - يحاكي الصورة المرجعية */
.bo-intro-frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bo-frame-size, 150px);
	height: var(--bo-frame-size, 150px);
	border: var(--bo-frame-border-width, 1px) solid var(--bo-frame-border-color, #ffffff);
	border-radius: var(--bo-frame-radius, 50%);
	background: transparent;
	box-shadow: 0 0 80px 40px color-mix(in srgb, var(--bo-accent-color, #ff9900) 35%, transparent);
	filter: drop-shadow(0 0 60px color-mix(in srgb, var(--bo-accent-color, #ff9900) 45%, transparent));
}

/* فيديو / صورة / جيف داخل الفريم */
.bo-intro-frame-media {
	overflow: hidden;
}

/* غلاف بادنج المحتوى (صورة/فيديو/جيف) داخل الفريم - 4 اتجاهات */
.bo-intro-content-padding {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: inherit;
	padding-top: var(--bo-content-padding-top, 0px);
	padding-right: var(--bo-content-padding-right, 0px);
	padding-bottom: var(--bo-content-padding-bottom, 0px);
	padding-left: var(--bo-content-padding-left, 0px);
	box-sizing: border-box;
}

.BO-intro-video,
.BO-intro-image,
.BO-intro-gif {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

/* ==========================================================================
   شريط اللودنج - بالعرض (Horizontal)
   ========================================================================== */
.BO-loading-frame-horizontal {
	width: var(--bo-loading-width, 250px);
	height: auto;
	min-height: var(--bo-frame-size, 60px);
	flex-direction: column;
	gap: 14px;
	border: none;
	box-shadow: none;
	filter: none;
}

.BO-loading-track-horizontal {
	width: 100%;
	height: var(--bo-loading-thickness, 4px);
	background-color: var(--bo-loading-track-color, #222);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.BO-loading-bar-horizontal {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: var(--bo-loading-bar-color, #ff9900);
	border-radius: 999px;
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--bo-loading-bar-color, #ff9900) 60%, transparent);
	transition: width 0.15s linear;
}

/* ==========================================================================
   شريط اللودنج - بالطول (Vertical)
   ========================================================================== */
.BO-loading-frame-vertical {
	width: auto;
	height: var(--bo-loading-height, 250px);
	flex-direction: column-reverse;
	align-items: center;
	gap: 14px;
	border: none;
	box-shadow: none;
	filter: none;
}

.BO-loading-track-vertical {
	width: var(--bo-loading-thickness, 4px);
	height: 100%;
	background-color: var(--bo-loading-track-color, #222);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: flex-end;
}

.BO-loading-bar-vertical {
	width: 100%;
	height: 0%;
	background-color: var(--bo-loading-bar-color, #ff9900);
	border-radius: 999px;
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--bo-loading-bar-color, #ff9900) 60%, transparent);
	transition: height 0.15s linear;
}

/* ==========================================================================
   نسبة اللودنج
   ========================================================================== */
.BO-loading-percent {
	color: var(--bo-text-color, #fff);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	direction: ltr;
}

/* ==========================================================================
   التوافق مع جميع الشاشات
   ========================================================================== */
@media (max-width: 992px) {
	.bo-intro-frame {
		width: calc(var(--bo-frame-size, 150px) * 0.85);
		height: calc(var(--bo-frame-size, 150px) * 0.85);
	}
	.BO-loading-frame-horizontal {
		width: min(var(--bo-loading-width, 250px), 80vw);
	}
	.BO-loading-frame-vertical {
		height: min(var(--bo-loading-height, 250px), 60vh);
	}
}

@media (max-width: 480px) {
	.bo-intro-frame {
		width: calc(var(--bo-frame-size, 150px) * 0.65);
		height: calc(var(--bo-frame-size, 150px) * 0.65);
	}
	.BO-loading-frame-horizontal {
		width: min(var(--bo-loading-width, 250px), 75vw);
	}
	.BO-loading-frame-vertical {
		height: min(var(--bo-loading-height, 250px), 50vh);
	}
	.BO-loading-percent {
		font-size: 15px;
	}
}

@media (orientation: landscape) and (max-height: 500px) {
	.bo-intro-frame {
		width: calc(var(--bo-frame-size, 150px) * 0.6);
		height: calc(var(--bo-frame-size, 150px) * 0.6);
	}
	.BO-loading-frame-vertical {
		height: 70vh;
	}
}