/*
 * NWP Pismo – converter for visitors.
 *
 * Takes the look of the site's theme:
 * - fonts, text color and background are inherited;
 * - the accent color comes from the theme (block themes, Elementor, Astra, Kadence,
 *   Blocksy, GeneratePress, OceanWP …) or from the block's / shortcode's own color;
 * - action buttons use the theme's own button style (wp-element-button / button);
 * - fields keep the theme's form style: the fallback styles below are wrapped in
 *   :where() (zero specificity), so any rule of the theme wins.
 */
.anpismo-konvertor {
	--anpismo-k-accent: var(--anpismo-k-color,
		var(--wp--preset--color--primary,
		var(--e-global-color-primary,
		var(--ast-global-color-0,
		var(--global-palette1,
		var(--theme-palette-color-1,
		var(--accent,
		var(--primary-color,
		var(--wp--preset--color--accent-1,
		var(--wp--preset--color--accent,
		currentColor))))))))));
	--anpismo-k-border: color-mix(in srgb, currentColor 25%, transparent);
	--anpismo-k-soft: color-mix(in srgb, currentColor 5%, transparent);
	--anpismo-k-radius: var(--wp--custom--border-radius, 8px);
	box-sizing: border-box;
	margin-block: 1.5em;
}
.anpismo-konvertor *,
.anpismo-konvertor *::before,
.anpismo-konvertor *::after {
	box-sizing: inherit;
}

/* Direction: a segmented control in the theme's accent color. */
.anpismo-konvertor .anpismo-k-bar {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	margin: 0 0 14px;
	border: 1px solid var(--anpismo-k-border);
	border-radius: calc(var(--anpismo-k-radius) + 4px);
}
.anpismo-konvertor .anpismo-k-dir {
	margin: 0;
	padding: 0.55em 1em;
	min-height: 40px;
	font: inherit;
	font-size: 0.92em;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--anpismo-k-radius);
	box-shadow: none;
	cursor: pointer;
	opacity: 0.8;
}
.anpismo-konvertor .anpismo-k-dir:hover {
	opacity: 1;
	background: var(--anpismo-k-soft);
	color: inherit;
}
.anpismo-konvertor .anpismo-k-dir[aria-pressed="true"] {
	/* Text keeps the page's text color, so it is readable with any accent (light or dark). */
	opacity: 1;
	font-weight: 700;
	color: inherit;
	background: color-mix(in srgb, var(--anpismo-k-accent) 14%, transparent);
	border: 2px solid var(--anpismo-k-accent);
}

/* Two fields side by side, stacked on phones. */
.anpismo-konvertor .anpismo-k-panes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25em;
}
@media (max-width: 700px) {
	.anpismo-konvertor .anpismo-k-panes {
		grid-template-columns: minmax(0, 1fr);
	}
}
.anpismo-konvertor .anpismo-k-pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.anpismo-konvertor .anpismo-k-pane > label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}
.anpismo-konvertor textarea {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 14em;
	margin: 0;
	resize: vertical;
}
.anpismo-konvertor.is-busy .anpismo-k-out {
	opacity: 0.6;
}

/* Fallback look for fields – any theme rule overrides it. */
:where(.anpismo-konvertor) :where(textarea) {
	padding: var(--anpismo-k-field-padding, 0.75em);
	font: inherit;
	line-height: 1.55;
	color: var(--anpismo-k-field-color, inherit);
	background: var(--anpismo-k-field-bg, transparent);
	border: var(--anpismo-k-field-border, 1px solid var(--anpismo-k-border));
	border-radius: var(--anpismo-k-field-radius, var(--anpismo-k-radius));
	box-shadow: var(--anpismo-k-field-shadow, none);
}
:where(.anpismo-konvertor) :where(.anpismo-k-out) {
	background: color-mix(in srgb, var(--anpismo-k-field-bg, transparent) 85%, currentColor 5%);
}
/* Measured theme styles win over the theme's own generic rules (they are set as variables on the box). */
.anpismo-konvertor.is-probed textarea {
	padding: var(--anpismo-k-field-padding, 0.75em);
	color: var(--anpismo-k-field-color, inherit);
	border: var(--anpismo-k-field-border, 1px solid var(--anpismo-k-border));
	border-radius: var(--anpismo-k-field-radius, var(--anpismo-k-radius));
	box-shadow: var(--anpismo-k-field-shadow, none);
}
.anpismo-konvertor.is-probed .anpismo-k-in {
	background: var(--anpismo-k-field-bg, transparent);
}
.anpismo-konvertor textarea:focus-visible,
.anpismo-konvertor button:focus-visible {
	outline: 2px solid var(--anpismo-k-accent);
	outline-offset: 2px;
}

