/**
 * Separate Date and Time booking steps — all viewports.
 * Panel stays active for both `date` and `time`; CSS shows the relevant column.
 */

/* Keep the desktop date/time module visible; hide the mobile twin. */
.bpa-front-tabs--panel-body.bp-step-is-date .bpa-front-module--date-and-time:not(.__sm),
.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front-module--date-and-time:not(.__sm) {
	display: block !important;
}

.bpa-front-tabs--panel-body.bp-step-is-date .bpa-front-module--date-and-time.__sm,
.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front-module--date-and-time.__sm {
	display: none !important;
}

/* Single-column layout for each dedicated step. */
.bpa-front-tabs--panel-body.bp-step-is-date .bpa-front--dt__wrapper,
.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front--dt__wrapper {
	display: block !important;
	grid-template-columns: 1fr !important;
	margin: 0 !important;
}

.bpa-front-tabs--panel-body.bp-step-is-date .bpa-front--dt__col,
.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front--dt__col {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	flex: 0 0 100% !important;
}

/* Date step: calendar only. */
.bpa-front-tabs--panel-body.bp-step-is-date .bpa-front-dt__timeslot-col {
	display: none !important;
}

/* Time step: slots only; hide the shared Date heading row. */
.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front--dt__col:not(.bpa-front-dt__timeslot-col) {
	display: none !important;
}

.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front-module--date-and-time:not(.__sm) > .el-row:first-of-type {
	display: none !important;
}

.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front-dt__timeslot-col {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front--dt__time-slots {
	display: block !important;
}

/* Override legacy mobile rules that hide the desktop module. */
@media (max-width: 576px), (min-width: 768px) and (max-width: 991px) {
	.bpa-front-tabs--panel-body.bp-step-is-date .bpa-front-module--date-and-time:not(.__sm),
	.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front-module--date-and-time:not(.__sm) {
		display: block !important;
	}

	.bpa-front-tabs--panel-body.bp-step-is-date .bpa-front-module--date-and-time.__sm,
	.bpa-front-tabs--panel-body.bp-step-is-time .bpa-front-module--date-and-time.__sm {
		display: none !important;
	}
}