@keyframes spin {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}

/* ======================= WRAPPER ======================= */
#wedding-photography-calculator {
	--wpc-text-color: #095751;
	--wpc-accent-color: #98a92a;
	--wpc-accent-text-color: #fffff2;
	--wpc-dark-accent-color: #095751;
	--wpc-dark-accent-text-color: white;
	--wpc-alternate-button-color: #8e0038;
	--wpc-alternate-button-text-color: #f8fff3;
	--wpc-field-accent-color: var( --wpc-dark-accent-color );

	--wpc-border-width: 2px;

	--wpc-border-radius: 10px;
	--wpc-inner-border-radius: calc( var( --wpc-border-radius ) - var( --wpc-border-width ) - 3px );
	--wpc-field-border-radius: 6px;

	--wpc-gap: 10px;

	--wpc-header-height: calc( 118px + var( --adminbar-height ) );

	display: grid;
	grid-template-areas: "main aside";
	grid-template-columns: 3fr 2fr;

	gap: calc( 3 * var( --wpc-gap ) );
}

#wedding-photography-calculator [hidden] {
	display: none !important;
}

#wedding-photography-calculator :is( button, input[type="submit"] ) {
	--background-color: var( --wpc-accent-color );
	--text-color: var( --wpc-accent-text-color);

	display: grid;
	place-content: center;

	width: auto !important;
	min-width: 100px;
	min-height: unset !important;
	padding: .5em var( --wpc-gap );
	border: none;
	border-radius: var( --wpc-field-border-radius);
	margin: 0;

	background: var( --background-color);
	color: var( --text-color);

	font-size: 1.3rem;
	line-height: 1 !important;

	cursor: pointer;
}

#wedding-photography-calculator main :is( button, input[type="submit"] ):hover {
	--background-color: var( --wpc-dark-accent-color ) !important;
	--text-color: var( --wpc-dark-accent-text-color ) !important;
}

/* ======================= MAIN ======================= */
#wedding-photography-calculator main {
	position: relative;

	grid-area: main;

	display: flex;
	flex-direction: column;
	gap: var( --wpc-gap );

	padding-bottom: var( --wpc-gap );
	border: var( --wpc-border-width ) solid var( --wpc-accent-color );
	border-radius: var(	--wpc-border-radius ) 0 0 var( --wpc-border-radius );

	color: var(	--wpc-text-color );
}

#wedding-photography-calculator main > * {
	padding-inline: var( --wpc-gap );
}

#wedding-photography-calculator main #progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var( --wpc-gap );

	padding: var( --wpc-gap ) calc( var( --wpc-gap ) * 3 );
	border-top-left-radius: var( --wpc-inner-border-radius );

	background: var( --wpc-accent-color );
}

#wedding-photography-calculator main #progress * {
	margin: 0;

	color: var( --wpc-accent-text-color );

	font-family: inherit;
	font-size: 1em !important;
}

#wedding-photography-calculator main #progress span.progress {
	white-space: nowrap;
}

#wedding-photography-calculator fieldset.page {
	display: flex;
	flex-direction: column;
	gap: calc( 3 * var( --wpc-gap ) );

	margin-block: var( --wpc-gap );
}

#wedding-photography-calculator main .field-wrapper {
	display: flex;
	flex-direction: column;
	gap: var( --wpc-gap );

	padding: var( --wpc-gap ) calc( var( --wpc-gap ) * 2 );
	border-top-left-radius: var( --wpc-field-border-radius );

	background-color: #e5e9ca;
}

#wedding-photography-calculator main .field-wrapper label {
	cursor: pointer;
}

#wedding-photography-calculator main .field-wrapper p.field-description {
	margin: 0 !important;

	font-size: .8rem;
}

#wedding-photography-calculator main .field-wrapper > .field {
	position: relative;
}

#wedding-photography-calculator main .field-wrapper > .field:has( :is( select, input ):focus ) {
	--wpc-field-accent-color: var( --wpc-alternate-button-color );
}

/* === SELECT === */
#wedding-photography-calculator main .field-wrapper select {
	width: 100%;
	padding: 0.5em var( --wpc-gap );
	border: 1px solid var( --wpc-field-accent-color );
	border-radius: 0 var( --wpc-field-border-radius ) var( --wpc-field-border-radius ) 0;

	color: var( --wpc-dark-accent-color );

	cursor: pointer;

	appearance:         none;
	-webkit-appearance: none;
	-moz-appearance:    none;

	font-family: var( --body_typography-font-family, sans-serif ), sans-serif;
}

