/*!
 * Custom Asset: active
 * Priority: 1850
 * Context: frontend
 */

/*
 * Shared account notice component.
 *
 * Use with:
 * <div class="account-notice is-error is-visible">...</div>
 * <div class="account-notice is-success is-visible">...</div>
 */

/* =========================================================
   Account notice component
   ========================================================= */

.auth-modal,
.account--popup,
.account-password-page-component {
	--account-notice-error: var(--site-color-accent, #e40081);
	--account-notice-error-bg: rgba(228, 0, 129, .06);
	--account-notice-error-border: rgba(228, 0, 129, .28);

	--account-notice-success: var(--site-color-success, #008a3d);
	--account-notice-success-bg: rgba(0, 138, 61, .07);
	--account-notice-success-border: rgba(0, 138, 61, .25);

	--account-notice-radius: var(--site-radius-sm, 8px);
	--account-notice-padding: 14px 16px;
	--account-notice-margin: 0 0 24px;
	--account-notice-font-size: 17px;
	--account-notice-line-height: 1.45;
}

.account-notice,
.auth-modal .course-ajax-login-notice,
.account-password-page-component .account-reset-password-notice {
	display: none;
	width: 100%;
	margin: var(--account-notice-margin) !important;
	padding: var(--account-notice-padding) !important;
	border-radius: var(--account-notice-radius) !important;
	font-size: var(--account-notice-font-size) !important;
	font-weight: 400 !important;
	line-height: var(--account-notice-line-height) !important;
}

.account-notice.is-visible,
.account-notice.is-error,
.account-notice.is-success,
.auth-modal .course-ajax-login-notice.is-visible,
.auth-modal .course-ajax-login-notice.is-error,
.auth-modal .course-ajax-login-notice.is-success,
.account-password-page-component .account-reset-password-notice.is-visible,
.account-password-page-component .account-reset-password-notice.is-error,
.account-password-page-component .account-reset-password-notice.is-success {
	display: block !important;
}

.account-notice::before,
.auth-modal .course-ajax-login-notice::before,
.account-password-page-component .account-reset-password-notice::before {
	display: inline-block;
	margin-right: 8px;
	color: currentColor;
	font-weight: 700;
}

.account-notice.is-error,
.auth-modal .course-ajax-login-notice.is-error,
.account-password-page-component .account-reset-password-notice.is-error {
	color: var(--account-notice-error) !important;
	background: var(--account-notice-error-bg) !important;
	border: 1px solid var(--account-notice-error-border) !important;
}

.account-notice.is-error::before,
.auth-modal .course-ajax-login-notice.is-error::before,
.account-password-page-component .account-reset-password-notice.is-error::before {
	content: "×";
}

.account-notice.is-success,
.auth-modal .course-ajax-login-notice.is-success,
.account-password-page-component .account-reset-password-notice.is-success {
	color: var(--account-notice-success) !important;
	background: var(--account-notice-success-bg) !important;
	border: 1px solid var(--account-notice-success-border) !important;
}

.account-notice.is-success::before,
.auth-modal .course-ajax-login-notice.is-success::before,
.account-password-page-component .account-reset-password-notice.is-success::before {
	content: "✓";
}

/* Elementor form main notices mapped to the same component visual style. */
.account--popup .account-form-notices > .elementor-message,
.account--popup form > .elementor-message.elementor-message-danger,
.account--popup form > .elementor-message.elementor-message-success {
	display: block !important;
	width: 100%;
	margin: var(--account-notice-margin) !important;
	padding: var(--account-notice-padding) !important;
	border-radius: var(--account-notice-radius) !important;
	font-size: var(--account-notice-font-size) !important;
	font-weight: 400 !important;
	line-height: var(--account-notice-line-height) !important;
}

.account--popup .account-form-notices > .elementor-message-danger,
.account--popup form > .elementor-message.elementor-message-danger {
	color: var(--account-notice-error) !important;
	background: var(--account-notice-error-bg) !important;
	border: 1px solid var(--account-notice-error-border) !important;
}

.account--popup .account-form-notices > .elementor-message-success,
.account--popup form > .elementor-message.elementor-message-success {
	color: var(--account-notice-success) !important;
	background: var(--account-notice-success-bg) !important;
	border: 1px solid var(--account-notice-success-border) !important;
}

.account--popup .account-form-notices > .elementor-message::before,
.account--popup form > .elementor-message.elementor-message-danger::before,
.account--popup form > .elementor-message.elementor-message-success::before {
	content: none !important;
	display: none !important;
}

/* WooCommerce server notices fallback inside reset password page. */
.account-password-page-component :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	margin: var(--account-notice-margin) !important;
	padding: var(--account-notice-padding) !important;
	border-radius: var(--account-notice-radius) !important;
	font-size: var(--account-notice-font-size) !important;
	font-weight: 400 !important;
	line-height: var(--account-notice-line-height) !important;
}

.account-password-page-component .woocommerce-error {
	color: var(--account-notice-error) !important;
	background: var(--account-notice-error-bg) !important;
	border: 1px solid var(--account-notice-error-border) !important;
}

.account-password-page-component .woocommerce-message {
	color: var(--account-notice-success) !important;
	background: var(--account-notice-success-bg) !important;
	border: 1px solid var(--account-notice-success-border) !important;
}

/* Inline field errors stay lightweight and do not use the main notice box. */
.account--popup .elementor-field-group .elementor-message.elementor-help-inline,
.account--popup .elementor-field-group .elementor-message.elementor-form-help-inline {
	display: block;
	margin-top: var(--site-space-xs, 8px);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--account-notice-error) !important;
	font-size: 16px;
	line-height: 1.4;
}

.account--popup .elementor-field-group .elementor-message.elementor-help-inline::before,
.account--popup .elementor-field-group .elementor-message.elementor-form-help-inline::before,
.registration--form .elementor-message::before,
.registration--form .elementor-error::before {
	content: "×" !important;
	display: inline-block !important;
	margin-right: 6px;
	color: currentColor !important;
	font-family: inherit !important;
	font-weight: 700 !important;
}