/**
 * MSys Zammad Ticket-Formular — front-end styles.
 * Deliberately lightweight and theme-friendly; uses currentColor and inherits fonts.
 */

.mszf-form {
	--mszf-col-gap: 1rem;
	--mszf-row-gap: 1rem;
	display: flex;
	flex-direction: column;
	gap: var(--mszf-row-gap);
	max-width: 640px;
}

/* Field area: wrapping flex row. Per-field width comes from the widget's
   "Feldbreite" control (elementor-repeater-item-* selectors); the horizontal
   gutter lives in the fields' padding so that 50% + 50% fits one row exactly. */
.mszf-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	row-gap: var(--mszf-row-gap);
	margin: 0 calc(var(--mszf-col-gap) / -2);
}

.mszf-fields .mszf-field {
	width: 100%;
	padding: 0 calc(var(--mszf-col-gap) / 2);
	box-sizing: border-box;
}

.mszf-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.mszf-field > label {
	font-weight: 600;
	line-height: 1.3;
}

.mszf-field input[type="text"],
.mszf-field input[type="email"],
.mszf-field input[type="tel"],
.mszf-field input[type="file"],
.mszf-field textarea,
.mszf-field select {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: 6px;
	font: inherit;
	color: inherit;
	background: #fff;
	box-sizing: border-box;
}

.mszf-field textarea {
	resize: vertical;
	min-height: 8rem;
}

.mszf-field input:focus,
.mszf-field textarea:focus,
.mszf-field select:focus {
	outline: 2px solid rgba( 0, 100, 200, 0.5 );
	outline-offset: 1px;
}

/* Consent + checkbox rows: label wraps the control inline. */
.mszf-field-consent > label,
.mszf-field-checkbox > label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	cursor: pointer;
}

.mszf-field-consent input[type="checkbox"],
.mszf-field-checkbox input[type="checkbox"] {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.mszf-req {
	color: #b32d2e;
}

.mszf-hint {
	opacity: 0.75;
	font-size: 0.85em;
}

.mszf-actions {
	margin-top: 0.25rem;
}

/* Both buttons share one look: the style tab targets them together, so an
   unstyled "Neues Ticket" button matches "Ticket erstellen" out of the box. */
.mszf-submit,
.mszf-new-ticket {
	appearance: none;
	cursor: pointer;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 6px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: #1a6ce7;
}

.mszf-submit:hover,
.mszf-new-ticket:hover {
	background: #155bc4;
}

.mszf-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Validation state. */
.mszf-field.mszf-invalid input,
.mszf-field.mszf-invalid textarea,
.mszf-field.mszf-invalid select {
	border-color: #b32d2e;
	box-shadow: 0 0 0 1px #b32d2e;
}

/* Message + result areas. */
.mszf-messages {
	margin: 0;
}

.mszf-messages:empty {
	display: none;
}

.mszf-messages.mszf-error {
	color: #b32d2e;
	font-weight: 600;
}

.mszf-messages.mszf-ok {
	color: #137333;
	font-weight: 600;
}

.mszf-done {
	padding: 1rem 1.25rem;
	border-radius: 8px;
	background: rgba( 19, 115, 51, 0.1 );
	color: #137333;
	font-weight: 600;
}

/* Our explicit display rules would beat the UA [hidden] rule — restore it. */
.mszf-form[hidden],
.mszf-success[hidden] {
	display: none;
}

.mszf-success .mszf-success-text {
	margin: 0;
}

.mszf-success .mszf-actions {
	margin-top: 0.75rem;
}

/* Honeypot: hidden from humans, present for bots. */
.mszf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}