/* GenerateBlocks Pro forms (waitlist, contact). Markup comes from forms/*.html. */
.qc-form { display: grid; gap: 1.1rem; max-width: 560px; margin: 0; }
.qc-form .gb-form-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.qc-form .gb-form-field-label { font-weight: 600; font-size: .9rem; }
.qc-form .gb-form-field__required { display: none; } /* every field is required; the asterisk is aria-hidden noise */
/* Fields everywhere: same look as the dashboard. Colours come from --qc-field-* so they follow the page theme. */
body :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="file"]), textarea, select):not(#wpadminbar *) {
	width: 100%; box-sizing: border-box; min-height: var(--qc-control-h); padding: .55rem .8rem; font: inherit; color: var(--qc-ink);
	background: var(--qc-field-bg); border: 1px solid var(--qc-field-border); border-radius: var(--qc-field-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05); outline: none; transition: border-color .15s, box-shadow .15s;
}
body :is(input, textarea, select):not(#wpadminbar *)::placeholder { color: var(--qc-ink-2); opacity: 1; }
body :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):not(#wpadminbar *):focus-visible { border-color: var(--qc-field-focus); box-shadow: 0 0 0 3px var(--qc-field-ring); }
body :is(input, textarea, select)[aria-invalid="true"]:not(#wpadminbar *) { border-color: var(--qc-stop); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc-stop) 20%, transparent); }
.qc-form textarea { min-height: 9rem; resize: vertical; }

/* Bands that ignore the page theme: the hero is always dark, the waitlist band is always yellow */
.qc-band { --qc-field-bg: rgba(255, 255, 255, .05); --qc-field-border: rgba(255, 255, 255, .16); --qc-field-focus: #FFD500; --qc-field-ring: rgba(255, 213, 0, .5); --qc-ink: #F5F5F5; --qc-ink-2: #A3A3A3; }
.qc-signal { --qc-field-bg: rgba(255, 255, 255, .55); --qc-field-border: rgba(10, 10, 10, .55); --qc-field-focus: #0A0A0A; --qc-field-ring: rgba(10, 10, 10, .35); --qc-ink: #0A0A0A; --qc-ink-2: #3A3A3A; }

/* the one primary action: yellow octagon (black on the yellow band) */
.qc-form-submit { justify-self: start; box-sizing: border-box; min-height: var(--qc-control-h); padding: 0 1.6rem; font: 700 1rem var(--qc-font-body); cursor: pointer; border: 0; background: var(--qc-signal); color: var(--qc-on-signal);
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.qc-form-submit:focus-visible { outline: 3px solid var(--qc-ink); outline-offset: 3px; }
.qc-final .qc-form-submit { background: #0A0A0A; color: #FFD500; }
.qc-form-submit[disabled] { opacity: .6; cursor: progress; }

/* inline variant: email + button on one row; label stays for screen readers */
.qc-form--inline { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; max-width: none; margin: 1.5rem 0 .5rem; }
.qc-form--inline .gb-form-field { flex: 1 1 260px; max-width: 380px; }
.qc-form--inline .gb-form-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) { .qc-form--inline .gb-form-field, .qc-form--inline .qc-form-submit { flex: 1 1 100%; max-width: none; } }

/* result message: symbol + text on the page's own colours (overrides GB's default green box) */
.qc-form .gb-form-message { flex-basis: 100%; margin: 0; padding: .8rem 1rem; background: transparent; color: inherit; border: 1px solid currentColor; border-left-width: 4px; border-radius: var(--qc-radius); font-weight: 600; }
.qc-form .gb-form-message--success { border-left-color: var(--qc-go); }
.qc-form .gb-form-message--error { border-left-color: var(--qc-stop); }
.qc-form .gb-form-message--success::before { content: "\2713  "; }
.qc-form .gb-form-message--error::before { content: "!  "; font-family: var(--qc-font-mono); }
/* after success the fields give way to the message */
.qc-form:has(.gb-form-message--success) .gb-form-field, .qc-form:has(.gb-form-message--success) .qc-form-submit { display: none; }
@media (prefers-reduced-motion: no-preference) { .qc-form .gb-form-message { animation: qc-rise .3s var(--qc-ease) both; } }
