/* Web Rádio Player — Estilos do front-end (tema escuro/roxo) */

.webradio-wrap {
	--webradio-columns: 4;
	--webradio-primary: #7c3aed;
	--webradio-primary-light: #a78bfa;
	--webradio-bg: #0d0c14;
	--webradio-surface: #17151f;
	--webradio-surface-2: #201d2c;
	--webradio-border: #2a2738;
	--webradio-text: #f5f4fa;
	--webradio-text-muted: #a8a4bd;
	box-sizing: border-box;
	color: var(--webradio-text) !important;
	background: var(--webradio-bg);
	padding: 20px;
	border-radius: 18px;
}
@media (max-width: 599px) {
	.webradio-wrap { padding: 14px; border-radius: 14px; }
}
.webradio-wrap *,
.webradio-wrap *::before,
.webradio-wrap *::after,
.webradio-player * { box-sizing: border-box; }

/* Os seletores de botão abaixo usam !important nas propriedades visuais (cor, fundo, borda,
   sombra, tipografia) para neutralizar estilos genéricos de "button" que o tema do site possa
   aplicar — evita que a aparência dos controles do player/cards dependa da ordem de carregamento
   do CSS do tema. */

/* Busca embutida */
.webradio-embedded-search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--webradio-surface);
	border: 1px solid var(--webradio-border);
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 16px;
}

.webradio-search-submit-btn {
	appearance: none; -webkit-appearance: none; font-family: inherit;
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
	background: var(--webradio-primary) !important; color: #fff !important; border: 0 !important;
	border-radius: 10px !important; padding: 0 20px !important; margin: 0; cursor: pointer; font-weight: 600; box-shadow: none !important;
}
.webradio-search-submit-btn:hover { background: var(--webradio-primary-light) !important; }

/* Barra de estatísticas (contagem de resultados + ordenar + itens por página) */
.webradio-stats-bar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	margin-bottom: 18px; font-size: .9em; color: var(--webradio-text-muted) !important;
}
.webradio-stats-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.webradio-stats-controls label { display: flex; align-items: center; gap: 6px; }
.webradio-stats-controls select {
	background: var(--webradio-surface); color: var(--webradio-text); border: 1px solid var(--webradio-border);
	border-radius: 8px; padding: 5px 10px; font-size: .95em;
}

