/**
 * Reservation Manager — structural styles.
 *
 * Layout only. Every visual property (colour, padding, radius, typography)
 * lives in form-theme.css or, inside Elementor, in the widget's style controls.
 * Keeping them out of this file is what stops Elementor controls being
 * silently overridden.
 */

.resm-form {
	display: block;
	position: relative;
	box-sizing: border-box;
}

.resm-form *,
.resm-form *::before,
.resm-form *::after {
	box-sizing: inherit;
}

.resm-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.resm-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

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

/*
 * Only fields that share a row compete for horizontal space. A field placed
 * directly in the column layout would read "180px" as a HEIGHT, which left a
 * dead gap under the Occasion and Notes fields.
 */
.resm-row > .resm-field {
	flex: 1 1 180px;
}

.resm-label {
	display: block;
}

.resm-input {
	display: block;
	width: 100%;
	min-width: 0;
	font-family: inherit;
	max-width: 100%;
}

.resm-textarea {
	resize: vertical;
}

.resm-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.resm-slot {
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.resm-submit {
	display: block;
	width: 100%;
	cursor: pointer;
	font-family: inherit;
}

.resm-submit[disabled] {
	cursor: progress;
	opacity: 0.7;
}

.resm-details {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.resm-details[hidden] {
	display: none;
}

.resm-message:empty,
.resm-slots-note:empty {
	display: none;
}

.resm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.resm-input-error {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

@media (max-width: 480px) {

	.resm-row {
		flex-direction: column;
	}
}