.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;
    }

    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;

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

    button {
        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;
        margin: 0 0 0 0.3rem;
        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;
        }
    }

    .form_fields {
        display: flex;
        justify-content: space-between;
        align-items: center;
        div {
            display: flex;
            gap: 1.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> */
}