/*
 * UIKit redesign theme — TEST ONLY (2026-08-03).
 * Loads after uikit.min.css; themes UIKit defaults to the Swamiji.tv brand and
 * restyles existing markup (no template logic changes).
 * Revert: Backups/uikit_redesign_20260803/revert.sh
 *
 * STRUCTURE: design tokens first, then SHARED component groups (one rule per
 * repeated pattern), then page-specific refinements. Same size/format = same
 * rule — do not fork a new copy of an existing pattern.
 */

/* ---------- Design tokens: the ONLY values used below ---------- */
:root {
	/* Typography scale */
	--fs-title-lg: 1.65rem;  /* main program title */
	--fs-title: 1.25rem;     /* item titles (Up next / archive / program / replay) */
	--fs-body: 17px;         /* body text and ALL descriptions */
	--fs-label: 15px;        /* menu, section headers, uppercase labels */
	--fs-small: 14px;        /* metadata, footer, meters — the page-wide MINIMUM */
	/* Colors */
	--brand: #f57e20;
	--brand-dark: #d96a10;
	--brand-tint: #fdf1e5;
	--brand-band: #fae0c3;
	--ink: #2b2d31;
	--ink-soft: #55585e;
	--text-desc: #4c4f55;
	--meta: #7d8087;
	--box-border: #eef0f2;
	/* Geometry */
	--radius-card: 12px;
	--radius-box: 10px;
	/* Shadows */
	--shadow-card: 0 4px 18px rgba(0, 0, 0, 0.06);
	--shadow-soft: 0 3px 12px rgba(0, 0, 0, 0.05);
	--shadow-lift: 0 10px 26px rgba(0, 0, 0, 0.13);
	/* Indigo blue (footer surface, main menu text) */
	--indigo: #0c2858;
	/* Menu/tab-row item gap */
	--menu-gap: 2.66em;
	/* Fade for clipped descriptions */
	--fade-mask: linear-gradient(#000 82%, transparent 98%);
}

html { scrollbar-gutter: stable; }
/* Sticky footer: short pages still push the footer to the bottom of the window
   instead of letting it climb up under the content */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;   /* phones: excludes the browser toolbars */
	background: #f4f5f7;
	color: #333;
	font-size: var(--fs-body);   /* THE body text size — everything inherits */
	font-family: system-ui, "Noto Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.2;   /* body text everywhere */
}
/* Links are ALWAYS the site's near-black — visited or not (site rule).
   Orange is reserved for explicit accents (nav active, buttons). */
a, a:link, a:visited { color: #464541; }
a:hover, a:active { color: #464541; text-decoration: underline; }

/* ================= SHARED COMPONENT GROUPS ================= */

/* Fluid page container (stream, program, series, video-detail pages) */
#main-content-block .container:has(> .main-content-block-layout),
#main-content-block .container:has(#program-layout),
#main-content-block .container:has(.series-panel),
#main-content-block .container:has(.video-page-layout),
#main-content-block .container:has(.archive-layout) {
	max-width: none;
	padding: 0 28px;
}

/* Strong uppercase label (menu, section headers, column caps) */
.stv-menu li a,
.edition-tabs > li a,
.content-panel h2, .content-panel h3,
#info-block h3,
.channel-title {
	font-size: var(--fs-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.1px;
}
/* Soft uppercase label (tabs, timezone) */
.video-channel-list > li,
.timezone-info a {
	font-size: var(--fs-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--ink-soft);
}

/* THE focus style — ONE rule for EVERY focusable element on the site.
   UIKit ships `:focus-visible { outline: 2px dotted #333 }`; the browsers add
   their own (Firefox: dotted black, Chrome: blue ring). This used to be an
   enumeration of input types, so anything outside the list kept the dotted
   ring — e.g. `<input id="timezoneAutocomplete">`, which has no type attribute
   and is auto-focused when the timezone dialog opens. NEVER enumerate types
   here again: the universal selectors below cover new controls by default. */
:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 0;
}
input:focus, select:focus, textarea:focus {
	outline: 1px solid var(--ink);
}
/* belt and braces: no dashed/dotted edge can reach a form control */
input, select, textarea { outline-style: solid; }
/* One accent colour for every checkbox / radio on the site */
input[type="checkbox"], input[type="radio"] { accent-color: var(--indigo); }
/* Firefox draws an EXTRA inner dotted ring on selects/buttons — remove it */
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--ink); }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; }

/* Orange cap header: same bar on every card/column */
.donation-block > .panel-item:first-child,
#liveProgram > .panel-item:first-child,
#highlights > .panel-item:first-child,
#latest-premium-videos > .panel-item:first-child,
#satsangLocation .content-panel > .panel-item:first-child,
.next-program-panel > .panel-item:first-child,
.channel-title {
	background: var(--brand);
	padding: 12px 14px;
	border-top: none;
}
.donation-block > .panel-item:first-child h3,
#liveProgram > .panel-item:first-child h3,
#highlights > .panel-item:first-child h3,
#latest-premium-videos > .panel-item:first-child h3,
#satsangLocation .content-panel > .panel-item:first-child h3,
.next-program-panel > .panel-item:first-child h2 {
	color: #fff;
	border-left: none;
	padding-left: 0;
}
.channel-title { color: #fff; border-bottom: none; border-radius: 0; }

/* Item box: bordered rounded row (Up next, program, series episodes) */
.next-program-panel > .panel-item:not(:first-child),
.program-item,
.series-items-layout .series-episode {
	border: 1px solid var(--box-border);
	border-radius: var(--radius-box);
}

/* Clickable box: lift + pointer — THE interaction for every video box */
#main-content-block .replay-item,
.shop-items-layout .stv-panel,
.next-program-panel .next-program-clickable,
.program-item[data-video-url],
.series-items-layout .series-episode[data-video-url] {
	cursor: pointer;
	border-radius: var(--radius-box);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#main-content-block .replay-item:hover,
.shop-items-layout .stv-panel:hover,
.next-program-panel .next-program-clickable:hover,
.program-item[data-video-url]:hover,
.series-items-layout .series-episode[data-video-url]:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	background: #fff;
	position: relative;
	z-index: 1;
}
/* Exception: a playing replay row is no longer click-to-play */
#main-content-block .replay-item.replay-playing { cursor: default; }
#main-content-block .replay-item.replay-playing:hover { transform: none; box-shadow: none; }

/* ================= HEADINGS — one rule per level =================
   h1/h2 = page & section headings, h3/h4 = titles inside cards and rows.
   Everything is indigo + bold; only two component groups override this:
   the orange card caps (uppercase label) and the orange main programme
   title `h3.video-title`. Never restyle a heading per page. */
h1, h2 {
	font-size: var(--fs-title-lg);
	font-weight: 700;
	color: var(--indigo);
}
h3, h4 {
	font-size: var(--fs-title);
	font-weight: 700;
	color: var(--indigo);
}
/* Media titles INSIDE cards: the card-heading rules above would otherwise
   turn them into cap labels, so this one group restores the title style. */
.content-panel .next-program-info-panel h3,   /* stream — Up next          */
.content-panel .next-live-program-title,      /* stream — Next live prog.  */
#highlights h4,                               /* stream — Highlights       */
#latest-premium-videos h4 {                   /* stream — Premium videos   */
	font-size: var(--fs-title);
	font-weight: 700;
	color: var(--indigo);
}
/* Titles that are not headings in the markup follow the same h3/h4 style */
.program-item-title,                          /* program schedule          */
.playlist-index-name {                        /* dashboard playlist names  */
	font-size: var(--fs-title);
	font-weight: 700;
	color: var(--indigo);
}
/* Linked titles keep the heading colour in every link state */
.shop-items-layout h4 a,
.shop-items-layout h4 a:link,
.shop-items-layout h4 a:visited,
.shop-items-layout h4 a:hover { color: var(--indigo); }

