section.noticeboard-configurator {
	.section-inner {
		max-width: var(--content-width-narrow);
		padding: 20px 20px;
	}

	.interest {
		background: var(--light-grey-bg);
		border-radius: var(--radius);
		padding: 20px 30px 20px 30px;
		margin-top: auto;

		&.two {
			margin-top: 20px;
			display: none;
		}

		.header {
			font-family: var(--bebas);
			color: var(--dark-blue);
			font-weight: 400;
			font-size: 3.75rem;
			margin: 0;
			padding: 0;
			line-height: 1.1;
			text-transform: uppercase;
		}
	}

	.info-box {
		background: var(--lighter-grey-bg);
		border-radius: var(--radius);
		padding: 20px 30px 20px 30px;
		margin-bottom: 40px;

		h4 {
			font-size: 1.25rem;
			color: var(--black-text);
			margin-bottom: 20px;
		}

		h5 {
			font-size: 1rem;
			color: var(--black-text);
			margin-bottom: 20px;
		}
	}

	.table-wrapper {
		overflow-x: scroll;
	}

	table#noticeboard-sizes {
		margin: 0 auto 0 auto;
		min-width: 800px;

		tr:nth-child(odd) td {
			background: var(--light-grey-bg);
		}

		tr:nth-child(even) {
			background: transparent;
		}

		th {
			background-color: transparent;
			color: var(--black-text);

			border-top: 1px solid var(--light-grey-border);
			border-bottom: 1px solid var(--light-grey-border);
		}
	}

	.cc-overlay {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100vw;
		height: 100vh;
		max-width: 1000px;
		max-height: 600px;
		background: rgba(255, 255, 255, 0.95);
		z-index: 9999;
		padding: 2rem 5rem 2rem 2rem;
		overflow-y: auto;
		display: none;
		border-radius: var(--radius);
		box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
	}

	.cc-overlay.open {
		display: block;
	}

	.cc-overlay .cc-overlay-close {
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 10001;
		background: none;
		border: none;
		font-size: 2.5rem;
		color: var(--black-text);
		cursor: pointer;
		line-height: 1;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		transition: color 0.2s;
		margin: 0;
	}

	.cc-overlay .cc-overlay-close::before {
		content: "\f00d";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
	}

	.cc-overlay .cc-overlay-close:hover {
		color: var(--orange);
	}

	.ral-colour-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 10px;

		.ral-colour-swatch {
			height: 100px;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			cursor: pointer;

			span {
				padding: 5px;
				background: rgba(255, 255, 255, 0.5);
				font-size: 12px;
			}

			&:hover {
				outline: 1px solid black;
			}
		}
	}
}

