/**
 * Shop Customizations – Login / Register Tabs
 *
 * Pill-style segmented control. A sliding "thumb" (the ::before pseudo-element
 * on the container) moves between the two button positions when the
 * data-active attribute changes. Buttons sit on top of the thumb via z-index.
 *
 * The .sc-tabs-enabled class is added by JS once it confirms both columns
 * exist. Until then, the default WooCommerce two-column layout is shown,
 * with the pill nav rendered above it.
 */

.sc-login-tabs {
	position: relative;
	display: flex;
	max-width: 360px;
	margin: 0 auto 1.5rem;
	padding: 4px;
	background: var(--wp--preset--color--gold-10);
	border: solid 1px var(--wp--preset--color--gold-30);
	border-radius: 9999px;
}

/* Sliding thumb — sits behind the buttons. */
.sc-login-tabs::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	background: var(--wp--preset--color--red);
	border-radius: 9999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
}

.sc-login-tabs[data-active="register"]::before {
	transform: translateX(100%);
}

.sc-login-tab {
	position: relative;
	z-index: 1;
	flex: 1;
	background: none;
	border: 0;
	padding: 0.5rem 1rem;
	font-size: 0.9375rem;
	font-family: inherit;
	cursor: pointer;
	color: #000;
	border-radius: 9999px;
	transition: color 0.2s ease;
}

.sc-login-tab:hover {
	color: #111;
}

.sc-login-tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.sc-login-tab.is-active {
	color: #fff;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.sc-login-tabs::before,
	.sc-login-tab {
		transition: none;
	}
}

/* Tab-mode layout: only applied once JS confirms both columns exist. */
#customer_login.sc-tabs-enabled .u-column1,
#customer_login.sc-tabs-enabled .u-column2 {
	width: 100%;
	max-width: none;
	float: none;
	display: none;
}

#customer_login.sc-tabs-enabled .u-column1 {
	max-width: 450px;
	margin-inline: auto;
}

#customer_login.sc-tabs-enabled .u-column2 {
	max-width: 800px;
	margin-inline: auto;
}

#customer_login.sc-tabs-enabled .u-column1.is-active,
#customer_login.sc-tabs-enabled .u-column2.is-active {
	display: block;
}

/* The pill labels replace the default "Login" / "Register" column headings. */
#customer_login.sc-tabs-enabled .u-column1 > h2,
#customer_login.sc-tabs-enabled .u-column2 > h2 {
	display: none;
}