.header-booking-bar {
	padding-inline: 16px;
	margin-block: 8px;

	display: flex;
	flex-direction: column;

	min-height: 56px;

	& .header-booking-bar-outer {
		flex-grow: 1;

		display: flex;
		flex-direction: column;
		padding-block: 8px;
		background: var(--color-bg-2);
		border-radius: var(--radius-md);

		& .header-booking-bar-container {
			flex-grow: 1;

			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			height: 100%;

			overflow: clip;
			row-gap: 8px;

			& .header-booking-bar-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 2px;
				padding-inline: 16px;

				border-right: 1px solid var(--color-border);
				margin-right: -1px;

				& .header-booking-bar-item-label {
					color: var(--color-fg-2);
				}

				& .header-booking-bar-item-value {
					color: var(--color-fg-1);
				}
			}

			& .header-booking-bar-cta {
				display: flex;
				gap: 8px;
				padding-inline: 8px;

				& .header-booking-bar-cta-book {
					flex-grow: 1;
					border-radius: var(--radius);
					height: auto;

					& .header-booking-bar-cta-book-icon {
						margin: -8px;
						height: 3em;
					}
				}
			}
		}
	}

	body:not(.page) & {
		display: none;
	}
}