#noticeboard-configurator {
	.noticeboard-configurator-inner {
		display: flex;
		flex-direction: row;
		gap: var(--gap);
		margin-bottom: 80px;

		&.summary-active {
			border: 1px solid var(--light-grey-border);
			border-radius: var(--radius);
			padding: var(--gap);
		}
	}

	h2 {
		margin-bottom: 40px;
	}

	h2:has(+ h3) {
		margin-bottom: 10px;
	}

	h3 {
		font-family: var(--lato);
		color: var(--black-text);
		font-weight: 400;
		font-size: 1.25rem;
		margin-bottom: 40px;
		text-transform: none;

		span {
			font-weight: 700;
		}
	}

	.col-1 {
		flex: 1.5;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.col-2 {
		flex: 1;
		border: 1px solid var(--light-grey-border);
		border-radius: var(--radius);
		position: relative;
		min-height: 600px;
	}

	.options {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--gap);
	}

	.buttons {
		margin: 20px 0 40px 0;
		display: flex;
		justify-content: space-between;

		button {
			margin: 0 20px 0 0;
			background-color: var(--dark-blue);

			&.next-btn {
				background-color: var(--dark-blue);
				margin-left: auto;
			}

			&.back-btn {
				background-color: var(--dark-grey-bg);
			}

			&.reset-btn {
				background-color: red;
				margin-right: auto;
				order: 0;
			}

			&:last-child:not(.reset-btn) {
				margin-right: 0;
			}
		}
	}

	.back-btn-2 {
		background-color: var(--dark-grey-bg);
		margin: 0;
		position: relative;
		top: -44px;
	}

	#download-preview-btn {
		background-color: var(--dark-grey-bg);
		margin: 0 auto 0px auto;
		display: block;
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(calc(-50% + 0px));
		width: 178px;
	}

	#download-preview-btn::before {
		content: "\f019"; /* Font Awesome download icon unicode */
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		font-size: 1rem;
		margin-right: 8px;
		vertical-align: middle;
		display: inline-block;
		position: relative;
		top: -1px; /* Adjust vertical alignment */
	}

	form {
		label {
			font-size: 1.375rem;
		}
		.wpcf7-submit {
			background-color: var(--dark-blue);
			margin: 0;
			float: right;
		}
		.wpcf7-response-output {
			margin-bottom: 50px;
		}
	}

	.option {
		/*we need to have square options, double line text, and also take into account that some images have a lot of whitespace, hence some complex css...*/
		border-radius: var(--radius);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		box-shadow: 0 0 0 1px var(--light-grey-border);
		transition: box-shadow 0.3s;
		font-size: 1.625rem;
		color: var(--black-text);
		overflow: hidden;
		aspect-ratio: 1 / 1;
		padding: var(--gap);
		position: relative;

		&.step-10:last-child input {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0; /* Make it invisible */
			cursor: pointer;
			border: none;
			background: none;
			padding: 0;
			margin: 0;
			z-index: 2;
		}

		.colour-swatch {
			width: 100%;
			height: 100%;
			transition: transform 0.3s;
			position: relative;
		}

		&.step-10:nth-child(1) .colour-swatch {
			background: black;
		}
		&.step-10:nth-child(2) .colour-swatch {
			background: #9a3332;
		}
		&.step-10:nth-child(3) .colour-swatch {
			background: #1d3f99;
		}
		&.step-10:nth-child(4) .colour-swatch {
			background: #315632;
		}

		&.step-10:nth-child(5):not(.selected) .colour-swatch {
			background: white url(../images/custom-colour.png) center center /
				contain no-repeat !important;
		}

		img {
			flex: 1 1 0;
			width: 100%;
			height: 0;
			min-height: 0;
			aspect-ratio: 1 / 1;
			object-fit: contain;
			margin-bottom: 20px;
			display: block;
			transition: transform 0.3s;
		}

		/* make images bigger for these steps */
		&[class*="step-1"] img {
			transform: scale(1.8);
		}
		&[class*="step-2"] img {
			transform: scale(1.3);
		}
		&[class*="step-5"] img {
			transform: scale(1.8);
		}
		&[class*="step-6"] img {
			transform: scale(1.8);
		}
		&[class*="step-7"] img {
			transform: scale(1.9);
		}
		&[class*="step-8"] img {
			transform: scale(1.9);
		}
		&[class*="step-9"] img {
			transform: scale(1.9);
		}

		span {
			display: block;
			display: flex;
			flex-direction: column;
			justify-content: end;
			margin-top: auto;
			text-align: center;
			line-height: 1.2;
			min-height: 58px; /*so single and double line text is the same height */
		}

		&:hover {
			box-shadow: 0 0 0 3px var(--orange);

			img,
			.colour-swatch {
				transform: scale(1.1);
			}
			&[class*="step-1"] img {
				transform: scale(1.9);
			}
			&[class*="step-2"] img {
				transform: scale(1.4);
			}
			&[class*="step-5"] img {
				transform: scale(1.9);
			}
			&[class*="step-6"] img {
				transform: scale(1.9);
			}
			&[class*="step-7"] img {
				transform: scale(2);
			}
			&[class*="step-8"] img {
				transform: scale(2);
			}
			&[class*="step-9"] img {
				transform: scale(2);
			}
		}
	}

	#summary {
		.form-group {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 16px; /* 1em -> 16px */
			flex-wrap: wrap;

			label {
				flex: 0 1 260px;
				font-size: 1.25rem;

				span {
					display: inline-block;
					width: 50px;
					color: var(--light-blue);
				}
			}

			select,
			input#summary-quantity {
				flex: 1;
				font-size: 1.25rem;

				&.warning {
					border: 1px solid red;
				}
			}

			.step1-size-summary {
				display: block;
				width: 100%;
				margin-left: 270px;
				margin-top: 5px;
			}
		}
	}

	.preview {
		position: relative;
		> div {
			width: 100%;
			position: relative;
			/* height: 700px; */
			aspect-ratio: 1 / 1.1;
		}
		> div > div.preview-colour-swatch {
			width: 50%;
			height: 100px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 30px;
		}
		img {
			position: absolute;
			top: 0;
			left: -7px;
			width: 100%;

			&.step-1 {
				top: 10px;
				left: -3px;
			}

			&:first-child:not(.step-1):not(.step-2) {
				top: 0px;
				left: 0px;
			}

			&.step-4 {
				top: -20px;
			}
			&[class^="step-7"],
			&[class^="step-8"],
			&[class^="step-9"] {
				top: -10px;
			}
		}
		img[class^="step-6"].two {
			z-index: 5;
		}
		img[class^="step-9"] {
			top: -10px;

			&.two {
				top: -20px;
			}
		}
		&.standard-internal {
			img {
				&[class^="step-7"],
				&[class^="step-8"],
				&[class^="step-9"]:not(.two) {
					top: 0px;
					transform: scale(0.6);
				}
			}
		}
	}

	.preview-empty {
		background: url(../nb-config-blank.svg) center center no-repeat;
	}
}

