.ot10-wrap {
	--ot10-radius: 8px;
	margin: 28px 0;
	color: #fff;
}

/* ---------- Header row ---------- */
.ot10-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 4px 12px 0;
}
.ot10-title {
	font-size: 19px;
	font-weight: 700;
	margin: 0;
	color: inherit;
}
.ot10-view-all {
	font-size: 14px;
	font-weight: 600;
	color: #cfcfcf;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
}
.ot10-view-all:hover { color: #fff; }
.ot10-view-all span { font-size: 18px; line-height: 1; transform: translateY(-1px); }

/* ---------- Track ---------- */
/* Right-bleed: card row seedha browser ke right edge tak jaata hai (JioHotstar
   jaisa). Agar theme RTL hai ya layout alag hai, ye line hata dein. */
.ot10-outer {
	position: relative;
	margin-right: calc(50% - 50vw);
}

.ot10-track {
	display: flex;
	gap: 26px; /* thoda zyada gap taaki bade number ke liye jagah bane */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 4px 12px 40px; /* left padding taaki pehle number/poster screen edge se sahi doori par rahe */
}
.ot10-track::-webkit-scrollbar { display: none; }

/* ---------- Card ---------- */
/* Poster 780x1170 (2:3) recommended — percentage-width isliye har screen par
   shape/ratio same rehta hai, sirf count adjust hota hai. */
.ot10-card {
	position: relative;
	flex: 0 0 calc((100% - 6 * 26px) / 7);
	width: calc((100% - 6 * 26px) / 7);
	scroll-snap-align: start;
	text-decoration: none;
	display: block;
}
@media (min-width: 1300px) {
	.ot10-card {
		flex: 0 0 calc((100% - 7 * 26px) / 8);
		width: calc((100% - 7 * 26px) / 8);
	}
}

.ot10-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: var(--ot10-radius);
	overflow: hidden;
	background: #1a1a1a;
	box-shadow: 0 4px 10px rgba(0,0,0,.35);
	transition: transform .2s ease;
}
.ot10-card:hover .ot10-card-media {
	transform: translateY(-4px) scale(1.03);
}

.ot10-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.ot10-card-noimg {
	background: linear-gradient(135deg,#333,#111);
}

/* ---------- Bada rank number ---------- */
/* Number apne hi poster ke lower-left hisse ke UPAR (z-index se) overlap karta
   hai — bilkul JioHotstar/Netflix Top 10 row jaisa: bold, white fill + dark
   outline. Poster ko chhota NAHI kiya gaya — number bas uske upar baith jaata
   hai. Vertical overflow issues (horizontal-scroll track ke andar) se bachne
   ke liye number card ke apne box ke andar hi rehta hai (neeche/upar overflow
   nahi karta), sirf thoda left me (card ke gap wali jagah me) nikal jaata hai.
   */
.ot10-rank-number {
	position: absolute;
	left: -10px;
	bottom: 6px;
	z-index: 2;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 900;
	font-size: clamp(38px, 7vw, 84px);
	color: #f5f5f5;
	-webkit-text-stroke: 2px #000;
	paint-order: stroke fill;
	text-shadow: 0 4px 10px rgba(0,0,0,.6);
	pointer-events: none;
	user-select: none;
}

/* ---------- Arrows ---------- */
.ot10-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;
}
.ot10-arrow-left { left: 4px; }
.ot10-arrow-right { right: 4px; }

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

.ot10-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) {
	.ot10-outer:hover .ot10-edge-fade { opacity: 1; }
}

/* ---------- Mobile: exact 3 visible, chhota gap ---------- */
@media (max-width: 599px) {
	.ot10-outer { margin-right: 0; }

	.ot10-track {
		margin: 0 -12px;
		padding-left: 40px; /* pehle card/number ko screen ke left edge se thoda aur andar (right ki taraf) rakhne ke liye */
		padding-right: 12px;
		gap: 16px;
	}
	.ot10-card {
		flex: 0 0 calc((100% - 2 * 16px) / 3);
		width: calc((100% - 2 * 16px) / 3);
	}
	.ot10-rank-number {
		left: -8px;
		bottom: 4px;
		-webkit-text-stroke: 1.4px #000;
	}
}