/* Action buttons: the theme's own button style; this is only a fallback. */
.anpismo-konvertor .anpismo-k-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.anpismo-konvertor .anpismo-k-actions button {
	margin: 0;
	cursor: pointer;
}
:where(.anpismo-konvertor) :where(.anpismo-k-actions button) {
	padding: 0.55em 1em;
	min-height: 40px;
	font: inherit;
	font-size: 0.92em;
	line-height: 1.2;
	color: var(--wp--preset--color--base, #fff);
	background: var(--anpismo-k-accent);
	border: 1px solid var(--anpismo-k-accent);
	border-radius: var(--anpismo-k-radius);
}
/* The primary action looks exactly like the theme's button (measured at runtime). */
.anpismo-konvertor.is-probed .anpismo-k-actions .anpismo-k-copy {
	padding: var(--anpismo-k-btn-padding, 0.55em 1em);
	font-family: var(--anpismo-k-btn-family, inherit);
	font-size: var(--anpismo-k-btn-size, 0.92em);
	font-weight: var(--anpismo-k-btn-weight, 500);
	letter-spacing: var(--anpismo-k-btn-spacing, normal);
	text-transform: var(--anpismo-k-btn-transform, none);
	line-height: 1.2;
	color: var(--anpismo-k-btn-color, var(--wp--preset--color--base, #fff));
	background: var(--anpismo-k-btn-bg, var(--anpismo-k-accent));
	border: var(--anpismo-k-btn-border, 1px solid var(--anpismo-k-accent));
	border-radius: var(--anpismo-k-btn-radius, var(--anpismo-k-radius));
	box-shadow: var(--anpismo-k-btn-shadow, none);
	text-decoration: none;
}
.anpismo-konvertor.is-probed .anpismo-k-actions .anpismo-k-copy:hover {
	filter: brightness(0.92);
}
/* Secondary actions: the same shape as the theme's button, outlined in the accent color. */
.anpismo-konvertor.is-probed .anpismo-k-actions .anpismo-k-secondary {
	padding: var(--anpismo-k-btn-padding, 0.55em 1em);
	font-family: var(--anpismo-k-btn-family, inherit);
	font-size: var(--anpismo-k-btn-size, 0.92em);
	font-weight: var(--anpismo-k-btn-weight, 500);
	letter-spacing: var(--anpismo-k-btn-spacing, normal);
	text-transform: var(--anpismo-k-btn-transform, none);
	line-height: 1.2;
	border-radius: var(--anpismo-k-btn-radius, var(--anpismo-k-radius));
	border: 1px solid color-mix(in srgb, var(--anpismo-k-accent) 55%, transparent);
}
.anpismo-konvertor.is-probed .anpismo-k-dir {
	border-radius: var(--anpismo-k-btn-radius, var(--anpismo-k-radius));
}
.anpismo-konvertor.is-probed .anpismo-k-bar {
	border-radius: calc(var(--anpismo-k-btn-radius, var(--anpismo-k-radius)) + 4px);
}
/* Secondary actions: outlined version of the theme button. */
.anpismo-konvertor .anpismo-k-actions .anpismo-k-secondary {
	color: inherit;
	background: transparent;
	border: 1px solid var(--anpismo-k-border);
	box-shadow: none;
}
.anpismo-konvertor .anpismo-k-actions .anpismo-k-secondary:hover {
	color: inherit;
	background: var(--anpismo-k-soft);
}

.anpismo-konvertor .anpismo-k-meta {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 6px;
	font-size: 0.85em;
	opacity: 0.75;
}
.anpismo-konvertor .anpismo-k-opt {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
	font-weight: normal;
}
.anpismo-konvertor .anpismo-k-opt input {
	margin: 0.3em 0 0;
	accent-color: var(--anpismo-k-accent);
}
.anpismo-konvertor .anpismo-k-opt[hidden] {
	display: none;
}
.anpismo-konvertor .anpismo-k-status {
	min-height: 1.4em;
	margin: 8px 0 0;
	font-weight: 600;
}
.anpismo-konvertor .anpismo-k-note {
	margin: 4px 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

/* "Simple" style (stil="jednostavan"): ignore the theme's buttons and fields. */
.anpismo-konvertor.is-style-simple .anpismo-k-actions button {
	padding: 0.55em 1em;
	min-height: 40px;
	font: inherit;
	font-size: 0.92em;
	color: inherit;
	background: transparent;
	border: 1px solid var(--anpismo-k-border);
	border-radius: var(--anpismo-k-radius);
	box-shadow: none;
	text-transform: none;
}
.anpismo-konvertor.is-style-simple .anpismo-k-actions button:hover {
	background: var(--anpismo-k-soft);
}
.anpismo-konvertor.is-style-simple textarea {
	padding: 0.75em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--anpismo-k-border);
	border-radius: var(--anpismo-k-radius);
	box-shadow: none;
}
.anpismo-konvertor.is-style-simple .anpismo-k-out {
	background: var(--anpismo-k-soft);
}

/* "Try an example" link and the words that stayed in Latin. */
.anpismo-konvertor button.anpismo-k-sample,
.anpismo-konvertor button.anpismo-k-sample:hover,
.anpismo-konvertor button.anpismo-k-sample:focus {
	border: 0;
	background: none;
	box-shadow: none;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
}
.anpismo-konvertor .anpismo-k-sample {
	display: inline-block;
	margin: 0 0 14px 12px;
	padding: 0;
	font: inherit;
	font-size: 0.92em;
	color: var(--anpismo-k-accent);
	background: none;
	border: 0;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	vertical-align: top;
	line-height: 1.4;
	padding-top: 14px;
}
.anpismo-konvertor .anpismo-k-sample:hover {
	text-decoration: none;
	color: var(--anpismo-k-accent);
	background: none;
}
.anpismo-konvertor .anpismo-k-kept {
	margin-top: 10px;
	font-size: 0.85em;
	line-height: 1.6;
}
.anpismo-konvertor .anpismo-k-kept[hidden] {
	display: none;
}
.anpismo-konvertor .anpismo-k-kept-label {
	opacity: 0.75;
}
.anpismo-konvertor .anpismo-k-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	margin: 2px 4px 2px 0;
	padding: 1px 8px;
	border: 1px solid var(--anpismo-k-border);
	border-radius: 999px;
	background: var(--anpismo-k-soft);
	white-space: nowrap;
}
.anpismo-konvertor .anpismo-k-chip small {
	font-size: 0.85em;
	opacity: 0.65;
}

/* Labels like the theme's headings, the example link like the theme's links, texts like its paragraphs. */
.anpismo-konvertor.is-probed {
	color: var(--anpismo-k-text-color, inherit);
}
.anpismo-konvertor.is-probed .anpismo-k-pane > label {
	color: var(--anpismo-k-head-color, inherit);
	font-family: var(--anpismo-k-head-family, inherit);
	font-weight: var(--anpismo-k-head-weight, 600);
	text-transform: var(--anpismo-k-head-transform, none);
	letter-spacing: var(--anpismo-k-head-spacing, normal);
}
.anpismo-konvertor.is-probed .anpismo-k-sample,
.anpismo-konvertor.is-probed .anpismo-k-sample:hover {
	color: var(--anpismo-k-link-color, var(--anpismo-k-accent));
}
.anpismo-konvertor.is-probed .anpismo-k-sample:hover {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * "NikolicWP" style (default, stil="nwp"): a fixed, modern card with the
 * umbrella brand – the same look as the plugin's admin screens, for visitors.
 * It does not follow the theme; only the page background around it does.
 * ------------------------------------------------------------------ */
@font-face {
	font-family: "NWP Manrope";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/manrope-cyrillic-400-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "NWP Manrope";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "NWP Manrope";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/manrope-cyrillic-600-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "NWP Manrope";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "NWP Manrope";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/manrope-cyrillic-800-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "NWP Manrope";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.anpismo-konvertor.is-style-nwp {
	--nwpk-navy: #173963;
	--nwpk-navy2: #234167;
	--nwpk-blue: #2872fa;
	--nwpk-blue-soft: #e9f1ff;
	--nwpk-red: #ec1d24;
	--nwpk-white: #fff;
	--nwpk-bg: #fafbfc;
	--nwpk-bg2: #f2f5f7;
	--nwpk-line: #e1e8ed;
	--nwpk-text: #173963;
	--nwpk-muted: #5b6b80;
	--nwpk-radius: 18px;
	--nwpk-radius-s: 12px;
	--anpismo-k-accent: var(--nwpk-blue);
	--anpismo-k-border: var(--nwpk-line);
	--anpismo-k-soft: var(--nwpk-bg2);
	--anpismo-k-radius: var(--nwpk-radius-s);
	font-family: "NWP Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--nwpk-text);
	text-align: left;
	background: var(--nwpk-white);
	border: 1px solid var(--nwpk-line);
	border-radius: var(--nwpk-radius);
	box-shadow: 0 10px 30px rgba(23, 57, 99, 0.08), 0 1px 2px rgba(23, 57, 99, 0.06);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}
.anpismo-konvertor.is-style-nwp *,
.anpismo-konvertor.is-style-nwp *::before,
.anpismo-konvertor.is-style-nwp *::after {
	box-sizing: border-box;
}

/* Header: navy gradient like the admin hero, with the Pismo icon and a thin red line below. */
.anpismo-konvertor.is-style-nwp .anpismo-k-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 28px;
	color: var(--nwpk-white);
	background: linear-gradient(135deg, var(--nwpk-navy2) 0%, var(--nwpk-navy) 60%, #122c4d 100%);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-head::after {
	content: "";
	position: absolute;
	left: 28px;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--nwpk-red);
	border-radius: 3px 3px 0 0;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-head__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	display: block;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-head__text {
	min-width: 0;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-head__title {
	margin: 0;
	font-size: 1.25em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--nwpk-white);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-head__sub {
	margin: 3px 0 0;
	font-size: 0.9em;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.78);
}

.anpismo-konvertor.is-style-nwp .anpismo-k-body {
	padding: 24px 28px 22px;
}

/* Direction: a pill switch on a light background; the active one is white with a blue outline. */
.anpismo-konvertor.is-style-nwp .anpismo-k-bar {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin: 0 0 16px;
	background: var(--nwpk-bg2);
	border: 1px solid var(--nwpk-line);
	border-radius: 999px;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-dir {
	min-height: 38px;
	padding: 0.45em 1em;
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--nwpk-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	opacity: 1;
	text-transform: none;
	letter-spacing: normal;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-dir:hover {
	color: var(--nwpk-navy);
	background: rgba(255, 255, 255, 0.7);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-dir[aria-pressed="true"] {
	color: var(--nwpk-navy);
	font-weight: 700;
	background: var(--nwpk-white);
	border: 1px solid var(--nwpk-blue);
	box-shadow: 0 1px 3px rgba(23, 57, 99, 0.12);
}

/* "Try an example" as a blue link. */
.anpismo-konvertor.is-style-nwp .anpismo-k-sample,
.anpismo-konvertor.is-style-nwp .anpismo-k-sample:hover {
	margin: 0 0 16px 14px;
	padding-top: 13px;
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--nwpk-blue);
	background: none;
	border: 0;
	box-shadow: none;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-sample:hover {
	text-decoration: none;
}

/* Fields. */
.anpismo-konvertor.is-style-nwp .anpismo-k-panes {
	gap: 20px;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-pane > label {
	margin: 0 0 8px;
	font: inherit;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nwpk-navy);
}
.anpismo-konvertor.is-style-nwp textarea,
.anpismo-konvertor.is-style-nwp textarea:focus {
	height: 16em;
	min-height: 8em;
	padding: 14px 16px;
	font: inherit;
	font-size: 1em;
	line-height: 1.6;
	color: var(--nwpk-navy);
	background: var(--nwpk-bg);
	border: 1px solid var(--nwpk-line);
	border-radius: var(--nwpk-radius-s);
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.anpismo-konvertor.is-style-nwp textarea::placeholder {
	color: #8a99ad;
	opacity: 1;
}
.anpismo-konvertor.is-style-nwp textarea:focus,
.anpismo-konvertor.is-style-nwp textarea:focus-visible {
	background: var(--nwpk-white);
	border-color: var(--nwpk-blue);
	box-shadow: 0 0 0 3px rgba(40, 114, 250, 0.18);
	outline: none;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-out,
.anpismo-konvertor.is-style-nwp .anpismo-k-out:focus {
	background: var(--nwpk-bg2);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-meta {
	margin-top: 8px;
	font-size: 0.82em;
	color: var(--nwpk-muted);
	opacity: 1;
}

/* Action buttons: blue primary, outlined secondary. */
.anpismo-konvertor.is-style-nwp .anpismo-k-actions {
	gap: 8px;
	margin-top: 12px;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-actions button {
	min-height: 40px;
	padding: 0.5em 1.1em;
	font: inherit;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--nwpk-navy);
	background: var(--nwpk-white);
	border: 1px solid var(--nwpk-line);
	border-radius: var(--nwpk-radius-s);
	box-shadow: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-actions button:hover {
	color: var(--nwpk-navy);
	background: var(--nwpk-bg2);
	border-color: #cfd9e3;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-actions button:active {
	transform: translateY(1px);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-actions .anpismo-k-copy,
.anpismo-konvertor.is-style-nwp .anpismo-k-actions .anpismo-k-copy:hover {
	color: var(--nwpk-white);
	background: var(--nwpk-blue);
	border-color: var(--nwpk-blue);
	box-shadow: 0 4px 12px rgba(40, 114, 250, 0.28);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-actions .anpismo-k-copy:hover {
	background: #1f63e0;
	border-color: #1f63e0;
}
.anpismo-konvertor.is-style-nwp button:focus-visible,
.anpismo-konvertor.is-style-nwp input:focus-visible {
	outline: 2px solid var(--nwpk-blue);
	outline-offset: 2px;
}

/* Option, status, note, chips. */
.anpismo-konvertor.is-style-nwp .anpismo-k-opt {
	margin-top: 18px;
	padding: 12px 14px;
	font-size: 0.92em;
	color: var(--nwpk-navy);
	background: var(--nwpk-bg);
	border: 1px solid var(--nwpk-line);
	border-radius: var(--nwpk-radius-s);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-opt input {
	width: 18px;
	height: 18px;
	margin-top: 0.15em;
	accent-color: var(--nwpk-blue);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-status {
	margin-top: 12px;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--nwpk-blue);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-note {
	margin-top: 6px;
	font-size: 0.85em;
	color: var(--nwpk-muted);
	opacity: 1;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-kept {
	margin-top: 12px;
	font-size: 0.82em;
	color: var(--nwpk-muted);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-kept-label {
	opacity: 1;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-chip {
	color: var(--nwpk-navy);
	background: var(--nwpk-blue-soft);
	border: 1px solid #cfe0ff;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-chip small {
	opacity: 0.7;
}

/* Footer with the umbrella brand. */
.anpismo-konvertor.is-style-nwp .anpismo-k-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding: 14px 28px;
	font-size: 0.82em;
	color: var(--nwpk-muted);
	background: var(--nwpk-bg);
	border-top: 1px solid var(--nwpk-line);
}
.anpismo-konvertor.is-style-nwp .anpismo-k-foot a {
	color: var(--nwpk-blue);
	text-decoration: none;
	font-weight: 600;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-foot a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-foot__brand,
.anpismo-konvertor.is-style-nwp .anpismo-k-foot__brand:hover {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	color: var(--nwpk-navy);
	text-decoration: none;
	letter-spacing: -0.01em;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-foot__badge {
	width: 18px;
	height: 18px;
	color: var(--nwpk-navy);
	flex: 0 0 auto;
}
.anpismo-konvertor.is-style-nwp .anpismo-k-foot__text {
	flex: 1 1 240px;
}

/* Phones. */
@media (max-width: 700px) {
	.anpismo-konvertor.is-style-nwp {
		border-radius: 14px;
		font-size: 15px;
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-head {
		padding: 18px 18px;
		gap: 12px;
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-head::after {
		left: 18px;
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-head__icon {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-body {
		padding: 18px 16px 16px;
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-foot {
		padding: 12px 16px;
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-bar {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		border-radius: 16px;
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-dir {
		min-height: 44px;
		padding: 0.4em 0.4em;
		font-size: 0.82em;
		line-height: 1.15;
		border-radius: 12px;
		text-align: center;
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-sample {
		display: block;
		margin: -6px 0 14px;
		padding-top: 0;
	}
	.anpismo-konvertor.is-style-nwp textarea {
		height: 12em;
		font-size: 16px; /* no zoom on iOS */
	}
	.anpismo-konvertor.is-style-nwp .anpismo-k-actions button {
		flex: 1 1 calc(50% - 4px);
	}
}
@media (max-width: 380px) {
	.anpismo-konvertor.is-style-nwp .anpismo-k-dir {
		font-size: 0.78em;
	}
}
