/* Sticky CTA Button Plugin Styles */

/* ---------------------------------------------------------------------------
 * Button group (cluster)
 * ------------------------------------------------------------------------- */
.wp-sticky-cluster {
    position: fixed;
    z-index: 9999;
    display: flex;
    gap: 10px;
    margin: 0;
    box-sizing: border-box;
}

.wp-sticky-cluster.layout-vertical {
    flex-direction: column;
}

.wp-sticky-cluster.layout-horizontal {
    flex-direction: row;
    align-items: center;
}

/* Cross-axis alignment for vertical stacks, derived from the chosen corner */
.wp-sticky-cluster.layout-vertical.align-start  { align-items: flex-start; }
.wp-sticky-cluster.layout-vertical.align-center { align-items: center; }
.wp-sticky-cluster.layout-vertical.align-end    { align-items: flex-end; }

/* ---------------------------------------------------------------------------
 * Shared button base
 * ------------------------------------------------------------------------- */
.wp-sticky-button {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    border: none;
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
}

.wp-sticky-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.wp-sticky-button i {
    font-size: 16px;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
 * CTA buttons (anchors)
 * ------------------------------------------------------------------------- */
.wp-sticky-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 25px;
    text-decoration: none;
    white-space: nowrap;
    /* Hidden by default; revealed on scroll or made visible by "always" mode */
    opacity: 0;
    visibility: hidden;
}

.wp-sticky-cta span {
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Back to top button
 * ------------------------------------------------------------------------- */
.wp-sticky-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
}

.wp-sticky-back-to-top:hover {
    transform: translateY(-3px) scale(1.05);
}

/* ---------------------------------------------------------------------------
 * Visibility states
 * ------------------------------------------------------------------------- */
.wp-sticky-cta.show,
.wp-sticky-back-to-top.show,
[data-display-behavior="always"] .wp-sticky-cta,
[data-display-behavior="always"] .wp-sticky-back-to-top {
    opacity: 1;
    visibility: visible;
}

@keyframes wpStickyFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wp-sticky-cta.show,
.wp-sticky-back-to-top.show {
    animation: wpStickyFadeInUp 0.3s ease;
}

/* ---------------------------------------------------------------------------
 * Default responsive behaviour (used when the mobile bar is NOT enabled).
 * Collapses CTAs to icon-only circles on small screens.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .wp-sticky-cluster:not(.mobile-bar-on) .wp-sticky-cta:not(.no-icon) {
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
        border-radius: 50%;
    }

    .wp-sticky-cluster:not(.mobile-bar-on) .wp-sticky-cta:not(.no-icon) span {
        display: none;
    }

    /* Buttons without an icon must keep their label, otherwise they'd be empty. */
    .wp-sticky-cluster:not(.mobile-bar-on) .wp-sticky-cta.no-icon {
        height: 48px;
        min-height: 48px;
        padding: 0 16px;
    }

    .wp-sticky-cluster:not(.mobile-bar-on) .wp-sticky-back-to-top {
        width: 48px;
        height: 48px;
    }
}

/* ---------------------------------------------------------------------------
 * Accessibility
 * ------------------------------------------------------------------------- */
.wp-sticky-button:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .wp-sticky-button {
        border: 2px solid currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-sticky-button {
        transition: none;
    }
    .wp-sticky-button:hover {
        transform: none;
    }
    .wp-sticky-cta.show,
    .wp-sticky-back-to-top.show {
        animation: none;
    }
}

