.postcode_modal {
    border-radius: 3px;
    border: none;
    max-width: 65ch;
    padding: 2rem;
    padding-bottom: 1rem;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        display 0.3s allow-discrete;

    &[open] {
        opacity: 1;
        transition-behavior: allow-discrete;
        transition:
            opacity 0.3s ease,
            display 0.3s allow-discrete;
        @starting-style {
            opacity: 0;
        }
    }

    h2 {
        font-size: 1.1rem;
        font-weight: 700;
    }

    p {
        font-size: 1rem;
    }

    &:not([open]) {
        display: none;
    }

    form {
        margin-top: 1rem;
    }

    input[type="text"] {
        padding: 0.3rem;
        font-size: 1.2rem;
        caret-color: var(--wp--preset--color--vivid-red);
        background: hsl(0 1 80);
        border: none;
        text-transform: uppercase;

        &:focus,
        &:valid,
        &:invalid,
        &:autofill,
        &:autofill:focus {
            background: hsl(0 1 80) !important;
        }
    }

    #postcode_modal_submit {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        place-items: center;
        font-size: 1.2rem;
        font-weight: 700;
        color: hsl(233 100 100);
        padding: 0.4rem 1rem;
        background: var(--wp--preset--color--vivid-red);
        border: 1px var(--wp--preset--color--vivid-red) solid;
        transition: 0.2s all linear;
        padding: 0.2em 2.5em;
        &:hover {
            color: var(--wp--preset--color--vivid-red);
            background: hsl(344 98 100);
            cursor: pointer;
        }

        &:hover > .btn_loader > svg > circle {
            fill: var(--wp--preset--color--vivid-red);
        }

        .btn_loader,
        .btn_text {
            transition: 0.2s opacity linear;
            grid-row: 1 / -1;
            grid-column: 1 / -1;
        }
    }
    .form_fields {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    &::backdrop {
        backdrop-filter: blur(2px);
        background: hsl(0 1 65 / 0.6);
    }

    .error_message_modal_postcode {
        min-height: 1lh;
        color: var(--wp--preset--color--vivid-red);
    } /* HTML: <div class="loader"></div> */
}

/* HTML: <div class="loader"></div> */
.btn_loader {
    opacity: 0;
    svg {
        height: 0.4rem;
    }
    circle {
        fill: white;
        transition: 0.2s fill linear;
        animation: loader-pulse 1.5s ease-in-out infinite;
        animation-delay: calc((var(--i, 0)) * 0.2s);
    }
}

@keyframes loader-pulse {
    0%,
    100% {
        opacity: 0.3; /* Dim state */
    }
    50% {
        opacity: 1; /* Bright state */
    }
}