/**
 * Swiper Status Slider Styles
 * Overrides for Anash Status sliders to match original Owl Carousel styling
 */

/* ==========================================
   Main HB Slider Popup (content-status-slider-popup.php)
   ========================================== */

/* Global slider popup box height */
.global-slider-p__box {
	min-height: calc(100vh - 4rem);
}

.swiper-HB-slider-popup {
	position: relative;
	width: 100%;
	min-height: calc(100vh - 4rem);
	height: auto;
}

.swiper-HB-slider-popup .swiper-wrapper {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.swiper-HB-slider-popup .swiper-slide {
	height: auto;
	min-height: calc(100vh - 6rem);
	user-select: text;
	display: flex;
	flex-direction: column;
}

/* Slide content wrapper */
.swiper-HB-slider-popup .HB-slider-popup__wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: calc(100vh - 6rem);
	position: relative;
}

/* Image boxes - hidden by default, shown via active class */
.swiper-HB-slider-popup .HB-slider-popup__box,
.swiper-HB-slider-popup .GP-status__imgbox {
	flex: 1;
	display: none;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}

/* Show active image box only - controlled by JavaScript */
.swiper-HB-slider-popup .HB-slider-popup__box.active,
.swiper-HB-slider-popup .GP-status__imgbox.active {
	display: flex;
}

.swiper-HB-slider-popup .GP-status__img {
	width: 100%;
	max-height: calc(100vh - 250px);
	object-fit: contain;
	object-position: center;
	display: block;
}

/* Progress bars at top - maintain existing styling */
.swiper-HB-slider-popup .HB-slider-popup__img-lines {
	position: absolute;
	display: flex;
	gap: 15px;
	top: 20px;
	width: 400px;
	max-width: 90%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
}

.swiper-HB-slider-popup .HB-slider-popup__img-line,
.swiper-HB-slider-popup .progress-strip__item {
	background-color: rgba(255, 255, 255, 0.5);
	height: 3px;
	flex: 1;
	position: relative;
	border-radius: 2px;
}

.swiper-HB-slider-popup .HB-slider-popup__img-line span,
.swiper-HB-slider-popup .progress-strip__item span {
	display: block;
	position: absolute;
	height: 100%;
	left: 0;
	width: 0;
	background-color: #fff;
	border-radius: 2px;
	transition: none;
}

/* Active progress bar animation */
.swiper-HB-slider-popup .HB-slider-popup__img-line.active span,
.swiper-HB-slider-popup .progress-strip__item.active span {
	width: 100%;
	transition: width 5s linear;
}

/* Completed progress bars */
.swiper-HB-slider-popup .HB-slider-popup__img-line.completed span,
.swiper-HB-slider-popup .progress-strip__item.completed span {
	width: 100%;
	transition: none;
	background-color: rgba(255, 255, 255, 0.5);
	height: 3px;
	flex: 1;
	position: relative;
	border-radius: 2px;
}

.swiper-HB-slider-popup .HB-slider-popup__img-line span {
	display: block;
	position: absolute;
	height: 100%;
	left: 0;
	width: 0;
	background-color: #fff;
	border-radius: 2px;
}

/* Navigation buttons */
.swiper-HB-slider-popup .swiper-button-next,
.swiper-HB-slider-popup .swiper-button-prev {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3369f6;
	width: 40px;
	height: 58px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: transparent;
}

.swiper-HB-slider-popup .swiper-button-prev {
	left: 10px;
}

.swiper-HB-slider-popup .swiper-button-next {
	right: 10px;
}

.swiper-HB-slider-popup .swiper-button-next::after,
.swiper-HB-slider-popup .swiper-button-prev::after {
	display: none;
}

.swiper-HB-slider-popup .swiper-button-next img,
.swiper-HB-slider-popup .swiper-button-prev img {
	width: 40px;
	height: auto;
	filter: brightness(0) invert(1);
}

/* Hide default pagination - using custom progress bars */
.swiper-HB-slider-popup .swiper-pagination {
	display: none;
}

/* ==========================================
   Status Slider Popup (AJAX loaded)
   ========================================== */