/* Rounded media: every snapshot/poster shares the box radius */
.next-program-image,
.highlight-image,
.video-snapshot,
.replay-item .replay-poster-image,
.next-program-icon,
.program-item-snapshot > img { border-radius: var(--radius-box); }

/* 16:9 crop (never stretch) for posters that are not natively 16:9 */
.replay-item .replay-poster-image,
.next-program-live-poster {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Meta line (times, dates) */
.now-playing-meta-block,
.next-program-next-air-time-block,
.scheduled-video-time-panel { color: var(--meta); font-size: var(--fs-small); }
.next-program-next-air-time-block .fa,
.scheduled-video-time-panel .fa { color: var(--brand); }

/* Descriptions: shared text style (size inherited from body) */
.video-description,
.program-item-description {
	text-align: left;
	line-height: 1.2;
	color: var(--text-desc);
}
/* Shared fade for any clipped description (marked by the pages' scripts) */
.desc-clipped {
	-webkit-mask-image: var(--fade-mask);
	mask-image: var(--fade-mask);
}

/* ================= HEADER / NAVIGATION ================= */
header {
	background: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
	position: relative;
	z-index: 10;
}
/* Full screen width on desktop (content pages keep their own container) */
header > .container { max-width: none; width: auto; margin: 0; padding: 0 28px; }
/* "TV Channel" hidden on desktop (mobile keeps it, same row as the logo) */
@media (min-width: 1024px) {
	header h1 { display: none; }
	.h1-layout.row-layout { margin-bottom: 0; }
}
.yidl-menu li a { color: #9a9da3; font-size: var(--fs-body); }
.yidl-menu li a:hover { color: var(--brand); text-decoration: none; }
/* Open mobile menu: the page behind it stays put, and scrolling inside the
   panel never chains through to it */
html.mobile-menu-open { overflow: hidden; }
body.mobile-menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
#mobile-menu-panel { overscroll-behavior: contain; overflow-y: auto; touch-action: pan-y; }
#mobile-menu-curtain { touch-action: none; }

/* One row: every pill fills the strip height and centres its own text, so the
   separators sit on the same line as the links and leave no gap above them */
.yidl-menu > li { display: flex; align-items: center; }
.yidl-menu-separator {
	color: #d5d7db;
	font-size: var(--fs-body);   /* same size as the links — keeps the | on the same baseline */
}
.yidl-menu > li { padding: 0.15em 0.6em; }
/* the separator kept the base 0.5em padding, so its pill was taller than the
   link pills and left white gaps above and below them */
.yidl-menu > li.yidl-menu-separator { padding: 0.15em 0.25em; }
.yidl-menu > li:first-child { padding-left: 1.2em; }
.stv-menu li a,
.edition-tabs > li a { color: var(--indigo); border-bottom: 3px solid transparent; }
.stv-menu li a:hover,
.edition-tabs > li a:hover { color: var(--brand); text-decoration: none; }
.stv-menu-active-item a,
.edition-tabs > li.active a { color: var(--brand) !important; border-bottom-color: var(--brand) !important; }
@media (min-width: 1024px) {
	/* Minimal banner height: original-size logo is the floor (97px); the
	   yidl strip overlays the banner top-right instead of stacking above */
	header { padding-bottom: 0.3em; border-top-width: 3px; position: relative; }
	.yidl-menu-block { position: absolute; top: 0; right: 28px; margin: 0; z-index: 2; }
	.yidl-menu > li { padding-top: 0.05em; padding-bottom: 0.05em; }
	.stv-logo-panel { margin-right: 2.5em; }
	/* Menu text aligns with the www.swamiji.tv line inside the logo
	   (text baseline at logo row ~76 of 97), top stays free for yidl links */
	header .row-layout-middle { align-items: flex-end; }
	.stv-menu { justify-content: flex-start; margin-bottom: 12px; }
	.stv-menu li a { padding: 8px 2px 6px 2px; }
	.stv-menu > li { padding: 0 var(--menu-gap) 0 0; }
	.stv-menu > li:first-child { padding-left: 0; }
}
@media (max-width: 1023px) {
	.stv-menu li a { padding: 8px 2px 6px 2px; }
}

/* ================= EDITION / DAY TABS ================= */
.page-menu { margin: 18px 0 4px 0; }
.video-channel-list > li { border-radius: 999px; padding: 7px 20px; }
.video-channel-list > li.active {
	background: var(--brand);
	border-bottom: none;
	box-shadow: 0 3px 10px rgba(245, 126, 32, 0.35);
}
.video-channel-list > li.active a { color: #fff; }
.video-channel-list > li.active::before { content: none; }
.page-menu .channel-list-panel { align-self: center; }

/* Tab rows (editions, program day tabs + channel selector, About subtabs)
   USE THE MAIN MENU RULES above; only the pill styling is neutralised here
   (compound selector: must outrank the 3D pill rules further down). */
.video-channel-list.edition-tabs > li,
.video-channel-list.edition-tabs > li.active,
.video-channel-list.edition-tabs > li:hover {
	background: none;
	border-radius: 0;
	padding: 0 var(--menu-gap) 0 0;
	box-shadow: none;
	transform: none;
}
.video-channel-list.edition-tabs > li:last-child { padding-right: 0; }
.video-channel-list.edition-tabs > li a {
	display: inline-block;
	padding: 4px 2px;
	cursor: pointer;
}

/* Same breathing room below the tabs/header on every page */
.main-content-block-layout,
.page-menu + .stv-panel,
.festival-intro,
.festival-leaflet { margin-top: 22px; }

/* ================= STREAM PAGE LAYOUT ================= */
/* Left column is left-aligned and auto-resizes with the window */
.main-column {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}
.side-column { flex: 0 0 368px; }
/* Sidebar expands to TWO columns only if the left column KEEPS >= 768px:
   left = innerWidth - 2*28 padding - 760 sidebar - 24 margin, and the media
   query sees viewport INCLUDING the scrollbar (up to ~24px), so:
   768 + 840 + 24 scrollbar reserve => >=1632px */
@media (min-width: 1632px) {
	.side-column {
		flex: 0 0 760px;
		width: 760px;
		align-self: flex-start;  /* natural height — never stretch to the left column */
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		align-items: stretch;   /* within a row: both cards same height */
		align-content: start;   /* rows take natural height, no vertical stretch */
		margin-left: 24px;
	}
	.side-column > .content-panel { margin-bottom: 0; }
	/* Row 1: donation meter + next-live-program (same width and height);
	   Row 2: highlights + premium videos */
	#satsangLocation { grid-column: 1 / -1; order: 10; }
}
/* One indigo band under the player — was mixed #3c3c3c and black */
#videoOptionsBar,
#translationsTitle,
#noTranslationsAvailable,
#audioWrapper { background-color: var(--indigo); }
/* nothing inside the band keeps a shade of its own */
#audioWrapper .video-js,
#audioWrapper .vjs-control-bar { background-color: transparent; }
/* Translation rows line up with the rest of the band (they sat flush against
   the edge) and keep a visible play control on the indigo */
#audioWrapper > div {
	align-items: center;
	gap: 10px;
	padding: 5px 16px;
}
#audioWrapper .audioPlayButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.16);
	color: #fff;
	line-height: 1;
}
#audioWrapper > div:hover > .audioPlayButton { background-color: rgba(255, 255, 255, 0.34); color: #fff; }
#audioWrapper .langName { margin-left: 0; }
/* the stack reads as one panel: player rounded on top, last box rounded at the bottom.
   ONE curve only — the outermost panel is rounded and clips everything inside it, so no
   stack of rounded backgrounds can leave a dark ring along the arc. */
.video-meta-panel > .video-player-panel {
	border-top-left-radius: var(--radius-box);
	border-top-right-radius: var(--radius-box);
	overflow: hidden;
	background-color: transparent;   /* black + #3c3c3c sit fully behind the player and only */
}                                    /* bled into the arc as a dark ring */
.video-meta-panel #playerWrapper { background-color: transparent; }
/* Whichever box ends the band carries the rounding: the Audio bar, the
   "Translations" title (live webcast whose streams have not appeared) or the
   list of translation rows. */
#videoOptionsBar,
#translationsTitle:not(.not-displayed),
#audioWrapper:has(> *) { border-radius: 0 0 var(--radius-box) var(--radius-box); }
.video-meta-panel:has(#translationsTitle:not(.not-displayed)) #videoOptionsBar,
.video-meta-panel:has(#audioWrapper > *) #videoOptionsBar,
.video-meta-panel:has(#audioWrapper > *) #translationsTitle { border-radius: 0; }

/* ================= CARDS ================= */
.content-panel {
	background: #fff;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.panel-item { padding: 1.3rem 1.5rem; border-top: 1px solid #f0f1f3; }
.panel-item:first-child { border-top-width: 0; }
/* Section headings that are NOT card caps keep the orange side bar */
.content-panel h2, .content-panel h3 {
	color: var(--ink);
	border-left: 4px solid var(--brand);
	padding-left: 12px;
	margin: 0;
}
.content-panel h4 { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }

/* Main program title: large, not uppercase */
h3.video-title {
	font-size: var(--fs-title-lg);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	border-left: none;
	padding-left: 0;
	color: var(--brand);
	margin: 0 0 6px 0;
}
.now-playing-meta-block .separator { color: #d5d7db; margin: 0 6px; }

/* Video box scales proportionally 16:9 with the fluid column
   (the old 856x480 wrapper cap broke the aspect ratio) */
.video-player { max-width: none; max-height: none; }

/* ================= UP NEXT (front page) ================= */
/* The snapshot defines the row height; the description fills the space next
   to it and clips ADAPTIVELY — more text shows on wider screens. */
@media (min-width: 1024px) {
	.next-program-panel .next-program-layout { position: relative; }
	.next-program-panel .next-program-image-panel { flex: 0 0 45%; max-width: 45%; }
	.next-program-panel .next-program-info-panel {
		position: absolute;
		left: calc(45% + 1.5em);
		right: 0;
		top: 0;
		bottom: 0;
		overflow: hidden;
		-webkit-mask-image: var(--fade-mask);
		mask-image: var(--fade-mask);
	}
}
@media (max-width: 1023px) {
	.next-program-panel .video-description {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}
.next-program-info-panel h3 {
	text-transform: none;
	letter-spacing: 0.2px;
	border-left: none;
	padding-left: 0;
	margin-bottom: 4px;
}
/* Row spacing within the card */
.next-program-panel > .panel-item:not(:first-child) { border-top: none; margin: 16px 16px 0 16px; }
.next-program-panel > .panel-item:last-child { margin-bottom: 16px; }
.next-program-icon { background: #f4f5f7; color: #c3c6cc; }

/* Sidebar cards clamp their descriptions at 4 lines */
#highlights .video-description,
#latest-premium-videos .video-description,
#liveProgram .video-description {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ================= BUTTONS ================= */
.button-primary, a.button-primary {
	background: var(--indigo);
	color: #fff;
	border-radius: 999px;
	padding: 9px 24px;
	font-weight: 600;
	display: inline-block;
	box-shadow: 0 3px 10px rgba(245, 126, 32, 0.35);
	transition: background 0.15s ease;
}
.button-primary:hover, a.button-primary:hover { background: var(--btn-hover); color: #fff; text-decoration: none; }
/* THE standard action button, defined ONCE for every page — `.button-secondary`
   is the same button (one button look site-wide, no second variant). */
.cast-button,
.button-secondary {
	/* inline-flex + line-height 1: the label is exactly centred, and <a> and
	   <button> elements get identical metrics */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* inline-flex trims the whitespace between an icon and its label, so the
	   space has to come from the box itself */
	gap: 6px;
	line-height: 1;
	vertical-align: middle;
	padding: 8px 16px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
	background-color: var(--indigo);
}
/* icon spacing inside buttons comes from the gap alone */
.cast-button .button-icon-left, .cast-button .button-icon-right,
.button-secondary .button-icon-left, .button-secondary .button-icon-right { margin: 0; }
.cast-button[disabled] { opacity: 0.5; cursor: default; }
.cast-button:not([disabled]):hover { text-decoration: none; background-color: var(--btn-hover); }
/* Anchor-based cast-buttons (Back to list / Previous / Next) match the button
   ones: white text in every link state — ONE button look everywhere */
a.cast-button, a.cast-button:link, a.cast-button:visited, a.cast-button:hover,
a.button-secondary, a.button-secondary:link, a.button-secondary:visited, a.button-secondary:hover {
	color: #fff;
	text-decoration: none;
}

/* Next live program card: both push buttons centre under their text, and the
   status bell uses the site indigo (it was silver) */
#pushNotifications-subscribeBlock,
#pushNotifications-unsubscribeBlock { text-align: center; }
#pushNotifications-subscribeBlock .subscription-info { text-align: left; }
/* subscribed state: bell + text centred as one line above the button */
#pushNotifications-unsubscribeBlock > div:first-child { text-align: center; }
#pushNotifications-unsubscribeButton { margin-top: 0.5rem; }
.subscription-icon {
	float: none;
	margin: 0 8px 0 0;
	color: #cd9a3a;   /* gold / bronze */
}

/* UIKit progress bar in brand colour (used by the Ask chat) */
.uk-progress { height: 6px; border-radius: 3px; background: var(--box-border); }
.uk-progress::-webkit-progress-bar { background: var(--box-border); border-radius: 3px; }
.uk-progress::-webkit-progress-value { background: var(--brand); border-radius: 3px; transition: width 0.5s ease; }
.uk-progress::-moz-progress-bar { background: var(--brand); border-radius: 3px; }

/* ================= FESTIVALS PAGE (leaflet layout) ================= */
.festival-intro:first-child { margin-top: 44px; }   /* extra room above the page's first title */
/* blank line above every festival section title */
.festival-intro:not(:first-child) { margin-top: calc(22px + 1.6 * var(--fs-body)); }
.festival-intro h2 { margin: 0 0 10px 0; }
/* page title: centered, with a blank line under it */
.festival-intro:first-child h2 { text-align: center; margin-bottom: calc(10px + 1.6 * var(--fs-body)); }
.festival-intro p { margin: 0; }
.festival-photo-frame { max-width: 100%; }
.festival-photo { display: block; width: 768px; max-width: 100%; height: auto; }

.festival-leaflet {
	display: flex;
	background: #fff;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.festival-side {
	flex: 0 0 300px;
	background: #1c5180;                     /* the leaflet's navy panel (matches the artwork) */
	color: #fff;
	padding: 28px 24px 0 24px;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.festival-yidl-logo { width: 158px; height: auto; }
.festival-blessing { margin: 18px 0 4px 0; color: #fff; line-height: 1.35; }
.festival-title { margin: 6px 0 10px 0; }
.festival-title img { width: 100%; max-width: 262px; height: auto; display: block; }
.festival-subtitle { margin: 0 0 20px 0; color: rgba(255, 255, 255, 0.9); line-height: 1.35; }
.festival-notes {
	margin: auto -24px 0 -24px;   /* flush with the panel edges */
	width: calc(100% + 48px);
	height: auto;
	display: block;
}

.festival-body {
	flex: 1;
	display: flex;
	gap: 34px;
	padding: 30px 32px;
	background: #fff;
}
.festival-col { flex: 1 1 0; min-width: 0; }
.festival-col p { margin: 0 0 14px 0; text-align: justify; }
.festival-script { margin: 10px 0 16px 0; }
.festival-script img { width: 100%; height: auto; display: block; }
.festival-script-radio img { max-width: 200px; margin: 0 auto; }
.festival-portrait {
	display: block;
	width: 190px;
	height: 190px;
	margin: 18px auto 22px auto;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--brand);
}
.festival-tv-logo { display: block; width: 120px; height: auto; margin: 18px auto 0 auto; }

@media (max-width: 1023px) {
	.festival-leaflet { flex-direction: column; }
	.festival-side { flex: 0 0 auto; padding-bottom: 0; }
	.festival-body { flex-direction: column; gap: 0; padding: 22px; background-image: none; }
}

/* ================= FOOTER ================= */
/* Footer buttons keep the orange face (the band itself is indigo) */
#footer-block .button-primary,
#footer-block a.button-primary,
#footer-block .cast-button:not([disabled]),
#footer-block .button-secondary {
	background-color: var(--brand);
	background-image: linear-gradient(to bottom, var(--btn-orange-hi), var(--btn-orange-lo));
}
#footer-block .button-primary:hover,
#footer-block a.button-primary:hover,
#footer-block .cast-button:not([disabled]):hover,
#footer-block .button-secondary:hover {
	background-color: var(--btn-orange-hover);
	background-image: none;
}
#footer-block .button-primary:active,
#footer-block .cast-button:not([disabled]):active,
#footer-block .button-secondary:active {
	background-color: var(--brand-dark);
	background-image: none;
}
/* The whole footer is one navy blue surface */
#main-content-block { flex: 1 0 auto; }
#footer-block {
	flex-shrink: 0;
	background: var(--indigo);
	margin-top: 2.5em;
}
#info-block {
	background: none;
	padding: 2.2em 0;
	margin: 0;
}
#info-block .info-part-panel { background: transparent; color: rgba(255, 255, 255, 0.85); }
#info-block h3 { color: #fff; border-left: 4px solid var(--brand); padding-left: 12px; }
#info-block .info-part-panel-desc { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-small); line-height: 1.2; }
#info-block .mobile-platform-logo, #info-block .youtube-logo { color: rgba(255, 255, 255, 0.85); }
footer { background: none; color: rgba(255, 255, 255, 0.85); margin: 0; border-bottom: none; }
footer a, footer a:link, footer a:visited { color: #fff; }
footer a { color: #b9bcc2; }
footer a:hover { color: var(--brand); }

/* ================= ARCHIVE (video list) ================= */
.stv-panel {
	background: #fff;
	border-radius: var(--radius-box);
	box-shadow: var(--shadow-soft);
}
/* Video titles never change on visit/hover — the ONLY clickability cue is
   the whole box lifting slightly on hover. (Colour: shared item-title rule.) */
.shop-items-layout h4 a,
.shop-items-layout h4 a:link,
.shop-items-layout h4 a:visited,
.shop-items-layout h4 a:hover {
	text-decoration: none;
}
/* Video detail page: the player/poster shares the card's rounded corners */
.video-player-panel #video-box-wrapper,
.video-player-panel #video-box-wrapper .video-js,
.replay-player-container .video-js {
	border-radius: var(--radius-box);
	overflow: hidden;
}
.video-player-panel .video-js.vjs-fullscreen,
.replay-player-container .video-js.vjs-fullscreen { border-radius: 0; }
.video-list-premium-container {
	background: var(--brand-band);
	box-shadow: none;
	border-radius: var(--radius-card);
}
.video-premium-panel {
	background-color: #fff;
	border-radius: var(--radius-box);
	box-shadow: var(--shadow-soft);
}
.shop-pagination a {
	border-radius: 999px;
	padding: 5px 13px;
	color: var(--ink-soft);
	font-weight: 600;
}
.shop-pagination a:hover { background: var(--brand-tint); color: var(--brand); text-decoration: none; }
.shop-pagination .shop-active-page {
	background-color: var(--brand);
	color: #fff;
	border-radius: 999px;
	padding: 5px 13px;
	font-weight: 600;
}

/* ================= REPLAY PAGE ================= */
/* Replay rows are list cards like the archive ones: 0.5rem inside the card,
   16px between cards — the inner poster box adds nothing of its own */
#main-content-block .replay-item { padding: 0.5rem; margin: 0 0 16px 0; }
.replay-item .replay-poster {
	background: transparent;
	box-shadow: none;
	border: none;
	border-radius: 0;
	overflow: visible;
	align-items: flex-start;
	padding: 0;
	box-sizing: border-box;
}
/* Item row: snapshot leftmost, description in the right column */
.replay-item .replay-poster-content {
	flex-direction: row;
	align-items: flex-start;
	gap: 22px;
	width: 100%;
}
.replay-item .replay-poster-image {
	width: 480px;
	max-width: 480px;
	flex-shrink: 0;
	margin-bottom: 0;
}
.replay-item h4.replay-title { margin: 0 0 10px 0; }
.replay-item .replay-media-description {
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Expanded (playing) row: the moved info block sits below the video */
.replay-item .replay-player-container { border-radius: var(--radius-box); overflow: hidden; }
.replay-item.replay-playing .replay-info { margin-top: 14px; }

/* ================= PROGRAM PAGE ================= */
#program-layout {
	background: transparent;
	margin-top: 22px;   /* breathing room below the day tabs */
}
/* Narrow screens: three columns don't fit — a selector picks the visible one */
#program-channel-selector { display: none; }
@media (max-width: 1099px) {
	#program-channel-selector { display: block; margin: 14px 0 0 0; }
	#program-channel-selector .video-channel-list > li { cursor: pointer; }
	#program-layout > .program-channel-block.program-channel-hidden { display: none; }
	#program-layout > .program-channel-block { flex-basis: 100%; max-width: 100%; }
}
/* Enough space: description moves to the side of the snapshot */
@media (min-width: 1500px) {
	.program-item {
		display: grid;
		grid-template-columns: 45% 1fr;
		column-gap: 14px;
		grid-template-areas:
			'title title'
			'header header'
			'meta meta'
			'snap desc';
	}
	.program-item-title { grid-area: title; }
	.program-item-header { grid-area: header; }
	.program-item-meta { grid-area: meta; }
	.program-item-snapshot { grid-area: snap; }
	.program-item-description { grid-area: desc; padding-left: 0; }
	/* No snapshot (e.g. Live webcast): description uses the full box width */
	.program-item:not(:has(.program-item-snapshot)) .program-item-description {
		grid-area: auto;
		grid-column: 1 / -1;
	}
	/* Side-by-side: the snapshot bounds the description height (grid trick:
	   height 0 keeps it out of row sizing, min-height fills the snapshot row) */
	.program-item:has(.program-item-snapshot) .program-item-description {
		max-height: none;
		height: 0;
		min-height: 100%;
	}
}
/* Each channel column is its own card; the orange header caps it exactly */
#program-layout > .program-channel-block {
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	padding-bottom: 8px;
}
/* Item text aligns with the cap text (3px live-marker border + 11px = 14px) */
.program-item {
	padding-left: 11px;
	padding-right: 14px;
	margin: 0 10px 16px 10px;
}
.program-item-title { line-height: 1.4; }
.program-item-description {
	max-height: 8.6em;           /* ~7 lines; .desc-clipped fades the overflow */
	overflow: hidden;
}
.program-item.program-item-live { background: var(--brand-tint); }
.program-navig-block > a { color: var(--ink-soft); font-weight: 600; }
.program-navig-block > a:hover { color: var(--brand); text-decoration: none; }

/* ================= SERIES PAGE ================= */
/* Episode grid always consumes the entire width (2/3/4 columns as space allows) */
.series-items-layout {
	display: grid;
	/* min(520px, 100%) so a narrow screen gets a single full-width column */
	grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
	gap: 16px;
}
.series-items-layout .series-episode { margin: 0; padding: 14px; }
/* Episode descriptions: bounded height, fade only when actually clipped */
.series-items-layout .video-description {
	max-height: 10.8em;
	overflow: hidden;
}
/* Episode metadata: body-size, no bullets */
.series-items-layout ul.video-metadata-list {
	font-size: var(--fs-body);
	list-style: none;
	padding-left: 0;
	margin: 8px 0 0 0;
}
.series-panel h3 { color: var(--brand); font-weight: 700; }
.series-header .series-timings { color: var(--indigo); }

/* ================= VIDEO DETAIL PAGE ================= */
/* Left-aligned fluid content with the search list as a single right column;
   the list drops BELOW the video when the main column would go under 768px:
   768 + 796 list + 24 gap + 56 padding + 24 scrollbar reserve => 1668px */
.video-page-layout { display: flex; align-items: flex-start; }
.video-detail-main { flex: 1 1 auto; min-width: 0; }
/* Top-aligned with the video column's first panel (56px = the "Video details"
   heading block above it) — the search filters will live in that top spot */
#video-side-list { flex: 0 0 796px; margin-left: 24px; margin-top: 56px; }
@media (max-width: 1667px) {
	.video-page-layout { display: block; }
	#video-side-list { margin: 16px 0 0 0; }
}
/* Single-column list items: title/description ALWAYS right of the snapshot.
   Snapshot = original 336px width + 40% => 470px fixed. */
.video-side-list-col { display: block; }
/* Beside the video the list is a scroll box, so the item playing can sit at
   its top instead of somewhere far down the page */
@media (min-width: 1668px) {
	#video-side-list .video-side-list-col {
		max-height: calc(100vh - 210px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
		padding-right: 4px;
	}
}
.video-side-list-col .stv-panel { margin-bottom: 16px; }
.video-side-list-col .video-info-layout > .layout-block:first-child {
	flex: 0 0 470px;
	max-width: 470px;
}
.video-side-list-col .video-snapshot { width: 100%; }
/* Fixed row height driven by the snapshot; the description fills the space
   beside it and may NOT overflow (fade clips the excess) */
.video-side-list-col .video-info-layout { position: relative; }
.video-side-list-col .shop-video-layout > .layout-block-stretched.column-layout {
	position: absolute;
	left: calc(470px + 16px);
	right: 12px;
	top: 0;
	bottom: 0;
	overflow: hidden;
	-webkit-mask-image: var(--fade-mask);
	mask-image: var(--fade-mask);
}

/* ================= ARCHIVE REDESIGN + USER FEATURES ================= */
/* Archive: dashboard + filters left, single column of results right */
.archive-layout { display: flex; align-items: flex-start; margin-top: 22px; }
.archive-side { flex: 0 0 400px; margin-right: 24px; }
.archive-main { flex: 1 1 auto; min-width: 0; }
/* One rule spaces ALL side-column cards; a hidden card (guest dashboard)
   contributes no margin, so the first VISIBLE card top-aligns with the search box */
.archive-side > * { margin-bottom: 16px; }
.archive-side > *:last-child { margin-bottom: 0; }
/* Results: full description beside the snapshot, clipped adaptively with the
   shared fade — the snapshot defines the row height (same rule as Up next) */
@media (min-width: 1024px) {
	.archive-main .video-info-layout,
	.archive-single-col .video-info-layout { position: relative; }
	/* archive rows: description column is .column-layout in shop-video-layout;
	   dashboard rows (own markup) use .video-info-desc-block */
	.archive-main .shop-video-layout > .layout-block-stretched.column-layout,
	.archive-single-col .shop-video-layout > .layout-block-stretched.column-layout {
		position: absolute;
		left: calc(554px + 16px);
		right: 12px;
		top: 0;
		bottom: 0;
		overflow: hidden;
		-webkit-mask-image: var(--fade-mask);
		mask-image: var(--fade-mask);
	}
}
@media (max-width: 1023px) {
	.archive-layout { display: block; }
	.archive-side { margin: 0 0 16px 0; }
}
/* Dashboard menu: user-specific — shown only when logged in (layout JS) */
.user-dashboard-menu-card { display: none; }
.auth-logged-in .user-dashboard-menu-card { display: block; }

/* Right column: the item currently playing is highlighted (brand tint) */
#videoSideListItems .stv-panel.video-side-current {
	background: var(--brand-tint);
	box-shadow: inset 3px 0 0 var(--brand);
}

/* Prominent empty-search message (archive) */
.archive-no-results { text-align: center; padding: 48px 20px; }
.archive-no-results h3 { font-size: var(--fs-title-lg); color: var(--ink); margin: 0 0 10px 0; }
.archive-no-results p { color: var(--ink-soft); margin: 0; }

/* Filter fields visible only to signed-in users (cache-safe class toggle) */
.auth-only-filter { display: none; }
.auth-logged-in .auth-only-filter { display: block; }
/* Admin-only menu entry on shared-cached pages: HTML is the same for everyone,
   the rights classes from /auth/me decide who sees it */
.auth-only-admin { display: none; }
.auth-right-fulladmin .auth-only-admin,
.auth-right-yogaleveladmin .auth-only-admin { display: list-item; }
/* Side cards get the standard orange cap header */
.user-dashboard-menu-card > .panel-item:first-child,
.archive-filters-card > .panel-item:first-child {
	background: var(--brand);
	padding: 12px 14px;
	border-top: none;
}
.user-dashboard-menu-card > .panel-item:first-child h3,
.archive-filters-card > .panel-item:first-child h3 {
	color: #fff;
	border-left: none;
	padding-left: 0;
}
/* Filters stack vertically; standard site fonts everywhere */
.archive-side .shop-filter-panel { display: block; }
/* The controls sat 32px in from the card edge (24px panel + 8.5px inner block)
   and the panel carried a 34px bottom margin — an empty strip inside the card */
.archive-filters-card .shop-filter-panel { padding: 14px; margin-bottom: 0; }
/* Two filters per row (languages | video types, content types | levels), then a
   full-width Order by, then page size + the video/audio checkboxes */
.archive-filters-card .shop-filter-panel > .layout-block {
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: start;
}
.archive-filters-card .shop-filter-field-wrapper { margin: 0; min-width: 0; }
.archive-filters-card .alignedFieldWrapper { display: block; }
.archive-filters-card .shop-filter-field select { width: 100%; }
.archive-filters-card .shop-filter-field-wrapper:has(select[name="order"]) { grid-column: 1 / -1; }
.archive-filters-card .shop-filter-field-wrapper:has(select[name="pageSize"]) select { width: auto; }
/* Page size and the media checkboxes sit next to each other on the last row —
   not in two half-columns with a hole between them */
.archive-filters-card .shop-filter-lastrow {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;   /* the checks sit on the select's centre line, not its bottom */
	flex-wrap: wrap;
	gap: 12px 20px;
}
.archive-filters-card .shop-filter-lastrow .shop-filter-field-wrapper { margin: 0; }
.shop-filter-checks { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
/* a box and its label are one unbreakable item */
.shop-filter-checks .check-pair {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
.shop-filter-checks .check-pair label { margin: 0; font-weight: normal; }
@media (max-width: 767px) {
	.archive-filters-card .shop-filter-panel > .layout-block { grid-template-columns: 1fr; }
}
.archive-side .shop-filter-field-wrapper { margin-bottom: 12px; }
.archive-side .shop-filter-field-wrapper label,
.archive-side .shop-filter-field label { font-weight: 600; color: var(--ink-soft); }
.archive-side .shop-filter-field select,
.archive-side .shop-filter-panel input {
	font-family: inherit;
	font-size: var(--fs-body);
	padding: 7px 10px;   /* the base control padding is 1.25em on each side */
}
.archive-side .shop-filter-field select,
.archive-side .shop-filter-field input.stv-datepicker { width: 100%; }
/* clear button sits at the right edge of the date field */
.archive-side .stv-date-field { position: relative; }
.archive-side .stv-date-clear {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(12, 40, 88, 0.08);
	color: var(--indigo);
	font-size: var(--fs-body);
	line-height: 1;
	cursor: pointer;
}
.archive-side .stv-date-clear:hover { background: rgba(12, 40, 88, 0.18); }
.archive-side input.stv-datepicker { padding-right: 32px; }
/* the date field is a control like the selects beside it */
.archive-side input.stv-datepicker {
	background-color: #f6f6f6;
	border: 1px solid #dfdfdf;
	border-radius: 3px;
	box-sizing: border-box;
}
/* jQuery UI calendar: readable size, site colours */
.ui-datepicker {
	font-size: var(--fs-body);
	width: 20em;
	padding: 6px;
	border: 1px solid var(--box-border);
	border-radius: var(--radius-box);
	box-shadow: var(--shadow-lift);
	background: #fff;
}
.ui-datepicker .ui-datepicker-header {
	background: var(--indigo);
	border: none;
	border-radius: 6px;
	color: #fff;
	padding: 12.5px 0;   /* 30% taller than the jQuery UI default header row */
}
/* jQuery UI gives both header selects width:45%, so they touch and are far
   wider than "Jun" / "2024" — size them to their text with a gap between */
.ui-datepicker .ui-datepicker-title {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.ui-datepicker .ui-datepicker-title select {
	width: auto;
	font-size: var(--fs-small);
	padding: 2px 13px;   /* ~20% wider than the text needs, gap keeps them apart */
	margin: 0;
}
/* Month arrows: centred in the (taller) header, with a soft white highlight
   instead of jQuery UI's grey sprite buttons, which vanish on the indigo bar */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-prev-hover { left: 8px; }
.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-next-hover { right: 8px; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: rgba(255, 255, 255, 0.34); }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { filter: brightness(0) invert(1); }
.ui-datepicker table { font-size: var(--fs-small); }
.ui-datepicker td a, .ui-datepicker td span { text-align: center; padding: 6px; border: none; }
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-highlight { background: var(--brand); color: #fff; }
.archive-side input[type=checkbox] { transform: none; }
/* Search stays at the top of the results column */
.archive-search-panel { margin-bottom: 16px; }
.archive-search-panel .shop-search-block { display: flex; gap: 8px; }
.archive-search-panel .shop-search-field {
	flex: 1;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 19px;   /* body size + 3 */
	font-weight: 400;
	border: 1px solid #d5d7db;   /* simple gray, no dashes */
	border-radius: var(--radius-box);
	outline: none;
	background-image: none;
	margin-bottom: 0;
}
.archive-search-panel .shop-search-block button {
	position: static;
	border: 1px solid #d5d7db;
	border-radius: var(--radius-box);
	background: #fff;
	cursor: pointer;
}
/* Single-column results with 2x snapshots (554px), title/description right */
.archive-main .shop-items-layout { display: block; }
.archive-main .shop-items-layout > .stv-panel { margin-bottom: 16px; }
.archive-main .video-info-layout > .layout-block:first-child {
	flex: 0 0 554px;
	max-width: 554px;
}
.archive-main .video-snapshot { width: 100%; }

/* Dashboard menu card (archive side column + /user pages) */
.user-dashboard-menu { list-style: none; padding: 0; margin: 0; }
.user-dashboard-menu li a {
	display: block;
	padding: 8px 4px;
	font-weight: 600;
	color: var(--ink-soft);
}
.user-dashboard-menu li a .fa { margin-right: 8px; color: var(--indigo); }
.user-dashboard-menu li a .fa-heart { color: #e02020; }   /* same red as the like button */
.user-dashboard-menu li.active a,
.user-dashboard-menu li a:hover { color: var(--brand); text-decoration: none; }.archive-single-col { display: block; }
.archive-single-col > .stv-panel { margin-bottom: 16px; }
.archive-single-col .video-info-layout > .layout-block:first-child {
	flex: 0 0 554px;
	max-width: 554px;
}
.archive-single-col .video-snapshot { width: 100%; }
/* Video page right-column source selector (search / playlists / history / liked) */
.video-side-source { padding: 10px 14px; margin-bottom: 16px; }
.video-side-source select {
	width: 100%;
	font-family: inherit;
	font-size: var(--fs-body);
	border: 1px solid #c9ccd1;
	border-radius: 8px;
	padding: 6px 10px;
}
.side-list-cap { border-radius: var(--radius-box); margin-bottom: 16px; }

/* Playlist index (USE mode): one row per playlist */
.playlist-index-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin-bottom: 12px;
	cursor: pointer;
	border-radius: var(--radius-box);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.playlist-index-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.playlist-index-icon { color: var(--indigo); font-size: 20px; }

.playlist-index-count { color: var(--meta); font-size: var(--fs-small); }
.playlist-index-actions { margin-left: auto; display: flex; gap: 8px; }
.user-play-all { margin-bottom: 14px; display: flex; gap: 8px; }

/* Dashboard list pages (/user/*): the menu card always shows, rows manageable */
.user-dashboard-menu-forced { display: block !important; }
.user-list-row { position: relative; }
.user-list-row .user-row-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}
/* Playlist group cap: standard orange column header + delete icon */
.user-group-cap {
	background: var(--brand);
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	padding: 12px 14px;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* the first cap in the column starts level with the dashboard card beside it */
.archive-main > .user-group-cap:first-child,
.archive-main > div > .user-group-cap:first-child { margin-top: 0; }
.user-group-cap h3 {
	font-size: var(--fs-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.1px;
	color: #fff;
	margin: 0;
}
.user-group-cap .user-group-delete,
.user-group-cap .user-group-delete:link,
.user-group-cap .user-group-delete:visited { color: #fff; font-size: 17px; }
.user-group-cap + .archive-single-col { margin-bottom: 8px; }

/* User management table (admin) */
.user-admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
.user-admin-table th {
	font-size: var(--fs-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.1px;
	color: var(--meta);
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--box-border);
}
.user-admin-table td { padding: 10px; border-bottom: 1px solid var(--box-border); vertical-align: middle; }
.user-admin-table th:nth-child(n+3),
.user-admin-table td:nth-child(n+3) { text-align: center; }
.user-admin-who { display: flex; align-items: center; gap: 10px; text-align: left; }
.user-admin-who .auth-avatar { width: 32px; height: 32px; }
.user-admin-email { color: var(--meta); font-size: var(--fs-small); }
.user-admin-status { color: var(--meta); font-size: var(--fs-small); min-height: 1.4em; }

/* Header auth chip */
.auth-avatar { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
#authChip .auth-name, #authChipMobile .auth-name { color: var(--ink-soft); font-weight: 600; }
/* same divider as between the corner links, between the name and Sign out */
.auth-chip-separator { color: #d5d7db; margin: 0 8px; }

/* Share panel (YouTube-style), roomy: base sizes + 30%, brand-colored icons */
/* (#sharePopover prefix outranks the generic popover-box width below) */
#sharePopover .share-popover-box { width: 520px; padding: 30px 34px; }
.share-popover-box h4 { font-size: 1.35rem; }
.share-popover-nets { display: flex; gap: 24px; margin: 10px 0 20px 0; justify-content: center; }
/* ONE close/cancel button for all popovers: the standard button, centered.
   (#-prefixed to outrank the page-inline .cast-button rules) */
#sharePopover .popover-close,
#playlistPopover .popover-close,
#authChooser .popover-close,
#soundPopover .popover-close {
	display: block;
	margin: 20px auto 4px auto;
	cursor: pointer;
	float: none;
	width: auto;
}
.share-net { text-align: center; text-decoration: none; }
.share-net:hover { text-decoration: none; }
.share-net-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #f4f5f7;
	font-size: 29px;
	margin: 0 auto 8px auto;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.share-net:hover .share-net-icon { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
/* Network brand colors */
.share-net-icon .fa-whatsapp { color: #25d366; }
.share-net-icon .fa-facebook { color: #1877f2; }
.share-net-icon .fa-twitter { color: #111; }
.share-net-icon .fa-telegram { color: #229ed9; }
.share-net-icon .fa-envelope { color: var(--brand); }
.share-net-name { font-size: 18px; color: var(--ink-soft); }
.share-popover-link { display: flex; gap: 10px; align-items: center; }
.share-popover-link input {
	flex: 1;
	border: 1px solid #c9ccd1;   /* plain solid gray */
	border-radius: 8px;
	padding: 8px 12px;
	font: inherit;
	font-size: 18px;
	color: var(--ink-soft);
	outline: none;
	box-sizing: border-box;
}
.share-popover-link .cast-button { margin: 0; }   /* standard button size */

/* Sign-in chooser + playlist popover overlays */
#authChooser, #playlistPopover, #sharePopover, #soundPopover {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-chooser-box, .playlist-popover-box, .share-popover-box, .sound-popover-box {
	background: #fff;
	border-radius: var(--radius-card);
	padding: 24px 28px;
	width: 330px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
.auth-chooser-box h4, .playlist-popover-box h4, .sound-popover-box h4 { margin: 0 0 14px 0; }
.sound-popover-box { width: 420px; text-align: center; }
.sound-popover-box h4 .fa { color: var(--brand); margin-right: 6px; }
.sound-popover-box p { color: var(--ink-soft); margin: 0 0 10px 0; }
.sound-popover-box .sound-popover-hint { font-size: var(--fs-small); color: var(--meta); }
.sound-popover-box #soundPopoverPlay { display: block; margin: 16px auto 0 auto; font-size: var(--fs-body); padding: 10px 26px; }
.auth-chooser-box a.button-primary { display: block; margin: 10px 0; text-align: center; }.playlist-popover-item { display: block; padding: 7px 2px; font-weight: 600; }
.playlist-popover-item .fa { color: var(--brand); margin-right: 6px; }
.playlist-popover-new { display: flex; gap: 8px; margin-top: 12px; }
.playlist-popover-new input {
	flex: 1;
	border: 1px solid #d5d7db;
	border-radius: 8px;
	padding: 6px 10px;
	font: inherit;
}

/* Stats + actions live inline beside the cast buttons (page defines layout) */
.video-stat-chip { cursor: default; display: inline-block; }
/* Liked state: the filled heart turns red */
#likeButton .fa-heart { color: #e02020; }
/* Metadata under the video: plain lines, no bullets */
.video-info-col .video-metadata-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* Comments tab */
.video-comment { border-top: 1px solid var(--box-border); padding: 10px 0; }
.video-comment:first-child { border-top: none; }
.video-comment .auth-avatar { margin-right: 6px; }
.video-comment-author { font-weight: 700; margin-right: 8px; }
.video-comment-date { color: var(--meta); font-size: var(--fs-small); }
.video-comment-body { margin-top: 4px; }
#commentBody {
	width: 100%;
	min-height: 70px;
	border: 1px solid #d5d7db;
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	margin: 12px 0 8px 0;
	box-sizing: border-box;
}

/* ================= OTHER PAGES ================= */
/* Kill remaining justified text walls */
.video-info-layout .video-description,
.req-platform-panel .req-platform-text,
.donation-support-block .donation-info-text,
.about-content { text-align: left; }

/* ================= jQuery UI DIALOGS ================= */
.ui-dialog {
	border: none;
	border-radius: var(--radius-card);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
	/* literal colour first: if the token ever fails to resolve, the caption must
	   still be opaque and never let the content show through */
	background-color: #f57e20;
	background-color: var(--brand);
	background-image: none;
	color: #fff;
	border: none;
	border-radius: 0;
	font-weight: 700;
	position: relative;
	z-index: 2;   /* content (incl. its positioned children) can never paint over it */
}
.ui-dialog .ui-dialog-content { position: relative; z-index: 1; }
.ui-dialog .ui-dialog-titlebar-close {
	background: #fff;
	border: none;
	border-radius: 999px;
}
.ui-widget-overlay { background: #000; opacity: 0.45; }
/* Timezone dialog: the continent strip is the dialog's own header row — it was
   floated list items with no surface at all (see-through) and a fixed 27em
   search box that ran off a phone screen. */
.ui-dialog .tz-continent-picker {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--brand-tint);
	border-bottom: 1px solid var(--box-border);
	margin: 0 0 16px 0;
	padding: 10px 12px;
}
.ui-dialog .tz-continent-picker label { font-weight: 600; color: var(--indigo); }
.ui-dialog .tz-continent-picker select { flex: 1; min-width: 0; font-size: var(--fs-body); }
.ui-dialog .continentTabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	clear: none;
	background: var(--brand-tint);
	border-bottom: 1px solid var(--box-border);
	margin: 0 0 16px 0;
	padding: 8px;
}
.ui-dialog .continentTabs li {
	float: none;
	padding: 6px 10px;
	border-radius: 6px;
	color: var(--indigo);
	font-size: var(--fs-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.ui-dialog .continentTabs li.active {
	background: #fff;
	border: none;
	top: 0;
	padding: 6px 10px;
	box-shadow: inset 0 -3px 0 var(--brand);
}
.ui-dialog .timezoneAutocompleteBock input { width: 100%; max-width: 27em; box-sizing: border-box; }
.ui-dialog .timezoneAutocompleteBock label { display: block; }
/* jQuery UI scales its widgets to 1.1em — the dialog follows the site's body size */
.ui-dialog, .ui-dialog .ui-widget { font-size: var(--fs-body); }
@media (max-width: 1023px) {
	.ui-dialog .continentTzones { min-height: 0; }
	.ui-dialog .continentTabs { gap: 2px; padding: 6px; }
	.ui-dialog .continentTabs li {
		padding: 5px 7px;
		font-size: 13px;
		letter-spacing: 0.2px;
	}
}

/* ================= TEXT-SIZE POLICY =================
   The 14px floor is enforced AT THE SOURCE: swamijitv.css and the public page
   styles contain no sub-14px font-size anymore (normalized 2026-08-04).
   Only descriptions need promoting to body size: */
#highlights .video-description,
#latest-premium-videos .video-description,
#liveProgram .video-description,

/* UIKit resets that must not leak into the player controls */
.video-js button { text-transform: none; }

/* ================= 3D CONTROLS ================= */
:root {
	--btn-edge-soft: #c9ccd1;       /* shallow edge under the edition tabs */
	/* Standard button face: indigo */
	--btn-grad-hi: #1d477f;         /* gradient top                        */
	--btn-grad-lo: var(--indigo);   /* gradient bottom                     */
	--btn-hover: #21528f;           /* hover face (solid, per the v2 recipe) */
	--btn-active: #081c3f;          /* pressed face                        */
	/* Footer buttons keep the orange face */
	--btn-orange-hi: #ff9a3f;
	--btn-orange-lo: #e46f12;
	--btn-orange-hover: #ff8c33;
}

/* Primary buttons: the UIKit v2 "Gradient" 3D recipe on the brand color —
   gradient face, darker bottom border, top-lit text; active = pressed inset */
.button-primary, a.button-primary,
.button-secondary,
.cast-button:not([disabled]) {
	background-color: var(--indigo);
	background-image: linear-gradient(to bottom, var(--btn-grad-hi), var(--btn-grad-lo));
	background-origin: border-box;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom-color: rgba(0, 0, 0, 0.4);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
	box-shadow: none;
	transition: background-color 0.15s ease;
}
.button-primary:hover, a.button-primary:hover,
.button-secondary:hover,
.cast-button:not([disabled]):hover {
	background-color: var(--btn-hover);
	background-image: none;
}
.button-primary:active, a.button-primary:active,
.button-secondary:active,
.cast-button:not([disabled]):active {
	background-color: var(--btn-active);
	background-image: none;
	border-color: rgba(0, 0, 0, 0.2);
	border-top-color: rgba(0, 0, 0, 0.4);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Edition tabs: raised pills; the ACTIVE tab sits pressed-in */
.video-channel-list > li {
	background: #fff;
	box-shadow: 0 2px 0 var(--btn-edge-soft), 0 3px 8px rgba(0, 0, 0, 0.06);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
	cursor: pointer;
}
.video-channel-list > li:hover:not(.active) { transform: translateY(-1px); }
.video-channel-list > li.active {
	transform: translateY(2px);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Donation meter: cylindrical bar (horizontal light band) + deeper card shadow */
.donation-meter-balance-left {
	background: linear-gradient(90deg, #d8dadd, #f2f3f5 45%, #d8dadd);
	border-radius: 999px;
}
.donation-meter-balance-current {
	background: linear-gradient(90deg, var(--brand-dark), #ffa057 45%, var(--brand-dark));
	border-radius: 999px 999px 3px 3px;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.35);
}
.donation-block { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); }

/* ================= MOBILE (the site's phone breakpoint) =================
   One place for the phone adjustments: body text one point smaller, buttons
   20% smaller, and button rows wrap instead of running off the screen. */
@media (max-width: 1023px) {
	:root { --fs-body: 16px; }
	/* Phones: no grey surround (nothing to frame any more) and the desktop 28px
	   gutter cut back to 12px — content still keeps a margin, never flush */
	body, #main-content-block { background: #fff; }
	#main-content-block .container,
	#main-content-block .container:has(> .main-content-block-layout),
	#main-content-block .container:has(#program-layout),
	#main-content-block .container:has(.series-panel),
	#main-content-block .container:has(.video-page-layout),
	#main-content-block .container:has(.archive-layout) { padding: 0 12px; }
	/* logo, "TV Channel" and the menu icon share one line: the h1's own bottom
	   margin made its cell taller than the text and pushed the title up */
	.h1-layout.row-layout { align-items: center; margin-bottom: 0; }
	header h1 { margin: 0; }
	/* edition tabs: indigo throughout — the orange underline still marks the
	   active one — and one point below the label size */
	.edition-tabs > li a,
	.edition-tabs > li.active a {
		color: var(--indigo) !important;
		font-size: calc(var(--fs-label) - 1px);
	}
	/* the desktop tab gap (2.66em) pushed the third edition onto a second row;
	   even padding keeps the row centred */
	.video-channel-list.edition-tabs > li,
	.video-channel-list.edition-tabs > li.active,
	.video-channel-list.edition-tabs > li:hover { padding: 0 6px; }
	.edition-tabs > li a { letter-spacing: 0.5px; }
	/* every tab row above the content stacks and centres, with one spacing */
	.page-menu { flex-direction: column; align-items: center; margin: 12px 0 4px 0; }
	.page-menu > .layout-block,
	.page-menu > .layout-block-stretched { width: 100%; margin: 0; }
	.page-menu > .layout-block,
	.page-menu > .layout-block-stretched,
	.page-menu .video-channel-list,
	#program-channel-selector,
	#program-channel-selector .video-channel-list { text-align: center; }
	#program-channel-selector { margin-top: 8px; }
	/* the timezone selector is reachable from the menu on phones */
	.page-menu .channel-list-panel { display: none; }
	.cast-button,
	.button-secondary,
	.button-primary {
		font-size: calc(var(--fs-small) * 0.8);
		padding: calc(8px * 0.8) calc(16px * 0.8);
	}
	.video-shop-col,
	.video-detail-buttons,
	.ask-actions { flex-wrap: wrap; }
	/* The fixed-height row overlay is a desktop layout (it offsets the text by
	   the snapshot width); on phones rows stack normally instead. */
	.video-side-list-col .shop-video-layout > .layout-block-stretched.column-layout {
		position: static;
		left: auto;
		right: auto;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.video-side-list-col .video-info-layout,
	.shop-items-layout .shop-video-layout { flex-wrap: wrap; }
	/* The snapshot column carries a desktop flex-basis (554px archive / 470px
	   side list). Once the row stacks, that basis becomes a HEIGHT and left a
	   huge white gap under each snapshot. */
	.archive-main .video-info-layout > .layout-block:first-child,
	.video-side-list-col .video-info-layout > .layout-block:first-child {
		flex: 0 0 auto;
		max-width: 100%;
	}
	.video-side-list-col .video-snapshot,
	.shop-items-layout .video-snapshot { width: 100%; max-width: 100%; }
	/* replay rows: the 480px snapshot is a desktop size */
	.replay-item .replay-poster-content { flex-wrap: wrap; }
	.replay-item .replay-poster-image { width: 100%; max-width: 100%; }
}

/* The main menu needs ~1250px for its nine items (logo + gaps included), so the
   burger takes over below 1280 instead of overflowing the header. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.stv-menu.desktop { display: none !important; }
	.mobile-menu-button-panel.not-desktop { display: block !important; }
	#mobile-menu-panel.not-desktop { display: block !important; }   /* off-canvas until opened */
	#mobile-menu-curtain.not-desktop.mobile-menu-panel-visible { display: block !important; }
	header h1 { display: block; }   /* the title takes the row the menu vacated */
	.h1-layout.row-layout { align-items: center; }
}

/* Narrow phones (320-359px): the three editions only stay on one line at one
   point less again */
@media (max-width: 359px) {
	.edition-tabs > li a,
	.edition-tabs > li.active a {
		font-size: calc(var(--fs-label) - 2px);
		letter-spacing: 0.3px;
	}
	.video-channel-list.edition-tabs > li,
	.video-channel-list.edition-tabs > li.active,
	.video-channel-list.edition-tabs > li:hover { padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.button-primary, .button-secondary, .cast-button,
	.video-channel-list > li { transition: none; }
}