/* ==========================================================================
   My Account: Login / Register — visible contrast between the "Register"
   heading and the actual Register button, using the theme purple.
   Markup: WoodMart overrides WooCommerce's default form-login.php with its
   own tabbed layout (#customer_login .wd-col.col-register-text), so target
   that structure rather than the stock WooCommerce classes.
   ========================================================================== */

:root {
	--rjw-lr-purple: #6E4D86;
	--rjw-lr-purple-dark: #5B4B7A;
}

/* Register heading — theme purple text + underline accent, clearly a heading. */
.woocommerce-account #customer_login .col-register-text .wd-login-title,
.woocommerce-account #customer_login .wd-col.col-register .wd-login-title {
	color: var(--rjw-lr-purple);
	font-weight: 700;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.woocommerce-account #customer_login .col-register-text .wd-login-title::after,
.woocommerce-account #customer_login .wd-col.col-register .wd-login-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--rjw-lr-purple);
	border-radius: 2px;
}

/* Switch-panel heading/paragraph next to the button must reflect the active tab, not stay frozen.
   WoodMart's own toggle only swaps this content when both "Login text" and "Register text" are
   set in the customizer; when only one is set the div never gets the with-login-reg-info wrapper
   class it needs, so it never switches. Drive the swap off .active-register directly instead,
   which WoodMart's JS always toggles regardless of that customizer config. See rjw-login-register-tabs.js
   for the matching heading-text fix. */
.woocommerce-account .wd-register-tabs .col-register-text .login-info {
	display: none;
}

.woocommerce-account .wd-register-tabs.active-register .col-register-text .registration-info {
	display: none;
}

.woocommerce-account .wd-register-tabs.active-register .col-register-text .login-info {
	display: block;
}

/* Register button — solid purple fill, white text, unmistakably a button. */
.woocommerce-account #customer_login .col-register-text .wd-switch-to-register,
.woocommerce-account #customer_login .woocommerce-form-register__submit,
.woocommerce-account #customer_login button[name="register"] {
	background-color: var(--rjw-lr-purple) !important;
	border-color: var(--rjw-lr-purple) !important;
	color: #fff !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 4px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-account #customer_login .col-register-text .wd-switch-to-register:hover,
.woocommerce-account #customer_login .col-register-text .wd-switch-to-register:focus,
.woocommerce-account #customer_login .woocommerce-form-register__submit:hover,
.woocommerce-account #customer_login .woocommerce-form-register__submit:focus,
.woocommerce-account #customer_login button[name="register"]:hover,
.woocommerce-account #customer_login button[name="register"]:focus {
	background-color: var(--rjw-lr-purple-dark) !important;
	border-color: var(--rjw-lr-purple-dark) !important;
	color: #fff !important;
}

@media (max-width: 767px) {
	.woocommerce-account #customer_login .col-register-text .wd-login-title {
		font-size: 20px;
	}

	.woocommerce-account #customer_login .col-register-text .wd-switch-to-register {
		display: inline-block;
		padding: 12px 32px;
	}
}