/*
 * Khoshzogh CRM frontend form - self-contained, no framework dependency.
 *
 * Everything here is scoped to the `.khcrm-form-shell` wrapper that
 * Frontend\FormRenderer prints around the form (and that form.js reuses for
 * the result popup), and the whole file follows three rules so that a theme
 * cannot reshape the form and the form cannot leak styling onto the page:
 *
 *  1. NOTHING is selected by tag name. A theme's `.entry-content input`
 *     (0,1,1) beats a bare `input` (0,0,1) every time, so every element the
 *     plugin styles carries its own `khcrm-` class and is targeted through
 *     that class only.
 *
 *  2. The scope class is DOUBLED in every selector - `.khcrm-form-shell
 *     .khcrm-form-shell .khcrm-form-control` scores (0,3,0), which outranks
 *     the two- and three-selector chains themes realistically write for
 *     form controls, without resorting to `!important` on every line.
 *
 *  3. A scoped `all: revert` reset drops every author declaration the theme
 *     made about anything inside the wrapper, back to browser defaults,
 *     before the plugin styles it. `all` deliberately does not touch custom
 *     properties, so the palette below (and the inline override
 *     Frontend\Assets prints per Settings -> Form Appearance) survives the
 *     reset intact.
 *
 * The visible surfaces - control and button backgrounds, borders, radii,
 * text colors - additionally carry `!important`. Specificity is no defence
 * against a theme that writes `!important` itself, which the ones bundled
 * with Persian landing-page templates routinely do on buttons, and a
 * plugin form wearing the theme's button color is exactly the bug this file
 * exists to prevent. It costs nothing in flexibility because every one of
 * those declarations reads its value from a custom property: setting
 * `--khcrm-f-primary` (which Settings -> Form Appearance does for you) still
 * repaints the form, `!important` and all. That - not out-styling the
 * stylesheet - is the supported way to customise it.
 *
 * Two things arrive as `data-` attributes on the wrapper instead of custom
 * properties: `data-khcrm-field` (outline / filled / underline / soft) and
 * `data-khcrm-shadow` (none / soft / lifted). Those are not values, they are
 * different sets of declarations, and an attribute is how CSS switches
 * between rule sets.
 */

