/* css.css */

/* =========================================================
   1) ROOT / VARIÁVEIS / RESET
   ========================================================= */
:root{
  --sb-track: transparent;
  --sb-thumb: rgba(255,255,255,.12);
  --sb-thumb-hover: rgba(255,255,255,.22);

  --player-height-desktop: 282px;
  --player-height-tablet: 246px;
  --player-height-mobile: 224px;

  --player-radius: 0 0 22px 22px;
  --player-bg: #000;
  --player-text: #fff;
  --player-accent: #ff1212;
  --player-glass-top: rgba(255,255,255,.18);
  --player-glass-mid: rgba(255,255,255,.10);
  --player-glass-low: rgba(255,255,255,.05);
  --player-glass-bottom: rgba(255,255,255,.02);

  --player-main-button-size: 40px;
  --player-main-icon-size: 25px;

  --player-side-button-size: 24px;
  --player-side-icon-size: 16px;

  --player-live-icon-size: 16px;
  --player-live-text-size: 8px;

  --player-cover-size-desktop: 94px;
  --player-cover-size-tablet: 82px;
  --player-cover-size-mobile: 68px;

  --player-controls-bottom-desktop: 16px;
  --player-controls-bottom-tablet: 16px;
  --player-controls-bottom-mobile: 15px;

  --player-volume-bottom-desktop: 74px;
  --player-volume-bottom-tablet: 70px;
  --player-volume-bottom-mobile: 66px;

  --player-canvas-top-desktop: 96px;
  --player-canvas-top-tablet: 84px;
  --player-canvas-top-mobile: 76px;
}

/* =========================================================
   2) BASE
   ========================================================= */
html{
  font-size:16px;
  background:#000;
  scrollbar-gutter:stable both-edges;
}

body{
  margin:0;
  padding:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  font-family:Arial, sans-serif;
  background:#000;
  color:#fff;
  text-align:center;
}

*{
  scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb) var(--sb-track);
  box-sizing:border-box;
}

a,
button,
.radio,
.logo,
.flag-action,
.radioplay-btn,
#menu-toggle{
  -webkit-tap-highlight-color:transparent;
}

:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
  border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   3) SCROLLBARS
   ========================================================= */
*::-webkit-scrollbar{
  width:6px;
  height:6px;
}

*::-webkit-scrollbar-track{
  background:var(--sb-track);
}

*::-webkit-scrollbar-thumb{
  background:var(--sb-thumb);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

*::-webkit-scrollbar-thumb:hover{
  background:var(--sb-thumb-hover);
}

*::-webkit-scrollbar-corner{
  background:transparent;
}

*::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}

/* =========================================================
   4) LAYOUT GERAL
   ========================================================= */
.container-fluid,
.row,
#radio-container,
footer{
  scrollbar-color:var(--sb-thumb) var(--sb-track);
}

header{
  margin:10px;
  padding:0;
  color:#fff;
}

.container-fluid{
  flex:1 1 auto;
  width:100%;
}

.row{
  margin-left:0;
  margin-right:0;
}

#main-content{
  position:relative;
  z-index:1;
}

#radio-container{
  display:flex;
  flex-wrap:wrap;
  flex:1 0 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:auto;
  overscroll-behavior-y:auto;
  margin-top:20px;
  padding-bottom:calc(var(--player-height-desktop) + 24px);
  will-change:transform;
}

footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:var(--player-height-desktop);
  max-width:100%;
  margin:0;
  opacity:1;
  z-index:1500;
  pointer-events:none;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  box-sizing:border-box;
}

footer > *{
  pointer-events:auto;
}

.radioplay-responsive,
#radioplay-player{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:var(--player-height-desktop);
  max-width:100%;
  margin:0;
  box-sizing:border-box;
}

/* =========================================================
   5) HEADER / FLAGS / MENU TOGGLE / MENU HINT
   ========================================================= */
.flags-host{
  --flags-left-gutter: clamp(92px, 12vw, 136px);
  width:100%;
  box-sizing:border-box;
  padding:20px 16px 0 var(--flags-left-gutter);
}

.flags-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  padding:0;
}

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.flag-action{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  line-height:0;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  width:40px;
  height:40px;
  box-shadow:none;
  clip-path:circle(50% at 50% 50%);
  -webkit-clip-path:circle(50% at 50% 50%);
}

.flag-action[data-navigate]{
  width:40px;
  height:40px;
}

.flag-action[data-flag-name="Albuns"] .flag{
  width:33px;
  height:33px;
  opacity:.36;
}

.flags-container .flag{
  width:100%;
  height:100%;
  cursor:pointer;
  transition:transform .2s ease;
  display:block;
  object-fit:cover;
  border-radius:999px;
  background:transparent !important;
  clip-path:circle(50% at 50% 50%);
  -webkit-clip-path:circle(50% at 50% 50%);
  -webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%);
}

.flag-action-search{
  background:transparent;
  border:0;
  width:40px;
  height:40px;
}

.flag-search-icon{
  width:100%;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.flag-favorites-icon{
  width:100%;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.flag-search-icon svg{
  display:block;
  fill:none;
  stroke:#ffffff;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
  width:38px;
  height:38px;
}

.flag-favorites-icon svg{
  display:block;
  fill:#ffffff;
  width:38px;
  height:38px;
}

.flags-container .flag:hover,
.flag-action:hover .flag{
  transform:scale(1.1);
}

.flag-action:focus-visible,
.radioplay-btn:focus-visible,
.radioplay-volume-side:focus-visible,
.radioplay-volume-range:focus-visible,
#menu-toggle:focus-visible{
  outline:3px solid #ffffff;
  outline-offset:3px;
}

.flag-action:focus-visible{
  border-radius:999px;
}

#menu-toggle{
  position:fixed;
  top:20px;
  left:4%;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 40px 10px;
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
}


