/* Blink Payment Form Enhancements */

/* Default state - neutral styling for unvalidated fields */
.blink-form__input--card-number,
.blink-form__input--card-expiry,
.blink-form__input--card-cvv,
.blink-form__input--customer-name,
.blink-form__input--customer-email,
.blink-form__input--customer-address,
.blink-form__input--customer-postcode {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blink-form__input--card-number.error,
.blink-form__input--card-number[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626 !important;
}

.blink-form__input--card-number.valid {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 1px #16a34a !important;
}

.blink-form__input--card-cvv.error,
.blink-form__input--card-cvv[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626 !important;
}

.blink-form__input--card-cvv.valid {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 1px #16a34a !important;
}

.blink-form__input--card-expiry.error,
.blink-form__input--card-expiry[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626 !important;
}

.blink-form__input--card-expiry.valid {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 1px #16a34a !important;
}

/* Customer field validation styling */
.blink-form__input--customer-name,
.blink-form__input--customer-email,
.blink-form__input--customer-address,
.blink-form__input--customer-postcode {
  transition: border-color 0.2s ease;
}

.blink-form__input--customer-name.error,
.blink-form__input--customer-email.error,
.blink-form__input--customer-address.error,
.blink-form__input--customer-postcode.error,
.blink-form__input--customer-name[aria-invalid="true"],
.blink-form__input--customer-email[aria-invalid="true"],
.blink-form__input--customer-address[aria-invalid="true"],
.blink-form__input--customer-postcode[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626 !important;
}

.blink-form__input--customer-name.valid,
.blink-form__input--customer-email.valid,
.blink-form__input--customer-address.valid,
.blink-form__input--customer-postcode.valid {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 1px #16a34a !important;
}

.validation-message,
.expiry-validation-message,
.card-number-validation-message,
.cvv-validation-message,
.name-on-card-validation-message,
.email-validation-message,
.address-validation-message,
.postcode-validation-message {
  font-size: 0.875rem;
  color: #dc2626;
  display: none;
  line-height: 1.4;
  padding-left: 1.5rem;
}

.validation-message.show,
.expiry-validation-message.show,
.card-number-validation-message.show,
.cvv-validation-message.show,
.name-on-card-validation-message.show,
.email-validation-message.show,
.address-validation-message.show,
.postcode-validation-message.show {
  display: block;
}

/* Enhanced focus styling for all Blink fields */
.blink-form__input--card-number:focus,
.blink-form__input--card-expiry:focus,
.blink-form__input--card-cvv:focus,
.blink-form__input--customer-name:focus,
.blink-form__input--customer-email:focus,
.blink-form__input--customer-address:focus,
.blink-form__input--customer-postcode:focus {
  outline: none;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.blink-payment-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  color: #6b7280;
}

.blink-payment-loading::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 0.5rem;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.blink-payment-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

.blink-payment-success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.cards_icons {
  display: none;
}

/* Blink Hosted Field Custom Overrides - Moved from JavaScript for better reliability */
#blink-payment-element .hostedfield-wrapper {
  background: #fff !important;
  width: 100% !important;
  font-family: "Outfit", sans-serif !important;
  box-shadow: none !important;
  border-radius: 3.35544e+07px !important;
  border: 1px solid #e5e7eb !important;
  padding: 10px 24px !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

#blink-payment-element .hostedfield-wrapper.hf-focus {
  border-color: #2563eb !important;
  box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 3px !important;
  background: #f8fafc !important;
}

#blink-payment-element .hostedfield-wrapper.hf-user-invalid {
  border-color: #dc2626 !important;
  box-shadow: rgb(220, 38, 38) 0px 0px 0px 1px !important;
}

#blink-payment-element .hostedfield-wrapper.hf-valid {
  border-color: #16a34a !important;
  box-shadow: rgb(22, 163, 74) 0px 0px 0px 1px !important;
}

#blink-payment-element .blink-hf-label {
  display: block !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 4px !important;
  color: #334155 !important;
  font-family: "Outfit", sans-serif !important;
}

#blink-payment-element .cards_icons img {
  height: 24px !important;
  opacity: 0.55 !important;
  filter: grayscale(1) !important;
  transition: opacity 0.2s, filter 0.2s !important;
}

#blink-payment-element .cards_icons img.active {
  opacity: 1 !important;
  filter: none !important;
}

#blink-payment-element .hostedfield-wrapper.hf-invalid .blink-hf-hint {
  opacity: 1 !important;
}

#blink-payment-element .hostedfield-wrapper input {
  color: #000F50 !important;
  font-weight: bold !important;
}

#blink-payment-element .blink-hf-hint {
  font-size: 11px !important;
  margin-top: 4px !important;
  color: #64748b !important;
  opacity: 0.85 !important;
  font-family: "Outfit", sans-serif !important;
}

/* Apply font to any plain inputs that may appear */
#blink-payment-element .hostedfield-wrapper input,
#blink-payment-element .hostedfield-wrapper .hostedfield-input,
#blink-payment-element .hostedfield-wrapper .hostedfield-element,
#blink-payment-element .hostedfield input,
#blink-payment-element input.hostedfield,
#blink-payment-element input.card-number,
#blink-payment-element .hostedfield {
  font-family: "Outfit", sans-serif !important;
}