/* ==========================================================
   LOGIN MODAL
========================================================== */

.modal-overlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(3px);

    z-index:9999;

    animation:fadeModal .2s ease;

}

.modal-overlay.show{

    display:flex;

}

.modal-card{

    width:min(92%,500px);

    background:#fff;

    border-radius:var(--radius-xl);

    padding:2rem;

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

    animation:pop .25s ease;

}

.modal-large{

    width:min(96%,900px);

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1rem;

}

.modal-close{

    border:none;

    background:none;

    cursor:pointer;

    color:var(--muted);

    font-size:1.4rem;

    transition:.2s;

}

.modal-close:hover{

    color:var(--text);

    transform:rotate(90deg);

}

/* ==========================================================
   IMAGE ZOOM
========================================================== */

.zoom-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    z-index:99999;

    cursor:zoom-out;

}

.zoom-modal.show{

    display:flex;

}

.zoom-modal img{

    max-width:95vw;

    max-height:90vh;

    border-radius:16px;

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

}

/* ==========================================================
   CHART
========================================================== */

#priceChart{

    width:100%;

    min-height:350px;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes pop{

    from{

        opacity:0;

        transform:scale(.94);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes fadeModal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}