#menu-hint{
  position:fixed;
  top:20px;
  left:90px;
  width:70px;
  height:28px;
  z-index:1100;
  pointer-events:none;
  opacity:.95;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'>\
<path d='M6,36 C38,8 70,10 106,12' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'/>\
<path d='M98,4 116,12 98,20' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  transform:scaleX(-1);
  animation:menu-hint-nudge 1.6s ease-in-out infinite;
}

@keyframes menu-hint-nudge{
  0%{
    transform:translateX(0) translateY(0) rotate(-2deg) scaleX(-1);
    opacity:.95;
  }
  50%{
    transform:translateX(6px) translateY(-2px) rotate(4deg) scaleX(-1);
    opacity:1;
  }
  100%{
    transform:translateX(0) translateY(0) rotate(-2deg) scaleX(-1);
    opacity:.95;
  }
}

#side-menu.active ~ #menu-hint{
  display:none;
}

/* =========================================================
   6) MENU LATERAL
   ========================================================= */
#side-menu{
  position:fixed;
  top:0;
  left:0;
  width:300px;
  height:100%;
  padding:20px 20px 80px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  color:#fff;
  background:#000;
  border-right:1px solid #1f1f1f;
  box-shadow:2px 0 5px rgba(0,0,0,.5);
  transform:translateX(-100%);
  transition:transform .3s ease;
  z-index:12050 !important;
}

#side-menu.active{
  transform:translateX(0);
}

#side-menu .button-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}

#menu-close{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-right:10px;
  padding:0;
  border:none;
  background:none;
  color:#fff;
  font-size:24px;
  font-weight:bold;
  cursor:pointer;
}

#menu-close:hover{
  color:#fff;
}

.menu-link{
  margin-right:10px;
  padding:10px;
  color:#fff;
  font-size:16px;
  text-decoration:none;
}

.email-user{
  align-self:flex-start;
  padding:0 0 0 20px;
}

#expiration-date{
  margin:6px 0 10px;
  padding:0 0 0 20px;
  color:#bdbdbd;
  font-size:.9rem;
  text-align:left;
}

/* =========================================================
   7) RÁDIOS / GRELHA / LOGÓTIPOS
   ========================================================= */
.radio{
  width:10%;
  padding:10px;
  touch-action:auto;
  opacity:1;
  transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease, background-color .3s ease;
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  contain:layout paint style;
  content-visibility:visible;
  contain-intrinsic-size:140px;
}

.radio.is-pending{
  opacity:0;
  transform:translateY(11px);
}

.radio.is-ready{
  opacity:1;
  transform:translateY(0);
}

.logo{
  position:relative;
  width:100%;
  max-width:120px;
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  touch-action:auto;
  -webkit-user-select:none;
  user-select:none;
}

.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:50%;
  background:transparent;
  backface-visibility:hidden;
  transform:translateZ(0);
  opacity:1;
  transition:opacity .2s ease;
}

.logo.is-loading img{
  opacity:0;
}

.logo .logo-skeleton{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(90deg, rgba(255,255,255,.08) 20%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.08) 80%);
  background-size:220% 100%;
  animation:logo-shimmer 1.1s linear infinite;
  pointer-events:none;
}

.logo:not(.is-loading) .logo-skeleton{
  display:none;
}

.logo.no-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  text-align:center;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,.10) 100%);
}

.logo.no-logo .logo-name{
  display:block;
  width:100%;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.01em;
  word-break:break-word;
  text-wrap:balance;
  opacity:.95;
}

.radio > img.logo{
  display:block;
  width:100%;
  max-width:120px;
  aspect-ratio:1 / 1;
  object-fit:contain;
  border-radius:50%;
}

@keyframes logo-shimmer{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}

.logo:hover,
.logo:focus,
.logo:active{
  outline:none;
  background:transparent;
}

.logo.error{
  opacity:.2 !important;
}

.radio-logo{
  width:100px;
  height:100px;
  object-fit:contain;
}

#radio-container .radio{
  opacity:1;
  transform:none;
}

#radio-container .radio.fade-seed{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}

#radio-container .radio.appear{
  opacity:1;
  transform:none;
}

@media (hover:none){
  .radio:hover,
  .radio:active,
  .radio:focus{
    background:transparent;
  }
}

@media (pointer:coarse){
  .radio{
    content-visibility:visible;
    contain:layout paint;
    transition:opacity .14s ease, transform .14s ease;
  }
}

/* =========================================================
   8) FORMULÁRIOS / INPUTS / BOTÕES
   ========================================================= */
#radioForm,
#loginForm,
#recoverForm{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.menu-item{
  margin-bottom:10px;
  text-align:left;
}

.menu-item input{
  margin-right:10px;
}

#code,
#recover-email{
  display:block;
  width:180px;
  padding:10px;
  margin-bottom:10px;
  border:1px solid #ccc;
  border-radius:15px;
  background:#fff;
  color:#000;
  font-size:12px;
}

input[type="number"]{
  -webkit-appearance:none;
  -moz-appearance:textfield;
  margin:0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
}

#recover-title{
  margin:6px 0 8px;
  color:#fff;
  font-size:18px;
  font-weight:700;
}

#recover-hint{
  width:180px;
  margin:4px 0 10px;
  color:#ddd;
  font-size:12px;
  line-height:1.35;
  text-align:center;
}

#register-button,
#instructions-button,
#reset-button,
#enter-button,
#sort-button,
#select-all,
#deselect-all,
#save-radios-selection,
#recover-button{
  display:inline-block;
  width:180px;
  padding:10px;
  margin-bottom:15px;
  border:none;
  border-radius:15px;
  background:rgba(255,0,0,.8);
  color:#fff;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  transition:background-color .3s ease;
}

#register-button:hover,
#instructions-button:hover,
#reset-button:hover,
#enter-button:hover,
#sort-button:hover,
#select-all:hover,
#deselect-all:hover,
#save-radios-selection:hover,
#recover-button:hover{
  background:rgba(255,0,0,.2);
}

#front-search-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-start;
  justify-content:center;
  z-index:12550;
}

#front-search-modal.active{
  display:flex;
}

