/*
 * Styles for stm-lms-templates/shortcodes/checker.php's redesigned
 * [stm_lms_certificate_checker] card. Scoped entirely under #certificate_checker
 * with a dedicated msmh-cert-checker__* namespace -- deliberately not reusing
 * the plugin's shared/global .stm-lms-message class (used by unrelated
 * components like login and checkout) so nothing here can bleed elsewhere.
 */

#certificate_checker {
	--mcc-primary: #4E1F91;
	--mcc-primary-dark: #37166B;
	--mcc-primary-soft: #F1ECFA;
	--mcc-radius: 14px;
	--mcc-shadow: 0 8px 30px rgba(24, 10, 51, .08);
}

.msmh-cert-checker {
	display: flex;
	justify-content: center;
	padding: 24px 16px;
}

.msmh-cert-checker__card {
	width: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: var(--mcc-radius);
	box-shadow: var(--mcc-shadow);
	padding: 40px 36px;
	text-align: center;
}

.msmh-cert-checker__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--mcc-primary-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}

.msmh-cert-checker__icon i {
	font-size: 28px;
	color: var(--mcc-primary);
}

.msmh-cert-checker__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: #1a1a1a;
}

.msmh-cert-checker__subtitle {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.5;
	color: #6b7280;
}

.msmh-cert-checker__form {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

/*
 * The icon lives inside this wrapper as a real flex item (not absolutely
 * positioned over the input) and the border/background/height live here too
 * -- the input itself is reset to fill/transparent. Doing it this way means
 * nothing depends on the input's own padding-left lining up with the icon,
 * which broke because the site's global input styling (!important
 * padding/border, seen elsewhere on this theme) was overriding it.
 */
.msmh-cert-checker__field {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 16px !important;
	border: 1px solid #e3e1ea;
	border-radius: 12px;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.msmh-cert-checker__field:focus-within {
	border-color: var(--mcc-primary);
	box-shadow: 0 0 0 3px var(--mcc-primary-soft);
}

.msmh-cert-checker__field-icon {
	flex: 0 0 auto;
	color: #9aa0ab;
	margin-right: 10px !important;
	pointer-events: none;
}

.msmh-cert-checker__input {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 14px;
	color: #1a1a1a;
	background: transparent !important;
	box-shadow: none !important;
}

.msmh-cert-checker__input:focus {
	outline: none !important;
	box-shadow: none !important;
}

.msmh-cert-checker__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--mcc-primary);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color .15s ease;
}

/*
 * !important here because the site's global "a:hover" styling (Elementor
 * kit / theme link-hover color, e.g. from styles.css) otherwise wins on
 * hover/focus regardless of this rule's own specificity -- this button is a
 * self-contained brand-colored control, not a content link, so it should
 * never inherit ambient link-hover coloring.
 */
.msmh-cert-checker__button:hover,
.msmh-cert-checker__button:focus {
	background: var(--mcc-primary-dark);
	color: #fff !important;
	text-decoration: none !important;
}

.msmh-cert-checker_loading .msmh-cert-checker__button {
	position: relative;
	color: transparent;
	pointer-events: none;
	background: var(--mcc-primary-dark);
}

.msmh-cert-checker_loading .msmh-cert-checker__button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: msmh-cert-checker-spin .7s linear infinite;
}

@keyframes msmh-cert-checker-spin {
	to {
		transform: rotate(360deg);
	}
}

.msmh-cert-checker__result {
	margin-top: 18px;
	padding: 12px 16px 12px 44px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	position: relative;
}

.msmh-cert-checker__result::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 16px;
	top: 13px;
}

.msmh-cert-checker__result.success {
	background: #e9f7f1;
	color: #146c43;
}

.msmh-cert-checker__result.success::before {
	content: "\f00c";
	color: #146c43;
}

.msmh-cert-checker__result.error {
	background: #fdecec;
	color: #b42318;
}

.msmh-cert-checker__result.error::before {
	content: "\f00d";
	color: #b42318;
}

@media (max-width: 480px) {
	.msmh-cert-checker__card {
		padding: 28px 20px;
	}

	.msmh-cert-checker__form {
		flex-direction: column;
	}

	.msmh-cert-checker__button {
		width: 100%;
	}
}