/* =========================
   State/County field styling
   - Label inside field (like other fields)
   - 60px height
   - Green success state
   ========================= */

/* State field wrapper */
#billing_state_field {
  position: relative;
}

#billing_state_field .select2-container {
  width: 100% !important;
}

#billing_state_field .select2-selection {
  height: 60px !important;
  border: 1px solid #c4c4c4 !important;
  border-radius: 4px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
}

/* Position label inside field like other fields */
#billing_state_field > label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  font-weight: 400;
  color: #8a8a8a;
  pointer-events: none;
  z-index: 2;
  background: transparent;
  padding: 0 4px;
  transition: all 0.15s ease;
}

/* Hide Select2 placeholder by default (label shows instead) */
#billing_state_field .select2-selection__placeholder {
  display: none !important;
}

/* Show placeholder when focused */
#billing_state_field.is-focused .select2-selection__placeholder {
  display: block !important;
}

/* Hide label when focused */
#billing_state_field.is-focused > label {
  display: none;
}

/* Label floated when has value */
#billing_state_field.has-value > label {
  top: 8px;
  transform: translateY(0);
  font-size: 12px;
  font-weight: 400;
  background: #fafff8;
  color: #47b426;
}

/* Green valid state when has value */
#billing_state_field.has-value .select2-selection {
  border: 2px solid #47b426 !important;
  background-color: #fafff8 !important;
}

/* Green checkmark when has value */
#billing_state_field.has-value::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347b426' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Hide dropdown arrow when has value */
#billing_state_field.has-value .select2-selection__arrow {
  display: none !important;
}

/* Style selected value */
#billing_state_field .select2-selection__rendered {
  color: #404040 !important;
  font-size: 18px !important;
  line-height: 60px !important;
  padding-left: 0 !important;
}

/* Push value down when has-value (to make room for floated label) */
#billing_state_field.has-value:not(.is-focused) .select2-selection__rendered {
  line-height: 1.2 !important;
  padding-top: 28px !important;
  padding-bottom: 8px !important;
}

/* Arrow positioning */
#billing_state_field .select2-selection__arrow {
  height: 60px !important;
  right: 12px !important;
}

/* =========================
   Country field styling
   - Simple neutral dropdown
   - 60px height
   - Value centered
   - No success state
   ========================= */

/* Hide label above field */
#billing_country_field > label {
  display: none !important;
}

#billing_country_field .select2-container {
  width: 100% !important;
}

#billing_country_field .select2-selection {
  height: 60px !important;
  border: 1px solid #c4c4c4 !important;
  border-radius: 4px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
}

/* Value centered */
#billing_country_field .select2-selection__rendered {
  color: #404040 !important;
  font-size: 18px !important;
  line-height: 60px !important;
  padding-left: 0 !important;
}

/* Arrow positioning */
#billing_country_field .select2-selection__arrow {
  height: 60px !important;
  right: 12px !important;
}