/* ============================================================
   Float Contact Button – fcb-style.css
   ============================================================ */

:root {
    --fcb-size:       56px;
    --fcb-sub-size:   46px;
    --fcb-gap:        12px;
    --fcb-offset:     24px;
    --fcb-z:          9999;
    --fcb-shadow:     0 4px 16px rgba(0,0,0,.25);
    --fcb-tooltip-bg: rgba(30,30,30,.88);
    --fcb-radius:     50%;
    --fcb-trans:      .25s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ── */
.fcb-wrapper {
    position: fixed;
    z-index: var(--fcb-z);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fcb-gap);
}

.fcb-wrapper.fcb-bottom-right { bottom: var(--fcb-offset); right: var(--fcb-offset); }
.fcb-wrapper.fcb-bottom-left  { bottom: var(--fcb-offset); left:  var(--fcb-offset); }
.fcb-wrapper.fcb-top-right    { top: var(--fcb-offset);    right: var(--fcb-offset); flex-direction: column-reverse; }
.fcb-wrapper.fcb-top-left     { top: var(--fcb-offset);    left:  var(--fcb-offset); flex-direction: column-reverse; }

/* ── Responsive visibility ── */
@media (min-width: 769px) { .fcb-hide-desktop { display: none !important; } }
@media (max-width: 768px) { .fcb-hide-mobile  { display: none !important; } }

/* ── Sub-button container ── */
.fcb-sub-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fcb-gap);
    /* Hidden state */
    overflow: visible;
    pointer-events: none;
}

/* ── Individual sub-button ── */
.fcb-sub-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--fcb-sub-size);
    height: var(--fcb-sub-size);
    border-radius: var(--fcb-radius);
    background: var(--ch-color, #555);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--fcb-shadow);
    cursor: pointer;

    /* Hidden state */
    opacity: 0;
    transform: scale(0.4) translateY(8px);
    transition:
        opacity   var(--fcb-trans),
        transform var(--fcb-trans);
    pointer-events: none;
}

.fcb-sub-btn:hover {
    filter: brightness(1.12);
    transform: scale(1.1) !important;
}

/* ── Stagger delay per child ── */
.fcb-sub-btn:nth-child(1) { transition-delay: 0s; }
.fcb-sub-btn:nth-child(2) { transition-delay: .04s; }
.fcb-sub-btn:nth-child(3) { transition-delay: .08s; }
.fcb-sub-btn:nth-child(4) { transition-delay: .12s; }

/* ── Open state ── */
.fcb-wrapper.is-open .fcb-sub-buttons {
    pointer-events: auto;
}
.fcb-wrapper.is-open .fcb-sub-btn {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Reverse stagger on open – bottom items appear first */
.fcb-wrapper.is-open .fcb-sub-btn:nth-child(1) { transition-delay: .12s; }
.fcb-wrapper.is-open .fcb-sub-btn:nth-child(2) { transition-delay: .08s; }
.fcb-wrapper.is-open .fcb-sub-btn:nth-child(3) { transition-delay: .04s; }
.fcb-wrapper.is-open .fcb-sub-btn:nth-child(4) { transition-delay: 0s;   }

/* ── Tooltip ── */
.fcb-tooltip {
    position: absolute;
    right: calc(var(--fcb-sub-size) + 10px);
    white-space: nowrap;
    background: var(--fcb-tooltip-bg);
    color: #fff;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--fcb-trans), transform var(--fcb-trans);
}

/* Flip tooltip side for left-positioned wrappers */
.fcb-wrapper.fcb-bottom-left .fcb-tooltip,
.fcb-wrapper.fcb-top-left    .fcb-tooltip {
    right: auto;
    left: calc(var(--fcb-sub-size) + 10px);
    transform: translateX(-6px);
}

.fcb-sub-btn:hover .fcb-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* ── Main button ── */
.fcb-main-btn {
    position: relative;
    width:  var(--fcb-size);
    height: var(--fcb-size);
    border-radius: var(--fcb-radius);
    border: none;
    cursor: pointer;
    color: #fff;
    box-shadow: var(--fcb-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--fcb-trans), box-shadow var(--fcb-trans);
    outline-offset: 3px;
}

.fcb-main-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(0,0,0,.32);
}

.fcb-main-btn:active {
    transform: scale(.95);
}

/* ── Icon swap ── */
.fcb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transition: opacity var(--fcb-trans), transform var(--fcb-trans);
}

.fcb-icon svg {
    width:  26px;
    height: 26px;
    fill: currentColor;
}

.fcb-sub-btn .fcb-icon svg {
    width:  22px;
    height: 22px;
}

.fcb-icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}

.fcb-wrapper.is-open .fcb-icon-open {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}
.fcb-wrapper.is-open .fcb-icon-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ── Pulse ring on main button ── */
@keyframes fcb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,0,0,.2); }
    70%  { box-shadow: 0 0 0 14px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.fcb-main-btn {
    animation: fcb-pulse 2.4s ease-out infinite;
}

.fcb-wrapper.is-open .fcb-main-btn {
    animation: none;
}