/*
 * Floating Facebook Share Button Styles (Round Button Version)
 */

#ffsb-container {
    /* Rule 1: Hidden by default on all screen sizes */
    display: none;
    position: fixed;
    /* Positioned in the bottom right corner */
    bottom: 30px;
    right: 30px;
    /* Doubled dimensions for the circle */
    width: 120px;
    height: 120px;
    background-color: #1877f2; /* Facebook Blue */
    /* This makes the container a perfect circle */
    border-radius: 50%;
    /* A more prominent drop shadow for depth */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    /* Use flexbox to perfectly center the icon inside the circle */
    align-items: center;
    justify-content: center;
    /* Add a subtle transition for hover effects */
    transition: transform 0.2s ease-in-out;
}

/* Add a slight grow effect when the user hovers over the button */
#ffsb-container:hover {
    transform: scale(1.1);
}

#ffsb-share-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #ffffff;
}

/* The text label is hidden as it won't fit in the small circle */
#ffsb-share-button span {
    display: none;
}

/* Doubled icon size to fit nicely within the circle */
#ffsb-share-button svg {
    width: 60px;
    height: 60px;
    margin: 0; /* Remove any margin */
}

/* --- Mobile Only --- */
/* Rule 2: On screens 768px or less, this rule overrides Rule 1 and displays the button. */
/* We use 'display: flex' to ensure the icon centering works. */
@media (max-width: 768px) {
    #ffsb-container {
        display: flex;
    }
}