/* ===========================
   S-METER POPUP (FINAL v11.2)
   - Fix: memory row no longer overlaps dB scale (more vertical separation)
   - Larger memory value font remains
   - No JS/logic changes required
   =========================== */

#smPopupOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647 !important;

  display: none;
  visibility: hidden;
  pointer-events: none;

  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
}

#smPopupOverlay.smOpen {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#smPopupBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 780px;
  max-width: calc(100vw - 22px);

  background: rgba(16,16,16,0.94);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);

  padding: 12px 14px 14px;
  color: rgba(255,255,255,0.92);
  font-family: Arial, Helvetica, sans-serif;
}

#smPopupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

#smPopupTitle { font-size: 14px; letter-spacing: 0.2px; opacity: 0.92; }

#smPopupClose {
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
}
#smPopupClose:hover { background: rgba(255,255,255,0.10); }

#smPopupBody { padding-top: 12px; }

#smMeterLeftLabel {
  font-size: 12px;
  opacity: 0.78;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

#smGaugePanel {
  position: relative;
  height: 470px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(120% 90% at 50% 25%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.18) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(0,0,0,0.10));
  overflow: hidden;
  padding: 10px;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,0.35);
}

/* ✅ extra bottom clearance for readout+mem+scale */
#smGaugeViewport {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 205px; /* was 190px */
  padding: 10px;
}

#smGaugeSvg { width: 100%; height: 100%; display: block; }

/* Readout sits above memory row */
#smReadout {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 152px; /* was 140px */
  text-align: center;

  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

#smReadout .smS {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1.0;
}

#smReadout .smDb {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  opacity: 0.88;
}

/* ✅ Memory row lifted up so it never touches the dB scale */
#smMemRow {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 76px; /* was 98px -> fixes overlap 116 */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.smMemBtn {
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 8px 9px;
  text-align: center;
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.smMemBtn:hover { background: rgba(255,255,255,0.09); }
.smMemBtn:active { transform: translateY(1px); }

.smMemBtn .tag {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
  opacity: 0.95;
}

.smMemBtn .val {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.88;
  line-height: 1.15;
  min-height: 28px;
  white-space: pre-line;
}

.smMemBtn.filled {
  border-color: rgba(255,200,60,0.28);
  box-shadow: 0 0 0 1px rgba(255,200,60,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
}

.smMemBtn.filled .tag { color: rgba(255,200,60,0.95); }
.smMemBtn.filled .val { opacity: 0.94; }

/* Bar scale (real dB) */
#smBarScale {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 54px;
  height: 22px;
  pointer-events: none;
  user-select: none;
}

#smBarTicks {
  position: relative;
  height: 12px;
  opacity: 0.78;
}

#smBarTicks .tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.55);
  height: 10px;
}

#smBarTicks .tick.small { height: 6px; opacity: 0.55; }

#smBarTicks .tick.s9 {
  height: 12px;
  background: rgba(255,90,90,0.92);
  box-shadow: 0 0 10px rgba(255,90,90,0.35);
}

#smBarLabels {
  position: relative;
  height: 10px;
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.75;
}

#smBarLabels .lbl {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

#smBarLabels .lbl.s9 {
  color: rgba(255,90,90,0.95);
  font-weight: 800;
}

/* Bar itself */
#smBar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;

  height: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

#smBarFill {
  height: 100%;
  width: 0%;
  border-radius: 10px;
  background: linear-gradient(to right,
    rgba(0,220,130,0.92),
    rgba(255,210,0,0.92),
    rgba(255,90,90,0.98)
  );
  transition: width 90ms linear;
  will-change: width;
}

/* S9 marker overlay on the bar */
#smBarS9Marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,200,60,0.95);
  box-shadow: 0 0 12px rgba(255,200,60,0.35);
  pointer-events: none;
  z-index: 5;
}

#smBarS9Marker::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255,200,60,0.92);
  opacity: 0.95;
}

#smPopupHint { margin-top: 10px; font-size: 11px; opacity: 0.65; letter-spacing: 0.2px; }

@media (max-width: 540px) {
  #smPopupBox { width: calc(100vw - 18px); }
  #smGaugePanel { height: 470px; }

  #smGaugeViewport { bottom: 222px; }
  #smReadout { bottom: 162px; }
  #smReadout .smS { font-size: 34px; }
  #smReadout .smDb { font-size: 14px; }

  #smMemRow { bottom: 80px; gap: 8px; } /* Podesavanje visine memorijskog reda na mobilnom */
  .smMemBtn { padding: 9px 6px 8px; border-radius: 10px; }
  .smMemBtn .tag { font-size: 11px; }
  .smMemBtn .val { font-size: 11px; min-height: 26px; }
}