/**
 * Premium 3-Column Live Stream Hub Stylesheet
 * MafaLive Theme - Studio Broadcast Grade
 */

:root {
	--gmr-ls-bg: #012350;
	--gmr-ls-card-bg: #013370;
	--gmr-ls-card-bg-subtle: #02418e;
	--gmr-ls-border: rgba(255, 255, 255, 0.14);
	--gmr-ls-border-hover: rgba(255, 255, 255, 0.32);
	--gmr-ls-accent: #e50914;
	--gmr-ls-accent-rgb: 229, 9, 20;
	--gmr-ls-green: #00e676;
	--gmr-ls-text-main: #f4f8fc;
	--gmr-ls-text-muted: #a6c0de;
	--gmr-ls-radius: 8px;
	--gmr-ls-glow: 0 10px 36px rgba(1, 35, 80, 0.55);
}

/* Base Live Stream Section */
.gmr-livestream-section {
	margin-top: 5px;
	margin-bottom: 20px;
	background: var(--gmr-ls-bg);
	border: 1px solid var(--gmr-ls-border);
	border-radius: var(--gmr-ls-radius);
	box-shadow: var(--gmr-ls-glow);
	padding: 16px;
	color: var(--gmr-ls-text-main);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
}

/* Full-Width Theater Layout (Home Page: TV Live + Radio Studio) */
.gmr-content-fullwidth {
	padding-top: 5px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.gmr-theater-row {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
}

/* Legacy compat */
.gmr-livestream-theater-wrap {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.gmr-content:has(.gmr-livestream-theater-wrap),
body.home .gmr-content {
	padding-top: 5px !important;
}

.gmr-livestream-section *,
.gmr-livestream-section *::before,
.gmr-livestream-section *::after {
	box-sizing: border-box;
}

/* Background Ambient Glow */
.gmr-livestream-section::before {
	content: "";
	position: absolute;
	top: -50px;
	left: 25%;
	width: 50%;
	height: 120px;
	background: radial-gradient(circle, rgba(1, 51, 112, 0.5) 0%, rgba(1, 35, 80, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

/* Header Bar */
.gmr-livestream-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--gmr-ls-border);
	position: relative;
	z-index: 1;
}

.gmr-livestream-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.gmr-livestream-pulse-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(var(--gmr-ls-accent-rgb), 0.15);
	border: 1px solid rgba(var(--gmr-ls-accent-rgb), 0.4);
	color: #ff4d4f;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.gmr-pulse-dot {
	width: 8px;
	height: 8px;
	background-color: #ff3333;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255, 51, 51, 0.7);
	animation: gmrPulseRadar 1.5s infinite;
}

@keyframes gmrPulseRadar {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 51, 51, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 7px rgba(255, 51, 51, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 51, 51, 0);
	}
}

.gmr-livestream-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.gmr-livestream-section-heading {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
	color: #ffffff;
	letter-spacing: -0.3px;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	min-width: 0;
}

.gmr-livestream-header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.gmr-livestream-stat-pill,
.gmr-livestream-quality-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--gmr-ls-card-bg);
	border: 1px solid var(--gmr-ls-border);
	padding: 5px 11px;
	border-radius: 6px;
	font-size: 12px;
	color: var(--gmr-ls-text-muted);
	flex-shrink: 0;
}

.gmr-icon-fire {
	color: #ff9800;
}

.gmr-stat-viewers {
	color: #ffffff;
	font-weight: 700;
}

.gmr-quality-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gmr-ls-green);
	box-shadow: 0 0 6px var(--gmr-ls-green);
}

/* Bright High-Contrast Date & Clock Pill in Header Top-Right */
.gmr-livestream-date-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	padding: 5px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff !important;
	letter-spacing: 0.2px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	transition: all 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

.gmr-livestream-date-pill:hover {
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.6);
	color: #ffffff !important;
}

.gmr-livestream-date-pill .gmr-date-icon {
	color: #00e676 !important;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.gmr-livestream-date-pill .gmr-header-date-text {
	color: #ffffff !important;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.gmr-date-time-divider {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
	margin: 0 1px;
}

.gmr-header-live-clock {
	color: #00e676 !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2px;
}

/* Hide only the very top bar (#topnavwrap) */
#topnavwrap {
	display: none !important;
}

/* ==========================================================================
   MOBILE HEADER & HAMBURGER NAVIGATION
   ========================================================================== */
.gmr-mobile-header-bar {
	display: none;
	background: #011f48;
	background: linear-gradient(135deg, #012859 0%, #01142e 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	padding: 8px 12px;
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.gmr-mobile-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}

/* 1. SISI KIRI: Hamburger Button (Clean Transparent without faint box) */
.gmr-mobile-hamburger-btn {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #ffffff;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	outline: none;
	flex-shrink: 0;
	transition: opacity 0.2s ease, transform 0.15s ease;
}

.gmr-mobile-hamburger-btn:hover,
.gmr-mobile-hamburger-btn:active {
	background: transparent !important;
	border: none !important;
	opacity: 0.75;
	transform: scale(0.95);
}

.gmr-hamburger-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 14px;
}

.gmr-hamburger-icon span {
	display: block;
	height: 2.2px;
	width: 100%;
	background: #ffffff;
	border-radius: 2px;
	transition: all 0.25s ease;
}

/* 2. SISI TENGAH: Logo */
.gmr-mobile-header-logo {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	text-align: center;
	padding: 0 4px;
}

.gmr-mob-logo-img {
	max-height: 34px;
	max-width: 160px;
	width: auto;
	height: auto;
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
}

.gmr-mob-logo-text {
	font-size: 14px;
	font-weight: 800;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.2px;
}

/* 3. SISI KANAN: Tombol Radio / TV Live Ringkas (No FM badge) */
.gmr-mobile-header-action {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.gmr-mob-switch-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	padding: 4px 9px;
	border-radius: 20px;
	text-decoration: none;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	transition: all 0.2s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}

.gmr-mob-switch-btn:hover,
.gmr-mob-switch-btn:active {
	background: #02418e;
	border-color: #00c2ff;
	color: #ffffff;
}

.gmr-mob-switch-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #00e676;
	box-shadow: 0 0 6px #00e676;
	display: inline-block;
	flex-shrink: 0;
}

.gmr-mob-switch-btn.is-radio-active .gmr-mob-switch-pulse {
	background: #ff3333;
	box-shadow: 0 0 6px #ff3333;
}

.gmr-mob-switch-label {
	color: #ffffff;
	font-weight: 700;
	white-space: nowrap;
}

.gmr-mob-switch-tag {
	display: none !important;
}

/* ==========================================================================
   OFF-CANVAS MOBILE DRAWER STYLES
   ========================================================================== */
.gmr-mobile-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	visibility: hidden;
	transition: visibility 0.3s ease;
	pointer-events: none;
}

.gmr-mobile-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.gmr-drawer-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gmr-mobile-drawer.is-open .gmr-drawer-backdrop {
	opacity: 1;
}

.gmr-drawer-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 82%;
	max-width: 310px;
	height: 100%;
	background: #011838;
	background: linear-gradient(180deg, #012859 0%, #011129 100%);
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 10px 0 35px rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 2;
}

.gmr-mobile-drawer.is-open .gmr-drawer-panel {
	transform: translateX(0);
}

.gmr-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.2);
}

.gmr-drawer-title {
	font-size: 16px;
	font-weight: 800;
	color: #ffffff;
}

.gmr-drawer-close-btn {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: all 0.2s ease;
}

.gmr-drawer-close-btn:hover {
	background: rgba(229, 9, 20, 0.8);
	border-color: #e50914;
}

.gmr-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	-webkit-overflow-scrolling: touch;
}

.gmr-drawer-search {
	margin-bottom: 16px;
}

.gmr-drawer-search-form {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	overflow: hidden;
}

.gmr-drawer-search-form input {
	flex: 1;
	background: transparent;
	border: none;
	color: #ffffff;
	padding: 8px 12px;
	font-size: 13px;
	outline: none;
}

