/*
 * km Page Feedback – front end.
 * Adjust to your theme with CSS custom properties, e.g.
 * :root { --kmpf-accent: #24539a; --kmpf-dark: #0f2a4b; --kmpf-ok: #2e7524; --kmpf-radius: 16px; }
 */
.kmpf, .kmpf-form, .kmpf-box, .kmpf-thanks {
	--_accent: var(--kmpf-accent, var(--wp--preset--color--primary, #2457a6));
	--_dark: var(--kmpf-dark, var(--wp--preset--color--contrast, #13253f));
	--_ok: var(--kmpf-ok, #2e7524);
	--_line: var(--kmpf-line, #dfe4ec);
	--_tint: var(--kmpf-tint, #eef2f8);
	--_muted: var(--kmpf-muted, #555e6b);
	--_radius: var(--kmpf-radius, 14px);
	--_head: var(--kmpf-font-heading, inherit);
	--_body: var(--kmpf-font-body, inherit);
}
.kmpf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 10px 6px; }
.kmpf__q { font: 700 .72rem/1.3 var(--_body); letter-spacing: .1em; text-transform: uppercase; color: var(--_accent); text-align: center; }
.kmpf__row { display: flex; gap: 8px; }
.kmpf__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 14px; border: 1.5px solid var(--_line); border-radius: 999px; background: #fff; color: var(--_dark); font: 700 .95rem/1 var(--_body); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .15s; }
.kmpf__btn svg { width: 20px; height: 20px; flex: none; }
.kmpf__btn:not([disabled]):hover { border-color: var(--_accent); transform: translateY(-1px); }
.kmpf__btn:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
.kmpf__btn.is-up[aria-pressed="true"] { background: var(--_ok); border-color: var(--_ok); color: #fff; }
.kmpf__btn.is-down[aria-pressed="true"] { background: var(--_dark); border-color: var(--_dark); color: #fff; }
.kmpf__btn[disabled] { cursor: default; }
.kmpf__btn[disabled][aria-pressed="false"] { opacity: .45; }
.kmpf__hint { min-height: 1.2em; font-size: .8rem; color: var(--_muted); text-align: center; }
.kmpf.is-busy .kmpf__btn { cursor: progress; }

.kmpf-form { display: grid; gap: 12px; box-sizing: border-box; max-width: var(--wp--style--global--content-size, 780px); margin: 14px auto 0 !important; padding: 22px 24px; border-radius: var(--_radius); background: var(--_tint); }
.kmpf-form[hidden], .kmpf-thanks[hidden] { display: none !important; }
.kmpf-form__title { margin: 0 !important; font: 800 1.35rem/1.15 var(--_head); color: var(--_dark); }
.kmpf-form__intro { margin: 0 !important; font-size: .95rem; color: var(--_muted); }
.kmpf-form__field { display: grid; gap: 4px; font-size: .88rem; font-weight: 600; color: var(--_dark); }
.kmpf-form__field small { font-weight: 400; color: var(--_muted); }
.kmpf-form textarea, .kmpf-form input[type="email"] { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid #c3cddb; border-radius: 12px; background: #fff; color: inherit; font: 400 1rem/1.4 var(--_body); }
.kmpf-form textarea { min-height: 110px; resize: vertical; }
.kmpf-form textarea:focus, .kmpf-form input:focus { outline: 3px solid var(--_accent); outline-offset: 1px; border-color: var(--_accent); }
.kmpf-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kmpf-form__row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.kmpf-form__send { height: 46px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--_accent); color: #fff; font: 700 1rem/1 var(--_head); cursor: pointer; }
.kmpf-form__send:hover { background: var(--_dark); }
.kmpf-form__send[disabled] { opacity: .6; cursor: progress; }
.kmpf-form__cancel { padding: 4px; border: 0; background: none; color: var(--_accent); font: 600 .95rem/1.2 var(--_body); text-decoration: underline; cursor: pointer; }
.kmpf-form__note { margin-left: auto; font-size: .8rem; color: var(--_muted); }
.kmpf-form__msg { margin: 0 !important; font-weight: 600; color: #8a2424; }
.kmpf-form__msg:empty { display: none; }
.kmpf-thanks { display: flex; box-sizing: border-box; max-width: var(--wp--style--global--content-size, 780px); margin: 14px auto 0 !important; gap: 12px; align-items: center; padding: 16px 20px; border-radius: var(--_radius); background: #eaf5e6; color: #1f5418; font-weight: 600; }
.kmpf-thanks svg { width: 26px; height: 26px; flex: none; }

/* Box (end of content, block in templates) */
.kmpf-box { display: grid; gap: 12px; box-sizing: border-box; max-width: var(--wp--style--global--content-size, 780px); margin: 2.5rem auto 0; padding: 14px 18px; border: 1px solid var(--_line); border-radius: var(--_radius); }
.kmpf-box .kmpf { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 16px; padding: 0; }
.kmpf-box .kmpf__hint { flex-basis: 100%; }
.kmpf-box .kmpf-form, .kmpf-box .kmpf-thanks { margin-top: 0 !important; max-width: none; }

@media (max-width: 600px) {
	.kmpf-form { padding: 18px 16px; }
	.kmpf-form__note { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kmpf__btn { transition: none; } .kmpf__btn:not([disabled]):hover { transform: none; } }
/* Inside km Page Navigation on small screens: one row above the links */
@media (max-width: 600px) {
	.kmpn .kmpf__q { text-align: left; }
	.kmpn .kmpf__hint { display: none; }
}