/* --------------------------------------------------
   MNP Bubbles — Responsive fixed bubbles with hover
   -------------------------------------------------- */

 /* Container: stacked vertically, fixed to the right */
 #mnp-bubbles-container {
   list-style: none;
   position: fixed;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   z-index: 9999;
 }

 /* Each bubble (anchor) */
 /*  .mnp-bubble {
    display: flex;
    align-items: center;
    width: 48px;
    height: 48px;
    margin: 4px 0;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 24px 0 0 24px;
    overflow: hidden;
    box-sizing: border-box;
    transition: width 0.3s ease,
    background-color 0.3s ease;
    white-space: nowrap;
 }

 */

 /* Icon inside bubble */
 .mnp-bubble i {
   flex-shrink: 0;
   width: 48px;
   text-align: center;
   font-size: 1.2em;
 }

 /* Text label — hidden by default */
 .mnp-bubble .mnp-bubble-content {
   opacity: 0;
   visibility: hidden;
   margin-left: 8px;
   transition: opacity 0.3s ease;
 }

 /* On hover: expand width and show text */
 .mnp-bubble:hover {
   /* You can set a max-width if you like, or let it auto-fit content */
   width: auto;
   padding-right: 16px;
 }

 /* Reveal the label */
 .mnp-bubble:hover .mnp-bubble-content {
   opacity: 1;
   visibility: visible;
 }



 /* ASIDE wrapper */
 #mnp-bubbles-aside {
   position: fixed;
   right: 8px;
   top: 50%;
   z-index: 99999999999999;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   transform: translateY(-50%);
   padding-top: 10px;
   padding-bottom: 10px;
 }

 /* UL list */
 #mnp-bubbles-list {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   width: 100%;
   height: 100%;
   align-items: flex-end;
   max-width: 55px;
   overflow: visible;
 }

 /* Each LI */
 .mnp-bubble-item {
   position: relative;
   display: flex;
   height: 55px;
   width: 55px;
   float: right;
   clear: both;
   border-radius: 50px;
   overflow: hidden;
   transition: width .3s ease;
 }

 /* On hover expand the LI (reveals the <span>) */
 .mnp-bubble-item:hover {
   width: 230px;
 }

 /* Make sure your .mnp-bubble-content is hidden by default and shown on hover */
 .mnp-bubble-content {
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s ease;
 }

 .mnp-bubble-item:hover .mnp-bubble-content {
   opacity: 1;
   visibility: visible;
 }


 /* Mobile: stick to bottom, full‐width bar of icons */
 /* Adjust your breakpoint as needed */
 @media screen and (max-width: 768px) {
   #mnp-bubbles-container {
     top: auto;
     bottom: 0;
     right: 50%;
     left: 50%;
     transform: translateX(50%);
     flex-direction: row;
     background: transparent;
   }

   .mnp-bubble {
     border-radius: 0;
     margin: 0 4px;
     width: 48px;
     height: 48px;
   }

   /* No hover-expand on touch devices */
   .mnp-bubble .mnp-bubble-content,
   .mnp-bubble:hover {
     width: 48px !important;
     padding: 0 !important;
   }
 }

 @media (min-width: 768px) {
   #mnp-bubbles-wrapper {
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
     flex-direction: column;
   }
 }

 @media (max-width: 767px) {
   #mnp-bubbles-wrapper {
     bottom: 0;
     right: 0;
     width: 100%;
     justify-content: space-around;
     flex-direction: row;
   }
 }

 .mnp-bubble {
   cursor: pointer;
   margin: 5px;
   padding: 10px;
   border-radius: 50%;
   text-align: center;
 }