.ott-carousel-wrap {
	--ott-radius: 8px;
	--ott-hot: #e50914;
	--ott-quality: #00E887;
	margin: 28px 0;
	color: #fff;
}

/* ---------- Header row: Title (left) + View All (right), JioHotstar style ---------- */
.ott-carousel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 4px 12px 0; /* left margin hataya — title ab card row ke bilkul left-align me hai */
}

.ott-carousel-title {
	font-size: 19px; /* fallback — Settings > OTT Carousel se admin isko override kar sakta hai */
	font-weight: 700;
	margin: 0;
	color: inherit;
}

.ott-view-all {
	font-size: 14px;
	font-weight: 600;
	color: #cfcfcf;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
	transition: color .15s ease;
}
.ott-view-all:hover { color: #fff; }
.ott-view-all span { font-size: 18px; line-height: 1; transform: translateY(-1px); }

/* ---------- Carousel track ---------- */
/* RIGHT-BLEED: sirf card row (title/header nahi) ko theme ke content-container ki
   right padding/edge ignore karke seedha browser viewport ke right edge tak le
   jaata hai — bilkul JioHotstar jaisa (koi "block"/hard-stop nahi, last card
   viewport edge par naturally partially cut dikhti hai, jaisa reference screenshot
   me tha). Agar aapki site RTL hai ya theme ka layout center me nahi hai, to
   margin-right wali line hata dein. */
.ott-carousel-outer {
	position: relative;
	margin-right: calc(50% - 50vw);
}

.ott-carousel-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 4px 12px 4px;
}
.ott-carousel-track::-webkit-scrollbar { display: none; }

/* ---------- Card sizing ----------
   Poster ka asli/recommended size 780 x 1170 px hai (ratio 2:3). Card ki WIDTH is
   ratio ko exactly match karti hai (aspect-ratio: 2/3 neeche .ott-card-media par),
   isliye agar aap poster 780x1170 (ya isi 2:3 ratio) me upload karein to CROP
   BILKUL NAHI HOGA — poori poster fit ho jaati hai.
   Width khud percentage-based hai taaki alag-alag screen (9", 14", bada monitor)
   par bhi HAMESHA lagbhag 7-8 cards ek row me dikhein — bina kisi cheez ko
   stretch/squeeze/crop kiye, sirf proportion wahi rehta hai. */
.ott-card {
	position: relative;
	flex: 0 0 calc((100% - 6 * 12px) / 7); /* default: ~7 cards */
	width: calc((100% - 6 * 12px) / 7);
	scroll-snap-align: start;
	text-decoration: none;
	display: block;
}

/* Bade (14"+ jaise wide) screens par ~8 cards */
@media (min-width: 1300px) {
	.ott-card {
		flex: 0 0 calc((100% - 7 * 12px) / 8);
		width: calc((100% - 7 * 12px) / 8);
	}
}

.ott-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3; /* = 780 : 1170, poster ke recommended size se match karta hai */
	border-radius: var(--ott-radius);
	overflow: hidden;
	background: #1a1a1a;
	box-shadow: 0 4px 10px rgba(0,0,0,.35);
	transition: transform .2s ease;
}
.ott-card:hover .ott-card-media {
	transform: translateY(-4px) scale(1.03);
}

/* Agar poster EXACTLY 780x1170 (ya 2:3 ratio) me upload ki gayi ho, to "cover" yahan
   koi bhi cropping NAHI karega — dono ratio match karte hain, bas clean scale hoga.
   object-position: top rakha hai taaki agar kisi image ka ratio thoda bhi mismatch ho
   to upar ka hissa (chehra) kabhi na kate, sirf neeche se thoda adjust ho. */
.ott-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.ott-card-noimg {
	background: linear-gradient(135deg,#333,#111);
}

/* HOT ribbon - top left */
.ott-badge-hot {
	position: absolute;
	top: 10px;
	left: -6px;
	background: var(--ott-hot);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .5px;
	padding: 3px 10px;
	border-radius: 3px;
	z-index: 3;
	line-height: 1.4;
}

/* Quality badge (4K/HD/etc) - top left pill */
.ott-badge-quality {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--ott-quality);
	color: #04310f;
	font-size: 10px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 20px;
	z-index: 3;
	white-space: nowrap;
	line-height: 1.4;
	display: inline-block;
}
/* if HOT ribbon is also present, push quality badge down so they don't overlap */
.ott-badge-hot + .ott-badge-quality {
	top: 42px;
}

