/* SoCal Ragdolls v1.16.9 — Stripe checkout field polish. */

/* Keep the Stripe payment area visually consistent with the rest of the
   intentionally quiet, one-column checkout. */
body.woocommerce-checkout #payment .payment_method_stripe .payment_box,
body.woocommerce-checkout #payment .payment_method_woocommerce_payments .payment_box {
  margin:14px 0 4px;
  padding:18px 0 0;
  border-top:1px solid #e2e9e9;
  background:transparent;
  color:#44585d;
  box-shadow:none;
}
body.woocommerce-checkout #payment .payment_method_stripe .payment_box::before,
body.woocommerce-checkout #payment .payment_method_woocommerce_payments .payment_box::before {
  display:none;
}

/* Stripe's secure fields live inside iframes, but their host elements should
   have the exact same dimensions and visual shell as our WooCommerce fields. */
body.woocommerce-checkout #payment .wc-payment-form,
body.woocommerce-checkout #payment .wc-upe-form,
body.woocommerce-checkout #payment fieldset#wc-stripe-upe-form {
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
}

body.woocommerce-checkout #payment .wc-stripe-upe-element,
body.woocommerce-checkout #payment .stripe-card-group,
body.woocommerce-checkout #payment .wc-stripe-elements-field,
body.woocommerce-checkout #payment .wc-stripe-iban-element,
body.woocommerce-checkout #payment #stripe-card-element,
body.woocommerce-checkout #payment #stripe-exp-element,
body.woocommerce-checkout #payment #stripe-cvc-element,
body.woocommerce-checkout #payment #wcpay-card-element {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Legacy Stripe Elements: the iframe itself has no theme CSS access, so the
   surrounding secure input receives the same shell as billing/address fields. */
body.woocommerce-checkout #payment .wc-stripe-elements-field,
body.woocommerce-checkout #payment .wc-stripe-iban-element,
body.woocommerce-checkout #payment #stripe-card-element,
body.woocommerce-checkout #payment #stripe-exp-element,
body.woocommerce-checkout #payment #stripe-cvc-element,
body.woocommerce-checkout #payment #wcpay-card-element {
  min-height:49px;
  padding:12px 14px;
  border:1px solid #d7e1e3;
  border-radius:2px;
  background:#fafcfc;
  color:#29424a;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body.woocommerce-checkout #payment .wc-stripe-elements-field.StripeElement--focus,
body.woocommerce-checkout #payment .wc-stripe-iban-element.StripeElement--focus,
body.woocommerce-checkout #payment #stripe-card-element.StripeElement--focus,
body.woocommerce-checkout #payment #stripe-exp-element.StripeElement--focus,
body.woocommerce-checkout #payment #stripe-cvc-element.StripeElement--focus,
body.woocommerce-checkout #payment #wcpay-card-element.is-focused {
  border-color:#6f929c;
  box-shadow:0 0 0 2px rgba(111,146,156,.16);
  background:#fff;
}
body.woocommerce-checkout #payment .wc-stripe-elements-field.StripeElement--invalid,
body.woocommerce-checkout #payment .wc-stripe-iban-element.StripeElement--invalid,
body.woocommerce-checkout #payment #stripe-card-element.StripeElement--invalid,
body.woocommerce-checkout #payment #stripe-exp-element.StripeElement--invalid,
body.woocommerce-checkout #payment #stripe-cvc-element.StripeElement--invalid {
  border-color:#b86b6b;
}

/* Current WooCommerce Stripe UPE reads checkout-field computed styles when it
   builds Stripe's Payment Element appearance. Make the source input styling
   explicit so the secure card-number / expiry / CVC controls inherit the same
   Inter typography, pale background, border and 2px radius. */
body.woocommerce-checkout #payment #wc-stripe-hidden-style-input,
body.woocommerce-checkout #payment .wc-upe-form input.input-text,
body.woocommerce-checkout #payment .wc-payment-form input.input-text {
  min-height:49px!important;
  border:1px solid #d7e1e3!important;
  border-radius:2px!important;
  background:#fafcfc!important;
  padding:12px 14px!important;
  color:#29424a!important;
  font:400 15px/24px var(--sans,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)!important;
  box-shadow:none!important;
}

/* Give the modern Payment Element enough room while leaving its own internal
   secure-field borders to Stripe's appearance engine (avoids a double border). */
body.woocommerce-checkout #payment .wc-stripe-upe-element {
  min-height:49px;
  margin:2px 0 4px;
  background:transparent;
  border:0;
  border-radius:2px;
  overflow:visible;
}
body.woocommerce-checkout #payment .wc-stripe-upe-element iframe,
body.woocommerce-checkout #payment .wc-stripe-elements-field iframe,
body.woocommerce-checkout #payment .wc-stripe-iban-element iframe {
  width:100%!important;
  max-width:100%!important;
}

/* Labels, saved-card controls and Stripe error/help copy should look native to
   the SoCal checkout rather than like a second form embedded inside it. */
body.woocommerce-checkout #payment .payment_method_stripe label,
body.woocommerce-checkout #payment .payment_method_woocommerce_payments label,
body.woocommerce-checkout #payment .wc-payment-form label {
  color:#44585d;
  font-family:var(--sans,Inter,sans-serif);
}
body.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew,
body.woocommerce-checkout #payment .wc-stripe-save-source,
body.woocommerce-checkout #payment .form-row.woocommerce-SavedPaymentMethods-saveNew {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:14px 0 4px!important;
  font-size:13px;
  line-height:1.5;
}
body.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew input,
body.woocommerce-checkout #payment .wc-stripe-save-source input {
  width:16px!important;
  height:16px!important;
  min-height:0!important;
  flex:0 0 16px;
  margin:2px 0 0!important;
}
body.woocommerce-checkout #payment [id*="stripe"][id*="errors"],
body.woocommerce-checkout #payment .stripe-source-errors,
body.woocommerce-checkout #payment .woocommerce_error {
  color:#8d4747;
  font-size:12px;
  line-height:1.55;
}

@media(max-width:600px){
  body.woocommerce-checkout #payment .payment_method_stripe .payment_box,
  body.woocommerce-checkout #payment .payment_method_woocommerce_payments .payment_box{
    padding-top:15px;
  }
}