/*
 * KARLEEN Footer Subscribe R1
 */

.footer-subscribe {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        168px;

    align-items: stretch;

    width: 100%;
}


.footer-subscribe input[type="email"] {
    width: 100%;
    min-width: 0;
    height: 54px;

    margin: 0;

    padding:
        0 16px;

    border:
        1px solid
        rgba(255, 255, 255, .20);

    border-radius: 0;

    background:
        #ffffff;

    color:
        #111111;

    font: inherit;
    font-size: 13px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.footer-subscribe input[type="email"]::placeholder {
    color:
        rgba(17, 17, 17, .48);
}


.footer-subscribe input[type="email"]:focus {
    border-color:
        rgba(255, 255, 255, .75);

    box-shadow:
        inset 0 0 0 1px
        rgba(17, 17, 17, .16);
}


.footer-subscribe button[type="submit"] {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 168px;
    height: 54px;

    margin: 0;
    padding: 0 18px;

    border:
        1px solid #ffffff;

    border-radius: 0;

    background:
        #ffffff;

    color:
        #111111;

    cursor: pointer;

    font: inherit;
    font-size: 10px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: .08em;
    text-transform: uppercase;

    white-space: nowrap;

    transition:
        background-color .2s ease,
        color .2s ease,
        opacity .2s ease;
}


.footer-subscribe button[type="submit"]:hover {
    background:
        #111111;

    color:
        #ffffff;
}


.footer-subscribe button[type="submit"]:focus-visible {
    outline:
        1px solid
        #ffffff;

    outline-offset: 3px;
}


.footer-subscribe button[type="submit"]:disabled {
    cursor: wait;

    opacity: .62;
}


.footer-subscribe[data-state="success"]
button[type="submit"] {
    background:
        #f1efe9;

    color:
        #111111;
}


.footer-subscribe[data-state="error"]
input[type="email"] {
    border-color:
        rgba(196, 73, 73, .8);
}


/*
 * Все пояснения и сообщения
 * формы уходят на следующую строку.
 */
.footer-subscribe > p,
.footer-subscribe > small,
.footer-subscribe > label,
.footer-subscribe__message,
.footer-subscribe [data-subscribe-message] {
    grid-column:
        1 / -1;
}


.footer-subscribe__message,
.footer-subscribe [data-subscribe-message] {
    min-height: 18px;

    margin-top: 8px;

    font-size: 10px;
    line-height: 1.45;
}


.footer-subscribe__message[hidden],
.footer-subscribe [data-subscribe-message][hidden] {
    display: none !important;
}


.footer-subscribe__message[data-state="success"],
.footer-subscribe [data-subscribe-message][data-state="success"] {
    color:
        rgba(255, 255, 255, .86);
}


.footer-subscribe__message[data-state="error"],
.footer-subscribe [data-subscribe-message][data-state="error"] {
    color:
        #ffaaaa;
}


@media (max-width: 720px) {

    .footer-subscribe {
        grid-template-columns:
            1fr;
    }


    .footer-subscribe button[type="submit"] {
        width: 100%;

        grid-column:
            1;
    }


    .footer-subscribe input[type="email"],
    .footer-subscribe button[type="submit"] {
        height: 52px;
    }


    .footer-subscribe > p,
    .footer-subscribe > small,
    .footer-subscribe > label,
    .footer-subscribe__message,
    .footer-subscribe [data-subscribe-message] {
        grid-column:
            1;
    }

}