/* Container for each row of information (battery and text) */
.route-stop {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 1. Main battery body */
.battery {
  width: 42px; /* Further reduced width */
  height: 18px; /* Further reduced height */
  border: 1.5px solid #8e8e93;
  border-radius: 5px;
  background-color: #3a3a3c;
  position: relative;
  box-sizing: border-box;
  /* Flex properties to center the text inside */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. Battery head (the positive terminal) */
.battery::after {
  content: '';
  position: absolute;
  left: -6px; /* Adjusted position for RTL */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 9px; /* Adjusted height */
  background-color: #8e8e93;
  border-radius: 2px 0 0 2px;
}

/* 3. Charge level (sits behind the text) */
.battery-level {
  position: absolute;
  top: 2px;
  right: 2px; /* Respects padding */
  bottom: 2px;
  height: calc(100% - 4px);
  border-radius: 2.5px;
  transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;

  /* Corrected repeating-gradient for separator lines */
  background-image: repeating-linear-gradient(
          to left,
          transparent,
          transparent 7px,
          #3a3a3c 100px,
          #3a3a3c 8px
  );
}

/* 4. Text inside the battery */
.battery-text {
  position: relative; /* To ensure it's on top */
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  /* This blend mode makes the text color invert against the background, ensuring readability */
  mix-blend-mode: difference;
}

/* Styles for the extra information text */
.battery-info {
  font-size: 14px;
  font-weight: 500;
}

.battery-info .separator {
  color: #8e8e93;
  margin: 0 4px;
}

.battery-info .charging-icon {
  color: #ff9f0a;
}

/* Color classes for different percentages */
.battery-level.high { background-color: rgb(146, 255, 198); }
.battery-level.medium { background-color: #d0d0d2; }
.battery-level.low { background-color: #ff453a; } /* Red color for low charge */