/**
 * FutbolFirst — VIP Carousel widget styles
 *
 * BEM block: .ffcw-vc
 *
 * Layout:
 *   Each slide (.ffcw-vc__slide) stacks vertically:
 *     1. .ffcw-vc__text-area  — title + link (above the image)
 *     2. .ffcw-vc__img-wrap   — background image + overlay
 *
 *   Navigation arrows (.ffcw-vc__nav-btn) are absolutely positioned within
 *   .ffcw-vc, vertically centred by default (top: 50% + translateY(-50%)).
 *   Use the arrow_top / arrow_prev_left / arrow_next_right controls to fine-tune.
 */

/* =============================================================================
   Root wrapper
   ========================================================================== */

.ffcw-vc {
	position: relative;
	/* overflow intentionally left unset — arrows may extend beyond the swiper bounds.
	   Add overflow:hidden on the Elementor section/column if you need to clip them. */
}

/* =============================================================================
   Swiper container
   ========================================================================== */

.ffcw-vc__swiper {
	overflow: hidden;
	width: 100%;
}

/* =============================================================================
   Slide
   ========================================================================== */

.ffcw-vc__slide {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* =============================================================================
   Text area (title + link — above the image)
   ========================================================================== */

.ffcw-vc__text-area {
	flex-shrink: 0;
	/* padding-bottom overridden by link_spacing responsive control */
}

/* =============================================================================
   Title
   ========================================================================== */

.ffcw-vc__title {
	margin: 0 0 8px; /* default bottom spacing — overridden by title_spacing responsive control */
	padding: 0;
	/* colour and typography set by Elementor via title_color / title_typography controls */
}

/* =============================================================================
   Link
   ========================================================================== */

.ffcw-vc__link,
.ffcw-vc__link-static {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	/* colour and typography set by Elementor via link_color / link_typography controls */
}

/* Default hover: subtle opacity fade.
   Overridden by link_hover_color / link_hover_opacity Elementor controls. */
.ffcw-vc__link:hover,
.ffcw-vc__link-static:hover {
	opacity: 0.75;
	transition: opacity 0.2s ease, color 0.2s ease;
}

/* =============================================================================
   Link icon (optional SVG after link text)
   ========================================================================== */

.ffcw-vc__link-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	pointer-events: auto; /* ensure the icon area is always part of the clickable link */
	/* margin-left overridden by link_icon_spacing responsive control */
	/* color overridden by link_icon_color control (currentColor) */
}

.ffcw-vc__link-icon svg,
.ffcw-vc__link-icon img {
	width: 16px;   /* default — overridden by link_icon_size responsive control */
	height: 16px;
	display: block;
	flex-shrink: 0;
}

/* =============================================================================
   Image wrapper
   ========================================================================== */

.ffcw-vc__img-wrap {
	position: relative;
	height: 480px; /* default — overridden by item_height responsive control */
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 8px; /* default — overridden by item_border_radius responsive control */
	flex-shrink: 0;
}

/* =============================================================================
   Background image layer
   ========================================================================== */

.ffcw-vc__bg {
	position: absolute;
	inset: 0;
	/* background-position / background-size / background-repeat are set via inline
	   style in PHP render — see class-vip-carousel.php render() — because Elementor
	   does not reliably generate per-item CSS for responsive controls inside Repeaters. */
	z-index: 0;
}

/* =============================================================================
   Overlay layer (colour / gradient — set via Group_Control_Background per item)
   ========================================================================== */

.ffcw-vc__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* background set by Elementor via .elementor-repeater-item-{id} selector */
}

/* =============================================================================
   Navigation buttons — absolutely positioned within .ffcw-vc
   ========================================================================== */

.ffcw-vc__nav-btn {
	position: absolute;
	top: 50%;                          /* overridden by arrow_top responsive control */
	transform: translateY(-50%);
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	/* CSS variables for conic gradient border */
	--ffcw-vc-border-w:     0px;
	--ffcw-vc-border-angle: 135deg;
	--ffcw-vc-border-c1:    rgba(255, 255, 255, 0.6);
	--ffcw-vc-border-c2:    rgba(255, 255, 255, 0.05);
	/* size — overridden by arrow_size responsive control */
	width: 52px;
	height: 52px;
	box-sizing: border-box;
	/* background — overridden by arrow_bg Group_Control_Background */
	background: rgba(0, 0, 0, 0.4);
	/* border — overridden by arrow_border Group_Control_Border */
	border: none;
	/* border-radius — overridden by arrow_border_radius (default: circle) */
	border-radius: 50%;
	padding: 0;
	transition: opacity 0.2s ease, background-color 0.2s ease;
	/* icon colour via currentColor — overridden by arrow_icon_color */
	color: #ffffff;
}

.ffcw-vc__nav-btn--prev {
	left: 0; /* overridden by arrow_prev_left responsive control */
}

.ffcw-vc__nav-btn--next {
	right: 0; /* overridden by arrow_next_right responsive control */
}

.ffcw-vc__nav-btn:hover {
	opacity: 0.8;
}

.ffcw-vc__nav-btn.swiper-button-disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* =============================================================================
   Conic gradient border via ::before (mask technique)
   Controlled via --ffcw-vc-border-w / angle / c1 / c2.
   When --ffcw-vc-border-w is 0 the border is invisible (default).
   ========================================================================== */

.ffcw-vc__nav-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--ffcw-vc-border-w, 0px);
	background: conic-gradient(
		from var(--ffcw-vc-border-angle, 135deg),
		var(--ffcw-vc-border-c1, rgba(255, 255, 255, 0.6)),
		var(--ffcw-vc-border-c2, rgba(255, 255, 255, 0.05)),
		var(--ffcw-vc-border-c1, rgba(255, 255, 255, 0.6))
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 0;
}

/* =============================================================================
   Arrow icon inside the button
   ========================================================================== */

.ffcw-vc__arrow-icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}

.ffcw-vc__arrow-icon svg {
	width: 20px;   /* default — overridden by arrow_icon_size control */
	height: 20px;
	display: block;
	flex-shrink: 0;
}

.ffcw-vc__arrow-icon img {
	display: block;
	object-fit: contain;
	flex-shrink: 0;
}

/* Flip the previous arrow (mirror horizontally) */
.ffcw-vc__arrow-icon--flipped svg,
.ffcw-vc__arrow-icon--flipped img {
	transform: scaleX(-1);
}