/**
 * FutbolFirst — Insta Carousel widget styles
 *
 * BEM block: .ffcw-ic
 *
 * Layout relies on Swiper for horizontal scroll/swipe.
 * Per-card and per-device styles are injected by Elementor via its CSS engine
 * using the .elementor-repeater-item-{id} and .elementor-element-{id} selectors.
 */

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

.ffcw-ic {
	position: relative;
	/* No overflow:hidden — the nav sits below the swiper in normal flow */
}

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

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

/* =============================================================================
   Item / slide
   ========================================================================== */

.ffcw-ic__item {
	position: relative;
	height: 560px; /* default — overridden by item_height responsive control */
	overflow: hidden;
	box-sizing: border-box;
	flex-shrink: 0;
	border-radius: 16px; /* default — overridden by item_border_radius responsive control */
	/* aspect-ratio: inherited from --ffcw-ic-ratio when set on .ffcw-ic wrapper */
	aspect-ratio: var(--ffcw-ic-ratio);
}

/* When --ffcw-ic-ratio is defined on the wrapper, force height:auto on items
   so the CSS aspect-ratio property controls the height instead of the fixed px value.
   The [style*] selector targets .ffcw-ic when the PHP sets --ffcw-ic-ratio on it.
   !important overrides both the default 560px and Elementor's generated height CSS. */
.ffcw-ic[style*="--ffcw-ic-ratio"] .ffcw-ic__item {
	height: auto !important;
}

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

.ffcw-ic__link {
	display: block;
	/* position:absolute + inset:0 makes the link fill .ffcw-ic__item regardless
	   of any external display:inline override (Elementor/theme) that would
	   otherwise collapse a position:relative + height:100% to zero. */
	position: absolute;
	inset: 0;
	text-decoration: none;
	color: inherit;
}

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

.ffcw-ic__bg {
	position: absolute;
	inset: 0;
	background-size: cover;               /* default — overridden per-item/per-device */
	background-position: center center;   /* default — overridden per-item/per-device */
	background-repeat: no-repeat;         /* default — overridden per-item */
	z-index: 0;
}

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

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

/* =============================================================================
   Play icon (centred inside the card)
   ========================================================================== */

.ffcw-ic__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: #ffffff; /* default — overridden by play_icon_color control */
}

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

/* =============================================================================
   Title wrapper (anchored to bottom of the card)
   ========================================================================== */

.ffcw-ic__title-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 16px; /* default — overridden by title_padding responsive control */
	box-sizing: border-box;
}

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

.ffcw-ic__title {
	margin: 0;
	color: #ffffff; /* default — overridden by title_color control */
	/* typography set by Group_Control_Typography */
}

/* =============================================================================
   Navigation row — sits BELOW the swiper in normal flow
   ========================================================================== */

.ffcw-ic__nav {
	display: flex;
	align-items: center;
	justify-content: space-between; /* ← left edge, → right edge */
	margin-top: 16px; /* default — overridden by arrows_margin_top responsive control */
	pointer-events: none;
	/* display overridden per-device by the arrows_display responsive control */
}

/* =============================================================================
   Navigation buttons
   ========================================================================== */

.ffcw-ic__nav-btn {
	position: relative; /* needed for ::before conic gradient border */
	flex-shrink: 0;
	/* neutralise any stale Elementor-cached values from prior overlay iterations */
	top: unset !important;
	transform: none !important;
	left: unset !important;
	right: unset !important;
	/* margin offsets — overridden by arrow_prev_offset / arrow_next_offset controls */
	pointer-events: auto;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	/* CSS variables for the conic gradient border (::before technique) */
	--ffcw-ic-border-w:     0px;
	--ffcw-ic-border-angle: 135deg;
	--ffcw-ic-border-c1:    rgba(255, 255, 255, 0.6);
	--ffcw-ic-border-c2:    rgba(255, 255, 255, 0.05);
	/* size — overridden by arrow_size 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 control (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 control */
	color: #ffffff;
	/* box-shadow — overridden by arrow_shadow Group_Control_Box_Shadow */
}

.ffcw-ic__nav-btn--prev {
	margin-left: 0; /* default — overridden by arrow_prev_offset responsive control */
}

.ffcw-ic__nav-btn--next {
	margin-right: 0; /* default — overridden by arrow_next_offset responsive control */
}

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

/* Swiper disabled state (at first/last slide) */
.ffcw-ic__nav-btn.swiper-button-disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* =============================================================================
   Conic gradient border via ::before (mask technique)
   Works on any border-radius, including perfect circles.
   Controlled via CSS custom properties: --ffcw-ic-border-w / angle / c1 / c2.
   When --ffcw-ic-border-w is 0 the border is invisible (default off).
   ========================================================================== */

.ffcw-ic__nav-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--ffcw-ic-border-w, 0px);
	background: conic-gradient(
		from var(--ffcw-ic-border-angle, 135deg),
		var(--ffcw-ic-border-c1, rgba(255, 255, 255, 0.6)),
		var(--ffcw-ic-border-c2, rgba(255, 255, 255, 0.05)),
		var(--ffcw-ic-border-c1, rgba(255, 255, 255, 0.6))
	);
	/* mask: show only the padding ring, make the inner area transparent */
	-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-ic__arrow-icon {
	position: relative; /* creates stacking context above the ::before gradient border */
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}

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

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

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