/* ═══════════════════════════════════════════════════════
   Rádio Blast! — themes/theme-outubro-rosa.css
   Outubro Rosa · conscientização câncer de mama · out inteiro
   Paleta: rosa #FF69B4 · pink #FF1493 · creme #FFF0F5
   ═══════════════════════════════════════════════════════ */


/* ── Fundo: escuro com brilho rosa suave ──────────── */
body.theme-outubro-rosa {
  --green:        #FF69B4;
  --green-rgb:    255, 105, 180;
  --green-dim:    rgba(255, 105, 180, 0.10);
  --green-border: rgba(255, 105, 180, 0.22);
  --green2:       #EE4499;
  background:
    radial-gradient(ellipse at 60% 0%, rgba(200, 50, 120, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #090508 0%, #060305 100%);
}

/* ── Shapes orgânicos — brilho rosa nas bordas ── */
body.theme-outubro-rosa .td-rings {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.theme-outubro-rosa .td-ring {
  position: absolute;
  border: none;
  border-radius: 50%;
}

body.theme-outubro-rosa .td-r1 {
  width: 820px; height: 620px;
  top: -100px; right: -310px;
  background: radial-gradient(ellipse, rgba(220, 60, 140, 0.22) 0%, transparent 65%);
}
body.theme-outubro-rosa .td-r2 {
  width: 680px; height: 780px;
  bottom: -290px; left: -240px;
  background: radial-gradient(ellipse, rgba(160, 30, 100, 0.18) 0%, transparent 65%);
}
body.theme-outubro-rosa .td-r3 {
  width: 520px; height: 520px;
  top: 28%; left: -260px;
  background: radial-gradient(ellipse, rgba(180, 40, 120, 0.14) 0%, transparent 60%);
}
body.theme-outubro-rosa .td-r4 {
  width: 440px; height: 440px;
  bottom: 9%; right: -175px;
  background: radial-gradient(ellipse, rgba(200, 60, 130, 0.16) 0%, transparent 60%);
}
body.theme-outubro-rosa .td-r5 {
  width: 360px; height: 280px;
  top: 5%; left: 28%;
  background: radial-gradient(ellipse, rgba(160, 30, 100, 0.05) 0%, transparent 55%);
}

/* ── Laços e flores rosa nas bordas ─────────────── */
body.theme-outubro-rosa .td-sparks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.theme-outubro-rosa .td-s {
  position: absolute;
  line-height: 1;
  user-select: none;
  animation: outubro-rosa-element-bg 22s ease-in-out infinite;
}

body.theme-outubro-rosa .td-s::before              { content: '🎀'; }
body.theme-outubro-rosa .td-s:nth-child(even)::before { content: '🌸'; }

body.theme-outubro-rosa .td-s1 { font-size: 100px; right: -26px; top:  7%; opacity: 0.40; animation-delay:   0s; animation-duration: 23s; }
body.theme-outubro-rosa .td-s2 { font-size:  68px; right: -16px; top: 37%; opacity: 0.33; animation-delay:  -6s; animation-duration: 19s; }
body.theme-outubro-rosa .td-s3 { font-size:  88px; right: -22px; top: 63%; opacity: 0.37; animation-delay: -12s; animation-duration: 26s; }
body.theme-outubro-rosa .td-s4 { font-size:  78px; left:  -20px; top: 20%; opacity: 0.30; animation-delay:  -4s; animation-duration: 22s; }
body.theme-outubro-rosa .td-s5 { font-size:  60px; left:  -15px; top: 53%; opacity: 0.27; animation-delay: -15s; animation-duration: 18s; }
body.theme-outubro-rosa .td-s6 { font-size:  50px; left:  -12px; top: 77%; opacity: 0.33; animation-delay:  -8s; animation-duration: 23s; }
body.theme-outubro-rosa .td-s7 { font-size:  32px; left:  12%;  top: 14%; opacity: 0.15; animation-delay: -18s; animation-duration: 28s; }
body.theme-outubro-rosa .td-s8 { font-size:  26px; right: 14%;  top: 82%; opacity: 0.12; animation-delay: -10s; animation-duration: 25s; }

@keyframes outubro-rosa-element-bg {
  0%   { transform: translate(  0px,   0px) rotate(  0deg); }
  25%  { transform: translate(  8px, -10px) rotate( -8deg); }
  50%  { transform: translate( -6px,   6px) rotate( 12deg); }
  75%  { transform: translate(  5px,  -5px) rotate( -5deg); }
  100% { transform: translate(  0px,   0px) rotate(  0deg); }
}


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

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

body.theme-outubro-rosa .deco-p::before { content: '✦'; }

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

@keyframes outubro-rosa-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: rosa suave no canto superior ───────── */
body.theme-outubro-rosa .djbox-card:not(.is-playing)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-16);
  background: radial-gradient(
    ellipse at 70% 20%,
    rgba(200, 50, 120, 0.08) 0%,
    transparent 55%
  );
  animation: outubro-rosa-brilho 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

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


/* ── Header ───────────────────────────────────────── */
body.theme-outubro-rosa .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(9, 5, 8, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 105, 180, 0.22);
  box-shadow: none;
}

body.theme-outubro-rosa .logo img {
  filter: brightness(0) saturate(100%) invert(60%) sepia(60%) saturate(800%) hue-rotate(290deg) brightness(120%);
}

body.theme-outubro-rosa .header--green .nav-item       { color: rgba(220, 180, 200, 0.72); }
body.theme-outubro-rosa .header--green .nav-item:hover { color: #fff; background: rgba(255,105,180,.07); }
body.theme-outubro-rosa .header--green .nav-item.active { color: #FF69B4; background: rgba(255,105,180,.07); }
body.theme-outubro-rosa .header--green .nav-more-btn   { color: rgba(220,180,200,0.72); }
body.theme-outubro-rosa .header--green .nav-more-btn:hover,
body.theme-outubro-rosa .header--green .nav-more-btn.open { color: #fff; background: rgba(255,105,180,.07); }

body.theme-outubro-rosa .header--green .btn-icon {
  color: rgba(220,180,200,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-outubro-rosa .header--green .btn-icon:hover { color: #fff; background: rgba(255,255,255,.08); }

body.theme-outubro-rosa .header--green .btn-avatar {
  color: #090508;
  background: linear-gradient(180deg, #FF99CC 0%, #FF69B4 100%);
  border-top-color: rgba(255,255,255,.40); border-left-color: rgba(255,255,255,.20);
  border-right-color: rgba(200,60,120,.25); border-bottom-color: rgba(150,20,80,.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-outubro-rosa .header--green .btn-avatar:hover { filter: brightness(1.08); }

body.theme-outubro-rosa .header--green .btn-badge {
  background: #FF1493; color: #fff; border-color: #090508;
}


/* ══════════════════════════════════════════════════
   DJBox Outubro Rosa
   ══════════════════════════════════════════════════ */

body.theme-outubro-rosa .djbox-wrap { overflow: visible; }

/* 🎀 laço rosa — símbolo da conscientização */
body.theme-outubro-rosa .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(255, 105, 180, .75))
    drop-shadow(0 0 22px rgba(255, 20, 147, .45));
  animation: outubro-rosa-gem 4s ease-in-out infinite;
}

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

/* Card: rosa suave → pink — tom solidário */
body.theme-outubro-rosa .djbox-card {
  position: relative;
  border-width: 2px;
  animation: outubro-rosa-card-glow 5s ease-in-out infinite;
}

@keyframes outubro-rosa-card-glow {
  0%, 100% {
    border-color: rgba(255, 105, 180, .62);
    box-shadow: 0 0 16px rgba(255, 105, 180, .20), inset 0 0 12px rgba(255, 105, 180, .04);
  }
  50% {
    border-color: rgba(255, 20, 147, .62);
    box-shadow: 0 0 16px rgba(255, 20, 147, .18), inset 0 0 12px rgba(255, 20, 147, .04);
  }
}

body.theme-outubro-rosa .djb-header { background: linear-gradient(180deg, rgba(120,30,70,.18) 0%, transparent 100%); }

body.theme-outubro-rosa .djb-live-badge { background: rgba(255,105,180,.10); border-color: rgba(255,105,180,.26); }
body.theme-outubro-rosa .live-dot { background: #FF69B4; box-shadow: 0 0 6px rgba(255,105,180,.65); }
body.theme-outubro-rosa .live-lbl { color: #FF69B4; }
body.theme-outubro-rosa .djb-listeners-badge { border-color: rgba(255,105,180,.20); color: #FF69B4; }
body.theme-outubro-rosa .djb-listeners-badge span { color: #FF69B4; }

body.theme-outubro-rosa .dj-av { border-color: #FF69B4; box-shadow: 0 0 0 3px rgba(255,105,180,.10); }
body.theme-outubro-rosa .dj-soc:hover { border-color: rgba(255,20,147,.45); color: #FF1493; }

body.theme-outubro-rosa .prog-expand  { color: #FF69B4; }
body.theme-outubro-rosa .djb-hist-btn { color: #FF69B4; }

body.theme-outubro-rosa .djb-now  { background: rgba(100,20,55,.12); border-color: rgba(255,105,180,.16); }
body.theme-outubro-rosa .djb-next { background: rgba(80,10,40,.14); border-color: rgba(255,20,147,.20); }
body.theme-outubro-rosa .next-lbl  { color: #FF88CC; }
body.theme-outubro-rosa .next-time { color: #FF69B4; }


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


/* ── Laço no "!" do logo ────────────────────────────── */
body.theme-outubro-rosa .logo {
  position: relative;
}
body.theme-outubro-rosa .logo::after {
  content: '🎀';
  position: absolute;
  font-size: 16px;
  top: 24px;
  right: -6px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 5px rgba(220, 60, 140, .60));
  animation: outubro-rosa-logo-micro 6s ease-in-out infinite;
}

@keyframes outubro-rosa-logo-micro {
  0%, 100% { transform: rotate(-12deg) scale(1.00); opacity: 0.88; }
  40%       { transform: rotate( 10deg) scale(1.12); opacity: 1.00; }
  70%       { transform: rotate( -5deg) scale(0.94); opacity: 0.82; }
}


/* ══════════════════════════════════════════════════
   Blocos de conteúdo — borda tematizada
   ══════════════════════════════════════════════════ */

body.theme-outubro-rosa .c-owl {
  border: 1px solid rgba(220, 60, 140, .28);
  box-shadow:
    0 0 24px rgba(220, 60, 140, .09),
    0 0  8px rgba(220, 60, 140, .05),
    inset 0 0 20px rgba(100, 20, 60, .08);
  animation: outubro-rosa-carousel-glow 6s ease-in-out infinite;
}

@keyframes outubro-rosa-carousel-glow {
  0%, 100% {
    border-color: rgba(220, 60, 140, .28);
    box-shadow: 0 0 24px rgba(220,60,140,.09), 0 0 8px rgba(220,60,140,.05), inset 0 0 20px rgba(100,20,60,.08);
  }
  50% {
    border-color: rgba(220, 60, 140, .54);
    box-shadow: 0 0 36px rgba(220,60,140,.17), 0 0 14px rgba(220,60,140,.09), inset 0 0 28px rgba(100,20,60,.11);
  }
}

body.theme-outubro-rosa .section-title::before { background: #FF69B4; }

body.theme-outubro-rosa .convo-item:hover {
  border-color: rgba(220, 60, 140, .22);
  box-shadow: 0 0 12px rgba(220, 60, 140, .08);
}


/* ══════════════════════════════════════════════════
   Responsivo — Outubro Rosa
   ══════════════════════════════════════════════════ */

@media (max-width: 53.75rem) {
  /* Hamburger — barras claras sobre header escuro */
  body.theme-outubro-rosa .header--green .nav-hamburger span {
    background: rgba(255, 180, 210, 0.88);
  }
  body.theme-outubro-rosa .header--green .nav-hamburger {
    border-color: rgba(220, 80, 140, 0.25);
  }

  /* Bottom bar — fundo e borda do tema */
  body.theme-outubro-rosa .bottom-bar {
    background: rgba(12, 4, 8, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top-color: rgba(220, 80, 140, 0.25);
  }
  body.theme-outubro-rosa .bottom-bar-item {
    color: rgba(255, 180, 210, 0.50);
  }
  body.theme-outubro-rosa .bottom-bar-item:hover,
  body.theme-outubro-rosa .bottom-bar-item.active {
    color: #EE66AA;
  }

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

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

@media (max-width: 35rem) {
  /* Logo micro-element — smaller on very small screens */
  body.theme-outubro-rosa .logo::after {
    font-size: 11px;
    top: -7px;
    right: -4px;
  }

  body.theme-outubro-rosa .djbox-season-deco { inset: -12px; }
  body.theme-outubro-rosa .deco-p1 { font-size: 9px; }
  body.theme-outubro-rosa .deco-p2 { display: none; }
  body.theme-outubro-rosa .deco-p4 { font-size: 8px; }
}