#wedding-photography-calculator main .field-wrapper select option[disabled][selected][value=""] {
	display: none;
}

#wedding-photography-calculator main .field-wrapper select option:disabled {
	color: var( --wpc-alternate-button-color );
}

#wedding-photography-calculator main .field-wrapper.select > .field::after {
	content: "\f107";

	position: absolute;
	inset: 0;
	left: unset;

	display: grid;
	place-items: center;

	aspect-ratio: 1;
	border-radius: 0 var( --wpc-field-border-radius ) var( --wpc-field-border-radius ) 0;

	background: var( --wpc-field-accent-color );
	color: var( --wpc-accent-text-color );

	font-family: 'awb-icons';
	font-size: 2em;
	line-height: 1;

	pointer-events: none;
}

#wedding-photography-calculator main .field-wrapper.select > .field:has( select:focus )::after {
	content: "\f106";
}

/* === RANGE === */
.field-wrapper.disabled {
	filter: saturate( 0 );
}

#wedding-photography-calculator main .field-wrapper.range > .field {
	display: flex;
	flex-direction: column;
	align-items: center;

	font-weight: bold;
}

#wedding-photography-calculator main .field-wrapper .range-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var( --wpc-gap );

	width: 100%;
}

#wedding-photography-calculator main .field-wrapper input[type="range"] {
	flex-grow: 1;

	margin: 0;

	background: none;
	accent-color: var( --wpc-field-accent-color );

	cursor: pointer;

	appearance:         none;
	-webkit-appearance: none;
	-moz-appearance:    none;
}

#wedding-photography-calculator main .field-wrapper input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;

  background: var( --wpc-field-accent-color );
}

#wedding-photography-calculator main .field-wrapper input[type="range"]::-moz-range-track {
  height: 2px;

  background: var( --wpc-field-accent-color );
}

#wedding-photography-calculator main .field-wrapper input[type="range"]::-webkit-slider-thumb {
	transform: translateY( -50% );

	width: 20px;
	aspect-ratio: 1;

	border-radius: 50%;
	margin-top: 1px;

	background: var( --wpc-field-accent-color );

	appearance:         none;
	-webkit-appearance: none;
	-moz-appearance:    none;
}

#wedding-photography-calculator main .field-wrapper input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;

	border: none;
	border-radius: 50%;
	margin-top: 1px;

	background: var( --wpc-field-accent-color );

	appearance:         none;
	-webkit-appearance: none;
	-moz-appearance:    none;
}

#wedding-photography-calculator main .field-wrapper.range input[data-range] {
	height: auto !important;

	padding: var( --wpc-gap ) !important;
	border: none !important;

	background: none !important;
	color: var( --wpc-field-accent-color ) !important;

	font-weight: bold;
	text-align: center;
}

/* === RADIO === */
#wedding-photography-calculator main .field-wrapper.radio .field {
	display: flex;
	gap: calc( 2 * var( --wpc-gap ) );
}

#wedding-photography-calculator main .field-wrapper input[type="radio"] {
	height: .5em;
	aspect-ratio: 1;

	margin: 0;

	accent-color: var( --wpc-field-accent-color );

	font-size: 40px;

	cursor: pointer;
}

#wedding-photography-calculator main nav.pagination {
	display: flex;
	justify-content: space-between;

	margin: auto 0 0;
}

#wedding-photography-calculator main nav.pagination button[data-page-action="-1"] {
	--background-color: var(--wpc-alternate-button-color);
	--text-color: var(--wpc-alternate-button-text-color);
}

#wedding-photography-calculator main nav.pagination button[data-page-action="+1"] {
	margin-left: auto;
}

#wedding-photography-calculator main [type="submit"][disabled] {
	--background-color: #333333;

	cursor: not-allowed;
}

#wedding-photography-calculator main .field-wrapper.radio .option {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5ch;
}

#wedding-photography-calculator main .contact-form {
	padding: calc( 3 * var( --wpc-gap ) ) !important;
	border-top: 2px solid var( --wpc-accent-color );
}

#wedding-photography-calculator main .contact-form .gform_title {
	display: block !important;
	font-size: 1.5rem !important;
	color: inherit;
	margin: 0;
}

#wedding-photography-calculator main .contact-form p.gform_required_legend {
	text-align: right;
	font-size: .8rem;
}