section.nb-info {
	.section-inner {
	}

	padding: 0 40px 40px 40px;
	border-radius: var(--radius);
	font-family: var(--lato);

	.nb-info-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 40px;
		gap: var(--gap);

		.nb-info-header h1 {
			color: var(--dark-blue);
			font-size: 3.75rem;
			margin-bottom: 20px;
			flex: 0 0 24.8%;
		}
		div.nb-info-text {
			flex: 0 0 56.1%;
		}

		div.nb-info-button {
			flex: 0 0 19.1%;
		}
	}

	.nb-info-header p {
		font-size: 1rem;
		color: var(--black-text);
		margin-bottom: 10px;
	}

	.nb-info-steps {
		display: flex;
		justify-content: space-between;
		background: var(--light-grey-bg);
		padding: 30px 30px 20px 30px;
		border-radius: var(--radius);
		gap: 0 var(--gap);
		flex-wrap: wrap;
	}

	.step {
		flex: 1;
		display: flex;
		gap: var(--gap);
		flex-direction: row;
		align-items: center;
	}

	.step-number {
		font-size: 3.75rem;
		color: var(--dark-blue);
		display: block;
		position: relative;
		top: 0px;
	}

	p.header {
		font-weight: bold;
		font-size: 1.375rem;
		flex: 0 0 100%;
		margin-bottom: 0px;
	}

	.step p {
		color: var(--black-text);
		font-size: 1.375rem;
		margin-bottom: 0px;
	}
}

[v-cloak] {
	display: none;
}

@media (max-width: 1200px) {
	#noticeboard-configurator {
		.col-1 {
		}

		.col-2 {
		}
	}
}

