/* ================================
   TotalEase Floating Sticky Tab
   Desktop: hover expands
   Mobile: tap toggles (via JS)
================================== */

.totalease-sticky-tab{
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999999;

  display: inline-block;
  text-decoration: none;
}

/* Optional: if you want LESS overlap with content, nudge it slightly off-screen */
/* .totalease-sticky-tab{ left: -4px; } */

.totalease-sticky-tab__inner{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 52px;
  padding: 8px 12px;

  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);

  width: 54px;                 /* collapsed */
  overflow: hidden;
  white-space: nowrap;

  transition: width .25s ease;
}

.totalease-sticky-tab__img{
  height: 32px;
  width: auto;
  display: block;
  transition: opacity .2s ease;
}

.totalease-sticky-tab__cta{
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .15s ease;
}

/* Expanded image hidden by default */
.totalease-sticky-tab__img--expanded{
  opacity: 0;
}

/* Desktop hover expansion */
@media (hover: hover) and (pointer: fine){
  .totalease-sticky-tab:hover .totalease-sticky-tab__inner,
  .totalease-sticky-tab:focus-visible .totalease-sticky-tab__inner{
    width: 280px;              /* expanded */
    max-width: calc(100vw - 20px);
  }

  .totalease-sticky-tab:hover .totalease-sticky-tab__cta,
  .totalease-sticky-tab:focus-visible .totalease-sticky-tab__cta{
    opacity: 1;
  }

  .totalease-sticky-tab:hover .totalease-sticky-tab__img--collapsed,
  .totalease-sticky-tab:focus-visible .totalease-sticky-tab__img--collapsed{
    opacity: 0;
  }

  .totalease-sticky-tab:hover .totalease-sticky-tab__img--expanded,
  .totalease-sticky-tab:focus-visible .totalease-sticky-tab__img--expanded{
    opacity: 1;
  }
}

/* Mobile sizing (still collapsed by default) */
@media (max-width: 800px){
  .totalease-sticky-tab__inner{
    height: 46px;
    width: 46px;               /* smaller icon on mobile */
    padding: 6px 10px;
  }
  .totalease-sticky-tab__img{
    height: 26px;
  }

  /* OPTIONAL: move to bottom-left on mobile to avoid overlapping content */
  /* .totalease-sticky-tab{ top:auto; bottom: 14px; transform:none; } */
}

/* Open state (used by JS on mobile/touch) */
.totalease-sticky-tab.is-open .totalease-sticky-tab__inner{
  width: 280px;
  max-width: calc(100vw - 20px);
}

.totalease-sticky-tab.is-open .totalease-sticky-tab__cta{
  opacity: 1;
}

.totalease-sticky-tab.is-open .totalease-sticky-tab__img--collapsed{
  opacity: 0;
}

.totalease-sticky-tab.is-open .totalease-sticky-tab__img--expanded{
  opacity: 1;
}

/* Force TotalEase tab above EVERYTHING */
.totalease-sticky-tab{
  position: fixed !important;
  z-index: 2147483647 !important; /* max safe z-index */
  isolation: isolate;             /* creates its own stacking context */
  pointer-events: auto !important;
}

/* Also ensure the inner stays clickable */
.totalease-sticky-tab__inner{
  position: relative;
  z-index: 2147483647 !important;
}


/* If your expanded logo still looks smaller, force its height too */
.totalease-sticky-tab__img--expanded{
  height: 70px !important;
  width: auto !important;
  flex: 0 0 auto !important;   /* do NOT shrink */
}

/* Ensure text can shrink/truncate instead of shrinking the logo */
.totalease-sticky-tab__cta{
  flex: 1 1 auto;
  min-width: 0;                /* allows truncation */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}