/*
 * Notification bars. Loaded from the footer (bars start hidden, so this
 * never blocks the first render). Per-bar values arrive as custom
 * properties on the bar element (BarRenderer::style()). Animations use
 * transform/opacity only.
 */

/* ---- Push-down, stacking ------------------------------------------- */

html.fvemt-sb-push-top {
    /* Beats wp-admin's own `html { margin-top: 32px !important }`. */
    margin-top: calc(var(--fvemt-admin-bar, 0px) + var(--fvemt-sb-top, 0px)) !important;
}

html.fvemt-sb-push-bottom {
    padding-bottom: var(--fvemt-sb-bottom, 0px);
}

.fvemt-sb {
    position: fixed;
    right: 0;
    left: 0;
    z-index: var(--sb-z, 99980);
    box-sizing: border-box;
    min-height: var(--sb-height, 60px);
    display: flex;
    align-items: center;
    color: var(--sb-color);
    background-color: var(--sb-bg);
    background-image: var(--sb-bg-image, none);
    background-position: var(--sb-bg-pos, center);
    background-size: var(--sb-bg-size, cover);
    background-repeat: no-repeat;
    font-family: var(--sb-font, inherit);
    font-size: var(--sb-size, 16px);
    line-height: 1.4;
    opacity: 0;
    transition: transform var(--sb-entry-duration, .5s) cubic-bezier(.16, 1, .3, 1), opacity var(--sb-entry-duration, .5s) ease;
    contain: layout paint;
}

.fvemt-sb[hidden] {
    display: none;
}

.fvemt-sb--auto-height {
    min-height: 0;
}

.fvemt-sb--top {
    top: calc(var(--fvemt-admin-bar, 0px) + var(--sb-offset, 0px));
}

.fvemt-sb--bottom {
    bottom: var(--sb-offset, 0px);
}

/* Entry poses; .is-visible is the resting state. */
.fvemt-sb--enter-slide.fvemt-sb--top {
    transform: translateY(-100%);
    opacity: 1;
}

.fvemt-sb--enter-slide.fvemt-sb--bottom {
    transform: translateY(100%);
    opacity: 1;
}

.fvemt-sb--enter-fade {
    transform: none;
    transition: opacity var(--sb-entry-duration, .5s) ease;
}

.fvemt-sb.is-visible {
    opacity: 1;
    transform: none;
}

.fvemt-sb--enter-none {
    transition: none;
}

/* The wp-admin toolbar stays above the bars. */
.admin-bar #wpadminbar {
    z-index: 999999;
}

@media (prefers-reduced-motion: reduce) {
    .fvemt-sb,
    .fvemt-sb__slide,
    .fvemt-sb__button {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- Layout inside the bar ----------------------------------------- */

.fvemt-sb__inner {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    padding: 10px 50px;
    position: relative;
}

.fvemt-sb--align-left .fvemt-sb__inner {
    justify-content: flex-start;
    text-align: left;
}

.fvemt-sb--align-left .fvemt-sb__content {
    text-align: left;
}

.fvemt-sb--align-right .fvemt-sb__inner {
    justify-content: flex-end;
    text-align: right;
}

.fvemt-sb--align-right .fvemt-sb__content {
    text-align: right;
}

.fvemt-sb--align-center .fvemt-sb__inner {
    justify-content: center;
    text-align: center;
}

.fvemt-sb--align-center .fvemt-sb__content {
    text-align: center;
}

.fvemt-sb--button-below-desktop .fvemt-sb__content {
    flex-basis: 100%;
}

.fvemt-sb__content {
    min-width: 0;
}

.fvemt-sb__content p,
.fvemt-sb__thanks p {
    margin: 0;
}

.fvemt-sb__message a,
.fvemt-sb__thanks a {
    color: inherit;
    text-decoration: underline;
}

.fvemt-sb__thanks {
    font-size: var(--sb-thanks-size, inherit);
    color: var(--sb-thanks-color, inherit);
}

.fvemt-sb__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Close ----------------------------------------------------------- */

.fvemt-sb__close {
    position: absolute;
    top: 50%;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -16px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--sb-close, currentColor);
    background: transparent;
    cursor: pointer;
}

.fvemt-sb__close:hover,
.fvemt-sb__close:focus-visible {
    background: rgba(0, 0, 0, .08);
}

.fvemt-sb__close:focus-visible,
.fvemt-sb__button:focus-visible,
.fvemt-sb__coupon-code:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ---- Button ---------------------------------------------------------- */

.fvemt-sb__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 18px;
    border: 2px solid transparent;
    border-radius: var(--sb-btn-radius, 4px);
    color: var(--sb-btn-color);
    background-color: var(--sb-btn-bg);
    font-family: var(--sb-btn-font, inherit);
    font-size: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

.fvemt-sb__button:hover,
.fvemt-sb__button:focus-visible {
    color: var(--sb-btn-hover-color);
    background-color: var(--sb-btn-hover-bg);
    border-color: var(--sb-btn-hover-border, transparent);
    text-decoration: none;
}

/* display:inline-flex above would otherwise override the [hidden] attribute. */
.fvemt-sb__button[hidden] {
    display: none;
}

.fvemt-sb__button[disabled] {
    opacity: .7;
    cursor: progress;
}

.fvemt-sb__button p {
    margin: 0;
}

.fvemt-sb__button--border {
    border-color: var(--sb-btn-border);
}

.fvemt-sb__button--shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.fvemt-sb__button--3d {
    box-shadow: 0 4px 0 var(--sb-btn-3d);
}

.fvemt-sb__button--3d:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--sb-btn-3d);
}

