/* ============================================================
   Social Carousel Feed — Frontend CSS v5
   All bugs fixed: scrollbar, arrow z-index, fade, mobile
   ============================================================ */

/* ── Outer wrapper ────────────────────────────────────────── */
.scf-wrapper {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	/* reserve horizontal space for arrows so they don't overlap content */
	padding: 0 52px;
}

/* When arrows hidden, remove padding */
.scf-wrapper:not(.scf-wrapper--arrows) {
	padding: 0;
}

/* ── Fade edge overlays ─────────────────────────────────────
   Must be ABOVE the swiper-outer clip but BELOW the arrows.
   Positioned relative to wrapper, covering the padded zones.
───────────────────────────────────────────────────────────── */
.scf-fade-left,
.scf-fade-right {
	--scf-fade-color: #13132b;
	position: absolute;
	top: 0;
	bottom: 0;              /* don't cover the scrollbar below */
	width: 80px;
	z-index: 8;             /* above swiper-outer(1) below arrows(20) */
	pointer-events: none;
}

.scf-fade-left {
	left: 0;
	background: linear-gradient(to right, var(--scf-fade-color) 0%, transparent 100%);
}

.scf-fade-right {
	right: 0;
	background: linear-gradient(to left, var(--scf-fade-color) 0%, transparent 100%);
}

/* Extend fade to cover scrollbar area too when both active */
.scf-wrapper--fade.scf-wrapper--scrollbar .scf-fade-left,
.scf-wrapper--fade.scf-wrapper--scrollbar .scf-fade-right {
	bottom: 0;
}

/* ── Swiper outer — clips overflow slides ───────────────────
   position:relative so absolute arrows on .scf-wrapper
   remain relative to the full wrapper, not this element.
───────────────────────────────────────────────────────────── */
.scf-swiper-outer {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}

/* ── Navigation arrows ──────────────────────────────────────
   Placed on .scf-wrapper, z-index ABOVE fades (z:8).
───────────────────────────────────────────────────────────── */
.scf-btn-prev,
.scf-btn-next {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	z-index: 20;            /* above fade overlays */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	padding: 0;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease,
	            box-shadow .2s ease, opacity .2s ease;
	/* Keep arrows inside the padding zone */
}

.scf-btn-prev { left: 4px; }
.scf-btn-next { right: 4px; }

.scf-btn-prev svg,
.scf-btn-next svg {
	display: block;
	width: 18px;
	height: 18px;
	pointer-events: none;
	flex-shrink: 0;
}

.scf-btn-prev:hover,
.scf-btn-next:hover {
	background: rgba(255, 255, 255, 0.28);
}

.scf-btn-prev.swiper-button-disabled,
.scf-btn-next.swiper-button-disabled {
	opacity: .25;
	cursor: default;
	pointer-events: none;
}

/* ── Swiper ───────────────────────────────────────────────── */
.scf-swiper {
	overflow: hidden;       /* swiper-outer handles clipping */
	width: 100%;
}

.scf-swiper .swiper-wrapper {
	align-items: stretch;
}

/* ── Scrollbar ──────────────────────────────────────────────
   The scrollbar element lives INSIDE .scf-swiper so Swiper
   can properly calculate drag width. We pull it out visually
   via the .scf-scrollbar-wrap margin trick below.
   BUT: we keep it inside the swiper div and style it static.
───────────────────────────────────────────────────────────── */
.scf-scrollbar-wrap {
	padding: 0 2px;
	margin-top: 18px;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

/* The actual Swiper scrollbar — rendered inside wrapper via JS */
.scf-scrollbar {
	/* override Swiper's absolute positioning */
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	width: 100% !important;
	height: 5px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.12);
	cursor: pointer;
	display: block;
	/* ensure full clickable area */
	touch-action: none;
	user-select: none;
}

.scf-scrollbar .swiper-scrollbar-drag {
	height: 100%;
	border-radius: 5px;
	background: #c9a84c;
	cursor: grab;
	transition: background .15s ease;
	/* Make drag handle easier to grab on touch */
	min-width: 40px;
}

.scf-scrollbar .swiper-scrollbar-drag:hover {
	background: #e0be6a;
}

.scf-scrollbar .swiper-scrollbar-drag:active {
	cursor: grabbing;
	background: #f0cf80;
}

/* ── Card ─────────────────────────────────────────────────── */
.scf-card {
	background: #1a1a2e;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

/* ── Embed wrap ───────────────────────────────────────────── */
.scf-card__embed-wrap {
	flex: 1 1 auto;
	position: relative;
	background: #0d0d1a;
	display: flex;
	align-items: stretch;
	min-height: 380px;
	overflow: hidden;
}

.scf-embed-iframe {
	display: block;
	width: 1px;             /* Instagram embed fix: start at 1px, expand */
	min-width: 100%;
	height: 560px;
	border: none;
	flex-shrink: 0;
}

.scf-embed-iframe--yt {
	background: #000;
	width: 100%;
	min-width: unset;
}

/* ── Card footer (badge only) ─────────────────────────────── */
.scf-card__footer {
	background: #1a1a2e;
	padding: 8px 14px 10px;
	flex-shrink: 0;
}

/* ── Badge ────────────────────────────────────────────────── */
.scf-card__badge {
	display: flex;
	align-items: center;
	gap: 6px;
}

.scf-badge-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e1306c;
	flex-shrink: 0;
}

.scf-badge-text {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	color: #c0c0c0;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ── Placeholder / Error ──────────────────────────────────── */
.scf-placeholder,
.scf-error {
	padding: 24px;
	border: 1.5px dashed rgba(255,255,255,.15);
	border-radius: 8px;
	text-align: center;
	color: rgba(255,255,255,.45);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             Helvetica, Arial, sans-serif;
	font-size: 14px;
	background: rgba(255,255,255,.03);
}

/* ── Autoplay pause indicator ─────────────────────────────── */
.scf-autoplay-toggle {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 15;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	border: 1px solid rgba(255,255,255,.2);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s;
}

.scf-autoplay-toggle:hover {
	background: rgba(0,0,0,.7);
}

.scf-autoplay-toggle svg {
	width: 12px;
	height: 12px;
	display: block;
	pointer-events: none;
}

/* Hide pause icon by default, show play icon */
.scf-autoplay-toggle .scf-icon-pause { display: block; }
.scf-autoplay-toggle .scf-icon-play  { display: none;  }
.scf-autoplay-toggle.is-paused .scf-icon-pause { display: none;  }
.scf-autoplay-toggle.is-paused .scf-icon-play  { display: block; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.scf-wrapper {
		padding: 0 44px;
	}
}

@media (max-width: 767px) {
	.scf-wrapper {
		padding: 0 36px;
	}

	.scf-btn-prev,
	.scf-btn-next {
		width: 30px;
		height: 30px;
	}

	.scf-btn-prev svg,
	.scf-btn-next svg {
		width: 13px;
		height: 13px;
	}

	.scf-fade-left,
	.scf-fade-right {
		width: 36px;
	}
}