[x-cloak] {
    display: none !important;
}

.footer-links-wrapper .widget.block.block-static-block {
    @apply w-full lg:w-1/4 lg:pr-8;
}

.footer-links-wrapper {
    @apply flex flex-col lg:flex-row flex-wrap bg-[#f5f6f6] p-8 gap-y-10 font-sans text-gray-700;
}

#evk-backToTop.fixed {
    display: flex;
}

/* Plumrocket popup: password strength meter (same look as the Luma popup).
   The fill (::before) is sized/coloured by the .password-* class that password-validation.phtml
   sets on #password-strength-meter-container; the text label is shown after "Password Strength". */
.pr-password-strength-meter {
    position: relative;
    z-index: 1;
    height: 32px;
    margin-top: 4px;
    padding: 0 8px;
    line-height: 32px;
    background-color: #e8e8e8;
    color: #333;
}

.pr-password-strength-meter::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    transition: width .2s ease-in-out, background-color .2s ease-in-out;
}

.password-weak > .pr-password-strength-meter::before {
    width: 25%;
    background-color: #ffafae;
}

.password-medium > .pr-password-strength-meter::before {
    width: 50%;
    background-color: #ffd6b3;
}

.password-strong > .pr-password-strength-meter::before {
    width: 75%;
    background-color: #c5eeac;
}

.password-very-strong > .pr-password-strength-meter::before {
    width: 100%;
    background-color: #81b562;
}

.pr-password-strength-meter > span:first-child::after {
    content: ':';
}