/**
 * Battery Icon Public Styles
 */

.battery-icon-container {
  display: inline-flex;
  align-items: center;
  font-family: Arial, sans-serif;
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 5;
}

/* Product image positioning */
.product-element-top {
  position: relative;
}

.product-element-top .battery-icon-container {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 5;
}

/* Default battery size (archive pages - 40% smaller) */
.battery-icon {
  width: 60px; /* 40% smaller than original 100px */
  height: 24px; /* 40% smaller than original 40px */
  border: 2px solid #000; /* Slightly smaller border */
  border-radius: 6px; /* Adjusted for smaller size */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  transition: all 0.3s ease;
}

.battery-icon::after {
  content: "";
  width: 5px; /* Adjusted for smaller size */
  height: 12px; /* Adjusted for smaller size */
  background-color: #000;
  border-radius: 0 2px 2px 0;
  position: absolute;
  right: -7px; /* Adjusted for smaller size */
  top: 50%;
  transform: translateY(-50%);
}

/* Single product page battery size (15% smaller than original) */
.single-product .battery-icon {
  width: 85px; /* 15% smaller than original 100px */
  height: 34px; /* 15% smaller than original 40px */
  border: 3px solid #000;
  border-radius: 8px;
}

.single-product .battery-icon::after {
  width: 7px;
  height: 17px;
  right: -10px;
  border-radius: 0 3px 3px 0;
}

.battery-text {
  color: #000; /* Default color for text (for low battery levels) */
  font-weight: bold;
  font-size: 14px; /* Adjusted for smaller size */
  z-index: 2;
  position: relative;
  transition: color 0.3s ease;
}

/* Larger text for single product page */
.single-product .battery-text {
  font-size: 19px;
}

.battery-icon-level {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Single product battery level border radius */
.single-product .battery-icon-level {
  border-radius: 6px;
}

/* Battery color states */
.battery-icon-low .battery-icon-level {
  background-color: #e74c3c;
}

.battery-icon-medium .battery-icon-level {
  background-color: #f1c40f;
}

.battery-icon-high .battery-icon-level {
  background-color: #2ecc71;
}

/* Make text white when battery level is 80% or higher */
.battery-icon[data-battery-level="80"] .battery-text,
.battery-icon[data-battery-level="81"] .battery-text,
.battery-icon[data-battery-level="82"] .battery-text,
.battery-icon[data-battery-level="83"] .battery-text,
.battery-icon[data-battery-level="84"] .battery-text,
.battery-icon[data-battery-level="85"] .battery-text,
.battery-icon[data-battery-level="86"] .battery-text,
.battery-icon[data-battery-level="87"] .battery-text,
.battery-icon[data-battery-level="88"] .battery-text,
.battery-icon[data-battery-level="89"] .battery-text,
.battery-icon[data-battery-level="90"] .battery-text,
.battery-icon[data-battery-level="91"] .battery-text,
.battery-icon[data-battery-level="92"] .battery-text,
.battery-icon[data-battery-level="93"] .battery-text,
.battery-icon[data-battery-level="94"] .battery-text,
.battery-icon[data-battery-level="95"] .battery-text,
.battery-icon[data-battery-level="96"] .battery-text,
.battery-icon[data-battery-level="97"] .battery-text,
.battery-icon[data-battery-level="98"] .battery-text,
.battery-icon[data-battery-level="99"] .battery-text,
.battery-icon[data-battery-level="100"] .battery-text {
  color: #fff;
}

/* Single product page positioning */
.single-product .woocommerce-product-gallery {
  position: relative;
}

.single-product .battery-icon-container {
  left: 24px;
  right: auto;
  z-index: 10;
}

/* Hide battery icons outside of product image area */
.product-element-bottom .battery-icon-container {
  display: none;
}

/* RTL support */
.rtl .battery-icon::after {
  right: auto;
  left: -7px;
  border-radius: 2px 0 0 2px;
}

.rtl .single-product .battery-icon::after {
  left: -10px;
  border-radius: 3px 0 0 3px;
}

.rtl .product-element-top .battery-icon-container {
  right: auto;
  left: 10px;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .battery-icon {
    border-color: CanvasText;
  }

  .battery-icon::after {
    background: CanvasText;
  }

  .battery-icon-level {
    background-color: Highlight;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .battery-icon,
  .battery-icon-level {
    transition: none;
  }
}

/* Screen reader text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .battery-icon {
    width: 50px;
    height: 20px;
  }

  .single-product .battery-icon {
    width: 70px;
    height: 28px;
  }

  .battery-icon::after {
    width: 4px;
    height: 10px;
    right: -6px;
  }

  .single-product .battery-icon::after {
    width: 6px;
    height: 14px;
    right: -8px;
  }

  .battery-text {
    font-size: 14px;
  }

  .single-product .battery-text {
    font-size: 16px;
  }
  .product-element-top .battery-icon-container {
    left: 14px;
  }
}