#front-search-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.38);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#front-search-panel{
  position:relative;
  z-index:1;
  width:min(980px, calc(100% - 28px));
  margin-top:clamp(72px, 10vh, 116px);
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0;
}

.front-search-toolbar{
  display:flex;
  align-items:center;
  gap:0;
}

.front-search-field-wrap{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:14px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}

.front-search-inline-icon{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.72;
  pointer-events:none;
}

.front-search-inline-icon-right{
  right:10px;
  left:auto;
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0;
  margin:0;
  cursor:pointer;
  pointer-events:auto;
  opacity:1;
  width:54px;
  height:54px;
  top:50%;
  transform:translateY(-50%);
}

.front-search-inline-icon svg{
  display:block;
  fill:none;
  stroke:#ffffff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#front-search-input{
  width:100%;
  min-width:0;
  height:64px;
  border:0 !important;
  border-radius:14px !important;
  padding:0 58px 0 18px;
  background:transparent !important;
  color:#fff;
  font-size:clamp(20px, 2.7vw, 30px);
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:none !important;
}

#front-search-input::placeholder{
  color:rgba(255,255,255,.42);
  font-weight:500;
}

#front-search-input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}

#front-search-input::-ms-clear{
  display:none;
  width:0;
  height:0;
}

#front-search-input:focus{
  outline:none;
  border:0 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.16) !important;
}

.front-search-inline-icon-right:hover{
  opacity:1;
}

.front-search-inline-icon-right svg{
  width:42px;
  height:42px;
}

@media (max-width: 700px){
  #front-search-panel{
    width:calc(100% - 16px);
    margin-top:max(14px, env(safe-area-inset-top, 0px));
    border-radius:0;
    padding:0;
  }

  .front-search-toolbar{
    flex-direction:row;
    align-items:center;
  }

  .front-search-field-wrap{
    width:100%;
  }

  #front-search-input{
    width:100%;
    height:58px;
    font-size:24px;
    padding:0 56px 0 16px;
  }
}

#loginForm.is-loading #code{
  opacity:.7;
}

#enter-button.is-loading{
  position:relative;
  padding-right:36px;
  cursor:progress;
  opacity:.92;
}

#enter-button.is-loading::after{
  content:'';
  position:absolute;
  top:50%;
  right:12px;
  width:14px;
  height:14px;
  margin-top:-7px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:menu-login-spin .7s linear infinite;
}

@keyframes menu-login-spin{
  to{ transform:rotate(360deg); }
}

button:disabled{
  opacity:.3;
  cursor:not-allowed;
}

/* =========================================================
   9) NOTIFICAÇÕES / TOASTS / INFO BOX
   ========================================================= */
#info-box{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:2000 !important;
  padding-right:46px;
}

#info-box .info-box-close{
  position:absolute;
  top:6px;
  right:8px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:2px solid rgba(255,255,255,.85);
  border-radius:999px;
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:28px;
  font-weight:700;
  line-height:34px;
  cursor:pointer;
  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    opacity .15s ease;
}

#info-box .info-box-close:hover,
#info-box .info-box-close:focus{
  background:rgba(0,0,0,.45);
  border-color:#fff;
  transform:scale(1.05);
  outline:none;
}

#info-box .info-box-close:active{
  transform:scale(.98);
  opacity:.9;
}

@keyframes app-boot-spin{
  to{ transform:rotate(360deg); }
}

.txt-top{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  padding:15px 20px;
  border-radius:5px;
  box-shadow:0 0 10px rgba(0,0,0,.5);
  background:rgba(255,0,0,.9);
  color:#fff;
  font-size:16px;
  text-align:center;
}

.notification-success{
  background:rgba(0,255,0,.9);
}

.notification-error{
  background:rgba(255,0,0,.9);
}

.notification-info{
  background:rgba(255,0,0,.9);
}

.notification-info a{
  color:#fff !important;
  text-decoration:none;
}

.txt-top.hide{
  opacity:0;
  top:-50px;
}

#top-notice,
#top-notice-reset{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  max-width:min(92vw, 780px);
  padding:14px 18px;
  border-radius:14px;
  background:rgba(30,64,175,.8);
  color:#fff;
  font:700 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  z-index:10000;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

#top-notice .wrap,
#top-notice-reset .wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

#top-notice .msg,
#top-notice-reset .msg{
  text-align:center;
  word-break:break-word;
}

#top-notice.is-visible,
#top-notice-reset.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

#top-notice.error{
  background:#b91c1c;
}

#top-notice.success{
  background:#15803d;
}

#top-notice.info{
  background:rgba(30,64,175,.8);
}

body.has-toast #info-box{
  display:none !important;
}

#guestNotice{
  position:fixed;
  bottom:18px;
  left:18px;
  z-index:1999;
  padding:10px 12px;
  border-radius:8px;
  background:#1f2937;
  color:#fff;
  font:500 13px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

#guestNotice.is-visible{
  opacity:1;
  pointer-events:auto;
}

/* =========================================================
   10) UTILITÁRIOS / ESTADOS
   ========================================================= */
.error{
  opacity:.4;
}

.transparent{
  opacity:.4;
}

.logo.transparent{
  opacity:.4;
  pointer-events:none;
}

.disabled{
  pointer-events:none;
  cursor:default;
}

.loader{
  display:inline-block;
  width:30px;
  height:30px;
  margin-right:5px;
  background:url('loader.gif');
  background-size:contain;
  color:#666;
  font-size:12px;
}

/* =========================================================
   11) DRAG & DROP / SORTABLE
   ========================================================= */
#radio-container .radio.drag-arming .logo{
  filter:grayscale(1) brightness(1.1) contrast(1.02);
  opacity:.6;
  transform:scale(.9);
  border-radius:50%;
  box-shadow:none !important;
}

#radio-container .drag-chosen .logo{
  border-radius:50%;
  box-shadow:
    0 0 0 3px rgba(255,44,44,.9) inset,
    0 0 0 3px rgba(250,44,44,.6);
  filter:none;
  opacity:.6;
  transform:scale(1);
}

