/**
 * Auth pages styles
 *
 * Uses Tailwind CSS from theme, this file adds plugin-specific styles
 */

/* Primary colors matching Belekaj theme */
:root {
	--bua-primary: #31b7bc;
	--bua-primary-dark: #2a9fa4;
	--bua-secondary: #ff6b52;
	--bua-secondary-dark: #e55a42;
}

/* Form transitions */
.bua-auth-page input {
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}

.bua-auth-page input:focus {
	outline: none;
	border-color: var(--bua-primary);
	box-shadow: 0 0 0 3px rgb(49 183 188 / 10%);
}

/* Password toggle button */
.bua-toggle-password {
	cursor: pointer;
	transition: color 0.2s;
}

.bua-toggle-password:hover {
	color: var(--bua-primary);
}

/* Password strength indicator */
.bua-strength-bar {
	background: #e5e7eb;
}

.bua-strength-bar[data-strength='0'] {
	width: 20%;
	background: #ef4444;
}

.bua-strength-bar[data-strength='1'] {
	width: 40%;
	background: #f97316;
}

.bua-strength-bar[data-strength='2'] {
	width: 60%;
	background: #eab308;
}

.bua-strength-bar[data-strength='3'] {
	width: 80%;
	background: #22c55e;
}

.bua-strength-bar[data-strength='4'] {
	width: 100%;
	background: #16a34a;
}

/* Alert styles */
.bua-alert {
	border-radius: 12px;
	padding: 1rem;
	font-size: 0.875rem;
}

.bua-alert-error {
	background-color: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.bua-alert-success {
	background-color: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.bua-alert-info {
	background-color: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.bua-alert-warning {
	background-color: #fffbeb;
	color: #92400e;
	border: 1px solid #fde68a;
}

/* Social login buttons */
.bua-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	font-weight: 500;
	transition: all 0.2s;
	border: 1px solid #e5e7eb;
	background: white;
	color: #374151;
}

.bua-social-btn:hover {
	background: #f9fafb;
	border-color: #d1d5db;
}

.bua-social-btn svg {
	width: 20px;
	height: 20px;
}

.bua-social-btn.facebook {
	border-color: #1877f2;
	color: #1877f2;
}

.bua-social-btn.facebook:hover {
	background: #1877f2;
	color: white;
}

.bua-social-btn.google {
	border-color: #4285f4;
	color: #4285f4;
}

.bua-social-btn.google:hover {
	background: #4285f4;
	color: white;
}

.bua-social-btn.instagram {
	border-color: #e4405f;
	color: #e4405f;
}

.bua-social-btn.instagram:hover {
	background: #e4405f;
	color: white;
}

.bua-social-btn.tiktok {
	border-color: #000;
	color: #000;
}

.bua-social-btn.tiktok:hover {
	background: #000;
	color: white;
}

/* Loading state */
.bua-loading {
	position: relative;
	pointer-events: none;
}

.bua-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(255 255 255 / 80%);
	display: flex;
	align-items: center;
	justify-content: center;
}

button[disabled],
button.bua-loading {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Spinner */
.bua-spinner {
	animation: bua-spin 1s linear infinite;
	width: 20px;
	height: 20px;
}

@keyframes bua-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}