/**
 * Callback styles
 */

#popup {
	animation: fadeIn 0.5s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	background: rgb(65 65 65 / 35%);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 99;
}

#popup > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	background: #fff;
	padding: 20px;
	margin: 0 5px;
	border-radius: 10px;
	width: 425px;
}

#popup > div > div {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}

#popup > div > div span {
	font-size: 24px;
	font-weight: 700;
}

#popup > div > div img {
	width: 24px;
	height: 24px;
	cursor: pointer;
}

#popup .form-field,
#popup .form-textarea,
#popup .form-button,
#popup .file-field {
	position: relative;
	padding-bottom: 20px;
}

#popup .form-field {
	display: flex;
	align-items: center;
	justify-content: center;
}

#popup .form-field img {
	position: absolute;
	pointer-events: none;
	width: 42px;
	height: 42px;
	top: 5px;
	left: 5px;
	z-index: 1;
}

#popup .form-field label {
	position: relative;
	width: 100%;
}

#popup .form-field input {
	background: #f5f5f5;
	height: 52px;
	padding: 15px 25px;
	border-radius: 15px;
	border: 0;
	outline: 0;
	transition: all .3s;
}

#popup .form-textarea textarea {
	background: #f5f5f5;
	border-radius: 15px;
	padding: 15px 25px;
	width: 100%;
	height: 52px;
	min-height: 52px;
	max-height: 200px;
	border: 0;
	outline: 0;
	resize: vertical;
}

#popup .form-textarea textarea::placeholder {
	font-size: 14px;
	font-weight: normal;
	color: #c2c2c2;
}

#popup .form-field input, 
#popup .form-button input {
	width: 100%;
}

#popup .form-button button {
	color: #fff;
	position: relative;
	padding: 10px 40px;
	cursor: pointer;
	width: 100%;
}

#popup .form-policy > label {
	display: flex;
	align-items: flex-start;
	gap: 5px;
}

#popup .file-field label {
	line-height: 180%;
}

#popup .file-field input {
	font-size: 13px;
	background: #f5f5f5;
	border: 0;
	border-radius: 15px;
	height: 52px;
	outline: 0;
	padding: 15px 30px 15px 30px;
	width: 100%;;
	transition: all .3s;
}

#popup .file-field input::file-selector-button {
	color: #333;
	border: 0;
	border-radius: 5px;
	padding: 5px 12px;
	margin-right: 15px;
	cursor: pointer;
	transition: all .3s;
}

#popup .file-field input:hover::file-selector-button {
	opacity: 0.85;
}

#popup .file-field error {
	font-size: 13px;
	color: var(--red);
	margin-left: 10px;
}

#popup .form-policy p, 
#popup .form-policy a {
	font-size: 13px;
	font-weight: 300;
}

#popup .form-policy a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
,
#popup .form-policy input {
	width: 14px;
	height: 14px;
	position: relative;
	outline: 0;
	border: 0;
	cursor: pointer;
}

#popup .form-select select {
	background: #f5f5f5;
	height: 52px;
	padding: 15px 40px 15px 40px;
	border-radius: 15px;
	border: 0;
	outline: 0;
	transition: all .3s;
	width: 100%;
	margin-bottom: 15px;
}

#popup .form-select label {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#popup .form-field label > p {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 14px;
	font-weight: normal;
	color: #c2c2c2;
	position: absolute;
	height: 100%;
	pointer-events: none;
	transition: opacity .2s;
	visibility: visible;
	opacity: 1;
	top: 0;
	left: 25px;
}

#popup .form-field input:focus ~ p,
#popup .form-field input:active ~ p {
	visibility: hidden;
	opacity: 0;
}

#popup .form-field input::placeholder {
	visibility: hidden;
}

#popup .form-field input:not(:placeholder-shown, [type=checkbox]) ~ p {
    visibility: hidden;
    opacity: 0;
}

#popup star {
	color: var(--red);
}