#radio-container .radio.drag-active .logo{
  border-radius:50%;
  box-shadow:
    0 0 0 3px rgba(255,44,44,.9) inset,
    0 0 0 3px rgba(250,44,44,.9);
  filter:none;
  opacity:.6;
  transform:scale(1);
}

#radio-container .drag-ghost .logo{
  box-shadow:none !important;
  border-radius:50%;
  opacity:.8;
}

.drag-ghost{
  opacity:.8;
}

/* =========================================================
   12) PLAYER — ESTRUTURA BASE
   ========================================================= */
.radioplay-shell{
  position:relative;
  width:100%;
  height:100%;
  min-height:var(--player-height-desktop);
  overflow:hidden;
  background:var(--player-bg);
  color:var(--player-text);
  font-family:Arial,Helvetica,sans-serif;
  border-radius:var(--player-radius);
}

.radioplay-bg,
.radioplay-bg-alt{
  position:absolute;
  inset:0;
  background-color:#040507;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  transform:scale(0.70);
  filter:blur(32px) saturate(1.55);
  transition:opacity .48s ease;
  will-change:opacity;
  animation:
    radioplay-bg-drift 18s ease-in-out infinite alternate,
    radioplay-bg-hue 28s linear infinite;
}

.radioplay-bg{
  opacity:.48;
  z-index:1;
}

.radioplay-bg-alt{
  opacity:0;
  z-index:1;
}

.radioplay-bg-base{
  position:absolute;
  inset:0;
  background:#040507;
  z-index:0;
  pointer-events:none;
}

.radioplay-dark{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,42,102,.22) 0%, rgba(255,42,102,0) 34%),
    radial-gradient(circle at 82% 18%, rgba(91,120,255,.18) 0%, rgba(91,120,255,0) 30%),
    radial-gradient(circle at 50% 78%, rgba(255,138,61,.16) 0%, rgba(255,138,61,0) 28%),
    linear-gradient(to bottom,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.24) 10%,
      rgba(0,0,0,.16) 34%,
      rgba(0,0,0,.08) 100%);
  z-index:2;
  pointer-events:none;
  animation: radioplay-dark-shift 20s ease-in-out infinite alternate;
}

.radioplay-glass{
  position:absolute;
  left:0;
  right:0;
  top:72px;
  bottom:0;
  background:
    linear-gradient(to bottom,
      rgba(8,8,10,.48) 0%,
      rgba(8,8,10,.60) 18%,
      rgba(8,8,10,.72) 48%,
      rgba(8,8,10,.84) 100%);
  backdrop-filter:blur(24px) saturate(1.08);
  -webkit-backdrop-filter:blur(24px) saturate(1.08);
  border-top:1px solid rgba(255,255,255,.10);
  z-index:2;
  pointer-events:none;
}

.radioplay-glow{
  position:absolute;
  left:50%;
  transform:translate(-50%, -50%);
  top:50%;
  width:420px;
  height:420px;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,.66) 0%,
      rgba(255,255,255,.38) 16%,
      rgba(255,34,34,.26) 38%,
      rgba(255,255,255,0) 78%);
  filter:blur(34px);
  z-index:3;
  pointer-events:none;
  animation:radioplay-glow-breathe 2.8s ease-in-out infinite alternate;
}

@keyframes radioplay-glow-breathe{
  0%{
    transform:translate(-50%, -50%) scale(0.96);
    filter:blur(28px) saturate(1.05);
    opacity:.84;
  }
  100%{
    transform:translate(-50%, -50%) scale(1.10);
    filter:blur(40px) saturate(1.28);
    opacity:1;
  }
}

.radioplay-color-motion{
  animation:none;
}

