/*==========================================================
LicitaAI.club

Arquivo:
modal.css

Versão:
1.0.0

Última atualização:
16/07/2026

Descrição:
Biblioteca oficial de Modais.

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


/*==========================================================
BACKDROP
==========================================================*/

.modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:var(--transition-normal);

    z-index:var(--z-modal);

}


/*==========================================================
OPEN
==========================================================*/

.modal.is-open{

    opacity:1;

    visibility:visible;

}


/*==========================================================
CONTAINER
==========================================================*/

.modal-container{

    width:100%;

    max-width:640px;

    background:var(--color-white);

    border-radius:20px;

    box-shadow:var(--shadow-xl);

    overflow:hidden;

    transform:translateY(20px);

    transition:var(--transition-normal);

}

.modal.is-open .modal-container{

    transform:translateY(0);

}


/*==========================================================
HEADER
==========================================================*/

.modal-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px;

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

}


/*==========================================================
TITLE
==========================================================*/

.modal-title{

    margin:0;

    font-size:1.25rem;

    font-weight:700;

}


/*==========================================================
BODY
==========================================================*/

.modal-body{

    padding:24px;

}


/*==========================================================
FOOTER
==========================================================*/

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:24px;

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

}


/*==========================================================
CLOSE
==========================================================*/

.modal-close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border-radius:50%;

    cursor:pointer;

}

.modal-close:hover{

    background:var(--color-gray-100);

}


/*==========================================================
RESPONSIVO
==========================================================*/

@media(max-width:768px){

.modal{

    padding:16px;

}

.modal-container{

    max-width:100%;

}

.modal-footer{

    flex-direction:column;

}

.modal-footer .btn{

    width:100%;

}

}