/* ================================================
   Floating Half-Arc Sharing Button (Bottom-Left)
   ================================================ */
.sharing-fab-container {
    position: fixed;
    /* Position it in the bottom-left corner */
    bottom: 85px; /* Sits just above the Cookiebot widget. Adjust as needed. */
    left: 10px;
    /* This z-index must be higher than Cookiebot's (2147483631) */
    z-index: 2147483632;
}

.sharing-fab-main-button,
.sharing-fab-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-purple);
    border-radius: 50%;
    color: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.sharing-fab-main-button:hover {
    background-color: #a66eff;
    transform: rotate(15deg) scale(1.1);
}

.sharing-fab-options {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.sharing-fab-options li {
    position: absolute;
    bottom: 0;
    left: 0;
    /* ADD THIS LINE to make the icons orbit the main button */
    transform-origin: center center;
    transition: all 0.4s cubic-bezier(0.17, 0.67, 0.4, 1.3);
}

.sharing-fab-icon {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
    background-color: var(--calm-blue);
    text-decoration: none;
}
.sharing-fab-icon:hover {
    background-color: var(--calm-teal);
    color: #fff;
}

/* --- Active State --- */
.sharing-fab-container.active .sharing-fab-main-button {
    transform: rotate(360deg);
}

.sharing-fab-container.active .sharing-fab-options {
    pointer-events: auto;
}

.sharing-fab-container.active .sharing-fab-icon {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 767.98px) {
    .sharing-fab-main-button,
    .sharing-fab-icon {
        /* A slightly larger, more touch-friendly size for mobile */
        width: 45px;
        height: 45px;
        font-size: 1.2rem; /* Make the icon inside a bit bigger */
    }
}
/* This new transform logic creates the vertical half-circle arc */
.sharing-fab-container.active li:nth-child(1) { transform: rotate(-90deg) translateX(80px); transition-delay: 0.05s; } /* Top */
.sharing-fab-container.active li:nth-child(2) { transform: rotate(-45deg) translateX(80px); transition-delay: 0.1s; }
.sharing-fab-container.active li:nth-child(3) { transform: rotate(0deg) translateX(80px);  transition-delay: 0.15s; } /* Middle (straight right) */
.sharing-fab-container.active li:nth-child(4) { transform: rotate(45deg) translateX(80px);  transition-delay: 0.2s; }
.sharing-fab-container.active li:nth-child(5) { transform: rotate(90deg) translateX(80px);  transition-delay: 0.25s; } /* Bottom */

/*
 * ADD THIS BLOCK TO COUNTER-ROTATE THE ICONS
 * This keeps the icons upright while the <li> travels in an arc.
 */
.sharing-fab-container.active li:nth-child(1) .sharing-fab-icon { transform: scale(1) rotate(90deg); }
.sharing-fab-container.active li:nth-child(2) .sharing-fab-icon { transform: scale(1) rotate(45deg); }
/* nth-child(3) is at 0 degrees, so no counter-rotation needed */
.sharing-fab-container.active li:nth-child(4) .sharing-fab-icon { transform: scale(1) rotate(-45deg); }
.sharing-fab-container.active li:nth-child(5) .sharing-fab-icon { transform: scale(1) rotate(-90deg); }