@media (max-width: 480px) {
	.spektrix-widget-form {
		gap: 1rem;
	}

	.spektrix-widget-form > button,
	.spektrix-widget-date-field > button {
		padding: 0.6rem 0.4rem;
	}

	.spektrix-calendar-nav button {
		padding: 0.5rem;
	}

	.spektrix-calendar-nav {
		flex-wrap: wrap;
	}

	.spektrix-calendar-nav :is(h3, [data-widget-month-label]) {
		order: -1;
		flex: 0 0 100%;
		margin: 0 0 0.5rem;
	}

	.spektrix-calendar-nav h3 {
		font-size: 1.1rem;
	}

}

@media (max-width: 1024px) {
	.spektrix-widget-form:has(.spektrix-event-choice) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.spektrix-booking .spektrix-button {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.spektrix-widget-form,
	.spektrix-widget-form:has(.spektrix-event-choice) {
		grid-template-columns: 1fr;
	}

	.spektrix-widget-picker {
		max-width: 100%;
	}

	.spektrix-booking .spektrix-button {
		margin-top: 16px;
	}
}

/* Container sizing must win over viewport breakpoints in narrow Elementor columns. */
@container (max-width: 30rem) {
	.spektrix-widget-form,
	.spektrix-widget-form:has(.spektrix-event-choice) {
		grid-template-columns: 1fr;
	}

	.spektrix-widget-picker {
		max-width: 100%;
	}
}