/* Hover styles */
.fvemt-sb__button--hover-shadow:hover,
.fvemt-sb__button--hover-shadow:focus-visible {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .32);
}

.fvemt-sb__button--hover-3d:hover,
.fvemt-sb__button--hover-3d:focus-visible {
    box-shadow: 0 4px 0 var(--sb-btn-hover-3d, var(--sb-btn-3d));
    transform: translateY(-2px);
}

.fvemt-sb__button--hover-fill {
    background-image: linear-gradient(var(--sb-btn-hover-bg), var(--sb-btn-hover-bg));
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: color .3s ease, background-size .3s ease;
}

.fvemt-sb__button--hover-fill:hover,
.fvemt-sb__button--hover-fill:focus-visible {
    background-color: var(--sb-btn-bg);
    background-size: 100% 100%;
}

.fvemt-sb__button--hover-border:hover,
.fvemt-sb__button--hover-border:focus-visible {
    background-color: transparent;
    border-color: var(--sb-btn-hover-border);
}

/* Attention animations: run a few times a minute, never continuously busy. */
.fvemt-sb.is-visible .fvemt-sb__button--flash { animation: fvemt-sb-flash 4s ease infinite 1s; }
.fvemt-sb.is-visible .fvemt-sb__button--shake { animation: fvemt-sb-shake 4s ease infinite 1s; }
.fvemt-sb.is-visible .fvemt-sb__button--swing { animation: fvemt-sb-swing 4s ease infinite 1s; transform-origin: top center; }
.fvemt-sb.is-visible .fvemt-sb__button--tada { animation: fvemt-sb-tada 4s ease infinite 1s; }
.fvemt-sb.is-visible .fvemt-sb__button--heartbeat { animation: fvemt-sb-heartbeat 4s ease infinite 1s; }
.fvemt-sb.is-visible .fvemt-sb__button--wobble { animation: fvemt-sb-wobble 4s ease infinite 1s; }

@keyframes fvemt-sb-flash {
    0%, 10%, 20%, 100% { opacity: 1; }
    5%, 15% { opacity: .2; }
}

@keyframes fvemt-sb-shake {
    0%, 20%, 100% { transform: none; }
    2%, 6%, 10%, 14%, 18% { transform: translateX(-6px); }
    4%, 8%, 12%, 16% { transform: translateX(6px); }
}

@keyframes fvemt-sb-swing {
    0%, 25%, 100% { transform: none; }
    5% { transform: rotate(12deg); }
    10% { transform: rotate(-8deg); }
    15% { transform: rotate(4deg); }
    20% { transform: rotate(-4deg); }
}

@keyframes fvemt-sb-tada {
    0%, 25%, 100% { transform: none; }
    3%, 6% { transform: scale(.92) rotate(-3deg); }
    9%, 15%, 21% { transform: scale(1.08) rotate(3deg); }
    12%, 18% { transform: scale(1.08) rotate(-3deg); }
}

@keyframes fvemt-sb-heartbeat {
    0%, 30%, 100% { transform: none; }
    7%, 21% { transform: scale(1.12); }
    14% { transform: scale(1); }
}

@keyframes fvemt-sb-wobble {
    0%, 25%, 100% { transform: none; }
    4% { transform: translateX(-12%) rotate(-5deg); }
    8% { transform: translateX(10%) rotate(3deg); }
    12% { transform: translateX(-8%) rotate(-3deg); }
    16% { transform: translateX(5%) rotate(2deg); }
    20% { transform: translateX(-3%) rotate(-1deg); }
}

/* ---- Sliding text ---------------------------------------------------- */

.fvemt-sb__slides {
    display: grid;
    overflow: hidden;
}

/* All phrases share one grid cell, so the box keeps the longest one's size (no jumps). */
.fvemt-sb__slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: transform .5s ease, opacity .5s ease;
}

.fvemt-sb__slide.is-active {
    opacity: 1;
    transform: none;
}

