/* ============================================================================
   THEME: xxxvides — "Steel Blue"
   ----------------------------------------------------------------------------
   Loaded AFTER style.min.css by views/xxxvides/partials/head.ejs, so every
   rule here overrides the default skin. Design language: cool slate
   blue-gray base, single muted STEEL-BLUE accent (#4f8fc0), soft 8px
   corners, quiet borders, high-contrast readable text. Professional and
   restrained — one accent color, no gradients louder than a subtle
   header tint.
   Most of the re-theme is a :root variable swap (style.css is fully
   variable-driven); the rest are targeted component restyles plus overrides
   for the handful of colors style.css hardcodes outside variables.
   ========================================================================== */

:root {
	--color-bg-primary: #0f172a;
	--color-bg-secondary: #16203a;
	--color-bg-header: #111b31;
	--color-bg-nav: #16203a;
	--color-bg-footer: #0b1222;
	--color-bg-card: #15203a;
	--color-bg-card-hover: #1b2a4a;
	--color-bg-dark: #0a101f;
	--color-text-primary: #e8edf5;
	--color-text-muted: #8b98ad;
	--color-text-dim: #aab6c8;
	--color-accent: #4f8fc0;
	--color-accent-yellow: #6fb3e0;
	--color-border: rgba(148, 170, 200, .14);
	--color-overlay: rgba(6, 10, 20, .65);
	--color-search-bg: #0d1526;
	--color-search-bg-focus: #0a1120;
	--color-search-border: rgba(148, 170, 200, .18);
	--color-search-placeholder: #6b7a92;
	--color-suggest-bg: #16203a;
	--color-suggest-border: rgba(148, 170, 200, .16);
	--radius-card: 8px;
	--radius-btn: 6px;
	--shadow-card: 0 2px 10px rgba(4, 8, 18, .5);
	/* Theme-local tokens (xv- prefix, not used by style.css) */
	--xv-steel: #4f8fc0;
	--xv-steel-bright: #6fb3e0;
	--xv-steel-soft: rgba(79, 143, 192, .14);
	--xv-line: rgba(148, 170, 200, .14);
}

/* The site's Light/Dark toggle adds body.dark-mode — this theme is dark by
   design, so both modes share the same palette. */
body.dark-mode {
	--color-bg-primary: #0f172a;
	--color-bg-secondary: #16203a;
	--color-bg-header: #111b31;
	--color-bg-nav: #16203a;
	--color-bg-footer: #0b1222;
	--color-bg-card: #15203a;
	--color-bg-card-hover: #1b2a4a;
	--color-bg-dark: #0a101f;
	--color-search-bg: #0d1526;
	--color-search-bg-focus: #0a1120;
	--color-search-border: rgba(148, 170, 200, .18);
	--color-search-placeholder: #6b7a92;
	--color-suggest-bg: #16203a;
	--color-suggest-border: rgba(148, 170, 200, .16);
}

::selection {
	background: rgba(79, 143, 192, .45);
	color: #fff;
}

::-webkit-scrollbar-thumb {
	background: #33517a;
	border-radius: 4px;
}

