.host-modal {
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.4s ease;
    z-index:9999;
}


.host-modal.active {
    opacity:1;
    visibility:visible;
}


.host-modal-overlay {
    position:absolute;
    inset:0;
    background:rgba(6,20,35,.45);
    backdrop-filter:blur(8px);
}


.host-modal-content {

    position:relative;
    width:min(680px,90vw);

    padding:40px;

    border-radius:20px;

    background:
        linear-gradient( 135deg, rgba(0,0,0,.5), rgba(0,0,0,.5) );

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);

    transform:
        translateY(40px)
        scale(.95);

    transition:.5s cubic-bezier(.22,1,.36,1);
}


.host-modal.active .host-modal-content {

    transform:
        translateY(0)
        scale(1);

}

.host-modal label {
    color:white;
}
.host-modal input ,.host-modal textarea{
    background:white;
}
.host-modal h3 {
    color:white;
    text-align: center;
}
.host-modal .nav-logo{
    text-align: center;
    margin:0px auto;
    margin-bottom:10px;
}
.modal-close {

    position:absolute;
    top:20px;
    right:25px;

    border:0;
    background:none;
    color:white;

    font-size:30px;
    cursor:pointer;
}

.auth-tabs {
    display:flex;
    gap:10px;
    margin-bottom:5px;
    background:#eef6fb;
    padding:6px;
    border-radius:40px;
}

.auth-tab {
    flex:1;
    padding:.5rem .5rem;
    border:0;
    border-radius:30px;
    background:transparent;
    cursor:pointer;
    font-size:15px;
    transition:.3s ease;
}

.auth-tab.active {
    background:#8dc741;
    color:white;
    box-shadow:0 8px 20px rgba(20,125,193,.25);
}


.auth-panel {
    display:none;
}

.auth-panel.active {
    display:block;
}

.auth-flip-wrapper {
    perspective: 1800px;
    width:100%;
    min-height:300px;
     transition:min-height .8s ease;
}


.auth-flipper {

    position:relative;

    width:100%;
  

    transform-style:preserve-3d;

}


.auth-face {

    position:absolute;

    inset:0;

    width:100%;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    transform-style:preserve-3d;

}


/* Front */
.auth-front {
    transform:rotateY(0deg);
}


/* Back */
.auth-back {
    transform:rotateY(180deg);
}


@media(max-width:600px){

    .host-modal-content{
        padding:25px;
    }

}
.response
{
    padding:3px;
    margin-bottom: 5px;  
    color: white;
    text-align: center;
    display: none;
    border-radius:40px;
}
.response.error
{
    display: block;
  
    border: 1px solid var(--danger);
}
.response.success
{
     display: block;
   
    border: 1px solid var(--success);
}