/* ===== 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: 100px !important;
        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;
    }


    .u-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .u-grid-2 textarea {
        min-height: 150px;
    }

    .div-aling-right {
        display: flex;
        justify-content: flex-end;
    }

    /* Botões */
    .btn {
        background-color: #ff5757;
        color: white;
        border: none;
        padding: 15px 20px;
        width: 100%;
        margin: 5px;
        cursor: pointer;
        border-radius: 4px;
        transition: .3s;
        display: block;
        font-size: 16px;
    }

    .btn:hover {
        background-color: #a83232;
    }

    .btn-mini {
        background-color: #d6d6d6;
        color: #696969;
        border: none;
        padding: 5px 10px;
        margin: 5px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 15px;
        transition: .3s;
    }

    .btn-mini:hover {
        background-color: #c0c0c0;
    }

    .btn-submit {
        background-color: #4089ED;
        color: #fff;
        padding: 20px 50px;
        font-size: 17px;
    }

    .btn-submit:hover {
        background-color: #2761b3;
    }


    /* Mensagem */
    #copy-message {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 15px;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

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

    .checkbox-wrapper {
        margin-bottom: 5px;
        max-width: 400px;
    }

    .checkbox-wrapper>span {
        font-size: 15px;
    }

    .checkbox:checked,
    .radio:checked {
        border-color: #c44343;
        background-color: #c44343;
    }

    .checkbox,
    .radio {
        accent-color: #ff5757;
    }

    .grid-textarea {
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .btn-grid-2 {
        width: 100%;
        box-sizing: border-box;
        display: flex;
      
    }

}

/* ===== 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;
    }

    .u-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .u-grid-2 textarea {
        min-height: 150px;
    }

    .div-aling-right {
        display: flex;
        justify-content: flex-end;
    }

    /* Botões */
    .btn {
        background-color: #ff5757;
        color: white;
        border: none;
        padding: 15px 20px;
        width: 200px;
        margin: 5px;
        cursor: pointer;
        border-radius: 4px;
        transition: .3s;
    }

    .btn:hover {
        background-color: #a83232;
    }

    .btn-mini {
        background-color: #d6d6d6;
        color: #696969;
        border: none;
        padding: 5px 10px;
        margin: 5px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 15px;
        transition: .3s;
    }

    .btn-mini:hover {
        background-color: #c0c0c0;
    }

    .btn-submit {
        background-color: #4089ED;
        color: #fff;
        padding: 20px 50px;
        font-size: 17px;
    }

    .btn-submit:hover {
        background-color: #2761b3;
    }


    /* Mensagem */
    #copy-message {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 15px;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

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

    .checkbox-wrapper {
        margin-bottom: 5px;
        max-width: 400px;
    }

    .checkbox-wrapper>span {
        font-size: 15px;
    }

    .checkbox:checked,
    .radio:checked {
        border-color: #c44343;
        background-color: #c44343;
    }

    .checkbox,
    .radio {
        accent-color: #ff5757;
    }

    .grid-textarea {
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .btn-grid-2 {
        display: flex;
        gap: 10px;
    }


}

/* ===== 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: 160px;
        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;
    }





    .u-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .u-grid-2 textarea {
        min-height: 150px;
    }

    .div-aling-right {
        display: flex;
        justify-content: flex-end;
    }

    /* Botões */
    .btn {
        background-color: #ff5757;
        color: white;
        border: none;
        padding: 15px 20px;
        width: 200px;
        margin: 5px;
        cursor: pointer;
        border-radius: 4px;
        transition: .3s;
    }

    .btn:hover {
        background-color: #a83232;
    }

    .btn-mini {
        background-color: #d6d6d6;
        color: #696969;
        border: none;
        padding: 5px 10px;
        margin: 5px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 15px;
        transition: .3s;
    }

    .btn-mini:hover {
        background-color: #c0c0c0;
    }

    .btn-submit {
        background-color: #4089ED;
        color: #fff;
        padding: 20px 50px;
        font-size: 17px;
    }

    .btn-submit:hover {
        background-color: #2761b3;
    }


    /* Mensagem */
    #copy-message {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 15px;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

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

    .checkbox-wrapper {
        margin-bottom: 5px;
        max-width: 400px;
    }

    .checkbox-wrapper>span {
        font-size: 15px;
    }

    .checkbox:checked,
    .radio:checked {
        border-color: #c44343;
        background-color: #c44343;
    }

    .checkbox,
    .radio {
        accent-color: #ff5757;
    }

    .grid-textarea {
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .btn-grid-2 {
        display: flex;
        gap: 10px;
    }

}