@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');

/* =========================================
   CSS VARIABLES — injetadas pelo PHP
   via wp_add_inline_style com os valores
   salvos no admin. Fallbacks abaixo.
========================================= */
.hls-player {
	--hls-color-primary:    #c62828;
	--hls-color-text:       #ffffff;
	--hls-color-badge-bg:   #000000;
	--hls-color-badge-text: #ffffff;
	--hls-color-btn:        #ffffff;
	--hls-color-btn-icon:   #c62828;
	--hls-color-live-dot:   #2196f3;
	--hls-border-radius:    16px;
	--hls-shadow:           0 8px 20px rgba(0,0,0,0.15);
	--hls-max-width:        420px;
	--hls-logo-width:       100px;
	--hls-logo-width-mobile: 70px;
	--hls-match-bg:         #111111;
	--hls-match-color:      #ffffff;
	--hls-font:             'Oxygen', Arial, sans-serif;

	font-family: var(--hls-font);
	box-sizing: border-box;
}

.hls-player *, .hls-player *::before, .hls-player *::after {
	box-sizing: inherit;
}

/* =========================================
   CARD
========================================= */
.hls-player__card {
	display: flex;
	border-radius: var(--hls-border-radius);
	overflow: hidden;
	box-shadow: var(--hls-shadow);
	position: relative;
}

/* =========================================
   FORMATO: STANDARD
========================================= */
.hls-player--standard {
	max-width: var(--hls-max-width);
	margin: 0 auto;
}

.hls-player--standard .hls-player__logo {
	background: #fff;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hls-player--standard .hls-player__logo img {
	width: var(--hls-logo-width);
	height: auto;
	display: block;
	margin-bottom: 0;
}

.hls-player--standard .hls-player__body {
	flex: 1;
	background: var(--hls-color-primary);
	padding: 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--hls-color-text);
}

.hls-player--standard .hls-player__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

.hls-player--standard .hls-player__title {
	font-weight: 700;
	font-size: 14px;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	flex: 1;
}

.hls-player--standard .hls-player__controls {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

/* =========================================
   FORMATO: COMPACT
========================================= */
.hls-player--compact {
	max-width: var(--hls-max-width);
	margin: 0 auto;
}

.hls-player--compact .hls-player__card {
	border-radius: calc(var(--hls-border-radius) * 0.75);
}

.hls-player--compact .hls-player__body {
	flex: 1;
	background: var(--hls-color-primary);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--hls-color-text);
	flex-wrap: wrap;
}

.hls-player--compact .hls-player__top {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.hls-player--compact .hls-player__title {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hls-player--compact .hls-player__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.hls-player--compact .hls-player__status { display: none; }

.hls-player--compact .hls-player__resume,
.hls-player--compact .hls-player__error  { width: 100%; margin-top: 6px; }

/* =========================================
   BADGE LIVE
========================================= */
.hls-player__badge {
	background: var(--hls-color-badge-bg);
	color: var(--hls-color-badge-text);
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 6px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.hls-player__badge::after {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--hls-color-primary);
	border-radius: 50%;
	animation: hls-pulse 1.2s infinite;
}

/* =========================================
   BOTÕES
========================================= */
.hls-btn-play {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--hls-color-btn);
	border: none;
	cursor: pointer;
	transition: transform 0.1s ease, opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
}

.hls-btn-play svg {
	fill: var(--hls-color-btn-icon);
	display: block;
	flex-shrink: 0;
}

.hls-btn-mute {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--hls-color-btn);
	color: var(--hls-color-btn-icon);
	border: none;
	font-size: 16px;
	cursor: pointer;
	transition: transform 0.1s ease, opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hls-btn-play:hover, .hls-btn-mute:hover { opacity: .85; }
.hls-btn-play:focus-visible, .hls-btn-mute:focus-visible { outline: 2px solid var(--hls-color-text); outline-offset: 2px; }
.hls-btn-play:active, .hls-btn-mute:active { transform: scale(0.92); }

/* =========================================
   STATUS
========================================= */
.hls-player__status {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hls-color-text);
}

.hls-player__status::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.hls-player__status--live::before         { background: var(--hls-color-live-dot); animation: hls-pulse 1.2s infinite; }
.hls-player__status--reconnecting::before  { background: #ffcc00; animation: hls-pulse 1.2s infinite; }
.hls-player__status--paused::before        { background: rgba(255,255,255,0.4); }
.hls-player__status--error::before         { background: #ff5252; }

/* =========================================
   RESUME BUTTON
========================================= */
.hls-player__resume {
	display: none;
	margin-top: 10px;
	width: 100%;
	background: var(--hls-color-btn);
	color: var(--hls-color-btn-icon);
	border: none;
	padding: 10px;
	border-radius: calc(var(--hls-border-radius) * 0.5);
	font-weight: 700;
	cursor: pointer;
	font-family: var(--hls-font);
	font-size: 13px;
}

/* =========================================
   ERROR
========================================= */
.hls-player__error {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(255,255,255,0.75);
	line-height: 1.4;
}

/* =========================================
   AD AREA
========================================= */
.hls-player__ad {
	margin-bottom: 8px;
	text-align: center;
	width: 100%;
	overflow: hidden;
	line-height: 0; /* evita espaço extra de baseline */
}

.hls-player__ad > * {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.hls-player--has-ad .hls-player__ad img,
.hls-player--has-ad .hls-player__ad iframe {
	max-width: 100%;
	display: block;
	margin: 0 auto;
	height: auto;
}

/* =========================================
   PROGRAMA ATUAL NO CARD
========================================= */
.hls-player__on-air {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(255,255,255,.2);
}

.hls-player__on-air-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(255,255,255,.6);
	margin-bottom: 2px;
}

.hls-player__on-air-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--hls-color-text);
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
	line-height: 1.3;
}

