/**
 * Nix Frontend Login Styles
 *
 * @package Nix Frontend Login
 * @author WPTECHNIX <developers@wptechnix.com>
 */

/* Base Styles */
.nix-base {
	--nix-error-color: #dc3545;
	--nix-success-color: #28a745;
	--nix-warning-color: #ffc107;
	--nix-primary-color-rgb: 5, 151, 177;
	line-height: 1.5;
}

.nix-base *,
.nix-base::before,
.nix-base::after {
	box-sizing: border-box;
}

.nix-base,
.nix-base::before,
.nix-base::after {
	margin: 0;
	padding: 0;
}

/* Layout Utilities */
.nix-flex {
	display: flex;
}

.nix-flex-column {
	flex-direction: column;
}

.nix-justify-center {
	justify-content: center;
}

.nix-items-center {
	align-items: center;
}

.nix-my-1 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.nix-mt-1 {
	margin-top: 1rem;
}

.nix-text-center {
	text-align: center;
}

.nix-w-100 {
	width: 100%;
}

/* Form Container */
.nix-form-container {
	width: 100%;
	max-width: 28rem;
	margin: 0 auto;
	padding: 2rem;
	background-color: var(--nix-white-color);
	border-radius: var(--nix-border-radius);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Logo */
.nix-logo {
	width: 150px;
	max-width: 100%;
	margin: 0 auto 1.5rem;
	display: block;
}

.nix-logo img {
	width: 100%;
	height: auto;
	max-height: 80px;
	object-fit: contain;
}

/* Form Elements */
.nix-form {
	width: 100%;
}

.nix-form__row {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.nix-form__row .nix-form__group {
	flex: 1;
	margin-bottom: 0;
}

.nix-form__title {
	font-size: 1.875rem;
	font-weight: bold;
	color: var(--nix-primary-color);
	margin-bottom: 1.5rem;
	text-align: center;
}

.nix-form__group {
	margin-bottom: 1.5rem;
	position: relative;
}

.nix-form__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--nix-text-color);
}

.nix-required {
	color: var(--nix-error-color);
	margin-left: 2px;
}

.nix-form__input {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	border: 1px solid var(--nix-border-color);
	border-radius: var(--nix-border-radius);
	background-color: var(--nix-white-color);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nix-form__input:focus {
	outline: 0;
	border-color: var(--nix-primary-color);
	box-shadow: 0 0 0 0.125rem rgba(var(--nix-primary-color-rgb), 0.25);
}

.nix-form__input.nix-error {
	border-color: var(--nix-error-color);
	box-shadow: 0 0 0 0.125rem rgba(220, 53, 69, 0.25);
}

/* Password Field */
.nix-password-field {
	position: relative;
}

.nix-password-field .nix-form__input {
	padding-right: 3rem;
}

.nix-password-toggle {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--nix-text-color);
	cursor: pointer;
	padding: 0.25rem;
	font-size: 1rem;
	line-height: 1;
	opacity: 0.6;
	transition: opacity 0.15s ease-in-out;
}

.nix-password-toggle:hover,
.nix-password-toggle:focus {
	opacity: 1;
	outline: 0;
}

.nix-password-toggle .dashicons {
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1.25rem;
}

/* Password Strength Meter */
.nix-password-strength {
	margin-top: 0.5rem;
}

.nix-strength-meter {
	height: 4px;
	background-color: var(--nix-border-color);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	width: 100%; /* Ensure the meter container takes full width */
}

.nix-strength-meter::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: var(--strength-width, 0%);
	border-radius: 2px;
	transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.nix-strength-meter.weak::after {
	background-color: var(--nix-error-color);
}

.nix-strength-meter.medium::after {
	background-color: var(--nix-warning-color);
}

.nix-strength-meter.strong::after {
	background-color: var(--nix-success-color);
}

.nix-strength-text {
	font-size: 0.75rem;
	margin-top: 0.25rem;
	font-weight: 500;
}

.nix-strength-text:empty {
	display: none;
}

