/* ═══════════════════════════════════════════════════════
   Rádio Blast! — themes/theme-novembro-azul.css
   Novembro Azul · conscientização câncer de próstata · nov inteiro
   Paleta: azul #0088FF · céu #44AAFF · marinho #003399
   ═══════════════════════════════════════════════════════ */


/* ── Fundo: escuro com brilho azul profundo ──────── */
body.theme-novembro-azul {
  --green:        #44AAFF;
  --green-rgb:    68, 170, 255;
  --green-dim:    rgba(68, 170, 255, 0.10);
  --green-border: rgba(68, 170, 255, 0.22);
  --green2:       #2288DD;
  background:
    radial-gradient(ellipse at 40% 0%, rgba(0, 80, 200, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #050810 0%, #030507 100%);
}

body.theme-novembro-azul .td-sparks,
body.theme-novembro-azul .td-rings { display: none; }


/* ── Luzes azuis ao redor do DJBox ───────────────── */
body.theme-novembro-azul .djbox-season-deco {
  position: absolute;
  inset: -48px;
  pointer-events: none;
  z-index: 6;
}

body.theme-novembro-azul .deco-p {
  position: absolute;
  line-height: 1;
  animation: novembro-azul-luz 6s ease-in-out infinite;
}

body.theme-novembro-azul .deco-p::before { content: '✦'; }

body.theme-novembro-azul .deco-p1 { top:  6%; left: 14%;  font-size: 16px; color: #44AAFF; animation-delay:  0s;   animation-duration: 6.5s; }
body.theme-novembro-azul .deco-p2 { top:  8%; right: 10%; font-size: 11px; color: #0088FF; animation-delay: -2.0s; animation-duration: 8.0s; }
body.theme-novembro-azul .deco-p3 { top: 44%; left: -1%;  font-size: 10px; color: #66BBFF; animation-delay: -3.5s; animation-duration: 7.0s; }
body.theme-novembro-azul .deco-p4 { bottom: 24%; left: 8%; font-size: 14px; color: #44AAFF; animation-delay: -1.0s; animation-duration: 8.5s; }
body.theme-novembro-azul .deco-p5 { bottom: 44%; right: 2%; font-size: 10px; color: #0088FF; animation-delay: -5.0s; animation-duration: 7.5s; }

@keyframes novembro-azul-luz {
  0%   { opacity: 0;    transform: translateY(  0px) scale(0.5); }
  30%  { opacity: 0.80; transform: translateY(-15px) scale(1.1); }
  70%  { opacity: 0.45; transform: translateY(-35px) scale(0.9); }
  100% { opacity: 0;    transform: translateY(-55px) scale(0.5); }
}


/* ── Shimmer: azul profundo no topo ──────────────── */
body.theme-novembro-azul .djbox-card:not(.is-playing)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-16);
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(0, 80, 200, 0.08) 0%,
    transparent 55%
  );
  animation: novembro-azul-brilho 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes novembro-azul-brilho {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1.0; }
}


/* ── Header ───────────────────────────────────────── */
body.theme-novembro-azul .header--green {
  /* O botão do chat usa o acento deste tema: sobre o header escuro daqui ele
     destaca igual, e o laranja padrão brigaria com esta paleta. */
  --chat-cta: var(--green);
  background: rgba(5, 8, 16, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 136, 255, 0.22);
  box-shadow: none;
}

body.theme-novembro-azul .logo img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(80%) saturate(600%) hue-rotate(185deg) brightness(115%);
}

body.theme-novembro-azul .header--green .nav-item       { color: rgba(170, 200, 240, 0.72); }
body.theme-novembro-azul .header--green .nav-item:hover { color: #fff; background: rgba(0,136,255,.07); }
body.theme-novembro-azul .header--green .nav-item.active { color: #44AAFF; background: rgba(0,136,255,.07); }
body.theme-novembro-azul .header--green .nav-more-btn   { color: rgba(170,200,240,0.72); }
body.theme-novembro-azul .header--green .nav-more-btn:hover,
body.theme-novembro-azul .header--green .nav-more-btn.open { color: #fff; background: rgba(0,136,255,.07); }

body.theme-novembro-azul .header--green .btn-icon {
  color: rgba(170,200,240,0.80);
  background: rgba(255,255,255,.04);
  border-top-color: rgba(255,255,255,.08); border-left-color: rgba(255,255,255,.05);
  border-right-color: rgba(255,255,255,.03); border-bottom-color: rgba(0,0,0,.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.15);
}
body.theme-novembro-azul .header--green .btn-icon:hover { color: #fff; background: rgba(255,255,255,.08); }

body.theme-novembro-azul .header--green .btn-avatar {
  color: #050810;
  background: linear-gradient(180deg, #66BBFF 0%, #0088FF 100%);
  border-top-color: rgba(255,255,255,.40); border-left-color: rgba(255,255,255,.20);
  border-right-color: rgba(0,80,200,.25); border-bottom-color: rgba(0,40,150,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.15);
  filter: none;
}
body.theme-novembro-azul .header--green .btn-avatar:hover { filter: brightness(1.08); }

body.theme-novembro-azul .header--green .btn-badge {
  background: #0088FF; color: #fff; border-color: #050810;
}


/* ══════════════════════════════════════════════════
   DJBox Novembro Azul
   ══════════════════════════════════════════════════ */

body.theme-novembro-azul .djbox-wrap { overflow: visible; }

/* 🎗️ laço azul — símbolo da conscientização */
body.theme-novembro-azul .djbox-wrap::before {
  content: '🎗️';
  position: absolute;
  top: 50%;
  right: -26px;
  font-size: 40px;
  line-height: 1;
  z-index: 10;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(0, 136, 255, .75))
    drop-shadow(0 0 22px rgba(0, 50, 200, .45));
  animation: novembro-azul-gem 4s ease-in-out infinite;
}

@keyframes novembro-azul-gem {
  0%, 100% { transform: translateY(-50%) scale(1.00) rotate(-5deg); }
  50%       { transform: translateY(-50%) scale(1.12) rotate( 5deg); }
}

/* Card: azul-céu → azul-marinho — tom sóbrio e solidário */
body.theme-novembro-azul .djbox-card {
  position: relative;
  border-width: 2px;
  animation: novembro-azul-card-glow 5s ease-in-out infinite;
}

@keyframes novembro-azul-card-glow {
  0%, 100% {
    border-color: rgba(0, 136, 255, .62);
    box-shadow: 0 0 16px rgba(0, 136, 255, .20), inset 0 0 12px rgba(0, 136, 255, .04);
  }
  50% {
    border-color: rgba(0, 51, 153, .62);
    box-shadow: 0 0 16px rgba(0, 51, 153, .18), inset 0 0 12px rgba(0, 51, 153, .04);
  }
}

body.theme-novembro-azul .djb-header { background: linear-gradient(180deg, rgba(0,40,120,.18) 0%, transparent 100%); }

body.theme-novembro-azul .djb-live-badge { background: rgba(0,136,255,.10); border-color: rgba(0,136,255,.26); }
body.theme-novembro-azul .live-dot { background: #0088FF; box-shadow: 0 0 6px rgba(0,136,255,.65); }
body.theme-novembro-azul .live-lbl { color: #44AAFF; }
body.theme-novembro-azul .djb-listeners-badge { border-color: rgba(0,136,255,.20); color: #44AAFF; }
body.theme-novembro-azul .djb-listeners-badge span { color: #44AAFF; }

body.theme-novembro-azul .dj-av { border-color: #0088FF; box-shadow: 0 0 0 3px rgba(0,136,255,.10); }
body.theme-novembro-azul .dj-soc:hover { border-color: rgba(0,51,153,.45); color: #4488FF; }

body.theme-novembro-azul .prog-expand  { color: #44AAFF; }
body.theme-novembro-azul .djb-hist-btn { color: #44AAFF; }

body.theme-novembro-azul .djb-now  { background: rgba(0,30,90,.12); border-color: rgba(0,136,255,.16); }
body.theme-novembro-azul .djb-next { background: rgba(0,20,60,.14); border-color: rgba(0,51,153,.20); }
body.theme-novembro-azul .next-lbl  { color: #66BBFF; }
body.theme-novembro-azul .next-time { color: #44AAFF; }


/* ── Estado idle (rádio pausada) ─────────────────── */
body.theme-novembro-azul .djbox-card:not(.is-playing) {
  border-width: 1px;
  border-color: rgba(0, 136, 255, .28);
  box-shadow: 0 0 10px rgba(0, 136, 255, .10), inset 0 0 8px rgba(0, 136, 255, .02);
  animation: none;
}
body.theme-novembro-azul .djbox-wrap:not(:has(.is-playing))::before {
  font-size: 28px;
  opacity: 0.45;
  animation: none;
}
body.theme-novembro-azul .djbox-wrap:not(:has(.is-playing)) .deco-p {
  opacity: 0.20;
  animation: none;
}


/* ══════════════════════════════════════════════════
   Responsivo — Novembro Azul
   ══════════════════════════════════════════════════ */

@media (max-width: 53.75rem) {
  /* Hamburger — barras claras sobre header escuro */
  body.theme-novembro-azul .header--green .nav-hamburger span {
    background: rgba(170, 200, 240, 0.88);
  }
  body.theme-novembro-azul .header--green .nav-hamburger {
    border-color: rgba(0, 136, 255, 0.22);
  }

  /* Bottom bar — fundo e borda do tema */
  body.theme-novembro-azul .bottom-bar {
    background: rgba(5, 8, 16, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top-color: rgba(0, 136, 255, 0.22);
  }
  body.theme-novembro-azul .bottom-bar-item {
    color: rgba(170, 200, 240, 0.50);
  }
  body.theme-novembro-azul .bottom-bar-item:hover,
  body.theme-novembro-azul .bottom-bar-item.active {
    color: #44AAFF;
  }

  /* Laço lateral do DJBox — sem espaço lateral no mobile */
  body.theme-novembro-azul .djbox-wrap::before {
    display: none;
  }

  /* Partículas ao redor do DJBox — inset menor */
  body.theme-novembro-azul .djbox-season-deco { inset: -24px; }
  body.theme-novembro-azul .deco-p1 { font-size: 13px; }
  body.theme-novembro-azul .deco-p2 { font-size:  9px; }
  body.theme-novembro-azul .deco-p3 { display: none; }
  body.theme-novembro-azul .deco-p4 { font-size: 11px; }
  body.theme-novembro-azul .deco-p5 { display: none; }
}

@media (max-width: 35rem) {
  body.theme-novembro-azul .djbox-season-deco { inset: -12px; }
  body.theme-novembro-azul .deco-p1 { font-size: 11px; }
  body.theme-novembro-azul .deco-p2 { display: none; }
  body.theme-novembro-azul .deco-p4 { font-size:  9px; }
}