/* ==========================================================================
   FutbolFirst — Floating Bubbles widget
   --------------------------------------------------------------------------
   Layers (bottom → top):
     1. .ffcw-fb              — section container (gradient bg, border, shadow)
     2. .ffcw-fb__title-wrap  — large title layer, z-index 1 (behind bubbles)
     3. .ffcw-fb__stage       — animation stage, z-index 2 (bubbles spawn here)
     4. .ffcw-fb__templates   — hidden bubble templates (display:none)

   All visual styles (backgrounds, typography, borders, shadows) are driven
   by Elementor controls and injected as scoped inline CSS. The rules here
   provide structural defaults only.
   ========================================================================== */

/* ── Section container ─────────────────────────────────── */
.ffcw-fb {
	position:   relative;
	overflow:   hidden;
	width:      100%;
	box-sizing: border-box;
	background: linear-gradient(
		0deg,
		rgba(224, 211, 195, 0) 17.21%,
		rgba(123, 98, 199, 0.30) 66.88%,
		#7B62C7 100%
	);
}

/* Full-viewport-width breakout (opt-in via control). Escapes the column
   constraints and forces the section to span the full viewport width. */
.ffcw-fb.ffcw-fb--fullwidth {
	width:        100vw;
	max-width:    100vw;
	position:     relative;
	left:         50%;
	right:        50%;
	margin-left:  -50vw;
	margin-right: -50vw;
}

.ffcw-fb *,
.ffcw-fb *::before,
.ffcw-fb *::after {
	box-sizing: border-box;
}

/* ── Title layer ───────────────────────────────────────── */
.ffcw-fb__title-wrap {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         1;
	pointer-events:  none;
}

.ffcw-fb__title {
	margin:     0;
	padding:    0;
	word-break: break-word;
}

/* ── Bubbles stage ─────────────────────────────────────── */
.ffcw-fb__stage {
	position:       absolute;
	inset:          0;
	z-index:        2;
	pointer-events: none;
}

/* ── Individual bubble (card) ──────────────────────────── */
.ffcw-fb__stage .ffcw-fb__bubble {
	display:        inline-flex;
	flex-direction: column;
	align-items:    center;
	min-width:      220px;
	max-width:      300px;
	background:     transparent;
	/* filter (blur + drop-shadow) is set inline by the animation keyframes */
}

/* Default overlap between image and pill — overridden by bubble_image_overlap */
.ffcw-fb__stage .ffcw-fb__bubble[data-pos="top"] .ffcw-fb__image    { margin-bottom: -20px; }
.ffcw-fb__stage .ffcw-fb__bubble[data-pos="bottom"] .ffcw-fb__image { margin-top: -20px; }
.ffcw-fb__stage .ffcw-fb__bubble[data-pos="left"] .ffcw-fb__image   { margin-right: -20px; }
.ffcw-fb__stage .ffcw-fb__bubble[data-pos="right"] .ffcw-fb__image  { margin-left: -20px; }

/* ── Image ─────────────────────────────────────────────── */
/* The image is a two-layer element:
     - the wrapper div carries the background (color / gradient) and border,
     - the inner <img> carries the actual photo on top of the background. */
.ffcw-fb__image {
	flex-shrink:   0;
	width:         88px;
	height:        88px;
	border-radius: 50%;
	position:      relative;
	z-index:       2;
	overflow:      hidden;
}

.ffcw-fb__image img {
	display:       block;
	width:         100%;
	height:        100%;
	object-fit:    cover;
	border-radius: inherit;
}

/* ── Text pill ─────────────────────────────────────────── */
.ffcw-fb__pill {
	flex:       1 1 auto;
	min-width:  0;
	padding:    40px 22px 22px;
	background: rgba(255, 255, 255, 0.10);
	border-radius: 999px;
	position:   relative;
	z-index:    1;
}

.ffcw-fb__text {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-weight: 600;
	text-align: center;
	word-break: break-word;
}

/* ── Responsive defaults ───────────────────────────────── */
@media (max-width: 1024px) {
	.ffcw-fb__stage .ffcw-fb__bubble {
		min-width: 180px;
		max-width: 240px;
	}
	.ffcw-fb__image { width: 76px; height: 76px; }
}

@media (max-width: 767px) {
	.ffcw-fb__stage .ffcw-fb__bubble {
		min-width: 160px;
		max-width: 220px;
	}
	.ffcw-fb__image { width: 64px; height: 64px; }
}

/* ── Hidden templates ─────────────────────────────────── */
.ffcw-fb__templates {
	display: none !important;
}