.gmr-drawer-search-form input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.gmr-drawer-search-form button {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	padding: 8px 12px;
	cursor: pointer;
}

.gmr-drawer-menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gmr-drawer-menu-list li {
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.gmr-drawer-menu-list li a {
	display: block;
	padding: 11px 10px;
	color: #e2e8f0;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.15s ease;
	border-radius: 4px;
}

.gmr-drawer-menu-list li a:hover,
.gmr-drawer-menu-list li.current-menu-item > a {
	background: rgba(255, 255, 255, 0.1);
	color: #00e676;
	padding-left: 14px;
}

.gmr-drawer-secondary-menu {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (DESKTOP VS MOBILE SWITCH)
   ========================================================================== */
@media (max-width: 991px) {
	.gmr-mobile-header-bar {
		display: block !important;
	}
	.gmr-desktop-header,
	.gmr-desktop-mainmenu {
		display: none !important;
	}

	/* Hilangkan space / margin / padding di bawah header bar pada mode seluler */
	.gmr-content,
	.gmr-content-fullwidth,
	body.home .gmr-content,
	.gmr-content:has(.gmr-livestream-theater-wrap) {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	body.home .gmr-content > .container,
	body.home .gmr-content > .container > .row {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	.gmr-livestream-theater-wrap {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	.gmr-livestream-section,
	.gmr-radio-studio-section {
		margin-top: 0 !important;
		border-top: none !important;
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}

	/* Serasikan background seluruh area halaman mobile agar serasi berwarna biru semua tanpa celah abu-abu */
	body.home,
	body.home #page,
	body.home #content,
	body.home .gmr-content {
		background-color: var(--gmr-ls-bg, #012350) !important;
	}
}

@media (min-width: 992px) {
	.gmr-mobile-header-bar {
		display: none !important;
	}
	.gmr-mobile-drawer {
		display: none !important;
	}
	.gmr-desktop-header {
		display: block !important;
	}
	.gmr-desktop-mainmenu {
		display: block !important;
	}
}

/* Livestream Header Responsive Adjustments for Mobile */
@media (max-width: 600px) {
	.gmr-livestream-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.gmr-livestream-header-left {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		flex-wrap: nowrap;
	}
	.gmr-livestream-pulse-badge {
		flex-shrink: 0;
		font-size: 10px;
		padding: 3px 8px;
	}
	.gmr-livestream-section-heading {
		font-size: clamp(12px, 3.7vw, 15px);
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		flex: 1;
		min-width: 0;
		line-height: 1.3;
	}
	.gmr-livestream-header-right {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 6px;
		flex-wrap: wrap;
	}
	.gmr-livestream-stat-pill,
	.gmr-livestream-quality-pill,
	.gmr-switch-tv-btn {
		font-size: 11px;
		padding: 4px 8px;
		flex-shrink: 0;
	}
	.gmr-livestream-date-pill {
		font-size: 11.5px;
		padding: 6px 12px;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		margin-top: 2px;
	}
	.gmr-header-live-clock {
		font-size: 11.5px;
	}
}

/* 3-Column Studio Grid: Balanced 1fr 2.15fr 1.15fr */
.gmr-livestream-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr) minmax(0, 1.15fr);
	gap: 16px;
	align-items: stretch;
	position: relative;
	z-index: 1;
	width: 100%;
}

.gmr-livestream-col-left,
.gmr-livestream-col-center,
.gmr-livestream-col-right {
	min-width: 0;
	min-height: 0; /* Prevents flex children from stretching grid */
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

/* Common Column Box Styling */
.gmr-col-box {
	background: var(--gmr-ls-card-bg);
	border: 1px solid var(--gmr-ls-border);
	border-radius: 6px;
	padding: 12px;
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}

.gmr-col-box-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--gmr-ls-border);
}

.gmr-col-box-title svg {
	color: var(--gmr-ls-green);
	flex-shrink: 0;
}

.gmr-col-box-subtitle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--gmr-ls-text-muted);
	margin-top: 12px;
	margin-bottom: 8px;
}

/* KOLOM KIRI: Server Selector */
.gmr-server-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
}

.gmr-server-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--gmr-ls-card-bg-subtle);
	border: 1px solid var(--gmr-ls-border);
	border-radius: 6px;
	padding: 9px 10px;
	color: var(--gmr-ls-text-main);
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: all 0.2s ease;
	outline: none;
	gap: 8px;
}

.gmr-server-item:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--gmr-ls-border-hover);
	transform: translateX(2px);
}

.gmr-server-item.is-active {
	background: rgba(var(--gmr-ls-accent-rgb), 0.12);
	border-color: rgba(var(--gmr-ls-accent-rgb), 0.5);
	box-shadow: 0 0 12px rgba(var(--gmr-ls-accent-rgb), 0.2);
}

.gmr-server-main {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 1;
}

.gmr-server-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gmr-ls-green);
	box-shadow: 0 0 6px rgba(0, 230, 118, 0.6);
	flex-shrink: 0;
}

