/* BASICS */


/* LIGHT BAR ESSENTIALS */
.lightbar {
  display: flex; /* Folosim Flexbox pentru a ține modulele pe un rând */
  justify-content: center; /* Centrează grupul de module dacă lățimea e mai mare */
  align-items: center; /* Aliniere verticală */
  width: 100%; /* Ocupă lățimea containerului */
  max-width: 945px; /* Lățimea maximă la care designul arată "original" */
  margin: 0 auto; /* Centrează pe pagină */
margin-bottom: 0.18em; /* Sau o valoare mai mică, ajustabilă */
  padding: 0.36em; /* Padding relativ (4px / 11px) */
  /* Setăm font-size responsiv folosind clamp și vw */
  /* 1em va fi egal cu dimensiunea unui bulb */
  /* Valori: minim 6px, preferat 1.16vw, maxim 11px */
  font-size: clamp(6px, 1.16vw, 11px);
  box-sizing: border-box;
}

.light {
  /* Dimensiuni în 'em' relative la font-size-ul .lightbar */
  /* Aceste valori sunt calculate din dimensiunile originale în pixeli */
  /* presupunând că 1em = 11px la dimensiunea maximă */
  width: 11.9em;  /* 131px / 11px */
  height: 3.27em; /* 36px / 11px */
  padding: 0.36em 0.9em; /* 4px/11px vert, 10px/11px horiz */
  margin: 0 0.18em; /* 2px / 11px margini orizontale între module */

  /* Borduri relative */
  border-top: 0.18em solid #111; /* 2px / 11px */
  border-right: 0.09em solid #333; /* 1px / 11px */
  border-bottom: 0.09em solid #333;
  border-left: 0.18em solid #111;
  border-radius: 0.55em; /* 6px / 11px */

  /* Proprietăți Flexbox */
  flex-shrink: 0; /* IMPORTANT: Previne micșorarea modulelor sub width-ul definit */

  /* Alte stiluri */
  position: relative;
  background-color: #222;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  line-height: 1;
  box-sizing: border-box;
  display: block; /* Comportament corect ca flex item */
}

.inner-light {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0.55em; /* 6px / 11px */
  border: 0.09em solid transparent; /* 1px / 11px */
  background-color: transparent;
  opacity: 0;
  z-index: 1;
}

/* Z-index specific pentru suprapunere */
#light-1 .inner-light, #light-6 .inner-light { z-index: 777; }
#light-2 .inner-light, #light-5 .inner-light { z-index: 888; }
#light-3 .inner-light, #light-4 .inner-light { z-index: 999; }

.bulb {
  /* Dimensiuni relative la font-size (1em = 1 bulb size) */
  width: 1em;
  height: 1em;
  margin: 0.09em 0.09em 0.09em 0; /* 1px / 11px */
  box-shadow: 0px 0px 0.27em #222; /* 3px / 11px */
  border-radius: 50%;

  /* Alte stiluri */
  display: inline-block;
  position: relative;
  z-index: 1000; /* Deasupra inner-light */
  background: linear-gradient(155deg, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.14) 25%,rgba(255,255,255,0.18) 49%,rgba(0,0,0,0) 78%,rgba(0,0,0,0.8) 100%);
  vertical-align: top;
}

/* Păstrează regula pentru layout-ul intern 2x9 */
.bulb:nth-child(9n) {
    margin-right: 0;
}

/* ANIMATION BASICS - Timpii rămân la fel */
.delay .bulb { animation-delay: 400ms; }
.delay .inner-light { animation-delay: 400ms; }
.strobe .bulb {
  animation-duration: 800ms;
  animation-name: bulb-strobe;
  animation-iteration-count: infinite;
}

