/* Form Field Styles */

/* Soften placeholders */
::placeholder {
    color: #d1d5db !important; /* text-gray-300 */
    opacity: 0.7 !important;
    font-weight: 300 !important;
}

/* Make focused placeholders even lighter */
input:focus::placeholder,
textarea:focus::placeholder {
    color: #e5e7eb !important; /* text-gray-200 */
    opacity: 0.5 !important;
    transition: all 0.3s ease;
}

/* Improve form field focus states */
input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) !important;
    border-color: #6366f1 !important; /* indigo-500 */
    outline: none !important;
    transform: translateY(-1px) !important;
    transition: all 0.3s ease !important;
}

/* Improve form field hover states */
input:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
    border-color: #a5b4fc !important; /* indigo-300 */
    transition: all 0.3s ease;
}

/* Enhanced button hover effect */
.btn-auth:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Social login button enhancement */
.social-login-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Password toggle button styles */
.password-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    z-index: 10;
}

.password-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.1);
}

.password-toggle-btn:active {
    transform: scale(0.95);
}

.password-toggle-btn i {
    font-size: 16px;
    transition: all 0.2s ease;
}

/* Ensure the password input has proper padding for the button */
.form-input-animated input[type="password"] {
    padding-right: 3rem !important;
}