@media print {
    .wp-sticky-cluster {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
 * Icon mappings (lightweight Unicode/emoji fallback — no external font needed)
 *
 * All rules are scoped to .wp-sticky-button so they can never override a real
 * Font Awesome icon set loaded by the theme or another plugin.
 * ------------------------------------------------------------------------- */
.wp-sticky-button i[class*="fa-"],
.wp-sticky-button i[class*="scb-"] {
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    line-height: normal;
    vertical-align: baseline;
}

/* "\FE0F" (variation selector 16) forces emoji presentation for code points
 * that would otherwise render as plain monochrome text glyphs. */
.wp-sticky-button .fa-rocket:before { content: "\1F680"; }
.wp-sticky-button .fa-phone:before { content: "\1F4DE"; }
.wp-sticky-button .fa-envelope:before { content: "\2709\FE0F"; }
.wp-sticky-button .fa-shopping-cart:before { content: "\1F6D2"; }
.wp-sticky-button .fa-star:before { content: "\2B50"; }
.wp-sticky-button .fa-thumbs-up:before { content: "\1F44D"; }
.wp-sticky-button .fa-fire:before { content: "\1F525"; }
.wp-sticky-button .fa-bolt:before { content: "\26A1"; }
.wp-sticky-button .fa-gift:before { content: "\1F381"; }
.wp-sticky-button .fa-bullhorn:before { content: "\1F4E2"; }
.wp-sticky-button .fa-comment:before { content: "\1F4AC"; }
.wp-sticky-button .fa-user:before { content: "\1F464"; }
.wp-sticky-button .fa-cog:before { content: "\2699\FE0F"; }

/* Legacy emoji values (< 2.2.0) that moved to the single-color set — kept so
 * stored settings from older versions keep rendering until re-saved. */
.wp-sticky-button .fa-download:before { content: "\2B07\FE0F"; }
.wp-sticky-button .fa-play:before { content: "\25B6\FE0F"; }
.wp-sticky-button .fa-heart:before { content: "\2764\FE0F"; }

/* Single-color (mono) icons — plain text glyphs that inherit the button's
 * text color. "\FE0E" (variation selector 15) forces text presentation so
 * the glyphs never render as colored emoji. */
.wp-sticky-button .scb-arrow-right:before { content: "\2192"; }
.wp-sticky-button .scb-arrow-up-right:before { content: "\2197\FE0E"; }
.wp-sticky-button .scb-arrow-down:before { content: "\2193"; }
.wp-sticky-button .scb-chevron-right:before { content: "\203A"; }
.wp-sticky-button .scb-plus:before { content: "\FF0B"; }
.wp-sticky-button .scb-check:before { content: "\2713"; }
.wp-sticky-button .scb-star:before { content: "\2605"; }
.wp-sticky-button .scb-heart:before { content: "\2665\FE0E"; }
.wp-sticky-button .scb-play:before { content: "\25B6\FE0E"; }
.wp-sticky-button .scb-refresh:before { content: "\21BB"; }

/* Phone, Email and Download use crisp inline SVG silhouettes (as CSS masks
 * filled with currentColor) — the Unicode glyphs for these render too small
 * and inconsistently across platforms. */
.wp-sticky-button .scb-phone:before,
.wp-sticky-button .scb-envelope:before,
.wp-sticky-button .scb-download:before {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.18em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.wp-sticky-button .scb-phone:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.4 3H4.6C3.7 3 3 3.7 3 4.6 3 13.7 10.3 21 19.4 21c.9 0 1.6-.7 1.6-1.6v-2.8c0-.8-.6-1.5-1.4-1.6l-2.9-.4c-.5-.1-1 .1-1.4.4l-1.6 1.6c-2.5-1.3-4.6-3.4-5.9-5.9l1.6-1.6c.4-.4.5-.9.4-1.4L9 4.4C8.9 3.6 8.2 3 7.4 3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.4 3H4.6C3.7 3 3 3.7 3 4.6 3 13.7 10.3 21 19.4 21c.9 0 1.6-.7 1.6-1.6v-2.8c0-.8-.6-1.5-1.4-1.6l-2.9-.4c-.5-.1-1 .1-1.4.4l-1.6 1.6c-2.5-1.3-4.6-3.4-5.9-5.9l1.6-1.6c.4-.4.5-.9.4-1.4L9 4.4C8.9 3.6 8.2 3 7.4 3z'/%3E%3C/svg%3E");
}

.wp-sticky-button .scb-envelope:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.5 2.7 6.4C3.2 5.6 4 5 5 5h14c1 0 1.8.6 2.3 1.4L12 12.5z'/%3E%3Cpath d='M12 14.9 22 8.3V17c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8.3l10 6.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.5 2.7 6.4C3.2 5.6 4 5 5 5h14c1 0 1.8.6 2.3 1.4L12 12.5z'/%3E%3Cpath d='M12 14.9 22 8.3V17c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8.3l10 6.6z'/%3E%3C/svg%3E");
}

.wp-sticky-button .scb-download:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16 7 10h3V3h4v7h3l-5 6z'/%3E%3Cpath d='M4 18h16v3H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16 7 10h3V3h4v7h3l-5 6z'/%3E%3Cpath d='M4 18h16v3H4z'/%3E%3C/svg%3E");
}

/* Custom uploaded icon (media library image) */
.wp-sticky-cta img.wp-sticky-custom-icon {
    width: 1.4em;
    height: 1.4em;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

/* Back to top icons */
.wp-sticky-button .fa-chevron-up:before { content: "\25B2"; }
.wp-sticky-button .fa-arrow-up:before { content: "\2191"; }
.wp-sticky-button .fa-angle-up:before { content: "\02C4"; }
.wp-sticky-button .fa-caret-up:before { content: "\25B2"; }
.wp-sticky-button .fa-angle-double-up:before { content: "\2303"; }
.wp-sticky-button .fa-long-arrow-alt-up:before { content: "\21E7"; }
.wp-sticky-button .fa-sort-up:before { content: "\25B2"; }
.wp-sticky-button .fa-level-up-alt:before { content: "\2197"; }