/* Avvisi e banner — .dpr-*
   Questo foglio è condiviso fra barra e card, quindi NON dichiara
   --drako-promo-bar-h: l'altezza la dichiara la barra, inline in header.php, e solo
   quando la barra c'è davvero. Dichiararla qui farebbe scendere l'header di 30px
   anche sulle pagine dove in cima non c'è niente (in pagina solo la card). */

.dpr-bar{
  position:fixed; top:0; left:0; right:0; z-index:950;
  /* Il fallback qui NON è la dichiarazione che abbiamo tolto da :root: quella faceva
     scendere l'header anche senza barra. Questa è solo l'altezza dell'elemento, e serve
     all'anteprima del backoffice, che carica questo foglio senza l'inline della pagina. */
  height:var(--drako-promo-bar-h,30px);
  background:#1f2430; color:#f4f5f7;
  font:13px/1 'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.dpr-bar-in{
  max-width:1500px; margin:0 auto; height:100%;
  padding:0 44px 0 16px; position:relative;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.dpr-ico{ display:flex; flex:0 0 auto; color:#c9a2ff; }
.dpr-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpr-forte{ font-weight:700; }
.dpr-count{ opacity:.85; margin-left:6px; font-variant-numeric:tabular-nums; }

/* Pallino: acceso solo in diretta */
.dpr-dot{ display:none; width:7px; height:7px; border-radius:50%; background:#e91916; flex:0 0 auto; }
.dpr-bar[data-dpr-stato="in_diretta"] .dpr-dot{ display:block; animation:dpr-pulse 1.6s ease-in-out infinite; }
@keyframes dpr-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.dpr-cta{
  flex:0 0 auto; padding:5px 12px; border-radius:5px;
  background:#f4f5f7; color:#1f2430 !important; font-weight:700;
  text-decoration:none; line-height:1;
}
.dpr-cta:hover{ background:#fff; }

.dpr-x{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:#f4f5f7;
}
.dpr-x:hover{ background:rgba(255,255,255,.26); }
.dpr-x:focus-visible{ outline:2px solid #c9a2ff; outline-offset:2px; }

@media (max-width:700px){
  /* Stesso ragionamento del fallback qui sopra: sotto i 700px la barra vera è 44px,
     e l'anteprima deve mostrare quella, non l'altezza del contenuto. */
  .dpr-bar{ font-size:12px; height:var(--drako-promo-bar-h,44px); }
  .dpr-bar-in{ padding:0 40px 0 12px; gap:8px; }
  .dpr-txt{ white-space:normal; line-height:1.25; text-align:center; }
  /* L'icona è decorativa e cede il posto: sotto i 700px il pulsante DEVE restare,
     altrimenti la barra annuncia la diretta senza dare modo di raggiungerla
     (la barra intera non è cliccabile per scelta). */
  .dpr-ico{ display:none; }
  .dpr-cta{ padding:4px 10px; font-size:12px; flex:0 0 auto; }
  .dpr-txt{ font-size:11.5px; }
}

@media (prefers-reduced-motion: reduce){
  .dpr-bar[data-dpr-stato="in_diretta"] .dpr-dot{ animation:none; }
  .dpr-card[data-dpr-stato="in_diretta"] .dpr-dot{ animation:none; }
}

/* --- Card flottante --- */
.dpr-card{
  position:fixed; right:16px; bottom:16px; z-index:940;
  width:300px; max-width:calc(100vw - 32px);
  background:#1f2430; color:#f4f5f7; border:1px solid #333a4a; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35); overflow:hidden;
  font:13px/1.45 'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.dpr-card[hidden]{ display:none; }
.dpr-card-head{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px 9px 12px; background:#171b24; border-bottom:1px solid #333a4a;
}
.dpr-card-head .dpr-dot{ display:none; }
/* Il pallino rosso è l'insegna della diretta: acceso solo quando la diretta c'è,
   come già fa quello della barra. Prima la regola qui sopra diceva display:block e
   vinceva per specificità sul display:none della regola base, quindi una card in
   attesa mostrava il pallino «in diretta» mentre non c'era nessuna diretta — una
   cosa che il cliente vede, e che dice il falso. */
.dpr-card[data-dpr-stato="in_diretta"] .dpr-dot{
  display:block; animation:dpr-pulse 1.6s ease-in-out infinite;
}
.dpr-card-tit{ flex:1; font-weight:700; font-size:12px; letter-spacing:.3px; text-transform:uppercase; }
.dpr-card-head .dpr-x{ position:static; transform:none; }
.dpr-card-body{ padding:14px; text-align:center; }
.dpr-card-ico{ display:flex; justify-content:center; margin-bottom:8px; color:#c9a2ff; }
.dpr-card-txt{ margin:0 0 12px; color:#c8ccd6; }
.dpr-card-cta{
  display:block; padding:9px 14px; border-radius:6px;
  background:#9146ff; color:#fff !important; font-weight:700; text-decoration:none;
}
.dpr-card-cta:hover{ background:#7d2ff0; }

@media (max-width:700px){
  .dpr-card{ right:10px; left:10px; bottom:10px; width:auto; }
}

/* --- Tema scuro: i pulsanti tengono i propri colori --- */
/* In stylesheet.css c'è una regola globale `[data-theme="dark"] a` con !important che
   vince per specificità su `.dpr-cta`/`.dpr-card-cta`: il pulsante della barra scendeva
   a 2,86:1 (soglia 4,5:1) e quello della card perdeva il viola. Si alza la specificità
   invece di toccare il foglio di stile del sito, che serve a tutto il resto. */
[data-theme="dark"] .dpr-bar a.dpr-cta {
  color:#1f2430 !important;
  background:#f4f5f7 !important;
}
[data-theme="dark"] .dpr-bar a.dpr-cta:hover { background:#fff !important; }

[data-theme="dark"] .dpr-card a.dpr-card-cta {
  color:#fff !important;
  background:#9146ff !important;
}
[data-theme="dark"] .dpr-card a.dpr-card-cta:hover { background:#7d2ff0 !important; }