/*
 * CosmoShop Helpdesk-Formular
 * Farben: im neuen Theme aus den theme.json-Presets, sonst CosmoShop-Werte der heutigen Seite.
 * „:is(#top, html)“ hebt die Spezifität über die Enfold-Formularregeln (#top .main_color input …),
 * ohne !important – und greift im neuen Theme genauso (dort gibt es kein #top).
 */

.csh {
	--csh-accent: var(--wp--preset--color--marke, #cd0332);
	--csh-accent-dark: var(--wp--preset--color--marke-dunkel, #ab0110);
	--csh-text: var(--wp--preset--color--schrift, #333333);
	--csh-muted: var(--wp--preset--color--schrift-leise, #5b5b5b);
	--csh-border: var(--wp--preset--color--linie, #e1e1e1);
	--csh-surface: var(--wp--preset--color--flaeche, #f5f5f5);
	--csh-field: var(--wp--preset--color--grund, #fcfcfc);
	--csh-ok: #1e7b45;
	--csh-radius: 5px;

	max-width: 760px;
	/* Mittig im Inhaltsbereich, Text darin aber immer linksbündig – auch in einem zentrierten Text-Block. */
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	color: var(--csh-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
}

.csh *,
.csh *::before,
.csh *::after {
	box-sizing: border-box;
}

.csh-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.csh-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

@media (max-width: 640px) {
	.csh-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.csh-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

:is(#top, html) .csh label,
:is(#top, html) .csh .csh-label {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--csh-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

:is(#top, html) .csh .csh-req {
	color: var(--csh-accent);
	font-size: inherit;
	font-weight: inherit;
}

/* Eingabefelder */
:is(#top, html) .csh input[type="text"],
:is(#top, html) .csh input[type="email"],
:is(#top, html) .csh input[type="tel"],
:is(#top, html) .csh select,
:is(#top, html) .csh textarea {
	display: block;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid var(--csh-border);
	border-radius: var(--csh-radius);
	background-color: var(--csh-field);
	color: var(--csh-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

:is(#top, html) .csh textarea {
	min-height: 180px;
	resize: vertical;
}

:is(#top, html) .csh select {
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b5b5b' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

:is(#top, html) .csh input:focus,
:is(#top, html) .csh select:focus,
:is(#top, html) .csh textarea:focus {
	border-color: var(--csh-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--csh-accent) 18%, transparent);
	outline: none;
}

:is(#top, html) .csh .csh-invalid {
	border-color: var(--csh-accent);
	background-color: color-mix(in srgb, var(--csh-accent) 4%, var(--csh-field));
}

.csh-hint {
	margin: 0;
	padding: 0;
	color: var(--csh-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* Anhänge */
.csh-drop {
	position: relative;
	padding: 22px 16px;
	border: 1px dashed color-mix(in srgb, var(--csh-muted) 45%, var(--csh-border));
	border-radius: var(--csh-radius);
	background: var(--csh-surface);
	text-align: center;
	transition: border-color 0.15s, background-color 0.15s;
}

.csh-drop.is-over,
.csh-drop:focus-within {
	border-color: var(--csh-accent);
	background: color-mix(in srgb, var(--csh-accent) 5%, var(--csh-surface));
}

.csh-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

:is(#top, html) .csh .csh-drop-text {
	display: inline;
	font-weight: 400;
	cursor: pointer;
}

.csh-drop-text strong {
	color: var(--csh-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.csh-drop .csh-hint {
	margin-top: 4px;
}

:is(#top, html) .csh .csh-files {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(#top, html) .csh .csh-files li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 7px 8px 7px 12px;
	border: 1px solid var(--csh-border);
	border-radius: var(--csh-radius);
	background: var(--csh-field);
	font-size: 14px;
}

.csh-file-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csh-file-size {
	color: var(--csh-muted);
	font-size: 13px;
	white-space: nowrap;
}

:is(#top, html) .csh .csh-file-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--csh-radius);
	background: transparent;
	color: var(--csh-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

:is(#top, html) .csh .csh-file-remove:hover,
:is(#top, html) .csh .csh-file-remove:focus-visible {
	background: var(--csh-surface);
	color: var(--csh-accent);
}

/* Datenschutz */
.csh-check {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

:is(#top, html) .csh .csh-check input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--csh-accent);
	cursor: pointer;
}

:is(#top, html) .csh .csh-check label {
	font-weight: 400;
	cursor: pointer;
}

.csh-check a {
	color: var(--csh-accent);
}

/* Honeypot */
.csh-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Absenden */
.csh-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

:is(#top, html) .csh .csh-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 28px;
	border: 1px solid var(--csh-accent);
	border-radius: var(--csh-radius);
	background: var(--csh-accent);
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

:is(#top, html) .csh .csh-submit:hover,
:is(#top, html) .csh .csh-submit:focus-visible {
	border-color: var(--csh-accent-dark);
	background: var(--csh-accent-dark);
}

:is(#top, html) .csh .csh-submit:focus-visible {
	outline: 2px solid var(--csh-accent);
	outline-offset: 2px;
}

:is(#top, html) .csh .csh-submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.csh-submit[disabled]::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: csh-spin 0.7s linear infinite;
}

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

.csh-progress {
	color: var(--csh-muted);
	font-size: 14px;
}

.csh-required-note {
	margin-top: -6px;
}

/* Meldungen */
.csh-status,
.csh-box {
	margin: 0;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 15px;
}

.csh-status,
.csh-box--error {
	border: 1px solid color-mix(in srgb, var(--csh-accent) 35%, transparent);
	background: color-mix(in srgb, var(--csh-accent) 7%, #ffffff);
	color: var(--csh-accent-dark);
}

.csh-box--success {
	border: 1px solid color-mix(in srgb, var(--csh-ok) 35%, transparent);
	background: color-mix(in srgb, var(--csh-ok) 8%, #ffffff);
	color: var(--csh-text);
	outline: none;
}

.csh-box--success strong {
	display: block;
	margin-bottom: 4px;
	color: var(--csh-ok);
	font-size: 17px;
}

:is(#top, html) .csh .csh-again {
	display: flex;
	margin-top: 14px;
}

.csh-box a {
	color: inherit;
}

.csh [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.csh *,
	.csh *::before {
		transition: none !important;
		animation-duration: 2s !important;
	}
}