/*
 * BeTube OTT widget set styles (widgets/ott-*.php).
 *
 * Third widget set built this way - same architecture as gaming-home.css. Every color
 * here comes from the theme's real Theme Options via CSS variables emitted globally by
 * themes/betube/assets/colors.php (betubepro_load_head()):
 *  - Page canvas background + default text: --btp-ott-body-bg / --btp-ott-body-color,
 *    from Body Background and Body Font color. This is what makes "dark" vs "light" OTT
 *    purely an admin choice instead of two separate fixed builds - change either option
 *    and the whole layout follows.
 *  - Header/nav + "panel" sections (Episode List, Premium band): --btp-ott-nav-bg/
 *    --btp-ott-nav-link and --btp-ott-topbar-bg/--btp-ott-topbar-link, from Navbar
 *    Background/Navbar Link and Topbar Background/Topbar Link.
 *  - Every accent - buttons, badges, progress bars, rank numerals, live pill, genre chips,
 *    the logo mark: --btp-ott-primary/secondary/danger, from Primary/Secondary/Danger.
 *  - Card/row surfaces (no dedicated "card background" Theme Option): --btp-ott-surface,
 *    a slight lightening of --btp-ott-body-bg via color-mix() - same trick as
 *    --btp-gm-surface, keeps cards moving together with Body Background instead of being
 *    frozen at one fixed color.
 * Where a variable feeds a translucent tint, it's declared twice: a static rgba()/hex
 * first as a fallback, then a color-mix() using the real option's variable as the modern
 * override - browsers without color-mix() support just keep the fallback.
 *
 * The literal hex values still visible below are ONLY fallbacks for when a variable is
 * somehow undefined - they are not what actually renders once colors.php's :root block is
 * on the page. Everything here is scoped to these btp-ott-* classes, so none of it can
 * leak onto any other page.
 */
