/*
 * Every element is a span, so the button stays valid when Divi or wpautop wraps
 * the shortcode in a paragraph. The double-class selectors outrank Divi's
 * module-level link rules.
 */
.bv-metallic {
    display: inline-flex;
    max-width: 100%;
    vertical-align: middle;
}

.bv-metallic .bv-metallic__control {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 999px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    isolation: isolate;
    justify-content: center;
    margin: 0;
    max-width: 100%;
    min-height: 46px;
    min-width: 142px;
    padding: 10px 28px;
    position: relative;
    text-decoration: none !important;
}

.bv-metallic--icon .bv-metallic__control {
    height: 46px;
    min-width: 46px;
    padding: 0;
    width: 46px;
}

.bv-metallic__rim,
.bv-metallic__surface,
.bv-metallic__face,
.bv-metallic__ripples {
    border-radius: inherit;
    display: block;
    pointer-events: none;
    position: absolute;
}

.bv-metallic__rim {
    border-radius: 999px;
    box-shadow:
        0 0 0 1px rgb(0 0 0 / 30%),
        0 36px 14px 0 rgb(0 0 0 / 2%),
        0 20px 12px 0 rgb(0 0 0 / 8%),
        0 9px 9px 0 rgb(0 0 0 / 12%),
        0 2px 5px 0 rgb(0 0 0 / 15%);
    inset: 0;
    transition:
        transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Clip the composited canvas and tint to the pill in Safari. */
.bv-metallic__surface {
    /* Fallback until the shader takes over, or when WebGL2 is unavailable. */
    background: linear-gradient(115deg, #f4f4f7 0%, #8d9096 22%, #fbfbfd 46%, #55585d 68%, #e3e4e8 88%, #9a9da3 100%);
    border-radius: 999px;
    clip-path: inset(0 round 999px);
    inset: 0;
    isolation: isolate;
    overflow: hidden;
}

/* Multiplying keeps the darks and turns the white highlights into the tint. */
.bv-metallic__surface::after {
    background: var(--bv-metallic-tint, #fff);
    content: "";
    inset: 0;
    mix-blend-mode: multiply;
    position: absolute;
}

.bv-metallic.is-live .bv-metallic__surface {
    background: none;
}

.bv-metallic__surface canvas {
    display: block;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.bv-metallic__face {
    background: linear-gradient(180deg, #202020 0%, #000 100%);
    border-radius: 999px;
    inset: 2px;
    transition:
        transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bv-metallic .bv-metallic__label,
.bv-metallic .bv-metallic__icon {
    color: #fff;
    position: relative;
}

.bv-metallic .bv-metallic__label {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

.bv-metallic--spalla .bv-metallic__label.bv-metallic__label {
    font-family: "spalla", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bv-metallic .bv-metallic__icon {
    display: block;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 50%));
    height: 16px;
    width: 16px;
}

.bv-metallic__ripples {
    border-radius: 999px;
    inset: 0;
    overflow: hidden;
}

.bv-metallic__ripple {
    animation: bv-metallic-ripple 0.6s ease-out;
    background: radial-gradient(circle, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 0%) 70%);
    border-radius: 50%;
    height: 20px;
    pointer-events: none;
    position: absolute;
    width: 20px;
}

@keyframes bv-metallic-ripple {
    0% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4);
    }
}

@media (hover: hover) {
    .bv-metallic .bv-metallic__control:hover .bv-metallic__rim {
        box-shadow:
            0 0 0 1px rgb(0 0 0 / 40%),
            0 12px 6px 0 rgb(0 0 0 / 5%),
            0 8px 5px 0 rgb(0 0 0 / 10%),
            0 4px 4px 0 rgb(0 0 0 / 15%),
            0 1px 2px 0 rgb(0 0 0 / 20%);
    }
}

.bv-metallic .bv-metallic__control:active .bv-metallic__rim {
    box-shadow:
        0 0 0 1px rgb(0 0 0 / 50%),
        0 1px 2px 0 rgb(0 0 0 / 30%);
    transform: translateY(1px) scale(0.98);
}

.bv-metallic .bv-metallic__control:active .bv-metallic__face {
    box-shadow:
        inset 0 2px 4px rgb(0 0 0 / 40%),
        inset 0 1px 2px rgb(0 0 0 / 30%);
    transform: translateY(1px) scale(0.98);
}

.bv-metallic .bv-metallic__control:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

/* White inner ring and Deep Soul outer ring read on light and dark grounds. */
.bv-metallic .bv-metallic__control:focus-visible {
    box-shadow: 0 0 0 2px #fff;
    outline: 3px solid #263e50;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bv-metallic__rim,
    .bv-metallic__face {
        transition: none;
    }
}

@media (forced-colors: active) {
    .bv-metallic .bv-metallic__control {
        border: 1px solid LinkText;
    }

    .bv-metallic__rim,
    .bv-metallic__face {
        display: none;
    }

    .bv-metallic .bv-metallic__label,
    .bv-metallic .bv-metallic__icon {
        color: LinkText;
        filter: none;
        text-shadow: none;
    }
}