.swiper-status-slider-popup {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.swiper-status-slider-popup .swiper-wrapper {
	display: flex;
}

.swiper-status-slider-popup .swiper-slide {
	height: auto;
}

/* Navigation buttons */
.swiper-status-slider-popup .swiper-button-next,
.swiper-status-slider-popup .swiper-button-prev {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	width: 40px;
	height: 58px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: transparent;
}

.swiper-status-slider-popup .swiper-button-prev {
	left: 0;
}

.swiper-status-slider-popup .swiper-button-next {
	right: 0;
}

.swiper-status-slider-popup .swiper-button-next::after,
.swiper-status-slider-popup .swiper-button-prev::after {
	display: none;
}

.swiper-status-slider-popup .swiper-button-next img,
.swiper-status-slider-popup .swiper-button-prev img {
	width: 40px;
	height: auto;
	filter: brightness(0) invert(1);
}

/* Pagination dots - match owl carousel line style */
.swiper-status-slider-popup .swiper-pagination {
	position: relative;
	display: flex;
	gap: 20px;
	padding-top: 16px;
	bottom: auto;
	left: auto;
	width: 100%;
	justify-content: center;
}

.swiper-status-slider-popup .swiper-pagination-bullet {
	background-color: #646464;
	width: 100%;
	max-width: 60px;
	height: 3px;
	border-radius: 0;
	opacity: 1;
	position: relative;
	margin: 0 !important;
}

.swiper-status-slider-popup .swiper-pagination-bullet span {
	display: block;
	background-color: #fff;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.swiper-status-slider-popup .swiper-pagination-bullet-active {
	background-color: #646464;
}

.swiper-status-slider-popup .swiper-pagination-bullet.line-active span {
	width: 100%;
	transition: width 3s linear;
}

/* Image styling */
.swiper-status-slider-popup .status-slider-popup__box {
	width: 100%;
}

.swiper-status-slider-popup .GP-status__img {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}

/* ==========================================
   Common Swiper Overrides
   ========================================== */

/* Disable Swiper default navigation colors */
.swiper-button-next,
.swiper-button-prev {
	--swiper-navigation-color: #fff;
}

/* Adjust for left thumbnail panel */
@media (min-width: 992px) {
	.sc-HB-slider-popup .global-slider-p__wrap {
		margin-left: 130px;
		max-width: calc(100% - 160px);
	}

	.swiper-HB-slider-popup .swiper-button-prev {
		left: -60px;
	}

	.swiper-HB-slider-popup .swiper-button-next {
		right: -60px;
	}
}

/* Mobile responsive */
@media (max-width: 991px) {
	.swiper-HB-slider-popup .swiper-button-prev,
	.swiper-HB-slider-popup .swiper-button-next {
		display: none;
	}

	.swiper-HB-slider-popup .HB-slider-popup__img-lines {
		top: 10px;
		gap: 8px;
	}
}

@media (max-width: 575px) {
	.swiper-status-slider-popup .swiper-pagination {
		gap: 10px;
		padding-top: 12px;
	}

	.swiper-status-slider-popup .swiper-pagination-bullet {
		max-width: 40px;
	}

	.swiper-status-slider-popup .swiper-button-next,
	.swiper-status-slider-popup .swiper-button-prev {
		width: 30px;
	}

	.swiper-status-slider-popup .swiper-button-next img,
	.swiper-status-slider-popup .swiper-button-prev img {
		width: 30px;
	}
}

/* ==========================================
   Animation & Transitions
   ========================================== */

.swiper-HB-slider-popup .swiper-slide-active,
.swiper-status-slider-popup .swiper-slide-active {
	z-index: 1;
}

/* Smooth slide transitions */
.swiper-HB-slider-popup .swiper-wrapper,
.swiper-status-slider-popup .swiper-wrapper {
	transition-timing-function: ease-out;
}

/* ==========================================
   Thumbnail Navigation Styles
   ========================================== */

.HB-slider-popup__navs {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	align-items: center;
	justify-content: center;
	z-index: 20;
	padding: 10px 20px;
}

.hbsp-thumb {
	position: relative;
	width: 60px;
	height: 60px;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.hbsp-thumb:hover {
	transform: scale(1.1);
}

.hbsp-thumb.active {
	transform: scale(1.15);
}

.hbsp-thumb__svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}

.hbsp-thumb__bg {
	fill: none;
	stroke: #5c5c5c;
}

.hbsp-thumb__bar {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.hbsp-thumb.active .hbsp-thumb__bar {
	/* Will be animated via JavaScript with linear timing */
}

.hbsp-thumb__img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.4);
	transition: border-color 0.3s ease;
}

.hbsp-thumb.active .hbsp-thumb__img {
	border-color: rgba(255, 255, 255, 0.8);
}

.hbsp-thumb__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================
   Touch/Swipe behavior
   ========================================== */

.swiper-HB-slider-popup,
.swiper-status-slider-popup {
	touch-action: pan-y;
}