.ott-badge-row-bottom {
	position: absolute;
	bottom: 8px;
	left: 8px;
	display: flex;
	gap: 4px;
	z-index: 3;
}
.ott-badge-pill {
	background: rgba(0,0,0,.65);
	border: 1px solid rgba(255,255,255,.4);
	color: #fff;
	font-size: 9px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 10px;
	text-transform: uppercase;
}

.ott-card-overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 26px 8px 8px 8px;
	background: linear-gradient(to top, rgba(0,0,0,.9) 10%, rgba(0,0,0,0) 100%);
	z-index: 2;
}

.ott-card-label {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #ffd36e;
	margin-bottom: 2px;
}

.ott-card-title {
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ott-card-subinfo {
	font-size: 10px;
	color: #cfcfcf;
	margin-top: 2px;
}

/* ---------- Arrows: hidden by default, fade in on hover (desktop) — JioHotstar style ---------- */
.ott-arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(20,20,20,.85);
	border: 1px solid rgba(255,255,255,.15);
	color: #fff;
	cursor: pointer;
	z-index: 6;
	font-size: 15px;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}
.ott-arrow-left { left: 4px; }
.ott-arrow-right { right: 4px; }

@media (hover: hover) and (min-width: 900px) {
	.ott-arrow { display: flex; }
	.ott-carousel-outer:hover .ott-arrow {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Right-edge fade so the next card looks like it "continues" off-screen, like Hotstar */
.ott-edge-fade {
	position: absolute;
	top: 0; right: 0; bottom: 12px;
	width: 60px;
	background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.55));
	pointer-events: none;
	z-index: 4;
	opacity: 0;
	transition: opacity .18s ease;
}
@media (hover: hover) and (min-width: 900px) {
	.ott-carousel-outer:hover .ott-edge-fade { opacity: 1; }
}

/* Mobile: full-width edge-to-edge swipe like a native app. 3 cards pura dikhte
   hain aur 4th card ka thoda hissa (peek) daaye taraf dikhta hai — taaki user ko
   pata chale ki aur bhi cards hain (Netflix/Hotstar app jaisa scroll-hint). */
@media (max-width: 599px) {
	.ott-carousel-outer { margin-right: 0; } /* mobile ka apna edge-to-edge tareeka neeche hai */
	.ott-carousel-track {
		margin: 0 -12px;
		padding-left: 12px;
		padding-right: 12px;
		gap: 8px;
	}
	.ott-card {
		flex: 0 0 calc((100% - 2 * 8px) / 3.35);
		width: calc((100% - 2 * 8px) / 3.35);
	}

	/* Settings > OTT Carousel se "Mobile par title chhupayein" ON kiya ho to
	   sirf isi (599px ya kam) screen width par title text hata dete hain —
	   desktop par ye class kabhi apply hi nahi hoti, wahan title hamesha dikhta hai.
	   !important taaki koi bhi theme-level heading CSS ise override na kar paaye. */
	.ott-hide-title-mobile .ott-carousel-title {
		display: none !important;
	}
	.ott-hide-title-mobile .ott-carousel-header {
		justify-content: flex-end !important;
	}
	.ott-hide-title-mobile .ott-header-title-only {
		display: none !important; /* sirf title tha, View All nahi — poora header hi hata do */
	}
}

/* ---------- [ott_badges] shortcode: single post page ke liye badges ----------
   Carousel wale chhote solid-color badge se alag — yahan transparent background
   + silver/white border wala "outline" style use hota hai. */
.ott-badges-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 16px 0;
}
.ott-badge-outline {
	display: inline-block;
	background: transparent;
	border: 1px solid #d9d9d9; /* silver — chahe to #fff kar dein sirf white ke liye */
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 20px;
}