/**
 * Login Page Styles
 *
 * Styles for embedded login/register page on /mein-konto/
 *
 * @package User_Account_Hub
 * @since 4.0.0
 */

/* ============================================================================
   LOGIN PAGE CONTAINER
   ========================================================================== */

.uah-login-page {
	max-width: 500px;
	margin: 0 auto;
}

.uah-login-container {
	background: var(--uah-color-bg);
	border-radius: var(--uah-radius-l);
	border: 1px solid var(--uah-color-border);
	overflow: hidden;
}

/* ============================================================================
   HEADER
   ========================================================================== */

.uah-login-header {
	padding: var(--uah-spacing-xxl) var(--uah-spacing-l);
	background: var(--uah-color-bg);
	color: var(--uah-color-heading);
	text-align: center;
}

.uah-login-header .uah-login-headline {
	font-size: var(--uah-font-size-xl);
	font-weight: var(--uah-font-weight-semibold);
	line-height: var(--uah-line-height-s);
	margin-bottom: var(--uah-spacing-m);
}

.uah-login-header .uah-login-subline {
	font-size: var(--uah-font-size-s);
	font-weight: var(--uah-font-weight-norma);
	color: var(--uah-color-faded);
	line-height: var(--uah-line-height-s);
}

/* ============================================================================
   TAB NAVIGATION
   ========================================================================== */

.uah-login-tabs {
	display: flex;
	background: var(--uah-color-bg-alt);
}

.uah-login-tab-btn {
	flex: 1;
	padding: var(--uah-spacing-l) var(--uah-spacing-m);
	background: none;
	cursor: pointer;
	font-size: var(--uah-font-size-m);
	font-weight: var(--uah-font-weight-normal);
	color: var(--uah-color-gray);
	transition: all var(--uah-transition-normal);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	bottom: -1px;
}

.uah-login-tab-btn:hover {
	color: var(--uah-color-heading);
}

.uah-login-tab-btn.uah-tab-active {
	background: var(--uah-color-bg);
	color: var(--uah-color-heading);
	font-weight: var(--uah-font-weight-semibold);
}

/* ============================================================================
   TAB CONTENT
   ========================================================================== */

.uah-login-tab-content {
	display: none;
	padding: var(--uah-spacing-xxl) var(--uah-spacing-xl);
	animation: fadeIn 0.3s ease;
}

.uah-login-tab-content.uah-tab-active {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================================================
   FORMS
   ========================================================================== */

.uah-auth-form {
	width: 100%;
}

.uah-form-group {
	margin-bottom: var(--uah-spacing-l);
}

.uah-form-label {
	display: block;
	margin-bottom: var(--uah-spacing-m);
	font-weight: var(--uah-font-weight-normal);
	color: var(--uah-color-heading);
	font-size: var(--uah-font-size-s);
	display: flex;
	align-items: center;
}

.uah-form-hint {
	margin-top: var(--uah-spacing-s);
	font-size: var(--uah-font-size-xxs);
	color: var(--uah-color-gray);
	display: flex;
	align-items: center;
}

/* ============================================================================
   PASSWORD STRENGTH INDICATOR
   ========================================================================== */

.uah-password-strength {
	display: block;
	margin-top: var(--uah-spacing-s, 0.5rem);
	width: 100%;
}

/* Progress bar container */
.uah-strength-bar {
	width: 100%;
	height: 8px;
	background-color: var(--uah-color-border);
	border-radius: var(--uah-radius-s);
	overflow: hidden;
	margin-bottom: var(--uah-spacing-xs);
}

/* Progress bar fill */
.uah-strength-fill {
	height: 100%;
	transition: width var(--uah-transition-normal), background-color var(--uah-transition-normal);
	border-radius: var(--uah-radius-s);
}

/* Label text below bar */
.uah-strength-label {
	font-size: var(--uah-font-size-xxs, 0.75rem);
	margin-top: var(--uah-spacing-xs, 0.25rem);
	line-height: 1.3;
}

/* Weak password (red, 33% width) */
.uah-password-strength.uah-strength-weak .uah-strength-fill {
	background-color: var(--uah-color-error);
}

.uah-password-strength.uah-strength-weak .uah-strength-label {
	color: var(--uah-color-error);
}

/* Medium password (orange, 66% width) */
.uah-password-strength.uah-strength-medium .uah-strength-fill {
	background-color: var(--uah-color-warning);
}

.uah-password-strength.uah-strength-medium .uah-strength-label {
	color: var(--uah-color-warning);
}

/* Strong password (green, 100% width) */
.uah-password-strength.uah-strength-strong .uah-strength-fill {
	background-color: var(--uah-color-success);
}

.uah-password-strength.uah-strength-strong .uah-strength-label {
	color: var(--uah-color-success);
}


/* ============================================================================
   FORM ROW (Remember me + Forgot password)
   ========================================================================== */

.uah-form-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--uah-spacing-m);
}

