/**
 * Fancy Login Module CSS
 * 
 * Styles for the progressive login/registration form on checkout
 * 
 * @package PilotWorkshops
 * @subpackage FancyLogin
 * @version 3.0.0
 */

.ftm-login-form .login-step {
	display: none;
}

.ftm-login-form .login-step.active {
	display: block;
	
	& .woocommerce-form-login {
		display: block !important;
	}
}

/* Hide the checkout form wrapper */
.woocommerce-checkout .woocommerce-checkout {
	display: none !important;
}

.woocommerce-message {
	display: none !important;
}

.woocommerce-form-login,
.woocommerce-form-login-toggle {
	display: none !important;
}

.ftm-login-form .checkout-step-description {
	color: var(--blue);
	font-size: 1.25em;
	margin-bottom: 0;
}

.form-actions {
	margin-top: 15px;
	text-align: center;
}

.ftm-login-form .form-actions button {
	margin: 0 8px;
	max-width: 100%;
	width: 150px;
	
}

/* Read-only input styling */
.ftm-login-form.form-field input[readonly] {
	background-color: #f9fafb !important;
	border-color: #d1d5db;
	color: #6b7280 !important;
	cursor: not-allowed;
}

.ftm-login-form .form-field input[readonly]:focus {
	border-color: #d1d5db;
	box-shadow: none;
}

.ftm-login-form .link-button {
	background: transparent;
	border: 0;
	cursor: pointer;
	display: block;
	margin-top: 10px;
	padding: 0;
	text-decoration: underline;
	width: auto;
}

.ftm-login-form input[type="text"],
.ftm-login-form input[type="email"],
.ftm-login-form input[type="password"] {
	margin-top: 10px;
}

.ftm-login-form input[type="password"]::-ms-clear,
.ftm-login-form input[type="password"]::-ms-reveal {
	display: none;
}

.ftm-login-form input[type="text"][readonly],
.ftm-login-form input[type="email"][readonly],
.ftm-login-form input[type="password"][readonly] {
	cursor: default;
}

.ftm-login-form .form-actions {
	margin-top: 15px;
	text-align: center;
}

.ftm-login-form .form-actions input,
.ftm-login-form .form-actions button {
	margin: 0 8px;
	max-width: 100%;
	width: 150px;
}

.ftm-login-form .form-actions .link-button {
	margin: 0 8px;
	width: auto;
}

.ftm-login-form .login-error {
	color: var(--red);
	display: none;
}

.show-password .toggle-icon {
	background-color: transparent;
	background-image: url("../../../assets/images/icons/show-password.png");
	background-size: contain;
	border-radius: 0;
	border-width: 0;
	bottom: 6px;
	font-size: 0;
	height: 32px;
	opacity: 0.75;
	position: absolute;
	right: 8px;
	width: 32px;
}

.show-password[data-password-shown="1"] .toggle-icon {
	background-image: url("../../../assets/images/icons/hide-password.png");
}