/**
 * Auth Toggle Button Styles
 * Toggle button for Get Started (left) and Sign In (right)
 * Follows design system: gradient buttons, Poppins font, proper spacing
 */

.ethos-auth-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px; /* Add gap between buttons */
	background: #fff;
	border-radius: 6px; /* Match hero-button-u border-radius */
	padding: 3px; /* Smaller padding */
	box-shadow: 0 0 4px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .12); /* Uniform shadow on all sides - bottom matches left/right */
	position: relative;
	overflow: hidden;
	flex: 0 0 auto !important;
	white-space: nowrap;
	margin-left: 10px;
	margin-right: 0;
	transition: box-shadow 0.2s ease;
}

.ethos-auth-toggle__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	font-family: Poppins, sans-serif !important; /* Matches design system */
	transition: all 0.2s ease; /* Matches design system transitions */
	position: relative;
	z-index: 2;
	border: none;
	cursor: pointer;
	min-width: 70px; /* Smaller min-width */
}

/* Remove underline on all link states */
.ethos-auth-toggle__button,
.ethos-auth-toggle__button:hover,
.ethos-auth-toggle__button:focus,
.ethos-auth-toggle__button:active,
.ethos-auth-toggle__button:visited {
	text-decoration: none !important;
}

.ethos-auth-toggle__button--signup {
	color: white !important;
	background: var(--primary-color) !important; /* Match hero-button-u color */
	padding: 8px 16px !important; /* Smaller padding */
	border-radius: 6px !important; /* Match hero-button-u border-radius (not pill) */
	font-weight: 500 !important; /* Match hero-button-u font-weight */
	font-size: 14px !important; /* Smaller font size */
	text-decoration: none !important;
}

.ethos-auth-toggle__button--signin {
	color: var(--primary-color) !important; /* Match hero-button-b color */
	background: white !important; /* Match hero-button-b background */
	border: 1px solid var(--primary-color) !important; /* Match hero-button-b border */
	padding: 8px 16px !important; /* Smaller padding */
	border-radius: 6px !important; /* Match hero-button-b border-radius */
	font-weight: 500 !important; /* Match hero-button-b font-weight */
	font-size: 14px !important; /* Smaller font size */
	text-decoration: none !important;
}

.ethos-auth-toggle__button:hover {
	text-decoration: none !important;
	transform: none; /* Remove transform for Get Started button */
}

.ethos-auth-toggle__button--signup:hover {
	background: var(--primary-color) !important; /* Keep red on hover */
	color: white !important;
	text-decoration: none !important;
}

.ethos-auth-toggle__button--signin:hover {
	color: white !important; /* Invert on hover */
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
	text-decoration: none !important;
}

.ethos-auth-toggle__text {
	position: relative;
	z-index: 3;
	white-space: nowrap;
}

/* Active state - when on Get Started page */
.ethos-auth-toggle__button--signup.active {
	color: white !important;
	background: var(--primary-color) !important; /* Match hero-button-u color */
	padding: 8px 16px !important;
	border-radius: 6px !important; /* Match hero-button-u border-radius */
	font-weight: 500 !important;
	font-size: 14px !important;
	text-decoration: none !important;
}

/* Active state - when on Sign In page */
.ethos-auth-toggle__button--signin.active {
	color: var(--primary-color) !important;
	background: white !important; /* Match hero-button-b background */
	border: 1px solid var(--primary-color) !important; /* Match hero-button-b border */
	padding: 8px 16px !important;
	border-radius: 6px !important; /* Match hero-button-b border-radius */
	font-weight: 500 !important;
	font-size: 14px !important;
	text-decoration: none !important;
}

.ethos-auth-toggle__button.active .ethos-auth-toggle__text {
	color: inherit;
}

/* Responsive Design */
@media (max-width: 768px) {
	.ethos-auth-toggle {
		display: none; /* Hide on mobile or make it icon-only */
	}
}

@media (max-width: 992px) {
	.ethos-auth-toggle__button--signup {
		padding: 12px 18px !important;
		font-size: 18px !important;
	}
	
	.ethos-auth-toggle__button {
		min-width: 70px;
	}
}