/* Floating Action Button styles */
.fab-wrapper {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-actions {
    position: absolute;
    bottom: 70px; /* start above main button */
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* toggled when open */
}

.fab-action {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #ffffff;
    color: #333;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transform: translateY(10px) scale(0.8);
    opacity: 0;
    transition: transform 220ms cubic-bezier(.2,.9,.3,1), opacity 180ms ease, background 150ms;
}

.fab-action a { color: inherit; }

.fab-wrapper.fab-open .fab-actions {
    pointer-events: auto;
}

/* staggered appearance using nth-child */
.fab-wrapper.fab-open .fab-action {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.fab-wrapper .fab-action:nth-child(1) { transition-delay: 80ms; }
.fab-wrapper .fab-action:nth-child(2) { transition-delay: 140ms; }
.fab-wrapper .fab-action:nth-child(3) { transition-delay: 200ms; }

.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0d6efd; /* bootstrap primary */
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(13,110,253,0.25);
    cursor: pointer;
    border: none;
}

.fab-main:focus { outline: none; box-shadow: 0 6px 18px rgba(13,110,253,0.35); }

/* small icon adjustments */
.fab-action i, .fab-main i { font-size: 18px; }

/* Colors for actions */
.fab-call { background: #28a745; color: #fff; }
.fab-whatsapp { background: #25D366; color: #fff; }
.fab-telegram { background: #0088cc; color: #fff; }

@media (max-width: 576px) {
    .fab-wrapper { right: 12px; bottom: 12px; }
}