/*
 * Braintree Hosted Fields styling.
 *
 * These styles target the container divs created by the Dart view factory.
 * Braintree's JS SDK auto-applies utility classes to the containers:
 *   .braintree-hosted-fields-focused  – field has keyboard focus
 *   .braintree-hosted-fields-invalid  – field value is invalid
 *   .braintree-hosted-fields-valid    – field value is valid
 */

/* ── Field containers ─────────────────────────────────────── */

.bt-hosted-field {
  height: 44px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus state — matches the app's coral-orange primary */
.bt-hosted-field.braintree-hosted-fields-focused {
  border-color: #FF6B35;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

/* Invalid state — red border for errors */
.bt-hosted-field.braintree-hosted-fields-invalid {
  border-color: #D32F2F;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

/* Valid state — green border for valid input */
.bt-hosted-field.braintree-hosted-fields-valid {
  border-color: #388E3C;
}

/* ── Labels ───────────────────────────────────────────────── */

.bt-label {
  display: block;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #555555;
  margin-bottom: 6px;
}

/* ── Dark mode overrides ──────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  .bt-hosted-field {
    background: #2a2a2a;
    border-color: #555555;
  }

  .bt-hosted-field.braintree-hosted-fields-focused {
    border-color: #FF8F66;
    box-shadow: 0 0 0 3px rgba(255, 143, 102, 0.2);
  }

  .bt-hosted-field.braintree-hosted-fields-invalid {
    border-color: #EF5350;
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.15);
  }

  .bt-hosted-field.braintree-hosted-fields-valid {
    border-color: #66BB6A;
  }

  .bt-label {
    color: #bbbbbb;
  }
}