/* ===== MOBILE (menores que 768px) ===== */
@media (max-width: 767px) {

    #u-result {
        font-size: 18;
        background-color: #e1e1e1;
        padding: 20px;
        text-align: center;
        color: #555;
        font-weight: bold;
        border-radius: 5px;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }

    #u-result-text {
        margin-top: 40px;
        color: #444;
        background-color: #e1e1e1;
        width: 200px;
        text-align: center;
        padding: 8px 30px;
        font-size: 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    /* Efeito de piscar (verde temporário) */
    .flash-success {
        color: #a2a2a2 !important;
        background-color: #e1e1e1 !important;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    /* Textarea estilizada */
    .u-textarea {
        font-family: "Open Sans", sans-serif;
        width: 100%;
        min-height: 260px;
        padding: 15px;
        border: 1px solid #c6c6c6;
        border-radius: 6px;
        font-size: 16px;
        color: #333;
        transition: all .3s ease;
        resize: none;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        background-color: #f4f4f4;
    }

    .u-textarea:focus {
        border-color: #c44343;
        outline: none;
    }


    /* ===== Mensagem de erro fixa ===== */
    #error-message {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 20px;
        font-size: 18px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
        z-index: 9999;
    }

    #error-message.show {
        opacity: 1;
    }


    .text-label {
        color: #e26161;
        margin-bottom: 10px;
        margin-left: 15px;
        text-transform: uppercase;
        font-weight: 700;
    }

}

/* ===== TABLET (768px até 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {

    #u-result {
        font-size: 30px;
        background-color: #e1e1e1;
        padding: 20px;
        text-align: center;
        color: #555;
        border-radius: 5px;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }

    #u-result-text {
        margin-top: 40px;
        color: #444;
        background-color: #e1e1e1;
        width: 200px;
        text-align: center;
        padding: 8px 30px;
        font-size: 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    /* Efeito de piscar (verde temporário) */
    .flash-success {
        color: #a2a2a2 !important;
        background-color: #e1e1e1 !important;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    /* Textarea estilizada */
    .u-textarea {
        font-family: "Open Sans", sans-serif;
        width: 100%;
        min-height: 260px;
        padding: 15px;
        border: 1px solid #c6c6c6;
        border-radius: 6px;
        font-size: 16px;
        color: #333;
        transition: all .3s ease;
        resize: none;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        background-color: #f4f4f4;
    }

    .u-textarea:focus {
        border-color: #c44343;
        outline: none;
    }


    /* ===== Mensagem de erro fixa ===== */
    #error-message {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 20px;
        font-size: 18px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
        z-index: 9999;
    }

    #error-message.show {
        opacity: 1;
    }


    .text-label {
        color: #e26161;
        margin-bottom: 10px;
        margin-left: 15px;
        text-transform: uppercase;
        font-weight: 700;
    }

}

/* ===== DESKTOP (1024px ou mais) ===== */
@media (min-width: 1024px) {

    #u-result {
        font-size: 30px;
        background-color: #e1e1e1;
        padding: 20px;
        text-align: center;
        color: #555;
        border-radius: 5px;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }

    #u-result-text {
        margin-top: 40px;
        color: #444;
        background-color: #e1e1e1;
        width: 200px;
        text-align: center;
        padding: 8px 30px;
        font-size: 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    /* Efeito de piscar (verde temporário) */
    .flash-success {
        color: #a2a2a2 !important;
        background-color: #e1e1e1 !important;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    /* Textarea estilizada */
    .u-textarea {
        font-family: "Open Sans", sans-serif;
        width: 100%;
        min-height: 260px;
        padding: 15px;
        border: 1px solid #c6c6c6;
        border-radius: 6px;
        font-size: 16px;
        color: #333;
        transition: all .3s ease;
        resize: none;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        background-color: #f4f4f4;
    }

    .u-textarea:focus {
        border-color: #c44343;
        outline: none;
    }


    /* ===== Mensagem de erro fixa ===== */
    #error-message {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 20px;
        font-size: 18px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
        z-index: 9999;
    }

    #error-message.show {
        opacity: 1;
    }


    .text-label {
        color: #e26161;
        margin-bottom: 10px;
        margin-left: 15px;
        text-transform: uppercase;
        font-weight: 700;
    }

}