/* Reference layout, with local assets and app-prefixed classes. */
@font-face {font-family:Rubik;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/rubik-300.ttf) format("truetype");}
@font-face {font-family:Rubik;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-400.ttf) format("truetype");}
@font-face {font-family:Rubik;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rubik-500.ttf) format("truetype");}
@font-face {font-family:Rubik;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/rubik-700.ttf) format("truetype");}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { color: #eee; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input { font: inherit; }
button, [role="button"] { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline: 2px solid #ff611a !important; outline-offset: 3px; }
#parent { max-width: 100%; }
#logo { background-image: url('../images/logo-fazendo-radio-transparente.png') !important; background-size: contain !important; height: 66px !important; width: 158px !important; }
#content header { z-index: 5; }
#search .app-search-result { max-height: 65vh; overflow: auto; z-index: 20; background: #292929; box-shadow: 0 10px 30px #0008; }
#search .app-search-result li a { display: flex; align-items: center; gap: 12px; padding: 12px; text-decoration: none; color: white; }
#search .app-search-result li img { width: 42px; height: 42px; border-radius: 5px; }
#search .app-search-result li:hover { background: #414141; }
#slider .app-slider-content { margin: 0 auto; width: 50%; }
#slider .app-glide__track { overflow: visible; }
#slider .app-glide__slides { display: flex; transition: transform .4s; }
#slider .app-slide { flex: 0 0 100%; }
#slider .app-slide img { display: block; width: calc(100% - 10px); }
#slider .app-glide__bullets { display: flex; justify-content: center; gap: 9px; }
#slider .app-glide__bullet { border: 0; padding: 0; }
#slider .app-glide__bullet--active { background: #ff611a !important; }
#slider .app-glide__arrow { z-index: 2; }
.app-ad-content { position: relative; }
.app-ad-content::after { content: 'PUBLICIDADE'; position: absolute; top: 16px; left: 0; color: #555; font-size: 10px; }
#stations > ul:not(.app-filters) { width: 100%; gap: 0; }
.app-station img { object-fit: cover; }
.app-station .app-desc p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app-empty, .app-not-found { padding: 40px 26px; color: #aaa; }
.app-status { position: fixed; bottom: 20px; left: 20px; max-width: min(520px, calc(100vw - 40px)); background: #333; border: 1px solid #ff611a; border-radius: 6px; color: #fff; padding: 15px 20px; z-index: 100; font-size: 14px; line-height: 1.5; }
.app-queue-empty { display: block; color: #aaa; font-size: 13px; line-height: 1.6; padding: 20px 10px; list-style: none; }
.app-queue-item { padding: 12px; border-bottom: 1px solid #ffffff12; list-style: none; }
.app-queue-item strong, .app-queue-item span { display: block; font-size: 13px; line-height: 1.6; }
.app-queue-item span { color: #aaa; }
.app-station-songs ul { padding: 0; }
#player .app-station-artist-img { object-fit: cover; }
#player .app-player-song .app-subtitle { font-size: 12px; line-height: 1.5; color: #aaa; }
#player .app-player-song { min-height: 115px; }
#volControl { display: block !important; width: 72px; }
#volControl input { width: 100%; accent-color: #ff611a; }
.app-follow-station[aria-pressed="true"] { background: #ff611a !important; color: #202020 !important; }
footer .app-fm-footer { object-fit: contain; }
#player .app-like.app-voted, #player .app-dislike.app-voted { color: #ff611a; }
#shareContent { display: none !important; }
@media (max-width: 800px) {
  #logo { width: 105px !important; height: 58px !important; }
  #slider .app-slider-content { width: 80%; }
  #parent #content { padding-bottom: 70px; }
  #parent #player { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; transform: translateX(110%); }
  #parent #player.app-opened { transform: none; }
  #parent #minPlayer { display: flex; }
  #parent #player .app-player-body { height: 100%; overflow-y: auto; }
  #parent #player .app-player-info.app-show-info { display: block; transform: none; }
  .app-status { bottom: 65px; }
  .app-page-header { gap: 15px; }
  #parent #pageTitle { font-size: 2.1em; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
#logo { background-repeat: no-repeat !important; background-position: center !important; }
#slider .app-slide::before { display: none; }

.app-ad-content::after { content: none; }
#parent #player .app-player-body .app-player-controls .app-controls #volControl { display: flex; transform: none; bottom: 48px; left: 0; width: 80px; height: 24px; padding: 0; background: transparent; }
#parent #player .app-player-body .app-player-controls .app-controls #volControl input { appearance: auto; width: 80px; height: 20px; margin: 0; }
@media (max-width:800px) {
  #content header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
  #logo { width: 70px !important; }
  #parent #content header #menuContent { display: block; width: calc(100% - 90px); }
  #parent #content header #search { display: block; width: 100%; }
  #parent #content header #search input { display: block; width: 100%; padding: 10px 30px 10px 10px; font-size: 12px; }
  #search .app-search-result { position: fixed; top: 70px; left: 10px; right: 10px; width: auto; }
}
@media (max-width:800px) { #parent #content header #search { display:block !important; } #parent #player.app-opened { transform:translateX(0) !important; } }

/* FazendoRadio — preto e laranja. */
:root { --app-accent: #ff611a; --app-accent-hover: #ff8047; --app-bg: #090909; --app-surface: #141414; }
body, #parent, #parent #content { background-color: var(--app-bg); }
#parent #content header { background: rgba(9,9,9,.96); border-bottom: 1px solid #ff611a26; }
#parent #player, #parent #minPlayer { background-color: #080808; }
#parent #player > .app-bg, #parent #minPlayer > .app-bg { opacity: .12; filter: grayscale(1) blur(30px); }
#pageContainer > .app-screen-padding > .app-bg, #slider > .app-bg { opacity: .22; filter: grayscale(1); }
#parent .app-station { background-color: var(--app-surface); }
#parent #player .app-play-pause::before, #parent #minPlayer .app-play-pause::before { color: var(--app-accent); }
#parent #player .app-play-pause::after, #parent #minPlayer .app-play-pause::after { color: #090909; }
#parent .app-play-pause:hover::before { color: var(--app-accent-hover); }
#parent #player .app-progress, #parent #player .app-bar-overflow { background: var(--app-accent); }
#parent .app-follow-station { border-color: var(--app-accent); color: var(--app-accent); }
#parent .app-follow-station:hover { background: #ff611a1c; }
#stations .app-filters .app-active { background: #ff611a22; }
#search input:focus { box-shadow: 0 0 0 1px var(--app-accent); }
::selection { background: #ff611a; color: #090909; }

/* Navegação editorial do cabeçalho. */
#parent #content header { display: flex; align-items: center; gap: 14px; padding: 0 18px; min-height: 80px; }
#parent #content header > a { flex: 0 0 90px; }
#parent #content header #logo { width: 90px !important; }
#parent #content header #menuContent { flex: 1 1 180px; width: auto; min-width: 120px; }
.app-main-nav { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.app-main-nav > a, .app-main-nav button { color: #eee; text-decoration: none; white-space: nowrap; font: 400 14px Rubik,sans-serif; border: 0; background: transparent; padding: 12px 0; }
.app-main-nav > a:hover, .app-main-nav button:hover, .app-main-nav button[aria-expanded="true"] { color: #ff611a; }
.app-nav-live { display: flex; align-items: center; gap: 6px; }
.app-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff611a; box-shadow: 0 0 9px #ff611a77; }
.app-nav-contests { position: relative; }
.app-contests-list { position: absolute; left: -16px; top: 42px; width: 230px; padding: 10px 0; margin: 0; list-style: none; background: #171717; border: 1px solid #ff611a66; border-radius: 12px; box-shadow: 0 14px 30px #0008; z-index: 40; }
.app-contests-list a { display: block; padding: 11px 16px; color: #eee; text-decoration: none; font-size: 13px; line-height: 1.5; }
.app-contests-list a:hover { background: #ff611a1c; color: #ff8047; }
.app-menu-toggle { display: none; color: #ff611a; border: 1px solid #ff611a44; background: #141414; border-radius: 6px; font-size: 24px; width: 44px; height: 44px; }
.app-editorial-page { padding: 110px 26px 70px; min-height: 65vh; }
.app-editorial-back { color: #aaa; font-size: 13px; text-decoration: none; }
.app-editorial-page > p { color: #ff611a; font-size: 12px; letter-spacing: 2px; margin-top: 35px; }
.app-editorial-page h1 { font-size: clamp(28px,4vw,46px); margin: 14px 0 30px; }
.app-editorial-empty { padding: 30px; background: #141414; border: 1px solid #ffffff12; border-radius: 10px; color: #aaa; line-height: 1.6; }
@media(max-width:800px) {
  #parent #content header { flex-wrap: wrap; gap: 0 14px; }
  .app-menu-toggle { display: block; margin-left: auto; flex: 0 0 44px; }
  #parent #content header #menuContent { flex: 1 1 160px; margin-left: 14px; }
  .app-main-nav { display: none; position: absolute; top: 80px; left: 0; right: 0; padding: 16px 24px; background: #111; border-bottom: 1px solid #ff611a55; max-height: calc(100dvh - 145px); overflow-y: auto; }
  .app-main-nav.app-menu-open { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .app-contests-list { position: static; width: 100%; min-width: 230px; margin: 0 0 12px; box-shadow: none; }
}
@media(max-width:600px) {
  #parent #content header { padding: 0 10px; gap: 0 8px; }
  #parent #content header > a { flex-basis: 70px; }
  #parent #content header #logo { width: 70px !important; }
  #parent #content header #menuContent { min-width: 0; flex: 1 1 0; margin-left: 0; }
  .app-main-nav.app-menu-open { flex-direction: column; align-items: stretch; gap: 0; }
  .app-main-nav > a, .app-main-nav > button, .app-contests-toggle { text-align: left; min-height: 44px; width: 100%; }
}


/* Menu completo no desktop; botão somente no celular, à direita. */
.app-contests-toggle { display: flex; align-items: center; gap: 6px; }
.app-submenu-svg { flex-shrink: 0; transition: transform .2s ease; }
.app-contests-toggle[aria-expanded="true"] .app-submenu-svg { transform: rotate(180deg); }
.app-menu-toggle { align-items: center; justify-content: center; }
@media(min-width:801px) {
  #parent #content header { flex-wrap: nowrap; }
  .app-menu-toggle { display: none !important; }
  .app-main-nav { display: flex; flex: 1 1 0; flex-wrap: wrap; gap: 0 16px; min-width: 0; }
}
@media(max-width:800px) {
  #parent #content header { justify-content: space-between; }
  .app-menu-toggle { display: flex; margin-left: auto; }
}
#parent #content header { width:100%; box-sizing:border-box; }

/* Player lateral à esquerda somente no desktop. */
@media (min-width:801px) {
  #parent > #player { order:-1; border-right:1px solid #ff611a26; }
  #parent > #content { min-width:0; }
}

/* Controles circulares em SVG, sem o símbolo do template anterior. */
#parent .app-play-pause::before, #parent .app-play-pause::after { content:none !important; display:none !important; }
#parent .app-play-pause { position:relative; width:44px; height:44px; border-radius:50%; background:#ff611a; color:#090909; font-family:inherit; flex-shrink:0; transition:background .2s,transform .2s; }
#parent .app-play-pause:hover { background:#ff8047; }
.app-control-icon { display:block; width:22px; height:22px; flex-shrink:0; }
#parent #player .app-play-pause { width:58px; height:58px; box-shadow:0 0 0 5px #ff611a0b; }
#parent #player .app-play-pause .app-control-icon { width:26px; height:26px; }
#parent #minPlayer .app-play-pause { width:40px; height:40px; }
#parent .app-play-pause.app-full { width:auto; height:44px; padding:0 18px; gap:10px; border-radius:30px; }
#parent .app-play-pause.app-full span { padding:0; margin:0; height:auto; min-width:0; background:none; color:inherit; font-size:12px; }
#parent #player .app-volume::before { content:none !important; }
#parent #player .app-player-body .app-player-controls .app-controls .app-volume { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
#parent #player .app-player-body .app-player-controls .app-controls #volControl { bottom:58px; left:0; width:188px; height:48px; padding:12px; display:flex !important; gap:10px; background:#202020; border:1px solid #ffffff20; border-radius:10px; z-index:5; box-shadow:0 6px 24px #0007; }
#parent #player .app-player-body .app-player-controls .app-controls #volControl[hidden] { display:none !important; }
#parent #player .app-player-body .app-player-controls .app-controls #volControl input { width:112px; }
.app-volume-value { font:11px Rubik,sans-serif; color:#ccc; width:34px; text-align:right; }

#parent #player .app-progress { background:#ff611a !important; }

/* Menu principal reduzido conforme referência enviada. */
.app-main-nav { gap:0 20px; }
.app-main-nav > a { padding:7px 9px; font-size:13px; font-weight:500; }
.app-main-nav > a[aria-current="page"] { color:#141414; background:#fff; border-radius:24px; }
.app-main-nav > .app-nav-plus { display:inline-flex; align-items:center; gap:7px; color:#ff611a; }
.app-menu-icon { width:21px; height:21px; flex-shrink:0; }
.app-header-actions { display:flex; align-items:center; gap:20px; margin-left:auto; position:relative; }
.app-main-nav .app-notifications-toggle { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; }
.app-nav-login { display:flex; align-items:center; justify-content:center; min-width:100px; min-height:36px; padding:8px 20px; color:#111; background:#ff611a; border-radius:30px; font-size:13px; font-weight:500; text-decoration:none; }
.app-nav-login:hover { background:#ff8047; }
.app-notifications-panel { position:absolute; right:0; top:52px; width:280px; padding:22px; background:#191919; border:1px solid #ffffff20; border-radius:12px; box-shadow:0 10px 30px #0008; z-index:40; }
.app-notifications-panel strong { font-size:16px; }
.app-notifications-panel p { color:#eee; font-size:14px; margin:22px 0 8px; }
.app-notifications-panel span { color:#999; font-size:12px; line-height:1.6; }
@media(max-width:800px) {
  .app-main-nav > a { padding:12px; }
  .app-header-actions { margin:12px 0 0; width:100%; justify-content:space-between; }
  .app-notifications-panel { left:0; right:auto; max-width:calc(100vw - 48px); }
}

/* Marca no topo do player lateral. */
#parent #player .app-player-header .app-aside-brand { display:block; width:160px; height:80px; margin:0 auto 10px; }
.app-aside-logo { display:block; width:100%; height:100%; object-fit:contain; }
@media (max-width:800px) {
  #parent #player .app-player-header .app-aside-brand { width:140px; height:70px; }
}

/* Espaçamento dos painéis e cards conforme a referência. */
@media (min-width:801px) {
  #parent { padding:3px; gap:10px; box-sizing:border-box; background:#000; }
  #parent > #player { order:-1; flex:0 0 260px; width:260px; height:100%; border:0; border-radius:10px; background:#111; }
  #parent > #content { height:100%; min-width:0; border-radius:10px; background:#111; }
  #parent #content header { border-radius:10px 10px 0 0; }
}
#stations > ul:not(.app-filters), #pageContainer .app-station-related > ul {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; width:100%; padding:0 32px; margin:26px 0;
}
#stations .app-station, #pageContainer .app-station-related .app-station {
  width:100%; min-width:0; margin:0; padding:16px; border-radius:10px; background:#181818; box-shadow:none;
}
#stations .app-station picture, #pageContainer .app-station-related .app-station picture { display:block; }
#stations .app-station picture::before, #pageContainer .app-station-related .app-station picture::before { display:none; }
#stations .app-station picture img, #pageContainer .app-station-related .app-station picture img { display:block; border-radius:6px; }
#stations .app-station .app-desc, #pageContainer .app-station-related .app-station .app-desc { background:transparent; padding:12px 0 0; margin:0; }
#pageContainer .app-station-related > ul { padding:0; }
@media (min-width:801px) and (max-width:1150px) {
  #stations > ul:not(.app-filters), #pageContainer .app-station-related > ul { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:800px) {
  #stations > ul:not(.app-filters), #pageContainer .app-station-related > ul { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 14px; gap:12px; }
  #stations .app-station, #pageContainer .app-station-related .app-station { padding:10px; }
  #pageContainer .app-station-related > ul { padding:0; }
}

/* Cabeçalho suspenso durante a rolagem do painel principal. */
#parent #content > header {
  position:sticky; top:0; z-index:25;
  height:80px; margin-bottom:-80px;
  transition:background-color .2s ease,box-shadow .2s ease;
}
#parent #content > header.app-header-raised {
  background:rgba(18,18,18,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 20px #0005;
}

/* O play do card sobrepõe a capa e não participa do fluxo do conteúdo. */
#parent .app-station picture > .app-play-pause {
  position:absolute; right:10px; bottom:10px; z-index:2;
}
#parent .app-station::before { pointer-events:none; }
#parent .app-station:focus-within picture > .app-play-pause { display:flex !important; }
@media (hover:none) {
  #parent .app-station picture > .app-play-pause { display:flex !important; }
}
#parent .app-station::before { inset:0; width:auto; height:auto; border-radius:inherit; }

.app-audience-status {margin:12px 32px 0;color:#999;font:11px/1.6 Rubik,sans-serif;}
@media(max-width:800px){.app-audience-status{margin-left:14px;margin-right:14px;}}

#player .app-live-credit{font-size:10px;line-height:1.4;margin:8px 0;color:#bbb;white-space:normal}#player .app-live-credit a{color:#ff611a}

#stations .app-filters{flex-wrap:wrap;gap:4px}
.app-radio-source{margin-top:16px;color:#aaa;line-height:1.6}
.app-radio-source a{color:#ff611a}
#stations .app-station[data-id="mt-trt"] picture img{background:#222;object-fit:contain;padding:16px;box-sizing:border-box}

/* Medidas conferidas na Hunter: painel 260px, capa 215px, play 40px. */
@media(min-width:801px){
  #parent{padding:10px !important;gap:10px !important}
  #parent #player .app-player-body{position:relative !important;display:block !important;width:260px !important;height:100% !important;padding:24px 6px !important}
  #parent #player .app-player-header{padding:0 !important;position:static !important}
  #parent #player .app-player-header .app-aside-brand{position:absolute !important;top:20px !important;left:50% !important;transform:translateX(-50%) !important;margin:0 !important;width:150px !important;height:80px !important}
  #parent #player .app-player-header>a:not(.app-aside-brand){display:none !important}
  #parent #player .app-waves,#parent #player .app-station-icon{display:none !important}
  #parent #player .app-flex-content{position:absolute !important;top:calc(50% - 182px) !important;left:22.5px !important;width:215px !important;height:215px !important;margin:0 !important;transform:none !important}
  #parent #player .app-flex-content>div{width:100% !important;height:100% !important}
  #parent #player .app-station-img{position:static !important;width:100% !important;height:100% !important;display:block !important}
  #parent #player .app-station-artist-img{display:block !important;width:100% !important;height:100% !important;max-width:none !important;border-radius:6px !important;object-fit:cover !important;transform:none !important;margin:0 !important}
  #parent #player .app-player-content{display:contents !important}
  #parent #player .app-player-song{position:absolute !important;top:calc(50% + 50px) !important;left:22.5px !important;width:215px !important;height:auto !important;min-height:0 !important;margin:0 !important;display:block !important;text-align:left !important}
  #parent #player .app-player-song .app-band,#parent #player .app-player-song .app-title{font-size:14px !important;line-height:18px !important;margin:0 !important;text-align:left !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  #parent #player .app-player-song .app-band{font-weight:500 !important}
  #parent #player .app-player-song .app-title{font-weight:400 !important}
  #parent #player .app-lyrics-content{display:none !important}
  #parent #player .app-live-credit{margin:4px 0 !important;font-size:9px !important;line-height:12px !important}
  #parent #player .app-player-controls{display:contents !important}
  #parent #player .app-progress-container{position:absolute !important;top:calc(50% + 101px) !important;left:22.5px !important;width:215px !important;margin:0 !important}
  #parent #player .app-progress-bar{height:4px !important;margin:0 !important}
  #parent #player .app-timer{font-size:10px !important;margin-top:8px !important}
  #parent #player .app-controls{position:absolute !important;bottom:58px !important;left:22.5px !important;width:215px !important;height:40px !important;margin:0 !important;justify-content:space-between !important;gap:0 !important}
  #parent #player .app-controls>button:not(.app-play-pause),#parent #player .app-controls>div{width:26px !important;height:26px !important;margin:0 !important;padding:0 !important}
  #parent #player .app-player-body .app-player-controls .app-controls .app-volume{width:26px !important;height:26px !important}
  #parent #player .app-play-pause{width:40px !important;height:40px !important;box-shadow:none !important;margin:0 !important}
  #parent #player .app-play-pause .app-control-icon{width:20px !important;height:20px !important}
  #parent #player .app-info-button{position:absolute !important;bottom:12px !important;left:0 !important;width:100% !important;height:26px !important}
  #parent #player .app-open-info{height:26px !important}
}
@media(max-width:800px){
  #parent #player .app-play-pause{width:44px !important;height:44px !important;box-shadow:none !important}
  #parent #player .app-play-pause .app-control-icon{width:22px !important;height:22px !important}
}

@media(min-width:801px){#parent #player .app-next-song{display:none!important}#parent #player .app-player-song p{padding:0!important}#parent #player .app-controls{top:auto!important;align-items:center!important}#parent #player .app-player-info{z-index:10}}

@media(min-width:801px){
  #parent #player .app-player-song .app-lyrics-content{display:contents!important}
  #parent #player .app-player-song .app-subtitle{display:none!important}
  #parent #player .app-live-credit{position:absolute;top:86px;left:0;width:215px}
}


.app-loading-spinner{animation:app-audio-loading .8s linear infinite;position:relative;z-index:1}
#parent #player.app-neumorphic .app-loading .app-control-icon{visibility:visible;color:#fff}
@keyframes app-audio-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.app-loading-spinner{animation:none}}
