/* Every value here is measured off the computed styles of a live Stripe element
   running this project's appearance config (theme 'stripe', #1B3726, radius 10px,
   Inter). Change a number and the parity suite fails. */

.sce-root {
  --sce-primary: #1b3726;
  --sce-radius: 10px;
  --sce-font: Inter, -apple-system, "system-ui", sans-serif;
  --sce-focus: rgba(27, 55, 38, 0.25);
  --sce-border: #e6e6e6;
  --sce-text: #30313d;
  --sce-placeholder: #6a7383;
  --sce-danger: #df1b41;

  font-family: var(--sce-font);
  color: var(--sce-text);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* 12px measures from one input's bottom to the next label's top. The error slot is
   not reserved: it collapses while clean and pushes content down, as the live element does. */
.sce-field { margin-bottom: 12px; }
.sce-field:last-child { margin-bottom: 0; }
.sce-row .sce-field { margin-bottom: 0; }
.sce-row { margin-bottom: 12px; }
.sce-row:last-child { margin-bottom: 0; }

.sce-label {
  display: block;
  font-size: 14.88px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--sce-text);
  margin-bottom: 4px;
}

.sce-input-wrap { position: relative; }

.sce-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  font-size: 16px;
  line-height: 1.15;
  font-family: var(--sce-font);
  color: var(--sce-text);
  background: #fff;
  border: 1px solid var(--sce-border);
  border-radius: var(--sce-radius);
  box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 1px 0px, rgba(0, 0, 0, 0.02) 0px 3px 6px 0px;
  outline: none;
  transition: background 0.15s, border 0.15s, box-shadow 0.15s, color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.sce-input::placeholder { color: var(--sce-placeholder); }

.sce-input:focus {
  border-color: var(--sce-primary);
  box-shadow:
    rgba(0, 0, 0, 0.03) 0px 1px 1px 0px,
    rgba(0, 0, 0, 0.02) 0px 3px 6px 0px,
    var(--sce-focus) 0px 0px 0px 3px,
    rgba(0, 0, 0, 0.08) 0px 1px 1px 0px;
}

.sce-input:-webkit-autofill,
.sce-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sce-text);
  box-shadow: 0 0 0 1000px #fff inset,
    rgba(0, 0, 0, 0.03) 0px 1px 1px 0px, rgba(0, 0, 0, 0.02) 0px 3px 6px 0px;
  transition: background-color 9999s ease-out;
}

/* Text is centred by line-height, not padding; the right padding clears the chevron. */
.sce-select {
  padding: 0 28px 0 12px;
  line-height: 42.39px;
  cursor: pointer;
}
/* Toggled by Field, not `:invalid` — that needs `required`, which brings the
   browser's own validation bubble with it. */
.sce-select--placeholder { color: #77787e; }

.sce-select-chevron {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 38.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sce-text);
  /* must stay none: this span covers the select's right 38.8px */
  pointer-events: none;
}
.sce-select-chevron svg { width: 12.8px; height: 12.8px; display: block; }

.sce-row { display: flex; gap: 12px; }
.sce-row .sce-field { flex: 1 1 0; min-width: 0; }

/* 8px, measured off the live element's `p-FieldError` node on all four elements. */
.sce-error {
  margin-top: 8px;
  font-size: 14.88px;
  line-height: 1.15;
  color: var(--sce-danger);
}
.sce-error:empty { display: none; }

/* Invalid: the label stays neutral, as the live element's does. */
.sce-field--invalid .sce-input {
  border-color: var(--sce-danger);
  color: var(--sce-danger);
  box-shadow:
    rgba(0, 0, 0, 0.03) 0px 1px 1px 0px,
    rgba(0, 0, 0, 0.02) 0px 3px 6px 0px,
    var(--sce-danger) 0px 0px 0px 1px;
}
/* Invalid AND focused: the focus ring wins. Measured off the live element — primary
   border, 3px focus ring, and only the input text stays red. */
.sce-field--invalid .sce-input:focus {
  border-color: var(--sce-primary);
  box-shadow:
    rgba(0, 0, 0, 0.03) 0px 1px 1px 0px,
    rgba(0, 0, 0, 0.02) 0px 3px 6px 0px,
    var(--sce-focus) 0px 0px 0px 3px,
    rgba(0, 0, 0, 0.08) 0px 1px 1px 0px;
}