/*
 * ENERGY 106 — DO NOT PRESS
 * Isolated from the existing Vibe design.
 */

/* Temporary footer trigger */

.vibe-footer--v2 .vibe-footer-v2__copyright {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.vibe-footer--v2 .energy-dnp__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 6px 11px;
    border: 1px solid rgba(210,156,231,.53);
    border-radius: 7px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .035em;
    cursor: pointer;
}

.vibe-footer--v2 .energy-dnp__trigger:hover {
    border-color: #ff159d;
    background: rgba(255,21,157,.12);
}

/* ENERGY DNP RESTORE BUTTON CLEANUP V1 */

/* No second ring around the pink restore button */
html > dialog.energy-dnp__dialog button.energy-dnp__restore:focus,
html > dialog.energy-dnp__dialog button.energy-dnp__restore:focus-visible,
html > dialog.energy-dnp__dialog button.energy-dnp__restore:active {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Accessible keyboard focus without another border */
html > dialog.energy-dnp__dialog button.energy-dnp__restore:focus-visible {
    text-decoration: none !important;
    
}

/* Lock scrolling during the effect */

html.energy-dnp--active {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Shake existing body, without replacing elements */

body.vibe-site.energy-dnp--shake {
    transform-origin:
        var(--energy-dnp-origin-x)
        var(--energy-dnp-origin-y) !important;

    animation:
        energy-dnp-shake 400ms ease-in-out both !important;
}

@keyframes energy-dnp-shake {
    0%, 100% {
        transform: translateX(0) rotate(0);
    }

    20% {
        transform: translateX(-11px) rotate(-.6deg);
    }

    40% {
        transform: translateX(11px) rotate(.6deg);
    }

    60% {
        transform: translateX(-9px) rotate(-.4deg);
    }

    80% {
        transform: translateX(9px) rotate(.4deg);
    }
}

/* Rotate around the visible viewport's centre */

body.vibe-site.energy-dnp--flip {
    transform-origin:
        var(--energy-dnp-origin-x)
        var(--energy-dnp-origin-y) !important;

    transform: rotate(180deg) !important;

    transition:
        transform 420ms cubic-bezier(.3,.7,.3,1) !important;
}

/* Upright modal outside transformed body */

html > dialog.energy-dnp__dialog {
    position: fixed;
    inset: 0;

    width: min(440px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    max-height: 85dvh;

    margin: auto;
    padding: 32px 25px;
    box-sizing: border-box;
    overflow: auto;

    border: 1px solid #88549d;
    border-radius: 15px;

    background: #260b37;
    color: #fff;

    box-shadow: 0 22px 80px rgba(0,0,0,.5);
    text-align: center;
    font-family: "Inter", sans-serif;
}

html > dialog.energy-dnp__dialog::backdrop {
    background: rgba(12,0,21,.38);
}

.energy-dnp__icon {
    display: block;
    margin-bottom: 12px;
    color: #ff159d;
    font-size: 34px;
}

.energy-dnp__heading {
    margin: 0 0 24px;
    color: #fff;

    font-family: "Rubik", sans-serif;
    font-size: clamp(23px, 4vw, 31px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.energy-dnp__restore {
    min-height: 44px;
    padding: 11px 23px;

    border: 0;
    border-radius: 8px;

    background: #f50792;
    color: #fff;

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.energy-dnp__restore:hover {
    background: #ff32aa;
}

@media (prefers-reduced-motion: reduce) {
    body.vibe-site.energy-dnp--shake,
    body.vibe-site.energy-dnp--flip {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}


/*
 * ENERGY DNP SINGLE BORDER FINAL V3
 * One thin border on desktop and mobile.
 * Restore-button focus styling is untouched.
 */

html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:hover,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:focus,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:focus-visible,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:active {
    -webkit-appearance: none;
    appearance: none;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 1px solid rgba(210,156,231,.55) !important;
    border-radius: 7px !important;
    background-image: none !important;
}

html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:hover,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:focus-visible {
    border-color: #ff159d !important;
    background-color: rgba(255,21,157,.13) !important;
}

html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger::before,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger::after {
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/*
 * ENERGY DNP FOCUS RESET V4
 * No underline. No stuck pink hover after restore.
 */

/* Remove the unwanted text underline */
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:hover,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:focus,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger:focus-visible {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* After restoration, return to the default appearance
   until the pointer leaves or a new interaction occurs. */
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger.energy-dnp__restored,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger.energy-dnp__restored:hover,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger.energy-dnp__restored:focus,
html body.vibe-site .vibe-footer--v2 button.energy-dnp__trigger.energy-dnp__restored:focus-visible {
    border: 1px solid rgba(210,156,231,.55) !important;
    background-color: transparent !important;
    color: #fff !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/*
 * ENERGY DNP RESTORE TITLE CASE V2
 * Solid pink button — no text underline.
 */

html > dialog.energy-dnp__dialog button.energy-dnp__restore,
html > dialog.energy-dnp__dialog button.energy-dnp__restore:hover,
html > dialog.energy-dnp__dialog button.energy-dnp__restore:focus,
html > dialog.energy-dnp__dialog button.energy-dnp__restore:focus-visible,
html > dialog.energy-dnp__dialog button.energy-dnp__restore:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-transform: none !important;
}