/* Keyframes - valorile numerice (shadow, border) sunt acum relative la font-size (em) */
@keyframes bulb-strobe {
  0%, 25%    { background: linear-gradient(155deg, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.14) 25%,rgba(255,255,255,0.18) 49%,rgba(0,0,0,0) 78%,rgba(0,0,0,0.8) 100%); box-shadow: 0px 0px 0.27em #222; } /* 3px -> 0.27em */
  28%, 50%   { background: white; box-shadow: 0px 0px 0.27em #222; }
  52%, 55%   { background: linear-gradient(155deg, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.14) 25%,rgba(255,255,255,0.18) 49%,rgba(0,0,0,0) 78%,rgba(0,0,0,0.8) 100%); box-shadow: 0px 0px 0.27em #222; }
  57%, 69%   { background: white; box-shadow: 0px 0px 0.27em #222; }
  70%, 71%   { background: linear-gradient(155deg, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.14) 25%,rgba(255,255,255,0.18) 49%,rgba(0,0,0,0) 78%,rgba(0,0,0,0.8) 100%); box-shadow: 0px 0px 0.27em #222; }
  72%, 75%   { background: white; box-shadow: 0px 0px 0.27em #222; }
  77%, 100%  { background: linear-gradient(155deg, rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.14) 25%,rgba(255,255,255,0.18) 49%,rgba(0,0,0,0) 78%,rgba(0,0,0,0.8) 100%); box-shadow: 0px 0px 0.27em #222; }
}

.strobe.blue .inner-light {
  animation-duration: 800ms;
  animation-name: strobe-blue;
  animation-iteration-count: infinite;
}
.strobe.red .inner-light {
  animation-duration: 800ms;
  animation-name: strobe-red;
  animation-iteration-count: infinite;
}

@keyframes strobe-blue {
   0%, 25%    { background-color: #222; box-shadow: none; border: 0.09em solid #111; opacity: 0; }
  28%, 50%   { border: 0.09em solid #ff7f1e; background-color: #ff9f56; box-shadow: none; opacity: 1; }
  52%, 55%   { background-color: #222; box-shadow: none; border: 0.09em solid #111; opacity: 0; }
  57%, 69%   { border: 0.09em solid #ff7f1e; background-color: #ff9f56; box-shadow: none; opacity: 1; }
  70%, 71%   { background-color: #222; box-shadow: none; border: 0.09em solid #111; opacity: 0; }
  72%, 75%   { border: 0.09em solid #ff7f1e; background-color: #ff9f56; box-shadow: none; opacity: 1; }
  77%, 100%  { background-color: #222; box-shadow: none; border: 0.09em solid #111; opacity: 0; }
}
@keyframes strobe-red {
   0%, 25%    { background-color: #222; box-shadow: none; border: 0.09em solid #111; opacity: 0; }
  28%, 50%   { border: 0.09em solid #ff7f1e; background-color: #ff9f56; box-shadow: none; opacity: 1; }
  52%, 55%   { background-color: #222; box-shadow: none; border: 0.09em solid #111; opacity: 0; }
  57%, 69%   { border: 0.09em solid #ff7f1e; background-color: #ff9f56; box-shadow: none; opacity: 1; }
  70%, 71%   { background-color: #222; box-shadow: none; border: 0.09em solid #111; opacity: 0; }
  72%, 75%   { border: 0.09em solid #ff7f1e; background-color: #ff9f56; box-shadow: none; opacity: 1; }
  77%, 100%  { background-color: #222; box-shadow: none; border: 0.09em solid #111; opacity: 0; }
}

/* Responsivitate pentru ecrane mici */
@media (max-width: 450px) {
  .lightbar {
    transform: scale(0.7); /* Redu dimensiunea întregului lightbar */
    transform-origin: top; /* Menține marginea de sus fixă */
  }
}

/* Responsivitate pentru ecrane mari (peste 491px) */
@media (min-width: 491px) {
  .lightbar {
    width: 100%;
    max-width: 945px; /* Asigură-te că nu se întinde dincolo de lățimea maximă */
  }

/* Media query specifică pentru scalare NU mai este necesară, */
/* deoarece scalarea este gestionată de font-size cu vw și clamp. */