.booking-section {
	--error-dialog-bg-color: var(--popup-bg-color);
	--form-bg-color: var(--secondary-bg-color);
	--step-bg-color: var(--primary-rounded-button-bg-color);
	--step-color: var(--primary-rounded-button-text-color);
	--inactive-step-bg-color: var(--inactive-color);
	--inactive-step-color: var(--inactive-color);
	--select-icon-color: var(--tertiary-text-color);
	--select-bg-color: var(--primary-bg-color);
	--datepicker-bg-color: var(--primary-bg-color);
	--date-unavailable-bg-color: linear-gradient(to top right, transparent calc(50% - 1px), var(--primary-text-color), transparent calc(50% + 1px));
}

html:not(:has(.header-section:focus-within)) {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

.booking-section .container {
	row-gap: 2rem;

	@media (width >= 56.25rem) {
		row-gap: 0;
	}
}

.booking-intro {
  background-image: 
    var(--primary-image-overlay), 
    var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  height: fit-content;
	border-radius: 0.5rem;
	padding: 2rem;

  @media (width >= 56.25rem) {
    grid-column: 1 / 9;
		border-radius: 0.5rem 0 0 0.5rem;
		padding: 3rem;
  }
}

.booking-intro-title {
  text-align: left;
}

.booking-intro-contact-list {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.booking-intro-contact-item-link {
  display: flex;
  align-items: center;
  width: fit-content;
  column-gap: 0.5rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25rem;
  transition: text-decoration-color 0.3s;

  &:before {
    mask-image: var(--icon);
    display: block;
  }

  &:hover {
    text-decoration-color: currentColor;
  }
}

.booking-form {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  padding: 2rem;
	background-color: var(--form-bg-color);
	border: var(--border-secondary);

  @media (width >= 56.25rem) {
    grid-column: 9 / -1;
  }

	&:has(.booking-step[data-step="1"][aria-current="step"]) .booking-previous-button {
		display: none;
	}

	&:has(.booking-step.confirmation[aria-current="step"]) .booking-submit-button {
		display: flex;
	}

	&:has(.booking-step.confirmation[aria-current="step"]) .booking-next-button {
		display: none;
	}

	&[aria-busy="true"] .booking-submit-button span {
		visibility: hidden;
	}

	&[aria-busy="true"] .booking-submit-button:before {
    display: block;
    mask-image: url('../../assets/icons/loader.svg');
    animation: spin 1s linear infinite;
    position: absolute;
    left: 50%;
    translate: -50% 0;
	}
}

.booking-steps {
	display: flex;
	column-gap: 1rem;
	justify-content: space-evenly;
	padding-bottom: 2rem;
	border-bottom: var(--border-secondary);
}

.booking-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0.5rem;

	&[data-skip="true"] {
		display: none;
	}

	&[aria-current="step"]:before {
		background-color: var(--step-bg-color);
		color: var(--step-color);
	}

	&:before {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 100%;
		text-align: center;
		line-height: 0;
		letter-spacing: 0;
		color: var(--step-color);
		background-color: var(--inactive-step-bg-color);
	}

	&.complete:before {
		content: '✓';
		background-color: var(--step-bg-color);
		color: var(--step-color);
	}

	&[data-step="1"]:not(.complete):before {
		content: '1';
	}

	&[data-step="2"]:not(.complete):before {
		content: '2';
	}

	&[data-step="3"]:not(.complete):before {
		content: '3';
	}

	&[data-step="4"]:not(.complete):before {
		content: '4';
	}

	&[data-step="5"]:not(.complete):before {
		content: '5';
	}
}

.booking-step span {
	@media (width < 37.5rem) {
		display: none;
	}
}

.booking-step-content {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
  min-inline-size: initial;
	border: none;

	&.hidden {
		display: none;
	}
}

.booking-step-content-title {
	margin-bottom: 1.5rem;
	text-align: center;
	width: 100%;
}

.booking-form .button-container {
	width: 100%;
	justify-content: center;
	column-gap: 2rem;
	display: flex;
}

.booking-confirm-button-text,
.booking-checkout-button-text {
	display: none;
}

.booking-submit-button {
	display: none;
	position: relative;

	&[data-deposit="true"]:before {
		mask-image: url('../../assets/icons/lock.svg');
		display: block;
	}

	&[data-deposit="true"] .booking-checkout-button-text {
		display: flex;
	}

	&[data-deposit="false"] .booking-confirm-button-text {
		display: flex;
	}

	&:disabled {
		opacity: 0.5;
		pointer-events: none;
	}
}

.booking-services-container.hidden {
	display: none;
}

.booking-service-categories {
	display: flex;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	margin-bottom: 1.5rem;
	padding-bottom: 0.25rem;
	column-gap: 1rem;
	overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.booking-service-category button {
	border: var(--border-primary);
	padding: 0.5rem 1rem;
	text-transform: initial;
	border-radius: 2rem;

	&:hover {
		background-color: var(--primary-button-bg-color);
		color: var(--primary-button-text-color);
	}

	&[aria-current="true"] {
		background-color: var(--primary-button-bg-color);
		color: var(--primary-button-text-color);
	}
}

.booking-service-container {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	margin-inline: auto;
}

.booking-service-label {
	border: var(--border-primary);
	padding: 0.5rem 1rem;
	text-transform: initial;

	&:hover {
		background-color: var(--primary-button-bg-color);
		color: var(--primary-button-text-color);
	}
}

.service-input:checked + .booking-service-label {
	background-color: var(--primary-button-bg-color);
	color: var(--primary-button-text-color);
}

.booking-form-party-size-container {
	display: grid;
	row-gap: 1rem;
	column-gap: 0.5rem;
	margin-inline: auto;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
}

.booking-party-size-label {
	border: var(--border-primary);
	padding: 0.5rem 1rem;
	text-transform: initial;
	width: auto;

	&:hover {
		background-color: var(--primary-button-bg-color);
		color: var(--primary-button-text-color);
	}
}

.party-size-input:checked + .booking-party-size-label {
	background-color: var(--primary-button-bg-color);
	color: var(--primary-button-text-color);
}

.booking-form-datepicker {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	padding: 1rem;
	background-color: var(--datepicker-bg-color);
	position: relative;

	&:has(.booking-datepicker-days[aria-busy="true"]):after {
		mask-image: url('../../assets/icons/loader.svg');
		display: block;
		animation: spin 1s linear infinite;
		left: 50%;
		translate: -50% 0;
		position: absolute;
		top: 50%;
	}
}

.booking-datepicker-header {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.booking-datepicker-month-year {
	display: flex;
	justify-content: center;
	column-gap: 2rem;
	align-items: center;
}

.booking-datepicker-button {
	display: flex;

	&.prev:after {
		mask-image: url("../../assets/icons/angle-left.svg");
		display: block;
	}

	&.next:after {
		mask-image: url("../../assets/icons/angle-right.svg");
		display: block;
	}

	&:disabled {
		opacity: 0.5;
		pointer-events: none;
	}
}

.booking-datepicker-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.booking-datepicker-weekday {
	text-align: center;
	padding: 0.25rem 0;
}

.booking-datepicker-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(6, 1fr);

	&[aria-busy="true"] {
		visibility: hidden;
	}
}

.booking-form-label.day {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	cursor: pointer;
	border: var(--border-secondary);
	padding: 0.25rem 0;
	width: 100%;

	&:hover {
		border-color: var(--border-primary);
	}

	&:has(input:checked) {
		border: var(--border-primary);
		background-color: var(--primary-button-bg-color);
		color: var(--primary-button-text-color);
	}

	&:has(input:disabled) {
		opacity: 0.5;
		pointer-events: none;
		position: relative;

		&:after {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: var(--date-unavailable-bg-color);
		}
	}
}

.booking-form-timepicker-container {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;

	&:has(.booking-form-timepicker[aria-busy="true"]):after {
		mask-image: url('../../assets/icons/loader.svg');
		display: block;
		animation: spin 1s linear infinite;
		align-self: center;
	}
}

.booking-form-timepicker {
	display: grid;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));

	&[aria-busy="true"] {
		display: none;
	}
}

