/* --- WooCommerce Tax Toggle (final) --- */



/* wrapper */

.wc-tax-toggle {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  font-size: 14px;

  line-height: 1;

}



/* label + switch row */

.wc-tax-switch {

  display: inline-flex;

  align-items: center;

  gap: .45rem;

  cursor: pointer;

  user-select: none;

}



/* labels (white + bold) */

.wc-tax-switch .tax-label {

  font-size: 13px;

  white-space: nowrap;

  font-weight: 700;

  color: #3B3C42 !important;

}



/* hide checkbox */

.wc-tax-switch input {

  display: none;

}



/* toggle track */

.wc-tax-switch .slider {

  width: 46px;

  height: 24px;

  background: #ddd;

  border-radius: 999px;

  position: relative;

  transition: background .2s ease;

}



/* knob */

.wc-tax-switch .slider::after {

  content: "";

  width: 20px;

  height: 20px;

  background: #fff;

  border-radius: 50%;

  position: absolute;

  top: 2px;

  left: 2px;

  box-shadow: 0 1px 3px rgba(0,0,0,.2);

  transition: left .2s ease;

}



/* red when Ex Tax */

.wc-tax-toggle.is-ex .slider {

  background: #f44336;

}



/* green when Inc Tax */

#wc-tax-toggle-input:checked + .slider,

.wc-tax-toggle input:checked + .slider {

  background: #4caf50 !important;

}



/* move knob right when checked */

#wc-tax-toggle-input:checked + .slider::after,

.wc-tax-toggle input:checked + .slider::after {

  left: 24px;

}



/* suffix */

.vat-suffix,

.tax-suffix {

  opacity: .8;

  font-size: .85em;

  margin-left: .25em;

}



/* spinner animation */

@keyframes wc-tax-spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* spinner inside knob on loading */

.wc-tax-toggle.loading .slider::after {

  border: 2px solid #fff;

  border-top: 2px solid rgba(0,0,0,0.3);

  border-radius: 50%;

  width: 16px;  /* ↓ smaller spinner */

  height: 16px;

  top: 4px;     /* recentered for smaller size */

  left: 4px;

  background: transparent;

  animation: wc-tax-spin 0.6s linear infinite;

  box-shadow: none;

}



/* keep spinner aligned with knob when checked */

.wc-tax-toggle.loading input:checked + .slider::after {

  left: 26px;

}