.gmr-server-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.gmr-server-name {
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gmr-server-item.is-active .gmr-server-name {
	color: #ff5252;
}

.gmr-server-meta {
	font-size: 10.5px;
	color: var(--gmr-ls-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gmr-ping-text {
	color: var(--gmr-ls-green);
	font-weight: 600;
}

.gmr-play-badge {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.gmr-server-item.is-active .gmr-play-badge,
.gmr-server-item:hover .gmr-play-badge {
	background: var(--gmr-ls-accent);
	color: #ffffff;
}

/* Related Live List (Kiri) */
.gmr-related-live-wrap {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--gmr-ls-border);
}

.gmr-related-live-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gmr-related-live-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.02);
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.gmr-related-live-item:hover {
	background: rgba(255, 255, 255, 0.06);
}

.gmr-related-live-thumb {
	position: relative;
	width: 50px;
	height: 35px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
}

.gmr-related-live-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gmr-mini-live-tag {
	position: absolute;
	bottom: 2px;
	left: 2px;
	background: #e50914;
	color: #ffffff;
	font-size: 7.5px;
	font-weight: 800;
	padding: 1px 3px;
	border-radius: 2px;
	letter-spacing: 0.5px;
}

.gmr-related-live-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow: hidden;
	min-width: 0;
}

.gmr-related-live-title {
	font-size: 11px;
	font-weight: 600;
	color: var(--gmr-ls-text-main);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.gmr-related-live-time {
	font-size: 9.5px;
	color: var(--gmr-ls-text-muted);
}

/* KOLOM TENGAH: Main Player Stage */
.gmr-player-stage {
	background: #001229;
	border: 1px solid var(--gmr-ls-border);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Top Overlay Bar above video */
.gmr-player-top-overlay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 12px;
	background: #012859;
	border-bottom: 1px solid var(--gmr-ls-border);
}

.gmr-top-overlay-left {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
}

.gmr-stream-indicator {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #e50914;
	color: #ffffff;
	font-size: 9.5px;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 3px;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.gmr-radar-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ffffff;
	animation: gmrPulseRadar 1.2s infinite;
}

.gmr-active-server-name {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--gmr-ls-text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gmr-playlist-counter-badge {
	display: inline-flex;
	align-items: center;
	background: rgba(0, 230, 118, 0.18);
	border: 1px solid rgba(0, 230, 118, 0.45);
	color: #00e676;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	letter-spacing: 0.3px;
	flex-shrink: 0;
}

.gmr-customizer-preview-pill {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 193, 7, 0.18);
	border: 1px solid rgba(255, 193, 7, 0.45);
	color: #ffc107;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	margin-right: 6px;
	flex-shrink: 0;
}

.gmr-live-clock {
	font-size: 11px;
	font-weight: 600;
	color: var(--gmr-ls-text-muted);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* 16:9 Video Container */
.gmr-video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	height: 0;
	background: #05070a;
	overflow: hidden;
}

/* ==========================================================================
   OFF-AIR STUDIO STANDBY SCREEN
   ========================================================================== */
.gmr-offair-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, #012859 0%, #011a3d 60%, #000f24 100%);
	z-index: 12;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	text-align: center;
	color: #ffffff;
}

.gmr-offair-content {
	max-width: 520px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	animation: gmrFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gmr-offair-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(229, 9, 20, 0.2);
	border: 1px solid rgba(229, 9, 20, 0.45);
	color: #ff6b6b;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.gmr-offair-dot {
	width: 7px;
	height: 7px;
	background: #ff3333;
	border-radius: 50%;
	box-shadow: 0 0 8px #ff3333;
	animation: gmrDotPulse 1.8s infinite;
}

.gmr-offair-icon-wrap {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(1, 51, 112, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00c2ff;
	margin-top: 2px;
}

.gmr-offair-title {
	font-size: 19px;
	font-weight: 800;
	margin: 0;
	color: #ffffff;
	letter-spacing: -0.2px;
	line-height: 1.25;
}

.gmr-offair-desc {
	font-size: 12.5px;
	color: #a6c0de;
	margin: 0;
	line-height: 1.5;
}

.gmr-offair-highlight {
	color: #00e676;
	font-weight: 700;
}

.gmr-offair-next-box {
	background: rgba(1, 35, 80, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: 8px 14px;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.gmr-offair-next-label {
	font-size: 10.5px;
	text-transform: uppercase;
	color: #8da4c4;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.gmr-offair-next-title {
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
}

.gmr-offair-countdown-box {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(0, 194, 255, 0.12);
	border: 1px solid rgba(0, 194, 255, 0.35);
	color: #ffffff;
	padding: 5px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
}

.gmr-offair-countdown-val {
	color: #00e676;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

@keyframes gmrFadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gmrDotPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.85); }
}

@media (max-width: 600px) {
	.gmr-offair-screen {
		padding: 12px;
	}
	.gmr-offair-title {
		font-size: 15px;
	}
	.gmr-offair-desc {
		font-size: 11px;
	}
	.gmr-offair-icon-wrap {
		width: 40px;
		height: 40px;
	}
	.gmr-offair-icon-wrap svg {
		width: 18px;
		height: 18px;
	}
	.gmr-offair-next-box {
		padding: 6px 10px;
	}
}

.gmr-livestream-iframe,
.gmr-livestream-video-tag,
.gmr-custom-iframe-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	object-fit: contain;
	background: #000;
}

/* Clean Broadcast Mode (Completely eliminates YouTube Overlays, Watermarks, and Center Icons) */
.gmr-video-container.gmr-clean-broadcast-mode {
	overflow: hidden;
	position: relative;
	background: #000;
}

.gmr-video-container.gmr-clean-broadcast-mode .gmr-livestream-iframe {
	position: absolute;
	top: -65px;
	left: -2px;
	width: calc(100% + 4px) !important;
	height: calc(100% + 130px) !important;
	border: 0;
	pointer-events: none !important; /* YouTube will NEVER receive direct hover or show center touch controls! */
	transform: scale(1.03);
	transform-origin: center center;
}

/* Transparent Click Shield (Handles clean user click-to-play/pause without triggering YouTube UI) */
.gmr-video-click-shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	background: transparent;
	cursor: pointer;
}

/* Custom Studio Brand Loading Spinner & Shield (Hides YouTube Red Play Button & Poster) */
.gmr-player-loader-shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #001229;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
	pointer-events: auto;
}

.gmr-player-loader-shield.is-loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.gmr-loader-brand-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 15px;
}

.gmr-loader-orbit-ring {
	position: relative;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gmr-loader-orbit-ring::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #00e676;
	border-right-color: #00c2ff;
	border-bottom-color: var(--gmr-ls-accent);
	animation: gmrOrbitSpin 1.1s linear infinite;
}

.gmr-loader-orbit-ring::after {
	content: "";
	position: absolute;
	top: -6px;
	left: -6px;
	right: -6px;
	bottom: -6px;
	border-radius: 50%;
	border: 2px dashed rgba(255, 255, 255, 0.2);
	animation: gmrOrbitSpinReverse 4s linear infinite;
}

@keyframes gmrOrbitSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes gmrOrbitSpinReverse {
	0% { transform: rotate(360deg); }
	100% { transform: rotate(0deg); }
}

.gmr-loader-core-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #013370 0%, #02418e 100%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00e676;
	box-shadow: 0 0 20px rgba(0, 194, 255, 0.4);
	animation: gmrPulseCore 1.5s ease-in-out infinite;
}

.gmr-loader-core-icon svg {
	margin-left: 2px;
}

@keyframes gmrPulseCore {
	0%, 100% { transform: scale(1); box-shadow: 0 0 16px rgba(0, 194, 255, 0.4); }
	50% { transform: scale(1.06); box-shadow: 0 0 24px rgba(0, 230, 118, 0.6); }
}

.gmr-loader-status-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gmr-loader-label {
	font-size: 11px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.gmr-loader-sub {
	font-size: 10px;
	color: var(--gmr-ls-text-muted);
}

/* Transparent Video Click Shield (Blocks Native YouTube OSD Overlay) */
.gmr-video-click-shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
	background: transparent;
	cursor: pointer;
}

/* Floating Smart Unmute Button (Bottom-Left) */
.gmr-unmute-prompt-btn {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(1, 43, 96, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	transition: all 0.2s ease;
	animation: gmrBounceIn 0.5s ease;
}

.gmr-unmute-prompt-btn:hover {
	background: var(--gmr-ls-accent);
	border-color: var(--gmr-ls-accent);
	transform: scale(1.05);
}

.gmr-unmute-icon {
	color: #ffd166;
}

.gmr-unmute-prompt-btn.is-hidden {
	display: none !important;
}

.gmr-radio-unmute-prompt-btn {
	top: 16px;
	right: 16px;
	bottom: auto;
	left: auto;
	z-index: 25;
	background: #00e676;
	color: #001229;
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 4px 20px rgba(0, 230, 118, 0.5);
	font-weight: 800;
	padding: 8px 16px;
	border-radius: 24px;
	cursor: pointer;
	animation: gmrRadioPulseGlow 1.6s infinite ease-in-out;
}

.gmr-radio-unmute-prompt-btn:hover {
	background: #00ff85;
	color: #001229;
	transform: scale(1.06);
}

.gmr-radio-unmute-prompt-btn .gmr-unmute-icon {
	color: #001229;
}

@keyframes gmrRadioPulseGlow {
	0%, 100% { box-shadow: 0 0 10px rgba(0, 230, 118, 0.4); transform: scale(1); }
	50% { box-shadow: 0 0 25px rgba(0, 230, 118, 0.85); transform: scale(1.04); }
}

/* Mini Play/Pause Button in Bottom-Right Corner */
.gmr-play-pause-btn {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(1, 43, 96, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	padding: 6px 11px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	transition: all 0.2s ease;
	animation: gmrBounceIn 0.5s ease;
}

.gmr-play-pause-btn:hover {
	background: var(--gmr-ls-accent);
	border-color: var(--gmr-ls-accent);
	transform: scale(1.05);
}

.gmr-play-pause-btn svg {
	color: #00e676;
	flex-shrink: 0;
}

@keyframes gmrBounceIn {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Action Controls Bar Under Player */
.gmr-player-action-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 12px;
	background: #111622;
	border-top: 1px solid var(--gmr-ls-border);
}

.gmr-stream-meta {
	flex: 1;
	min-width: 180px;
}

.gmr-stream-main-title {
	font-size: 14.5px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 4px 0;
	line-height: 1.35;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.gmr-stream-station-name {
	color: #ffffff;
}

.gmr-stream-prog-divider {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
	font-size: 12px;
}

.gmr-stream-current-prog-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(0, 194, 255, 0.12);
	border: 1px solid rgba(0, 194, 255, 0.35);
	color: #70d8ff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.2s ease;
	max-width: 100%;
}

.gmr-stream-current-prog-badge:hover {
	background: rgba(0, 194, 255, 0.2);
	border-color: rgba(0, 194, 255, 0.6);
	color: #ffffff;
}

.gmr-stream-prog-icon {
	font-size: 11px;
	line-height: 1;
}

.gmr-stream-prog-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gmr-stream-sub-title {
	font-size: 11px;
	color: var(--gmr-ls-text-muted);
	margin: 0;
}

.gmr-player-tools {
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
	flex-shrink: 0;
}

.gmr-tool-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--gmr-ls-card-bg-subtle);
	border: 1px solid var(--gmr-ls-border);
	color: var(--gmr-ls-text-main);
	padding: 6px 11px;
	border-radius: 5px;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	outline: none;
}

