/* popup-form.css — PopupForm runtime styles (assets/plugins/PopupForm).
 * Scoped to .pf-form / .popup-form; light/dark neutral (system colors with a
 * translucent surface) so it sits fine in any theme until a theme overrides
 * it. The honeypot row is also hidden here (inline style is the fallback). */

.popup-form { margin: 1.5rem 0; }
.pf-form { display: grid; gap: .9rem; max-width: 40rem; }
.pf-field { display: grid; gap: .3rem; }

.pf-form label { font-weight: 600; font-size: .95em; }
.pf-req { color: #e05252; }

.pf-form input[type="text"],
.pf-form input[type="email"],
.pf-form input[type="tel"],
.pf-form input[type="url"],
.pf-form select,
.pf-form textarea {
  font: inherit;
  color: inherit;
  background: color-mix(in srgb, Canvas 92%, transparent);
  border: 1px solid color-mix(in srgb, CanvasText 35%, transparent);
  border-radius: 6px;
  padding: .5rem .65rem;
  width: 100%;
  box-sizing: border-box;
}
.pf-form textarea { resize: vertical; min-height: 8rem; }
.pf-form :focus-visible { outline: 2px solid #22d3ee; outline-offset: 1px; }

/* Inline field errors + invalid state (server- or client-rendered). */
.pf-err { margin: 0; color: #e05252; font-size: .85em; }
.pf-invalid input, .pf-invalid select, .pf-invalid textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #e05252;
}

/* Radio pair (mailing list) + checkbox rows. */
.pf-radios, .pf-list { border: 1px dashed color-mix(in srgb, CanvasText 25%, transparent);
  border-radius: 6px; padding: .6rem .8rem; display: grid; gap: .35rem; }
.pf-radios legend, .pf-list legend { font-weight: 600; font-size: .9em; padding: 0 .3rem; }
.pf-radio, .pf-check { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.pf-radio input, .pf-check input { accent-color: #22d3ee; }

.pf-submit { justify-self: start; font: inherit; font-weight: 600; cursor: pointer;
  color: #08131a; background: #22d3ee; border: 0; border-radius: 6px;
  padding: .55rem 1.4rem; }
.pf-submit:hover { background: #4ee0f5; }
.pf-submit:disabled { opacity: .55; cursor: default; }

/* Banners + in-place success block (fetch path). */
.pf-banner, .pf-ok { padding: .8rem 1rem; border-radius: 6px; font-size: .95em; }
.pf-banner-success, .pf-ok { background: #123326; border: 1px solid #2e7d5b; color: #9ff0c8; }
.pf-banner-error { background: #3a1418; border: 1px solid #7d2e3a; color: #f0a2b0; }
.pf-ok { max-width: 40rem; }