/**
 * DROPEEGO — LOGIN / REGISTER MODAL
 *
 * Native Ecomus login/register modal styling.
 * Transparent backdrop and transparent wrapper.
 * Frosted-glass appearance is applied directly
 * to the main modal container.
 *
 * No backdrop-filter is used.
 */


/* =========================================================
   TRANSPARENT MODAL BACKDROP
   ========================================================= */

#login-modal .modal__backdrop {
	background: transparent !important;
	background-color: transparent !important;
	opacity: 1 !important;
	box-shadow: none !important;
}


/* =========================================================
   MAIN MODAL CONTAINER
   ========================================================= */

#login-modal > div.modal__container {
	position: relative !important;
	isolation: isolate !important;
	overflow: hidden !important;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.30) 0%,
			rgba(55, 88, 109, 0.34) 42%,
			rgba(55, 88, 109, 0.42) 100%
		) !important;

	background-color: rgba(55, 88, 109, 0.36) !important;

	border: 1px solid rgba(255, 255, 255, 0.42) !important;

	border-radius: 24px !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.50),
		inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
}


/* =========================================================
   SOFT INTERNAL GLASS EFFECT
   ========================================================= */

#login-modal > div.modal__container::before {
	content: "" !important;

	position: absolute !important;
	top: -24px !important;
	right: -24px !important;
	bottom: -24px !important;
	left: -24px !important;

	background:
		radial-gradient(
			circle at 18% 12%,
			rgba(255, 255, 255, 0.30) 0%,
			rgba(255, 255, 255, 0.08) 28%,
			transparent 55%
		),
		radial-gradient(
			circle at 85% 85%,
			rgba(55, 88, 109, 0.42) 0%,
			rgba(55, 88, 109, 0.16) 38%,
			transparent 70%
		);

	filter: blur(18px) !important;

	opacity: 0.95 !important;

	pointer-events: none !important;

	z-index: -1 !important;
}


/* =========================================================
   ECOMUS MODAL WRAPPER — COMPLETELY TRANSPARENT
   ========================================================= */

#login-modal > div.modal__container > div.modal__wrapper {
	background: transparent !important;
	background-color: transparent !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   MODAL CONTENT — COMPLETELY TRANSPARENT
   ========================================================= */

#login-modal .modal__content {
	background: transparent !important;
	background-color: transparent !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   LOGIN / REGISTER SECTIONS
   ========================================================= */

#login-modal .woocommerce-customer-login,
#login-modal .woocommerce-customer-register,
#login-modal .em-row,
#login-modal .em-col {
	background: transparent !important;
	background-color: transparent !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#login-modal .modal__button-close {
	background: rgba(255, 255, 255, 0.20) !important;
	background-color: rgba(255, 255, 255, 0.20) !important;

	border: 1px solid rgba(255, 255, 255, 0.42) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

	color: #37586D !important;
}

#login-modal .modal__button-close:hover {
	background: #f5773e !important;
	background-color: #f5773e !important;

	border-color: #f5773e !important;

	color: #ffffff !important;

	box-shadow: none !important;
}


/* =========================================================
   LOGIN / REGISTER FORMS
   ========================================================= */

#login-modal .woocommerce-form {
	background: transparent !important;
	background-color: transparent !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   FORM INPUTS
   ========================================================= */

#login-modal .woocommerce-form input.input-text {
	background: rgba(255, 255, 255, 0.20) !important;
	background-color: rgba(255, 255, 255, 0.20) !important;

	border: 1px solid rgba(255, 255, 255, 0.46) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}


/* =========================================================
   FORM INPUT FOCUS
   ========================================================= */

#login-modal .woocommerce-form input.input-text:focus {
	background: rgba(255, 255, 255, 0.28) !important;
	background-color: rgba(255, 255, 255, 0.28) !important;

	border-color: #f5773e !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

	outline: none !important;
}


/* =========================================================
   LOGIN / REGISTER BUTTONS
   ========================================================= */

#login-modal .woocommerce-form-login__submit,
#login-modal .woocommerce-form-register__submit {
	background: #f5773e !important;
	background-color: #f5773e !important;

	border: 0 !important;

	box-shadow: none !important;

	color: #ffffff !important;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

#login-modal .woocommerce-form-login__submit:hover,
#login-modal .woocommerce-form-register__submit:hover {
	background: #37586D !important;
	background-color: #37586D !important;

	box-shadow: none !important;

	color: #ffffff !important;
}


/* =========================================================
   LOGIN / REGISTER LINKS
   ========================================================= */

#login-modal .woocommerce-lost-password,
#login-modal .em-button-register-mode,
#login-modal .em-button-login-mode {
	color: #37586D !important;
}

#login-modal .woocommerce-lost-password:hover,
#login-modal .em-button-register-mode:hover,
#login-modal .em-button-login-mode:hover {
	color: #f5773e !important;
}


/* =========================================================
   MODAL LOADER
   ========================================================= */

#login-modal .modal__loader {
	background: transparent !important;
	background-color: transparent !important;

	box-shadow: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	#login-modal > div.modal__container {
		border-radius: 20px !important;
	}

	#login-modal > div.modal__container::before {
		filter: blur(14px) !important;
	}
}