/**
 * eLearningsHub — Tutor LMS Fixes
 *
 * Registration / login success banner. Targets both the legacy alert markup
 * (.tutor-alert.tutor-success) and the 4.x Alert component
 * (.tutor-alert.tutor-alert-success), so one file covers both versions.
 */

#tutor-registration-wrap .tutor-alert.tutor-success,
#tutor-registration-wrap .tutor-alert.tutor-alert-success,
.tutor-login-wrap .tutor-alert.tutor-success,
.tutor-login-wrap .tutor-alert.tutor-alert-success,
.elh-reg-success {
	background: #e7f6ee;
	border: 1px solid #9ad3b4;
	border-left: 5px solid #1b6b46;
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 20px;
	box-shadow: 0 2px 10px rgba( 27, 107, 70, 0.12 );
}

#tutor-registration-wrap .tutor-alert.tutor-success .tutor-alert-text,
#tutor-registration-wrap .tutor-alert.tutor-alert-success .tutor-alert-text,
.tutor-login-wrap .tutor-alert.tutor-success .tutor-alert-text,
.tutor-login-wrap .tutor-alert.tutor-alert-success .tutor-alert-text,
.elh-reg-success .tutor-alert-text {
	display: flex;
	align-items: center;
	color: #14432c;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* Swap the generic (i) glyph for a tick. */
#tutor-registration-wrap .tutor-alert.tutor-success .tutor-alert-icon,
.tutor-login-wrap .tutor-alert.tutor-success .tutor-alert-icon,
.elh-reg-success .tutor-alert-icon {
	color: #1b6b46;
}

#tutor-registration-wrap .tutor-alert.tutor-success .tutor-alert-icon::before,
.tutor-login-wrap .tutor-alert.tutor-success .tutor-alert-icon::before,
.elh-reg-success .tutor-alert-icon::before {
	content: "\2713";
	font-family: inherit;
	font-weight: 800;
}

/* Respect a reduced-motion preference — the scroll is handled in JS,
   this just keeps the entrance calm for everyone else. */
@media ( prefers-reduced-motion: no-preference ) {
	.elh-reg-success-animate {
		animation: elh-reg-pop 0.32s ease-out;
	}

	@keyframes elh-reg-pop {
		from {
			opacity: 0;
			transform: translateY( -6px );
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* Phone field: replace the red-border cue Tutor applies via .invalid,
   which its own stylesheet only defines inside one template. */
.tutor-form-control.invalid,
input[name="phone_number"].invalid {
	border-color: #b4231f;
}

/* Stopgap Save buttons, so they read as deliberate rather than stray. */
.elh-fallback-save {
	display: flex;
	justify-content: flex-end;
}

/* Alpine-independent Save, injected only when Tutor's own runtime has failed. */
.elh-native-save {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 20px;
}

.elh-native-save-msg {
	font-size: 14px;
	color: #1b6b46;
}

.elh-native-save-msg[data-ok="0"] {
	color: #b4231f;
}

.elh-native-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 16px;
}

.elh-native-label {
	font-size: 14px;
	font-weight: 500;
}

.elh-native-select {
	padding: 9px 12px;
	border: 1px solid #d6dae0;
	border-radius: 6px;
	background: #fff;
	font: inherit;
}

.elh-native-select:disabled {
	background: #f3f4f6;
	color: #6b7280;
}