/*---------------------------------------------------------------------------*\
	#Button
\*---------------------------------------------------------------------------*/





/*---------------------------------------------------------------------------*\
	#Modal
\*---------------------------------------------------------------------------*/

.pwcq-modal {
	--modal-spacing: 2rem;
	--scrollbar-thumb-color: #c0c0c0;
	--scrollbar-track-color: #e0e0e0;
	
	position: fixed;
	background-color: rgba( 0, 0, 0, .5 );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	top: 100%;
	left: 0;
	opacity: 0;
	padding: var( --modal-spacing );
	z-index: 10000;
	
	transition: opacity .25s, top .01s .24s ;
}

	.pwcq-modal--active {
		top: 0;
		opacity: 1;
	
		transition: opacity .25s;
	}

.pwcq-modal_container {
	position: relative;
	background-color: #fff;
	/* Remove outer spacings */
	max-height: calc( 100vh - ( var( --modal-spacing ) * 2 ) );
	/* 720px by default font-size of 16px */
	width: 45rem;
	max-width: 100%;
}

.pwcq-modal_wrapper {
	position: relative;
	overflow: hidden;
	/* Remove outer spacings */
	max-height: calc( 100vh - ( var( --modal-spacing ) * 2 ) );
	width: 100%;
}


/* Scrollbox */
.pwcq-modal__scrollbox {
	/* Remove outer spacings */
	max-height: calc( 100vh - ( var( --modal-spacing ) * 2 ) );
	overflow: hidden auto;
	scrollbar-color: var( --scrollbar-thumb-color ) var( --scrollbar-track-color );
	scrollbar-width: thin;
}

	.pwcq-modal__scrollbox::-webkit-scrollbar {
		width: 8px;
	}

	.pwcq-modal__scrollbox::-webkit-scrollbar-track {
		background-color: var( --scrollbar-track-color );
	}

	.pwcq-modal__scrollbox::-webkit-scrollbar-thumb {
		background-color: var( --scrollbar-thumb-color );
	}


/* Header */
.pwcq-modal__header {
	position: sticky;
	background-color: #fff;
	top: 0;
	padding: var( --modal-spacing );
}

.pwcq-modal__header_wrapper {
	position: relative;
}

.pwcq-modal__heading {
	margin: 0;
	padding: 0 calc( var( --modal-spacing ) * 2 ) 0 0;
}

.pwcq-button--close-modal {
	position: absolute;
	text-align: center;
	font-size: calc( var( --modal-spacing ) / 2 );
	line-height: 2;
	width: var( --modal-spacing );
	height: var( --modal-spacing );
	top: 50%;
	right: 0;
	margin: 0;
	padding: 0;
	transform: translateY( -50% );
}


/* Content */
.pwcq-modal__content {
	padding: var( --modal-spacing );
}





/*---------------------------------------------------------------------------*\
	#Form
\*---------------------------------------------------------------------------*/

.pwcq-form--quotation {
	--form-gap: 1rem;
	
	margin: 0;
}

.pwcq-form--hidden {
	display: none;
}

.pwcq-form_wrapper {
	display: flex;
	gap: var( --form-gap );
	flex-wrap: wrap;
}


.pwcq-field {
	flex: 0 0 100%;
}

.pwcq-field--billing-first-name,
.pwcq-field--billing-last-name,
.pwcq-field--billing-postcode,
.pwcq-field--billing-city,
.pwcq-field--billing-phone
.pwcq-field--billing-vat-id {
	flex: 1 0 calc( 50% - var( --form-gap ) / 2 );
}

.pwcq-field--error {
	color: #f66;
}

.pwcq-field--hidden {
	display: none;
}


.pwcq-label {
	display: block;
}


/* Use the type selector to override common used basic styles. */
.pwcq-field__input:is(
	[type="email"],
	[type="number"],
	[type="tel"],
	[type="text"],
) {
	width: 100%;
	outline: none;
}

.pwcq-field__textarea {
	width: 100%;
	max-width: 100%;
}


/* Notices */
.pwcq-notice--error {
	color: #f66;
}





/*---------------------------------------------------------------------------*\
	#Product-Field
\*---------------------------------------------------------------------------*/

.pwcq-field--product :where( .pwcq-field_wrapper ) {
	display: flex;
	align-items: center;
	gap: var( --form-gap );
}

.pwcq-field__part {
	flex: 0 0 auto;
}

.pwcq-field__part--product-title {
	flex: 1 1 auto;
}


.pwcq-product-title {
	margin: 0 1em 0 0;
}


.pwcq-product-price {
	font-size: 1.5rem;
}


/* Quantity */
.pwcq-field__part--quantity :where( .pwcq-field__part_wrapper ) {
	display: flex;
	align-items: center;
	gap: max( 1px, calc( var( --form-gap ) / 4 ) );
}

