/* ABOUTME: Styles for closed questions, person/room groups, conference day layout, and gender distribution. */
/* ABOUTME: Covers the grouped form sections that appear in booking steps. */

/* Closed question blocks */
.closed-question {
	border: 1px solid;
	border-radius: 5px;
	padding: 1rem;
	margin: 1rem 0;
}

.closed-question p {
	margin: 0 0 1rem 0;
	font-weight: 500;
}

.question-buttons {
	display: flex;
	gap: 1rem;
}

/* Person/room groups */
.person-group {
	display: flex;
	gap: 0.3rem;
}

.room-group,
.person-group {
	background-color: #eee;
	padding: 0.7rem;
	border-radius: 5px;
	align-items: flex-end;
}

/* Conference day layout */
.conference-day {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 0.5rem;
	align-items: flex-start;
}

/* Conference rows: room name on first line, controls on second */
.conference-row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
	width: 100%;
	background-color: #e5f4f5;
	padding: 0.75rem;
	border-radius: 5px;
}

.conference-room-name {
	flex: 1 0 100%;
	padding-right: 3rem;
}

.conference-row .form-field-select {
	flex: 1 1 12rem;
	min-width: 0;
}

.conference-row [id*="start_time"],
.conference-row [id*="end_time"] {
	flex: 0 0 fit-content;
}

.conference-row button[name="action"] {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	border-radius: 3px;
}

/* Reset form */
form.reset-form {
	padding: 0.5rem;
	display: flex;
	align-items: flex-end;
}


/* Gender distribution */
.values {
	display: flex;
	gap: 15px;
	align-items: flex-end;
}

.number-input {
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	min-width: 8ch;
}

/* --- Desktop (>=1024px) --- */

@media screen and (min-width: 1024px) {
	.number-input {
		font-size: 32px;
		min-width: 12ch;
	}
}

/* --- Narrow mobile (<=400px) --- */

@media screen and (max-width: 400px) {
	.conference-row select {
		font-size: 0.95rem;
	}
}