.gmr-tool-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--gmr-ls-border-hover);
	color: #ffffff;
}

.gmr-tool-btn-primary {
	background: rgba(var(--gmr-ls-accent-rgb), 0.2);
	border-color: rgba(var(--gmr-ls-accent-rgb), 0.5);
	color: #ffffff;
}

.gmr-tool-btn-primary:hover {
	background: var(--gmr-ls-accent);
	border-color: var(--gmr-ls-accent);
}

/* Share Popover */
.gmr-share-dropdown-wrap {
	position: relative;
}

.gmr-share-popover {
	display: none;
	position: absolute;
	right: 0;
	bottom: 100%;
	margin-bottom: 8px;
	background: #012859;
	border: 1px solid var(--gmr-ls-border);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	padding: 6px;
	min-width: 130px;
	flex-direction: column;
	gap: 4px;
	z-index: 20;
}

.gmr-share-popover.is-open {
	display: flex;
	animation: gmrFadeIn 0.2s ease;
}

@keyframes gmrFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.gmr-share-item {
	display: block;
	padding: 6px 10px;
	font-size: 11.5px;
	color: var(--gmr-ls-text-main);
	text-decoration: none !important;
	border-radius: 4px;
	border: none;
	background: transparent;
	width: 100%;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease;
}

.gmr-share-item:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.gmr-share-wa:hover { background: #25d366; color: #fff; }
.gmr-share-tg:hover { background: #0088cc; color: #fff; }
.gmr-share-fb:hover { background: #1877f2; color: #fff; }

/* KOLOM KANAN: Ruang Diskusi & Live Chat Kampus (Fixed Studio Height Card) */
.gmr-campus-chat-box {
	display: flex;
	flex-direction: column;
	padding: 12px;
	height: 100%;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.gmr-chat-box-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--gmr-ls-border);
	flex-shrink: 0;
}

.gmr-chat-header-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.gmr-chat-header-title svg {
	color: var(--gmr-ls-green);
}

.gmr-chat-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(0, 230, 118, 0.12);
	border: 1px solid rgba(0, 230, 118, 0.4);
	color: var(--gmr-ls-green);
	font-size: 8.5px;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 3px;
	letter-spacing: 0.5px;
}

.gmr-chat-online-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gmr-ls-green);
	animation: gmrPulseRadar 1.2s infinite;
}

/* Pinned Note from Moderator */
.gmr-chat-pinned-note {
	background: rgba(255, 209, 102, 0.08);
	border: 1px solid rgba(255, 209, 102, 0.25);
	border-radius: 5px;
	padding: 6px 8px;
	margin-bottom: 8px;
	font-size: 10px;
	color: #ffd166;
	line-height: 1.35;
	flex-shrink: 0;
}

/* Chat Messages Stream - Fixed flex scroll window */
.gmr-chat-messages {
	flex: 1 1 0;
	min-height: 0;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-right: 4px;
	margin-bottom: 8px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.gmr-chat-messages::-webkit-scrollbar {
	width: 3px;
}

.gmr-chat-messages::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}

.gmr-chat-msg {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	animation: gmrChatSlide 0.3s ease;
	width: 100%;
}

@keyframes gmrChatSlide {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.gmr-chat-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: #ffffff;
	flex-shrink: 0;
}

.gmr-av-red { background: #e50914; }
.gmr-av-blue { background: #1976d2; }
.gmr-av-green { background: #2e7d32; }
.gmr-av-user { background: #f59e0b; }
.gmr-av-mod { background: #7c3aed; font-size: 11px; }

.gmr-chat-body {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.04);
	padding: 6px 8px;
	border-radius: 5px;
	border: 1px solid var(--gmr-ls-border);
}

.gmr-chat-msg.is-moderator .gmr-chat-body {
	background: rgba(124, 58, 237, 0.1);
	border-color: rgba(124, 58, 237, 0.3);
}

.gmr-chat-msg.is-user-msg .gmr-chat-body {
	background: rgba(var(--gmr-ls-accent-rgb), 0.08);
	border-color: rgba(var(--gmr-ls-accent-rgb), 0.3);
}

.gmr-chat-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2px;
	gap: 4px;
}

.gmr-chat-user {
	font-size: 11px;
	font-weight: 700;
	color: #ffd166;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gmr-role-mod {
	color: #c084fc !important;
}

.gmr-chat-badge-student {
	font-size: 8px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.1);
	color: var(--gmr-ls-text-muted);
	padding: 1px 4px;
	border-radius: 2px;
}

.gmr-chat-time {
	font-size: 8.5px;
	color: var(--gmr-ls-text-muted);
	flex-shrink: 0;
}

.gmr-chat-text {
	font-size: 10.5px;
	color: var(--gmr-ls-text-main);
	line-height: 1.35;
	word-break: break-word;
}

/* User Identity Bar (Status) */
.gmr-chat-user-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--gmr-ls-border);
	border-radius: 4px;
	padding: 3px 7px;
	margin-bottom: 4px;
	font-size: 10px;
	color: var(--gmr-ls-text-muted);
}

.gmr-user-status-text {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gmr-user-status-text strong {
	color: #ffd166;
}

.gmr-change-identity-btn {
	background: transparent;
	border: none;
	color: var(--gmr-ls-green);
	font-size: 9.5px;
	font-weight: 700;
	cursor: pointer;
	padding: 1px 4px;
	border-radius: 2px;
	text-decoration: underline;
	transition: color 0.15s ease;
}

.gmr-change-identity-btn:hover {
	color: #ffffff;
}

.gmr-chat-input-area {
	width: 100%;
	flex-shrink: 0;
	margin-top: auto;
}

.gmr-chat-form {
	display: block;
	width: 100%;
	position: relative;
	flex-shrink: 0;
	margin-top: 6px;
	box-sizing: border-box;
}

.gmr-chat-input-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	position: relative;
	box-sizing: border-box;
}

.gmr-chat-input,
.gmr-chat-input-field,
input.gmr-chat-input,
input#gmr-chat-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 38px !important;
	line-height: normal;
	background: #001229 !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 6px;
	padding: 0 12px !important;
	font-size: 12px !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.gmr-chat-input:focus,
.gmr-chat-input-field:focus,
input.gmr-chat-input:focus,
input#gmr-chat-input:focus {
	border-color: #00e676 !important;
	background: #001938 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.25) !important;
}

.gmr-chat-input::placeholder,
.gmr-chat-input-field::placeholder,
input.gmr-chat-input::placeholder,
input#gmr-chat-input::placeholder {
	color: #8da4be !important;
	-webkit-text-fill-color: #8da4be !important;
	font-size: 11.5px;
}

.gmr-chat-send-btn {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	max-width: 36px;
	max-height: 36px;
	background: var(--gmr-ls-accent, #e50914);
	border: none;
	color: #ffffff;
	padding: 0;
	border-radius: 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	flex-shrink: 0;
	box-sizing: border-box;
}

.gmr-chat-send-btn svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	display: block;
	margin: 0 auto;
	transform: translate(1px, 0);
}

.gmr-chat-send-btn:hover {
	background: #b80710;
	box-shadow: 0 2px 8px rgba(229, 9, 20, 0.4);
}

.gmr-chat-send-btn:active {
	transform: scale(0.95);
}

.gmr-chat-send-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Identity Registration Modal Dialog (Pop-up 1x di awal) */
.gmr-chat-identity-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	padding: 15px;
	box-sizing: border-box;
}

