/* =============================================
   VARIANT SELECT → RADIO BUTTON CONVERSION
   Add this after custom.css in head
   ============================================= */

/* Hide the original select dropdown when radios are present */
.productform.variant-radios-active select.fancy-select,
.productform.variant-radios-active .product-configure-variants select,
.variant-radios-active select[data-radios-converted="true"] {
  display: none !important;
}

/* Radio button container */
.variant-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

/* Each radio option row */
.variant-radio-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  gap: 8px;
  padding: 2px 0;
}

/* Disabled / out-of-stock variant */
.variant-radio-group label.variant-radio-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Hide the native radio input */
.variant-radio-group input[type="radio"] {
  display: none;
}

/* Custom radio circle — unchecked state */
.variant-radio-group .radio-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  box-sizing: border-box;
  font-family: 'proxima-icons';
  font-size: 8px;
  line-height: 1;
}

/* Checkmark icon — using theme icon font, hidden when unchecked */
.variant-radio-group .radio-circle::before {
  content: "\e928";
  color: transparent;
  transition: color 0.15s ease;
}

/* Checked/selected state — matches theme style */
.variant-radio-group input[type="radio"]:checked + .radio-circle {
  border-color: var(--button-bg-color, #ffa300);
  background-color: var(--button-bg-color-090, #ffa300);
}

.variant-radio-group input[type="radio"]:checked + .radio-circle::before {
  color: var(--body-bg-color, #fff);
}

/* Label text */
.variant-radio-group .radio-label-text {
  user-select: none;
}

/* Disabled state for the circle */
.variant-radio-group label.variant-radio-disabled .radio-circle {
  border-color: #ddd;
  background: #f5f5f5;
}