/* Y Call Now base styles */
#y-call-btn, .y-call-fab, .y-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--y-btn-bg);
  color: var(--y-icon);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
  will-change: transform, opacity;
}

/* Side (Left/Right) floating button */
.y-call-fab {
  width: var(--y-size);
  height: var(--y-size);
  outline: none;
  position: relative;
}
/* Circle */
.y-call-wrapper.y-call-circle .y-call-fab { border-radius: 50%; }
/* Octagon (flat top/bottom) */
.y-call-wrapper.y-call-octagon { overflow: visible; }
.y-call-wrapper.y-call-octagon .y-call-fab {
  -webkit-clip-path: polygon(
    29.3% 0%, 70.7% 0%,
    100% 29.3%, 100% 70.7%,
    70.7% 100%, 29.3% 100%,
    0% 70.7%, 0% 29.3%
  );
  clip-path: polygon(
    29.3% 0%, 70.7% 0%,
    100% 29.3%, 100% 70.7%,
    70.7% 100%, 29.3% 100%,
    0% 70.7%, 0% 29.3%
  );
  border-radius: 0;
}

/* Appear/Hide */
.y-call-wrapper, .y-call-fullwidth { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.y-call-visible { opacity: 1; transform: translateY(0); }

/* Fullwidth bar */
.y-call-fullwidth .y-call-btn {
  height: var(--y-size);
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center; /* center both icon and text */
  align-items: center;
  column-gap: 10px;
  border-radius: 0;
}

.y-call-svg { width: var(--y-icon-size); height: var(--y-icon-size); display:block; }

/* Tooltip (outside .y-call-fab so clip-path won't cut it) */
.y-call-wrapper { position: fixed; }
.y-call-wrapper .y-call-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--y-tooltip-bg);
  color: var(--y-tooltip-color);
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
  border-radius: var(--y-tooltip-radius);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: bottom center;
}
.y-call-wrapper:hover .y-call-tooltip,
.y-call-wrapper:focus-within .y-call-tooltip {
  opacity: 1;
  transform: translate(-50%, -2px);
}

/* Hover colors */
#y-call-btn:hover, .y-call-fab:hover {
  background: var(--y-btn-bg-hover);
  color: var(--y-icon-hover);
}

/* Hover effects (not applied in fullwidth via JS) */
.y-call-effect-grow:hover   { transform: scale(1.05); }
.y-call-effect-shrink:hover { transform: scale(0.95); }
@keyframes yCallPulse { 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }
.y-call-effect-pulse:hover  { animation: yCallPulse .25s 1; }
@keyframes yCallBounce { 0%{transform:translateY(0)} 30%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
.y-call-effect-bounce:hover { animation: yCallBounce .35s 1 cubic-bezier(.25,.46,.45,.94); }

/* Accessibility focus */
.y-call-fab:focus, .y-call-btn:focus { outline: none; box-shadow: 0 0 0 0 transparent; }