.fvemt-sb__slides--slide-right .fvemt-sb__slide:not(.is-active) { transform: translateX(-40px); }
.fvemt-sb__slides--slide-left .fvemt-sb__slide:not(.is-active) { transform: translateX(40px); }
.fvemt-sb__slides--slide-up .fvemt-sb__slide:not(.is-active) { transform: translateY(100%); }
.fvemt-sb__slides--slide-down .fvemt-sb__slide:not(.is-active) { transform: translateY(-100%); }

.fvemt-sb--align-center .fvemt-sb__slides { justify-items: center; text-align: center; }
.fvemt-sb--align-right .fvemt-sb__slides { justify-items: end; text-align: right; }

/* ---- Countdown ------------------------------------------------------- */

.fvemt-sb__timer[hidden] {
    display: none;
}

.fvemt-sb__timer-group {
    display: inline-flex;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.fvemt-sb__timer-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.4em;
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--sb-timer-color);
    background: var(--sb-timer-bg);
    font-size: var(--sb-timer-size, 14px);
    line-height: 1.1;
}

.fvemt-sb__timer-value {
    font-weight: 700;
    font-size: 1.25em;
}

.fvemt-sb__timer-label {
    font-size: .7em;
    opacity: .85;
}

/* ---- Coupon ---------------------------------------------------------- */

.fvemt-sb__coupon {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fvemt-sb__coupon[hidden],
.fvemt-sb__message[hidden],
.fvemt-sb__thanks[hidden] {
    display: none;
}

.fvemt-sb__coupon-code {
    padding: 6px 14px;
    border: 2px dashed var(--sb-coupon-border);
    border-radius: 4px;
    color: var(--sb-coupon-color);
    background: var(--sb-coupon-bg);
    font: inherit;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: copy;
}

.fvemt-sb__coupon-code.is-copied {
    border-style: solid;
}

/* ---- Lead form ------------------------------------------------------- */

.fvemt-sb__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fvemt-sb__form[hidden] {
    display: none;
}

.fvemt-sb__input {
    box-sizing: border-box;
    width: 180px;
    max-width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 4px;
    color: #1d2327;
    background: #fff;
    font: inherit;
    font-size: 15px;
}

/* Honeypot: invisible to people, tempting to bots. */
.fvemt-sb__trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.fvemt-sb__error {
    flex-basis: 100%;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.fvemt-sb__error[hidden] {
    display: none;
}

/* ---- Devices --------------------------------------------------------- */

@media (min-width: 1025px) {
    .fvemt-sb--no-close-desktop .fvemt-sb__close,
    .fvemt-sb--no-button-desktop .fvemt-sb__button:not([type="submit"]) {
        display: none;
    }
}

@media (max-width: 1024px) {
    .fvemt-sb--no-close-mobile .fvemt-sb__close,
    .fvemt-sb--no-button-mobile .fvemt-sb__button:not([type="submit"]) {
        display: none;
    }
}

@media (max-width: 600px) {
    .fvemt-sb__inner {
        flex-direction: column;
        padding: 10px 40px;
        text-align: center;
    }

    .fvemt-sb--no-close-mobile .fvemt-sb__inner {
        padding: 10px 16px;
    }

    .fvemt-sb--align-left .fvemt-sb__inner {
        align-items: flex-start;
        text-align: left;
    }

    .fvemt-sb--align-left .fvemt-sb__content,
    .fvemt-sb--align-left .fvemt-sb__slides {
        text-align: left;
        justify-items: start;
    }

    .fvemt-sb--align-right .fvemt-sb__inner {
        align-items: flex-end;
        text-align: right;
    }

    .fvemt-sb--align-right .fvemt-sb__content,
    .fvemt-sb--align-right .fvemt-sb__slides {
        text-align: right;
        justify-items: end;
    }

    .fvemt-sb--align-center .fvemt-sb__inner {
        align-items: center;
        text-align: center;
    }

    .fvemt-sb--align-center .fvemt-sb__content,
    .fvemt-sb--align-center .fvemt-sb__slides {
        text-align: center;
        justify-items: center;
    }

    .fvemt-sb__input {
        width: 100%;
    }

    .fvemt-sb__form {
        width: 100%;
    }
}

/* ---- Modal ----------------------------------------------------------- */

.fvemt-sb-modal {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 32px 24px 24px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .35);
}

.fvemt-sb-modal::backdrop {
    background: rgba(15, 23, 42, .6);
}

.fvemt-sb-modal__close {
    position: absolute;
    top: 6px;
    right: 10px;
    padding: 4px 8px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* ---- Admin preview (inside an iframe) -------------------------------- */

.fvemt-sb--preview.fvemt-sb--top {
    top: 0;
}