/*-----------------------------------------------------------------------------------
    Selberry - "Download Company Profile" button (all pages)
    Linked from resources/views/include/company-profile.blade.php (included by the footer).
    Round button fixed at the bottom right, like the one on Ijaro Rubber: the ring text turns
    slowly around a light circle with a download icon. Dark ring = footer gradient, inner
    circle = footer newsletter button (light gradient, dark icon), so it reads on any section.
    The theme's back-to-top arrow (same corner) is moved above the button here, and the
    footer's last line ("Powered By" on the right) is kept clear of the button.
-----------------------------------------------------------------------------------*/

/* size of the button and its distance from the right and bottom edge: laptops, big screens, phones */
:root {
    --sb-profile-size: 104px;
    --sb-profile-gap: 24px;
}
@media (min-width: 1600px) {
    :root {
        --sb-profile-size: 120px;
        --sb-profile-gap: 30px;
    }
}
@media (max-width: 767px) {
    :root {
        --sb-profile-size: 78px;
        --sb-profile-gap: 16px;
    }
}

.sb-profile-btn {
    position: fixed;
    right: var(--sb-profile-gap);
    bottom: var(--sb-profile-gap);
    z-index: 998; /* under the back-to-top arrow (999), side panel and popups */
    width: var(--sb-profile-size);
    height: var(--sb-profile-size);
    border-radius: 50%;
    background: var(--sb-grad);
    box-shadow: 0 12px 30px rgba(4, 24, 16, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-profile-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: sb-profile-turn 15s linear infinite;
}
.sb-profile-ring text {
    font-family: "Parkinsans", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    fill: #fff;
}
.sb-profile-icon {
    position: relative;
    width: 58%;
    height: 58%;
    border-radius: 50%;
    background: var(--sb-grad-light);
    color: #0B3A28;
    font-size: calc(var(--sb-profile-size) * 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}
.sb-profile-icon i {
    transition: transform 0.4s ease;
}
.sb-profile-btn:hover .sb-profile-icon {
    transform: scale(1.06);
}
.sb-profile-btn:hover .sb-profile-icon i {
    transform: translateY(2px);
}
.sb-profile-btn:focus-visible {
    outline: 2px solid #B8DC8E;
    outline-offset: 3px;
}
@keyframes sb-profile-turn {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sb-profile-ring {
        animation: none;
    }
}

/* back-to-top arrow (50px): centred above the button */
.back-to-top {
    right: calc(var(--sb-profile-gap) + var(--sb-profile-size) / 2 - 25px);
    bottom: calc(var(--sb-profile-gap) + var(--sb-profile-size) + 12px);
}

/*---------------- Footer's last line clear of the button (when scrolled to the very bottom) ----------------*/
/* from 992px: "Powered By" (right column of the bottom bar) ends left of the button.
   Space needed = gap + button + 10px, minus the room the page already has right of the
   container: (screen width - container width) / 2. Container: 960 / 1140 / 1343px (theme). */
@media (min-width: 992px) {
    .sb-footer .footer-bottom-2 .footer-wrapper-2 > :last-child {
        --sb-container: 960px;
        padding-right: max(0px, calc(var(--sb-profile-gap) + var(--sb-profile-size) + 10px - (100vw - var(--sb-container)) / 2));
    }
}
@media (min-width: 1200px) {
    .sb-footer .footer-bottom-2 .footer-wrapper-2 > :last-child {
        --sb-container: 1140px;
    }
}
@media (min-width: 1400px) {
    .sb-footer .footer-bottom-2 .footer-wrapper-2 > :last-child {
        --sb-container: 1343px;
    }
}
/* tablets and phones: the bottom bar ends above the button, and the back-to-top arrow sits
   left of the button (not above it), so neither covers the bar's centred text */
@media (max-width: 991px) {
    .sb-footer .footer-bottom-2 .footer-wrapper-2 {
        padding-bottom: calc(var(--sb-profile-gap) + var(--sb-profile-size) + 10px);
    }
    .back-to-top {
        right: calc(var(--sb-profile-gap) + var(--sb-profile-size) + 10px);
        bottom: calc(var(--sb-profile-gap) + (var(--sb-profile-size) - 50px) / 2);
    }
}