@keyframes radioplay-motion-layer-drift{
  0%{
    transform:translate(-50%, -50%) rotate(0deg);
  }
  50%{
    transform:translate(-50%, -50%) rotate(180deg);
  }
  100%{
    transform:translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes radioplay-color-motion-pan{
  0%{
    background-position:38% 47%;
    transform:translate3d(-28px, -8px, 0) scale(1.08) rotate(-1.6deg);
  }
  50%{
    background-position:60% 53%;
    transform:translate3d(26px, 8px, 0) scale(1.14) rotate(1.4deg);
  }
  100%{
    background-position:42% 50%;
    transform:translate3d(-18px, 6px, 0) scale(1.10) rotate(-0.8deg);
  }
}

@keyframes radioplay-bg-drift{
  0%{
    transform:scale(0.70) translate3d(-1.5%, -1%, 0);
    opacity:.42;
  }
  100%{
    transform:scale(0.82) translate3d(1.5%, 1%, 0);
    opacity:.58;
  }
}

@keyframes radioplay-color-motion-float{
  0%{
    transform:translate3d(-36px, -10px, 0) scale(1.18) rotate(-3deg);
  }
  50%{
    transform:translate3d(18px, 12px, 0) scale(1.28) rotate(1.5deg);
  }
  100%{
    transform:translate3d(40px, -8px, 0) scale(1.22) rotate(3deg);
  }
}

@keyframes radioplay-blob-drift-primary{
  0%{
    transform:translate3d(-34px, -16px, 0) scale(1.08) rotate(-4deg);
  }
  50%{
    transform:translate3d(18px, 12px, 0) scale(1.22) rotate(2deg);
  }
  100%{
    transform:translate3d(42px, -10px, 0) scale(1.14) rotate(5deg);
  }
}

@keyframes radioplay-blob-drift-secondary{
  0%{
    transform:translate3d(22px, -12px, 0) scale(0.96) rotate(3deg);
  }
  50%{
    transform:translate3d(-20px, 14px, 0) scale(1.12) rotate(-2deg);
  }
  100%{
    transform:translate3d(-30px, -8px, 0) scale(1.02) rotate(-5deg);
  }
}

@keyframes radioplay-cover-reactive-spin{
  0%{
    transform:translate(-50%, -50%) rotate(0deg);
  }
  50%{
    transform:translate(-50%, -50%) rotate(180deg);
  }
  100%{
    transform:translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes radioplay-color-motion-drift{
  0%{
    left:48%;
    top:49%;
  }
  50%{
    left:53%;
    top:51%;
  }
  100%{
    left:47%;
    top:50%;
  }
}

@keyframes radioplay-color-motion-anymove{
  0%{
    transform:translate(-58%, -50%) rotate(0deg);
  }
  25%{
    transform:translate(-48%, -53%) rotate(4deg);
  }
  50%{
    transform:translate(-40%, -50%) rotate(8deg);
  }
  75%{
    transform:translate(-50%, -47%) rotate(4deg);
  }
  100%{
    transform:translate(-58%, -50%) rotate(0deg);
  }
}

@keyframes radioplay-color-motion-pan-left-right{
  0%{
    left:42%;
  }
  50%{
    left:58%;
  }
  100%{
    left:42%;
  }
}

@keyframes radioplay-bg-hue{
  0%{ filter:blur(32px) saturate(1.45) hue-rotate(0deg); }
  50%{ filter:blur(36px) saturate(1.72) hue-rotate(28deg); }
  100%{ filter:blur(32px) saturate(1.5) hue-rotate(-18deg); }
}

@keyframes radioplay-dark-shift{
  0%{
    background-position:0% 0%, 100% 0%, 50% 100%, 0 0;
  }
  100%{
    background-position:8% 6%, 92% 10%, 52% 92%, 0 0;
  }
}

.radioplay-canvas{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  height:calc(100% - var(--player-canvas-top-desktop));
  z-index:4;
  pointer-events:none;
}

.radioplay-ui{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:auto;
}

/* =========================================================
   13) PLAYER — LOGO / TÍTULO / METADADOS / VOLUME
   ========================================================= */
.radioplay-cover-wrap{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:12px;
  width:var(--player-cover-size-desktop);
  height:var(--player-cover-size-desktop);
  border-radius:999px;
  background:#ececec;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.18),
    0 0 54px rgba(255,255,255,.42),
    0 0 120px rgba(255,255,255,.30),
    0 18px 34px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  z-index:8;
  pointer-events:none;
}

.radioplay-cover-wrap.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(10px) saturate(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
  z-index:1;
}

.radioplay-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:999px;
  overflow:hidden;
}

.radioplay-title-box{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:132px;
  width:min(90vw, 760px);
  text-align:center;
  z-index:8;
  overflow:hidden;
  pointer-events:none;
}

.radioplay-station{
  margin:0;
  padding:0;
  font-size:38px;
  font-weight:300;
  letter-spacing:-.045em;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.26);
  overflow:hidden;
  min-height:1em;
  line-height:.94;
  white-space:nowrap;
}

.radioplay-station span{
  display:inline-block;
  white-space:nowrap;
  will-change:transform;
}

.radioplay-program{
  margin-top:6px;
  min-height:16px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:600;
  line-height:1.15;
  text-shadow:0 2px 6px rgba(0,0,0,.18);
  overflow:hidden;
  white-space:nowrap;
  text-transform:none;
}

.radioplay-program span{
  display:inline-block;
  white-space:nowrap;
  will-change:transform;
}

.radioplay-metadata{
  margin-top:8px;
  min-height:18px;
  color:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:500;
  line-height:1.15;
  text-shadow:0 2px 6px rgba(0,0,0,.18);
  overflow:hidden;
  white-space:nowrap;
}

.radioplay-metadata span{
  display:inline-block;
  white-space:nowrap;
  will-change:transform;
}

.radioplay-shell.is-bar-layout{
  border-radius:0 0 18px 18px;
  background:
    linear-gradient(90deg, rgba(96,36,47,.98) 0%, rgba(61,31,43,.97) 48%, rgba(34,28,39,.98) 100%);
}

.radioplay-shell.is-bar-layout .radioplay-bg{
  opacity:.22;
  transform:scale(1.04);
  filter:blur(20px) saturate(1.15);
}

.radioplay-shell.is-bar-layout .radioplay-dark{
  background:
    linear-gradient(90deg, rgba(92,34,44,.82) 0%, rgba(59,31,43,.76) 46%, rgba(31,28,38,.88) 100%);
  animation:none;
}

.radioplay-shell.is-bar-layout .radioplay-glass{
  top:0;
  border-top:0;
  background:
    linear-gradient(90deg, rgba(118,38,53,.16) 0%, rgba(49,31,42,.32) 44%, rgba(20,20,28,.44) 100%);
  backdrop-filter:blur(18px) saturate(1.06);
  -webkit-backdrop-filter:blur(18px) saturate(1.06);
}

.radioplay-shell.is-bar-layout .radioplay-glow,
.radioplay-shell.is-bar-layout .radioplay-canvas,
.radioplay-shell.is-bar-layout .radioplay-volume-wrap{
  display:none !important;
}

.radioplay-shell.is-bar-layout .radioplay-title-box{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:auto;
  max-width:none;
  overflow:hidden;
}

.radioplay-shell.is-bar-layout .radioplay-station{
  font-size:clamp(18px, 2.1vw, 28px);
  font-weight:800;
  line-height:1.05;
  text-shadow:none;
  overflow:hidden;
}

.radioplay-shell.is-bar-layout .radioplay-program{
  margin-top:0;
  min-height:0;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.72);
  text-shadow:none;
  overflow:hidden;
}

.radioplay-shell.is-bar-layout .radioplay-metadata{
  margin-top:0;
  min-height:0;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.92);
  text-shadow:none;
  overflow:hidden;
}

