@import 'shared/colors.css';

body {
	background-color: var(--grey-dark);
}


.contactContainer {
	width: 90vw;
	max-width: 32rem;
	margin: 5vh auto;
	padding: 2rem;
	background-color: var(--grey-light-2);
	border-radius: 0.5rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

.contactContainer h1 {
	text-align: center;
	margin-bottom: 20px;
	color: var(--contact-title-color);
}


.formGroup {
	margin-bottom: 1.2rem;
}

.formGroup label {
	display: block;
	margin-bottom: 5px;
}


.formGroupInput input {
	width: 100%;
	padding: 0.7em;
	border: 1px solid var(--grey-light);
	border-radius: 0.25em;
	box-sizing: border-box;
	font-family: inherit;
}


.formGroup textarea {
	width: 100%;
	padding: 0.7em;
	border: 1px solid var(--grey-light);
	border-radius: 0.25em;
	box-sizing: border-box;
	font-family: inherit;
}

input::placeholder,
textarea::placeholder {
	font-style: italic;
}

.required input,
.required textarea {
	border: 2px solid var(--contact-text-input-border-color);
}

.checkboxContainer {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.checkboxContainer label {
	flex: 1;
}


.checkboxContainer .checkboxInput {
	margin-left: 1vw;
	width: 1.5em;
	height: 1.5em;
}
/* PHOTO PRINTS */


.interestImagesPrintInputsContainer,
.interestShootingInputsContainer {
	border: 2px solid var(--grey-light);
	padding: 0.7em;
	border-radius: 0.25em;
	margin-bottom: 0.7em;
}

.interestImagePrintContainer {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}


.interestImagePrintContainer label {
	font-size: 0.95em;
	color: var(--grey-dark);
	white-space: nowrap;
	margin: 0.5em;
}

/* PHOTO SHOOTING */


.interestShootingDeleteButton {
	width: 2em;
	height: 2em;
	padding: 0;
	font-size: 1em;
	color: var(--white);
	background-color: var(--contact-interestShootingDeleteButton-background-color);
	font-weight: bold;
	cursor: pointer;
	border: none;
	border-radius: 0.25em;
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
}


.interestShootingOptions {
	display: flex;
	align-items: center;
	gap: 1em;
	position: relative;
}


.interestShootingOptions label {
	flex: 0 0 auto;
	font-size: 0.95em;
	box-sizing: border-box;
	padding-top: 0.5em;
}


.interestShootingOptions select {
	flex: 1 1 auto;
	border: 1px solid var(--contact-interestShootingOptions-background-color);
	border-radius: 0.25em;
	box-sizing: border-box;
	font-family: inherit;
	padding: 0.7em;
}

.interestShootingAddButton {
	width: 100%;
	font-size: 0.85em;
	color: var(--white);
	background-color: var(--contact-interestShootingAddButton-background-color);
	cursor: pointer;
	border: none;
	border-radius: 0.25em;
}

.interestShootingAddButton:disabled {
	background-color: var(--contact-button-disabled-background-color) !important;
	color: var(--contact-button-disabled-text-color) !important;
	cursor: not-allowed !important;
	border-color: var(--contact-button-disabled-border-color) !important;
}
/* --------------------------------------- */


.sendButton {
	display: block;
	width: 100%;
	padding: 0.7em;
	background-color: var(--contact-send-button-background-color);
	color: var(--contact-send-button-text-color);
	border: none;
	border-radius: 0.25em;
	cursor: pointer;
}

.sendButton:disabled {
	background-color: var(--contact-button-disabled-background-color) !important;
	color: var(--contact-button-disabled-text-color) !important;
	cursor: not-allowed !important;
	border-color: var(--contact-button-disabled-border-color) !important;
}

button:hover {
	background-color: var(--contact-send-button-hover-background-color);
	color: var(--contact-send-button-hover-text-color);
	border-color: var(--contact-send-button-hover-border-color);
}

/* RAINING ENVELOPES */
@keyframes fall {
	0% {
		transform: translateY(-100px);
		opacity: 1;
	}

	100% {
		transform: translateY(100vh);
		opacity: 0;
	}
}

.envelope {
	position: fixed;
	width: 2.2em;
	height: 2.2em;
	background: url('/public/assets/images/icons/contact/envelope.svg') no-repeat center center;
	background-size: contain;
	pointer-events: none;
	z-index: 9999;
	/* Dynamic animation - slowed down */
	animation: fly-envelope 3.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
	animation-delay: var(--animation-delay, 0s);
	/* Use custom properties for each envelope */
	transform: scale(var(--fly-scale, 1));
}

@keyframes fly-envelope {
	0% {
		opacity: 1;
		transform:
			translate(0, 0)
			rotate(0deg)
			scale(var(--fly-scale, 1));
	}
	60% {
		opacity: 1;
		transform:
			translate(calc(cos(var(--fly-angle, 0deg)) * var(--fly-distance, 60vh)), calc(sin(var(--fly-angle, 0deg)) * var(--fly-distance, 60vh)))
			rotate(var(--fly-rotate, 0deg))
			scale(var(--fly-scale, 1.1));
	}
	100% {
		opacity: 0;
		transform:
			translate(calc(cos(var(--fly-angle, 0deg)) * var(--fly-distance, 60vh)), calc(sin(var(--fly-angle, 0deg)) * var(--fly-distance, 60vh)))
			rotate(var(--fly-rotate, 0deg))
			scale(var(--fly-scale, 1.1));
	}
}

.envelope:nth-child(2) {
	animation-delay: 0.5s;
}

.envelope:nth-child(3) {
	animation-delay: 1s;
}