/* Password Toggle CSS - Reusable component for show/hide password functionality */

/* PC Version */
.password-container {
	position: relative;
	display: inline-block;
	width: 100%;
}

.password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	user-select: none;
	z-index: 10;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eye-icon {
	display: inline-block;
	transition: opacity 0.2s ease;
	width: 20px;
	height: auto;
}

.eye-icon img,
.eye-icon svg {
	width: 100%;
	height: auto;
}

/* SP (Mobile) Version */
.password-container-sp {
	position: relative;
	display: inline-block;
	width: 100%;
}

.password-toggle-sp {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	user-select: none;
	z-index: 10;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eye-icon-sp {
	display: inline-block;
	transition: opacity 0.2s ease;
	width: 20px;
	height: auto;
}

.eye-icon-sp img,
.eye-icon-sp svg {
	width: 100%;
	height: auto;
}

/* Hover effects for better UX */
.password-toggle:hover,
.password-toggle-sp:hover {
	opacity: 0.7;
}

/* Responsive design considerations */
@media (max-width: 768px) {
	.password-toggle,
	.password-toggle-sp {
		width: 18px;
		height: 18px;
		right: 8px;
	}
	
	.eye-icon,
	.eye-icon-sp {
		width: 18px;
	}
}

@media (min-width: 751px) {
	.password-container {
        max-width: 350px !important;
        position: relative !important;
    }
}

.password-custom {
    position: relative;
}

#password-input, #form_password, #password-input-signup, #password-input-member {
	padding-right: 30px; /* Space for the toggle icon */
} 

.password-input-member {
	max-width: 100% !important;
	width: 100%;
}