.radioplay-shell.is-bar-layout .radioplay-btn-main{
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.radioplay-shell.is-bar-layout .radioplay-btn-main.is-play svg{
  transform:translate(1px, 1px) scale(1.16);
}

.radioplay-volume-wrap{
  position:absolute;
  left:54px;
  right:54px;
  bottom:var(--player-volume-bottom-desktop);
  z-index:8;
  display:none !important;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  column-gap:12px;
  overflow:visible;
}

.radioplay-volume-side{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  line-height:1;
}

.radioplay-volume-side svg{
  display:block;
  width:20px;
  height:20px;
  fill:#fff;
}

.radioplay-volume-bar{
  position:relative;
  height:16px;
  display:flex;
  align-items:center;
  width:100%;
}

.radioplay-volume-track{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.98);
  z-index:1;
}

.radioplay-volume-range{
  width:100%;
  margin:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  z-index:2;
}

.radioplay-volume-range::-webkit-slider-runnable-track{
  height:4px;
  background:transparent;
}

.radioplay-volume-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:999px;
  background:#fff;
  border:0;
  margin-top:-5px;
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
  cursor:pointer;
}

.radioplay-volume-range::-moz-range-track{
  height:4px;
  background:transparent;
  border:0;
}

.radioplay-volume-range::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#fff;
  border:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
  cursor:pointer;
}

.radioplay-volume-text{
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-align:right;
  white-space:nowrap;
  line-height:1;
  min-width:36px;
}

/* =========================================================
   14) PLAYER — CONTROLOS
   ========================================================= */
.radioplay-controls{
  position:absolute;
  left:50%;
  bottom:var(--player-controls-bottom-desktop);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-items:start;
  z-index:8;
  min-height:var(--player-main-button-size);
  gap:18px;
  white-space:nowrap;
  pointer-events:none;
}

.radioplay-main-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  z-index:14;
  pointer-events:auto;
}

.radioplay-main-controls .radioplay-btn{
  pointer-events:auto;
}

.radioplay-btn{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  background:transparent;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  line-height:1;
}

.radioplay-btn svg{
  display:block;
  fill:currentColor;
}

.radioplay-btn-main{
  width:var(--player-main-button-size);
  height:var(--player-main-button-size);
  min-width:var(--player-main-button-size);
  min-height:var(--player-main-button-size);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#000;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  align-self:end;
  justify-self:center;
}

.radioplay-btn-main svg{
  width:var(--player-main-icon-size);
  height:var(--player-main-icon-size);
  transform:none;
}

.radioplay-btn-main.is-play svg{
  transform:translate(1px, 1px) scale(1.16);
  transform-origin:50% 50%;
}

.radioplay-btn-main.is-pause svg{
  width:var(--player-main-icon-size);
  height:var(--player-main-icon-size);
  transform:none;
}

.radioplay-btn-nav{
  width:var(--player-side-button-size);
  height:var(--player-side-button-size);
  color:#fff;
}

.radioplay-btn-nav svg{
  width:var(--player-side-icon-size);
  height:var(--player-side-icon-size);
}

.radioplay-side-stack{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-width:var(--player-side-button-size);
  z-index:12;
  pointer-events:auto;
}

.radioplay-action-btn{
  position:relative;
  top:0;
}

.radioplay-action-btn svg{
  transform:translateY(0);
}

.radioplay-favorite-btn svg{
  transform:translateY(-1px);
}

.radioplay-side-stack .radioplay-btn{
  width:var(--player-side-button-size);
  height:var(--player-side-button-size);
  pointer-events:auto;
}

.radioplay-side-stack .radioplay-btn svg{
  width:var(--player-side-icon-size);
  height:var(--player-side-icon-size);
}

.radioplay-btn:focus-visible,
.radioplay-volume-side:focus-visible{
  border-radius:999px;
  box-shadow:0 0 0 3px rgba(255,255,255,.28);
}

.radioplay-btn-main:focus-visible{
  box-shadow:0 0 0 4px rgba(255,255,255,.3), 0 10px 24px rgba(0,0,0,.18);
}

.radioplay-volume-range:focus-visible{
  border-radius:999px;
}

.radioplay-live{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:1px;
  color:#fff;
  line-height:1;
  min-width:var(--player-side-button-size);
}

.radioplay-live-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--player-side-button-size);
  height:var(--player-side-button-size);
}

.radioplay-live-icon svg{
  width:var(--player-live-icon-size);
  height:var(--player-live-icon-size);
  display:block;
}

.radioplay-live-text{
  display:block;
  font-size:var(--player-live-text-size);
  font-weight:700;
  line-height:1;
  letter-spacing:.03em;
}

.radioplay-loader{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s ease;
  z-index:9;
  pointer-events:none;
}

.radioplay-loader.is-visible{
  opacity:1;
}

.radioplay-loader svg{
  width:26px;
  height:26px;
  fill:#111;
  display:block;
}

/* =========================================================
   15) MEDIA QUERIES — FLAGS / MENU HINT
   ========================================================= */
@media (max-width:900px){
  .flags-host{
    --flags-left-gutter: clamp(84px, 16vw, 118px);
    padding-right:12px;
  }

  .flags-container .flag{
    width:40px;
  }
}

@media (max-width:640px){
  .flags-host{
    --flags-left-gutter: 86px;
    padding-top:18px;
  }

  .flags-container{
    gap:8px;
  }
}

@media (min-width:344px){
  #menu-hint{ top:10px; left:70px; }
}

@media (min-width:360px){
  #menu-hint{ top:10px; left:75px; }
}

@media (min-width:480px){
  #menu-hint{ top:15px; left:85px; }
}

@media (min-width:768px){
  #menu-hint{ top:20px; left:90px; }
}

@media (min-width:992px){
  #menu-hint{ top:20px; left:90px; }
}

@media (min-width:1200px){
  #menu-hint{ top:35px; left:120px; }
}

@media (min-width:2560px){
  #menu-hint{ top:25px; left:140px; }
}

/* =========================================================
   16) MEDIA QUERIES — GRELHA / PLAYER
   ========================================================= */
@media (max-width:320px){
  :root{
    --player-height-mobile: 224px;
  }

  .radio{
    width:25%;
  }

  footer,
  .radioplay-responsive,
  #radioplay-player{
    height:var(--player-height-mobile);
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-mobile) + 22px);
  }
}

