.btn-group.glass-effect {
        /* Glass effect for the button group container */
        background: rgba(255, 255, 255, 0.1); /* Subtle transparent background */
        backdrop-filter: blur(5px); /* Apply blur effect */
        -webkit-backdrop-filter: blur(5px); /* Safari support */
        border-radius: 5px; /* Slightly rounded corners */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Light border */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        overflow: hidden; /* Keep overflow hidden */
        position: relative;
        display: inline-flex; /* Use inline-flex for button group */
        z-index: 0; /* Base z-index for the container */
    }

    .btn-group.glass-effect .btn {
        position: relative;
        overflow: hidden; /* Keep overflow hidden */
        z-index: 1; /* Position ABOVE the container */
        /* Ensure text and icons are visible on glass background */
        color: inherit; /* Inherit color from parent or Bootstrap defaults */
        background-color: transparent !important; /* Make button background transparent */
        border: none !important; /* Remove default button borders */
        flex-grow: 1; /* Allow buttons to grow within the group */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .375rem .75rem; /* Adjust padding as needed */

        /* Add transition for button effects */
        transition: all 0.3s ease-in-out;
    }

    /* Pseudo-element for the glass drop effect */
    .btn-group.glass-effect .btn::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%; /* Initially size based on button */
        height: 100%;
        /* Initial background will be set by specific hover rules */
        backdrop-filter: blur(15px); /* Increased blur for more glass effect */
        -webkit-backdrop-filter: blur(15px);
        border-radius: 50%; /* Make it circular */
        transform: translate(-50%, -50%) scale(0); /* Center and scale to 0 initially */
        opacity: 0; /* Hide initially */
        transition: all 0.4s ease-out; /* Animation for appearance */
        z-index: 1; /* Position ABOVE the button (z-index: 1) but BELOW the icon (z-index: 2) */
        pointer-events: none; /* Allow clicks to pass through */
        mix-blend-mode: screen; /* Blending mode */
    }

    /* Hover effect for the glass drop: scale and opacity */
    .btn-group.glass-effect .btn:hover::before {
        transform: translate(-50%, -50%) scale(1.3); /* Slightly larger scale on hover */
        opacity: 1; /* Make visible on hover */
    }

    /* Specific background colors for the glass drop on hover based on button type */
    .btn-group.glass-effect .btn-outline-success:hover::before {
        background: rgba(40, 167, 69, 1); /* Success color for the drop */
    }

        .btn-group.glass-effect .btn-outline-primary:hover::before {
        background: rgba(40, 167, 69, 1); /* Success color for the drop */
    }

     .btn-group.glass-effect .btn-outline-primary:hover::before {
        background: rgba(40, 167, 69, 1); /* Success color for the drop */
    }

    .btn-group.glass-effect .btn-outline-dark:hover::before {
        background: rgba(52, 58, 64, 1); /* Dark color for the drop */
    }

    .btn-group.glass-effect:has(.btn-outline-light) {
    background: rgb(0, 0, 0); /* più scuro solo per il light */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

    .btn-group.glass-effect .btn-outline-light:hover::before {
        background: rgba(255, 255, 255, 0.85); /* Dark color for the drop */
        border: none !important;
    }


    .btn-group.glass-effect .btn-outline-danger:hover::before {
        background: rgba(220, 53, 69, 1); /* Danger color for the drop */
    }

     .btn-group.glass-effect .btn-outline-warning:hover::before {
        background: rgb(220, 189, 53); /* Danger color for the drop */
    }

    .btn-group.glass-effect .btn-outline-secondary:hover::before {
        background: #0672AE !important; 
    }


    /* Hover and active effects for the button and icon */
    .btn-group.glass-effect .btn:hover {
         /* No filter change on the button itself */
         /* Change icon color to white on hover */
        color: white !important; /* Change text color (affects icon due to inherit) */
    }

    /* Ensure icon also turns white on hover (more specific rule) */
    .btn-group.glass-effect .btn:hover .fas {
        color: white !important;
        border: none;
    }

    .btn-group.glass-effect .btn-outline-light:hover {
    border: none !important;
    box-shadow: none !important;
}

.btn-group.glass-effect .btn-outline-light:hover,
.btn-group.glass-effect .btn-outline-light:focus,
.btn-group.glass-effect .btn-outline-light:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.btn-group.glass-effect .btn-outline-light:hover .fas,
.btn-group.glass-effect .btn-outline-light:focus .fas,
.btn-group.glass-effect .btn-outline-light:active .fas {
    color: black !important;
}





     .btn-group.glass-effect .btn:active {
        transform: scale(0.98); /* Slightly shrink on active */
        /* No filter change on the button itself */
    }

    .btn-group.glass-effect .btn-outline-light:hover .fas {
    color: black !important;
}


    .btn-group.glass-effect .btn-outline-success {
        color: #28a745; /* Bootstrap success color */
    }

       .btn-group.glass-effect .btn-outline-primary{
        color: #28a745; /* Bootstrap success color */
    }

     .btn-group.glass-effect .btn-outline-dark {
        color: #343a40; /* Bootstrap dark color */
     }


         .btn-group.glass-effect .btn-outline-light {
        color: white !important; /* Bootstrap dark color */
     }

              .btn-group.glass-effect .btn-outline-light:hover {
        color: black !important; /* Bootstrap dark color */
     }

    .btn-group.glass-effect .btn-outline-danger {
        color: #dc3545; /* Bootstrap danger color */
     }

      .btn-group.glass-effect .btn-outline-warning {
        color: rgb(220, 189, 53);
     }

     .btn-group.glass-effect .btn-outline-secondary {
        color: #0672AE !important;
     }



    /* Optional: Add borders between buttons for clarity */
    .btn-group.glass-effect .btn:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }


     /* Adjust icon size and ensure it's ABOVE the pseudo-element */
     .btn-group.glass-effect .btn .fas {
        font-size: 1.2rem; /* Adjust icon size as needed */
         position: relative; /* Ensure icon is positioned relative */
         z-index: 2; /* IMPORTANT: Position ABOVE the pseudo-element (z-index: 1) */
         transition: color 0.3s ease-in-out; /* Add transition for color change */
     }


     .rotate-on-hover {
  transition: transform 0.6s ease;
}

.profile-operation-btn:hover .rotate-on-hover {
  transform: rotate(360deg);
}
