:root {
	
	/** colours */
	--form-modal-backdrop-background: rgb(0 0 0 / 55%);
	
	--form-modal-background: var(--wp--preset--color--base, #fff);
	--form-modal-foreground: var(--wp--preset--color--contrast, #000);
	--form-modal-header-background: var(--wp--preset--color--grey-100,#f1f1f1);
	--form-modal-header-foreground: var(--wp--preset--color--contrast, #000);
	--form-modal-footer-background:var(--wp--preset--color--grey-100,#f1f1f1);
	--form-modal-footer-foreground: var(--wp--preset--color--contrast, #000);
	
	--form-modal-required-foreground: var(--wp--preset--color--danger, #b32d2e);
	--form-modal-border: var(--wp--preset--color--grey-300,#D3D3D3);
	--form-modal-separator-border: var(--wp--preset--color--grey-300,#D3D3D3);
	--form-modal-action-border: var(--wp--preset--color--grey-300,#D3D3D3);
	
	--form-modal-close-icon-background: transparent;
	--form-modal-close-icon-foreground: var(--wp--preset--color--contrast, #000);
	
	/* waiting list */
	--form-waiting-list-border:var(--wp--preset--color--primary-500, #3460AC);
	--form-waiting-list-foreground: var(--wp--preset--color--contrast, #000000);
	--form-waiting-list-foreground-accent: var(--wp--preset--color--primary-500, #3460AC);
	--form-waiting-list-background: var(--wp--preset--color--primary-100, #85A6DC);

	
	--form-modal-action-button-background:transparent;
	--form-modal-action-button-foreground: var(--wp--preset--color--primary-500, #3460AC);
	--form-modal-action-button-border:var(--wp--preset--color--primary-500, #3460AC);
	--form-modal-action-button-hover-background:transparent;
	--form-modal-action-button-hover-foreground: var(--wp--preset--color--primary-600, #006799);
	--form-modal-action-button-hover-border:var(--wp--preset--color--primary-600, #006799);
	
	--form-modal-action-button-alt-background: var(--wp--preset--color--primary-500, #3460AC);
	--form-modal-action-button-alt-foreground: var(--wp--preset--color--base, #fff);
	--form-modal-action-button-alt-border: var(--wp--preset--color--primary-500, #3460AC);
	--form-modal-action-button-alt-hover-background: var(--wp--preset--color--primary-600, #006799);
	--form-modal-action-button-alt-hover-foreground: #fff;
	--form-modal-action-button-alt-hover-border: var(--wp--preset--color--primary-600, #006799);
	
	/** shadows **/
	--form-modal-box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 25%);
	
	/** borders & radius's */
	--form-modal-border-syle: solid;
	--form-modal-border-radius: var(--wp--custom--border-radius--medium,2rem);
	--form-modal-action-button-border-radius: var(--wp--custom--border-radius--medium,2rem);
	--form-modal-input-border-radius: var(--wp--custom--border-radius--medium,2rem);
	
	--form-modal-border-width: 0;
	--form-modal-separator-border-width: 1px;
	--form-modal-action-border-width: 1px;
	--form-modal-action-button-border-width:1px;
	
	
	/** spacing */
	--form-modal-margin: auto;
	--form-modal-intro-margin: 0;
	--form-modal-field-label-margin-bottom:0;
	--form-waiting-list-margin: var(--wp--preset--spacing--40, 1rem);
	
	--form-model-padding: 0;
	--form-modal-heading-padding: var(--wp--preset--spacing--40, 1.25rem) var(--wp--preset--spacing--50, 1.5rem);
	--form-modal-body-padding: var(--wp--preset--spacing--50, 1.5rem);
	--form-modal-close-icon-padding: 0;
	--form-modal-field-padding: var(--wp--preset--spacing--30,0.75rem) var(--wp--preset--spacing--50, 1.5rem);
	--form-modal-action-button-padding: var(--wp--preset--spacing--30,0.75rem) var(--wp--preset--spacing--50,1.5rem);
	
	--form-modal-gap: var(--wp--preset--spacing--40, 1rem);
	--form-waiting-list-gap: var(--wp--preset--spacing--40, 1rem);
	--form-modal-close-icon-gap: var(--wp--preset--spacing--20, 0.5rem);
	--form-modal-body-gap: var(--wp--preset--spacing--50, 1.5);
	--form-modal-field-gap: var(--wp--preset--spacing--20, 0.5rem);
	--form-modal-field-option-gap: var(--wp--preset--spacing--20, 0.5rem);
	--form-modal-attendee-gap: var(--wp--preset--spacing--40, 1rem);
	--form-modal-attendee-padding: var(--wp--preset--spacing--40, 1rem);
	--form-modal-attendee-background: transparent;
	--form-modal-attendee-border: var(--form-modal-border);
	--form-modal-tab-background: transparent;
	--form-modal-tab-foreground: var(--form-modal-foreground);
	--form-modal-tab-border: var(--form-modal-border);
	--form-modal-tab-active-background: var(--form-modal-action-button-alt-background);
	--form-modal-tab-active-foreground: var(--form-modal-action-button-alt-foreground);
	--form-modal-tab-active-border: var(--form-modal-action-button-alt-border);
	--form-modal-tab-padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--40, 1rem);
	--form-modal-tab-gap: var(--wp--preset--spacing--20, 0.5rem);
	--form-modal-tab-border-radius: var(--form-modal-input-border-radius);
	


	
	/** width & height */
	--form-modal-max-width: min(42rem, calc(100% - 2rem));
	--form-modal-max-height: calc(100vh - 2rem);
	
	--form-modal-overflow: auto;
	
	/** typography */
	--form-modal-base-font-size: var(--wp--preset--font-size--normal, 1.5rem);
	--form-modal-header-font-size: var(--wp--preset--font-size--xlarge, 2.25rem);
	--form-modal-close-icon-font-size: var(--wp--preset--font-size--large, 1.75rem);
	--form-modal-action-button-font-size: var(--wp--preset--font-size--medium, 1.5rem);
	--form-modal-base-line-height: 1.5;
	--form-modal-base-font-family: inherit;
	
	--form-modal-close-icon-weight: 400;
	--form-modal-field-label-weight: 600;
	--form-modal-action-button-weight: 700;
	
	/** close modal */
	
	--form-modal-close-icon-width: 2.5rem;
	--form-modal-close-icon-height: 2.5rem;
	--form-modal-close-icon-line-height: 1;

}

.cs-product-form-dialog {
	box-sizing: border-box;
	width: var(--form-modal-max-width);
	max-height: var(--form-modal-max-height);
	margin: var(--form-modal-margin);
	padding: var(--form-model-padding);
	overflow: var(--form-modal-overflow);
	color: var(--form-modal-foreground);
	background: var(--form-modal-background);
	font-size: var(--form-modal-base-font-size);
	
	
	border-width: var(--form-modal-border-width);
	border-style: var(--form-modal-border-syle);
	border-color: var(--form-modal-border);
	
	border-radius: var(--form-modal-border-radius);
	box-shadow: var(--form-modal-box-shadow);
}

.cs-product-form-dialog::backdrop {
	background: var(--form-modal-backdrop-background);
}

.cs-product-form-dialog__header,
.cs-product-form-dialog__footer {
	display: flex;
	align-items: center;
	gap: var(--form-modal-gap);
	padding: var(--form-modal-heading-padding);
}

.cs-product-form-dialog__header {
	justify-content: space-between;
	border-bottom-width: var(--form-modal-separator-border-width);
	border-bottom-style: var(--form-modal-border-syle);
	border-bottom-color: var(--form-modal-separator-border);
	background: var(--form-modal-header-background);
	color: var(--form-modal-header-foreground);
}

.cs-product-form-dialog__title {
	margin: 0;
	font-size: var(--form-modal-header-font-size);
}

.cs-product-form-dialog__close {
	display: grid;
	font-weight: var(--form-modal-close-icon-weight);
	gap: var(--form-modal-close-icon-gap);
	width: var(--form-modal-close-icon-width);
	height: var(--form-modal-close-icon-height);
	padding: var(--form-modal-close-icon-padding);
	font-size: var(--form-modal-close-icon-font-size);
	line-height: var(--form-modal-close-icon-line-height);
	background: var(--form-modal-close-icon-background);
	color: var(--form-modal-close-icon-foreground);
	place-items: center;
	border: 0;
	cursor: pointer;
}

.cs-product-form-dialog__body {
	display: grid;
	gap: var(--form-modal-body-gap);
	padding: var(--form-modal-body-padding);
}

.cs-product-form-dialog__intro {
	margin: var(--form-modal-intro-margin);
}

.cs-product-form-attendee-count {
	margin: 0;
	font-weight: var(--form-modal-field-label-weight);
}

.cs-product-form-attendees {
	display: grid;
	gap: var(--form-modal-attendee-gap);
}

.cs-product-form-attendee-tabs,
.cs-product-booking-tabs {
	display: flex;
	gap: var(--form-modal-tab-gap);
	overflow-x: auto;
	padding-block-end: var(--form-modal-tab-gap);
}

.cs-product-form-attendee-tabs[hidden] {
	display: none;
}

.cs-product-form-attendee-tab {
	flex: 0 0 auto;
	padding: var(--form-modal-tab-padding);
	color: var(--form-modal-tab-foreground);
	background: var(--form-modal-tab-background);
	border: 1px solid var(--form-modal-tab-border);
	border-radius: var(--form-modal-tab-border-radius);
	font: inherit;
	cursor: pointer;
}

.cs-product-form-attendee-tab[aria-selected='true'] {
	color: var(--form-modal-tab-active-foreground);
	background: var(--form-modal-tab-active-background);
	border-color: var(--form-modal-tab-active-border);
}

.cs-product-form-attendee-tab.is-invalid {
	border-color: var(--form-modal-required-foreground);
}

.cs-product-form-attendee-tab:focus-visible {
	outline: 2px solid var(--form-modal-tab-active-border);
	outline-offset: 2px;
}

.cs-product-form-attendee {
	display: grid;
	gap: var(--form-modal-field-gap);
	min-width: 0;
	margin: 0;
	padding: var(--form-modal-attendee-padding);
	background: var(--form-modal-attendee-background);
	border: 1px solid var(--form-modal-attendee-border);
	border-radius: var(--form-modal-input-border-radius);
}

.cs-product-form-attendee[hidden] {
	display: none;
}

.cs-product-form-attendee > legend {
	padding-inline: 0.4em;
	font-weight: var(--form-modal-field-label-weight);
}

.cs-product-form-field {
	display: grid;
	gap: var(--form-modal-field-gap);
}

.woocommerce-page .cs-product-form-field__label {
	font-weight: var(--form-modal-field-label-weight);
	margin-bottom:var(--form-modal-field-label-margin-bottom);
}

.cs-product-form-field__required {
	color: var(--form-modal-required-foreground);
}

.cs-product-form-field input:not([type='radio'], [type='checkbox']),
.cs-product-form-field textarea,
.cs-product-form-field select {
	box-sizing: border-box;
	width: 100%;
	padding: var(--form-modal-field-padding);
	font: inherit;
	border-radius:var(--form-modal-input-border-radius);
	border-style: var(--form-modal-border-syle);
}

.cs-product-form-field__options {
	display: grid;
	gap: var(--form-modal-field-option-gap);
}

.cs-product-form-field__options label {
	display: flex;
	align-items: center;
	gap: var(--form-modal-field-option-gap);
}

.cs-product-form-dialog__footer {
	justify-content: flex-end;
	flex-wrap: wrap;
	border-top-width: var(--form-modal-action-border-width);
	border-top-style: var(--form-modal-border-syle);
	border-top-color: var(--form-modal-action-border);
	background: var(--form-modal-action-background);
	color: var(--form-modal-action-foreground);
}

.cs-product-form-dialog__actions {
	display:flex;
	justify-content: space-between;
	width: 100%;
}

/** buttons */
.cs-waiting-list__signup .button,
.cs-product-form-dialog__actions > .button {
	background: var(--form-modal-action-button-background);
	color: var(--form-modal-action-button-foreground);
	border-width: var(--form-modal-action-button-border-width);
	border-style: var(--form-modal-border-syle);
	border-color: var(--form-modal-action-button-border);
	font-size: var(--form-modal-action-button-font-size);
	border-radius: var(--form-modal-action-button-border-radius);
	font-weight:var(--form-modal-action-button-weight);
	padding:var(--form-modal-action-button-padding);
	cursor: pointer;
}

.cs-waiting-list__signup .button.alt,
.cs-product-form-dialog__actions > .button.alt{
	background: var(--form-modal-action-button-alt-background);
	color: var(--form-modal-action-button-alt-foreground);
	border-color: var(--form-modal-action-button-alt-border);
}

.cs-product-form-dialog__actions > .button:hover {
	background: var(--form-modal-action-button-hover-background);
	color: var(--form-modal-action-button-hover-foreground);
	border-color: var(--form-modal-action-button-hover-border);
}

.cs-waiting-list__signup .button.alt:hover,
.cs-product-form-dialog__actions > .button.alt:hover{
	background: var(--form-modal-action-button-alt-hover-background);
	color: var(--form-modal-action-button-alt-hover-foreground);
	border-color: var(--form-modal-action-button-alt-hover-border);
}

@media (max-width: 480px) {
	.cs-product-form-dialog__actions > .button {
		width: 100%;
	}
}

.cs-waiting-list {
	display: none;
	margin-block: var(--form-modal-body-padding);
	padding: var(--form-modal-body-padding);
	border: 1px solid var(--form-waiting-list-border);
	border-radius: var(--form-modal-border-radius);
	background: var(--form-waiting-list-background);
	color:var(--form-waiting-list-foreground);
}

.cs-waiting-list__signup > p {
	margin-bottom: var(--form-waiting-list-margin);
}

.cs-waiting-list .user-notify-text{
	color:var(--form-waiting-list-foreground-accent);
}

.cs-waiting-list.is-active {
	display: block;
}

.cs-waiting-list h3 {
	margin-top: 0;
}

.cs-waiting-list__form {
	display: grid;
	gap: var(--form-waiting-list-gap);
}

.cs-waiting-list__form input[type='email'] {
	box-sizing: border-box;
	width: 100%;
	padding: var(--form-modal-field-padding);
}

.cs-waiting-list__submit[hidden] {
	display: none !important;
}

.cs-waiting-list__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

form.cart.cs-waiting-list-gated .single_add_to_cart_button,
form.cart.cs-waiting-list-gated .quantity {
	display: none !important;
}

.cs-product-booking-access,
.cs-product-previous-bookings,
.cs-product-booking-editor {
	margin-block: var(--wp--preset--spacing--50, 1.5rem);
}

.cs-product-booking-entry {
	display: grid;
	gap: var(--form-modal-field-gap);
	margin-block: var(--wp--preset--spacing--40, 1rem);
	padding: var(--form-modal-body-padding);
	color: var(--form-modal-foreground);
	background: var(--form-modal-attendee-background);
	border: 1px solid var(--form-modal-attendee-border);
	border-radius: var(--form-modal-input-border-radius);
}

.cs-product-booking-entry[hidden] {
	display: none;
}

.cs-product-booking-panels {
	min-width: 0;
}

.cs-product-booking-field {
	display: grid;
	gap: var(--form-modal-field-gap);
}

.cs-product-booking-field > span,
.cs-product-booking-entry > legend {
	font-weight: var(--form-modal-field-label-weight);
}

.cs-product-booking-field input:not([type='checkbox'], [type='radio']),
.cs-product-booking-field textarea,
.cs-product-booking-field select {
	box-sizing: border-box;
	width: 100%;
	padding: var(--form-modal-field-padding);
	font: inherit;
	border-radius: var(--form-modal-input-border-radius);
}