@media (min-width:321px) and (max-width:480px){
  .radio{
    width:25%;
  }

  footer,
  .radioplay-responsive,
  #radioplay-player{
    height:var(--player-height-mobile);
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-mobile) + 22px);
  }
}

@media (min-width:481px) and (max-width:767px){
  .radio{
    width:16.6%;
  }

  footer,
  .radioplay-responsive,
  #radioplay-player{
    height:var(--player-height-mobile);
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-mobile) + 22px);
  }
}

@media (min-width:768px) and (max-width:959px){
  .radio{
    width:12.5%;
  }

  footer,
  .radioplay-responsive,
  #radioplay-player{
    height:var(--player-height-tablet);
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-tablet) + 22px);
  }
}

@media (min-width:960px) and (max-width:1024px){
  .radio{
    width:12.5%;
  }

  footer,
  .radioplay-responsive,
  #radioplay-player{
    height:var(--player-height-tablet);
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-tablet) + 22px);
  }
}

@media (min-width:1025px) and (max-width:1200px){
  .radio{
    width:12.5%;
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-desktop) + 22px);
  }
}

@media (min-width:1201px) and (max-width:1366px){
  .radio{
    width:12.5%;
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-desktop) + 22px);
  }
}

@media (min-width:1367px) and (max-width:1600px){
  .radio{
    width:10%;
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-desktop) + 22px);
  }
}

@media (min-width:1601px) and (max-width:1920px){
  .radio{
    width:10%;
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-desktop) + 22px);
  }
}

@media (min-width:1921px){
  .radio{
    width:10%;
  }

  #radio-container{
    padding-bottom:calc(var(--player-height-desktop) + 22px);
  }
}

/* =========================================================
   17) MEDIA QUERIES — POSIÇÃO DO MENU TOGGLE
   ========================================================= */
@media (min-width:320px){
  #menu-toggle{ top:20px; left:4%; font-size:35px; }
}

@media (min-width:344px){
  #menu-toggle{ top:20px; left:5.2%; font-size:40px; }
}

@media (min-width:360px){
  #menu-toggle{ top:20px; left:5.6%; font-size:40px; }
}

@media (min-width:375px){
  #menu-toggle{ top:20px; left:5.6%; font-size:40px; }
}

@media (min-width:390px){
  #menu-toggle{ top:20px; left:6%; font-size:40px; }
}

@media (min-width:412px){
  #menu-toggle{ top:20px; left:6.2%; font-size:40px; }
}

@media (min-width:414px){
  #menu-toggle{ top:20px; left:6.2%; font-size:40px; }
}

@media (min-width:430px){
  #menu-toggle{ top:20px; left:6.2%; font-size:40px; }
}

@media (min-width:480px){
  #menu-toggle{ top:20px; left:7%; font-size:40px; }
}

@media (min-width:540px){
  #menu-toggle{ top:20px; left:3.4%; font-size:40px; }
}

@media (min-width:600px){
  #menu-toggle{ top:20px; left:3.8%; font-size:40px; }
}

@media (min-width:667px){
  #menu-toggle{ top:20px; left:4.2%; font-size:40px; }
}

@media (min-width:720px){
  #menu-toggle{ top:20px; left:4.8%; font-size:40px; }
}

@media (min-width:740px){
  #menu-toggle{ top:20px; left:4.8%; font-size:40px; }
}

@media (min-width:768px){
  #menu-toggle{ top:20px; left:2.8%; font-size:40px; }
}

@media (min-width:800px){
  #menu-toggle{ top:20px; left:2.8%; font-size:40px; }
}

@media (min-width:820px){
  #menu-toggle{ top:20px; left:3%; font-size:40px; }
}

@media (min-width:844px){
  #menu-toggle{ top:20px; left:3.2%; font-size:40px; }
}

@media (min-width:853px){
  #menu-toggle{ top:20px; left:3.2%; font-size:40px; }
}

@media (min-width:882px){
  #menu-toggle{ top:20px; left:3.2%; font-size:40px; }
}

@media (min-width:896px){
  #menu-toggle{ top:20px; left:3.2%; font-size:40px; }
}

@media (min-width:912px){
  #menu-toggle{ top:20px; left:3.4%; font-size:40px; }
}

@media (min-width:914px){
  #menu-toggle{ top:20px; left:3.4%; font-size:40px; }
}

@media (min-width:915px){
  #menu-toggle{ top:20px; left:3.4%; font-size:40px; }
}

@media (min-width:932px){
  #menu-toggle{ top:20px; left:3.4%; font-size:40px; }
}

@media (min-width:1024px){
  #menu-toggle{ top:20px; left:3.6%; font-size:40px; }
}

@media (min-width:1180px){
  #menu-toggle{ top:20px; left:4%; font-size:40px; }
}

@media (min-width:1280px){
  #menu-toggle{ top:20px; left:4%; font-size:45px; }
}

@media (min-width:1366px){
  #menu-toggle{ top:20px; left:3.2%; font-size:45px; }
}

@media (min-width:1400px){
  #menu-toggle{ top:20px; left:3.2%; font-size:45px; }
}

@media (min-width:1800px){
  #menu-toggle{ top:20px; left:3.6%; font-size:45px; }
}

/* =========================================================
   18) MEDIA QUERIES — AJUSTES FINOS DO PLAYER
   ========================================================= */