.hls-player__on-air-host {
	font-size: 11px;
	color: rgba(255,255,255,.7);
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
	line-height: 1.3;
	margin-top: 1px;
}

/* =========================================
   ANIMAÇÃO
========================================= */
@keyframes hls-pulse {
	0%   { transform: scale(1);   opacity: 1; }
	50%  { transform: scale(1.6); opacity: 0.4; }
	100% { transform: scale(1);   opacity: 1; }
}

/* =========================================
   RESPONSIVO — desktop (> 767px)
   Usa --hls-max-width-desktop se definido,
   caso contrário mantém --hls-max-width.
========================================= */
@media (min-width: 768px) {
	.hls-player--standard,
	.hls-player--compact {
		max-width: var(--hls-max-width-desktop, var(--hls-max-width));
	}
}

/* =========================================
   RESPONSIVO — mobile (≤ 767px)
   Usa --hls-max-width-mobile se definido,
   caso contrário mantém --hls-max-width.
========================================= */
@media (max-width: 767px) {
	.hls-player--standard,
	.hls-player--compact {
		max-width: var(--hls-max-width-mobile, var(--hls-max-width));
	}

	.hls-player--standard .hls-player__logo img { width: var(--hls-logo-width-mobile); }
	.hls-player--standard .hls-player__title    { font-size: 13px; }
	.hls-player--sticky .hls-player__card        { flex-wrap: wrap; }
}

/* =========================================
   INTEGRAÇÃO CBN FUTEBOL — Placar lateral
   Substitui a logo quando há jogo ativo
========================================= */
.hls-player__match {
	background: var(--hls-match-bg);
	width: 130px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 14px 8px;
	color: var(--hls-match-color);
}

.hls-player__match-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.hls-player__match-badge {
	width: 36px;
	height: 36px;
	object-fit: contain;
	border-radius: 4px;
	background: rgba(255,255,255,.06);
}

.hls-player__match-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--hls-match-color);
	text-align: center;
	line-height: 1.2;
	word-break: break-word;
	opacity: .85;
}

.hls-player__match-score-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 4px 0;
	width: 100%;
	margin: 2px 0;
}

.hls-player__match-score {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--hls-match-color);
	line-height: 1;
	text-align: center;
}

.hls-player__match-sep { opacity: .35; margin: 0 2px; }
.hls-player__match-vs  { font-size: 13px; letter-spacing: 0; opacity: .5; }

.hls-player__match-status {
	font-size: 9px;
	color: rgba(255,255,255,.4);
	text-transform: uppercase;
	letter-spacing: .5px;
	text-align: center;
}
.hls-player__match-status { display: none; }
.hls-player__match-status--live,
.hls-player__match-status--halftime { display: block; }
.hls-player__match-status--live     { display: none; }
.hls-player__match-status--halftime { color: #ffd54f; }
.hls-player__match-status--finished { color: rgba(255,255,255,.5); }

.hls-player__match-elapsed {
	text-align: center;
	line-height: 1.4;
}

.hls-player__match-elapsed-min {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #000000;
	letter-spacing: 0;
	animation: none;
}

.hls-player__match-elapsed-min::after {
	content: ' \2022';
	color: #ff6b6b;
	animation: hls-pulse 1.2s infinite;
	display: inline-block;
	margin-left: 4px;
}

.hls-player__match-period {
	display: block;
	font-size: 10px;
	font-weight: 400;
	color: var(--hls-match-color);
	text-transform: uppercase;
	opacity: .6;
	letter-spacing: .5px;
	animation: none !important;
	margin-top: 2px;
}

.hls-player__match-kickoff {
	font-size: 10px;
	font-weight: 400;
	color: var(--hls-match-color);
	text-align: center;
	line-height: 1.3;
	opacity: .85;
}

@media (max-width: 480px) {
	.hls-player__match        { width: 90px; padding: 10px 6px; }
	.hls-player__match-badge  { width: 28px; height: 28px; }
	.hls-player__match-name   { font-size: 11px; }
	.hls-player__match-score  { font-size: 18px; letter-spacing: 2px; }
	.hls-player__match-elapsed { font-size: 12px; }
	.hls-player__match-period  { font-size: 9px; }
	.hls-player__match-kickoff { font-size: 9px; }
}

/* =========================================
   BADGE DE VERSÃO — debug discreto
========================================= */
.hls-player__version {
	position: absolute;
	bottom: 2px;
	right: 6px;
	font-size: 8px;
	line-height: 1;
	color: currentColor;
	opacity: .3;
	pointer-events: none;
	user-select: none;
	z-index: 2;
}