.booking-form-label.time {
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	border: var(--border-secondary);
	width: auto;

	&:hover {
		border-color: var(--border-primary);
	}

	&:has(input:checked) {
		border: var(--border-primary);
		background-color: var(--primary-button-bg-color);
		color: var(--primary-button-text-color);
	}

	&.template {
		display: none;
	}
}

.booking-customer-info {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.booking-form-label.customer-info {
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
}

.booking-form-label.customer-info :is(input, textarea) {
	padding: 0.5rem;
	border: var(--border-secondary);
}

.booking-form-label.customer-info textarea {
	resize: vertical;
	field-sizing: content;
	min-height: 3lh;
	box-sizing: content-box;
}

.booking-form-checkbox {
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
	cursor: pointer;
}

#invoice {
	cursor: pointer;
}

.booking-invoice-fields {
	display: none;
}

.booking-customer-info:has(#invoice:checked) .booking-invoice-fields {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.inline-field-group {
  display: grid;
  row-gap: 1.5rem;

  @media (width >= 56.25rem) {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0;
  }
}

.booking-confirmation-message {
	text-align: center;
}

.booking-confirmation-details {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.booking-confirmation-detail {
	display: flex;
	justify-content: space-between;
	column-gap: 1rem;

	&:has(.booking-confirmation-detail-value:empty) {
		display: none;
	}

	&.hidden {
		display: none;
	}
}

.booking-confirmation-detail-label {
	font-weight: var(--font-weight-semibold);
}

.booking-error-dialog {
  width: 30rem;
  max-width: 90%;
  max-height: 90%;
  background-color: var(--error-dialog-bg-color);
  border: var(--border-primary);
  margin: auto;

  &::backdrop {
    background-color: var(--backdrop-bg-color);
  }
}

.booking-confirmation-detail-value {
	text-align: end;
}

.booking-error-dialog-content {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 1rem;
  align-items: center;
}

.booking-error-dialog-title {
  color: var(--error-color);
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;

  &:before {
    display: block;
    mask-image: url('../../assets/icons/warning.svg');
  }
}

.booking-error-dialog-message {
  text-align: center;
}

.booking-error-dialog-button {
  margin-top: 1rem;
}

.booking-error-dialog-close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;

  &:before {
    mask-image: url('../../assets/icons/close.svg');
    display: block;
  }
}