/* ═══════════════════════════════════════════
   J&T CHECKOUT — Clean White Theme
   steadfastclo.ph
═══════════════════════════════════════════ */

/* Import clean font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Base Reset ── */
.woocommerce-checkout,
.woocommerce-checkout * {
  font-family: 'DM Sans', sans-serif !important;
  box-sizing: border-box;
}

/* ── Page Layout ── */
.woocommerce-checkout #customer_details {
  background: #fff;
}

/* ── Section Headers ── */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #999 !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* ── Form Row ── */
.woocommerce-checkout .form-row {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

/* ── Labels ── */
.woocommerce-checkout label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.woocommerce-checkout label .required {
  color: #e53935 !important;
  font-size: 14px !important;
}

/* ── Inputs & Selects ── */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  background: #fff !important;
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 10px !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

.woocommerce-checkout textarea {
  height: 80px !important;
  padding: 12px 16px !important;
  resize: vertical !important;
}

/* Focus state */
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 3px rgba(26,26,26,0.06) !important;
}

/* Error state */
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,0.08) !important;
}

/* Select arrow */
.woocommerce-checkout select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

/* Disabled select */
.woocommerce-checkout select:disabled {
  background-color: #f9f9f9 !important;
  color: #bbb !important;
  cursor: not-allowed !important;
}

/* Loading spinner on select */
.jnt-loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23e0e0e0' stroke-width='2' fill='none'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}

/* ── Place Order Button ── */
.woocommerce-checkout #place_order,
.woocommerce-checkout button[type="submit"].checkout-button {
  width: 100% !important;
  height: 52px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
}

.woocommerce-checkout #place_order:hover {
  background: #333 !important;
  transform: translateY(-1px) !important;
}

.woocommerce-checkout #place_order:active {
  transform: translateY(0) !important;
}

/* ── Order Review ── */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1.5px solid #f0f0f0 !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 14px 18px !important;
  font-size: 13px !important;
  border-color: #f0f0f0 !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child td {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}

/* ── Notices ── */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
  border-left: 3px solid currentColor !important;
}

/* ── JNT-specific field labels ── */
.jnt-province-field label::before,
.jnt-city-field label::before,
.jnt-barangay-field label::before {
  content: '';
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
  }
}

/* ── Force-hide any remaining default WC fields that conflict ── */
#billing_state_field,
#billing_postcode_field,
#billing_country_field,
#billing_address_2_field,
#billing_company_field,
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #billing_city_field { /* default WC city text box */
  display: none !important;
}

/* Hide CartFlows duplicate city/state if present */
.cf-checkout-form #billing_city_field,
.cf-checkout-form #billing_state_field {
  display: none !important;
}

/* ── Clean up form spacing ── */
.woocommerce-billing-fields .form-row {
  clear: both;
}

/* Hide the original Barangay/District text input field */
#billing_barangay_field input[type="text"],
.woocommerce-checkout #billing_barangay_field > input,
input#billing_barangay[type="text"] {
  display: none !important;
}

/* Also hide any CartFlows original barangay text field */
#billing_barangay_district_field,
input[name="billing_barangay_district"] {
  display: none !important;
}

/* ── FINAL: Aggressively hide all barangay text input variants ── */
#billing_barangay_district_field,
#billing_barangay_text_field,
[id$="barangay_district_field"],
[id$="barangay_text_field"],
.form-row:has(input[name*="barangay_district"]),
.form-row:has(input[name*="barangay_text"]) {
  display: none !important;
}