:root {
	--font-family-primary: "DINNextLTPro-Light", Helvetica, Arial, sans-serif;
	--font-family-heading: "DINNextLTPro-Medium", Helvetica, Arial, sans-serif;
	--font-size-h2: 31.5px;
	--font-size-h2-sm: 27px;
	--font-size-h3: 1rem;
	--font-size-body: 12px;
	--font-size-link: 14px;

	--color-text: #000;
	--color-text-secondary: black;
	--color-bg-primary: #fff;
	--color-bg-deco: #ededed;
	--color-bg-orbit: #f7f200;
	--color-link-bg: #008d27;
	--color-link-hover-bg: #fff;
	--color-link-text: white;
	--color-link-hover-text: #008d27;

	--radius-small: 5px;
	--radius-medium: 8px;
	--radius-large: 10px;

	--shadow-light: -2px 2px 5px rgba(0, 0, 0, 0.1);

	--padding-box: 10px;
	--padding-large: 15px;
	--margin-wrapper: 0px auto 15px auto;

	--image-aspect: 4/3;
	--image-min-height: 400px;
	--image-min-height-sm: 300px;

	-ms-overflow-style: none;
	/* Internet Explorer 10+ */
	scrollbar-width: none;
	/* Firefox, Safari 18.2+, Chromium 121+ */

	::-webkit-scrollbar {
		display: none;
		/* Older Safari and Chromium */
	}
}

/* FONT REGISTRATION */
@font-face {
	font-family: DINNextLTPro-Light;
	font-style: normal;
	font-weight: normal;
	src: url("https://moki.diffusionmenuiserie.be/wp-content/themes/flux-child/assets/fonts/DINNextLTPro-Light.otf") format("opentype");
}

@font-face {
	font-family: DINNextLTPro-Medium;
	font-style: normal;
	font-weight: bold;
	src: url("https://moki.diffusionmenuiserie.be/wp-content/themes/flux-child/assets/fonts/DINNextLTPro-Medium.otf") format("opentype");
}

/* GLOBAL FONT APPLICATIONS */
p {
	font-family: "DINNextLTPro-Light", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
button {
	font-family: "DINNextLTPro-Medium", sans-serif;
}

/* Wrapper */
.wpbf-container {
	max-width: 1260px;
	padding: 0;
}

.flux-config-wrapper {
	font-family: var(--font-family-primary);
	position: relative;
	margin: var(--margin-wrapper);
}

.flux-config-wrapper .flux-config-logo {
	width: 150px;
}

.flux-config-wrapper h2 {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h2);
	font-weight: 400;
	line-height: 1.1;
	color: var(--color-text);
	text-align: start;
}

.flux-config-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.flux-config-search-container {
		display: flex;
		flex-direction: column;
		align-items: end;

		overflow: hidden;
		border-radius: var(--radius-large);
		background-color: var(--color-bg-primary);
		box-shadow: var(--shadow-light);
		padding: var(--padding-box);
		margin-bottom: 15px;

		.flux-config-search {
			display: flex;
			width: 100%;

			input {
				width: 100%;
				max-width: 300px;
				height: 42px;

				border: 1px solid var(--color-bg-deco);
				overflow: hidden;
				border-radius: var(--radius-small) 0 0 var(--radius-small);
			}

			button {
				background: var(--color-link-bg);

				border-radius: 0 var(--radius-small) var(--radius-small) 0;
				border: 1px solid var(--color-link-bg);

				height: 42px;
				padding: 0 10px;
				color: var(--color-link-text);
				display: flex;
				align-items: center;
				justify-content: center;

				cursor: pointer;
			}
		}

		h5 {
			margin-bottom: 10px;
		}
	}

	.flux-config-search-container .flux-config-search button {
		transition: all 0.3s ease-in-out;
	}

	.flux-config-search-container .flux-config-search button:hover {
		background: var(--color-link-hover-bg);
		color: var(--color-link-hover-text);
		border: 1px solid var(--color-link-bg);
	}

	.flux-config-search-container .flux-config-search button svg path {
		transition: stroke 0.3s ease-in-out;
		stroke: var(--color-link-text);
	}

	.flux-config-search-container .flux-config-search button:hover svg path {
		stroke: var(--color-link-hover-text);
	}
}

/* HEADER STYLES */
.brand-element img {
	position: relative;
	transform: translateY(0px);
	z-index: 99;
}

.secondary-logo {
	height: 100px;
}

