/* ==========================================================
   MintPay
   PATCH-MINTPAY-011
   Field-level validation messages
   ========================================================== */


/* ==========================================================
   Error message
   ========================================================== */

.mintpay-field-error {
    display:
        none;

    width:
        100%;

    margin:
        6px 0 0;

    padding:
        7px 10px;

    border-radius:
        10px;

    color:
        #b91c1c;

    background:
        rgba(
            254,
            226,
            226,
            .72
        );

    border:
        1px solid
        rgba(
            239,
            68,
            68,
            .18
        );

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.4;

    text-align:
        left;

    animation:
        mintpay-field-error-in
        180ms
        ease-out;
}


.mintpay-field-error.visible {
    display:
        block;
}


@keyframes mintpay-field-error-in {

    from {
        opacity:
            0;

        transform:
            translateY(-3px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   Invalid control
   ========================================================== */

.mintpay-field-invalid,
.input-wrap.mintpay-field-invalid input,
.input-wrap.mintpay-field-invalid textarea,
.input-wrap.mintpay-field-invalid select {

    border-color:
        #ef4444
        !important;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            239,
            68,
            68,
            .09
        )
        !important;
}


/* ==========================================================
   Remove Aurora valid state while invalid
   ========================================================== */

.input-wrap.mintpay-field-invalid {
    --sp-input-border:
        #ef4444;
}


/* ==========================================================
   Split dynamic fields
   ========================================================== */

.split-field-error {
    grid-column:
        1 / -1;

    margin-top:
        3px;
}


/* ==========================================================
   Dark
   ========================================================== */

html[data-sp-theme="dark"]
.mintpay-field-error {

    color:
        #fecaca;

    background:
        rgba(
            127,
            29,
            29,
            .25
        );

    border-color:
        rgba(
            248,
            113,
            113,
            .25
        );
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 430px) {

    .mintpay-field-error {

        margin-top:
            5px;

        padding:
            6px
            9px;

        font-size:
            10px;
    }

}


/* ==========================================================
   END PATCH-MINTPAY-011
   ========================================================== */