/* --- Font import --- */
@font-face {
    font-family: 'Open24';
    src: url('assets/open24.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- Radio container --- */
.kogel-radio-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto -5px;
    background-image: url('assets/radio.png');
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1200 / 375;
}

/* --- Display styling --- */
.kogel-rds-display {
    position: absolute;
    /* display lager zetten */
    top: 34%;
    left: 36%;
    width: 32%;
    height: 28%;
    padding-bottom: 4px;
    /* exacte LCD-achtergrondkleur */
    background: #1f1e1e;
    color: #33ccff;
    font-family: 'Open24', monospace;
    font-size: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 1px;
    text-shadow: 0 0 2px #33ccff, 0 0 4px #1a9dd8;
    border-radius: 4px;
    z-index: 1;
    /* context voor canvas */
    position: relative;
}

/* === VU-meter styling en toggling (canvas-meter blijft, indien gewenst) === */
.kogel-vumeter-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: none;
    box-shadow: inset 0 0 2px #33ccff, inset 0 0 4px #1a9dd8;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}

/* Disable the hiding of RDS-text on toggle, zodat tekst blijft lopen */
.vumeter-active .kogel-rds-text {
    display: block !important;
}

/* Canvas-meter show (optioneel) */
.vumeter-active .kogel-vumeter-canvas {
    display: block;
}

/* === Toggle-knop over power-button plaatsen === */
.kogel-vumeter-toggle {
  position: absolute;
  top: 28% !important;        /* verticaal geplaatst */
  left: 80% !important;       /* horizontaal geplaatst */
  width: 82px !important;     /* klikgebied */
  height: 82px !important;    /* klikgebied */
  background: transparent;     /* geen overlay */
  border: none;               /* geen rand */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;                 /* onzichtbaar maar klikbaar */
  z-index: 10;
  transition: transform .1s;
}

.kogel-vumeter-toggle:active {
  transform: scale(0.9);
}

/* === Responsive tweaks === */
@media (max-width: 480px) {
  .kogel-rds-display {
    top: 47%;
    width: 40%;
    height: 30%;
    font-size: 2em;
  }
}

/* --- Forcerende override (laatste in dit bestand) --- */
.kogel-radio-wrapper .kogel-rds-display {
    position: absolute !important;
    top: 34% !important;
    left: 36% !important;
    width: 32% !important;
    height: 28% !important;
    background: #1f1e1e !important;
    color: #33ccff !important;
    font-size: 3em !important;
}

/* === Nieuwe retro LED-VU-meter === */
.led-vumeter {
  position: absolute;
  bottom: -120px;            /* start juist buiten beeld */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  transition: bottom 0.5s ease-out;
  pointer-events: none;
  z-index: 5;                /* bovenop de radio-achtergrond */
}
/* Slide-up als de meter actief is */
.kogel-radio-wrapper.vumeter-active .led-vumeter {
  bottom: 10px;              /* pas dit aan zodat 'ie precies uit de radio komt */
}
/* Elk LED-je */
.led {
  width: 12px;
  height: 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}