/* =========================================================================
   Expo LEB — Header login-sidebar: Login / Sign Up tabbed layout
   Loaded sitewide. Pairs with expoleb_sidebar_login_register_form() and
   assets/js/login-sidebar-tabs.js in functions.php.
   ========================================================================= */

:root {
	--eb-green: #2A812B;
	--eb-green-dark: #226824;
	--eb-red: #DA4040;
	--eb-red-dark: #BE3232;
	--eb-border: #E4E4E4;
	--eb-ink-soft: #6B6F76;
}

/* ---- Tab bar --------------------------------------------------------- */
.login-form-side .eb-tab-nav {
	display: flex;
	border-bottom: 1px solid var(--eb-border);
	margin-bottom: 20px;
}

.login-form-side .eb-tab-link {
	flex: 1 1 50%;
	text-align: center;
	padding: 12px 8px;
	font-family: "Lexend Deca", sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--eb-ink-soft);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s ease, border-color .15s ease;
}

.login-form-side .eb-tab-link:hover {
	color: #242424;
}

.login-form-side .eb-tab-login.active {
	color: var(--eb-red);
	border-bottom-color: var(--eb-red);
}

.login-form-side .eb-tab-register.active {
	color: var(--eb-green);
	border-bottom-color: var(--eb-green);
}

/* ---- Panels: only the active one shows -------------------------------- */
.login-form-side .eb-tab-panel-register {
	display: none;
}

.login-form-side .eb-account-tabs.active-register .eb-tab-panel-login {
	display: none;
}

.login-form-side .eb-account-tabs.active-register .eb-tab-panel-register {
	display: block;
}

/* ---- Sign-up prompt under the login form ------------------------------ */
.login-form-side .eb-signup-prompt {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--eb-border);
	text-align: center;
	font-size: 14px;
	color: var(--eb-ink-soft);
}

.login-form-side .eb-signup-prompt .eb-tab-link {
	display: inline;
	padding: 0;
	margin-left: 4px;
	border: none;
	color: var(--eb-green);
	font-weight: 700;
}

.login-form-side .eb-signup-prompt .eb-tab-link:hover {
	color: var(--eb-green-dark);
	text-decoration: underline;
}

/* ---- First / Last name: same full width as every other field ---------- */
.login-form-side .form-row-first,
.login-form-side .form-row-last {
	display: block;
	width: 100%;
	margin-right: 0;
}

.login-form-side .eb-clear {
	display: none;
}

/* ---- Consistent padding so fields never touch the sidebar edges ------- */
.login-form-side .eb-tab-nav {
	padding: 0 15px;
}

.login-form-side .eb-tab-panel-register {
	padding: 20px 15px;
}

.login-form-side .eb-signup-prompt {
	margin: 18px 0 0;
	padding: 16px 15px 0;
}

/* Every input the same box: same padding, same height, same font-size */
.login-form-side .woocommerce-Input,
.login-form-side input.input-text {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 12px 14px;
	font-size: 14px;
}


/* ---- Buttons: red for login, green for sign up ------------------------ */
.login-form-side .col-login .woocommerce-form-login__submit {
	background-color: var(--eb-red) !important;
	color: #fff !important;
	width: 100%;
}
.login-form-side .col-login .woocommerce-form-login__submit:hover {
	background-color: var(--eb-red-dark) !important;
}

.login-form-side .col-register .woocommerce-Button {
	background-color: var(--eb-green) !important;
	color: #fff !important;
	width: 100%;
}
.login-form-side .col-register .woocommerce-Button:hover {
	background-color: var(--eb-green-dark) !important;
}

.login-form-side .woocommerce-Input:focus {
	border-color: var(--eb-green);
	box-shadow: 0 0 0 3px rgba(42,129,43,0.12);
	outline: none;
}