/* Sticky CTA, Figma UI Kit Website -> Conversion -> Sticky CTA (node 2862:742).
   Pill: #135c45 (hover #144737), radius 999, padding 4/32/4/4, gap 16, 55px avatar on
   #faf7f5, label Google Sans Flex 500 16/24 +0.12, white. No backdrop.
   Desktop: bottom-right, 24px from both edges. Mobile: bottom-center, 16px above the bottom.
   Motion: enter = slide up 24px in 420ms ease-out + fade in 320ms; exit = 200ms;
   reduced motion = 100ms fade only.
   Selectors are doubled (.sd-sticky-cta.sd-sticky-cta) so page CSS never overrides them,
   without !important. Sits below the site header (z-index 10000) and its mobile menu. */

@font-face { font-family: 'Google Sans Flex'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; }

.sd-sticky-cta.sd-sticky-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9000;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 4px 32px 4px 4px;
    border: 0;
    border-radius: 999px;
    background: #135c45;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(24px);
    /* Exit: 200ms, then drop out of the accessibility/hit tree. */
    transition: opacity .2s ease, transform .2s ease, background-color .15s ease, visibility 0s linear .2s;
}

.sd-sticky-cta.sd-sticky-cta.is-visible {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .32s ease-out, transform .42s ease-out, background-color .15s ease, visibility 0s;
}

.sd-sticky-cta.sd-sticky-cta:hover,
.sd-sticky-cta.sd-sticky-cta:focus-visible {
    background: #144737;
    color: #fff;
    text-decoration: none;
}

.sd-sticky-cta.sd-sticky-cta:focus-visible {
    outline: 2px solid #262626;
    outline-offset: 2px;
}

.sd-sticky-cta.sd-sticky-cta .sd-sticky-cta__avatar {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 50%;
    background: #faf7f5;
}

.sd-sticky-cta.sd-sticky-cta .sd-sticky-cta__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

.sd-sticky-cta.sd-sticky-cta .sd-sticky-cta__label {
    margin: 0;
    color: #fff;
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .12px;
    font-synthesis: none;
}

@media (max-width: 767px) {
    .sd-sticky-cta.sd-sticky-cta {
        right: auto;
        left: 50%;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 32px);
        transform: translate(-50%, 24px);
    }

    .sd-sticky-cta.sd-sticky-cta.is-visible {
        transform: translate(-50%, 0);
    }

    .sd-sticky-cta.sd-sticky-cta .sd-sticky-cta__label {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-sticky-cta.sd-sticky-cta,
    .sd-sticky-cta.sd-sticky-cta.is-visible {
        transform: none;
        transition: opacity .1s linear, background-color .15s ease, visibility 0s linear .1s;
    }

    .sd-sticky-cta.sd-sticky-cta.is-visible {
        transition: opacity .1s linear, background-color .15s ease, visibility 0s;
    }

    @media (max-width: 767px) {
        .sd-sticky-cta.sd-sticky-cta,
        .sd-sticky-cta.sd-sticky-cta.is-visible {
            transform: translateX(-50%);
        }
    }
}