.gmr-chat-identity-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.gmr-identity-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(5, 7, 10, 0.78);
	backdrop-filter: blur(5px);
}

.gmr-identity-modal-dialog {
	position: relative;
	background: #012859;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	width: 100%;
	max-width: 380px;
	padding: 18px 20px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
	z-index: 2;
	transform: scale(0.95);
	transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-sizing: border-box;
}

.gmr-chat-identity-modal.is-open .gmr-identity-modal-dialog {
	transform: scale(1);
}

.gmr-identity-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 10px;
}

.gmr-identity-modal-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: #ffffff;
}

.gmr-identity-modal-title svg {
	color: var(--gmr-ls-green);
}

.gmr-identity-modal-close {
	background: transparent;
	border: none;
	color: var(--gmr-ls-text-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	transition: color 0.15s ease;
}

.gmr-identity-modal-close:hover {
	color: #ffffff;
}

.gmr-identity-modal-desc {
	font-size: 11px;
	color: var(--gmr-ls-text-muted);
	line-height: 1.4;
	margin: 0 0 14px 0;
}

.gmr-identity-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gmr-form-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
}

.gmr-form-group label {
	font-size: 11px;
	font-weight: 600;
	color: #e2e8f0;
}

.gmr-identity-input,
input.gmr-identity-input {
	background: #001229 !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 6px;
	padding: 8px 12px !important;
	font-size: 12.5px !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	outline: none;
	transition: border-color 0.2s ease;
	width: 100%;
	box-sizing: border-box;
}

.gmr-identity-input:focus,
input.gmr-identity-input:focus {
	border-color: #00e676 !important;
	background: #001938 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.25) !important;
}

.gmr-identity-input::placeholder,
input.gmr-identity-input::placeholder {
	color: #8da4be !important;
	-webkit-text-fill-color: #8da4be !important;
}

.gmr-input-hint {
	font-size: 9.5px;
	color: var(--gmr-ls-text-muted);
	margin-top: 1px;
}

.gmr-identity-form-actions {
	margin-top: 4px;
}

.gmr-identity-submit-btn {
	width: 100%;
	background: var(--gmr-ls-accent);
	border: none;
	border-radius: 5px;
	padding: 9px;
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background 0.2s ease;
}

.gmr-identity-submit-btn:hover {
	background: #b80710;
}

/* Toast notification */
.gmr-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #012859;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 9px 18px;
	border-radius: 30px;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
}

.gmr-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */
@media (max-width: 1199px) {
	.gmr-livestream-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.15fr);
		gap: 12px;
	}
}

@media (max-width: 991px) {
	.gmr-livestream-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.gmr-livestream-col-center {
		grid-column: span 2;
		order: 1;
	}

	.gmr-livestream-col-left {
		order: 2;
		height: auto;
		min-height: auto;
		max-height: none;
		overflow: visible;
	}

	.gmr-livestream-col-left .gmr-col-box {
		height: auto;
		min-height: auto;
		max-height: none;
		overflow: visible;
	}

	.gmr-livestream-col-left .gmr-server-list {
		flex: none;
		height: auto;
		max-height: none;
		min-height: auto;
		overflow: visible;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.gmr-livestream-col-right {
		order: 3;
		height: 420px;
		max-height: 420px;
	}
}

@media (max-width: 767px) {
	.gmr-livestream-section,
	.gmr-radio-studio-section {
		padding: 10px;
		margin-top: 0 !important;
		margin-bottom: 20px;
		border-top: none !important;
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}

	.gmr-livestream-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.gmr-livestream-header-right {
		width: 100%;
		justify-content: space-between;
	}

	.gmr-livestream-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		display: flex;
		flex-direction: column;
	}

	.gmr-livestream-col-center {
		order: 1;
		width: 100%;
	}

	.gmr-livestream-col-left {
		order: 2;
		width: 100%;
		height: auto !important;
		max-height: none !important;
		min-height: auto !important;
		overflow: visible !important;
	}

	.gmr-livestream-col-left .gmr-col-box {
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.gmr-livestream-col-left .gmr-server-list {
		flex: none !important;
		height: auto !important;
		max-height: none !important;
		min-height: auto !important;
		overflow: visible !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
	}

	.gmr-server-item {
		padding: 10px 12px !important;
		min-height: 44px;
	}

	.gmr-livestream-col-right {
		order: 3;
		width: 100%;
		height: 380px;
		max-height: 380px;
	}

	.gmr-stream-main-title {
		font-size: 13.5px;
	}

	.gmr-player-action-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.gmr-player-tools {
		width: 100%;
		justify-content: space-between;
	}

	.gmr-tool-btn {
		flex: 1;
		justify-content: center;
		padding: 7px;
	}

	.gmr-share-dropdown-wrap {
		flex: 1;
	}

	.gmr-share-dropdown-wrap .gmr-tool-btn {
		width: 100%;
	}
}

/* ==========================================================================
   CATEGORY VIDEO GALLERY & VOD HUB
   ========================================================================== */
.gmr-category-theater-wrap {
	margin-top: 5px;
	margin-bottom: 25px;
	box-sizing: border-box;
}

.gmr-category-video-hub {
	background: var(--gmr-ls-bg);
	border: 1px solid var(--gmr-ls-border);
	border-radius: var(--gmr-ls-radius);
	padding: 16px;
	color: var(--gmr-ls-text-main);
	box-shadow: var(--gmr-ls-glow);
	box-sizing: border-box;
	width: 100%;
}

/* Category Hero Banner - Compact 1-Row Bar */
.gmr-category-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #012859;
	border: 1px solid var(--gmr-ls-border);
	border-radius: 6px;
	padding: 8px 16px;
	margin-bottom: 18px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.gmr-cat-hero-left {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1;
}

.gmr-cat-title {
	font-size: 17px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1;
	letter-spacing: -0.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gmr-cat-hero-right {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.gmr-cat-search-form {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gmr-cat-search-input-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}

.gmr-cat-search-icon {
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	color: #8da4be !important;
	pointer-events: none;
	z-index: 3;
	display: block;
	width: 13px;
	height: 13px;
}

.gmr-cat-search-input {
	background: #001229 !important;
	color: #ffffff !important;
	border: 1px solid var(--gmr-ls-border) !important;
	border-radius: 4px !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	line-height: 26px !important;
	padding: 0 10px 0 28px !important;
	font-size: 11.5px !important;
	width: 190px;
	outline: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	vertical-align: middle !important;
	transition: border-color 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
}

.gmr-cat-search-input::placeholder {
	color: #7a94b0 !important;
	opacity: 1;
}

.gmr-cat-search-input:focus {
	border-color: var(--gmr-ls-accent) !important;
	box-shadow: 0 0 8px rgba(229, 9, 20, 0.3) !important;
	width: 230px;
}

.gmr-cat-search-btn {
	background: var(--gmr-ls-accent) !important;
	color: #ffffff !important;
	border: 1px solid var(--gmr-ls-accent) !important;
	border-radius: 4px !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	line-height: 26px !important;
	padding: 0 11px !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	flex-shrink: 0;
	vertical-align: middle !important;
	transition: background 0.2s ease, transform 0.15s ease;
}

.gmr-cat-search-btn span {
	line-height: 1 !important;
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gmr-cat-search-btn:hover {
	background: #b80710 !important;
	border-color: #b80710 !important;
}

/* 16:9 Video Gallery Grid */
.gmr-video-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
	margin-bottom: 24px;
}

.gmr-video-card {
	background: var(--gmr-ls-card-bg);
	border: 1px solid var(--gmr-ls-border);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.gmr-video-card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--gmr-ls-accent-rgb), 0.5);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.gmr-video-thumb-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	background: #000a18;
	overflow: hidden;
}

.gmr-video-thumb-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gmr-video-card:hover .gmr-video-thumb-img {
	transform: scale(1.05);
}

.gmr-video-thumb-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.2);
}