@media (max-width:767px){
  .radioplay-shell{
    min-height:var(--player-height-mobile);
    border-radius:0 0 18px 18px;
  }

  .radioplay-shell.is-bar-layout{
    min-height:74px;
    border-radius:0 0 16px 16px;
  }

  .radioplay-shell.is-bar-layout .radioplay-title-box{
    max-width:none;
    gap:2px;
  }

  .radioplay-shell.is-bar-layout .radioplay-station{
    font-size:18px;
  }

  .radioplay-shell.is-bar-layout .radioplay-program,
  .radioplay-shell.is-bar-layout .radioplay-metadata{
    font-size:11px;
  }


  .radioplay-glass{
    top:58px;
  }

  .radioplay-glow{
    top:10px;
    width:300px;
    height:190px;
    filter:blur(28px);
  }

  .radioplay-canvas{
    bottom:0;
    top:auto;
    height:calc(100% - var(--player-canvas-top-mobile));
  }

  .radioplay-cover-wrap{
    top:10px;
    width:var(--player-cover-size-mobile);
    height:var(--player-cover-size-mobile);
    box-shadow:
      0 0 0 6px rgba(255,255,255,.16),
      0 0 42px rgba(255,255,255,.34),
      0 0 90px rgba(255,255,255,.24),
      0 12px 28px rgba(0,0,0,.22);
  }

  .radioplay-title-box{
    top:88px;
    width:min(94vw, 420px);
  }

  .radioplay-station{
    font-size:24px;
    line-height:.96;
  }

  .radioplay-metadata{
    font-size:11px;
    margin-top:6px;
    min-height:14px;
  }

  .radioplay-volume-wrap{
    left:18px;
    right:18px;
    bottom:var(--player-volume-bottom-mobile);
    column-gap:8px;
  }

  .radioplay-volume-side svg{
    width:16px;
    height:16px;
  }

  .radioplay-volume-text{
    font-size:10px;
    min-width:32px;
  }

  .radioplay-controls{
    bottom:var(--player-controls-bottom-mobile);
    gap:16px;
  }
}

@media (min-width:768px) and (max-width:1024px){
  .radioplay-shell{
    min-height:var(--player-height-tablet);
  }

  .radioplay-shell.is-bar-layout{
    min-height:80px;
  }

  .radioplay-shell.is-bar-layout .radioplay-title-box{
    max-width:none;
  }


  .radioplay-glass{
    top:64px;
  }

  .radioplay-canvas{
    bottom:0;
    top:auto;
    height:calc(100% - var(--player-canvas-top-tablet));
  }

  .radioplay-cover-wrap{
    top:12px;
    width:var(--player-cover-size-tablet);
    height:var(--player-cover-size-tablet);
  }

  .radioplay-title-box{
    top:108px;
  }

  .radioplay-station{
    font-size:31px;
  }

  .radioplay-metadata{
    font-size:13px;
  }

  .radioplay-volume-wrap{
    bottom:var(--player-volume-bottom-tablet);
    left:34px;
    right:34px;
  }

  .radioplay-controls{
    bottom:var(--player-controls-bottom-tablet);
    gap:28px;
  }
}

@media (min-width:1025px){
  .radioplay-cover-wrap{
    width:var(--player-cover-size-desktop);
    height:var(--player-cover-size-desktop);
  }
}

.radio.locked{
  cursor:not-allowed;
  position:relative;
}

.radio.locked .logo{
  opacity:.55;
  filter:grayscale(100%);
}

.radio.locked::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background:rgba(0,0,0,.06);
  pointer-events:none;
}

.badge-locked{
  position:absolute;
  top:6px;
  right:6px;
  font:600 10px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#fff;
  background:rgba(0,0,0,.55);
  padding:2px 7px;
  border-radius:999px;
  letter-spacing:.2px;
  pointer-events:none;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  z-index:2;
}

.radio[role="button"]{
  cursor:pointer;
  border-radius:999px;
}

.radio[role="button"]:focus-visible{
  outline:none;
  box-shadow:none;
}

.radio[role="button"]:focus-visible .logo,
.radio[role="button"].is-keyboard-current .logo{
  border-radius:999px;
  position:relative;
  overflow:visible;
}

.radio[role="button"]:focus-visible .logo img,
.radio[role="button"].is-keyboard-current .logo img{
  border-radius:999px;
}

.radio[role="button"]:focus-visible .logo::after,
.radio[role="button"].is-keyboard-current .logo::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:999px;
  background:conic-gradient(
    from 0deg,
    rgba(255,122,92,.95) 0deg,
    rgba(255,190,92,.92) 42deg,
    rgba(255,220,140,.88) 96deg,
    rgba(255,142,92,.8) 156deg,
    rgba(255,106,160,.7) 224deg,
    rgba(255,176,120,.62) 288deg,
    rgba(255,122,92,.95) 360deg
  );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 0 8px rgba(255,138,92,.12),
    0 0 14px rgba(255,210,120,.12),
    0 10px 20px rgba(0,0,0,.14);
  animation:
    radio-active-ring-spin 6.8s linear infinite,
    radio-active-ring-glow 2.8s ease-in-out infinite,
    radio-active-ring-fade 5.2s ease-in-out infinite;
  will-change:transform, opacity, box-shadow;
}

@keyframes radio-active-ring-spin{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

@keyframes radio-active-ring-glow{
  0%{
    opacity:.78;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.03),
      0 0 6px rgba(255,138,92,.08),
      0 0 10px rgba(255,210,120,.08),
      0 10px 20px rgba(0,0,0,.16);
  }
  50%{
    opacity:.94;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05),
      0 0 10px rgba(255,138,92,.14),
      0 0 16px rgba(255,210,120,.14),
      0 12px 24px rgba(0,0,0,.18);
  }
  100%{
    opacity:.78;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.03),
      0 0 6px rgba(255,138,92,.08),
      0 0 10px rgba(255,210,120,.08),
      0 10px 20px rgba(0,0,0,.16);
  }
}

@keyframes radio-active-ring-fade{
  0%{
    filter:saturate(.92) brightness(.96);
  }
  50%{
    filter:saturate(1.08) brightness(1.05);
  }
  100%{
    filter:saturate(.92) brightness(.96);
  }
}

footer .radioplay-mount{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:100%;
  height:var(--player-height-desktop);
  margin:0;
  z-index:9999;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  box-sizing:border-box;
}

@media (max-width:767px){
  footer .radioplay-mount{
    height:var(--player-height-mobile);
  }
}

@media (min-width:768px) and (max-width:1024px){
  footer .radioplay-mount{
    height:var(--player-height-tablet);
  }
}