/* ============================================================
   BPF Stall Slider Widget
   ============================================================ */

/* Wrapper — clips the overflow-visible swiper */
.bpf-stall-slider {
	overflow: hidden;
	position: relative;
}

.bpf-ss-shell {
	position: relative;
}

/* Swiper instance */
.bpf-ss-swiper {
	overflow: visible;
	min-height: 260px;
}

.bpf-ss-swiper .swiper-wrapper {
	display: flex;
	align-items: stretch;
	min-height: 260px;
}

.bpf-ss-swiper .swiper-slide {
	height: 260px !important;
	display: flex;
	align-items: stretch;
	flex-shrink: 0;
}

/* ── Stall Card (entire slide = link) ─────────────────────── */
.bpf-stall-card {
	position: relative;
	display: block;
	width: 100%;
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	flex-shrink: 0;
	padding-bottom: 36%;
}

/* Background image */
.bpf-stall-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 260px;
	background-color: #e0e0e0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1);
	transition: transform 260ms ease-out;
	z-index: 1;
}

/* Zoom effect (toggled via .bpf-stall-zoom class on wrapper) */
.bpf-stall-zoom .bpf-stall-card:hover .bpf-stall-bg,
.bpf-stall-zoom .bpf-stall-card:focus-visible .bpf-stall-bg {
	transform: scale(1.04);
}

/* ── Overlay ──────────────────────────────────────────────── */
.bpf-stall-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 18px 20px;
	color: #ffffff;
	background: linear-gradient(
		180deg,
		var(--bpf-overlay-top, rgba(0, 0, 0, 0.05)) 0%,
		var(--bpf-overlay-bottom, rgba(0, 0, 0, 0.5)) 80%
	);
	transition: all 220ms ease-out;
	z-index: 2;
	opacity: 0;
}
.bpf-stall-zoom .bpf-stall-card:hover .bpf-stall-overlay,
.bpf-stall-zoom .bpf-stall-card:focus-visible .bpf-stall-overlay {
	opacity: 1;
}
/* ── Labels ───────────────────────────────────────────────── */

/* Default label — visible centred, hides on hover */
.bpf-stall-label-default {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: opacity 220ms ease-out, visibility 220ms ease-out;
	opacity: 1;
	visibility: visible;
}

/* Hover label — hidden by default, appears above title on hover */
.bpf-stall-label-hover {
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 10px;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: opacity 220ms ease-out, visibility 220ms ease-out;
	opacity: 0;
	visibility: hidden;
}

/* ── Title & CTA — hidden by default ─────────────────────── */
.bpf-stall-overlay .bpf-stall-title,
.bpf-stall-overlay .bpf-stall-cta {
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease-out, visibility 220ms ease-out;
	pointer-events: none;
}

/* ── Hover state ──────────────────────────────────────────── */
.bpf-stall-card:hover .bpf-stall-overlay,
.bpf-stall-card:focus-visible .bpf-stall-overlay {
	justify-content: center;
	align-items: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Hide default label */
.bpf-stall-card:hover .bpf-stall-overlay .bpf-stall-label-default,
.bpf-stall-card:focus-visible .bpf-stall-overlay .bpf-stall-label-default {
	opacity: 0;
	visibility: hidden;
}

/* Show hover label */
.bpf-stall-card:hover .bpf-stall-overlay .bpf-stall-label-hover,
.bpf-stall-card:focus-visible .bpf-stall-overlay .bpf-stall-label-hover {
	opacity: 1;
	visibility: visible;
}

/* Show title centred */
.bpf-stall-card:hover .bpf-stall-overlay .bpf-stall-title,
.bpf-stall-card:focus-visible .bpf-stall-overlay .bpf-stall-title {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	text-align: center;
	margin: 0 0 20px;
}

/* Show CTA pinned to bottom */
.bpf-stall-card:hover .bpf-stall-overlay .bpf-stall-cta,
.bpf-stall-card:focus-visible .bpf-stall-overlay .bpf-stall-cta {
	position: absolute;
	bottom: 30px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	align-self: center;
}

/* ── Title base styles ────────────────────────────────────── */
.bpf-stall-title {
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	margin: 0;
	font-family: 'AktivGrotesk' !important;
    font-weight: 700;
}

/* ── CTA ──────────────────────────────────────────────────── */
.bpf-stall-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
	font-size: 16px;
	pointer-events: none;
	padding: 0 10px;
}

.bpf-stall-cta-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFFFF6;
	flex-shrink: 0;
}

.bpf-stall-cta-icon svg path {
	stroke: #181D4B;
}

/* ── Progress Bar ─────────────────────────────────────────── */
.bpf-ss-bottom {
	padding-top: 18px;
}

.bpf-ss-pagination.swiper-pagination {
	position: relative !important;
	width: 100%;
	height: 5px;
	background: #D9D9D9;
	overflow: hidden;
	border-radius: 999px;
}

.bpf-ss-pagination .swiper-pagination-progressbar-fill {
	background: #181D4B !important;
	border-radius: 999px;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1400px) {
	.bpf-stall-title
	{
		font-size: 30px !important;
	}
}
@media (max-width: 768px) {
	.bpf-stall-card,
	.bpf-ss-swiper .swiper-slide {
		height: 220px !important;
	}

	.bpf-stall-bg {
		min-height: 220px;
	}
}