/*
 * upradios-v3.css
 * Design travado: identidade navy+laranja do UpRadios + espaçamento e
 * tipografia inspirados no TuneIn. Ver histórico de protótipos aprovados.
 */
:root{
  --navy-1:#021f39; --navy-2:#0a3d6b; --orange:#ff9900; --orange-dark:#e68a00;
  --bg:#fafbfc; --card:#ffffff; --ink:#0f1b2d; --ink-soft:#4b5b70; --ink-faint:#8695a8;
  --line:#eaeef2; --radius-lg:18px; --radius-md:12px;
}
body.dark{
  --bg:#0a1424; --card:#111f34; --ink:#eef2f7; --ink-soft:#a9b8cc; --ink-faint:#71829a; --line:#1d3350;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink);
  transition:background .3s,color .3s; padding-bottom:96px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:'Poppins',sans-serif;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* Header */
.site-header{
  background:var(--navy-1); color:#fff; padding:0 32px; position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:36px; height:66px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:800; font-size:19px;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);}
.main-nav{display:flex; gap:28px; font-size:14px; font-weight:500;}
.main-nav a{opacity:.72;}
.main-nav a:hover, .main-nav a.active{opacity:1;}
.header-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.icon-btn{width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;}
.btn-orange{background:var(--orange);color:#1c1204;border:none;padding:9px 20px;border-radius:22px;font-size:13.5px;font-weight:700;cursor:pointer;}
.btn-orange:hover{background:var(--orange-dark);}

/* Search band */
.search-band{padding:52px 32px 40px; max-width:1180px; margin:0 auto;}
.search-band .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dark);margin-bottom:10px;}
.search-band h1{margin:0 0 10px;font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.08;max-width:640px;}
.search-band p{margin:0 0 26px;font-size:15px;color:var(--ink-soft);max-width:520px;}
.search-box{display:flex;gap:10px;max-width:680px;flex-wrap:wrap;background:var(--card);padding:8px;border-radius:16px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(2,31,57,.06);}
.search-box input,.search-box select{border:none;padding:12px 14px;font-size:14.5px;font-family:inherit;background:transparent;color:var(--ink);flex:1;min-width:140px;outline:none;}
.search-box select{color:var(--ink-soft);border-left:1px solid var(--line);border-radius:0;}
.search-box button{background:var(--navy-1);border:none;color:#fff;font-weight:700;padding:12px 24px;border-radius:11px;cursor:pointer;font-size:14px;}

main{padding:0 32px 20px; max-width:1180px; margin:0 auto;}

/* Category rows */
.cat-row{margin:40px 0;}
.cat-row__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;}
.cat-row__head h2{font-size:20px;margin:0;font-weight:700;letter-spacing:-.01em;}
.cat-row__see-all{font-size:12.5px;color:var(--orange-dark);font-weight:700;}
.cat-row__scroll{display:flex;gap:20px;overflow-x:auto;padding:4px 4px 14px;}

.rcard{flex:0 0 168px; display:block;}
.rcard__logo{width:100%;aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;background:var(--navy-2);margin-bottom:12px;position:relative;box-shadow:0 6px 18px rgba(15,27,45,.10);transition:transform .18s,box-shadow .18s;}
.rcard:hover .rcard__logo{transform:translateY(-4px);box-shadow:0 14px 28px rgba(15,27,45,.16);}
.rcard__logo img{width:100%;height:100%;object-fit:cover;}
.rcard__name{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rcard__loc{font-size:12px;color:var(--ink-faint);}
.rcard__freq{position:absolute;top:9px;right:9px;background:rgba(2,31,57,.72);color:#fff;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:8px;font-family:'Poppins',sans-serif;}
.rcard__play{position:absolute;bottom:9px;right:9px;width:34px;height:34px;border-radius:50%;background:var(--orange);border:none;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.75);transition:opacity .15s,transform .15s;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.rcard:hover .rcard__play{opacity:1;transform:scale(1);}
.rcard.is-playing .rcard__logo{box-shadow:0 0 0 3px var(--orange),0 10px 24px rgba(255,153,0,.25);}
.rcard.is-playing .rcard__play{opacity:1;transform:scale(1);background:var(--navy-1);}

/* Detail / hero */
.back-link{font-size:13.5px;color:var(--ink-faint);display:inline-flex;gap:6px;align-items:center;margin:24px 0 0;font-weight:600;}
.hero-banner{position:relative;height:200px;border-radius:var(--radius-lg);overflow:hidden;margin-top:16px;background:linear-gradient(120deg,var(--navy-1),var(--navy-2));}
.hero-banner img.bg{width:100%;height:100%;object-fit:cover;opacity:.55;filter:blur(1px) saturate(1.1);}
.hero-banner .fade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,31,57,.9),rgba(2,31,57,.15));}
.hero-content{display:flex;align-items:flex-end;gap:22px;margin-top:-64px;padding:0 8px 8px;position:relative;z-index:2;flex-wrap:wrap;}
.hero-logo{width:128px;height:128px;border-radius:var(--radius-md);overflow:hidden;flex-shrink:0;border:4px solid var(--bg);background:var(--navy-2);box-shadow:0 12px 28px rgba(0,0,0,.25);}
.hero-logo img{width:100%;height:100%;object-fit:cover;}
.hero-text h1{font-size:30px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);}
.hero-text .sub{font-size:13.5px;color:#dbe6f2;font-weight:500;}
.action-row{display:flex;align-items:center;gap:14px;margin:26px 0 8px;flex-wrap:wrap;}
.play-circle{width:58px;height:58px;border-radius:50%;background:var(--orange);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 20px rgba(255,153,0,.35);}
.play-circle:hover{background:var(--orange-dark);}
.icon-round{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.icon-round.liked{color:var(--orange);}
.tag{display:inline-flex;align-items:center;font-size:12px;padding:6px 13px;border-radius:20px;background:rgba(255,153,0,.12);color:var(--orange-dark);font-weight:700;}
.desc{font-size:14.5px;color:var(--ink-soft);line-height:1.6;max-width:640px;margin:18px 0 6px;}
.empty{padding:50px 10px;text-align:center;color:var(--ink-faint);font-size:14px;}

/* Cities */
.cities{margin:48px 0 20px;padding:28px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--line);}
.cities h3{margin:0 0 14px;font-size:15px;font-weight:700;}
.cities .chips{display:flex;flex-wrap:wrap;gap:9px;}
.cities .chip{font-size:12.5px;padding:7px 14px;border-radius:18px;background:var(--bg);border:1px solid var(--line);cursor:pointer;font-weight:500;}

/* Player bar */
.player-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--card);color:var(--ink);border-top:1px solid var(--line);padding:12px 32px;display:flex;align-items:center;gap:18px;transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.9,.3,1);}
.player-bar.active{transform:translateY(0);}
.p-logo{width:48px;height:48px;border-radius:10px;overflow:hidden;background:var(--navy-2);flex-shrink:0;}
.p-logo img{width:100%;height:100%;object-fit:cover;}
.p-info{min-width:0;width:220px;}
.p-info .name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-info .status{font-size:12px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;margin-top:1px;}
.live-dot{width:6px;height:6px;border-radius:50%;background:#ff4747;}
.live-dot.buffering{background:var(--ink-faint);animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.2;}}
.p-play{width:44px;height:44px;border-radius:50%;background:var(--orange);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(255,153,0,.35);}
.bars{display:flex;gap:2px;align-items:flex-end;height:16px;flex-shrink:0;}
.bars span{width:3px;background:var(--orange);border-radius:2px;height:4px;}
.player-bar.playing .bars span{animation:eq 1s infinite ease-in-out;}
.bars span:nth-child(1){animation-delay:0s;} .bars span:nth-child(2){animation-delay:.15s;}
.bars span:nth-child(3){animation-delay:.3s;} .bars span:nth-child(4){animation-delay:.45s;}
@keyframes eq{0%,100%{height:4px;} 50%{height:14px;}}
.format-badge{font-size:10px;padding:4px 9px;border-radius:6px;background:var(--bg);border:1px solid var(--line);font-family:'Poppins',sans-serif;letter-spacing:.03em;flex-shrink:0;color:var(--ink-soft);font-weight:600;}
.player-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
.vol-wrap{position:relative;}
.vol-popup{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 0 10px;width:38px;height:120px;display:none;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(2,31,57,.15);}
.vol-wrap.open .vol-popup{display:flex;}
.vol-popup input[type=range]{-webkit-appearance:none;appearance:none;width:90px;height:4px;border-radius:4px;background:var(--line);accent-color:var(--orange);transform:rotate(-90deg);}