/* ── Header — deep slate bar, steel accent line ─────────────────────────── */
.site-header {
	background: linear-gradient(180deg, #13203a, #101a30);
	border-bottom: 1px solid var(--xv-steel);
	box-shadow: 0 2px 10px rgba(4, 8, 18, .55);
}

.site-logo .logo-text {
	background: none;
	color: #f2f6fb;
	-webkit-text-fill-color: #f2f6fb;
	filter: drop-shadow(0 1px 2px rgba(79, 143, 192, .45));
	letter-spacing: .3px;
}

.site-logo .logo-sub {
	color: var(--xv-steel-bright);
}

.hdr-btn {
	color: #cdd8e6;
}

.hdr-btn:hover {
	background: var(--xv-steel-soft);
	color: var(--xv-steel-bright);
}

.header-search-desktop {
	background: var(--color-search-bg);
	border: 1px solid var(--color-search-border);
	border-radius: 6px;
}

.header-search-desktop:focus-within {
	border-color: var(--xv-steel);
	box-shadow: 0 0 0 3px rgba(79, 143, 192, .22);
}

.header-search-desktop button:hover {
	color: var(--xv-steel-bright);
}

/* ── Secondary nav — quiet strip, steel underline active ────────────────── */
.secondary-nav {
	background: #131e36;
	border-bottom: 1px solid var(--xv-line);
}

.nav-item {
	border-radius: 6px;
}

.nav-icon,
.offcanvas-nav-link i,
.fa-venus {
	color: var(--xv-steel-bright);
}

.nav-item.active,
.nav-item:hover {
	background: var(--xv-steel-soft);
	border-color: rgba(79, 143, 192, .4);
	color: var(--xv-steel-bright);
}

.nav-item--special.active,
.nav-item--special:hover {
	background: var(--xv-steel);
	color: #fff;
}

.nav-ticker-label {
	background: var(--xv-steel);
	border-radius: 4px;
	color: #fff;
}

/* ── Video cards — soft corners, gentle lift ────────────────────────────── */
.video-card {
	border: 1px solid var(--xv-line);
	transition: border-color .15s, transform .15s, box-shadow .15s;
}

.video-card:hover {
	border-color: rgba(79, 143, 192, .5);
	box-shadow: 0 6px 18px rgba(4, 8, 18, .55);
	transform: translateY(-2px);
}

.video-duration,
.video-views {
	background: rgba(8, 13, 26, .85);
	border-radius: 4px;
}

.video-quality-badge {
	border-radius: 4px;
}

.video-quality-badge:is([data-hd], .hd) {
	background: var(--xv-steel);
	color: #fff;
}

.video-channel {
	background: #1a2745;
	border: 1px solid var(--xv-line);
	border-radius: 5px;
	color: #aab6c8;
}

.video-channel:hover {
	background: var(--xv-steel-soft);
	border-color: rgba(79, 143, 192, .45);
	color: var(--xv-steel-bright);
}

.video-title a:hover {
	color: var(--xv-steel-bright);
}

/* ── Section headings — steel left rule ─────────────────────────────────── */
.section-heading {
	border-left: 3px solid var(--xv-steel);
	padding-left: 10px;
}

.section-title {
	color: #f2f6fb;
}

/* ── Filter bar / tag pills ─────────────────────────────────────────────── */
.filter-btn,
.tag-pill,
.page-kw-tag {
	border-radius: 6px;
}

.filter-btn:hover,
.filter-btn[aria-expanded=true],
.filter-wrap.is-active .filter-btn {
	border-color: var(--xv-steel);
	color: var(--xv-steel-bright);
}

.tag-pill:hover,
.page-kw-tag:hover {
	background: var(--xv-steel-soft);
	border-color: rgba(79, 143, 192, .45);
	color: var(--xv-steel-bright);
}

.filter-opt.active {
	color: var(--xv-steel-bright);
}

/* ── Pagination — rounded, steel active ─────────────────────────────────── */
.pgn-btn {
	background: #1a2745;
	border: 1px solid var(--xv-line);
	border-radius: 6px;
	color: #cdd8e6;
}

.pgn-btn:hover:not(:disabled):not(.pgn-active) {
	border-color: var(--xv-steel);
	color: var(--xv-steel-bright);
}

.pgn-btn.pgn-active {
	background: var(--xv-steel);
	border-color: var(--xv-steel);
	color: #fff;
	font-weight: 600;
}

.pgn-arrow {
	background: #1a2745;
	border: 1px solid rgba(79, 143, 192, .45);
	color: var(--xv-steel-bright);
}

.pgn-arrow:hover:not(:disabled) {
	background: var(--xv-steel);
	color: #fff;
}

.load-more-btn {
	background: var(--xv-steel);
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-weight: 600;
}

.load-more-btn:hover {
	background: var(--xv-steel-bright);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
	background: #0b1222;
	border-top: 1px solid var(--xv-steel);
}

/* ── Off-canvas / drawers / panels ──────────────────────────────────────── */
#mobile-menu .uk-offcanvas-bar,
.settings-panel,
.msearch-panel {
	background: #131e36;
}

.offcanvas-nav li a:hover,
.offcanvas-nav-link.active,
.offcanvas-nav-link:hover {
	background: var(--xv-steel-soft);
	color: var(--xv-steel-bright);
}

.sp-col-btn.active,
.sp-theme-btn.active,
.lang-card.active {
	background: var(--xv-steel);
	border-color: transparent;
	color: #fff;
}

/* ── Profile / country cards ────────────────────────────────────────────── */
.profile-card,
.country-card {
	border: 1px solid var(--xv-line);
}

.profile-card:hover,
.country-card:hover {
	border-color: var(--xv-steel);
}

/* ── Watch page — replace the default skin's hardcoded accents ──────────── */
.vw-tab-badge {
	background: var(--xv-steel);
}

.vw-side-title i {
	color: var(--xv-steel-bright);
}

.ql-fhd {
	background: var(--xv-steel-soft);
	color: var(--xv-steel-bright);
}

.vw-badge--hd {
	background: var(--xv-steel-soft);
	border-color: rgba(79, 143, 192, .4);
	color: var(--xv-steel-bright);
}

.channel-src-xvs {
	color: var(--xv-steel-bright);
}

.ql-auto,
.vw-pl-q-badge.ql-auto {
	background: var(--xv-steel-soft);
	color: var(--xv-steel-bright);
}

/* ── Breadcrumbs / misc accents ─────────────────────────────────────────── */
.breadcrumb--chevron .breadcrumb-accent {
	background: var(--xv-steel);
}

.home-intro-brand {
	color: var(--xv-steel-bright);
}

.skeleton-line:after,
.skeleton-thumb:after {
	background: linear-gradient(90deg, transparent, rgba(148, 170, 200, .06), transparent);
}