/* Secure refill-request form. */
.refill-form { max-width: var(--container-narrow); margin: var(--space-8) auto 0; padding: var(--space-8); color: var(--ink-invert); background-color: var(--surface-green); border-radius: var(--radius-lg); }
.refill-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.refill-form__field { display: grid; gap: var(--space-2); }
.refill-form__field + .refill-form__field, .refill-form__row + .refill-form__row, .refill-form__row + .refill-form__field { margin-top: var(--space-5); }
.refill-form label { font-size: var(--text-sm); font-weight: var(--fw-bold); }
.refill-form label span { color: var(--highlight); }
.refill-form input, .refill-form textarea { width: 100%; padding: var(--space-3) var(--space-4); font: inherit; color: var(--ink); background-color: var(--panel); border: 1.5px solid transparent; border-radius: var(--radius-sm); }
.refill-form textarea { resize: vertical; }
.refill-form input:focus-visible, .refill-form textarea:focus-visible { border-color: var(--highlight); outline: 2px solid var(--highlight); outline-offset: 2px; }
.refill-form input[aria-invalid="true"] { border-color: var(--accent); }
.refill-form__actions { margin-top: var(--space-6); text-align: center; }
.refill-form__actions .btn[disabled] { opacity: 0.65; cursor: wait; }
.refill-form__actions p { max-width: var(--measure); margin: var(--space-4) auto 0; font-size: var(--text-xs); color: var(--ink-invert-soft); }
.refill-form__actions a { color: var(--highlight); }
.refill-form__demo-note { font-weight: var(--fw-bold); color: var(--highlight); }
.refill-form__status { margin-top: var(--space-5); padding: var(--space-4); font-weight: var(--fw-bold); text-align: center; color: var(--ink); background-color: var(--surface-yellow); border-radius: var(--radius-sm); }
.refill-form__status[data-state="error"] { color: var(--ink-invert); background-color: var(--accent-dark); }

@media (max-width: 560px) {
  .refill-form { padding: var(--space-6); }
  .refill-form__row { grid-template-columns: 1fr; }
  .refill-form__field + .refill-form__field { margin-top: var(--space-5); }
  .refill-form__row + .refill-form__row { margin-top: var(--space-5); }
  .refill-form__actions .btn { width: 100%; }
}