.btp-ott-navbar, .btp-ott-hero, .btp-ott-section, .btp-ott-rail, .btp-ott-detail,
.btp-ott-episode-panel, .btp-ott-membership {
	font-family: var(--btp-ott-font-body, "Figtree", system-ui, sans-serif);
	color: var(--btp-ott-body-color, #f5ead8);
	--btp-ott-surface: color-mix(in srgb, var(--btp-ott-body-bg, #0b0908) 100%, white 7%);
	--btp-ott-surface-2: color-mix(in srgb, var(--btp-ott-body-bg, #0b0908) 100%, white 4%);
	box-sizing: border-box;
}
.btp-ott-navbar { color: var(--btp-ott-nav-link, #f5ead8); }
.btp-ott-section--panel, .btp-ott-episode-panel, .btp-ott-membership {
	color: var(--btp-ott-topbar-link, #f5ead8);
}
/*
 * Same recurring fix as gaming-home.css/youtube-home.css: the theme's own global
 * "a:hover{ color: ... }" rule has higher specificity than a plain class, so every
 * top-level <a> card in this widget set needs an explicit override or it reverts to the
 * theme's default link-hover color/underline on hover.
 */
a.btp-ott-card__link,
a.btp-ott-card__link:hover,
a.btp-ott-card__link:visited,
a.btp-ott-top10-card,
a.btp-ott-top10-card:hover,
a.btp-ott-top10-card:visited,
a.btp-ott-navbar__brand,
a.btp-ott-navbar__brand:hover,
a.btp-ott-navbar__brand:visited,
a.btp-ott-genre-tile,
a.btp-ott-genre-tile:hover,
a.btp-ott-genre-tile:visited,
a.btp-ott-show-card,
a.btp-ott-show-card:hover,
a.btp-ott-show-card:visited,
a.btp-ott-episode-row,
a.btp-ott-episode-row:hover,
a.btp-ott-episode-row:visited,
a.btp-ott-hero__link,
a.btp-ott-hero__link:hover,
a.btp-ott-hero__link:visited,
a.btp-ott-hero__panel,
a.btp-ott-hero__panel:hover,
a.btp-ott-hero__panel:visited,
a.btp-ott-navbar__profile,
a.btp-ott-navbar__profile:hover,
a.btp-ott-navbar__profile:visited,
a.btp-ott-navbar__mylist-btn,
a.btp-ott-navbar__mylist-btn:hover,
a.btp-ott-navbar__mylist-btn:visited,
a.btp-ott-navbar__icon-btn,
a.btp-ott-navbar__icon-btn:hover,
a.btp-ott-navbar__icon-btn:visited,
a.btp-ott-uhd-card,
a.btp-ott-uhd-card:hover,
a.btp-ott-uhd-card:visited,
.btp-ott-navbar__links a,
.btp-ott-navbar__links a:hover,
.btp-ott-navbar__links a:visited {
	color: inherit !important;
	text-decoration: none !important;
}
.btp-ott-navbar *, .btp-ott-hero *, .btp-ott-section *, .btp-ott-rail *, .btp-ott-detail *,
.btp-ott-episode-panel *, .btp-ott-membership * {
	box-sizing: border-box;
}
.btp-ott-hero__title, .btp-ott-section__title, .btp-ott-navbar__logo-text, .btp-ott-detail__title {
	font-family: var(--btp-ott-font-heading, "Caprasimo", system-ui, sans-serif);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
}
@keyframes btp-ott-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.82); }
}

/* ---------- shared atoms ---------- */
.btp-ott-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 0;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 22px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, transform 0.15s;
}
.btp-ott-btn--primary { background: var(--btp-ott-primary, #d98b4a); color: #201004; }
.btp-ott-btn--primary:hover { filter: brightness(1.12); color: #201004; }
.btp-ott-btn--lg { font-size: 16px; padding: 15px 28px; }
.btp-ott-btn--ghost {
	background: color-mix(in srgb, currentColor 10%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	color: var(--btp-ott-body-color, #f5ead8);
}
.btp-ott-btn--ghost:hover { background: color-mix(in srgb, currentColor 18%, transparent); color: var(--btp-ott-body-color, #f5ead8); }
.btp-ott-btn:disabled { opacity: 0.7; cursor: default; }
.btp-ott-chip {
	display: inline-flex;
	align-items: center;
	background: rgba(11, 9, 8, 0.72);
	border: 1px solid rgba(255, 249, 238, 0.32);
	border-radius: 6px;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff9ee;
	backdrop-filter: blur(6px);
}
/* Light text on the accent fill, not dark - this is a small badge sitting over a
   photo (a NEW/4K tag), not a button on a plain background like .btp-ott-btn--primary. */
.btp-ott-chip--accent {
	background: rgba(217, 139, 74, 0.92);
	background: color-mix(in srgb, var(--btp-ott-primary, #d98b4a) 92%, transparent);
	border-color: transparent;
	color: #fff9ee;
}
.btp-ott-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--btp-ott-danger, #c94a3a);
	color: #fff;
	border-radius: 6px;
	padding: 5px 12px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.btp-ott-pulse {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #fff;
	animation: btp-ott-pulse 1.8s ease-in-out infinite;
}
.btp-ott-dot-sep {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 35%, transparent);
	margin: 0 6px;
	vertical-align: middle;
}
.btp-ott-play-circle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: rgba(245, 234, 216, 0.9);
	color: #16110f;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	opacity: 0;
	transition: opacity 0.2s;
}
.btp-ott-card:hover .btp-ott-play-circle { opacity: 1; }
.btp-ott-arrow-pair { display: flex; gap: 8px; }
.btp-ott-arrow-btn {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	background: color-mix(in srgb, currentColor 6%, transparent);
	color: currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.btp-ott-arrow-btn:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
/* Progress bar used on Continue Watching cards - width is set inline per card from
   stored watch-progress data (see includes/ott-shared.php). */
.btp-ott-progress { position: relative; height: 3px; background: color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.btp-ott-progress__fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--btp-ott-primary, #d98b4a); border-radius: 999px; }

/* ---------- Navbar ---------- */
.btp-ott-navbar {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 26px;
	background: rgba(11, 9, 8, 0.92);
	background: color-mix(in srgb, var(--btp-ott-nav-bg, #0b0908) 92%, transparent);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
	padding: 14px 32px;
}
.btp-ott-navbar__brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; flex-shrink: 0; }
.btp-ott-navbar__logo-img { max-height: 30px; width: auto; }
/* Circular gradient badge + play glyph, matching the reference exactly instead of
   the earlier rounded-square mark. */
.btp-ott-navbar__logo-mark {
	width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
	background: linear-gradient(150deg, var(--btp-ott-primary, #d98b4a), color-mix(in srgb, var(--btp-ott-primary, #d98b4a) 70%, black));
	display: flex; align-items: center; justify-content: center; color: #fff9ee; font-size: 12px;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--btp-ott-primary, #d98b4a) 35%, transparent);
}
.btp-ott-navbar__logo-text { font-size: 20px; letter-spacing: 0.2px; }
.btp-ott-navbar__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; font-size: 14.5px; font-weight: 600; }
.btp-ott-navbar__links::-webkit-scrollbar { display: none; }
/* Bug (fixed): this used to hardcode a translucent cream (rgba(245,234,216,0.68))
   for the regular link state - fine on a dark canvas, nearly invisible on a light
   one (Navbar Link theme option was never actually consulted here). Uses the real
   --btp-ott-nav-link variable now, dimmed with opacity instead of a literal color
   so it still reads as "unfocused" on either theme. */
.btp-ott-navbar__links a { padding: 4px 0; font-weight: 600; color: var(--btp-ott-nav-link, #f5ead8); opacity: 0.68; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.btp-ott-navbar__links a:hover { color: var(--btp-ott-nav-link, #f5ead8); opacity: 1; }
.btp-ott-navbar__links a.is-active { color: var(--btp-ott-nav-link, #f5ead8); opacity: 1; font-weight: 700; }
.btp-ott-navbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; }
/* Icon-only circular buttons - Upload, Search toggle, Sign-in, and the notification
   bell all share this shape, matching the reference's icon-button treatment instead
   of the earlier text "Upload"/"Sign in" buttons. */
.btp-ott-navbar__icon-btn {
	width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	background: var(--btp-ott-nav-bg, #0b0908);
	color: var(--btp-ott-nav-link, #f5ead8);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; text-decoration: none; font-size: 14px;
}
.btp-ott-navbar__icon-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btp-ott-navbar__bell { position: relative; }
.btp-ott-navbar__bell-dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--btp-ott-danger, #c94a3a); border: 2px solid var(--btp-ott-nav-bg, #0b0908); }
.btp-ott-navbar__lang-btn {
	height: 36px; padding: 0 12px; border-radius: 999px;
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	background: var(--btp-ott-nav-bg, #0b0908);
	color: var(--btp-ott-nav-link, #f5ead8);
	font-size: 13px; font-weight: 600;
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.btp-ott-navbar__lang-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btp-ott-navbar__mylist-btn {
	height: 36px; padding: 0 14px; border-radius: 999px;
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	background: var(--btp-ott-nav-bg, #0b0908);
	color: var(--btp-ott-nav-link, #f5ead8);
	font-size: 13px; font-weight: 700;
	display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none;
}
.btp-ott-navbar__mylist-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btp-ott-navbar__profile { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; overflow: hidden; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--btp-ott-primary, #d98b4a) 55%, transparent); }
.btp-ott-navbar__profile img { width: 100%; height: 100%; object-fit: cover; }
/* Search is icon-triggered (reference has no permanently-visible search bar) - this
   drops down below the header, full width, when .btp-ott-navbar__search-toggle is
   clicked (see initSearchToggle() in ott-home.js). */
.btp-ott-navbar__search {
	display: none; align-items: center; gap: 10px;
	position: absolute; top: 100%; left: 0; right: 0;
	background: var(--btp-ott-nav-bg, #0b0908);
	border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
	padding: 14px clamp(18px, 4vw, 32px);
	color: color-mix(in srgb, currentColor 55%, transparent);
}
.btp-ott-navbar__search.is-open { display: flex; }
.btp-ott-navbar__search input { all: unset; flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--btp-ott-nav-link, #f5ead8); }
@media (max-width: 900px) {
	.btp-ott-navbar__links { order: 3; flex-basis: 100%; }
}

/* ---------- Cinematic Hero (rotating slides) ---------- */
/* Rebuilt to match the reference: a plain page-background section holding a
   two-column grid (text + a boxed image panel), not a full-bleed background
   photo with overlaid text like the original build. */
.btp-ott-hero { position: relative; background: var(--btp-ott-body-bg, #0b0908); padding: 54px 32px 46px; }
/* The Elementor editor floats its own "Add/Edit/Delete Container" hover toolbar over
   whichever element is being hovered/selected. When that element sits inside
   .btp-ott-hero, this section's overflow:hidden (here only to keep the absolutely-
   positioned background image/scrim from spilling past the hero's edges - harmless to
   relax) was clipping that toolbar so its icons never actually rendered - the "Elementor
   cross button colors problem" reported while editing this widget. Elementor marks its
   own preview <body> with .elementor-editor-active, so this only loosens overflow while
   actively editing; the real frontend keeps overflow:hidden exactly as before. */
body.elementor-editor-active .btp-ott-hero { overflow: visible; }
/*
 * Same family of bug: the small pink "Add/Edit/Delete Container" toolbar Elementor
 * floats over whichever section is hovered/selected is a plain <ul><li> list. Elementor
 * ships its own list-style:none reset for it, but on this page that reset isn't winning
 * (the arrow-clipping bug above was one cause; this looks like a separate cascade/
 * load-order issue) - so the browser's own default bullet renders as a solid black
 * circle in front of each icon. This forces the reset back on with !important,
 * regardless of what's fighting it upstream. Only targets Elementor's own class names,
 * so it can't affect anything else on the page.
 */
body.elementor-editor-active .elementor-editor-element-settings,
body.elementor-editor-active .elementor-editor-element-settings li {
	list-style: none !important;
	margin: 0 !important;
}
body.elementor-editor-active .elementor-editor-element-settings li::marker,
body.elementor-editor-active .elementor-editor-element-settings li::before {
	content: none !important;
	display: none !important;
}
.btp-ott-hero__slide { display: none; }
.btp-ott-hero__slide.is-active { display: block; animation: btp-ott-fade-in 0.5s ease both; }
@keyframes btp-ott-fade-in { from { opacity: 0; } to { opacity: 1; } }
.btp-ott-hero__grid {
	max-width: 1520px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(28px, 4vw, 58px); align-items: center;
}
.btp-ott-hero__tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.btp-ott-hero__badge {
	display: inline-flex; align-items: center; gap: 7px;
	background: color-mix(in srgb, var(--btp-ott-primary, #d98b4a) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--btp-ott-primary, #d98b4a) 40%, transparent);
	color: var(--btp-ott-primary, #d98b4a);
	border-radius: 999px; padding: 5px 12px;
	font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.btp-ott-hero__kind { font-size: 13px; font-weight: 700; color: color-mix(in srgb, currentColor 65%, transparent); letter-spacing: 0.06em; }
.btp-ott-hero__title { font-size: clamp(40px, 5.2vw, 76px); line-height: 0.96; margin: 0 0 18px; letter-spacing: -0.5px; }
.btp-ott-hero__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; font-size: 14.5px; font-weight: 600; color: color-mix(in srgb, currentColor 78%, transparent); }
.btp-ott-hero__rating { display: inline-flex; align-items: center; gap: 5px; color: var(--btp-ott-primary, #d98b4a); font-weight: 800; }
.btp-ott-hero__rating i { color: #d9a441; font-size: 12px; }
.btp-ott-hero__meta-dot { opacity: 0.35; }
.btp-ott-hero__pill { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 6px; padding: 1px 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.btp-ott-hero__desc { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.62; color: color-mix(in srgb, currentColor 78%, transparent); margin: 0 0 26px; max-width: 540px; }
.btp-ott-hero__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btp-ott-hero__btn {
	display: inline-flex; align-items: center; gap: 9px;
	border-radius: 999px; padding: 14px 26px;
	font-size: 15.5px; font-weight: 800; border: 0; cursor: pointer; text-decoration: none;
}
/* !important here because these sit on an <a> (Watch Now) and need to survive the
   broad "a.btp-ott-hero__btn { color: inherit !important }" reset above, which
   itself exists only to beat the theme's higher-specificity global a:hover rule. */
.btp-ott-hero__btn--primary { background: var(--btp-ott-primary, #d98b4a); color: #fff9ee !important; }
.btp-ott-hero__btn--primary:hover { filter: brightness(0.92); color: #fff9ee !important; }
.btp-ott-hero__btn--ghost {
	background: var(--btp-ott-body-bg, #0b0908);
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	color: var(--btp-ott-body-color, #f5ead8) !important;
	font-family: var(--btp-ott-font-body, "Figtree", system-ui, sans-serif);
	padding: 14px 24px;
}
.btp-ott-hero__btn--ghost:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.btp-ott-hero__btn--ghost.is-active { color: var(--btp-ott-primary, #d98b4a) !important; }
/* Text-only "Trailer"/"More Info" links - no background/border, matching the
   reference (only "Watch Now" is a filled pill, "Add to My List" a bordered one). */
.btp-ott-hero__link { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in srgb, currentColor 78%, transparent) !important; font-size: 14.5px; font-weight: 700; padding: 14px 10px; text-decoration: none !important; }
.btp-ott-hero__link:hover { color: var(--btp-ott-primary, #d98b4a) !important; }
.btp-ott-hero__dots { display: flex; align-items: center; gap: 10px; margin-top: 36px; max-width: 1520px; padding: 0 32px; margin-left: auto; margin-right: auto; }
.btp-ott-hero__dot { width: 22px; height: 3px; border-radius: 999px; background: color-mix(in srgb, currentColor 30%, transparent); border: 0; cursor: pointer; padding: 0; }
.btp-ott-hero__dot.is-active { background: var(--btp-ott-primary, #d98b4a); }
.btp-ott-hero__counter { margin-left: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; color: color-mix(in srgb, currentColor 55%, transparent); }
/* Boxed image panel, right column - a real card with its own shadow/border/radius,
   not a full-bleed background behind the text. */
.btp-ott-hero__panel {
	position: relative; display: block; aspect-ratio: 16/9; border-radius: 30px; overflow: hidden;
	border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
	background: var(--btp-ott-surface, #f0e6d8);
	box-shadow: 0 22px 54px rgba(0,0,0,0.18);
}
.btp-ott-hero__panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.btp-ott-hero__panel-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,9,8,0.4), transparent 55%); }
.btp-ott-hero__panel-play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.btp-ott-hero__panel-play i {
	width: 74px; height: 74px; border-radius: 999px; background: rgba(255,255,255,0.92);
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 30px rgba(11,9,8,0.3); color: #201e1d; font-size: 24px;
}
.btp-ott-hero__panel-caption {
	position: absolute; left: 18px; bottom: 16px;
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.94); border-radius: 999px; padding: 6px 14px;
	font-size: 12.5px; font-weight: 800; color: #201e1d;
}

/* ---------- Section shell ---------- */
.btp-ott-section { padding: 48px 32px; background: var(--btp-ott-body-bg, #0b0908); }
.btp-ott-section > * { max-width: 1520px; margin-left: auto; margin-right: auto; }
.btp-ott-section--panel {
	background: var(--btp-ott-topbar-bg, #14100e);
	border-top: 1px solid color-mix(in srgb, currentColor 6%, transparent);
	border-bottom: 1px solid color-mix(in srgb, currentColor 6%, transparent);
}
.btp-ott-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.btp-ott-section__eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--btp-ott-primary, #d98b4a); margin-bottom: 6px; }
.btp-ott-section__title { font-size: clamp(22px, 2.6vw, 30px); }
/* !important: needs to survive the theme's higher-specificity global a:hover rule,
   same reason as every other themed link color in this file. */
.btp-ott-section__link { font-size: 13.5px; font-weight: 700; color: var(--btp-ott-primary, #d98b4a) !important; text-decoration: none !important; }
.btp-ott-section__link:hover { text-decoration: underline !important; }
/* Top 10's "title —— Updated daily by views" treatment - a divider line filling
   the gap between the heading and a small caption on the same row. */
.btp-ott-section__head--divider { align-items: center; flex-wrap: nowrap; }
.btp-ott-section__divider { flex: 1 1 auto; height: 1px; background: color-mix(in srgb, currentColor 20%, transparent); margin: 0 18px; }
.btp-ott-section__caption { flex: 0 0 auto; font-size: 13px; color: color-mix(in srgb, currentColor 55%, transparent); white-space: nowrap; }

/* ---------- Rails (Trending, Continue Watching, New Releases, Just Added, My List) ---------- */
.btp-ott-rail-wrap { position: relative; }
.btp-ott-rail { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 10px; scroll-snap-type: x mandatory; }
.btp-ott-rail::-webkit-scrollbar { display: none; }
/* 2:3 poster shape (matching the reference's card anatomy everywhere, not just Top
   10) - narrower than the old 16:9 video-card width since a portrait card needs
   less horizontal space per item. */
.btp-ott-card { position: relative; display: block; flex: 0 0 auto; width: clamp(190px, 13vw, 200px); scroll-snap-align: start; }
.btp-ott-card__link { display: block; text-decoration: none; color: inherit; }
.btp-ott-card__thumb { position: relative; display: block; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; background: var(--btp-ott-surface, #14100e); border: 1px solid color-mix(in srgb, currentColor 8%, transparent); transition: transform 0.2s; }
.btp-ott-card:hover .btp-ott-card__thumb { transform: scale(1.035); border-color: color-mix(in srgb, currentColor 25%, transparent); }
.btp-ott-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.btp-ott-card__badge { position: absolute; left: 8px; top: 8px; }
/* Rating sits top-right, offset left of the My List toggle (also top-right) so
   they never overlap - see .btp-ott-card__mylist-btn below. */
.btp-ott-card__rating {
	position: absolute; right: 44px; top: 8px; z-index: 1;
	display: inline-flex; align-items: center; gap: 4px;
	background: rgba(11, 9, 8, 0.78); color: #fff9ee;
	border-radius: 6px; padding: 3px 7px; font-size: 11px; font-weight: 700;
}
.btp-ott-card__rating i { color: #d9a441; font-size: 10px; }
.btp-ott-card__rank {
	position: absolute;
	left: 8px;
	bottom: 8px;
	background: rgba(11, 9, 8, 0.78);
	color: #fff9ee;
	border-radius: 6px;
	padding: 3px 8px;
	font-size: 44px;
	font-weight: 800;
	font-family: var(--btp-ott-font-heading, "Caprasimo", system-ui, sans-serif);
	letter-spacing: 0.03em;
	line-height:0.8;
	text-shadow:rgba(11, 9, 8, 0.9) 0px 3px 18px;
}
.btp-ott-card__duration { position: absolute; right: 8px; bottom: 8px; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.btp-ott-card__body { padding: 10px 2px 0; }
.btp-ott-card__title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.btp-ott-card__sub { display: block; font-size: 12px; color: color-mix(in srgb, currentColor 50%, transparent); }
.btp-ott-card__sub-rating { color: var(--btp-ott-primary, #d98b4a); font-weight: 700; }
.btp-ott-card__sub-rating i { font-size: 10px; margin-right: 2px; }
/* My List add/remove toggle - overlaid on the thumb's top-right corner, opposite the
   category badge (top-left) so they never collide. */
.btp-ott-card__mylist-btn {
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 2;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 0;
	background: rgba(11, 9, 8, 0.68);
	color: #f5ead8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	cursor: pointer;
}
.btp-ott-card__mylist-btn:hover { background: rgba(11, 9, 8, 0.9); }
.btp-ott-card__mylist-btn.is-active { background: var(--btp-ott-primary, #d98b4a); color: #201004; }

/* ---------- Just Added's overlay card (title/meta inside the image, not below it -
   confirmed from the reference, distinct from every other rail's card layout).
   Bug (fixed): display:flex here turned the image/scrim/badges/title into stacked
   flex items sharing the box's height instead of overlaid absolute layers, so the
   image shrank and left solid surface-colored space for the title bar underneath -
   this is a plain absolute-positioning stack like every other card overlay in this
   file, no flex needed. */
.btp-ott-card__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,9,8,0.86), transparent 52%); }
.btp-ott-card__badges { position: absolute; left: 10px; top: 10px; z-index: 1; display: flex; gap: 5px; flex-wrap: wrap; }
.btp-ott-card__overlay-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 12px 12px; color: #fff9ee; }
.btp-ott-card__overlay-title { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.btp-ott-card__overlay-sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: rgba(255,249,238,0.8); }

/* ---------- Top 10 (large outlined rank numeral) ---------- */
.btp-ott-top10-card { position: relative; display: flex; align-items: flex-end; flex: 0 0 auto; width: clamp(230px, 22vw, 300px); text-decoration: none; color: inherit; scroll-snap-align: start; }
.btp-ott-top10-card__rank {
	font-family: var(--btp-ott-font-heading, "Caprasimo", system-ui, sans-serif);
	font-size: clamp(70px, 8vw, 108px);
	line-height: 0.8;
	/* Stroke uses body-COLOR (the opposite tone from the fill's body-BG) so the
	   numeral always has a visible outline - using currentColor/body-bg here would
	   make the stroke match the fill exactly, erasing the outline entirely. */
	-webkit-text-stroke: 2px color-mix(in srgb, var(--btp-ott-body-color, #f5ead8) 70%, transparent);
	color: transparent;
	color: var(--btp-ott-body-bg, #0b0908);
	-webkit-text-fill-color: var(--btp-ott-body-bg, #0b0908);
	margin-right: -18px;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}
.btp-ott-top10-card__thumb { position: relative; flex: 1 1 auto; min-width: 0; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; background: var(--btp-ott-surface, #14100e); border: 1px solid color-mix(in srgb, currentColor 8%, transparent); }
.btp-ott-top10-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Genres grid ---------- */
/* Carousel, not a wrapping grid - same .btp-ott-rail-wrap/.btp-ott-rail shell as the
   other rails (Trending, New Releases, Recommended, My List, 4K, Continue Watching),
   with a fixed tile width so it scrolls instead of wrapping to new rows. */
.btp-ott-genre-tile { position: relative; display: block; flex: 0 0 auto; width: clamp(200px, 18vw, 260px); aspect-ratio: 3/2; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, var(--btp-ott-tile-accent, #3a281c) 0%, var(--btp-ott-surface, #14100e) 80%); border: 1px solid color-mix(in srgb, currentColor 8%, transparent); scroll-snap-align: start; }
/* Reference treats the tile image as a soft backdrop, not a sharp photo - desaturated,
   dimmed and slightly blurred so the title reads clearly over any thumbnail. */
.btp-ott-genre-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) contrast(1.04) brightness(0.7) blur(1px); transform: scale(1.03); }
.btp-ott-genre-tile__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(11, 9, 8, 0.9), rgba(11, 9, 8, 0.4));
}
.btp-ott-genre-tile__row {
	position: absolute; left: 14px; right: 14px; bottom: 14px;
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.btp-ott-genre-tile__name { font-size: 16px; font-weight: 800; color: #ffffff; }
.btp-ott-genre-tile__count { font-size: 12px; font-weight: 700; color: rgba(255,249,238,0.75); white-space: nowrap; }
#genres.btp-ott-section { border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }

/* ---------- CTA band background helper ---------- */
/* Not a widget - add an Elementor Section, then in its Advanced tab > CSS Classes
   type "btp-ott-cta-band" to get this exact reference background (a two-layer
   radial gradient over a cream base - more than Elementor free's own Background
   panel can do in one layer), then build the heading/text/buttons inside it with
   native Elementor widgets. Fixed light-theme literals on purpose - this band is
   always the cream/orange reference treatment regardless of Body Background. */
.btp-ott-cta-band {
	position: relative;
	overflow: hidden;
	border-radius: 34px;
	border: 1px solid rgba(198,113,57,0.32);
	background:
		radial-gradient(70% 120% at 88% 20%, rgba(217,139,74,0.3), transparent 62%),
		radial-gradient(60% 110% at 8% 90%, rgba(122,138,94,0.26), transparent 60%),
		#fdf7f0;
	padding: clamp(34px, 5vw, 74px) clamp(24px, 4vw, 64px);
}
.btp-ott-cta-band .btp-ott-cta-band__eyebrow { color: #a2551f; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.btp-ott-cta-band h1, .btp-ott-cta-band h2, .btp-ott-cta-band h3 { font-family: "Caprasimo", serif; color: #201e1d; line-height: 1.02; }
.btp-ott-cta-band p { color: #4a443d; }

/* ---------- 4K Ultra HD ---------- */
.btp-ott-uhd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.btp-ott-uhd-head .btp-ott-section__title { margin: 0; }
.btp-ott-uhd-badges { display: inline-flex; gap: 6px; }
.btp-ott-uhd-pill { border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 7px; padding: 3px 8px; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; }
.btp-ott-uhd-note { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, currentColor 55%, transparent); }
a.btp-ott-uhd-card { flex: 0 0 auto; width: clamp(280px, 26vw, 400px); color: #fff9ee; display: block; }
.btp-ott-uhd-card__thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; background: var(--btp-ott-surface, #14100e); border: 1px solid color-mix(in srgb, currentColor 10%, transparent); box-shadow: 0 8px 22px rgba(0,0,0,0.16); }
.btp-ott-uhd-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.04) brightness(0.9); }
.btp-ott-uhd-card__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,9,8,0.88), transparent 58%); }
.btp-ott-uhd-card__body { position: absolute; left: 16px; right: 16px; bottom: 14px; }
.btp-ott-uhd-card__title { display: block; font-family: var(--btp-ott-font-heading, "Caprasimo", system-ui, sans-serif); font-weight: 400; font-size: 22px; color: #fff9ee; }
.btp-ott-uhd-card__sub { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: rgba(255,249,238,0.85); }

/* ---------- Genre filter pills (Popular Movies) ---------- */
.btp-ott-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.btp-ott-filter-pill { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); color: inherit; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btp-ott-filter-pill.is-active { background: var(--btp-ott-primary, #d98b4a); color: #201004; border-color: transparent; }
.btp-ott-movies-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
/* Popular Movies is a real client-side tabber: every genre's card set is
   pre-rendered into its own panel on page load, and switching genres just
   toggles which panel is visible - no AJAX round trip. See initGenreTabs() in
   ott-home.js. */
.btp-ott-movies-grid[data-tab-panel] { display: none; }
.btp-ott-movies-grid[data-tab-panel].is-active { display: grid; }

/* ---------- Popular TV Shows + Episode List (season tabs) ---------- */
/* Rebuilt to match the reference: large overlay cards (full-bleed thumbnail, dark
   scrim, content anchored to the bottom), not small square tiles. Note the <a>
   itself is the flex column here (not a separate ".thumb" box) - img/scrim/badges
   are all position:absolute (taken out of flex flow), leaving exactly one normal-
   flow child (".btp-ott-show-card__body") for justify-content:flex-end to push to
   the bottom. This is the safe version of the trick that broke Just Added's card
   (there, multiple non-absolute children were competing for space instead). */
.btp-ott-shows-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }
/* !important: this is an <a> that needs to survive the broad
   "a.btp-ott-show-card { color: inherit !important }" reset above (itself needed
   to beat the theme's higher-specificity global a:hover rule) - without it, the
   card's text would inherit the section's body-color (dark, on a light theme)
   instead of the light color it needs for legibility over its own dark scrim. */
.btp-ott-show-card {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 300px; border-radius: 26px; overflow: hidden;
	border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
	color: #fff9ee !important; padding: 26px; text-decoration: none;
	box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}
.btp-ott-show-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.btp-ott-show-card__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,9,8,0.94) 6%, rgba(11,9,8,0.5) 55%, rgba(11,9,8,0.14) 100%); }
.btp-ott-show-card__badges { position: absolute; left: 22px; top: 20px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.btp-ott-show-card__season-badge {
	background: color-mix(in srgb, var(--btp-ott-primary, #d98b4a) 28%, transparent);
	border: 1px solid color-mix(in srgb, var(--btp-ott-primary, #d98b4a) 50%, transparent);
	color: #f7d5b3; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800;
}
.btp-ott-show-card__body { position: relative; z-index: 1; display: block; }
.btp-ott-show-card__title { color:#ffffff; display: block; font-family: var(--btp-ott-font-heading, "Caprasimo", system-ui, sans-serif); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.02; }
.btp-ott-show-card__meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: rgba(255,249,238,0.85); }
.btp-ott-show-card__rating { color: #f0c193; font-weight: 800; }
.btp-ott-show-card__rating i{
	margin-right:5px;
}
.btp-ott-show-card__dot { opacity: 0.45; }
.btp-ott-show-card__desc { display: block; margin-top: 12px; font-size: 14px; line-height: 1.55; color: rgba(255,249,238,0.8); max-width: 460px; }
.btp-ott-season-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.btp-ott-season-tab { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); color: inherit; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.btp-ott-season-tab.is-active { background: var(--btp-ott-primary, #d98b4a); color: #201004; border-color: transparent; }
/* Rebuilt to match the reference: one boxed, rounded, shadowed panel (its own
   Topbar Background/Topbar Link surface) containing a header row (eyebrow+show
   name on the left, season tabs on the right, same row) and a CSS grid of episode
   cells. The "hairline dividers" between cells are the classic trick - a 1px grid
   gap over a tinted background, with each cell's own background matching the
   panel - not per-row borders/radius/background like the old vertical-list design. */
.btp-ott-episode-panel {
	background: var(--btp-ott-body-bg, #ffffff);
	border-radius: 30px;
	overflow: hidden;
	border: 1px solid rgba(32, 30, 29, 0.1);	
	box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}
.btp-ott-episode-panel__head {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 18px; padding: 26px clamp(20px, 3vw, 34px);
	border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.btp-ott-episode-panel__head .btp-ott-section__eyebrow,
.btp-ott-episode-panel__head .btp-ott-section__title { margin: 0; }
.btp-ott-episode-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 1px;
	background: color-mix(in srgb, currentColor 10%, transparent);
}
.btp-ott-episode-row {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 20px clamp(20px, 3vw, 28px);
	background: var(--btp-ott-body-bg, #ffffff);
	text-decoration: none; color: inherit;
	animation:0.3s both ott-in;
	border-top:1px solid rgba(32, 30, 29, 0.1);
	border-right:1px solid rgba(32, 30, 29, 0.1);
}
.btp-ott-episode-row:hover { background: color-mix(in srgb, currentColor 4%, var(--btp-ott-body-bg, #14100e)); }
.btp-ott-episode-row__thumb { position: relative; width: 132px; flex-shrink: 0; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--btp-ott-surface, #14100e); }
.btp-ott-episode-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.btp-ott-episode-row__dur { position: absolute; right: 6px; bottom: 6px; background: rgba(11, 9, 8, 0.82); border-radius: 6px; padding: 2px 6px; font-size: 10.5px; font-weight: 700; color: #fff9ee; }
.btp-ott-episode-row__meta { min-width: 0; }
.btp-ott-episode-row__code { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--btp-ott-primary, #d98b4a); }
.btp-ott-episode-row__title {
	display: block; margin-top: 5px; font-size: 15px; font-weight: 800; 
}
.btp-ott-episode-row__desc { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, currentColor 65%, transparent);}

/* ---------- Movie Detail Preview ---------- */
/* Always a dark photographic backdrop regardless of Theme Options light/dark
   setting (same reasoning as Just Added/show-card overlays) - so unlike the rest
   of this file, colors here are fixed light-on-dark literals, not currentColor/
   --btp-ott-* tokens. */
.btp-ott-detail__eyebrow { display: block; margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, currentColor 55%, transparent); }
.btp-ott-detail { position: relative; border-radius: 30px; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 10%, transparent); box-shadow: 0 14px 34px rgba(0,0,0,0.22); }
.btp-ott-detail__slide { display: none; position: relative; color: #fff9ee; }
.btp-ott-detail__slide.is-active { display: block; animation: 0.4s both ott-in; }
.btp-ott-detail__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) contrast(1.05) brightness(0.55); }
.btp-ott-detail__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,9,8,0.96) 0%, rgba(11,9,8,0.84) 45%, rgba(11,9,8,0.4) 100%); }
.btp-ott-detail__body { position: relative; display: flex; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3.4vw, 46px); flex-wrap: wrap; }
.btp-ott-detail__poster { width: clamp(150px, 15vw, 214px); flex-shrink: 0; aspect-ratio: 2/3; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,249,238,0.2); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.btp-ott-detail__poster img { width: 100%; height: 100%; object-fit: cover; }
.btp-ott-detail__info { flex: 1; min-width: min(100%, 300px); }
.btp-ott-detail__title { font-size: clamp(28px, 3.2vw, 46px); margin: 0 0 14px; line-height: 1; color: #fff9ee; }
.btp-ott-detail__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: rgba(255,249,238,0.86); margin-bottom: 16px; }
.btp-ott-detail__rating { display: inline-flex; align-items: center; gap: 6px; background: rgba(217,139,74,0.24); border: 1px solid rgba(240,193,147,0.5); border-radius: 999px; padding: 4px 11px; color: #f7d5b3; font-weight: 800; }
.btp-ott-detail__pill { border: 1px solid rgba(255,249,238,0.35); border-radius: 6px; padding: 1px 6px; font-size: 12px; font-weight: 800; }
.btp-ott-detail__desc {
	font-size: 15.5px; line-height: 1.62; color: rgba(255,249,238,0.88) !important;
	margin: 0 0 22px; max-width: 620px;
}
.btp-ott-detail__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
a.btp-ott-detail__btn, a.btp-ott-detail__btn:hover, a.btp-ott-detail__btn:visited,
a.btp-ott-detail__link, a.btp-ott-detail__link:hover, a.btp-ott-detail__link:visited {
	text-decoration: none !important;
}
.btp-ott-detail__btn { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 13px 24px; font-size: 15px; font-weight: 800; border: 0; cursor: pointer; }
.btp-ott-detail__btn--primary { background: #ffffff; color: #201e1d !important; }
.btp-ott-detail__btn--primary:hover { filter: brightness(0.94); color: #201e1d !important; }
.btp-ott-detail__btn--ghost { background: rgba(255,249,238,0.12); border: 1px solid rgba(255,249,238,0.3); color: #fff9ee !important; }
.btp-ott-detail__btn--ghost:hover { background: rgba(255,249,238,0.2); }
.btp-ott-detail__btn--ghost.is-active { color: #f0c193 !important; }
.btp-ott-detail__link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,249,238,0.88) !important; font-size: 14.5px; font-weight: 700; padding: 13px 8px; }
.btp-ott-detail__link:hover { color: #f0c193 !important; }
.btp-ott-detail__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,249,238,0.2); }
.btp-ott-detail__col-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,249,238,0.7) !important; }
.btp-ott-detail__cast { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btp-ott-detail__cast-item { display: flex; align-items: center; gap: 8px; background: rgba(255,249,238,0.12); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 12.5px; font-weight: 700; color: #fff9ee; }
.btp-ott-detail__cast-item img { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
a.btp-ott-detail__cast-more, a.btp-ott-detail__cast-more:hover, a.btp-ott-detail__cast-more:visited { text-decoration: none !important; }
.btp-ott-detail__cast-more { background: transparent; border: 1px solid rgba(255,249,238,0.3); color: #fff9ee !important; }
.btp-ott-detail__cast-more:hover { background: rgba(255,249,238,0.12); }
.btp-ott-detail__director-name { margin: 0; font-size: 14.5px; font-weight: 700; color: #fff9ee; }
.btp-ott-detail__director-studio { margin: 6px 0 0; font-size: 13px; color: rgba(255,249,238,0.7); }
.btp-ott-detail__genres { display: flex; gap: 7px; flex-wrap: wrap; }
.btp-ott-detail__genre-pill { background: rgba(174,191,146,0.2); border: 1px solid rgba(174,191,146,0.42); color: #d5e0be; }
.btp-ott-detail__dots { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; padding: 16px 0; background: #14100e; }
.btp-ott-detail__dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,249,238,0.3); cursor: pointer; }
.btp-ott-detail__dot.is-active { background: var(--btp-ott-primary, #d98b4a); width: 22px; border-radius: 999px; }
@media (max-width: 640px) {
	.btp-ott-detail__body { padding: 22px; }
	.btp-ott-detail__poster { width: 96px; }
}

/* ---------- Just Added grid (plain grid, distinct from the rail treatment above) ---------- */
/* 5 fixed ~232x348 cards per row (2:3 aspect ratio already gives 232px width ->
   348px height) - capping the grid's own max-width rather than the section's
   shared 1520px keeps exactly 5 columns instead of however many 232px+ tracks
   would fit auto-filled across the full section width. */
.btp-ott-latest-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	max-width: 1240px;
	margin-left: 0;
}
.btp-ott-latest-grid .btp-ott-card { width: auto; max-width: 232px; }
@media (max-width: 1100px) {
	.btp-ott-latest-grid { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
}
@media (max-width: 600px) {
	.btp-ott-latest-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Load more ---------- */
.btp-ott-loadmore-wrap { display: flex; justify-content: center; margin-top: 26px; }
.btp-ott-loadmore-spinner { display: none; }
.btp-ott-loadmore:disabled .btp-ott-loadmore-spinner { display: inline-block; }

/* ---------- Reused Gaming sections (Live Now, Premium band) placed on this page ----------
 * betube_gaming_render_live_section()/betube_gaming_render_membership_band() are reused
 * as-is (see includes/ott-shared.php ott-live/ott-membership widgets) rather than copied -
 * their markup is hardcoded to --btp-gm-* variables, so this scope just re-points those
 * variables at the real --btp-ott-* ones for anything rendered inside .btp-ott-home. Same
 * technique already used for the reused category pill-bar on the Gaming page itself
 * (.btp-gaming-home .btp-yt-catbar__pill in gaming-home.css). */
.btp-ott-home {
	--btp-gm-body-bg: var(--btp-ott-body-bg, #0b0908);
	--btp-gm-body-color: var(--btp-ott-body-color, #f5ead8);
	--btp-gm-primary: var(--btp-ott-primary, #d98b4a);
	--btp-gm-secondary: var(--btp-ott-secondary, #a2551f);
	--btp-gm-danger: var(--btp-ott-danger, #c94a3a);
	--btp-gm-nav-bg: var(--btp-ott-nav-bg, #0b0908);
	--btp-gm-nav-link: var(--btp-ott-nav-link, #f5ead8);
	--btp-gm-topbar-bg: var(--btp-ott-topbar-bg, #14100e);
	--btp-gm-topbar-link: var(--btp-ott-topbar-link, #f5ead8);
}
.btp-ott-home .btp-gm-section,
.btp-ott-home .btp-gm-membership { font-family: var(--btp-ott-font-body, "Figtree", system-ui, sans-serif); }
.btp-ott-home .btp-gm-section__title,
.btp-ott-home .btp-gm-membership__title { font-family: var(--btp-ott-font-heading, "Caprasimo", system-ui, sans-serif); }
/* gaming-home.css itself was only ever built dark-first (Gaming has no light-mode
   parity to preserve), so its own muted-text colors are hardcoded translucent cream
   - invisible on a light OTT canvas. Rather than touching that stable, unrelated
   stylesheet, these are scoped overrides for just the handful of its classes the
   two reused render functions (Live Now/Premium) actually output, using the same
   currentColor-mix fix applied throughout the rest of this file. */
.btp-ott-home .btp-gm-live-card__sub,
.btp-ott-home .btp-gm-membership__desc { color: color-mix(in srgb, currentColor 55%, transparent); }
.btp-ott-home .btp-gm-live-card { border-color: color-mix(in srgb, currentColor 9%, transparent); padding: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
	.btp-ott-navbar, .btp-ott-section, .btp-ott-hero, .btp-ott-detail { padding-left: 18px; padding-right: 18px; }
}
/* Top 10's divider-head (title + divider line + "Updated daily by views" caption +
   prev/next arrows) was fixed at flex-wrap:nowrap with the caption pinned at
   flex-shrink:0, so on phone widths the four items don't fit and the arrows get
   pushed off the right edge of the viewport - the page's only source of
   horizontal scroll. The divider/caption are decorative, so they're what gives
   way; title and arrows (the two elements that actually do something) keep their
   normal space-between layout at any width. */
@media (max-width: 480px) {
	.btp-ott-section__head--divider .btp-ott-section__divider,
	.btp-ott-section__head--divider .btp-ott-section__caption {
		display: none;
	}
}
/* Popular Movies is the one poster grid on the page (every other rail is a
   flex scroller, where .btp-ott-card's fixed clamp() width is correct - it
   sets how much of each horizontally-scrolling item shows). On a grid, that
   same fixed width leaves cards stranded at ~190px inside a single full-width
   column instead of filling it, so phones get one small card with a dead gap
   beside it. Force 2 even columns and let the card fill its cell instead. */
@media (max-width: 480px) {
	.btp-ott-movies-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.btp-ott-movies-grid .btp-ott-card { width: 100%; }
}