/* Decorations */
.flux-config-deco,
.flux-config-deco-orbit {
	position: absolute;
	top: 15px;
	right: -60px;
	height: 260px;
	width: 100%;
	max-width: 670px;
	border-radius: var(--radius-medium);
	pointer-events: none;
}

.flux-config-deco {
	background: var(--color-bg-deco);
	z-index: -1;
}

.flux-config-deco-orbit {
	background: var(--color-bg-orbit);
	z-index: -2;
	animation: orbitSquare 60s linear infinite reverse;
}

@keyframes orbitSquare {
	0% {
		transform: translate(-40px, 40px);
	}

	25% {
		transform: translate(40px, 40px);
	}

	50% {
		transform: translate(40px, -40px);
	}

	75% {
		transform: translate(-40px, -40px);
	}

	100% {
		transform: translate(-40px, 40px);
	}
}

/* Template Grid */
.flux-closet-templates-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 15px;
	min-height: auto;
}

/* Template Item */
.flux-closet-template-item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	justify-content: space-between;
	border-radius: var(--radius-large);
	background-color: var(--color-bg-primary);
	box-shadow: var(--shadow-light);
	padding: var(--padding-box);
}

/* First item spans 2 rows */
.flux-closet-template-item:first-child {
	grid-column: auto;
	grid-row: auto;
}

/* Right side items */
.flux-closet-template-item:nth-child(2),
.flux-closet-template-item:nth-child(3) {
	grid-column: auto;
	grid-row: auto;
}

/* Images */
.flux-closet-template-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: var(--image-aspect);
	object-fit: cover;
	display: block;
	user-select: none;
	pointer-events: none;
	border-radius: var(--radius-small);
}

.flux-closet-template-item .flux-closet-template-imagebox {
	flex: 1;
	position: relative;
	min-height: var(--image-min-height);
	width: 100%;
	overflow: hidden;
}

.flux-closet-template-item h3 {
	font-family: var(--font-family-heading);
	margin-top: 20px;
	font-size: var(--font-size-h3);
	font-weight: bold;
	color: var(--color-text-secondary);
	margin: 16px 0;
}

.flux-closet-template-item p {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-body);
	color: var(--color-text-secondary);
	padding: 0;
	margin: 0;
}

.flux-closet-template-buttons {
	display: flex;
	gap: 10px;
}

/* Call to Action */
.flux-closet-template-item a {
	font-size: var(--font-size-link);
	display: block;
	width: 100%;
	padding: 14.5px 0px;
	text-align: center;
	text-decoration: none;
	border-radius: var(--radius-small);
	font-weight: 600;
	background-color: var(--color-link-bg);
	color: var(--color-link-text);
	border: 1px solid var(--color-link-bg);
	transition: all 0.2s linear;
	box-shadow: var(--shadow-light);
	/* 	margin-top: 15px; */
}

.flux-closet-template-item a:hover {
	background-color: var(--color-link-hover-bg);
	color: var(--color-link-hover-text);
	border: 1px solid var(--color-link-hover-text);
}

/* SIDEPANEL PADDING */
body.ui-step-position-right #StepContainer .single-step {
	padding-left: var(--stepPadding);
}

/* STEPS STYLES */
.steps-navigation button {
	position: relative;
}

.steps-navigation button.active--step::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 20px;
	height: 20px;
	background-color: var(--accentLight);
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

body .single-step {
	padding-left: 0 !important;
}

/* STEP TITLE */
.step-title {
	position: relative;
	z-index: 1;
}

.step-title::after {
	content: "";
	position: absolute;
	width: 60px;
	height: 15px;
	right: -4px;
	bottom: -4px;
	background-color: var(--accentLight);
	opacity: 0.6;
	z-index: -1;
}

/* CARDS STYLE */
.single-step .handle-btn .handle-thumbnail {
	overflow: visible;
}

.content-segment-thumbnail.handle-thumbnail {
	position: relative;
}

.single-step .handle-thumbnail img {
	object-fit: contain;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

/* INPUTS STYLES */
.shadow-input-container::after {
	background-color: var(--accentLight);
}

.fixed-depth-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fixed-depth-container:after {
	content: "Il n'est pas possible d'ajuster la profondeur des modules.";
}

.fixed-depth-container .suffix-input {
	opacity: 0.4;
	pointer-events: none;
}

.switch-mode-container .switch-mode-btn.active {
	display: none;
}

/* NAVIGATION BUTTONS STYLE */
#StepsControls button {
	position: relative;
	width: 150px;
	background-color: var(--accentColor);
	color: var(--lightColor);
	overflow: hidden;
	z-index: 1;
}