/* Checkbox */
.nix-checkbox-label {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	cursor: pointer;
}

.nix-checkbox {
	margin-right: 0.5rem;
	margin-top: 0;
}

.nix-checkbox-text {
	user-select: none;
}

/* Button */
.nix-form__button {
	width: 100%;
	padding: 0.875rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--nix-white-color);
	background-color: var(--nix-primary-color);
	border: 1px solid var(--nix-primary-color);
	border-radius: var(--nix-border-radius);
	cursor: pointer;
	transition: all 0.15s ease-in-out;
	position: relative;
	overflow: hidden;
}

.nix-form__button:hover:not(:disabled) {
	background-color: rgba(var(--nix-primary-color-rgb), 0.9);
	border-color: rgba(var(--nix-primary-color-rgb), 0.9);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(var(--nix-primary-color-rgb), 0.3);
}

.nix-form__button:focus {
	outline: 0;
	box-shadow: 0 0 0 0.125rem rgba(var(--nix-primary-color-rgb), 0.5);
}

.nix-form__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.nix-button-loader {
	display: none;
}

/* Links */
.nix-form__link {
	color: var(--nix-primary-color);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s ease-in-out;
}

.nix-form__link:hover,
.nix-form__link:focus {
	color: rgba(var(--nix-primary-color-rgb), 0.8);
	text-decoration: underline;
}

/* Messages */
.nix-message {
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	border-radius: var(--nix-border-radius);
	font-size: 0.875rem;
	font-weight: 500;
	border: 1px solid transparent;
}

.nix-message.nix-success {
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #badbcc;
}

.nix-message.nix-error {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c2c7;
}

.nix-message.nix-warning {
	color: #664d03;
	background-color: #fff3cd;
	border-color: #ffecb5;
}

.nix-message.nix-info {
	color: #055160;
	background-color: #cff4fc;
	border-color: #b6effb;
}

/* Field Errors */
.nix-field-error {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--nix-error-color);
	font-weight: 500;
}

/* Availability Checks */
.nix-username-availability,
.nix-email-availability {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
}

.nix-username-availability.available,
.nix-email-availability.available {
	color: var(--nix-success-color);
}

.nix-username-availability.unavailable,
.nix-email-availability.unavailable {
	color: var(--nix-error-color);
}

.nix-username-availability.checking,
.nix-email-availability.checking {
	color: #6c757d;
}

/* User Dashboard */
.nix-user-dashboard .nix-user-info {
	margin: 1.5rem 0;
	padding: 1rem;
	background-color: #f8f9fa;
	border-radius: var(--nix-border-radius);
}

.nix-user-dashboard .nix-user-info p {
	margin: 0.5rem 0;
}

.nix-dashboard-actions {
	text-align: center;
}

.nix-dashboard-actions .nix-form__button {
	max-width: 200px;
	margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 480px) {
	.nix-form-container {
		margin: 1rem;
		padding: 1.5rem;
		max-width: none;
	}

	.nix-logo {
		width: 120px;
	}

	.nix-form__title {
		font-size: 1.5rem;
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	.nix-base {
		--nix-border-color: #000;
	}

	.nix-form__input:focus {
		box-shadow: 0 0 0 0.1875rem currentColor;
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.nix-form__button,
	.nix-form__input,
	.nix-password-toggle,
	.nix-form__link {
		transition: none;
	}
}

/* Print Styles */
@media print {
	.nix-password-toggle,
	.nix-form__button {
		display: none;
	}

	.nix-form-container {
		box-shadow: none;
		border: 1px solid #000;
	}
}

.nix-password-toggle{
	border:none!important;
	padding-inline:0!important;
	padding-block:0 9px!important;
	color:var(--nix-primary-color)!important;
}
.nix-password-toggle:hover,.nix-password-toggle:focus{
	background-color:transparent!important;
}
.nix-form__button{
	background-color:var(--nix-primary-color)!important;
	color:var(--nix-white-color)!important;
	border:none!important;
}