/**
 * AN Booking bar module (inc/elementor/modules/booking-bar.php), Figma Home "Booking bar":
 * 1200 x 88, cream, radius 16, ink 25% rule, padding 16 / 16 / 16 / 8. Fields 56 high, padding
 * 4 / 16: label 12 / 150% muted, 4 above the value (17 / 150% ink) and its icon; fields after
 * the first have a muted 35% rule on the left. The button is as wide as its label.
 * 834: fields 140 / 314 / 140, the middle one (the date) takes the room left.
 */

.an-m-bar__bar {
	display: flex;
	align-items: center;
	padding: 16px 16px 16px 8px;
	border: 1px solid color-mix(in srgb, var(--an-c-ink) 25%, transparent);
	border-radius: var(--an-radius-bar);
	background: var(--an-c-cream);
}

.an-m-bar__field {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	min-height: 56px;
	padding: 4px 16px;
	color: var(--an-c-ink);
	text-decoration: none;
}

.an-m-bar__field + .an-m-bar__field {
	border-left: 1px solid color-mix(in srgb, var(--an-c-muted) 35%, transparent);
}

.an-m-bar__label {
	color: var(--an-c-muted);
	font-size: var(--an-fs-label);
	line-height: var(--an-lh-text);
}

.an-m-bar__value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 17px;
	line-height: var(--an-lh-text);
}

.an-m-bar__icon,
.an-m-bar__button {
	flex: none;
}

.an-m-bar__button {
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.an-m-bar__field {
		flex: 0 0 140px;
	}

	.an-m-bar__field:nth-of-type(2) {
		flex: 1 1 auto;
	}
}