.onair-image { /* frontend visning – fyld bredden, max 300 i højde */
  width: 100% !important;
  height: 300px !important;
  object-fit: cover; /* fyld boksen i bredden, beskær i højden ved behov */
  display: block;
  border-radius: 10%; /* afrundede hjørner */
}
.onair-image--portrait { /* valgfri: 300x600 portrait */
  width: 300px;
  height: 600px;
}
.onair-image-preview { /* kontrolpanelets preview – fyld bredden, max 300 i højde */
  width: 100% !important;
  height: 300px !important;
  object-fit: cover;
  display: block;
  border-radius: 10%;
}

.onair-preview { /* preview-container i kontrolpanelet */
  position: relative;
  width: 850px;
  max-width: 850px;
  height: 300px;
  min-width: 850px;
  min-height: 300px;
  overflow: hidden; /* beskær alt der overstiger boksen */
  margin: 0 auto;
}

.onair-display {
  position: relative;
  width: 850px; /* fast boksbredde */
  max-width: 850px;
  height: 300px; /* fast bokshøjde */
  min-width: 850px;
  min-height: 300px;
  overflow: hidden; /* beskær alt der overstiger boksen */
  margin: 0 auto; /* centrér containeren, indholdet kan stadig venstrejusteres */
}

.onair-name,
.onair-name-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  z-index: 2;
}

/* ON AIR tekst vises som overlay i midten af billedet */

/* Skjul evt. WP Song Viewer override tekst helt */
.wpsv-override-text { display: none !important; }

.onair-names {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.onair-host-name {
  font-weight: 600;
  margin-top: 4px;
}
.onair-show-name {
  font-weight: 700;
  text-transform: uppercase;
}

.onair-live-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.onair-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e60000;
  box-shadow: 0 0 0 rgba(230,0,0,0.7);
  animation: onair-pulse 1.8s infinite;
}
@keyframes onair-pulse {
  0% { box-shadow: 0 0 0 0 rgba(230,0,0,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(230,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,0,0,0); }
}

.onair-controls {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}
.onair-controls__left { /* Lad preview fylde hele bredden for 1:1 visning */
  grid-column: 1 / -1;
}
.onair-field label { display: block; margin-bottom: 6px; font-weight: 600; }
.onair-field input { width: 100%; max-width: 420px; padding: 8px; }
.onair-actions { display: flex; gap: 8px; margin-top: 12px; }

.onair-previous__title { margin-top: 18px; font-weight: 600; }
.onair-previous__list { display: grid; grid-template-columns: repeat(auto-fill, 100px); gap: 8px; margin-top: 8px; }
.onair-prev-item { border: 1px solid #ddd; padding: 0; background: #fff; cursor: pointer; position: relative; }
.onair-prev-item img { display: block; width: 100%; height: 100px; object-fit: cover; }
.onair-prev-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  display: inline-block;
}
.onair-prev-remove:hover { background: rgba(220,0,0,0.75); }
.onair-empty { color: #666; font-style: italic; }

#onair-status { margin-top: 12px; }
#onair-status.ok { color: #007c00; }
#onair-status.err { color: #c40000; }
.onair-show-only {
  text-align: left;
  max-width: 1260px;
  width: 100%;
  margin: 0 auto; /* hold dig inden for samme bredde som banneret */
  padding-left: 24px; /* standard indrykning – kan overstyres via shortcode */
}
.onair-live-inline {
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.onair-show-line { font-weight: 700; text-transform: uppercase; }
.onair-host-line { font-weight: 600; margin-top: 2px; }

/* Advarselsboks når et LIVE show allerede er i gang */
/* Base (fælles) */
.onair-live-notice {
  position: relative;
  display: none; /* vises når der er LIVE */
  margin: 12px 0;
}
.onair-live-notice__title { font-weight: 700; margin-bottom: 6px; }
.onair-live-notice__text {
  font-weight: 700;            /* gør teksten fed */
  white-space: nowrap;         /* kun én linje */
  overflow: hidden;            /* skjul det der ikke kan være */
  text-overflow: ellipsis;     /* brug … hvis den bliver for lang */
}
.onair-live-notice__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

/* Soft variant – ala eksemplet */
.onair-live-notice--soft {
  background: #f3e4e4; /* lys rosa */
  border: 2px solid #d08ad1; /* lilla accent */
  border-radius: 4px;
  padding: 16px 28px;
}
.onair-live-notice--soft .onair-live-notice__title { color: #b33a3a; }
.onair-live-notice--soft .onair-live-notice__text { color: #8a3b3b; }
.onair-live-notice--soft .onair-live-notice__close { color: #b33a3a; }
.onair-live-notice--soft .onair-live-notice__close:hover { color: #8a1f1f; }

/* Strong variant – den pimpede bokstype */
.onair-live-notice--strong {
  background: linear-gradient(90deg, #3a0f0f 0%, #661414 50%, #8a1c1c 100%);
  color: #fffbe6;
  border: 2px solid #ffcc00;
  border-radius: 10px;
  padding: 14px 16px 14px 48px; /* plads til ikon til venstre */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.55), inset 0 0 8px rgba(255,255,255,0.08);
}
.onair-live-notice--strong::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 6px;
  border-radius: 4px;
  background: #ffcc00;
  animation: onair-blink 1.2s infinite ease-in-out;
}
.onair-live-notice__pulse {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7);
  animation: onair-pulse-strong 1.6s infinite;
}
@keyframes onair-blink {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@keyframes onair-pulse-strong {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}