/* ============================================================================
   CHECKBOX
   ========================================================================== */

.uah-checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--uah-spacing-xs);
	cursor: pointer;
	font-size: var(--uah-font-size-xs);
	color: var(--uah-color-faded);
	margin: 0;
	font-weight: var(--uah-font-weight-light);
}

.uah-spam-label {
	font-size: var(--uah-font-size-xs);
	color: var(--uah-color-faded);
	margin-top: var(--uah-spacing-m);
	font-weight: var(--uah-font-weight-light);
}

.uah-checkbox-label input[type="checkbox"] {
	cursor: pointer;
}

.uah-terms-label {
	align-items: flex-start;
}

.uah-terms-label a,
.uah-spam-label a {
	text-decoration: underline;
	color: var(--uah-color-faded);
}

.uah-terms-label span {
	line-height: var(--uah-line-height-normal);
}

/* ============================================================================
   LINKS
   ========================================================================== */

.uah-link {
	color: var(--uah-color-faded);
	text-decoration: none;
	font-size: var(--uah-font-size-xs);
	font-weight: var(--uah-font-weight-light);
	transition: color var(--uah-transition-normal);
}

.uah-link:hover {
	color: var(--uah-color-primary);
	text-decoration: underline;
}

/* ============================================================================
   BUTTONS
   ========================================================================== */

.uah-btn-primary:disabled {
	background: var(--uah-color-bg-alt);
	cursor: not-allowed;
	transform: none;
}

.uah-btn-block {
	width: 100%;
}

.uah-btn-loader {
	display: none;
}

/* ============================================================================
   USERNAME VALIDATION FEEDBACK
   ========================================================================== */

/* Username preview */
.uah-username-preview {
	margin-top: var(--uah-spacing-xs);
	font-size: var(--uah-font-size-xxs);
	color: var(--uah-color-faded);
}

.uah-username-preview strong {
	color: var(--uah-color-heading);
	word-break: break-all;
}

/* Username feedback message */
.uah-username-feedback {
	display: inline-block;
	margin-top: var(--uah-spacing-xs);
	font-size: var(--uah-font-size-xxs);
	font-weight: var(--uah-font-weight-medium);
	transition: all var(--uah-transition-normal);
}

.uah-username-feedback.uah-feedback-checking {
	color: var(--uah-color-faded);
}

.uah-username-feedback.uah-feedback-valid {
	color: var(--uah-color-success);
}

.uah-username-feedback.uah-feedback-invalid {
	color: var(--uah-color-error);
}

/* Input field border colors */
.uah-form-control.uah-input-checking {
	border-color: var(--uah-color-faded);
}

.uah-form-control.uah-input-valid {
	border-color: var(--uah-color-success);
	background-color: #f0fdf4;
}

.uah-form-control.uah-input-invalid {
	border-color: var(--uah-color-error);
	background-color: #fef2f2;
}


/* ============================================================================
   RESPONSIVE
   ========================================================================== */