/* ==========================================================================
   FLOATING ACTION BUTTON (FAB) COMPONENT STYLING
   ========================================================================== */
.fab-container {
    position: fixed;
    bottom: var(--fab-bottom-offset);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* FAB Menu container holding the actions */
.fab-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none; /* Ignore clicks when closed */
}

/* Single Action Item */
.fab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    width: var(--fab-item-size);
    height: var(--fab-item-size);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.open .fab-menu {
    pointer-events: auto; /* Enable interaction */
}

.open .fab-item {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   ANIMATIONS VARIATIONS
   -------------------------------------------------------------------------- */

/* 1. ELASTIC (Default springy pop) */
.fab-anim-elastic .fab-item {
    transform: translateY(16px) scale(0.85);
    transition: transform 0.38s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.25s ease, visibility 0.38s;
    transition-delay: calc((3 - var(--delay)) * 0.05s);
}
.open.fab-anim-elastic .fab-item {
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--delay) * 0.08s);
}

/* 2. BOUNCE (Over-exaggerated spring) */
.fab-anim-bounce .fab-item {
    transform: translateY(24px) scale(0.8);
    transition: transform 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease, visibility 0.42s;
    transition-delay: calc((3 - var(--delay)) * 0.05s);
}
.open.fab-anim-bounce .fab-item {
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--delay) * 0.08s);
}

/* 3. SLIDE (Smooth linear slide-up) */
.fab-anim-slide .fab-item {
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease, visibility 0.3s;
    transition-delay: calc((3 - var(--delay)) * 0.04s);
}
.open.fab-anim-slide .fab-item {
    transform: translateY(0);
    transition-delay: calc(var(--delay) * 0.07s);
}

/* 4. FADE (No translation, only opacity opacity) */
.fab-anim-fade .fab-item {
    transform: none;
    transition: opacity 0.3s ease, visibility 0.3s;
    transition-delay: calc((3 - var(--delay)) * 0.04s);
}
.open.fab-anim-fade .fab-item {
    transform: none;
    transition-delay: calc(var(--delay) * 0.07s);
}

/* 5. ZOOM (Scale 0 to 1) */
.fab-anim-zoom .fab-item {
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, visibility 0.3s;
    transition-delay: calc((3 - var(--delay)) * 0.04s);
}
.open.fab-anim-zoom .fab-item {
    transform: scale(1);
    transition-delay: calc(var(--delay) * 0.07s);
}

/* Hover effects on buttons */
.fab-item:hover {
    transform: scale(1.08) translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.fab-item:active {
    transform: scale(0.98) translateY(0) !important;
}

/* Icon Wrapper */
.fab-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #ffffff;
}

.fab-svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
    fill: currentColor;
}

/* Handle stroke-only phone SVG */
.fab-item-phone .fab-svg, .fab-item-email .fab-svg, .fab-item-instagram .fab-svg, .fab-item-googlemaps .fab-svg, .fab-item-website .fab-svg, .fab-item-custom .fab-svg {
    fill: none;
}

.fab-img-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ==========================================================================
   FLOATING TOOLTIPS / LABELS
   ========================================================================== */
.fab-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #0f172a;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Smooth origin-based scaling */
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Tooltip alignment & arrows based on side */
.fab-align-right .fab-label {
    right: calc(100% + 14px);
    left: auto;
    transform-origin: right center;
}
.fab-align-right .fab-label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -9px;
    left: auto;
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    border-left-color: rgba(255, 255, 255, 0.96);
}

.fab-align-left .fab-label {
    left: calc(100% + 14px);
    right: auto;
    transform-origin: left center;
}
.fab-align-left .fab-label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -9px;
    right: auto;
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    border-right-color: rgba(255, 255, 255, 0.96);
}

/* Show tooltip on hover */
.fab-item:hover .fab-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* ==========================================================================
   MAIN TRIGGER BUTTON STYLING
   ========================================================================== */
.fab-trigger {
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    color: #ffffff;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.fab-trigger:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 28px -2px rgba(0, 0, 0, 0.35);
}

.fab-trigger:active {
    transform: scale(0.96);
}

.fab-icon-trigger-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVGs inside the main trigger */
.fab-svg-msg,
.fab-svg-close {
    position: absolute;
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
    fill: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.25s ease;
}

/* Standard built-in icons might contain fill paths, support them */
.fab-svg-msg path, .fab-svg-close path {
    fill: none;
}

.fab-img-trigger {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.custom-trigger-svg svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Initial state (closed) */
.fab-svg-msg, .custom-trigger-svg, .custom-trigger-image {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.25s ease;
}

.fab-svg-close {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

/* Open states */
.open .fab-svg-msg,
.open .custom-trigger-svg,
.open .custom-trigger-image {
    opacity: 0 !important;
    transform: scale(0.5) rotate(90deg) !important;
}

.open .fab-svg-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Color toggle when open */
.open .fab-trigger {
    background: var(--trigger-close-color) !important;
    box-shadow: 0 8px 24px -4px rgba(239, 68, 68, 0.45);
}

/* ==========================================================================
   HOVER TRIGGER MODE STYLES
   ========================================================================== */
.fab-open-on-hover:hover .fab-menu {
    pointer-events: auto;
}

.fab-open-on-hover:hover .fab-item {
    opacity: 1;
    visibility: visible;
}

.fab-open-on-hover.fab-anim-elastic:hover .fab-item {
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--delay) * 0.08s);
}

.fab-open-on-hover.fab-anim-bounce:hover .fab-item {
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--delay) * 0.08s);
}

.fab-open-on-hover.fab-anim-slide:hover .fab-item {
    transform: translateY(0);
    transition-delay: calc(var(--delay) * 0.07s);
}

.fab-open-on-hover.fab-anim-zoom:hover .fab-item {
    transform: scale(1);
    transition-delay: calc(var(--delay) * 0.07s);
}

.fab-open-on-hover.fab-anim-fade:hover .fab-item {
    transform: none;
    transition-delay: calc(var(--delay) * 0.07s);
}

.fab-open-on-hover:hover .fab-svg-msg,
.fab-open-on-hover:hover .custom-trigger-svg,
.fab-open-on-hover:hover .custom-trigger-image {
    opacity: 0 !important;
    transform: scale(0.5) rotate(90deg) !important;
}

.fab-open-on-hover:hover .fab-svg-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.fab-open-on-hover:hover .fab-trigger {
    background: var(--trigger-close-color) !important;
    box-shadow: 0 8px 24px -4px rgba(239, 68, 68, 0.45);
}

/* ==========================================================================
   DEVICE RESPONSIVE VISIBILITY
   ========================================================================== */
@media (max-width: 767px) {
    .fab-desktop-only {
        display: none !important;
    }
    .fab-hide-on-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .fab-mobile-only {
        display: none !important;
    }
}