/* ------------------------------------------------------------------ */
/* Palette. Custom properties only - anything else declared here would  */
/* be wiped by the reset below, which is more specific.                 */
/* Frontend\Assets overrides these inline per Settings -> Form          */
/* Appearance (khcrm_settings.form_style); this block is the fallback   */
/* if that override is ever missing, and matches the "modern" template. */
/* ------------------------------------------------------------------ */
.khcrm-form-shell {
	--khcrm-f-primary: #4f46e5;
	--khcrm-f-button-text: #ffffff;
	--khcrm-f-bg: #ffffff;
	--khcrm-f-text: #111827;
	--khcrm-f-border: #dcdfe6;
	--khcrm-f-radius: 14px;
	--khcrm-f-error: #dc2626;
	--khcrm-f-success: #16a34a;

	/* Full width of whatever column or row the shortcode was dropped in.
	   A site that wants the old narrow form sets this one property. */
	--khcrm-f-max-width: 100%;

	/* Derived tints. color-mix keeps a template down to six colours
	   instead of fifteen; the plain fallback on the line above each one
	   is what pre-2023 browsers land on.
	   The filled-field tints mix the TEXT colour into the background, not
	   the accent: text and background are guaranteed to contrast, so the
	   step is always visible and never muddy. Mixing an amber accent into
	   a near-black panel, by contrast, produces brown. */
	--khcrm-f-tint: rgba(128, 128, 128, .06);
	--khcrm-f-tint: color-mix(in srgb, var(--khcrm-f-text) 5%, var(--khcrm-f-bg));
	--khcrm-f-tint-strong: rgba(128, 128, 128, .1);
	--khcrm-f-tint-strong: color-mix(in srgb, var(--khcrm-f-text) 9%, var(--khcrm-f-bg));
	--khcrm-f-ring: rgba(79, 70, 229, .18);
	--khcrm-f-ring: color-mix(in srgb, var(--khcrm-f-primary) 22%, transparent);
	--khcrm-f-shadow-tone: rgba(17, 24, 39, .16);
	--khcrm-f-shadow-tone: color-mix(in srgb, var(--khcrm-f-primary) 26%, transparent);

	/* Vazirmatn ships with the plugin (assets/fonts). A site that sets
	   --khcrm-font wins; the theme's own face no longer leaks in, because
	   the reset below cuts that inheritance off at the wrapper. */
	--khcrm-f-font: var(--khcrm-font, 'KhoshzoghCRM-Vazirmatn', 'Segoe UI', Tahoma, sans-serif);

	/* One easing curve for the whole form, and one slightly springy one
	   for anything that appears. Consistency in motion is what makes it
	   read as designed rather than as several effects. */
	--khcrm-f-ease: cubic-bezier(.22, .61, .36, 1);
	--khcrm-f-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ------------------------------------------------------------------ */
/* The isolation boundary                                              */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell,
.khcrm-form-shell.khcrm-form-shell *,
.khcrm-form-shell.khcrm-form-shell *::before,
.khcrm-form-shell.khcrm-form-shell *::after {
	all: revert;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */
/* The wrapper is a plain `<div>`, so a theme rule as broad as
   `.entry-content div { margin: 40px 0 !important; border: 1px dotted }`
   lands squarely on it - hence the box properties here are defended too,
   not just the palette. */
.khcrm-form-shell.khcrm-form-shell.khcrm-form-shell {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: var(--khcrm-f-max-width) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	box-sizing: border-box;
	font-family: var(--khcrm-f-font) !important;
	font-size: 15px;
	line-height: 1.7;
	color: var(--khcrm-f-text);
	text-align: start;
	-webkit-font-smoothing: antialiased;
}

/* box-sizing and the font are re-established for every descendant: the
   reset put them back to browser defaults, and a form rendered in two
   different faces looks broken. `font-family: inherit !important` is the
   counter to the `* { font-family: … !important }` line that display-font
   themes like to ship. */
.khcrm-form-shell.khcrm-form-shell * {
	box-sizing: border-box !important;
	font-family: inherit !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-frontend-form {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-field {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px;
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-label {
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.7;
	color: var(--khcrm-f-text) !important;
	background: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: color .2s var(--khcrm-f-ease);
}

/* The label tracks its own field's focus, which is what makes the form
   feel responsive rather than merely animated. */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-field:focus-within .khcrm-form-label {
	color: var(--khcrm-f-primary) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-required {
	display: inline !important;
	padding: 0 !important;
	background: none !important;
	color: var(--khcrm-f-error) !important;
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Controls                                                            */
/* ------------------------------------------------------------------ */
/*
 * One class for every control - text, number, date, email, url, tel,
 * select and textarea all carry `.khcrm-form-control` (README §20 custom
 * fields included), so a site's custom "متراژ" field can never be the one
 * box on the form wearing browser defaults. The shared 52px height is what
 * makes a text box, a dropdown and a date picker read as one set.
 */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-wrap {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 52px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 13px 16px !important;
	border: 1.5px solid var(--khcrm-f-border) !important;
	border-radius: var(--khcrm-f-radius) !important;
	background-color: var(--khcrm-f-bg) !important;
	background-image: none !important;
	color: var(--khcrm-f-text) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition:
		border-color .2s var(--khcrm-f-ease),
		background-color .2s var(--khcrm-f-ease),
		box-shadow .25s var(--khcrm-f-ease),
		transform .2s var(--khcrm-f-ease);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control::placeholder {
	color: var(--khcrm-f-text) !important;
	opacity: .42;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control:hover:not(:focus) {
	border-color: var(--khcrm-f-primary) !important;
}

/* The focus ring is a box-shadow rather than an outline so it can be
   animated and can follow the corner radius. */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-control:focus {
	outline: none !important;
	border-color: var(--khcrm-f-primary) !important;
	box-shadow: 0 0 0 4px var(--khcrm-f-ring) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-textarea {
	min-height: 120px !important;
	resize: vertical;
}

/* ------------------------------------------------------------------ */
/* Select: its own chevron, so it matches the text fields instead of    */
/* wearing whatever arrow the operating system draws.                   */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-select {
	padding-inline-end: 44px !important;
	cursor: pointer;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-select[multiple] {
	padding: 8px !important;
	min-height: 120px !important;
	background-image: none !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-wrap::after {
	content: '';
	position: absolute;
	inset-inline-end: 17px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	/* Physical sides, not logical: a chevron points DOWN in both reading
	   directions, and `border-inline-end` would mirror it to the side in
	   RTL. */
	border-right: 2px solid var(--khcrm-f-text);
	border-bottom: 2px solid var(--khcrm-f-text);
	transform: rotate(45deg);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--khcrm-f-ease), transform .25s var(--khcrm-f-ease);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-wrap:has( .khcrm-form-control-select:not([multiple]) )::after {
	opacity: .55;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-wrap:has( .khcrm-form-control-select:focus )::after {
	opacity: 1;
	transform: rotate(225deg) translate(-3px, -3px);
	border-color: var(--khcrm-f-primary);
}

/* Chrome and Safari draw their own calendar button on a date input; tinting
   it is the only way to keep that one field from being the odd one out. */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-control::-webkit-calendar-picker-indicator {
	opacity: .5;
	cursor: pointer;
	transition: opacity .2s var(--khcrm-f-ease);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control:hover::-webkit-calendar-picker-indicator {
	opacity: .9;
}

/* ------------------------------------------------------------------ */
/* Checkbox: a real box drawn by the plugin, on the same palette and    */
/* the same radius family as every other control.                       */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-check {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-check .khcrm-form-label {
	cursor: pointer;
	font-weight: 500 !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-checkbox {
	position: relative !important;
	display: inline-block !important;
	flex: 0 0 auto !important;
	width: 24px !important;
	height: 24px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1.5px solid var(--khcrm-f-border) !important;
	border-radius: max(6px, calc(var(--khcrm-f-radius) / 2.2)) !important;
	background-color: var(--khcrm-f-bg) !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 15px 15px !important;
	cursor: pointer;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition:
		background-color .18s var(--khcrm-f-ease),
		border-color .18s var(--khcrm-f-ease),
		box-shadow .22s var(--khcrm-f-ease),
		transform .18s var(--khcrm-f-spring);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-checkbox:hover {
	border-color: var(--khcrm-f-primary) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-checkbox:active {
	transform: scale(.9);
}

/* The tick is a background image rather than a pseudo-element: pseudo
   elements on replaced elements are not something every engine agrees on,
   and a checkbox that silently never shows its check is a submitted form
   the visitor did not intend. */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-checkbox:checked {
	border-color: var(--khcrm-f-primary) !important;
	background-color: var(--khcrm-f-primary) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-control-checkbox:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 4px var(--khcrm-f-ring) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-help {
	display: block !important;
	margin: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.7;
	opacity: .68;
	color: var(--khcrm-f-text) !important;
}

/* ------------------------------------------------------------------ */
/* Field-shape variants (data-khcrm-field)                             */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="filled"] .khcrm-form-control {
	border-color: transparent !important;
	background-color: var(--khcrm-f-tint-strong) !important;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="filled"] .khcrm-form-control:focus {
	border-color: var(--khcrm-f-primary) !important;
	background-color: var(--khcrm-f-bg) !important;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="soft"] .khcrm-form-control {
	background-color: var(--khcrm-f-tint) !important;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="soft"] .khcrm-form-control:focus {
	background-color: var(--khcrm-f-bg) !important;
}

/* Underline: only a baseline, and it grows into the accent colour on
   focus. `border-radius: 0` on the corners that no longer have a side. */
.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="underline"] .khcrm-form-control {
	border-width: 0 0 2px !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	padding-inline: 2px !important;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="underline"] .khcrm-form-control:focus {
	box-shadow: 0 2px 0 0 var(--khcrm-f-primary) !important;
	background-color: transparent !important;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="underline"] .khcrm-form-control-select {
	padding-inline-end: 30px !important;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="underline"] .khcrm-form-control-wrap::after {
	inset-inline-end: 4px;
}

/* ------------------------------------------------------------------ */
/* Submit                                                              */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	float: none !important;
	width: 100% !important;
	min-height: 54px !important;
	height: auto !important;
	margin: 4px 0 0 !important;
	padding: 14px 24px !important;
	overflow: hidden !important;
	border: none !important;
	border-radius: var(--khcrm-f-radius) !important;
	background-color: var(--khcrm-f-primary) !important;
	background-image: none !important;
	color: var(--khcrm-f-button-text) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	box-shadow: 0 6px 16px -8px var(--khcrm-f-shadow-tone) !important;
	cursor: pointer;
	transition:
		transform .18s var(--khcrm-f-ease),
		box-shadow .25s var(--khcrm-f-ease),
		filter .2s var(--khcrm-f-ease);
}

/* A sheen that sweeps across on hover. `transform` only, so it costs one
   compositor layer and no layout. */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
	transform: translateX(-120%);
	pointer-events: none;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit:hover:not(:disabled)::before {
	animation: khcrm-sheen .75s var(--khcrm-f-ease);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -12px var(--khcrm-f-shadow-tone) !important;
	filter: brightness(1.06);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit:active:not(:disabled) {
	transform: translateY(0) scale(.985);
	box-shadow: 0 4px 10px -6px var(--khcrm-f-shadow-tone) !important;
	filter: brightness(.96);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 4px var(--khcrm-f-ring), 0 6px 16px -8px var(--khcrm-f-shadow-tone) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit:disabled {
	cursor: not-allowed;
	filter: saturate(.85);
	opacity: .75;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit-label {
	display: inline-block !important;
	transition: opacity .2s var(--khcrm-f-ease);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-spinner {
	display: none !important;
	width: 19px !important;
	height: 19px !important;
	border: 2.5px solid currentColor !important;
	border-top-color: transparent !important;
	border-radius: 50% !important;
	animation: khcrm-spin .7s linear infinite;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-frontend-form[data-submitting="1"] .khcrm-form-spinner {
	display: inline-block !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-frontend-form[data-submitting="1"] .khcrm-form-submit-label {
	opacity: .75;
}

/* ------------------------------------------------------------------ */
/* Validation state                                                    */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-field-invalid .khcrm-form-control {
	border-color: var(--khcrm-f-error) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-field-invalid .khcrm-form-label {
	color: var(--khcrm-f-error) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-field-invalid .khcrm-form-control-wrap,
.khcrm-form-shell.khcrm-form-shell .khcrm-form-field-invalid .khcrm-form-check {
	animation: khcrm-shake .4s var(--khcrm-f-ease);
}

/* The result now arrives in the popup; this stays as the live region a
   screen reader reads, which is why it is hidden rather than removed. */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-status {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* ------------------------------------------------------------------ */
/* Honeypot - off-screen rather than display:none, which some bots skip */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell .khcrm-hp-wrap {
	position: absolute !important;
	inset-inline-start: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Card shape (data-khcrm-shadow)                                      */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell[data-khcrm-shadow="soft"] .khcrm-frontend-form,
.khcrm-form-shell.khcrm-form-shell[data-khcrm-shadow="lifted"] .khcrm-frontend-form {
	padding: 26px !important;
	border-radius: calc(var(--khcrm-f-radius) + 8px) !important;
	background-color: var(--khcrm-f-bg) !important;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-shadow="soft"] .khcrm-frontend-form {
	box-shadow: 0 2px 10px -4px rgba(16, 24, 40, .1), 0 10px 30px -18px rgba(16, 24, 40, .35) !important;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-shadow="lifted"] .khcrm-frontend-form {
	box-shadow: 0 4px 14px -6px rgba(16, 24, 40, .12), 0 26px 50px -28px var(--khcrm-f-shadow-tone) !important;
}

/* A filled field on a card of the same colour is invisible, so on a card
   the fields step one tint further away from it. */
.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="filled"][data-khcrm-shadow="soft"] .khcrm-form-control,
.khcrm-form-shell.khcrm-form-shell[data-khcrm-field="filled"][data-khcrm-shadow="lifted"] .khcrm-form-control {
	background-color: var(--khcrm-f-tint-strong) !important;
}

/* ------------------------------------------------------------------ */
/* Result popup - appended to <body> by form.js, so it is never clipped */
/* by a theme's `overflow: hidden` section.                            */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell.khcrm-form-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147483000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	max-width: none !important;
	padding: 20px !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, .5) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: khcrm-fade-in .25s var(--khcrm-f-ease) both;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-card {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 400px !important;
	margin: 0 !important;
	padding: 34px 28px 26px !important;
	border: 0 !important;
	border-radius: calc(var(--khcrm-f-radius) + 10px) !important;
	background-color: var(--khcrm-f-bg) !important;
	box-shadow: 0 30px 70px -25px rgba(2, 6, 23, .55) !important;
	text-align: center !important;
	animation: khcrm-pop-in .42s var(--khcrm-f-spring) both;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-state="error"] .khcrm-form-modal-card {
	animation: khcrm-pop-in .42s var(--khcrm-f-spring) both, khcrm-shake .4s var(--khcrm-f-ease) .3s;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-icon {
	display: block !important;
	width: 76px !important;
	height: 76px !important;
	margin: 0 auto 18px !important;
}

/*
 * The drawn icon is the RESTING state and the animation only plays it in
 * from nothing (`backwards` fill covers the delay). Written the other way
 * round - undrawn at rest, `forwards` to hold the end state - the icon
 * disappears entirely for anyone whose animations do not run: reduced
 * motion at the OS level, a browser that never fires them, a screenshot
 * taken before they start. A confirmation with no tick is a worse bug than
 * a confirmation with no animation.
 */
/*
 * `cx`, `cy` and `r` are re-declared here because in Chrome and Safari they
 * are CSS properties, which means the `all: revert` reset above collapses
 * the circle to r=0 and the icon vanishes. Firefox does not implement them
 * as CSS, so there the presentation attributes survive the reset and these
 * three lines are simply ignored - the two halves cover each other exactly.
 * The marks use <polyline points>, which is not a CSS property in any
 * engine and so needs no such rescue.
 */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-ring {
	cx: 29px;
	cy: 29px;
	r: 26px;
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 166;
	stroke-dashoffset: 0;
	animation: khcrm-draw-ring .55s var(--khcrm-f-ease) .12s backwards;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-mark {
	fill: none;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 60;
	stroke-dashoffset: 0;
	animation: khcrm-draw-mark .35s var(--khcrm-f-ease) .5s backwards;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-state="success"] .khcrm-form-modal-ring,
.khcrm-form-shell.khcrm-form-shell[data-khcrm-state="success"] .khcrm-form-modal-mark {
	stroke: var(--khcrm-f-success);
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-state="error"] .khcrm-form-modal-ring,
.khcrm-form-shell.khcrm-form-shell[data-khcrm-state="error"] .khcrm-form-modal-mark {
	stroke: var(--khcrm-f-error);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-title {
	display: block !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	color: var(--khcrm-f-text) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-text {
	display: block !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
	font-size: 14.5px !important;
	line-height: 1.85 !important;
	color: var(--khcrm-f-text) !important;
	opacity: .78;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-ok {
	display: block !important;
	width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 12px 22px !important;
	border: none !important;
	border-radius: var(--khcrm-f-radius) !important;
	background-color: var(--khcrm-f-primary) !important;
	color: var(--khcrm-f-button-text) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	cursor: pointer;
	transition: transform .18s var(--khcrm-f-ease), filter .2s var(--khcrm-f-ease);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-ok:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-ok:active {
	transform: translateY(0) scale(.98);
}

/* The popup takes focus the moment it opens, so without this the browser's
   own blue outline lands on a pink button on every single submission. The
   ring replaces it rather than removing it - keyboard users still see where
   they are. */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-ok:focus,
.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-close:focus {
	outline: none !important;
	box-shadow: 0 0 0 4px var(--khcrm-f-ring) !important;
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-close {
	position: absolute !important;
	inset-block-start: 12px !important;
	inset-inline-end: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	color: var(--khcrm-f-text) !important;
	font-size: 22px !important;
	line-height: 1 !important;
	opacity: .45;
	cursor: pointer;
	transition: opacity .2s var(--khcrm-f-ease), background-color .2s var(--khcrm-f-ease);
}

.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-close:hover {
	opacity: 1;
	background-color: var(--khcrm-f-tint-strong) !important;
}

/* form.js sets this for the length of the exit animation, then removes the
   node - so the popup leaves as deliberately as it arrives. */
.khcrm-form-shell.khcrm-form-shell[data-khcrm-closing="1"] .khcrm-form-modal-card {
	animation: khcrm-pop-out .2s var(--khcrm-f-ease) both;
}

.khcrm-form-shell.khcrm-form-shell[data-khcrm-closing="1"] .khcrm-form-modal-backdrop {
	animation: khcrm-fade-out .2s var(--khcrm-f-ease) both;
}

/* ------------------------------------------------------------------ */
/* Entrance: fields settle in sequence on first paint.                 */
/* ------------------------------------------------------------------ */
.khcrm-form-shell.khcrm-form-shell .khcrm-form-field,
.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit {
	animation: khcrm-rise .5s var(--khcrm-f-ease) backwards;
	animation-delay: calc(var(--khcrm-row, 1) * 60ms);
}

/* ------------------------------------------------------------------ */
/* Keyframes                                                           */
/* ------------------------------------------------------------------ */
@keyframes khcrm-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes khcrm-sheen {
	from { transform: translateX(-120%); }
	to   { transform: translateX(120%); }
}

@keyframes khcrm-spin {
	to { transform: rotate(360deg); }
}

@keyframes khcrm-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-7px); }
	40%      { transform: translateX(6px); }
	60%      { transform: translateX(-4px); }
	80%      { transform: translateX(2px); }
}

@keyframes khcrm-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes khcrm-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes khcrm-pop-in {
	from { opacity: 0; transform: translateY(26px) scale(.92); }
	to   { opacity: 1; transform: none; }
}

@keyframes khcrm-pop-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(12px) scale(.96); }
}

@keyframes khcrm-draw-ring {
	from { stroke-dashoffset: 166; }
}

@keyframes khcrm-draw-mark {
	from { stroke-dashoffset: 60; }
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
	/* 16px prevents iOS from auto-zooming the page on focus. */
	.khcrm-form-shell.khcrm-form-shell .khcrm-form-control {
		font-size: 16px !important;
	}

	.khcrm-form-shell.khcrm-form-shell[data-khcrm-shadow="soft"] .khcrm-frontend-form,
	.khcrm-form-shell.khcrm-form-shell[data-khcrm-shadow="lifted"] .khcrm-frontend-form {
		padding: 18px !important;
	}

	.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-card {
		padding: 28px 20px 22px !important;
	}
}

/* ------------------------------------------------------------------ */
/* Motion is decoration here, never information: with it switched off  */
/* at the OS level, everything still appears - it just appears at once. */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.khcrm-form-shell.khcrm-form-shell,
	.khcrm-form-shell.khcrm-form-shell *,
	.khcrm-form-shell.khcrm-form-shell *::before,
	.khcrm-form-shell.khcrm-form-shell *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.khcrm-form-shell.khcrm-form-shell .khcrm-form-submit:hover:not(:disabled),
	.khcrm-form-shell.khcrm-form-shell .khcrm-form-modal-ok:hover {
		transform: none;
	}
}