/* User Profile Page Styles */

.selectable-image-card {
    transition: all 0.2s ease-in-out;
}

.selectable-image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-color: var(--bs-primary);
}

.selectable-image-card:active {
    transform: translateY(0);
}

/* Profile picture preview styling */
.profile-picture-preview {
    border: 2px solid var(--bs-border-color);
    transition: border-color 0.2s ease-in-out;
}

.profile-picture-preview:hover {
    border-color: var(--bs-primary);
}

/* Form enhancements */
.form-floating > .form-control:focus ~ label {
    color: var(--bs-primary);
}

/* Validation styling */
.field-validation-error {
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Modal improvements */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-secondary) transparent;
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: var(--bs-secondary);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-dark);
}