.courser {
	.courser__title {
		&:is(h1) {
			font-weight: 700;
			font-size: 2.5rem;
		}
	}

	.courser__description {
		color: #393939;
	}

	.courser__link {
		&:not(.wp-element-button) {
			color: #f60404;
			text-decoration: underline;
			font-weight: 500;
			text-decoration-thickness: 2px;
			text-underline-offset: 2px;
			width: fit-content;

			&:hover {
				text-decoration: none;
			}
		}

		&.courser__link--back {
			display: flex;
			align-items: center;
			gap: 0.875rem;
			color: #f60404;
			font-size: 1.125rem;
			text-decoration: none;

			&::before {
				content: "";
				width: 1.5rem;
				height: 1.5rem;
				display: inline-block;
				background-size: cover;
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23f60404"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>');
			}
		}
	}

	.courser__divider {
		border-color: #dedede;
	}

	.courser__disclaimer {
		color: #606060;
	}

	.courser__slots {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;

		.courser__slots__available {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			font-weight: 500;
			color: #000;

			&::before {
				content: "";
				display: inline-block;
				flex-shrink: 0;
				width: 0.675rem;
				height: 0.675rem;
				border-radius: 1rem;
			}
		}

		.courser__slots__total {
			font-weight: 400;
			color: #606060;

			&:first-letter {
				text-transform: uppercase;
			}
		}

		&.courser__slots--available {
			.courser__slots__available::before {
				background: #0ec11a;
			}
		}

		&.courser__slots--limited {
			.courser__slots__available::before {
				background: #dcae17;
			}
		}

		&.courser__slots--full {
			.courser__slots__available {
				color: #606060;

				&::before {
					background: #ff0000;
				}
			}
		}
	}

	.courser__button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.75rem 1.25rem;
	}

	.courser__instances_item {
		border-top: 1px solid #dedede;
		padding-block: 2rem;

		&:last-child {
			border-bottom: 1px solid #dedede;
		}

		.courser__details {
			display: grid;
			grid-template-columns: 1fr;
			gap: 0.25rem;

			@media (width < 1200px) {
				.courser__details__item--duration,
				.courser__details__item--slots,
				.courser__details__item--directions {
					margin-bottom: 1.5rem;
				}
			}

			@media (width >= 1200px) {
				grid-auto-flow: column;
				grid-template-rows: 1fr 1fr;
				grid-template-columns: 4fr 2fr 3fr 1fr;
				gap: 0.25rem 1rem;

				.courser__details__item {
					&.courser__details__item--slots {
						grid-row: 1 / -1;
						gap: inherit;

						.courser__slots {
							height: 100%;
							display: grid;
							align-items: start;
							grid-template-rows: subgrid;
							gap: inherit;
						}
					}

					&.courser__details__item--price {
						grid-row: 1 / -1;
						height: 100%;
						display: grid;
						align-items: start;
						grid-template-rows: subgrid;
						gap: inherit;
					}
				}
			}

			.courser__details__item {
				grid-column: unset;
				font-weight: 500;
				order: unset;
				color: #000;

				&.courser__details__item--start-date {
					order: 10;
				}

				&.courser__details__item--duration {
					order: 10;

					text-align: left;
					color: #606060;
					font-weight: 400;
				}

				&.courser__details__item--slots {
					order: 20;
				}

				&.courser__details__item--location {
					order: 30;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&.courser__details__item--directions {
					order: 30;

					.courser__link {
						color: #606060;
						font-weight: 400;
						text-decoration-thickness: 1px;
					}
				}

				&.courser__details__item--price {
					order: 40;
					display: flex;
					flex-direction: column;
					gap: inherit;

					&::after {
						content: "Plus VAT";
						color: #606060;
						font-weight: 400;
					}
				}
			}
		}
	}

	.courser__accordion {
		border-top: 1px solid #dedede;

		&:last-of-type {
			border-bottom: 1px solid #dedede;
			margin-bottom: 3rem;
		}

		&[open] {
			padding-bottom: 2rem;

			.courser__accordion__summary::after {
				transform: rotate(180deg);
			}
		}

		.courser__accordion__summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 1.375rem;
			font-weight: 600;
			padding-block: 2rem;
			cursor: pointer;

			&::after {
				content: "";
				display: block;
				width: 1.75rem;
				height: 1.75rem;
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000000"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				transition: transform 400ms ease;
			}
		}
	}

	.courser__field {
		display: flex;
		flex-direction: column;

		.courser__label {
			padding-bottom: 0.675rem;
		}

		.courser__input {
			border-radius: 0.25rem;
			background: #ededed;
			padding: 0.75rem 1rem;

			&[type="number"] {
				&::-webkit-inner-spin-button,
				&::-webkit-outer-spin-button {
					opacity: 1;
				}
			}
		}

		.courser__textarea {
			border-radius: 0.25rem;
			background: #ededed;
			padding: 0.75rem 1rem;
			min-height: 5rem;
		}

		&.courser__field--checkbox {
			flex-direction: row;
			gap: 1rem;
			align-items: center;

			.courser__label {
				padding-bottom: 0;
			}

			.courser__checkbox {
				width: 1.25rem;
				height: 1.25rem;
				accent-color: #ff0000;
			}
		}
	}

	.courser__fieldset {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.courser__repeater {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		align-items: center;

		.courser__repeater__item {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1rem;
			grid-column: 1 / -1;
			border: 1px solid #dedede;
			padding: 1.5rem;
			order: 20;

			.courser__repeater__item__legend {
				order: 10;
				display: block;
				float: left;
				font-weight: 600;
				font-size: 1.25rem;
			}

			.courser__button--repeater-remove-item {
				order: 20;
				padding: 0;
				background: none;
				color: #606060;
				width: fit-content;
				margin-left: auto;
				cursor: pointer;

				&[disabled] {
					opacity: 0;
					pointer-events: none;
				}
			}

			.courser__field {
				order: 30;
			}
		}

		.courser__button--repeater-add-item {
			background: #000;
			width: fit-content;
			order: 30;
		}

		.courser__slots {
			order: 40;
			margin-left: auto;
		}
	}

	.courser__figure {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;

		.courser__figure__image {
			aspect-ratio: 16/9;
			object-fit: cover;
			object-position: center;
			border-radius: 0.25rem;
		}

		.courser__figure__badge {
			position: absolute;
			top: 1rem;
			left: 1rem;
			background: #fff;
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.375rem 0.675rem;
			border-radius: 2rem;
			box-shadow: 0 0.25rem 0.5rem rgba(0 0 0 / 15%);

			&::before {
				content: "";
				width: 1.25rem;
				height: 1.25rem;
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000000"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}
		}

		.courser__figure__caption {
			font-weight: 500;
			font-size: 1.25rem;
		}
	}

	.courser__output {
		position: relative;
		background: #f8f8f8;
		border-bottom: 1px solid #dedede;
		padding: 1rem 1.5rem;

		@media (width >= 992px) {
			padding: 1rem 2.5rem;
		}

		@media (width >= 1280px) {
			padding: 1rem 3.5rem;
		}

		&:has(.courser__success) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 2rem;
		}

		&:not(:has(.courser__success, .courser__error)) {
			.courser__output__close {
				position: absolute;
				top: 1rem;
				right: 1rem;
			}
		}

		.courser__output__close {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 3rem;
			height: 3rem;
			font-size: 2rem;
			order: 90;
		}

		.courser__figure {
			max-width: 24rem;
		}

		.courser__title {
			order: -1;
			width: 100%;
		}

		&:has(.courser__card) {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			gap: 1rem 1.5rem;

			@media (width >= 992px) {
				flex-direction: row;
				gap: 1rem 2.5rem;
				padding: 2.5rem;
			}

			@media (width >= 1280px) {
				gap: 1rem 3.5rem;
				padding: 3.5rem;
			}
		}
	}

	.courser__booking {
		display: flex;
		flex-direction: column;
		gap: 2rem;

		.courser__booking__courses {
			display: flex;
			flex-direction: column;
			gap: 2rem;

			.courser__booking__course {
				.courser__booking__course__name {
					display: block;
					font-weight: 500;
					margin-bottom: 1rem;

					.courser__booking__course__date {
						display: block;
						color: #606060;
						font-weight: 400;
					}
				}

				.courser__booking__course__participants {
					display: flex;
					flex-direction: column;
					gap: 0.5rem;
					color: #606060;
					font-weight: 400;

					.courser__booking__course__participant {
						display: grid;
						grid-template-columns: 1fr 1fr 1fr 1fr;
						gap: 1rem;

						.courser__booking__course__participant__name {
							grid-column: 1/3;
						}

						.courser__booking__course__participant__price {
							color: #000;
							text-align: right;
							margin-left: auto;
						}

						.wp-element-button:not(.courser__add_to_cart) {
							padding: 0;
							background: 0;
							color: #606060;
							text-decoration: underline;
							font-weight: 300;
							margin-left: auto;
							width: fit-content;
						}
					}
				}

				.courser__upsells {
					margin-top: 1.5rem;
				}
			}
		}

		.courser__booking__lines {
			display: flex;
			flex-direction: column;
			gap: 2rem;

			.courser__booking__line {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				gap: 1rem;

				.courser__booking__line__name {
					flex-basis: 66%;
					font-weight: 500;

					@media (width < 600px) {
						grid-column: 1/3;
					}
				}

				.courser__booking__line__price-per-unit {
					display: none;
				}

				.courser__booking__line__quantity {
					@media (width < 600px) {
						display: none;
					}
				}

				.courser__booking__line__price {
					margin-left: auto;
				}

				.wp-element-button:not(.courser__add_to_cart) {
					padding: 0;
					background: 0;
					color: #606060;
					text-decoration: underline;
					font-weight: 300;
					margin-left: auto;
					width: fit-content;
				}

				.courser__upsells {
					grid-column: 1 / -1;
				}
			}
		}
	}

	.courser__card {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		max-width: 50rem;
		background: #fff;
		border-radius: 0.25rem;
		border: 1px solid #dedede;
		overflow: clip;

		@media (width > 768px) {
			grid-template-columns: 1fr 1fr;

			.courser__card__image {
				order: 10;
			}
		}

		.courser__card__image {
			width: 100%;
			height: 100%;
			min-height: 10rem;
			background-size: cover;
		}

		.courser__card__content {
			padding: 1.5rem;
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}

		.courser__card__title {
			font-size: 1.25rem;
			font-weight: 600;
		}

		.courser__add_to_cart--link {
			display: flex;
			width: fit-content;
		}
	}

	.courser__upsells {
		background: #f8f8f8;
		border-radius: 0.25rem;

		.courser__upsells__title {
			padding: 0.5rem 1rem;
			font-size: 0.875rem;
		}

		.courser__upsells__list {
			padding: 1rem;
			border: 1px solid #dedede;
			border-radius: 0.25rem;
			background: #fff;

			.courser__upsell {
				display: flex;
				flex-direction: column;

				.courser__upsell__name {
					grid-column: 1;
					font-weight: 500;
					font-size: 1.125rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.courser__upsell__price,
				.courser__upsell__dates {
					grid-column: 1;
					color: #606060;
					font-weight: 400;
					margin-top: 0.25rem;
				}

				.courser__add_to_cart {
					margin-top: 1rem;
					grid-column: 2;
					grid-row: 1 / -1;

					&.courser__add_to_cart--form {
						display: flex;
						gap: 0.5rem;

						.courser__field--input--number {
							.courser__label {
								display: none;
							}

							.courser__input {
								height: 100%;
								width: 100%;
							}
						}
					}
				}

				.wp-element-button {
					text-align: center;
					white-space: nowrap;
					background: #000;
				}

				@media (width > 600px) {
					display: grid;
					grid-template-columns: 1fr auto;
					grid-template-rows: auto auto;
					gap: 0 0.5rem;
					justify-content: space-between;

					.courser__add_to_cart {
						margin-top: 0rem;

						&.courser__add_to_cart--form
							.courser__field--input--number
							.courser__input {
							width: 8ch;
						}
					}
				}
			}
		}
	}
	
	.courser__preview{
		background: #fff;
		border-radius: 0.25rem;
		overflow: clip;

		.courser__preview__image {
			aspect-ratio: 16/9;
			object-fit: cover;
			width: 100%;
			height: auto;
			margin: 0;
		}

		.courser__preview__content{
			padding: 1.5rem;

			.courser__preview__title{
				margin: 0;
				
				.courser__link {
					font-weight: 600;
					font-size: 1.375rem;
					color: black;
					text-decoration: none;
				}
			}

			.courser__details{
				display: flex;
				flex-direction: column;
				gap: 0.5rem;
				font-size: 1rem;
				margin: 1rem 0;
			}

			.courser__preview__actions{
				display: flex;
				margin: -1.5rem;
				margin-top: 0;

				:first-child{
					flex-grow: 1;
					color: #000;
					background: #e3e3e3;
					border-top-right-radius: 0px;
					border-bottom-right-radius: 0px;
				}

				:last-child{
					border-top-left-radius: 0px;
					border-bottom-left-radius: 0px;
				}
			}
		}
	}
}

.wp-block-courser-course-list{
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.courser__cart_btn {
	position: fixed;
	bottom: 0;
	left: 1rem;
	padding: 0.5rem 1rem;
	background: currentColor;

	.courser__cart_btn__label {
		color: canvas;
	}

	.courser__cart_btn__count {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;
		height: 1.5rem;
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(50%, -50%);
		background: #de0606;
		font-size: small;
		color: #fff;
		border-radius: 2rem;
	}
}

.wp-block-courser-add-to-cart {
	.courser__add_to_cart--form {
		display: flex;
		gap: 0.5rem;

		.courser__label {
			display: none;
		}

		.courser__input {
			height: 100%;
			border-radius: 0.25rem;
			color: #000;
			padding: 0.5rem 0.75rem;
			width: 8ch;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				opacity: 1;
			}
		}
	}
}

.wp-block-courser-course-details{
	display: contents !important;

	.courser__details{
		all: inherit;
		display: flex;
	}
}

.courser--actions-view-instances {
	padding-block: 3rem;
	
	.courser__main {
		gap: 1rem;
	}

	.courser__summary {
		.courser__details .courser__details__item {
			display: none;
		}
	}
}

.courser--instance {
	padding-block: 3rem;
	
	.courser__main {
		gap: 0;

		.courser__title {
			margin-top: 1rem;
		}

		.courser__description {
			margin-bottom: 2rem;
		}
	}

	.courser__details {
		.courser__details__title {
			font-size: 1.375rem;
		}

		.courser__details__item--start-date {
			order: 10;
			grid-column: unset;
		}

		.courser__details__item--duration {
			order: 20;
			grid-column: unset;
		}

		.courser__details__item--location {
			order: 30;
			grid-column: unset;
		}

		.courser__details__item--directions {
			order: 40;
			grid-column: unset;
			text-align: right;

			.courser__link {
				font-weight: 400;
				color: #606060;
				text-decoration-thickness: 1px;
			}
		}
	}
}

.courser--cart {
	padding: 0;
	gap: 0;
	max-width: unset;
	min-height: 90vh;

	@media (width >= 992px) {
		grid-template-columns: 1fr 1fr;
	}

	@media (width >= 1280px) {
		grid-template-columns: 2fr 3fr;
	}

	.courser__main {
		padding: 1.5rem;

		.courser__divider {
			margin: 0;
		}

		@media (width >= 992px) {
			padding: 2.5rem;
		}

		@media (width >= 1280px) {
			padding: 3.5rem;
		}
	}

	.courser__summary {
		height: 100%;
		min-height: 33vh;
		background-image: url("/wp-content/uploads/2025/10/1742378658162.jpg");
		background-size: cover;
	}

	.courser__button--submit {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		font-weight: 600;

		.courser__money {
			display: flex;
			gap: inherit;
			align-items: inherit;
			font-weight: 400;

			&::before {
				content: "";
				display: block;
				width: 0.375rem;
				height: 0.375rem;
				border-radius: 1rem;
				background: white;
				opacity: 0.65;
			}
		}
	}
}

.courser--confirmation {
	padding-block: 3rem;
	display: block;
	padding: 0;
	gap: 0;
	max-width: unset;

	.courser__main {
		padding: 1.5rem;
		max-width: 768px;

		.courser__divider {
			margin: 0;
		}

		@media (width >= 992px) {
			padding: 2.5rem;
		}

		@media (width >= 1280px) {
			padding: 3.5rem;
		}
	}

	.courser__upsells {
		display: none;
	}
}

body:has(.courser) #footer {
	display: none;
}