/*!
 * Camerce Popup Campaigns — block styles (front end).
 *
 * Colours are tokens derived from the campaign's own --camerce-popups-text (falling back
 * to currentColor): nothing here assumes a light ground. `.camerce-popups-field*` is also
 * used by camerce-popups-editor.css, where every rule is scoped to `.camerce-popups-editor` and so
 * wins over the bare rules here. Tight formatting: 8 KB raw for this file plus
 * camerce-popups-blocks-editor.css.
 */
.camerce-popups-form,
.camerce-popups-close-wrap,
.camerce-popups-countdown {
	--camerce-popups-ink: var(--camerce-popups-text, currentColor);
	--camerce-popups-soft: color-mix(in srgb, var(--camerce-popups-ink) 68%, transparent);
	--camerce-popups-line: color-mix(in srgb, var(--camerce-popups-ink) 26%, transparent);
	--camerce-popups-tint: color-mix(in srgb, var(--camerce-popups-ink) 7%, transparent);
	--camerce-popups-ok: #1c7c58;
	--camerce-popups-bad: #a9301a;
	color: var(--camerce-popups-ink);
}

.camerce-popups-form { display: flex; flex-direction: column; gap: 12px; margin: 0; text-align: left; }
.camerce-popups-form__fields { display: grid; gap: 12px; }
.camerce-popups-form--inline .camerce-popups-form__fields { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.camerce-popups-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.camerce-popups-field__label { font-size: .8125em; font-weight: 600; line-height: 1.35; }
.camerce-popups-field__label--inline { font-weight: 400; line-height: 1.45; cursor: pointer; }
.camerce-popups-field__required { color: var(--camerce-popups-bad); }
.camerce-popups-field__input {
	appearance: none; box-sizing: border-box; width: 100%; min-height: 44px;
	margin: 0; padding: 10px 14px; background: transparent; color: var(--camerce-popups-ink);
	border: 1px solid var(--camerce-popups-line); border-radius: 8px; font: inherit; line-height: 1.4;
}
.camerce-popups-field__input--area { min-height: 96px; resize: vertical; }
.camerce-popups-field__input::placeholder { color: var(--camerce-popups-soft); opacity: 1; }
.camerce-popups-field__input:focus,
.camerce-popups-field__input:focus-visible {
	border-color: var(--camerce-popups-ink); box-shadow: 0 0 0 3px var(--camerce-popups-line);
	outline: 2px solid transparent; outline-offset: 2px;
}
.camerce-popups-field--checkbox { flex-direction: row; align-items: flex-start; gap: 10px; min-height: 44px; padding: 4px 0; }
.camerce-popups-field__check {
	appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0;
	background: transparent; border: 1px solid var(--camerce-popups-soft); border-radius: 4px; cursor: pointer;
}
.camerce-popups-field__check:checked { background: var(--camerce-popups-ink); box-shadow: inset 0 0 0 3px var(--camerce-popups-bg, transparent); }
.camerce-popups-field__check:focus-visible { outline: 2px solid var(--camerce-popups-ink); outline-offset: 2px; }
.camerce-popups-form__consent,
.camerce-popups-form__noscript { margin: 0; color: var(--camerce-popups-soft); font-size: .75em; line-height: 1.5; }
.camerce-popups-form__actions { display: flex; }
.camerce-popups-form--btn-stretch .camerce-popups-form__submit { width: 100%; }
.camerce-popups-form--btn-left .camerce-popups-form__actions { justify-content: flex-start; }
.camerce-popups-form--btn-center .camerce-popups-form__actions { justify-content: center; }
.camerce-popups-form--btn-right .camerce-popups-form__actions { justify-content: flex-end; }
.camerce-popups-form__submit {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; margin: 0; padding: 11px 22px; cursor: pointer;
	background: var(--camerce-popups-btn-bg, var(--camerce-popups-ink)); color: var(--camerce-popups-btn-fg, var(--camerce-popups-bg, #fff));
	border: 0; border-radius: var(--camerce-popups-btn-radius, 8px);
	font: inherit; font-size: var(--camerce-popups-btn-size, 1em); font-weight: 600; line-height: 1.2;
}
.camerce-popups-form__submit:hover { filter: brightness(.94); }
.camerce-popups-form__submit:focus-visible { outline: 2px solid var(--camerce-popups-ink); outline-offset: 3px; }
.camerce-popups-form__submit[disabled] { opacity: .6; cursor: default; }
/* Hidden without display/visibility, which would defeat the trap. */
.camerce-popups-form__trap,
.camerce-popups-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	border: 0; white-space: nowrap;
}
.camerce-popups-form__message {
	margin: 0; padding: 10px 14px; background: var(--camerce-popups-tint);
	border: 1px solid var(--camerce-popups-line); border-left: 3px solid var(--camerce-popups-soft);
	border-radius: 6px; font-size: .8125em; line-height: 1.5;
}
.camerce-popups-form__message:empty { display: none; }
/*
 * Success and error differed only by the colour of a 3px border, which is a
 * thin signal and the wrong kind: colour alone should never be the only thing
 * separating "sent" from "failed". The mark below carries the state in shape as
 * well, and it does not depend on the campaign's palette -- these messages sit
 * on whatever background the campaign chose, so a fixed red or green text
 * colour cannot be relied on to stay readable.
 */
.camerce-popups-form__message { display: flex; gap: 8px; align-items: baseline; }
.camerce-popups-form__message::before {
	flex: none;
	width: 1.15em; height: 1.15em;
	border-radius: 50%;
	font-size: .85em; font-weight: 700; line-height: 1.15em;
	text-align: center;
}
.camerce-popups-form__message.is-success { border-left-color: var(--camerce-popups-ok); font-weight: 600; }
.camerce-popups-form__message.is-success::before { content: "\2713"; background: var(--camerce-popups-ok); color: #fff; }
.camerce-popups-form__message.is-error { border-left-color: var(--camerce-popups-bad); border-left-width: 4px; font-weight: 600; }
.camerce-popups-form__message.is-error::before { content: "!"; background: var(--camerce-popups-bad); color: #fff; }

.camerce-popups-close-wrap { display: flex; margin: 0; }
.camerce-popups-close-wrap--left { justify-content: flex-start; }
.camerce-popups-close-wrap--center { justify-content: center; }
.camerce-popups-close-wrap--right { justify-content: flex-end; }
.camerce-popups-close {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; margin: 0; padding: 10px 4px; cursor: pointer;
	background: transparent; border: 0; border-radius: 8px; color: var(--camerce-popups-soft);
	font: inherit; font-size: .8125em; line-height: 1.2;
}
.camerce-popups-close:hover { color: var(--camerce-popups-ink); }
.camerce-popups-close:focus-visible { outline: 2px solid var(--camerce-popups-ink); outline-offset: 2px; }
.camerce-popups-close--link { text-decoration: underline; text-underline-offset: 3px; }
.camerce-popups-close--button { padding: 10px 20px; border: 1px solid var(--camerce-popups-soft); color: var(--camerce-popups-ink); font-weight: 600; }
.camerce-popups-close--button:hover { background: var(--camerce-popups-tint); }
.camerce-popups-close--subtle { padding: 10px 12px; font-size: .75em; }

.camerce-popups-countdown { display: flex; justify-content: center; margin: 0; }
.camerce-popups-countdown__clock { display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.camerce-popups-countdown__unit {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	min-width: 3em; padding: 8px 10px; background: var(--camerce-popups-tint);
	border: 1px solid var(--camerce-popups-line); border-radius: 8px;
}
.camerce-popups-countdown__value { font-size: 1.5em; font-weight: 700; line-height: 1; }
.camerce-popups-countdown__label {
	color: var(--camerce-popups-soft); font-size: .625em; font-weight: 600;
	line-height: 1.2; text-transform: uppercase; letter-spacing: .08em;
}
.camerce-popups-countdown--small .camerce-popups-countdown__unit { min-width: 2.6em; padding: 6px 8px; }
.camerce-popups-countdown--small .camerce-popups-countdown__value { font-size: 1.125em; }
.camerce-popups-countdown--large .camerce-popups-countdown__unit { min-width: 3.4em; padding: 12px 14px; }
.camerce-popups-countdown--large .camerce-popups-countdown__value { font-size: 2.25em; }
.camerce-popups-countdown__clock[data-camerce-popups-expired] { color: var(--camerce-popups-soft); font-size: .875em; line-height: 1.5; }
/* `hide` on expiry sets `hidden`; `display: flex` would beat the UA rule. */
.camerce-popups-countdown[hidden] { display: none; }