.mn-floating-contact-wrapper {
  position: fixed;
  z-index: 9999;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 15px;
  pointer-events: none;
  /* Allow clicking through the area around items */
}

.mn-floating-contact-wrapper.is-left {
  right: auto;
  left: 30px;
  align-items: flex-start;
}

.mn-floating-contact-main-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: auto;
  position: relative;
  font-size: 24px;
  z-index: 2;
  /* Ensure it stays above other elements */
}

.mn-floating-contact-main-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.mn-floating-contact-main-btn i {
  transition: transform 0.3s ease;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-main-btn i {
  transform: rotate(45deg);
}

.mn-floating-contact-wrapper.active
  .mn-floating-contact-main-btn
  .mn-close-icon {
  display: block;
}

.mn-floating-contact-wrapper.active
  .mn-floating-contact-main-btn
  .mn-open-icon {
  display: none;
}

/* Main Button Text Label */
.mn-floating-contact-main-text {
  position: absolute;
  bottom: 0;
  right: 70px;
  /* main btn width + gap */
  height: 60px;
  /* Match main btn height */
  display: flex;
  align-items: center;
  pointer-events: none;
  /* Let clicks pass through if needed, though usually label isn't interactive */
  white-space: nowrap;
  z-index: 1;
}

.mn-floating-contact-wrapper.is-left .mn-floating-contact-main-text {
  right: auto;
  left: 70px;
  justify-content: flex-start;
}

.mn-floating-contact-main-text span {
  background-color: #fff;
  color: #333;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Hide main text when active (optional, user didn't specify, but usually cleaner) */
.mn-floating-contact-wrapper.active .mn-floating-contact-main-text {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}

/* List Items */
.mn-floating-contact-list {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: auto;
  margin-bottom: 0;
  /* Add margin to push list up above the main button */
}

/* Since list is flex-col-reverse and we want it to "grow upwards", but the wrapper is fixed bottom.
   Actually, the wrapper layout:
   wrapper (flex-col-reverse, align-end)
     - main-list (flex-col-reverse)
     - main-btn (+ main-text absolute)
     
   Wait, if I use flex-direction column-reverse on wrapper:
   Bottom element is first in HTML? No, flex-direction reverses visual order.
   HTML:
     - btn
     - text (if sibling, or separate)
     - list
   
   If wrapper is flex-col-reverse:
     1. list (visually top)
     2. btn (visually bottom)
   
   But in HTML, render order is:
     1. btn
     2. text
     3. list
   
   If wrapper is flex-col-reverse:
   Visual order:
   Top: List
   Bottom: Btn
   
   This is what we want.
   The Text needs to be positioned relative to the Btn.
   Currently absolute positioned relative to Wrapper.
   Wrapper is fixed bottom, right.
   Btn is bottom right.
   Text is absolute relative to wrapper -> bottom: 0. Matches btn.
   
   List is now pushed 75px up from bottom? 
   No, in flex layout, elements stack.
   If List is in the flow, it will sit "above" the button (visually).
   We don't need margin-bottom on list if flex works correctly.
   
   Let's check HTML structure from render:
   <div wrapper>
      <div btn></div>
      <div text></div> (if exists)
      <div list></div>
   </div>
   
   CSS: wrapper { flex-direction: column-reverse }
   
   So visual stack (bottom to top):
   1. div list (first child in flex-reverse? No. flex-direction: column-reverse displays children in reverse order. Last child is at top?)
      - Normal column: 
        1. btn (top)
        2. text
        3. list (bottom)
      - Column-reverse:
        1. list (top)
        2. text
        3. btn (bottom)
        
   Wait. text is absolute positioned. It is taken out of flow.
   So flex items are: btn, list.
   Reverse column:
   Top: list
   Bottom: btn
   
   This is correct.
   
   The text is absolute bottom 0. Ideally centered vertically with btn.
   btn height 60px. text height 60px. aligned items center.
   
   So this logic holds.
*/

.mn-floating-contact-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
}

.mn-floating-contact-wrapper.is-left .mn-floating-contact-item {
  flex-direction: row-reverse;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Staggered delay for items */
.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(1) {
  transition-delay: 0.05s;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(2) {
  transition-delay: 0.1s;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(3) {
  transition-delay: 0.15s;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(4) {
  transition-delay: 0.2s;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(5) {
  transition-delay: 0.25s;
}

.mn-floating-contact-item-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
}

.mn-floating-contact-item-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  z-index: 2;
}

.mn-floating-contact-item:hover .mn-floating-contact-item-icon {
  transform: scale(1.1);
}

.mn-floating-contact-item-title {
  background-color: #fff;
  color: #333;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  position: absolute;
  right: 55px;
  /* Adjust based on icon size + gap */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  transition: all 0.3s ease;
}

.mn-floating-contact-wrapper.is-left .mn-floating-contact-item-title {
  right: auto;
  left: 60px;
  transform: translateY(-50%);
}

.mn-floating-contact-item:hover .mn-floating-contact-item-title {
  transform: translateY(-50%) scale(1.05);
}

/* Tooltip arrow */
.mn-floating-contact-item-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  margin-top: -6px;
  border-width: 6px 0 6px 6px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  pointer-events: none;
}

.mn-floating-contact-wrapper.is-left .mn-floating-contact-item-title::after {
  right: auto;
  left: -6px;
  border-width: 6px 6px 6px 0;
  border-color: transparent #fff transparent transparent;
}