#wedding-photography-calculator main .contact-form .gfield input {
	border: none !important;

	background: #e5e9ca !important;
	color: var( --wpc-dark-accent-color );
}

#wedding-photography-calculator main .contact-form label.gfield_label {
	padding-block: 0 !important;
	display: flex;
	font-size: 1.3rem !important;
	align-items: center;
}

#wedding-photography-calculator main .contact-form .gform_footer {
	padding: 0 !important;
	margin: 0 !important;
}

#wedding-photography-calculator main .contact-form [type="submit"] {
	position: absolute;
	right: var( --wpc-gap );
	bottom: var( --wpc-gap );
}

/* ======================= ASIDE ======================= */
#wedding-photography-calculator aside {
	grid-area: aside;

	padding: calc( var( --wpc-gap ) * 2 ) calc( var( --wpc-gap ) * 3 );
	border-radius: 0 var( --wpc-border-radius ) var( --wpc-border-radius ) 0;

	background: var( --wpc-dark-accent-color );
	color: var( --wpc-dark-accent-text-color );

	font-size: .8em;
}

#wedding-photography-calculator aside:has( [aria-busy="true"]:not( [hidden] ) ) {
	position: relative;
}

#wedding-photography-calculator aside:has( [aria-busy="true"]:not( [hidden] ) )::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 10;

	background: #fff;

	opacity: .5;
}

#wedding-photography-calculator aside:has( [aria-busy="true"]:not( [hidden] ) )::after {
	content: "";

	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 20;

	width: 3em;
	aspect-ratio: 1 / 1;

	border: 5px solid black;
	border-left-color: transparent;
	border-radius: 50%;

	animation-name: spin;
	animation-duration: 500ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#wedding-photography-calculator aside > .aside-inner {
	position: sticky;
	top: calc( var( --wpc-header-height ) + 2 * var( --wpc-gap ) );

	display: flex;
	flex-direction: column;
	gap: var( --wpc-gap );
}

#wedding-photography-calculator aside .title {
	margin: 0;

	color: inherit !important;

	font-size: 1.5rem !important;
}

#wedding-photography-calculator aside p {
	margin: 0 !important;
}

#wedding-photography-calculator aside .field-wrapper {
	display: grid;
	gap: var( --wpc-gap );
}

#wedding-photography-calculator aside label {
	font-size: 1.3rem;
}

#wedding-photography-calculator aside button.show-code {
	--background-color: var(--wpc-alternate-button-color);
	--text-color: var(--wpc-alternate-button-text-color);
}

#wedding-photography-calculator aside button.show-code:hover {
	--background-color: var( --wpc-dark-accent-text-color );
	--text-color: var( --wpc-dark-accent-color );
}

#wedding-photography-calculator aside .calculator-output {
	display: grid;
	gap: calc( 3 * var( --wpc-gap ) );
}

#wedding-photography-calculator aside .calculator-output input {
	border: unset !important;

	color: var( --wpc-dark-accent-color );
}

#wedding-photography-calculator aside .use-code-later,
#wedding-photography-calculator aside .introduction,
#wedding-photography-calculator aside .instructions {
	display: grid;
	gap: var( --wpc-gap );
}

@media screen and ( max-width: 1024px ) {
	#wedding-photography-calculator {
		display: flex;
		flex-direction: column-reverse;
	}

	#wedding-photography-calculator main {
		border-radius: 0 0 var(	--wpc-border-radius ) var(	--wpc-border-radius );
	}

	#wedding-photography-calculator main #progress {
		border-radius: unset;
	}

	#wedding-photography-calculator aside {
		border-radius: var(	--wpc-border-radius ) var(	--wpc-border-radius ) 0 0;
	}

	#wedding-photography-calculator.result-shown {
		flex-direction: column;
	}

	#wedding-photography-calculator.result-shown main {
		border-radius: var(	--wpc-border-radius ) var(	--wpc-border-radius ) 0 0;
	}

	#wedding-photography-calculator.result-shown main #progress {
		border-radius: var(	--wpc-inner-border-radius ) var( --wpc-inner-border-radius ) 0 0;
	}

	#wedding-photography-calculator.result-shown aside {
		border-radius: 0 0 var(	--wpc-border-radius ) var(	--wpc-border-radius );
	}
}

@media screen and ( max-width: 480px ) {
	#wedding-photography-calculator main .field-wrapper.radio .field {
		flex-direction: column;
		align-items: baseline;
	}
}