/**
 * NIYAPRESS: Hero Overlay Full Cover Fix
 * CRITICAL: Overlay must cover ENTIRE image (100% height)
 * Fix partial coverage issue
 */

/* ========================================
   OVERLAY - FULL IMAGE COVERAGE
   ======================================== */

.hero-section-slider .hero-slide-overlay {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(
		to top, 
		rgba(0, 0, 0, 0.95) 0%, 
		rgba(0, 0, 0, 0.85) 15%,
		rgba(0, 0, 0, 0.70) 30%,
		rgba(0, 0, 0, 0.50) 50%, 
		rgba(0, 0, 0, 0.30) 70%,
		rgba(0, 0, 0, 0.15) 85%,
		transparent 100%
	) !important;
	pointer-events: none !important;
	z-index: 2 !important;
	inset: 0 !important;
}

/* ========================================
   SLIDE MEDIA - FULL CONTAINER
   ======================================== */

.hero-section-slider .hero-slide-media {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	display: block !important;
}

/* ========================================
   SLIDE CONTAINER - FULL HEIGHT
   ======================================== */

.hero-section-slider .hero-slide {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

.hero-section-slider .hero-slides-container {
	position: relative !important;
	width: 100% !important;
	height: 600px !important;
	overflow: hidden !important;
}

/* ========================================
   IMAGE - FULL COVERAGE
   ======================================== */

.hero-section-slider .hero-slide-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	z-index: 1 !important;
	filter: brightness(0.85) !important;
	transition: transform 8s ease, filter 0.3s ease !important;
}

.hero-section-slider .hero-slide.is-active .hero-slide-img {
	transform: scale(1.08) !important;
	filter: brightness(0.80) !important;
}

/* ========================================
   CAPTION - ABOVE OVERLAY
   ======================================== */

.hero-section-slider .hero-slide-caption {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	padding: clamp(30px, 4vw, 50px) !important;
	z-index: 10 !important;
	pointer-events: auto !important;
}

.hero-section-slider .hero-slide-title {
	margin: 0 !important;
	font-size: clamp(22px, 3vw, 36px) !important;
	font-weight: 900 !important;
	line-height: 1.4 !important;
	max-width: 95% !important;
	direction: rtl !important;
	text-align: right !important;
}

.hero-section-slider .hero-slide-title a {
	color: #ffffff !important;
	text-decoration: none !important;
	text-shadow: 
		0 3px 8px rgba(0, 0, 0, 0.95),
		0 6px 16px rgba(0, 0, 0, 0.8),
		0 10px 24px rgba(0, 0, 0, 0.6) !important;
	display: block !important;
}

/* ========================================
   BADGES - ABOVE OVERLAY
   ======================================== */

.hero-section-slider .hero-slide-cat {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	background: rgba(0, 29, 131, 0.95) !important;
	backdrop-filter: blur(10px) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	padding: 6px 18px !important;
	border-radius: 25px !important;
	z-index: 11 !important;
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.5),
		0 0 0 2px rgba(255, 255, 255, 0.2) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.hero-section-slider .hero-slide-counter {
	position: absolute !important;
	top: 20px !important;
	left: 20px !important;
	background: rgba(0, 0, 0, 0.85) !important;
	backdrop-filter: blur(10px) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	padding: 8px 16px !important;
	border-radius: 25px !important;
	z-index: 11 !important;
	font-family: 'Tajawal', sans-serif !important;
	direction: ltr !important;
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.5),
		0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

/* ========================================
   PROGRESS BAR - ABOVE OVERLAY
   ======================================== */

.hero-section-slider .hero-progress {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	height: 4px !important;
	background: linear-gradient(90deg, #001D83 0%, #0066ff 100%) !important;
	z-index: 12 !important;
	width: 0% !important;
	box-shadow: 0 0 12px rgba(0, 29, 131, 0.8) !important;
}

.hero-section-slider .hero-slide.is-active .hero-progress {
	animation: heroProgress 5s linear forwards !important;
}

@keyframes heroProgress {
	from { width: 0%; }
	to { width: 100%; }
}

/* ========================================
   NAVIGATION - ABOVE OVERLAY
   ======================================== */

.hero-section-slider .hero-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 52px !important;
	height: 52px !important;
	background: rgba(255, 255, 255, 0.98) !important;
	backdrop-filter: blur(12px) !important;
	border: none !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 15 !important;
	transition: all 0.3s ease !important;
	box-shadow: 
		0 4px 20px rgba(0, 0, 0, 0.3),
		0 0 0 3px rgba(255, 255, 255, 0.4) !important;
	opacity: 0 !important;
}

.hero-section-slider .hero-main-slider:hover .hero-nav {
	opacity: 1 !important;
}

.hero-section-slider .hero-nav:hover {
	background: #ffffff !important;
	transform: translateY(-50%) scale(1.15) !important;
	box-shadow: 
		0 6px 30px rgba(0, 0, 0, 0.4),
		0 0 0 4px rgba(0, 29, 131, 0.3) !important;
}

.hero-section-slider .hero-nav svg {
	color: var(--brand-red, #001D83) !important;
	width: 26px !important;
	height: 26px !important;
}

.hero-section-slider .hero-nav-prev {
	left: 20px !important;
}

.hero-section-slider .hero-nav-next {
	right: 20px !important;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 1200px) {
	.hero-section-slider .hero-slides-container {
		height: 520px !important;
	}
}

@media (max-width: 1024px) {
	.hero-section-slider .hero-slides-container {
		height: 420px !important;
	}
	
	.hero-section-slider .hero-nav {
		opacity: 1 !important;
	}
}

@media (max-width: 768px) {
	.hero-section-slider .hero-slides-container {
		height: 380px !important;
	}
	
	.hero-section-slider .hero-slide-overlay {
		background: linear-gradient(
			to top, 
			rgba(0, 0, 0, 1) 0%, 
			rgba(0, 0, 0, 0.95) 20%,
			rgba(0, 0, 0, 0.85) 35%,
			rgba(0, 0, 0, 0.65) 55%, 
			rgba(0, 0, 0, 0.40) 75%,
			rgba(0, 0, 0, 0.20) 90%,
			transparent 100%
		) !important;
	}
	
	.hero-section-slider .hero-slide-caption {
		padding: 20px !important;
	}
	
	.hero-section-slider .hero-slide-title {
		font-size: clamp(18px, 4vw, 24px) !important;
	}
	
	.hero-section-slider .hero-nav {
		width: 46px !important;
		height: 46px !important;
	}
	
	.hero-section-slider .hero-nav svg {
		width: 22px !important;
		height: 22px !important;
	}
}

@media (max-width: 480px) {
	.hero-section-slider .hero-slides-container {
		height: 320px !important;
	}
	
	.hero-section-slider .hero-slide-caption {
		padding: 15px !important;
	}
	
	.hero-section-slider .hero-slide-title {
		font-size: clamp(16px, 4.5vw, 20px) !important;
	}
	
	.hero-section-slider .hero-nav {
		width: 42px !important;
		height: 42px !important;
	}
	
	.hero-section-slider .hero-nav svg {
		width: 20px !important;
		height: 20px !important;
	}
}

/* ========================================
   FORCE FULL COVERAGE - OVERRIDE ALL
   ======================================== */

.hero-section-slider .hero-slide .hero-slide-overlay {
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}