/* ==========================================
   MODAL DE ORÇAMENTO - ZELOBYTE
========================================== */

.modal-overlay{

    position:fixed;
    inset:0;

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

    padding:20px;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.modal-overlay.active{

    opacity:1;
    visibility:visible;

}

/* ===================================== */

.modal-box{

    width:100%;
    max-width:700px;

    max-height:90vh;

    overflow-y:auto;

    background:var(--card);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:24px;

    padding:35px;

    position:relative;

    box-shadow:
    0 25px 70px rgba(0,0,0,.45);

    transform:translateY(35px);

    transition:.35s ease;

}

.modal-overlay.active .modal-box{

    transform:translateY(0);

}

/* ===================================== */

.modal-box::-webkit-scrollbar{

    width:8px;

}

.modal-box::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/* ===================================== */

.modal-close{

    position:absolute;

    top:18px;
    right:20px;

    border:none;

    background:none;

    color:var(--text-secondary);

    font-size:34px;

    cursor:pointer;

    transition:.3s;

}

.modal-close:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

/* ===================================== */

.modal-box h2{

    font-size:34px;

    margin-bottom:10px;

    color:var(--text);

}

.modal-box p{

    color:var(--text-secondary);

    line-height:1.7;

    margin-bottom:30px;

}

/* ===================================== */

.campo{

    margin-bottom:18px;

}

/* ===================================== */

.campo input,
.campo textarea,
.campo select{

    width:100%;

    background:rgba(255,255,255,.03);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:16px;

    padding:16px;

    font-size:15px;

    outline:none;

    transition:.3s;

    font-family:inherit;

}

/* ===================================== */

.campo input:focus,
.campo textarea:focus,
.campo select:focus{

    border-color:var(--primary);

    box-shadow:
    0 0 0 4px rgba(34,211,238,.15);

}

/* ===================================== */

.campo textarea{

    min-height:140px;

    resize:vertical;

}

/* ===================================== */

.campo input::placeholder,
.campo textarea::placeholder{

    color:var(--text-secondary);

}

/* ===================================== */

.campo select{

    cursor:pointer;

}

/* ===================================== */

.check{

    display:flex;

    align-items:center;

    gap:12px;

    margin:20px 0 25px;

    color:var(--text-secondary);

    font-size:15px;

}

.check input{

    width:18px;
    height:18px;

    cursor:pointer;

}

/* ===================================== */

.btn-enviar{

    width:100%;

    padding:18px;

    border:none;

    border-radius:18px;

    background:var(--primary);

    color:#000;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 10px 30px rgba(34,211,238,.25);

}

.btn-enviar:hover{

    transform:translateY(-2px);

    box-shadow:
    0 15px 35px rgba(34,211,238,.35);

}

/* ===================================== */

@media (max-width:768px){

    .modal-overlay{

        padding:15px;

        align-items:flex-start;

    }

    .modal-box{

        margin-top:20px;

        width:100%;

        max-width:100%;

        max-height:calc(100vh - 40px);

        padding:25px;

        border-radius:18px;

    }

    .modal-box h2{

        font-size:28px;

    }

}

/* ===================================== */

@media (max-width:480px){

    .modal-overlay{

        padding:10px;

    }

    .modal-box{

        padding:20px;

        border-radius:16px;

    }

    .modal-box h2{

        font-size:24px;

    }

    .modal-box p{

        font-size:14px;

    }

    .campo input,
    .campo textarea,
    .campo select{

        padding:14px;

        font-size:15px;

    }

    .btn-enviar{

        padding:16px;

        font-size:16px;

    }

}