/* ================================================================
   Floating Contact Bar — fcb.css
   Default: icon circle only, flush to screen edge
   Hover: pill slides LEFT revealing label — zero impact on siblings
   ================================================================ */

/* ── Bar container ── */
.fcb-bar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: opacity .5s ease .6s;
    /* Right-align: bar itself sits at the right edge */
}

.fcb-bar.fcb-loaded {
    opacity: 1;
}

.fcb-right {
    right: 0;
    align-items: flex-end;   /* children stack flush to right */
}

.fcb-left {
    left: 0;
    align-items: flex-start; /* children stack flush to left */
}

/* ── Pill wrapper — this is the key trick ──
   Each button is a fixed-height row. The pill ALWAYS has full width
   but is translated so only the icon circle peeks out.
   On hover we translate it back to fully visible.
   Because transform doesn't affect layout, siblings never move.
── */
.fcb-btn {
    display: flex;
    align-items: center;
    flex-direction: row;
    height: 52px;
    width: 170px;               /* full pill width always in DOM */
    background: #ffffff;
    border-radius: 50px 0 0 50px;   /* rounded left, square right (flush with screen) */
    box-shadow: 0 3px 14px rgba(0,0,0,.28);
    cursor: pointer;
    text-decoration: none;
    border: none;
    padding: 5px 0 5px 5px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;

    /* ★ Key: slide pill off to the right so only the icon shows ★ */
    transform: translateX(118px);   /* 170px total - 52px icon = 118px hidden */
    transition: transform .3s cubic-bezier(.4,0,.2,1),
                box-shadow .3s ease;
}

/* Left-side mirror */
.fcb-left .fcb-btn {
    flex-direction: row-reverse;
    border-radius: 0 50px 50px 0;
    padding: 5px 5px 5px 0;
    transform: translateX(-118px);
}

/* ── Hover: slide fully into view ── */
.fcb-right .fcb-btn:hover {
    transform: translateX(0);
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

.fcb-left .fcb-btn:hover {
    transform: translateX(0);
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

/* ── Icon circle ── */
.fcb-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Label ── */
.fcb-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #222222;
    padding: 0 14px 0 10px;
    flex: 1;
}

.fcb-left .fcb-btn .fcb-label {
    padding: 0 10px 0 14px;
    text-align: right;
}

/* ── Per-button colours ── */

/* WhatsApp */
.fcb-whatsapp .fcb-icon-wrap {
    background: #25D366;
}

/* Call */
.fcb-call .fcb-icon-wrap {
    background: #00B2FF;
}

/* Help */
.fcb-help .fcb-icon-wrap {
    background: linear-gradient(135deg, #FFC107 0%, #FF5722 100%);
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .fcb-btn {
        height: 46px;
        width: 150px;
        transform: translateX(104px);   /* 150 - 46 = 104 */
    }
    .fcb-left .fcb-btn {
        transform: translateX(-104px);
    }
    .fcb-right .fcb-btn:hover,
    .fcb-left  .fcb-btn:hover {
        transform: translateX(0);
    }
    .fcb-icon-wrap {
        width: 36px;
        height: 36px;
    }
    .fcb-label {
        font-size: 12px;
    }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    .fcb-btn,
    .fcb-bar {
        transition: none;
    }
}