/**
 * Temyris Configurator — Modal & Selector Styles
 *
 * Extracted from modal-script.php inline <style> block.
 *
 * @package TemyrisConfigurator
 * @since   2.0.0
 */

/* ---------------------------------------------------------------------------
 * Selector (product picker row)
 * --------------------------------------------------------------------------- */

.minaudiere .selectors {
	display: flex;
	flex-direction: column;
}

.minaudiere .selectors .selector {
	display: flex;
	border-bottom: solid 1px lightgray;
	margin-bottom: 10px;
	padding-bottom: 15px;
	gap: 15px;
}

.minaudiere .selectors .selector .infos {
	display: flex;
	flex-direction: column;
}

.minaudiere .selectors .selector .infos .text {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}

.minaudiere .selectors .selector .infos .text .selector-title {
	font-weight: 600;
}

.minaudiere .selectors .selector .img_selected {
	max-width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.minaudiere .selectors .selector .img_selected.single-variant {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.minaudiere .selectors .selector .img_selected.single-variant a.more-infos {
	font-size: 12px;
	color: gray;
}

.minaudiere .selectors .selector .img_selected.single-variant a.more-infos:hover {
	color: black;
	text-decoration: underline;
}

.minaudiere .selectors .selector .infos .btn-edit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	padding: 8px 12px 5px;
	background-color: #000;
	color: #fff;
	line-height: 1.2rem;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Modal overlay
 * --------------------------------------------------------------------------- */

.modal-minaudiere {
	position: absolute;
	display: none;
	opacity: 0;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	background-color: #fff;
	border: solid 1px #000;
	width: 80%;
	margin: 0 auto;
	max-height: fit-content;
	animation-duration: .4s;
	animation-name: fadeIn;
}

.modal-minaudiere.visible {
	display: block;
	opacity: 1;
}

@keyframes fadeIn {
	from {
		display: block;
		opacity: 0;
	}
	to {
		display: block;
		opacity: 1;
	}
}

.modal-minaudiere .container {
	display: flex;
	flex-direction: column;
	padding: 0;
	position: relative;
}

.modal-minaudiere .close {
	display: block;
	font-size: 30px;
	position: absolute;
	top: 0;
	right: 0;
	padding: 20px 30px;
	cursor: pointer;
	z-index: 20;
}

.modal-minaudiere .container .header {
	padding: 25px 40px;
	border-bottom: solid 1px lightgray;
}

.modal-minaudiere .container .content {
	padding: 50px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	gap: 35px;
}

.modal-minaudiere .container .content .list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.modal-minaudiere .container .content .list .items {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.modal-minaudiere .container .content .list .items .item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: solid 1px transparent;
	padding: 15px 0;
	position: relative;
	cursor: pointer;
	margin-bottom: 2rem;
}

.modal-minaudiere .container .content .list .items .item.stock-out {
	opacity: .5;
	cursor: not-allowed;
}

.modal-minaudiere .container .content .list .items .item span {
	margin-top: 10px;
	font-size: .9rem;
	text-align: center;
}

.modal-minaudiere .container .content .list .items .item a.more-infos {
	font-size: 12px;
	color: gray;
}

.modal-minaudiere .container .content .list .items .item a.more-infos:hover {
	color: black;
	text-decoration: underline;
}

.modal-minaudiere .container .content .list .items .item.selected-item {
	border: solid 1px #4d4d4d8c;
}

.modal-minaudiere .container .content .list .items img {
	width: 50%;
}

.modal-minaudiere .container .content .list .items .item.selected-item::after {
	content: '';
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjNGQ0ZDRkOGMiIGQ9Ik00NzAuNiAxMDUuNGMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM2wtMjU2IDI1NmMtMTIuNSAxMi41LTMyLjggMTIuNS00NS4zIDBsLTEyOC0xMjhjLTEyLjUtMTIuNS0xMi41LTMyLjggMC00NS4zczMyLjgtMTIuNSA0NS4zIDBMMTkyIDMzOC43IDQyNS40IDEwNS40YzEyLjUtMTIuNSAzMi44LTEyLjUgNDUuMyAweiIvPjwvc3ZnPg==') no-repeat center right;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 12px;
	box-sizing: border-box;
}

.modal-minaudiere .container .content .list .validate {
	display: flex;
	justify-content: flex-end;
}

.modal-minaudiere .container .content .list .validate button {
	background-color: #000;
	color: #fff;
	margin-top: 20px;
	padding: 15px 30px;
	font-size: 1.2rem;
	line-height: 1.5rem;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Loading spinner
 * --------------------------------------------------------------------------- */

#lds-ring {
	display: inline-block;
	position: relative;
	width: 30px;
	height: 30px;
	margin-right: 20px;
}

#lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	border: 3px solid #fff;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #fff transparent transparent transparent;
}

#lds-ring div:nth-child(1) { animation-delay: -0.45s; }
#lds-ring div:nth-child(2) { animation-delay: -0.3s; }
#lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes lds-ring {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Responsive
 * --------------------------------------------------------------------------- */

@media screen and (max-width: 900px) {
	.modal-minaudiere .container .header {
		padding-right: 76px;
	}
	.modal-minaudiere .container .content .list .items {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.modal-minaudiere .container .content .list .items .item {
		width: 90% !important;
	}
}

@media screen and (max-width: 768px) {
	.modal-minaudiere {
		width: 90%;
	}
}

/* ---------------------------------------------------------------------------
 * ATC button disabled state
 * --------------------------------------------------------------------------- */

button[name='add-to-cart'][disabled]:hover {
	opacity: .3 !important;
	cursor: not-allowed !important;
}

/* Hide quantity wrapper on configurator pages */
.quantity-wrapper {
	display: none !important;
}