#StepsControls button::after {
	content: " ";
	width: 0%;
	height: 100%;
	background: var(--accentLight);
	position: absolute;
	transition: all 0.4s ease-in-out;
	right: 0;
	top: 0;
	z-index: -1;
}

#StepsControls button:hover::after {
	right: auto;
	left: 0;
	width: 100%;
}

#StepsControls button span {
	z-index: 20;
	transition: all 0.3s ease-in-out;
	z-index: 2;
}

#StepsControls button:hover span {
	fill: var(--lightColor);
}

#StepsControls button:hover svg {
	fill: var(--mainColor);
}

#StepsControls button svg {
	color: inherit;
	fill: var(--lightColor);
}

#StepsControls button:hover {
	color: var(--mainColor);
}

button#SaveQuote {
	background-color: var(--accentColor);
	color: var(--lightColor);
}

/* MODULE MEASUREMENTS BUTTON */
.module-btn.active .edit-btn {
	display: block;
	background-color: var(--accentColor);
	color: var(--lightColor);
	padding: 10px;
	border-radius: var(--borderRadius2);
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.module-btn.active .edit-btn::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 100%;
	background: var(--accentLight);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.module-btn.active .edit-btn:hover {
	color: var(--mainColor);
}

.module-btn.active .edit-btn:hover::after {
	left: 0;
	right: auto;
	width: 100%;
}

.content-segment-btn button.edit-btn {
	color: var(--lightColor);
	background-color: var(--accentColor);
	padding: 5px;
	border-radius: var(--borderRadius2);
}

/* HANDLE CARDS */
.handle-btn.no-handle {
	display: none !important;
}

.content-segment-container .content-segment-btn.active .content-segment-thumbnail {
	border: 2px solid var(--accentColor);
}

.tooltip-container.color-box.tooltip-up {
	margin-top: -2.5%;
}

/* HIDE OPTIONS */
#stepLayout .remove-doors-segment {
	display: none;
}

.step-segment.material-inside-container {
	display: none;
}

button.switch-mode-btn.width-mode-btn.tooltip-btn,
button.switch-mode-btn.height-mode-btn.tooltip-btn {
	display: none;
}

/* Measure button styling */
.content-segment-btn .edit-btn {
	text-align: left;
	line-height: 19px;
}

/* Save form button styling */
.step-overlay-btn[data-overlay="SaveForm"] {
	margin-bottom: 12px !important;
}

/* MATERIAL BUTTON */
.material-list-content .material-btn.active img {
	transform: scale(1);
	border: 2px solid var(--accentColor);
}

.material-segment .material-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
}

.material-list-content .material-list .material-btn img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* MATERIAL CHOICE LIST  */
.material-list-content .material-list .material-btn img {
	box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.1);
}

.door-type-btn.has-image.active {
	border: 2px solid var(--accentColor);
}

/* MATERIAL OVERWRITE CONTAINER */
/* Change custom-options-container background when type-extra is selected */
.material-overwrite-container:not(.hide-feature).type-extra~.custom-options-container {
	display: block;
}

/* Hide custom options when its any other type than extra */
.material-overwrite-container:not(.hide-feature):not(.type-extra)~.custom-options-container {
	display: none;
}

/* Extra segment information */
#CustomModuleModal .popup-segment-picker button.segment-btn {
	overflow: hidden;
}

#CustomModuleModal .popup-segment-picker button svg {}

#CustomModuleModal .popup-segment-picker button p {}

#CustomModuleModal .popup-segment-picker button.segment-btn::after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--accentColor);
	color: white;
	border-radius: var(--borderRadius3);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 40px;
	font-size: 14px;
	line-height: 19px;
	pointer-events: none;
	opacity: 0;
	transform: scale(1.2);
	transition:
		opacity 0.5s ease,
		transform 0.5s ease;
}

#CustomModuleModal .popup-segment-picker button.segment-btn:hover::after {
	opacity: 1;
	transform: scale(1);
}

#CustomModuleModal .popup-segment-picker button.segment-btn[data-drawer-type="softclose_small"]::after,
#CustomModuleModal .popup-segment-picker button.segment-btn[data-drawer-type="softclose_large"]::after {
	content: "Tiroir amorti Legrabox® avec façade bois";
}

