/**
 * @package     Fesz.Plugin
 * @subpackage  System.feszfeedback
 *
 * @copyright   (C) 2026 Pribelszki Tamas
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Colour strategy (1.0.1): the box never relies on --cassiopeia-color-primary.
 * On feszultsegmentesites.hu the child template (cassiopeia_ejkek) points that
 * variable at the header bar colour, which is near-black in the default dark mode
 * and pure white in the light "kivetito" mode, so anything painted with it vanished.
 * The box therefore uses the template's own palette (--ejkek-*) when present and
 * otherwise falls back to explicit light/dark values keyed on the Bootstrap 5.3
 * data-bs-theme attribute and prefers-color-scheme. Touch targets stay >= 44x44 px.
 */

.feszfeedback {
	--feszfeedback-fb-accent: #0b5cad;
	--feszfeedback-fb-accent-text: #ffffff;
	--feszfeedback-fb-border: #b9bfc9;
	--feszfeedback-fb-muted: #4a5260;
	--feszfeedback-fb-error: #b3261e;

	--feszfeedback-accent: var(--ejkek-accent, var(--feszfeedback-fb-accent));
	--feszfeedback-accent-text: var(--ejkek-accent-text, var(--feszfeedback-fb-accent-text));
	--feszfeedback-border: var(--ejkek-border, var(--feszfeedback-fb-border));
	--feszfeedback-text: var(--ejkek-text, inherit);
	--feszfeedback-muted: var(--ejkek-text2, var(--feszfeedback-fb-muted));
	--feszfeedback-error: var(--feszfeedback-fb-error);

	margin: 2rem 0 0;
	padding: 1.25rem;
	border: 1px solid var(--feszfeedback-border);
	border-radius: .5rem;
	color: var(--feszfeedback-text);
}

/* Fallback palette for dark templates without --ejkek-* variables. */
@media (prefers-color-scheme: dark) {
	.feszfeedback {
		--feszfeedback-fb-accent: #6cb6ff;
		--feszfeedback-fb-accent-text: #04263d;
		--feszfeedback-fb-border: #3a4658;
		--feszfeedback-fb-muted: #a9b6c6;
		--feszfeedback-fb-error: #ff8a80;
	}
}

[data-bs-theme="dark"] .feszfeedback {
	--feszfeedback-fb-accent: #6cb6ff;
	--feszfeedback-fb-accent-text: #04263d;
	--feszfeedback-fb-border: #3a4658;
	--feszfeedback-fb-muted: #a9b6c6;
	--feszfeedback-fb-error: #ff8a80;
}

[data-bs-theme="light"] .feszfeedback {
	--feszfeedback-fb-accent: #0b5cad;
	--feszfeedback-fb-accent-text: #ffffff;
	--feszfeedback-fb-border: #b9bfc9;
	--feszfeedback-fb-muted: #4a5260;
	--feszfeedback-fb-error: #b3261e;
}

.feszfeedback-heading {
	margin: 0 0 .75rem;
	font-size: 1.1rem;
	line-height: 1.3;
	color: inherit;
}

.feszfeedback-scale {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 .75rem;
}

.feszfeedback-score {
	min-width: 44px;
	min-height: 44px;
	padding: .25rem .5rem;
	border: 1px solid var(--feszfeedback-border);
	border-radius: .375rem;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.feszfeedback-score:hover,
.feszfeedback-score:focus-visible {
	border-color: var(--feszfeedback-accent);
	box-shadow: 0 0 0 2px var(--feszfeedback-accent) inset;
}

.feszfeedback-score.is-selected {
	border-color: var(--feszfeedback-accent);
	background: var(--feszfeedback-accent);
	color: var(--feszfeedback-accent-text);
	font-weight: 700;
}

.feszfeedback-stats {
	margin: 0;
	font-size: .9rem;
	color: var(--feszfeedback-muted);
}

.feszfeedback-report {
	margin-top: 1rem;
}

.feszfeedback-toggle,
.feszfeedback-submit {
	min-height: 44px;
	padding: .5rem 1rem;
	border: 2px solid var(--feszfeedback-accent);
	border-radius: .375rem;
	background: transparent;
	color: var(--feszfeedback-accent);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.feszfeedback-toggle:hover,
.feszfeedback-toggle:focus-visible,
.feszfeedback-submit:hover,
.feszfeedback-submit:focus-visible {
	background: var(--feszfeedback-accent);
	color: var(--feszfeedback-accent-text);
}

.feszfeedback-submit {
	margin-top: .75rem;
	background: var(--feszfeedback-accent);
	color: var(--feszfeedback-accent-text);
}

.feszfeedback-form {
	margin-top: .75rem;
}

.feszfeedback-label {
	display: block;
	margin: .75rem 0 .25rem;
	font-size: .9rem;
	font-weight: 600;
	color: inherit;
}

.feszfeedback-input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: .5rem;
	border: 1px solid var(--feszfeedback-border);
	border-radius: .375rem;
	background: transparent;
	color: inherit;
	font: inherit;
}

.feszfeedback-input:focus-visible {
	outline: 2px solid var(--feszfeedback-accent);
	outline-offset: 1px;
}

textarea.feszfeedback-input {
	resize: vertical;
}

.feszfeedback-quote {
	margin: 0 0 .5rem;
	padding: .5rem .75rem;
	border-left: 3px solid var(--feszfeedback-accent);
	font-size: .9rem;
	font-style: italic;
	color: var(--feszfeedback-muted);
}

/* Honeypot: off screen for humans, in the DOM for bots. Never display:none. */
.feszfeedback-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.feszfeedback-message {
	margin: .75rem 0 0;
	min-height: 1.25rem;
	font-size: .95rem;
}

.feszfeedback-message.is-error {
	color: var(--feszfeedback-error);
}

@media (max-width: 480px) {
	.feszfeedback-score {
		flex: 1 1 auto;
	}
}