@media (max-width:760px){ .p-info{width:120px;} .main-nav{display:none;} .search-band h1{font-size:28px;} }

/* Ad overlay */
.ad-overlay{position:fixed;inset:0;z-index:100;background:rgba(2,10,20,.85);display:none;align-items:center;justify-content:center;}
.ad-overlay.show{display:flex;}
.ad-box{background:#111f34;color:#fff;border-radius:18px;padding:32px;width:330px;text-align:center;}
.ad-box .ad-label{font-size:10.5px;letter-spacing:.12em;color:#9fb4cc;text-transform:uppercase;font-weight:700;}
.ad-box .ad-title{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;margin:10px 0 4px;}
.ad-box .ad-sub{font-size:13px;color:#9fb4cc;margin-bottom:18px;}
.ad-progress{height:4px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden;margin-bottom:16px;}
.ad-progress-fill{height:100%;background:var(--orange);width:0%;transition:width .2s linear;}
.ad-skip{font-size:12.5px;padding:9px 18px;border-radius:9px;border:1px solid rgba(255,255,255,.2);display:inline-block;color:#9fb4cc;font-weight:600;}
.ad-skip.enabled{color:var(--orange);border-color:var(--orange);cursor:pointer;}

.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--navy-1);color:#fff;padding:11px 20px;border-radius:11px;font-size:13.5px;font-weight:500;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(6px);}

/* fade entre paginas (navegacao AJAX) */
.page-fade{animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);}}