.pwcq-field__input--quantity:is( [type="number"] ) {
	flex: 1 1 auto;
	text-align: center;
	
	/* Auto width for Chrome/Edge v123+ */
	field-sizing: content;
	/* Auto width for Firefox with HTML size and JS */
	width: auto;
	/* max-width limit and fix for all non supported browsers */
	max-width: 4em;
	
	/* Remove controls from Firefox */
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Remove controls from Safari and Chrome */
.pwcq-field__input--quantity:is( [type="number"] )::-webkit-outer-spin-button,
.pwcq-field__input--quantity:is( [type="number"] )::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}


.pwcq-field__button--quantity {
	flex: 0 0 auto;
	text-align: center;
	width: 2em;
	padding-right: 0;
	padding-left: 0;
}





/*---------------------------------------------------------------------------*\
	#Spinner
\*---------------------------------------------------------------------------*/

.pwcq-spinner {
	position: fixed;
	background-color: rgba( 255, 255, 255, .8 );
	opacity: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

	.pwcq-spinner--active {
		opacity: 1;
		z-index: 10000000;
	}

.pwcq-spinner_container {
	position: absolute;
	height: 8rem;
	width: 8rem;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}


.pwcq-spinner__element {
	position: absolute;
	height: 10%;
	width: 10%;
	top: 0;
	left: 45%;
	transform-origin: 50% 500%;
}

.pwcq-spinner__element--1 {
	transform: rotate( 0deg );
	animation-delay: 0s;
}

.pwcq-spinner__element--2 {
	transform: rotate( 22.5deg );
	animation-delay: calc( 0.0625 * 1s );
}

.pwcq-spinner__element--3 {
	transform: rotate( 45deg );
	animation-delay: calc( 0.125 * 1s );
}

.pwcq-spinner__element--4 {
	transform: rotate( 67.5deg );
	animation-delay: calc( 0.1875 * 1s );
}

.pwcq-spinner__element--5 {
	transform: rotate( 90deg );
	animation-delay: calc( 0.25 * 1s );
}

.pwcq-spinner__element--6 {
	transform: rotate( 112.5deg );
	animation-delay: calc( 0.3125 * 1s );
}

.pwcq-spinner__element--7 {
	transform: rotate( 135deg );
	animation-delay: calc( 0.375 * 1s );
}

.pwcq-spinner__element--8 {
	transform: rotate( 157.5deg );
	animation-delay: calc( 0.4375 * 1s );
}

.pwcq-spinner__element--9 {
	transform: rotate( 180deg );
	animation-delay: calc( 0.5 * 1s );
}

.pwcq-spinner__element--10 {
	transform: rotate( 202.5deg );
	animation-delay: calc( 0.5625 * 1s );
}

.pwcq-spinner__element--11 {
	transform: rotate( 225deg );
	animation-delay: calc( 0.625 * 1s );
}

.pwcq-spinner__element--12 {
	transform: rotate( 247.5deg );
	animation-delay: calc( 0.6875 * 1s );
}

.pwcq-spinner__element--13 {
	transform: rotate( 270deg );
	animation-delay: calc( 0.75 * 1s );
}

.pwcq-spinner__element--14 {
	transform: rotate( 292.5deg );
	animation-delay: calc( 0.8125 * 1s );
}

.pwcq-spinner__element--15 {
	transform: rotate( 315deg );
	animation-delay: calc( 0.875 * 1s );
}

.pwcq-spinner__element--16 {
	transform: rotate( 337.5deg );
	animation-delay: calc( 0.9375 * 1s );
}

.pwcq-spinner__element::after {
	content: '';
	position: absolute;
	background-color: #808080;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 100%;
	animation: none;
	transform: scale( .5 );
}

	:where( .pwcq-spinner--active ) .pwcq-spinner__element::after {
		animation: fsb-spinner 1s step-start infinite;
		animation-delay: inherit;
	}


@keyframes fsb-spinner {
	
	0% {
		background-color: #1a1a1a;
		transform: scale( 1 );
	}
	
	6.25% {
		background-color: #262626;
		transform: scale( .9375 );
	}
	
	12.5% {
		background-color: #333333;
		transform: scale( .875 );
	}
	
	18.75% {
		background-color: #404040;
		transform: scale( .8125 );
	}
	
	25% {
		background-color: #4d4d4d;
		transform: scale( .75 );
	}
	
	31.25% {
		background-color: #595959;
		transform: scale( .6875 );
	}
	
	37.5% {
		background-color: #606060;
		transform: scale( .625 );
	}
	
	43.75% {
		background-color: #737373;
		transform: scale( .5625 );
	}
	
	50% {
		background-color: #808080;
		transform: scale( .5 );
	}
	
	100% {
		background-color: #808080;
		transform: scale( .5 );
	}
	
}