.gmr-video-dur-pill {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.3px;
	font-variant-numeric: tabular-nums;
	z-index: 2;
}

.gmr-video-play-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 1;
}

.gmr-video-card:hover .gmr-video-play-overlay {
	opacity: 1;
}

.gmr-video-play-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gmr-ls-accent);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 16px rgba(229, 9, 20, 0.8);
	transform: scale(0.85);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gmr-video-card:hover .gmr-video-play-icon {
	transform: scale(1);
}

.gmr-video-card-body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.gmr-video-card-meta-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10.5px;
	color: var(--gmr-ls-text-muted);
}

.gmr-video-card-title {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gmr-video-card-title a {
	color: #ffffff !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.gmr-video-card:hover .gmr-video-card-title a {
	color: #ff5252 !important;
}

.gmr-video-card-excerpt {
	font-size: 11px;
	color: var(--gmr-ls-text-muted);
	margin: 0;
	line-height: 1.4;
}

/* No Video Found State */
.gmr-no-video-box {
	text-align: center;
	padding: 50px 20px;
	background: #012859;
	border: 1px solid var(--gmr-ls-border);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.gmr-no-video-icon {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: rgba(1, 51, 112, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00c2ff;
}

.gmr-no-video-title {
	font-size: 18px;
	font-weight: 800;
	color: #ffffff;
	margin: 0;
}

.gmr-no-video-desc {
	font-size: 13px;
	color: var(--gmr-ls-text-muted);
	max-width: 480px;
	margin: 0;
	line-height: 1.5;
}

.gmr-back-home-btn {
	display: inline-flex;
	align-items: center;
	background: var(--gmr-ls-accent);
	color: #ffffff !important;
	padding: 8px 18px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
	margin-top: 6px;
	transition: background 0.2s ease;
}

.gmr-back-home-btn:hover {
	background: #b80710;
}

/* Pagination in Category Video Gallery */
.gmr-gallery-pagination {
	text-align: center;
	margin-top: 15px;
}

.gmr-gallery-pagination .nav-links {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.gmr-gallery-pagination .page-numbers {
	background: #012859;
	border: 1px solid var(--gmr-ls-border);
	color: #ffffff !important;
	padding: 6px 12px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.gmr-gallery-pagination .page-numbers.current,
.gmr-gallery-pagination .page-numbers:hover {
	background: var(--gmr-ls-accent);
	border-color: var(--gmr-ls-accent);
}

@media (max-width: 767px) {
	.gmr-category-hero {
		flex-direction: column;
		align-items: flex-start;
		padding: 15px;
		gap: 14px;
	}

	.gmr-cat-hero-right {
		width: 100%;
		align-items: stretch;
	}

	.gmr-cat-search-form {
		width: 100%;
	}

	.gmr-cat-search-input-wrap {
		flex: 1;
	}

	.gmr-cat-search-input {
		width: 100% !important;
	}

	.gmr-video-gallery-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ==========================================================================
   STUDIO VIDEO THEATER MODAL POPUP
   ========================================================================== */
body.gmr-modal-open {
	overflow: hidden !important;
}

.gmr-video-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	padding: 20px;
	box-sizing: border-box;
}

.gmr-video-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.gmr-video-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 10, 25, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 1;
}

.gmr-video-modal-dialog {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 900px;
	background: #011d42;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(1, 51, 112, 0.6);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: scale(0.94) translateY(12px);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-sizing: border-box;
}

.gmr-video-modal.is-open .gmr-video-modal-dialog {
	transform: scale(1) translateY(0);
}

.gmr-video-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	background: #012859;
	border-bottom: 1px solid var(--gmr-ls-border);
	gap: 12px;
}

.gmr-video-modal-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.gmr-video-modal-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(229, 9, 20, 0.15);
	border: 1px solid rgba(229, 9, 20, 0.4);
	color: #ff4d4f;
	font-size: 9px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 20px;
	letter-spacing: 0.8px;
	flex-shrink: 0;
}

.gmr-modal-pulse-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #e50914;
	animation: gmrPulseRadar 1.2s infinite;
}

.gmr-video-modal-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gmr-video-modal-close {
	background: transparent;
	border: none;
	color: var(--gmr-ls-text-muted);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	transition: color 0.15s ease;
	flex-shrink: 0;
}

.gmr-video-modal-close:hover {
	color: #ffffff;
}

.gmr-video-modal-player-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 Cinema Aspect Ratio */
	background: #000000;
	overflow: hidden;
	border-radius: 0 0 10px 10px;
}

.gmr-video-modal-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000000;
}

.gmr-modal-video-iframe {
	position: absolute;
	top: -65px;
	left: -2px;
	width: calc(100% + 4px) !important;
	height: calc(100% + 130px) !important;
	border: 0;
	display: block;
	background: #000000;
}

.gmr-modal-video-element {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
	background: #000000;
}

.gmr-modal-no-video {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #ffffff;
	font-size: 13px;
	gap: 6px;
}

@media (max-width: 767px) {
	.gmr-video-modal {
		padding: 10px;
	}

	.gmr-video-modal-header {
		padding: 10px 12px;
	}

	.gmr-video-modal-title {
		font-size: 12px;
	}

	.gmr-modal-video-iframe {
		top: -48px;
		height: calc(100% + 96px) !important;
	}
}

/* ==========================================================================
   RADIO LIVE STREAMING STUDIO & FLOATING DOCK ENGINE
   ========================================================================== */

/* 1. Main Navigation Single-Row Flex Alignment */
.gmr-mainmenu,
nav#main-nav {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	background-color: var(--mainmenu-bgcolor, #013370) !important;
	background: #013370 !important;
	position: relative !important;
	min-height: 44px !important;
}

.gmr-primary-menu-container {
	display: flex !important;
	align-items: center !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	overflow: hidden !important;
	background-color: transparent !important;
	background: transparent !important;
}

#primary-menu {
	background-color: transparent !important;
	background: transparent !important;
}

.gmr-nav-radio-action {
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	margin-left: auto !important;
	padding: 0 12px !important;
	z-index: 10 !important;
	background: transparent !important;
}

.gmr-radio-nav-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	background: linear-gradient(135deg, #001f4d 0%, #001229 100%) !important;
	border: 1px solid rgba(0, 230, 118, 0.5) !important;
	color: #ffffff !important;
	padding: 5px 12px !important;
	border-radius: 20px !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 0 12px rgba(0, 230, 118, 0.2) !important;
	transition: all 0.25s ease !important;
	cursor: pointer !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}

.gmr-radio-nav-btn:hover {
	border-color: #00e676 !important;
	background: linear-gradient(135deg, #003370 0%, #001d42 100%) !important;
	box-shadow: 0 0 18px rgba(0, 230, 118, 0.5) !important;
	transform: translateY(-1px) !important;
	color: #ffffff !important;
}

.gmr-radio-nav-btn.is-radio-active {
	border-color: #e50914 !important;
	background: linear-gradient(135deg, #3d0003 0%, #1a0002 100%) !important;
	box-shadow: 0 0 14px rgba(229, 9, 20, 0.35) !important;
}

.gmr-radio-live-pulse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
}

.gmr-radio-pulse-dot {
	width: 7px;
	height: 7px;
	background: #00e676;
	border-radius: 50%;
	box-shadow: 0 0 8px #00e676;
	animation: gmrPulseRadar 1.3s infinite;
}

.gmr-radio-nav-btn.is-radio-active .gmr-radio-pulse-dot {
	background: #e50914;
	box-shadow: 0 0 8px #e50914;
}

.gmr-radio-icon-wave {
	display: inline-flex;
	align-items: center;
	color: #00e676;
}

.gmr-radio-nav-btn.is-radio-active .gmr-radio-icon-wave {
	color: #ff4d4f;
}

.gmr-radio-btn-tag {
	background: rgba(0, 230, 118, 0.2);
	border: 1px solid rgba(0, 230, 118, 0.5);
	color: #00e676;
	font-size: 8.5px;
	font-weight: 800;
	padding: 1px 5px;
	border-radius: 4px;
	letter-spacing: 0.5px;
}

.gmr-radio-nav-btn.is-radio-active .gmr-radio-btn-tag {
	background: rgba(229, 9, 20, 0.2);
	border-color: rgba(229, 9, 20, 0.5);
	color: #ff6b6b;
}

/* 2. Radio Studio Section Header */
.gmr-radio-header-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: nowrap !important;
	gap: 12px !important;
	border-color: rgba(0, 230, 118, 0.3) !important;
}

