.rp-floating-cta {
    --rp-offer-bg: #B85E0D;
    --rp-offer-fg: #fff;
    --rp-phone-bg: #0F4A37;
    --rp-phone-fg: #fff;
    --rp-wa-bg: #25D366;
    --rp-wa-fg: #fff;
    --rp-mobile-bottom: 14px;
    --rp-desktop-bottom: 24px;
    --rp-side-gap: 14px;
    --rp-radius: 18px;
    --rp-z: 999999;

    position: fixed !important;
    z-index: var(--rp-z) !important;
    left: var(--rp-side-gap) !important;
    right: var(--rp-side-gap) !important;
    bottom: calc(var(--rp-mobile-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 14px, 0);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    box-sizing: border-box !important;
}

.rp-floating-cta.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0);
}

.rp-floating-cta__inner {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    pointer-events: auto;
    box-sizing: border-box !important;
}

.rp-floating-cta a {
    -webkit-tap-highlight-color: transparent;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: 0 !important;
    outline: 0;
    margin: 0 !important;
}

.rp-floating-cta__offer {
    min-width: 0 !important;
    min-height: 58px !important;
    flex: 1 1 auto !important;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    padding: 0 18px !important;
    border-radius: var(--rp-radius) !important;
    background: var(--rp-offer-bg) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--rp-offer-bg) 96%, white 4%) 0%,
        var(--rp-offer-bg) 34%,
        var(--rp-offer-bg) 76%,
        color-mix(in srgb, var(--rp-offer-bg) 96%, black 4%) 100%
    ) !important;
    border: 1px solid color-mix(in srgb, var(--rp-offer-bg) 88%, black 12%) !important;
    color: var(--rp-offer-fg) !important;
    font: inherit !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    box-shadow:
        0 14px 34px rgba(76, 35, 4, .20),
        0 4px 12px rgba(76, 35, 4, .11),
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(65,29,2,.10) !important;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

/* Very subtle light source: gives the CTA depth without looking glossy. */
.rp-floating-cta__offer::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(110px 54px at 18% 0%, rgba(255,255,255,.11), transparent 70%),
        linear-gradient(90deg, rgba(255,255,255,.02), transparent 44%);
}

.rp-floating-cta__offer-label {
    position: relative;
    z-index: 1;
    color: inherit !important;
}

.rp-floating-cta__offer-arrow {
    position: relative;
    z-index: 1;
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: inherit !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 2px 6px rgba(77,35,3,.08) !important;
    transition: transform .18s ease, background .18s ease !important;
}

.rp-floating-cta__offer-arrow svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.rp-floating-cta__icon {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: var(--rp-radius) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.17), 0 2px 7px rgba(0,0,0,.08) !important;
}

.rp-floating-cta__icon svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}

.rp-floating-cta__phone {
    background: var(--rp-phone-bg) !important;
    color: var(--rp-phone-fg) !important;
}
.rp-floating-cta__phone svg { fill: currentColor !important; }

.rp-floating-cta__whatsapp {
    background: var(--rp-wa-bg) !important;
    color: var(--rp-wa-fg) !important;
}
.rp-floating-cta__whatsapp svg { fill: currentColor !important; }

.rp-floating-cta__offer:hover {
    filter: brightness(1.012);
    transform: translateY(-2px);
    box-shadow:
        0 17px 38px rgba(76, 35, 4, .22),
        0 5px 14px rgba(76, 35, 4, .13),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(65,29,2,.10) !important;
}

.rp-floating-cta__offer:hover .rp-floating-cta__offer-arrow {
    transform: translateX(2px);
    background: rgba(255,255,255,.13) !important;
}

.rp-floating-cta__offer:active {
    transform: translateY(1px) scale(.992);
    box-shadow:
        0 7px 18px rgba(76, 35, 4, .18),
        inset 0 1px 0 rgba(255,255,255,.17),
        inset 0 2px 5px rgba(65,29,2,.10) !important;
}

.rp-floating-cta__offer:active .rp-floating-cta__offer-arrow {
    transform: translateX(1px) scale(.96);
}

.rp-floating-cta__icon:hover {
    filter: brightness(.97);
    transform: translateY(-1px);
}

.rp-floating-cta__offer:focus-visible,
.rp-floating-cta__icon:focus-visible {
    outline: 3px solid rgba(255,255,255,.95) !important;
    outline-offset: 2px;
}

@media (max-width: 782px) {
    .rp-floating-cta--device-desktop { display: none !important; }
}

@media (min-width: 783px) {
    .rp-floating-cta--device-mobile { display: none !important; }

    .rp-floating-cta {
        left: auto !important;
        right: var(--rp-side-gap) !important;
        bottom: var(--rp-desktop-bottom) !important;
    }

    .rp-floating-cta__inner {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .rp-floating-cta__offer {
        min-width: 210px !important;
        min-height: 56px !important;
        padding-inline: 20px !important;
    }

    .rp-floating-cta__icon {
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
        min-height: 56px !important;
        flex-basis: 56px !important;
    }

    .rp-floating-cta--desktop-left {
        left: var(--rp-side-gap) !important;
        right: auto !important;
    }

    .rp-floating-cta--desktop-center {
        left: 50% !important;
        right: auto !important;
        transform: translate3d(-50%, 14px, 0);
    }

    .rp-floating-cta--desktop-center.is-visible {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 390px) {
    .rp-floating-cta__inner { gap: 7px !important; }
    .rp-floating-cta__offer { min-height: 56px !important; padding-inline: 13px !important; font-size: 15px !important; gap: 8px !important; }
    .rp-floating-cta__offer-arrow { width: 31px !important; height: 31px !important; flex-basis: 31px !important; }
    .rp-floating-cta__offer-arrow svg { width: 17px !important; height: 17px !important; }
    .rp-floating-cta__icon { width: 54px !important; min-width: 54px !important; height: 56px !important; min-height: 56px !important; flex-basis: 54px !important; }
}

@media (max-width: 340px) {
    .rp-floating-cta__offer { padding-inline: 10px !important; font-size: 14px !important; }
    .rp-floating-cta__icon { width: 50px !important; min-width: 50px !important; flex-basis: 50px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rp-floating-cta,
    .rp-floating-cta__offer,
    .rp-floating-cta__icon,
    .rp-floating-cta__offer-arrow {
        transition: none !important;
    }
}