/* Mobile photo overlay - show on touch */
@media screen and (max-width: 767px) {
    .photo-overlay {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .profile-photo-wrapper:hover .photo-overlay,
    .profile-photo-wrapper:active .photo-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }
    
    .photo-overlay > div {
        width: 40px !important;
        height: 40px !important;
    }
    
    .photo-overlay i {
        font-size: 16px !important;
    }
}

/* Desktop hover effects */
@media screen and (min-width: 768px) {
    .profile-photo-wrapper:hover .photo-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }
}