/* Toolbar (título + alternador lista/grade) */
.webradio-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.webradio-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.webradio-block-title {
	margin: 0; font-size: 1.25em; font-weight: 700 !important; color: var(--webradio-text) !important;
	display: flex; align-items: center; gap: 8px; line-height: 1.3; text-transform: none !important;
}
.webradio-title-icon { color: #fbbf24; font-size: 20px; width: 20px; height: 20px; }

.webradio-view-toggle {
	display: inline-flex; background: var(--webradio-surface); border: 1px solid var(--webradio-border);
	border-radius: 10px; padding: 3px; gap: 2px;
}
.webradio-view-btn {
	appearance: none; -webkit-appearance: none;
	background: transparent !important; border: 0 !important; padding: 7px 16px !important; margin: 0; cursor: pointer;
	color: var(--webradio-text-muted) !important; border-radius: 8px !important; font-size: .88em; font-weight: 600;
	font-family: inherit; text-transform: none; box-shadow: none !important; transition: all .15s ease;
}
.webradio-view-btn.is-active { background: var(--webradio-primary) !important; color: #fff !important; }
.webradio-view-btn:not(.is-active):hover { color: var(--webradio-text) !important; }

.webradio-mode-toggle {
	appearance: none; -webkit-appearance: none; font-family: inherit;
	background: var(--webradio-surface) !important; border: 1px solid var(--webradio-border) !important;
	color: var(--webradio-text-muted) !important; width: 38px !important; height: 38px !important; padding: 0 !important;
	border-radius: 50% !important; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: none !important;
	flex: 0 0 38px;
}
.webradio-mode-toggle:hover { color: var(--webradio-primary) !important; border-color: var(--webradio-primary) !important; }

/* Ícones de sol/lua desenhados em CSS puro (não dependem de fonte de ícone) */
.webradio-mode-icon-light, .webradio-mode-icon-dark { position: relative; width: 14px; height: 14px; display: block; }
.webradio-mode-icon-light {
	border-radius: 50%; background: currentColor;
	box-shadow: 0 0 0 3px transparent; /* mantém a área de toque consistente com o ícone de lua */
}
.webradio-mode-icon-dark {
	border-radius: 50%; background: currentColor;
}
.webradio-mode-icon-dark::after {
	content: ""; position: absolute; top: -3px; right: -4px; width: 14px; height: 14px; border-radius: 50%;
	background: var(--webradio-surface);
}
.webradio-mode-icon-dark { display: none; }
.webradio-wrap[data-mode="dark"] .webradio-mode-icon-light { display: none; }
.webradio-wrap[data-mode="dark"] .webradio-mode-icon-dark { display: block; }

/* Resultados: grid */
.webradio-results {
	touch-action: pan-y; /* permite rolagem vertical normal enquanto o JS trata o gesto horizontal (swipe) */
	transition: opacity .18s ease, transform .18s ease;
}
.webradio-results.is-swiping.swipe-left { opacity: .4; transform: translateX(-14px); }
.webradio-results.is-swiping.swipe-right { opacity: .4; transform: translateX(14px); }

.webradio-wrap[data-view="grid"] .webradio-results,
.webradio-favorites-wrap[data-view="grid"] .webradio-results {
	display: grid;
	grid-template-columns: repeat(var(--webradio-columns, 4), 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.webradio-wrap[data-view="grid"] .webradio-results { grid-template-columns: repeat(min(3, var(--webradio-columns, 4)), 1fr); }
}
@media (max-width: 767px) {
	.webradio-wrap[data-view="grid"] .webradio-results { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.webradio-embedded-search { flex-direction: column; align-items: stretch; }
	.webradio-embedded-search .webradio-search-field,
	.webradio-embedded-search .webradio-search-select-wrap,
	.webradio-embedded-search .webradio-search-submit-btn {
		flex: 1 1 auto;
		width: 100%;
	}
	.webradio-stats-bar { flex-direction: column; align-items: flex-start; }
	.webradio-stats-controls { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
	.webradio-wrap[data-view="grid"] .webradio-results { grid-template-columns: 1fr; }
}

/* Resultados: lista */
.webradio-wrap[data-view="list"] .webradio-results { display: flex; flex-direction: column; gap: 10px; }
.webradio-wrap[data-view="list"] .webradio-card { display: flex; align-items: center; flex-direction: row; text-align: left; padding: 12px; }
.webradio-wrap[data-view="list"] .webradio-card-logo { width: 60px; height: 60px; flex: 0 0 60px; margin: 0 14px 0 0; position: static; }
.webradio-wrap[data-view="list"] .webradio-card-body { flex: 1 1 auto; }
.webradio-wrap[data-view="list"] .webradio-play-btn {
	position: absolute; right: 16px; top: 50%; bottom: auto; transform: translateY(-50%);
	border-width: 0; box-shadow: none; width: 40px; height: 40px;
}
.webradio-wrap[data-view="list"] .webradio-fav-btn { position: static; margin-right: 10px; order: -1; }

/* Card */
.webradio-card {
	position: relative;
	background: var(--webradio-surface);
	border: 1px solid var(--webradio-border);
	border-radius: 16px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.webradio-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.28); transform: translateY(-2px); border-color: var(--webradio-border); }

.webradio-card-logo {
	position: relative;
	width: 100%; aspect-ratio: 1.7 / 1; border-radius: 12px; margin-bottom: 12px;
	background: var(--webradio-surface-2);
}
.webradio-card-logo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }

.webradio-card-title { margin: 0 0 2px; font-size: 1.02em; font-weight: 700 !important; color: var(--webradio-text) !important; text-transform: none !important; }
.webradio-card-slogan { margin: 0 0 6px; font-size: .82em; color: var(--webradio-text-muted) !important; }

.webradio-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .82em; color: var(--webradio-text-muted) !important; }
.webradio-card-genre {
	background: var(--webradio-genre-color, var(--webradio-surface-2));
	color: var(--webradio-genre-text, var(--webradio-text-muted));
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .78em;
}
.webradio-card-genre:not(:last-child)::after { content: ""; }
.webradio-card-city {
	display: inline-flex; align-items: center; gap: 2px; color: var(--webradio-text-muted);
	width: 100%; margin-top: 2px;
}
.webradio-card-city .dashicons { font-size: 14px; width: 14px; height: 14px; color: var(--webradio-primary-light); }

/* Botão de favoritar (canto superior direito do card) */
.webradio-fav-btn {
	appearance: none; -webkit-appearance: none; font-family: inherit;
	position: absolute; top: 12px; right: 12px; background: rgba(20,18,28,.55) !important; backdrop-filter: blur(4px);
	border: 0 !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; padding: 0 !important;
	margin: 0; min-width: 0; box-shadow: none !important; display: flex; align-items: center; justify-content: center;
	cursor: pointer; color: #d8d6e6 !important; transition: color .15s ease, transform .15s ease; z-index: 2;
}
.webradio-fav-btn:hover { transform: scale(1.1); }
.webradio-fav-btn.is-active { color: #f43f5e !important; }

/* Botão de play (sobreposto no canto inferior direito da capa) */
.webradio-play-btn {
	appearance: none; -webkit-appearance: none; font-family: inherit;
	position: absolute;
	right: 10px;
	bottom: -18px;
	width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0; min-width: 0;
	border-radius: 50% !important; border: 3px solid var(--webradio-surface) !important; cursor: pointer;
	background: var(--webradio-primary) !important; color: #fff !important; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(124, 58, 237, .5) !important;
	transition: background-color .15s ease, transform .15s ease;
	z-index: 2;
}
.webradio-play-btn:hover { transform: scale(1.06); background: var(--webradio-primary-light) !important; }

.webradio-icon-play, .webradio-icon-pause, .webradio-icon-loading { display: none; }
.webradio-play-btn .webradio-icon-play { display: block; }
.webradio-icon-play::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.webradio-icon-pause::before { content: ""; display: block; width: 11px; height: 12px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.webradio-icon-loading::before {
	content: ""; display: block; width: 15px; height: 15px; border-radius: 50%;
	border: 2px solid currentColor; border-top-color: transparent; animation: webradio-spin .7s linear infinite;
}
@keyframes webradio-spin { to { transform: rotate(360deg); } }

.webradio-play-btn.is-playing .webradio-icon-play { display: none; }
.webradio-play-btn.is-playing .webradio-icon-pause { display: block; }
.webradio-play-btn.is-loading .webradio-icon-play,
.webradio-play-btn.is-loading .webradio-icon-pause { display: none; }
.webradio-play-btn.is-loading .webradio-icon-loading { display: block; }

.webradio-no-results { text-align: center; color: var(--webradio-text-muted); padding: 40px 0; grid-column: 1 / -1; }

/* Carregar mais */
.webradio-loadmore-wrap { text-align: center; margin-top: 24px; }
.webradio-loadmore-btn {
	appearance: none; -webkit-appearance: none; font-family: inherit;
	background: var(--webradio-surface) !important; border: 1px solid var(--webradio-border) !important; color: var(--webradio-text) !important;
	border-radius: 999px !important; padding: 10px 26px !important; margin: 0; cursor: pointer; box-shadow: none !important;
}
.webradio-loadmore-btn:hover { border-color: var(--webradio-primary) !important; color: var(--webradio-primary-light) !important; }
.webradio-loadmore-btn[disabled] { opacity: .5; cursor: default; }

/* Paginação numerada */
.webradio-pagination {
	display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 26px; flex-wrap: wrap;
}
.webradio-page-btn {
	appearance: none; -webkit-appearance: none; font-family: inherit;
	min-width: 38px; height: 38px; padding: 0 10px !important; margin: 0; border-radius: 9px !important;
	border: 1px solid var(--webradio-border) !important; box-shadow: none !important;
	background: var(--webradio-surface) !important; color: var(--webradio-text) !important; cursor: pointer; font-size: .92em;
	display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.webradio-page-btn:hover:not([disabled]) { border-color: var(--webradio-primary) !important; color: var(--webradio-primary-light) !important; }
.webradio-page-btn.is-active { background: var(--webradio-primary) !important; border-color: var(--webradio-primary) !important; color: #fff !important; }
.webradio-page-btn[disabled] { opacity: .35; cursor: default; }
.webradio-page-nav .dashicons { font-size: 16px; width: 16px; height: 16px; }
.webradio-page-ellipsis { color: var(--webradio-text-muted); padding: 0 4px; }

.webradio-swipe-hint {
	display: none;
	text-align: center;
	color: var(--webradio-text-muted);
	font-size: .8em;
	margin: 8px 0 0;
}
@media (hover: none) and (pointer: coarse) {
	.webradio-swipe-hint { display: block; }
}

/* Widget: Gêneros (estilo lista, com ícone e contagem) */
.webradio-genres-widget {
	background: var(--webradio-surface, #1c1a29);
	border: 1px solid var(--webradio-border, #322e47);
	border-radius: 14px;
	padding: 18px;
	color: var(--webradio-text, #f1f0f7);
	max-width: 340px;
}
.webradio-genres-widget-title { margin: 0 0 12px; font-size: 1.1em; font-weight: 700 !important; color: var(--webradio-text) !important; text-transform: none !important; }
.webradio-genres-widget-list { list-style: none; margin: 0; padding: 0; }
.webradio-genres-widget-list li { border-bottom: 1px solid var(--webradio-border, #322e47); }
.webradio-genres-widget-list li:last-child { border-bottom: 0; }
.webradio-genres-widget-list a {
	display: flex; align-items: center; gap: 10px; padding: 10px 2px; text-decoration: none;
	color: var(--webradio-text, #f1f0f7); transition: color .15s ease;
}
.webradio-genres-widget-list a:hover { color: var(--webradio-primary-light, #a78bfa); }
.webradio-genre-icon { color: var(--webradio-primary, #7c3aed); font-size: 18px; width: 18px; height: 18px; flex: 0 0 auto; }
.webradio-genre-name { flex: 1 1 auto; font-size: .95em; }
.webradio-genre-widget-count { color: var(--webradio-text-muted, #9c98b5); font-size: .85em; }
.webradio-genres-viewall {
	display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--webradio-primary-light, #a78bfa);
	text-decoration: none; font-size: .9em; font-weight: 600;
}
.webradio-genres-viewall:hover { text-decoration: underline; }
.webradio-genres-viewall .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* Widget: Estações mais ouvidas */
.webradio-top-stations-widget {
	background: var(--webradio-surface, #1c1a29);
	border: 1px solid var(--webradio-border, #322e47);
	border-radius: 14px;
	padding: 18px;
	color: var(--webradio-text, #f1f0f7);
	max-width: 340px;
}
.webradio-top-stations-title { margin: 0 0 12px; font-size: 1.1em; font-weight: 700 !important; color: var(--webradio-text) !important; text-transform: none !important; }
.webradio-top-stations-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.webradio-top-item {
	display: flex; align-items: center; gap: 10px; padding: 9px 2px; cursor: pointer;
	border-bottom: 1px solid var(--webradio-border, #322e47); transition: background-color .15s ease;
}
.webradio-top-item:last-child { border-bottom: 0; }
.webradio-top-item:hover { background: rgba(124,58,237,.08); border-radius: 8px; }
.webradio-top-rank {
	flex: 0 0 20px; font-weight: 700; color: var(--webradio-text-muted, #9c98b5); font-size: .9em; text-align: center;
}
.webradio-top-logo { width: 30px; height: 30px; border-radius: 6px; overflow: hidden; flex: 0 0 30px; background: var(--webradio-surface-2, #242137); }
.webradio-top-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.webradio-top-name { flex: 1 1 auto; font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webradio-top-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; }
.webradio-top-bars i { width: 3px; background: var(--webradio-primary, #7c3aed); border-radius: 2px; display: block; }
.webradio-top-bars i:nth-child(1) { height: 40%; }
.webradio-top-bars i:nth-child(2) { height: 90%; }
.webradio-top-bars i:nth-child(3) { height: 60%; }
.webradio-top-bars i:nth-child(4) { height: 100%; }
.webradio-top-item.is-playing .webradio-top-bars i { animation: webradio-eq 1s ease-in-out infinite; }
.webradio-top-item.is-playing .webradio-top-bars i:nth-child(1) { animation-delay: -.9s; }
.webradio-top-item.is-playing .webradio-top-bars i:nth-child(2) { animation-delay: -.6s; }
.webradio-top-item.is-playing .webradio-top-bars i:nth-child(3) { animation-delay: -.3s; }

/* Busca */
.webradio-search-field { position: relative; flex: 1 1 260px; }
.webradio-search-field .dashicons {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--webradio-text-muted); pointer-events: none;
}
.webradio-search-input {
	width: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--webradio-border); border-radius: 10px;
	font-size: .95em; background: var(--webradio-bg); color: var(--webradio-text);
}
.webradio-search-input::placeholder { color: var(--webradio-text-muted); }
.webradio-search-input:focus, .webradio-search-genre:focus, .webradio-search-city:focus { outline: 2px solid var(--webradio-primary); outline-offset: 1px; }

.webradio-search-select-wrap { position: relative; flex: 0 1 220px; display: flex; align-items: center; }
.webradio-search-select-wrap .dashicons {
	position: absolute; left: 14px; color: var(--webradio-primary-light); font-size: 16px; pointer-events: none; z-index: 1;
}
.webradio-search-genre, .webradio-search-city {
	width: 100%; padding: 12px 14px 12px 38px; border: 1px solid var(--webradio-border); border-radius: 10px;
	background: var(--webradio-bg); color: var(--webradio-text); appearance: none; font-size: .95em;
}
.webradio-optional-tag { position: absolute; right: 12px; font-size: .74em; color: var(--webradio-text-muted); pointer-events: none; }

/* Standalone [webradio_search] (mantém compatibilidade com instalações antigas) */
.webradio-search-results { margin-top: 16px; }
.webradio-search-form {
	display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
	background: var(--webradio-surface); border: 1px solid var(--webradio-border); border-radius: 14px; padding: 14px;
}

/* Gêneros */
.webradio-genres-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.webradio-genre-pill {
	display: inline-flex; align-items: center; gap: 6px; background: var(--webradio-surface); color: var(--webradio-text);
	border: 1px solid var(--webradio-border);
	padding: 8px 16px; border-radius: 999px; text-decoration: none; font-size: .9em; transition: all .15s ease;
}
.webradio-genre-pill:hover { background: var(--webradio-primary); border-color: var(--webradio-primary); color: #fff; }
.webradio-genre-count { background: rgba(255,255,255,.08); border-radius: 999px; padding: 1px 8px; font-size: .8em; }
.webradio-genre-pill:hover .webradio-genre-count { background: rgba(255,255,255,.25); }

/* Player fixo (sticky) */
.webradio-player {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
	background: var(--webradio-surface, #0e0c16); color: var(--webradio-text, #f1f0f7); box-shadow: 0 -8px 30px rgba(0,0,0,.35);
	border-top: 1px solid var(--webradio-border, #26223a);
	transition: transform .25s ease;
}
.webradio-player[hidden] { display: none; }
.webradio-player.is-minimized .webradio-player-inner { padding-top: 6px; padding-bottom: 6px; }
.webradio-player.is-minimized .webradio-player-text .webradio-player-track { display: none; }

.webradio-player-progress { height: 3px; width: 100%; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.webradio-player-progress::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--webradio-primary, #7c3aed), #a78bfa);
	transform: translateX(-100%);
}
.webradio-player.is-loading .webradio-player-progress::after { animation: webradio-progress 1.4s ease-in-out infinite; }
@keyframes webradio-progress { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

.webradio-player-inner {
	max-width: 1300px; margin: 0 auto; padding: 12px 16px;
	display: flex; align-items: center; gap: 16px;
}
.webradio-player-info { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.webradio-player-logo { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: 0 0 46px; background: #222; }
.webradio-player-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.webradio-player-text { min-width: 0; display: flex; flex-direction: column; }
.webradio-player-title { font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webradio-player-track { font-size: .8em; color: #a29dc2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Equalizer animado (visível apenas enquanto toca) */
.webradio-player-eq { display: none; align-items: flex-end; gap: 3px; height: 16px; flex: 0 0 auto; margin-left: 4px; }
.webradio-player.is-playing .webradio-player-eq { display: flex; }
.webradio-player-eq i { width: 3px; background: var(--webradio-primary-light, #a78bfa); border-radius: 2px; display: block; animation: webradio-eq 1s ease-in-out infinite; }
.webradio-player-eq i:nth-child(1) { height: 40%; animation-delay: -.9s; }
.webradio-player-eq i:nth-child(2) { height: 100%; animation-delay: -.6s; }
.webradio-player-eq i:nth-child(3) { height: 60%; animation-delay: -.3s; }
.webradio-player-eq i:nth-child(4) { height: 80%; animation-delay: 0s; }
@keyframes webradio-eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

.webradio-player-controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.webradio-player button {
	appearance: none; -webkit-appearance: none;
	font-family: inherit; text-transform: none; letter-spacing: normal; text-shadow: none;
}

.webradio-player-fav, .webradio-player-prev, .webradio-player-next {
	background: transparent !important; border: 0 !important; color: #a29dc2 !important; cursor: pointer;
	width: 34px !important; height: 34px !important; padding: 0 !important; margin: 0; min-width: 0;
	display: flex; align-items: center; justify-content: center; border-radius: 8px !important; box-shadow: none !important;
}
.webradio-player-fav:hover, .webradio-player-prev:hover, .webradio-player-next:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.webradio-player-fav.is-active { color: #f43f5e !important; }

.webradio-player-playpause {
	width: 44px !important; height: 44px !important; min-width: 0; padding: 0 !important; margin: 0;
	border-radius: 50% !important; border: 0 !important; background: var(--webradio-primary, #7c3aed) !important;
	color: #fff !important; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative;
	box-shadow: 0 4px 14px rgba(124, 58, 237, .5) !important;
}
.webradio-player-playpause:hover { background: var(--webradio-primary-light, #a78bfa) !important; }
.webradio-player-playpause .webradio-icon-play { display: block; }
.webradio-player-playpause.is-playing .webradio-icon-play { display: none; }
.webradio-player-playpause.is-playing .webradio-icon-pause { display: block; }
.webradio-player-playpause.is-loading .webradio-icon-play,
.webradio-player-playpause.is-loading .webradio-icon-pause { display: none; }
.webradio-player-playpause.is-loading .webradio-icon-loading { display: block; }

.webradio-player-volume { display: none; align-items: center; gap: 8px; color: #a29dc2; margin-left: 6px; }
.webradio-player-volume input[type="range"] { width: 90px; accent-color: var(--webradio-primary, #7c3aed); }

.webradio-player-close, .webradio-player-minimize {
	background: transparent !important; border: 0 !important; color: #a29dc2 !important; cursor: pointer;
	width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0; min-width: 0;
	display: flex; align-items: center; justify-content: center; border-radius: 6px !important; box-shadow: none !important;
}
.webradio-player-close:hover, .webradio-player-minimize:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }

@media (min-width: 700px) {
	.webradio-player-volume { display: flex; }
}
@media (max-width: 699px) {
	.webradio-player-minimize { display: none; }
	.webradio-player-prev, .webradio-player-next { display: none; }
	.webradio-player-inner { gap: 10px; }
	.webradio-player-logo { width: 38px; height: 38px; flex-basis: 38px; }
}

/* Favoritos vazio */
.webradio-loading-placeholder { text-align: center; color: var(--webradio-text-muted); padding: 30px 0; }

/* Reduz movimento para quem prefere */
@media (prefers-reduced-motion: reduce) {
	.webradio-card, .webradio-play-btn, .webradio-player, .webradio-player-eq i { transition: none !important; animation: none !important; }
}

/* =========================================================================
 * Tema visual "Clássico": fundo claro, capa em destaque com faixa de título
 * sobreposta na parte inferior — inspirado em diretórios de rádio tradicionais.
 * ========================================================================= */
.webradio-wrap[data-theme="classic"],
.webradio-player[data-theme="classic"],
.webradio-genres-widget[data-theme="classic"],
.webradio-top-stations-widget[data-theme="classic"] {
	--webradio-primary: #2563eb;
	--webradio-primary-light: #3b82f6;
	--webradio-bg: #f3f4f6;
	--webradio-surface: #ffffff;
	--webradio-surface-2: #e5e7eb;
	--webradio-border: #e5e7eb;
	--webradio-text: #1f2937;
	--webradio-text-muted: #6b7280;
}

.webradio-wrap[data-theme="classic"] .webradio-embedded-search,
.webradio-wrap[data-theme="classic"] .webradio-search-form {
	box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.webradio-wrap[data-theme="classic"] .webradio-search-input,
.webradio-wrap[data-theme="classic"] .webradio-search-genre,
.webradio-wrap[data-theme="classic"] .webradio-search-city {
	background: #f9fafb;
}

/* Card: capa em destaque com faixa de título sobreposta (sem padding, sem texto extra) */
.webradio-wrap[data-theme="classic"] .webradio-card {
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.webradio-wrap[data-theme="classic"] .webradio-card:hover {
	box-shadow: 0 8px 20px rgba(15,23,42,.14);
	border-color: var(--webradio-border);
}
.webradio-wrap[data-theme="classic"] .webradio-card-logo {
	margin-bottom: 0;
	border-radius: 0;
	aspect-ratio: 1 / 1;
}
.webradio-wrap[data-theme="classic"] .webradio-card-logo img {
	border-radius: 0;
}
.webradio-wrap[data-theme="classic"] .webradio-card-body {
	position: relative;
	z-index: 1;
	margin-top: -48px;
	background: linear-gradient(0deg, rgba(15,23,42,.82), rgba(15,23,42,.5));
	padding: 10px 12px 8px;
}
.webradio-wrap[data-theme="classic"] .webradio-card-title {
	color: #fff;
	font-size: .92em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.webradio-wrap[data-theme="classic"] .webradio-card-slogan,
.webradio-wrap[data-theme="classic"] .webradio-card-meta {
	display: none;
}
.webradio-wrap[data-theme="classic"] .webradio-play-btn {
	bottom: 56px;
	border-color: #fff !important;
}
.webradio-wrap[data-theme="classic"] .webradio-fav-btn {
	background: rgba(255,255,255,.9) !important;
	color: #9ca3af !important;
}
.webradio-wrap[data-theme="classic"] .webradio-fav-btn.is-active { color: #ef4444 !important; }

/* Lista: mantém texto visível (slogan/gênero fazem sentido em linha) */
.webradio-wrap[data-theme="classic"][data-view="list"] .webradio-card-body {
	margin-top: 0; background: none; padding: 0;
}
.webradio-wrap[data-theme="classic"][data-view="list"] .webradio-card-title { color: var(--webradio-text); }
.webradio-wrap[data-theme="classic"][data-view="list"] .webradio-card-slogan,
.webradio-wrap[data-theme="classic"][data-view="list"] .webradio-card-meta { display: block; }
.webradio-wrap[data-theme="classic"][data-view="list"] .webradio-card-logo { aspect-ratio: auto; }

/* Player clássico: barra clara */
.webradio-player[data-theme="classic"] {
	background: var(--webradio-surface, #ffffff);
	color: var(--webradio-text, #1f2937);
	border-top: 1px solid var(--webradio-border, #e5e7eb);
	box-shadow: 0 -6px 20px rgba(15,23,42,.08);
}
.webradio-player[data-theme="classic"] .webradio-player-track { color: var(--webradio-text-muted, #6b7280); }
.webradio-player[data-theme="classic"] .webradio-player-fav,
.webradio-player[data-theme="classic"] .webradio-player-prev,
.webradio-player[data-theme="classic"] .webradio-player-next,
.webradio-player[data-theme="classic"] .webradio-player-close,
.webradio-player[data-theme="classic"] .webradio-player-minimize,
.webradio-player[data-theme="classic"] .webradio-player-volume {
	color: var(--webradio-text-muted, #6b7280) !important;
}
.webradio-player[data-theme="classic"] .webradio-player-fav:hover,
.webradio-player[data-theme="classic"] .webradio-player-prev:hover,
.webradio-player[data-theme="classic"] .webradio-player-next:hover,
.webradio-player[data-theme="classic"] .webradio-player-close:hover,
.webradio-player[data-theme="classic"] .webradio-player-minimize:hover {
	background: var(--webradio-surface-2, #f3f4f6) !important; color: var(--webradio-text, #1f2937) !important;
}
.webradio-player[data-theme="classic"] .webradio-player-fav.is-active {
	color: #ef4444 !important;
}

/* =========================================================================
 * Tema visual "Bento Grid": fundo claro, capas circulares, botão de play
 * flutuante sobre a capa, tag de gênero colorida e player em formato de pílula.
 * ========================================================================= */
.webradio-wrap[data-theme="bento"],
.webradio-player[data-theme="bento"],
.webradio-genres-widget[data-theme="bento"],
.webradio-top-stations-widget[data-theme="bento"] {
	--webradio-primary: #6366f1;
	--webradio-primary-light: #818cf8;
	--webradio-bg: #f4f4f8;
	--webradio-surface: #ffffff;
	--webradio-surface-2: #eef0fc;
	--webradio-border: #ececf5;
	--webradio-text: #1e1b3a;
	--webradio-text-muted: #6b7280;
}

.webradio-wrap[data-theme="bento"] .webradio-embedded-search,
.webradio-wrap[data-theme="bento"] .webradio-search-form {
	box-shadow: 0 1px 3px rgba(30,27,58,.06);
	border-radius: 18px;
}
.webradio-wrap[data-theme="bento"] .webradio-search-input,
.webradio-wrap[data-theme="bento"] .webradio-search-genre,
.webradio-wrap[data-theme="bento"] .webradio-search-city {
	background: var(--webradio-bg);
	border-radius: 12px;
}
.webradio-wrap[data-theme="bento"] .webradio-search-submit-btn { border-radius: 12px !important; }

/* Card: capa circular, botão de play flutuante, tag de gênero colorida */
.webradio-wrap[data-theme="bento"] .webradio-card {
	border-radius: 20px;
	box-shadow: 0 1px 3px rgba(30,27,58,.06);
	align-items: center;
	text-align: center;
	padding: 20px 16px 18px;
}
.webradio-wrap[data-theme="bento"] .webradio-card:hover {
	box-shadow: 0 10px 24px rgba(99,102,241,.16);
	transform: translateY(-3px);
	border-color: var(--webradio-border);
}
.webradio-wrap[data-theme="bento"] .webradio-card-logo {
	width: 84px; height: 84px; aspect-ratio: 1 / 1; border-radius: 50%; margin: 0 auto 12px;
	box-shadow: 0 2px 8px rgba(30,27,58,.12);
}
.webradio-wrap[data-theme="bento"] .webradio-card-logo img { border-radius: 50%; }
.webradio-wrap[data-theme="bento"] .webradio-card-body { width: 100%; }
.webradio-wrap[data-theme="bento"] .webradio-card-title { font-weight: 700; }
.webradio-wrap[data-theme="bento"] .webradio-card-meta { justify-content: center; margin-top: 6px; }
.webradio-wrap[data-theme="bento"] .webradio-card-genre {
	background: var(--webradio-genre-color, var(--webradio-surface-2));
	color: var(--webradio-genre-text, var(--webradio-primary));
	font-weight: 600;
	padding: 3px 12px; border-radius: 999px;
}
.webradio-wrap[data-theme="bento"] .webradio-card-genre:not(:last-child)::after { content: ""; }
.webradio-wrap[data-theme="bento"] .webradio-card-city { width: auto; margin-top: 0; }

.webradio-wrap[data-theme="bento"] .webradio-play-btn {
	position: absolute; right: 50%; bottom: -14px; transform: translateX(48px);
	border: 3px solid var(--webradio-surface) !important;
}
.webradio-wrap[data-theme="bento"] .webradio-play-btn:hover { transform: translateX(48px) scale(1.06); }

.webradio-wrap[data-theme="bento"] .webradio-fav-btn {
	background: transparent !important; color: #d1d5db !important; top: 8px; right: 8px;
}
.webradio-wrap[data-theme="bento"] .webradio-fav-btn.is-active { color: #f43f5e !important; }

/* Lista: capa circular menor, card em linha */
.webradio-wrap[data-theme="bento"][data-view="list"] .webradio-card { flex-direction: row; text-align: left; padding: 12px 16px; }
.webradio-wrap[data-theme="bento"][data-view="list"] .webradio-card-logo { width: 56px; height: 56px; margin: 0 14px 0 0; }
.webradio-wrap[data-theme="bento"][data-view="list"] .webradio-card-meta { justify-content: flex-start; }
.webradio-wrap[data-theme="bento"][data-view="list"] .webradio-play-btn {
	position: absolute; right: 16px; left: auto; bottom: auto; top: 50%; transform: translateY(-50%);
}
.webradio-wrap[data-theme="bento"][data-view="list"] .webradio-play-btn:hover { transform: translateY(-50%) scale(1.06); }

/* Player estilo pílula, flutuante */
.webradio-player[data-theme="bento"] {
	background: var(--webradio-surface, #ffffff);
	color: var(--webradio-text);
	border: 1px solid var(--webradio-border);
	border-radius: 999px;
	box-shadow: 0 12px 32px rgba(30,27,58,.14);
	left: 16px; right: 16px; bottom: 16px;
}
.webradio-player[data-theme="bento"] .webradio-player-progress { border-radius: 999px 999px 0 0; overflow: hidden; }
.webradio-player[data-theme="bento"] .webradio-player-logo { border-radius: 50%; }
.webradio-player[data-theme="bento"] .webradio-player-track { color: #16a34a; display: flex; align-items: center; gap: 4px; }
.webradio-player[data-theme="bento"] .webradio-player-track::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; display: inline-block;
}
.webradio-player[data-theme="bento"] .webradio-player-fav,
.webradio-player[data-theme="bento"] .webradio-player-prev,
.webradio-player[data-theme="bento"] .webradio-player-next,
.webradio-player[data-theme="bento"] .webradio-player-close,
.webradio-player[data-theme="bento"] .webradio-player-minimize,
.webradio-player[data-theme="bento"] .webradio-player-volume {
	color: var(--webradio-text-muted, #9ca3af) !important;
}
.webradio-player[data-theme="bento"] .webradio-player-fav:hover,
.webradio-player[data-theme="bento"] .webradio-player-prev:hover,
.webradio-player[data-theme="bento"] .webradio-player-next:hover,
.webradio-player[data-theme="bento"] .webradio-player-close:hover,
.webradio-player[data-theme="bento"] .webradio-player-minimize:hover {
	background: var(--webradio-surface-2) !important; color: var(--webradio-text) !important;
}
.webradio-player[data-theme="bento"] .webradio-player-fav.is-active { color: #f43f5e !important; }
@media (max-width: 699px) {
	.webradio-player[data-theme="bento"] { left: 8px; right: 8px; bottom: 8px; border-radius: 24px; }
}

/* =========================================================================
 * Alternador de modo claro/escuro: disponível para os 3 estilos visuais.
 * Sem preferência salva, cada tema mantém seu padrão de sempre (Moderno = escuro,
 * Clássico/Bento Grid = claro). O botão na barra de ferramentas alterna e memoriza
 * a escolha do visitante (localStorage), independente do tema escolhido pelo admin.
 * ========================================================================= */
.webradio-wrap[data-theme="modern"][data-mode="light"],
.webradio-player[data-theme="modern"][data-mode="light"] {
	--webradio-bg: #f5f4fa; --webradio-surface: #ffffff; --webradio-surface-2: #eef0fc; --webradio-border: #e5e4f0;
	--webradio-text: #1e1b3a; --webradio-text-muted: #6b6880;
}

.webradio-wrap[data-theme="classic"][data-mode="dark"],
.webradio-player[data-theme="classic"][data-mode="dark"] {
	--webradio-bg: #111827; --webradio-surface: #1f2937; --webradio-surface-2: #374151; --webradio-border: #374151;
	--webradio-text: #f9fafb; --webradio-text-muted: #9ca3af;
}
.webradio-wrap[data-theme="classic"][data-mode="dark"] .webradio-card-body {
	background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.6));
}

.webradio-wrap[data-theme="bento"][data-mode="dark"],
.webradio-player[data-theme="bento"][data-mode="dark"] {
	--webradio-bg: #15131f; --webradio-surface: #1f1b33; --webradio-surface-2: #2a2444; --webradio-border: #332c52;
	--webradio-text: #f1f0f7; --webradio-text-muted: #9c98b5;
}
.webradio-wrap[data-theme="bento"][data-mode="dark"] .webradio-fav-btn { color: #6b7280 !important; }
.webradio-wrap[data-theme="bento"][data-mode="dark"] .webradio-fav-btn.is-active { color: #f43f5e !important; }