/**
 * VisionaryCue Commerce Pro - authentication.
 */

.vc-auth {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--vc-space-7) var(--vc-space-4);
	background: var(--vc-background);
	min-height: 60vh;
}

.vc-auth__card {
	width: 100%;
	max-width: 460px;
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
	box-shadow: var(--vc-shadow);
	padding: var(--vc-space-6);
}

.vc-auth__card--compact { text-align: center; }
.vc-auth__card--compact .vc-empty__icon { margin-inline: auto; color: var(--vc-success); }

.vc-auth__switch {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: var(--vc-space-5);
	background: var(--vc-background);
	border-radius: var(--vc-radius-pill);
}

.vc-auth__switch-btn {
	flex: 1 1 0;
	min-height: 40px;
	padding: 8px 12px;
	border: 0;
	border-radius: var(--vc-radius-pill);
	background: transparent;
	color: var(--vc-muted);
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--vc-transition) var(--vc-ease), color var(--vc-transition) var(--vc-ease);
}

.vc-auth__switch-btn.is-active {
	background: var(--vc-surface);
	color: var(--vc-text);
	box-shadow: var(--vc-shadow-sm);
}

.vc-auth__pane[hidden] { display: none; }

.vc-auth__title.vc-auth__title {
	margin: 0 0 6px;
	font-size: 1.55rem;
	font-weight: var(--vc-heading-weight);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.vc-auth__subtitle.vc-auth__subtitle {
	margin: 0 0 var(--vc-space-5);
	color: var(--vc-muted);
	font-size: 0.92em;
}

.vc-auth__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--vc-space-3);
}

.vc-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-3);
	margin-bottom: var(--vc-space-4);
	flex-wrap: wrap;
}

.vc-auth__message { margin-bottom: var(--vc-space-4); }

.vc-auth__foot {
	margin: var(--vc-space-4) 0 0;
	text-align: center;
	font-size: 0.9em;
	color: var(--vc-muted);
}

.vc-auth__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: var(--vc-space-5);
}

.vc-linkbtn--primary {
	color: var(--vc-primary);
	font-weight: 700;
	font-size: 1em;
}

.vc-linkbtn--primary:hover { text-decoration: underline; }

@media (max-width: 480px) {
	.vc-auth { padding: var(--vc-space-4) var(--vc-space-3); }
	.vc-auth__card { padding: var(--vc-space-4); border-radius: var(--vc-radius); }
	.vc-auth__grid { grid-template-columns: minmax(0, 1fr); }
	.vc-auth__title { font-size: 1.35rem; }
}