/**
 * Ukrahost Custom Login Form — styles.
 * Only styles the form fields themselves; the surrounding card/tabs/title
 * are assumed to already exist in the page layout.
 */

.ukrahost-login-form-wrapper {
	--ukrahost-text-color: #1a1f4d;
	--ukrahost-label-color: #2c2f4a;
	--ukrahost-input-bg: #f3f4f6;
	--ukrahost-input-border: #e2e3e8;
	--ukrahost-input-focus-border: #1a1f4d;
	--ukrahost-link-color: #1f3b8c;
	--ukrahost-button-bg: #14215c;
	--ukrahost-button-bg-hover: #1c2c78;
	--ukrahost-button-text: #ffffff;
	--ukrahost-error-bg: #c0392b;
	--ukrahost-error-text: #ffffff;
	--ukrahost-success-bg: #1f7a3d;
	--ukrahost-success-text: #ffffff;
	font-family: inherit;
}

.ukrahost-login-form-wrapper * {
	box-sizing: border-box;
}

.ukrahost-login-field {
	margin-bottom: 18px;
}

.ukrahost-login-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var( --ukrahost-label-color );
	font-size: 14px;
}

.ukrahost-login-field input {
	width: 100%;
	background: var( --ukrahost-input-bg );
	border: 1px solid var( --ukrahost-input-border );
	border-radius: 4px;
	color: var( --ukrahost-text-color );
	outline: none;
	transition: border-color 0.15s ease;
}

.ukrahost-login-field input:focus {
	border-color: var( --ukrahost-input-focus-border );
}

/* Input sizes */
.ukrahost-input-xs .ukrahost-login-field input { padding: 6px 10px; font-size: 12px; }
.ukrahost-input-sm .ukrahost-login-field input { padding: 8px 12px; font-size: 13px; }
.ukrahost-input-md .ukrahost-login-field input { padding: 10px 14px; font-size: 14px; }
.ukrahost-input-lg .ukrahost-login-field input { padding: 12px 16px; font-size: 15px; }
.ukrahost-input-xl .ukrahost-login-field input { padding: 14px 18px; font-size: 16px; }

.ukrahost-login-row {
	margin-bottom: 14px;
	font-size: 14px;
}

.ukrahost-login-row--lost-password {
	text-align: right;
}

.ukrahost-lost-password,
.ukrahost-logout-link {
	color: var( --ukrahost-link-color );
	text-decoration: none;
}

.ukrahost-lost-password:hover,
.ukrahost-logout-link:hover {
	text-decoration: underline;
}

.ukrahost-remember-me {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --ukrahost-label-color );
	cursor: pointer;
}

.ukrahost-remember-me input {
	margin: 0;
}

.ukrahost-login-message {
	display: none;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 14px;
	margin-bottom: 16px;
}

.ukrahost-login-message.is-error {
	display: block;
	background: var( --ukrahost-error-bg );
	color: var( --ukrahost-error-text );
}

.ukrahost-login-message.is-success {
	display: block;
	background: var( --ukrahost-success-bg );
	color: var( --ukrahost-success-text );
}

.ukrahost-login-submit-wrap.ukrahost-align-left { text-align: left; }
.ukrahost-login-submit-wrap.ukrahost-align-center { text-align: center; }
.ukrahost-login-submit-wrap.ukrahost-align-right { text-align: right; }

.ukrahost-login-submit {
	display: inline-block;
	background: var( --ukrahost-button-bg );
	color: var( --ukrahost-button-text );
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	position: relative;
	transition: background 0.15s ease;
}

.ukrahost-login-submit:hover {
	background: var( --ukrahost-button-bg-hover );
}

.ukrahost-login-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.ukrahost-login-submit-wrap.ukrahost-align-justify .ukrahost-login-submit {
	display: block;
	width: 100%;
}

/* Button sizes */
.ukrahost-button-xs .ukrahost-login-submit { padding: 6px 14px; font-size: 12px; }
.ukrahost-button-sm .ukrahost-login-submit { padding: 8px 18px; font-size: 13px; }
.ukrahost-button-md .ukrahost-login-submit { padding: 10px 22px; font-size: 14px; }
.ukrahost-button-lg .ukrahost-login-submit { padding: 12px 26px; font-size: 15px; }
.ukrahost-button-xl .ukrahost-login-submit { padding: 14px 30px; font-size: 16px; }

.ukrahost-button-spinner {
	display: none;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: middle;
	animation: ukrahost-spin 0.6s linear infinite;
}

.ukrahost-login-submit.is-loading .ukrahost-button-spinner {
	display: inline-block;
}

@keyframes ukrahost-spin {
	to { transform: rotate( 360deg ); }
}

.ukrahost-logged-in-message {
	font-size: 14px;
	color: var( --ukrahost-text-color );
}

@media ( max-width: 767px ) {
	.ukrahost-login-field {
		margin-bottom: 14px;
	}
}