/*
 * Raycin Video Hub — Stylesheet
 * Same dark gaming palette as CR Race Stats, so both plugins read as one
 * family on raycin.com:
 *   Background: #2a3740   Text: #f0f0f0
 *   Cyan accent: #00e5ff  Orange accent: #ff6b35
 */

:root {
	--rvh-bg:          #2a3740;
	--rvh-bg-card:     #222e36;
	--rvh-border:      rgba(0, 229, 255, 0.25);
	--rvh-border-hov:  rgba(0, 229, 255, 0.65);
	--rvh-text:        #f0f0f0;
	--rvh-muted:       #8a9ba8;
	--rvh-cyan:        #00e5ff;
	--rvh-orange:      #ff6b35;
	--rvh-radius:      6px;
}

.rvh-panel {
	background:    var(--rvh-bg);
	border:        1px solid var(--rvh-border);
	border-radius: var(--rvh-radius);
	padding:       1.25em;
	margin:        1.5em 0;
	color:         var(--rvh-text);
	font-family:   "Open Sans", Tahoma, Geneva, sans-serif;
}

.rvh-panel-header {
	font-size:     1.2em;
	font-weight:   700;
	margin-bottom: 0.75em;
	color:         var(--rvh-cyan);
}

.rvh-empty {
	color: var(--rvh-muted);
	padding: 1em 0;
}

/* ── Search + category ────────────────────────────────────────────────────── */
.rvh-controls {
	display:       flex;
	gap:           0.75em;
	flex-wrap:     wrap;
	margin-bottom: 0.75em;
}
.rvh-search,
.rvh-cat-select {
	background:    var(--rvh-bg-card);
	border:        1px solid var(--rvh-border);
	color:         var(--rvh-text);
	border-radius: var(--rvh-radius);
	padding:       0.5em 0.9em;
	font-size:     0.88em;
	font-family:   inherit;
}
.rvh-search {
	flex:      1 1 220px;
	min-width: 160px;
}
.rvh-search:focus,
.rvh-cat-select:focus {
	outline:      none;
	border-color: var(--rvh-border-hov);
}

/* ── Tag pills ─────────────────────────────────────────────────────────────── */
.rvh-tag-pills {
	display:       flex;
	gap:           0.4em;
	flex-wrap:     wrap;
	margin-bottom: 1em;
}
.rvh-tag-pill {
	background:    transparent;
	border:        1px solid var(--rvh-border);
	color:         var(--rvh-muted);
	border-radius: 999px;
	padding:       0.3em 0.85em;
	font-size:     0.78em;
	cursor:        pointer;
	transition:    all 0.2s;
}
.rvh-tag-pill:hover {
	border-color: var(--rvh-border-hov);
	color:        var(--rvh-text);
}
.rvh-tag-pill.is-active {
	background:   var(--rvh-orange);
	border-color: var(--rvh-orange);
	color:        #1a0f08;
	font-weight:  600;
}

.rvh-empty-filtered {
	color:   var(--rvh-muted);
	padding: 1em 0;
	grid-column: 1 / -1;
}

/* ── Filter tabs ───────────────────────────────────────────────────────────── */
.rvh-filters {
	display:       flex;
	gap:           0.5em;
	margin-bottom: 1em;
}
.rvh-filter-btn {
	background:    transparent;
	border:        1px solid var(--rvh-border);
	color:         var(--rvh-muted);
	border-radius: var(--rvh-radius);
	padding:       0.4em 1em;
	font-size:     0.85em;
	font-weight:   600;
	cursor:        pointer;
	transition:    all 0.2s;
}
.rvh-filter-btn:hover {
	border-color: var(--rvh-border-hov);
	color:        var(--rvh-text);
}
.rvh-filter-btn.is-active {
	background:   var(--rvh-cyan);
	border-color: var(--rvh-cyan);
	color:        #0b1418;
}

/* ── Grid ──────────────────────────────────────────────────────────────────── */
.rvh-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:                   1em;
}

.rvh-card {
	display:       flex;
	flex-direction: column;
	background:    var(--rvh-bg-card);
	border:        1px solid var(--rvh-border);
	border-radius: var(--rvh-radius);
	padding:       0;
	overflow:      hidden;
	cursor:        pointer;
	text-align:    left;
	font-family:   inherit;
	color:         inherit;
	transition:    border-color 0.2s, transform 0.2s;
}
.rvh-card:hover {
	border-color: var(--rvh-border-hov);
	transform:    translateY(-2px);
}
.rvh-card:focus-visible {
	outline: 2px solid var(--rvh-cyan);
	outline-offset: 2px;
}

.rvh-thumb {
	position:   relative;
	display:    block;
	aspect-ratio: 16 / 9;
	background: #000;
}
.rvh-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}
.rvh-thumb-fallback {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	font-size:       2.5em;
}
.rvh-play {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1.4em;
	color:           #fff;
	background:      rgba(0, 0, 0, 0.25);
	opacity:         0;
	transition:      opacity 0.2s;
}
.rvh-card:hover .rvh-play,
.rvh-card:focus-visible .rvh-play {
	opacity: 1;
}

.rvh-card-title {
	padding:        0.6em 0.75em 0.2em;
	font-weight:    600;
	font-size:      0.92em;
	line-height:    1.3;
}
.rvh-card-source {
	padding:    0 0.75em 0.7em;
	font-size:  0.78em;
	color:      var(--rvh-muted);
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
.rvh-lightbox {
	position:        fixed;
	inset:           0;
	background:      rgba(0, 0, 0, 0.85);
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         100000;
	padding:         2em;
}
.rvh-lightbox[hidden] { display: none; }

.rvh-lightbox-inner {
	position:  relative;
	width:     100%;
	max-width: 960px;
}
.rvh-lightbox-close {
	position:      absolute;
	top:           -2.2em;
	right:         0;
	background:    transparent;
	border:        none;
	color:         #fff;
	font-size:     1.4em;
	cursor:        pointer;
	line-height:   1;
}
.rvh-lightbox-media {
	position:      relative;
	width:         100%;
	aspect-ratio:  16 / 9;
	background:    #000;
	border-radius: var(--rvh-radius);
	overflow:      hidden;
}
.rvh-lightbox-media iframe,
.rvh-lightbox-media video {
	width:  100%;
	height: 100%;
	border: 0;
	display: block;
}