#CustomModuleModal .popup-segment-picker button.segment-btn[data-drawer-type="small"]::after,
#CustomModuleModal .popup-segment-picker button.segment-btn[data-drawer-type="large"]::after {
	content: "Tiroir à l'anglaise amorti Legrabox® avec façade métal";
}

#CustomModuleModal .popup-segment-picker button.segment-btn[data-drawer-type="alpha_small"]::after,
#CustomModuleModal .popup-segment-picker button.segment-btn[data-drawer-type="alpha_large"]::after {
	content: "Tiroir amorti en structure bois";
}

#CustomModuleModal .segment-list-item.segment-warning {
	border: 1px solid var(--error);
	background-color: #fff9f9;
}

#CustomModuleModal .segment-list-item.active.segment-warning {
	background-color: var(--error) !important;
}

#CustomModuleModal .segment-list-item:not(.active).segment-warning .segment-list-title h3 {
	color: var(--error);
}

#CustomModuleModal .segment-list-item[data-type="innerDrawer"] .segment-list-edit,
#CustomModuleModal .segment-list-item[data-type="outerDrawer"] .segment-list-edit {
	display: none;
}

#CustomModuleModal .segment-list-item[data-type="innerDrawer"].active .remove-segment-btn,
.segment-list-items:not(.dragging-active) .segment-list-item[data-type="innerDrawer"]:not(.toggle-active):hover .remove-segment-btn,
#CustomModuleModal .segment-list-item[data-type="outerDrawer"].active .remove-segment-btn,
.segment-list-items:not(.dragging-active) .segment-list-item[data-type="outerDrawer"]:not(.toggle-active):hover .remove-segment-btn {
	transform: translateY(-50%) translateX(0) scale(1);
	opacity: 1;
}

#CustomModuleModal .segment-list-item[data-type="innerDrawer"].active .duplicate-segment-btn,
.segment-list-items:not(.dragging-active) .segment-list-item[data-type="innerDrawer"]:not(.toggle-active):hover .duplicate-segment-btn,
#CustomModuleModal .segment-list-item[data-type="outerDrawer"].active .duplicate-segment-btn,
.segment-list-items:not(.dragging-active) .segment-list-item[data-type="outerDrawer"]:not(.toggle-active):hover .duplicate-segment-btn {
	transform: translateY(-50%) translateX(-36px) scale(1);
	opacity: 1;
}

#stepOrder .order-toggle::after {
	content: "* Offre de prix pour la pose disponible sur simple demande au 071/25 70 80 ou via l’adresse: contact@diffusionmenuiserie.be";
	color: var(--mainColor);
	display: inline-block;
	opacity: 0.7;
	font-size: 12px;
}

#SaveForm .fc__row--country,
#SaveForm .fc__row--project-name {
	display: none;
}

/* Media Queries */
@media (max-width: 1200px) {
	.flux-config-header {
		flex-direction: column;
		align-items: start;

		.flux-config-search-container {
			flex-direction: column;
			align-items: start;
			justify-content: space-between;

			.flux-config-search {
				width: 100%;
				max-width: 100%;

				input {
					max-width: 100%;
				}
			}
		}
	}

	.flux-config-wrapper h2 {
		font-size: var(--font-size-h2-sm);
	}

	.flux-closet-templates-container {
		grid-template-columns: 1.5fr 1fr;
		grid-template-rows: auto auto;
		height: fit-content;
	}

	.flux-closet-template-item:first-child {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.flux-closet-template-item:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

	.flux-closet-template-item:nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}
}

@media (max-width: 768px) {
	.flux-config-header {
		flex-direction: column;
		align-items: start;

		.flux-config-search-container {
			width: 100%;

			.flux-config-search {
				width: 100%;
				max-width: 100%;

				input {
					max-width: 100%;
				}
			}
		}
	}

	.flux-closet-templates-container {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		min-height: auto;
	}

	.flux-closet-template-item:first-child {
		grid-column: 1;
		grid-row: auto;
	}

	.flux-closet-template-item:nth-child(2),
	.flux-closet-template-item:nth-child(3) {
		grid-column: 1;
		grid-row: auto;
	}

	.flux-closet-template-item .flux-closet-template-imagebox {
		min-height: var(--image-min-height-sm);
	}

	.flux-closet-template-item img {
		aspect-ratio: 1/1;
	}

	.flux-config-deco,
	.flux-config-deco-orbit {
		top: 15px;
		right: -360px;
	}

	.wpbf-container {
		padding: 0 5px;
	}
}