/**
 * Capture: popup and inline form.
 *
 * The four values an operator can change - accent, ink, panel, overlay - are
 * printed as custom properties by the plugin. Everything here is structure, so
 * this file caches and only the handful of colours travel with the page.
 */

.kbmc {
	--kbmc-accent: #3d7023;
	--kbmc-ink: #f6f7f5;
	--kbmc-panel: #0d120e;
	--kbmc-overlay: 0.7;
	--kbmc-radius: 10px;

	font-family: inherit;
	box-sizing: border-box;
}

.kbmc *,
.kbmc *::before,
.kbmc *::after {
	box-sizing: inherit;
}

/* ==========================================================================
   Popup shell
   ========================================================================== */

.kbmc-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	padding: 20px;
}

.kbmc-popup[hidden] {
	display: none;
}

.kbmc-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--kbmc-overlay));
	opacity: 0;
	transition: opacity 0.24s ease;
}

.kbmc-popup.is-open .kbmc-popup__backdrop {
	opacity: 1;
}

.kbmc-popup__panel {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	border-radius: var(--kbmc-radius);
	background-color: var(--kbmc-panel);
	background-size: cover;
	background-position: center;
	color: var(--kbmc-ink);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

	/* Opens from slightly under and slightly small - enough to read as an
	   arrival without the bounce that makes a popup feel like an advert. */
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.24s ease, transform 0.24s ease;
}

.kbmc-popup.is-open .kbmc-popup__panel {
	opacity: 1;
	transform: none;
}

/* Placement. Centred by default; the corner variants sit out of the way of
   the content for a less interruptive ask. */
.kbmc-popup--center {
	align-items: center;
	justify-content: center;
}

.kbmc-popup--bottom-right {
	align-items: flex-end;
	justify-content: flex-end;
}

.kbmc-popup--bottom-left {
	align-items: flex-end;
	justify-content: flex-start;
}

.kbmc-popup--bottom-right .kbmc-popup__panel,
.kbmc-popup--bottom-left .kbmc-popup__panel {
	max-width: 380px;
}

/* The image sits behind the copy, so the copy needs its own ground to stay
   readable whatever the picture is doing underneath. */
.kbmc-popup.has-image .kbmc-popup__body {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.78) 55%,
		rgba(0, 0, 0, 0.9) 100%
	);
	border-radius: var(--kbmc-radius);
}

.kbmc-popup.has-image .kbmc-popup__panel {
	min-height: 380px;
	display: flex;
	align-items: flex-end;
}

.kbmc-popup__body {
	padding: 32px 28px 28px;
	width: 100%;
}

.kbmc-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: var(--kbmc-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.kbmc-popup__close:hover,
.kbmc-popup__close:focus-visible {
	background: rgba(0, 0, 0, 0.7);
}

.kbmc-popup__heading {
	margin: 0 0 10px;
	font-size: 1.55rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--kbmc-ink);
	text-wrap: balance;
}

.kbmc-popup__message {
	margin: 0 0 18px;
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.88;
}

/* ==========================================================================
   The reward
   ========================================================================== */

.kbmc-popup__reward {
	margin-top: 16px;
	padding: 14px;
	border: 1px dashed var(--kbmc-accent);
	border-radius: 8px;
	text-align: center;
}

.kbmc-popup__reward[hidden] {
	display: none;
}

.kbmc-popup__code {
	margin: 0;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--kbmc-accent);

	/* The one thing on the page someone will want to copy. */
	user-select: all;
}

.kbmc-popup__code-note {
	margin: 6px 0 0;
	font-size: 0.8rem;
	opacity: 0.75;
}

/* ==========================================================================
   Form
   ========================================================================== */

.kbmc-form__heading {
	margin: 0 0 8px;
	font-size: 1.1rem;
	line-height: 1.25;
}

.kbmc-form__message {
	margin: 0 0 12px;
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.85;
}

.kbmc-form__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.kbmc-form__row[hidden] {
	display: none;
}

.kbmc-form__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	color: inherit;
	font: inherit;
	font-size: 0.95rem;
}

.kbmc-form__input::placeholder {
	color: currentColor;
	opacity: 0.5;
}

.kbmc-form__input:focus {
	outline: 2px solid var(--kbmc-accent);
	outline-offset: 1px;
	background: rgba(255, 255, 255, 0.16);
}

.kbmc-form__submit {
	flex: 0 0 auto;
	padding: 11px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--kbmc-accent);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 650;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.kbmc-form__submit:hover:not(:disabled) {
	filter: brightness(1.14);
}

.kbmc-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.kbmc-form.is-busy .kbmc-form__submit {
	cursor: progress;
}

.kbmc-form__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 12px;
	font-size: 0.8rem;
	line-height: 1.45;
	opacity: 0.85;
	cursor: pointer;
}

.kbmc-form__consent[hidden] {
	display: none;
}

.kbmc-form__consent input {
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--kbmc-accent);
}

.kbmc-form__feedback {
	margin: 12px 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
	min-height: 0;
}

.kbmc-form__feedback:empty {
	margin: 0;
}

.kbmc-form__feedback.is-error {
	color: #ff9a8a;
}

.kbmc-form__feedback.is-success {
	color: var(--kbmc-accent);
	font-weight: 600;
}

/* The honeypot. Off-canvas rather than display:none, so a form filler that
   skips hidden inputs still walks into it. */
.kbmc-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Inline: widget, block and shortcode
   ========================================================================== */

.kbmc-inline {
	padding: 18px;
	border-radius: var(--kbmc-radius);
	background: var(--kbmc-panel);
	color: var(--kbmc-ink);
}

.kbmc-form--inline .kbmc-form__row {
	flex-wrap: wrap;
}

.kbmc-form--inline .kbmc-form__input {
	flex: 1 1 11rem;
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */

@media (max-width: 520px) {
	.kbmc-popup {
		padding: 12px;
	}

	.kbmc-popup__panel,
	.kbmc-popup--bottom-right .kbmc-popup__panel,
	.kbmc-popup--bottom-left .kbmc-popup__panel {
		max-width: none;
	}

	.kbmc-popup__body {
		padding: 26px 18px 20px;
	}

	.kbmc-popup__heading {
		font-size: 1.3rem;
	}

	/* Stacked, because a field and a button side by side on a phone leaves
	   the field too narrow to see what was typed. */
	.kbmc-form__row {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kbmc-popup__panel,
	.kbmc-popup__backdrop {
		transition: none;
	}
}