.gmr-radio-header-bar .gmr-livestream-header-left {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.gmr-radio-header-bar .gmr-livestream-header-right {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

.gmr-radio-badge {
	background: rgba(0, 230, 118, 0.15) !important;
	border-color: rgba(0, 230, 118, 0.5) !important;
	color: #00e676 !important;
}

.gmr-radio-pulse-dot {
	background: #00e676 !important;
}

.gmr-switch-tv-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(229, 9, 20, 0.15);
	border: 1px solid rgba(229, 9, 20, 0.4);
	color: #ffffff !important;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.gmr-switch-tv-btn:hover {
	background: #e50914;
	border-color: #e50914;
	color: #ffffff !important;
	box-shadow: 0 0 10px rgba(229, 9, 20, 0.5);
}

.gmr-radio-freq-pill {
	background: rgba(0, 230, 118, 0.12) !important;
	border-color: rgba(0, 230, 118, 0.4) !important;
	color: #00e676 !important;
	white-space: nowrap;
}

.gmr-radio-freq-pill .gmr-quality-dot {
	background: #00e676 !important;
	box-shadow: 0 0 6px #00e676;
}

/* 3. Radio Studio Grid & Channels Column */
.gmr-radio-studio-section .gmr-livestream-grid {
	display: grid;
	grid-template-columns: 240px minmax(0, 1.8fr) 270px;
	gap: 16px;
	width: 100%;
	align-items: stretch;
}

@media (max-width: 1199px) {
	.gmr-radio-studio-section .gmr-livestream-grid {
		grid-template-columns: 220px minmax(0, 1.5fr) 240px;
	}
}

@media (max-width: 991px) {
	.gmr-radio-studio-section .gmr-livestream-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.gmr-radio-studio-section .gmr-livestream-grid {
		grid-template-columns: 1fr;
		display: flex;
		flex-direction: column;
	}
}

.gmr-radio-channel-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 7px !important;
	overflow: visible !important;
	flex: none !important;
	height: auto !important;
	max-height: none !important;
}

.gmr-radio-ch-item {
	padding: 8px 10px !important;
}

.gmr-radio-ch-item .gmr-server-name {
	font-size: 11.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.gmr-radio-ch-item .gmr-server-meta {
	font-size: 10px !important;
	line-height: 1.2 !important;
}

.gmr-radio-ch-item.is-active {
	border-color: #00e676 !important;
	background: linear-gradient(90deg, rgba(0, 230, 118, 0.18) 0%, rgba(1, 51, 112, 0.4) 100%) !important;
}

.gmr-radio-ch-item.is-active .gmr-server-status-dot {
	background: #00e676 !important;
	box-shadow: 0 0 8px #00e676 !important;
}

.gmr-radio-ch-item.is-active .gmr-server-name {
	color: #00e676 !important;
}

.gmr-radio-specs-card {
	margin-top: 12px;
	padding: 10px 12px;
	background: rgba(0, 18, 41, 0.7);
	border: 1px solid var(--gmr-ls-border);
	border-radius: 6px;
	font-size: 10.5px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gmr-radio-spec-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--gmr-ls-text-muted);
}

.gmr-radio-spec-row strong {
	color: #ffffff;
}

/* 4. Radio Center Visualizer Deck */
.gmr-radio-player-stage {
	background: radial-gradient(circle at center, #012859 0%, #011530 65%, #000c1e 100%) !important;
	border-color: rgba(0, 230, 118, 0.25) !important;
	min-height: auto !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

.gmr-radio-visualizer-deck {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 18px 20px !important;
	position: relative !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* 5. Realistic Spinning Vinyl Disc */
.gmr-vinyl-wrapper {
	position: relative;
	width: 140px !important;
	height: 140px !important;
	margin-bottom: 14px !important;
}

.gmr-vinyl-disc {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #2a2a2a 0%, #111111 40%, #050505 100%);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 230, 118, 0.25);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.gmr-vinyl-disc.is-playing {
	animation: gmrSpinVinyl 6s linear infinite;
}

@keyframes gmrSpinVinyl {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.gmr-vinyl-grooves {
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.6), inset 0 0 0 16px rgba(255, 255, 255, 0.04), inset 0 0 0 24px rgba(0, 0, 0, 0.6), inset 0 0 0 32px rgba(255, 255, 255, 0.04);
}

.gmr-vinyl-center {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: radial-gradient(circle, #013370 0%, #001229 100%);
	border: 2px solid #00e676;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
	z-index: 2;
}

.gmr-vinyl-center-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-align: center;
}

.gmr-vinyl-icon {
	font-size: 13px;
	margin-bottom: 2px;
}

.gmr-vinyl-station {
	font-size: 7.5px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: 0.5px;
}

.gmr-vinyl-fm {
	font-size: 6.5px;
	font-weight: 700;
	color: #00e676;
	margin-top: 1px;
}

/* 6. Dynamic Realtime Equalizer Soundbars */
.gmr-radio-soundwave-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	height: 30px;
	width: 100%;
	max-width: 320px;
	margin-bottom: 12px;
	padding: 0 10px;
	box-sizing: border-box;
}

.gmr-wave-bar {
	flex: 1;
	background: linear-gradient(to top, #00e676 0%, #00b0ff 70%, #ff1744 100%);
	border-radius: 2px 2px 0 0;
	height: 4px;
	min-height: 4px;
	transition: height 0.15s ease;
	opacity: 0.4;
}

.is-playing .gmr-wave-bar {
	opacity: 0.95;
	animation: gmrWaveDance 0.8s ease-in-out infinite alternate;
	animation-delay: var(--wave-delay, 0s);
}

@keyframes gmrWaveDance {
	0% { height: 5px; }
	50% { height: var(--wave-height, 60%); }
	100% { height: 8px; }
}

/* 7. Now Playing Metadata Card */
.gmr-radio-meta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 14px;
	max-width: 440px;
}

.gmr-radio-onair-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(0, 230, 118, 0.15);
	border: 1px solid rgba(0, 230, 118, 0.4);
	color: #00e676;
	font-size: 9px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 20px;
	letter-spacing: 0.8px;
	margin-bottom: 6px;
}

.gmr-onair-radar-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #00e676;
	animation: gmrPulseRadar 1.2s infinite;
}

.gmr-radio-program-heading {
	font-size: 16.5px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 4px 0;
	line-height: 1.25;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.gmr-radio-host-meta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	color: var(--gmr-ls-text-muted);
}

.gmr-radio-host-meta strong {
	color: #ffffff;
}

/* 8. Interactive Audio Controls Deck */
.gmr-radio-control-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(0, 18, 41, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 24px;
	padding: 6px 14px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8px);
}

.gmr-radio-play-btn {
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #00e676 0%, #00a854 100%);
	border: none;
	color: #001229;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 16px rgba(0, 230, 118, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	flex-shrink: 0;
}

.gmr-radio-play-btn:hover {
	transform: scale(1.08);
	box-shadow: 0 0 25px rgba(0, 230, 118, 0.8);
}

.gmr-radio-play-btn.is-buffering {
	animation: gmrPulseBuffer 1s infinite alternate;
}

@keyframes gmrPulseBuffer {
	from { opacity: 0.6; }
	to { opacity: 1; }
}

.gmr-radio-play-pulse {
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border-radius: 50%;
	border: 2px solid #00e676;
	opacity: 0;
	pointer-events: none;
}

.is-playing .gmr-radio-play-pulse {
	animation: gmrPlayPulseRing 2s infinite;
}

