/*
	Auth page (Login / Create Account / Forgot Password / Reset Password).
	Loaded only on: is_account_page() && ! is_user_logged_in()
	Exact match source: Auth.dc.html (Scentury Website Redesign (3))

	Rendered by page-auth.php (a dedicated full-page template, same pattern as
	page-checkout.php / page-myaccount.php) instead of WooCommerce's default
	form-login.php output — see inc/auth.php, hello_child_auth_template().
	Every form here posts to WC_Form_Handler's own login/registration/lost-
	password/reset-password handlers unchanged; this file only styles that
	markup plus the card shell and tab toggle.
*/

/* ==========================================================================
   Hero / card shell
   ========================================================================== */
.hc-auth-hero {
	background: var(--hc-cream);
	padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px) clamp(64px, 9vw, 110px);
	min-height: 640px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hc-auth-card {
	width: 100%;
	max-width: 460px;
	background: var(--hc-white);
	border-radius: var(--hc-radius-card-lg);
	padding: clamp(30px, 5vw, 42px);
	box-shadow: 0 30px 70px var(--hc-navy-08);
	position: relative;
	overflow: hidden;
}

.hc-auth-card__watermark {
	position: absolute;
	top: -14%;
	right: -10%;
	font-family: var(--hc-font-display);
	font-weight: 800;
	font-size: 160px;
	color: rgba(27, 35, 83, 0.03);
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

/* ==========================================================================
   Notices — reuses WooCommerce's own woocommerce_notices_wrapper markup,
   same visual treatment as .woocommerce-MyAccount-content's own notices
   (assets/css/pages/my-account.css) for consistency across both pages.
   ========================================================================== */
.hc-auth-notices {
	position: relative;
	margin-bottom: 20px;
}

.hc-auth-notices .woocommerce-message,
.hc-auth-notices .woocommerce-error,
.hc-auth-notices .woocommerce-info {
	list-style: none;
	background: var(--hc-cream);
	border-left: 3px solid var(--hc-navy);
	border-radius: var(--hc-radius-input);
	padding: 14px 18px;
	margin: 0 0 10px;
	color: var(--hc-navy);
	font-size: 13.5px;
	line-height: 1.5;
}

.hc-auth-notices .woocommerce-error {
	border-left-color: var(--hc-error);
}

.hc-auth-notices .woocommerce-message::before,
.hc-auth-notices .woocommerce-error::before,
.hc-auth-notices .woocommerce-info::before {
	content: none;
}

.hc-auth-notices ul {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Tabs (Log In / Create Account)
   ========================================================================== */
.hc-auth-tabs-head {
	position: relative;
	text-align: center;
	margin-bottom: 28px;
}

.hc-auth-tabs {
	display: inline-flex;
	background: var(--hc-cream);
	border-radius: var(--hc-radius-pill);
	padding: 4px;
	gap: 2px;
}

a.hc-auth-tab,
a.hc-auth-tab.hc-auth-tab {
	display: inline-block;
	padding: 10px 22px;
	border-radius: var(--hc-radius-pill);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--hc-navy-55);
	text-decoration: none;
	transition: all 0.2s ease;
}

a.hc-auth-tab.is-active,
a.hc-auth-tab.is-active.hc-auth-tab {
	background: var(--hc-navy);
	color: var(--hc-white);
}

/* ==========================================================================
   Panels / forms
   ========================================================================== */
.hc-auth-panel {
	display: none;
	position: relative;
	/* hc-fade-up: shared keyframe, style.css */
	animation: hc-fade-up 0.3s ease both;
}

.hc-auth-panel.is-active {
	display: block;
}

.hc-auth-panel--centered {
	text-align: center;
	padding: 12px 0;
}

.hc-auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hc-auth-field {
	display: flex;
	flex-direction: column;
}

.hc-auth-field label {
	color: var(--hc-navy-50);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.hc-auth-field__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.hc-auth-field__head label {
	margin-bottom: 0;
}

/*
	hello-elementor's own reset.css targets every text-like input type
	(input[type=email], input[type=tel], input[type=password], …) at the
	same (0,1,0) specificity as a single class selector here — a tie that
	load order alone decides, and that parent stylesheet isn't reliably
	first. Doubling the class (0,2,0) wins regardless of order, same fix
	already used for .hc-btn--navy/--cyan/--ghost in style.css.
*/
.hc-auth-input,
.hc-auth-input.hc-auth-input {
	width: 100%;
	background: var(--hc-cream);
	border: 1.5px solid transparent;
	border-radius: var(--hc-radius-input-lg);
	padding: 13px 16px;
	font-size: 14px;
	font-family: var(--hc-font-body);
	color: var(--hc-navy);
	outline: none;
	transition: all 0.2s ease;
}

.hc-auth-input:focus,
.hc-auth-input.hc-auth-input:focus {
	border-color: var(--hc-cyan);
	background: var(--hc-white);
	box-shadow: 0 0 0 4px var(--hc-cyan-10);
}

.hc-auth-password-wrap {
	position: relative;
}

.hc-auth-password-wrap .hc-auth-input {
	padding-right: 44px;
}

.hc-auth-password-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--hc-navy-40);
	cursor: pointer;
	padding: 4px;
	display: flex;
	line-height: 0;
}

