.cql-wrap { --cql-primary: var(--cq-primary, #123c5a); --cql-accent: var(--cq-accent, #f28c28); --cql-line: #dbe3e8; --cql-soft: #f4f8fa; --cql-danger: #9c2d2d; }
.cql-form { display: grid; gap: 14px; }
.cql-progress { display: flex; gap: 8px; margin: 0 0 8px; }
.cql-progress span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; border: 1px solid var(--cql-line); color: #6a7680; background: #fff; font-size: .78rem; font-weight: 850; }
.cql-progress span.is-active, .cql-progress span.is-done { border-color: var(--cql-primary); background: var(--cql-primary); color: #fff; }
.cql-required-key { margin: -4px 0 0; color: #5a6a76; font-size: .78rem; font-weight: 600; }
.cql-req { color: var(--cql-danger); font-weight: 850; }
.cql-step { display: grid; gap: 12px; }
.cql-step[hidden] { display: none !important; }
.cql-step h3 { margin: 0 0 2px; color: var(--cql-primary); font-size: 1.12rem; }
.cql-step h3:focus { outline: 3px solid rgba(18,60,90,.28); outline-offset: 3px; }
.cql-step label, .cql-step legend { color: #263744; font-size: .83rem; font-weight: 800; }
.cql-step input[type="text"], .cql-step input[type="email"], .cql-step input[type="tel"], .cql-step select, .cql-step textarea { width: 100%; margin-top: 5px; border: 1px solid #cbd7dd; border-radius: 8px; background: #fff; padding: 9px 10px; color: #18232d; font-size: .91rem; font-weight: 500; }
.cql-step input:focus, .cql-step select:focus, .cql-step textarea:focus { outline: 3px solid rgba(18,60,90,.17); border-color: var(--cql-primary); }
.cql-step .cql-invalid { border-color: var(--cql-danger); background: #fffafa; }
.cql-step input[type="checkbox"].cql-invalid { outline: 2px solid var(--cql-danger); outline-offset: 2px; }
.cql-field-error { display: block; margin-top: 4px; color: var(--cql-danger); font-size: .78rem; font-weight: 700; }
.cql-field-error:empty { display: none; }
.cql-step-error { margin: 0; border-radius: 8px; background: #fff0f0; color: var(--cql-danger); padding: 9px 11px; font-size: .82rem; font-weight: 700; }
.cql-step-error:empty { display: none; }
.cql-grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.cql-check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 6px; }
.cql-check-grid label, .cql-consent { font-weight: 600; line-height: 1.35; }
.cql-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; }
.cql-next, .cql-submit, .cql-back { border: 0; border-radius: 999px; padding: 10px 15px; cursor: pointer; font-weight: 850; }
.cql-next, .cql-submit { margin-left: auto; background: var(--cql-accent); color: #1f2933; }
.cql-back { background: #eef3f5; color: var(--cql-primary); }
.cql-alert { margin: 0 0 12px; border-radius: 8px; padding: 10px 12px; font-size: .86rem; }
.cql-success { background: #e9f8ef; color: #17623f; }
.cql-error { background: #fff0f0; color: #9c2d2d; }
.cql-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cql-recaptcha-note { display: none; margin: 0; color: #5a6a76; font-size: .74rem; font-weight: 600; line-height: 1.4; }
/* Narrow layouts: reserve space below the form so its Back/Submit row is clear of the
   fixed controls that sit over the bottom of the viewport. Space is reserved by layout
   only - nothing is painted over or lifted above another plugin's control, so the
   persistent Cookie settings button keeps its own stacking layer and stays clickable.
	The reCAPTCHA badge is hidden only after the frontend confirms that this plugin's
	own reCAPTCHA is active and its replacement Google attribution actually rendered;
	escaped or commented shortcode text therefore leaves every badge visible. */
@media (max-width: 782px) {
	.cql-wrap { padding-bottom: 72px; }
	.cql-recaptcha-note { display: block; }
	body.cql-recaptcha-attribution .grecaptcha-badge { visibility: hidden !important; }
}
@media (max-width: 560px) { .cql-grid-2, .cql-check-grid { grid-template-columns: 1fr; } }