/*
 * AN 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: 0.75em;
	font: inherit;
	line-height: 1.55;
	color: inherit;
	background: transparent;
	border: 1px solid var(--anpismo-k-border);
	border-radius: var(--anpismo-k-radius);
}
:where(.anpismo-konvertor) :where(.anpismo-k-out) {
	background: var(--anpismo-k-soft);
}
.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);
}
/* 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);
}