/*
 * Pearls Login — styles designed to match WooCommerce's default Storefront
 * aesthetic. Everything is scoped to #pearls-login-wrap.
 */

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */
#pearls-login-wrap {
	max-width: 480px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Headings & subtitle
   -------------------------------------------------------------------------- */
#pearls-login-wrap .pearls-heading {
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 0.5em;
	color: inherit;
}

#pearls-login-wrap .pearls-sub {
	margin: 0 0 1.5em;
	color: #6d7680;
	font-size: 0.95em;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Notices / messages
   -------------------------------------------------------------------------- */
#pearls-login-wrap .pearls-notice {
	display: block;
	padding: 0.75em 1em;
	border-radius: 4px;
	margin-bottom: 1em;
	font-size: 0.9em;
	line-height: 1.5;
}

#pearls-login-wrap .pearls-notice--error {
	background: #fef6f6;
	border-left: 4px solid #cc1818;
	color: #8f0c0c;
}

#pearls-login-wrap .pearls-notice--success {
	background: #f0fdf0;
	border-left: 4px solid #0a7c3e;
	color: #0a4d26;
}

#pearls-login-wrap .pearls-notice--info {
	background: #f0f6ff;
	border-left: 4px solid #2271b1;
	color: #1a4971;
}

/* --------------------------------------------------------------------------
   OTP code input
   -------------------------------------------------------------------------- */
#pearls-login-wrap .pearls-code-input {
	font-size: 2em !important;
	font-family: 'Courier New', Courier, monospace !important;
	letter-spacing: 0.4em !important;
	text-align: center !important;
	width: 100% !important;
	max-width: 260px !important;
	padding: 0.5em 0.25em !important;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Turnstile widget alignment
   -------------------------------------------------------------------------- */
#pearls-login-wrap .pearls-turnstile {
	margin-bottom: 1.25em;
}

/* --------------------------------------------------------------------------
   "Back" link
   -------------------------------------------------------------------------- */
#pearls-login-wrap .pearls-back-wrap {
	margin: 0.75em 0 0;
	font-size: 0.875em;
}

#pearls-login-wrap .pearls-back-wrap a {
	color: #555;
	text-decoration: none;
}

#pearls-login-wrap .pearls-back-wrap a:hover {
	text-decoration: underline;
	color: #333;
}

/* --------------------------------------------------------------------------
   Disabled / loading state for buttons
   -------------------------------------------------------------------------- */
#pearls-login-wrap button:disabled,
#pearls-login-wrap button[aria-busy="true"] {
	opacity: 0.7;
	cursor: not-allowed;
}