@media (max-width: 1100px) {
	section.nb-info {
		padding: 0 0px 0 0px;
		.nb-info-steps {
			display: block;
		}
		.step {
			p {
				font-size: 1.125rem;
			}
		}
	}
	section.noticeboard-configurator {
		.interest.one {
			display: none;
		}
		.interest.two {
			display: block;

			.header {
				font-size: 2.5rem;
			}
		}
	}
	#noticeboard-configurator {
		h2 {
			font-size: 2.5rem;
		}
		#summary {
			.form-group {
				label {
					font-size: 1.25rem;
				}
				select,
				input#summary-quantity {
					font-size: 1.25rem;
				}
			}
		}

		.col-2 {
			max-width: 550px;
			min-height: 800px;
			margin: 0 auto 0 auto;
		}
		.preview {
			> div {
			}

			> div > div.preview-colour-swatch {
				width: 50%;
				height: 100px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 30px;
			}
		}
		.noticeboard-configurator-inner {
			display: block;
		}
	}
}

@media (max-width: 800px) {
	#noticeboard-configurator {
		#summary {
			.form-group {
				.step1-size-summary {
					margin-left: 190px;
				}
				label {
					flex: 0 1 180px;

					span {
						width: 30px;
					}
				}
				select {
				}
			}
		}
		.preview {
			aspect-ratio: auto;
			> div {
			}
			> div > div.preview-colour-swatch {
				bottom: 30px;
			}
		}
		.options {
			overflow-x: scroll;
			/* scrollbar-gutter: stable both-edges; */
			display: flex;
			gap: 10px;
			.option {
				width: 150px;
				min-width: 150px;
				height: 150px;
				flex: 0 0 150px;
				margin: 5px 2px 20px 2px;
				padding: 15px 2px 5px 2px;

				span {
					font-size: 1rem;
					line-height: 1.1;
					min-height: 40px; /* Adjusted for smaller screens */
				}
			}

			/* WebKit browsers: always show scrollbar */
			&::-webkit-scrollbar {
				height: 12px;
			}
			&::-webkit-scrollbar-thumb {
				background: #ccc;
				border-radius: 6px;
			}
			&::-webkit-scrollbar-track {
				background: #eee;
			}
		}
	}
}

@media (max-width: 600px) {
	#noticeboard-configurator {
		.preview {
			> div > div.preview-colour-swatch {
				bottom: 8%;
			}
		}
		#summary {
			.form-group {
				.step1-size-summary {
					margin-left: 150px;
				}
				label {
					font-size: 1rem;
					flex: 0 1 140px;

					span {
						width: 25px;
					}
				}
				select,
				input#summary-quantity {
					font-size: 1rem;
				}
			}
		}
	}
}

@media (max-width: 500px) {
	#noticeboard-configurator {
		.preview {
			> div > div.preview-colour-swatch {
				height: 70px;
			}
		}
		#summary {
			.form-group {
				.step1-size-summary {
					margin-left: 150px;
				}
				label {
					font-size: 1rem;
					flex: 0 1 140px;

					span {
						width: 25px;
					}
				}
				select,
				input#summary-quantity {
					font-size: 1rem;
				}
			}
		}
	}
}

section.configurator {
	margin-bottom: 80px;
	.section-inner {
		padding: 0 60px;
	}

	.configurator-cols {
		display: flex;
		gap: 40px;
		margin-bottom: 40px;
	}

	.configurator-text-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-bottom: 40px;

		.config-link {
			font-weight: bold;
			display: inline-block;
			border: 1px solid var(--dark-blue);
			border-radius: var(--radius);
			padding: 10px 20px;
			transition: all 0.3s ease;

			&:hover {
				background-color: var(--dark-blue);
				color: #fff;
			}
		}
	}

	.configurator-image-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		img {
			width: 100%;
			max-width: 100%;
			height: auto;
			margin-bottom: 20px;
		}
	}

	@media (max-width: 1100px) {
		h2 {
			font-size: 2.5rem;
		}
	}

	@media (max-width: 900px) {
		.section-inner {
			padding: 0 20px;
		}
		.configurator-cols {
			display: block;
		}
	}
}

div.custom-colour-picker {
	position: relative;
}