/* Estelar Shipping Status (module) - isolated styles */
.estelarshippingstatus-badge{
  display: inline-block !important;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px !important;
  padding: 4px 10px !important;

  /* Match "tag" look (not pill) */
  border-radius: 4px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  font-size: 12.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;

  background: var(--estelarshippingstatus-bg, rgba(0,0,0,.06)) !important;
  color: var(--estelarshippingstatus-tx, rgba(0,0,0,.85)) !important;

  /* In case you want border from config, keep the variable available */
  /* (not applied by default because you mentioned other global CSS modules) */
}

/*
  Keep badge left-aligned on mobile even if the theme centers the price container.
  We avoid touching any global theme selectors: we only align our dedicated containers.
*/
.estelarshippingstatus-price-info-box.estelarshippingstatus-has-badge,
.tv-product-price-info-box.estelarshippingstatus-has-badge{
  display: block !important;
  margin-top: 6px !important;
  text-align: left !important;
}

.estelarshippingstatus-price-info-box.estelarshippingstatus-has-badge .estelarshippingstatus-badge,
.tv-product-price-info-box.estelarshippingstatus-has-badge .estelarshippingstatus-badge{
  display: inline-block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (max-width: 480px){
  .estelarshippingstatus-badge{
    font-size: 12px !important;
    padding: 4px 9px !important;
  }
}