@keyframes gmrPlayPulseRing {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.35); opacity: 0; }
}

.gmr-radio-volume-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gmr-radio-mute-btn {
	background: transparent;
	border: none;
	color: var(--gmr-ls-text-muted);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	transition: color 0.15s ease;
}

.gmr-radio-mute-btn:hover {
	color: #ffffff;
}

.gmr-radio-slider-track {
	width: 90px;
	display: flex;
	align-items: center;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.gmr-radio-vol-slider {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 6px !important;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px !important;
	outline: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

.gmr-radio-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 15px !important;
	height: 15px !important;
	border-radius: 50% !important;
	background: #00e676 !important;
	border: 2px solid #ffffff !important;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(0, 230, 118, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5) !important;
	margin: 0 !important;
	transition: transform 0.15s ease, background 0.15s ease;
}

.gmr-radio-vol-slider::-webkit-slider-thumb:hover,
.gmr-radio-vol-slider::-webkit-slider-thumb:active {
	transform: scale(1.2);
	background: #00ff84 !important;
}

.gmr-radio-vol-slider::-moz-range-thumb {
	width: 15px !important;
	height: 15px !important;
	border-radius: 50% !important;
	background: #00e676 !important;
	border: 2px solid #ffffff !important;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(0, 230, 118, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5) !important;
	transition: transform 0.15s ease;
}

.gmr-radio-vol-slider::-moz-range-thumb:hover,
.gmr-radio-vol-slider::-moz-range-thumb:active {
	transform: scale(1.2);
	background: #00ff84 !important;
}

.gmr-radio-vol-slider::-moz-range-track {
	background: rgba(255, 255, 255, 0.2) !important;
	height: 6px !important;
	border-radius: 3px !important;
	border: none !important;
	padding: 0 !important;
}

.gmr-radio-vol-pct {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--gmr-ls-text-muted);
	font-variant-numeric: tabular-nums;
	min-width: 32px;
}

.gmr-radio-quality-tag {
	background: rgba(0, 230, 118, 0.12);
	border: 1px solid rgba(0, 230, 118, 0.4);
	color: #00e676;
	font-size: 9.5px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 4px;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

/* Radio Action Bar at Bottom of Center Column */
.gmr-radio-action-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 12px 16px !important;
	background: #011530 !important;
	border-top: 1px solid rgba(0, 230, 118, 0.18) !important;
	box-sizing: border-box !important;
	width: 100% !important;
	flex-shrink: 0 !important;
	border-bottom-left-radius: 6px !important;
	border-bottom-right-radius: 6px !important;
}

.gmr-radio-bottom-badge-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.gmr-meta-tag-channel {
	display: inline-flex;
	align-items: center;
	background: rgba(0, 230, 118, 0.15);
	color: #00e676;
	border: 1px solid rgba(0, 230, 118, 0.35);
	font-size: 9.5px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 3px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.2;
}

.gmr-meta-tag-quality {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 9.5px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 3px;
	line-height: 1.2;
}

.gmr-radio-action-bar .gmr-stream-main-title {
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 2px 0;
	line-height: 1.3;
}

.gmr-radio-action-bar .gmr-stream-sub-title {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	line-height: 1.3;
}

.gmr-radio-action-bar #gmr-radio-reload-btn {
	background: rgba(0, 230, 118, 0.15);
	border: 1px solid rgba(0, 230, 118, 0.35);
	color: #00e676;
}

.gmr-radio-action-bar #gmr-radio-reload-btn:hover {
	background: #00e676;
	color: #001229;
}

/* 9. Persistent Floating Bottom Radio Dock Player */
.gmr-floating-radio-dock {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	z-index: 99999;
	background: rgba(0, 18, 41, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid rgba(0, 230, 118, 0.45);
	box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 230, 118, 0.2);
	padding: 8px 16px;
	box-sizing: border-box;
	animation: gmrSlideUpDock 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gmrSlideUpDock {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

.gmr-radio-dock-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.gmr-dock-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.gmr-dock-vinyl-thumb {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: radial-gradient(circle, #222 0%, #000 100%);
	border: 1.5px solid #00e676;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gmr-dock-vinyl-thumb.is-playing {
	animation: gmrSpinVinyl 4s linear infinite;
}

.gmr-dock-vinyl-dot {
	width: 6px;
	height: 6px;
	background: #00e676;
	border-radius: 50%;
}

.gmr-dock-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.gmr-dock-station-pill {
	font-size: 8.5px;
	font-weight: 800;
	color: #00e676;
	letter-spacing: 0.5px;
	line-height: 1;
	margin-bottom: 2px;
}

.gmr-dock-title {
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.gmr-dock-dj {
	font-size: 9.5px;
	color: var(--gmr-ls-text-muted);
}

.gmr-dock-center {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.gmr-dock-play-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #00e676;
	border: none;
	color: #001229;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
	transition: transform 0.15s ease;
}

.gmr-dock-play-btn:hover {
	transform: scale(1.08);
}

.gmr-dock-equalizer {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 16px;
}

.gmr-dock-wave-bar {
	width: 2px;
	background: #00e676;
	border-radius: 1px;
	height: 3px;
}

.is-playing .gmr-dock-wave-bar:nth-child(1) { animation: gmrWaveDance 0.6s infinite alternate 0.1s; }
.is-playing .gmr-dock-wave-bar:nth-child(2) { animation: gmrWaveDance 0.6s infinite alternate 0.3s; }
.is-playing .gmr-dock-wave-bar:nth-child(3) { animation: gmrWaveDance 0.6s infinite alternate 0.2s; }
.is-playing .gmr-dock-wave-bar:nth-child(4) { animation: gmrWaveDance 0.6s infinite alternate 0.4s; }
.is-playing .gmr-dock-wave-bar:nth-child(5) { animation: gmrWaveDance 0.6s infinite alternate 0.15s; }

.gmr-dock-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.gmr-dock-open-studio-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--gmr-ls-border);
	color: #ffffff !important;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 10.5px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.gmr-dock-open-studio-btn:hover {
	background: #00e676;
	border-color: #00e676;
	color: #001229 !important;
}

.gmr-dock-close-btn {
	background: transparent;
	border: none;
	color: var(--gmr-ls-text-muted);
	font-size: 20px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	transition: color 0.15s ease;
}

.gmr-dock-close-btn:hover {
	color: #ffffff;
}

@media (max-width: 767px) {
	.gmr-nav-radio-action {
		margin-left: 6px;
		padding-left: 6px;
	}

	.gmr-radio-nav-btn {
		padding: 4px 8px;
		font-size: 10.5px;
	}

	.gmr-radio-visualizer-deck {
		padding: 18px 12px;
	}

	.gmr-vinyl-wrapper {
		width: 130px;
		height: 130px;
	}

	.gmr-vinyl-center {
		width: 50px;
		height: 50px;
	}

	.gmr-radio-program-heading {
		font-size: 16px;
	}

	.gmr-radio-slider-track {
		width: 60px;
	}

	.gmr-radio-control-bar {
		padding: 6px 12px;
		gap: 10px;
	}

	.gmr-floating-radio-dock {
		padding: 6px 10px;
	}

	.gmr-dock-dj {
		display: none;
	}
}

/* 9. Radio 24/7 Sync & Rundown List Styling */
.gmr-radio-studio-section .gmr-server-item.is-active {
	border-color: rgba(0, 230, 118, 0.45) !important;
	background: rgba(0, 230, 118, 0.08) !important;
}

.gmr-radio-studio-section .gmr-server-item.is-active .gmr-server-name {
	color: #00e676 !important;
}

.gmr-radio-studio-section .gmr-server-item.is-active .gmr-server-status-dot {
	background: #00e676 !important;
	box-shadow: 0 0 8px #00e676 !important;
}

.gmr-radio-studio-section .gmr-server-item.is-active .gmr-play-badge {
	background: #00e676 !important;
	color: #001229 !important;
}

.gmr-prog-slot-text {
	color: #00e676;
	font-weight: 600;
}