button.hc-auth-forgot-link,
a.hc-auth-forgot-link {
	background: none;
	border: none;
	color: var(--hc-cyan);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
}

.hc-auth-submit,
.hc-auth-submit.hc-auth-submit {
	margin-top: 6px;
	width: 100%;
}

.hc-auth-switch {
	text-align: center;
	color: var(--hc-navy-55);
	font-size: 13.5px;
	margin: 4px 0 0;
}

/*
	Doubled to clear the kit's `.elementor-kit-7 a` (0,2,0), which a single
	class plus the tag only ties — and the kit loads later.
*/
.hc-auth-switch.hc-auth-switch a {
	color: var(--hc-navy);
	font-weight: 700;
}

.hc-auth-terms {
	text-align: center;
	color: var(--hc-navy-45);
	font-size: 12.5px;
	line-height: 1.6;
	margin: 2px 0 0;
}

.hc-auth-terms.hc-auth-terms a {
	color: var(--hc-navy-60);
	font-weight: 700;
	text-decoration: underline;
}

/*
	Both links need a hover of their own as well. Without one the kit's
	`.elementor-kit-7 a:hover` is the only rule that applies, and it turns them
	cyan — which is the site's accent, not the colour either of these should
	take against a light panel.
*/
.hc-auth-switch.hc-auth-switch a:hover,
.hc-auth-switch.hc-auth-switch a:focus-visible {
	color: var(--hc-cyan);
}

.hc-auth-terms.hc-auth-terms a:hover,
.hc-auth-terms.hc-auth-terms a:focus-visible {
	color: var(--hc-navy);
}

/* ==========================================================================
   Forgot / Reset password states
   ========================================================================== */
/*
	Rendered as <a> (page-auth.php), not <button> — matched here by element
	so it doesn't inherit hello-elementor's global `a { color, underline }`
	reset at a higher specificity than a bare class would.
*/
a.hc-auth-back,
a.hc-auth-back.hc-auth-back {
	background: none;
	border: none;
	color: var(--hc-navy-50);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 20px;
	text-decoration: none;
}

a.hc-auth-back:hover,
a.hc-auth-back:focus,
a.hc-auth-back.hc-auth-back:hover {
	color: var(--hc-navy);
}

.hc-woocommerce-wrap h2.hc-auth-title {
	font-family: var(--hc-font-display);
	font-weight: 800;
	font-size: 24px;
	color: var(--hc-navy);
	text-transform: uppercase;
	margin: 0 0 8px;
}

.hc-auth-subtitle {
	color: var(--hc-navy-55);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 22px;
}

.hc-auth-sent-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hc-cyan-10);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.hc-auth-panel--centered .hc-auth-title,
.hc-auth-panel--centered .hc-auth-subtitle {
	text-align: center;
}

.hc-auth-panel--centered .hc-auth-submit {
	display: inline-block;
	width: auto;
	margin-top: 4px;
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 480px) {
	.hc-auth-hero {
		padding: 32px 16px 56px;
		min-height: 0;
	}

	.hc-auth-card {
		padding: 26px 20px;
	}
}