/* =========================================================
   SCHEMES SECTION
========================================================= */

.scheme-card{
    position:relative;
    min-height:240px;
    padding:1.4rem;
    border:1px solid #e2e8f0;
    border-radius:1.25rem;
    background:#ffffff;
    box-shadow:0 4px 18px rgba(15,23,42,.045);
    transition:all .3s ease;
    cursor:pointer;
}

.scheme-card:hover{
    transform:translateY(-7px);
    border-color:#a7f3d0;
    box-shadow:0 20px 45px rgba(15,23,42,.11);
}

.scheme-card:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(16,185,129,.18);
}

.scheme-icon{
    display:flex;
    width:3rem;
    height:3rem;
    align-items:center;
    justify-content:center;
    border-radius:.85rem;
    font-size:1.15rem;
    transition:all .3s ease;
}

.scheme-card:hover .scheme-icon{
    transform:scale(1.08);
}

.scheme-arrow{
    display:flex;
    width:2rem;
    height:2rem;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f8fafc;
    color:#94a3b8;
    font-size:.7rem;
    transition:all .3s ease;
}

.scheme-card:hover .scheme-arrow{
    background:#ecfdf5;
    color:#059669;
    transform:translate(2px,-2px);
}


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

.modal-box{
    animation:schemeModalIn .28s cubic-bezier(.16,1,.3,1);
}

@keyframes schemeModalIn{
    0%{
        opacity:0;
        transform:translateY(25px) scale(.96);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

body.modal-open{
    overflow:hidden;
}


/* =========================================================
   FORM
========================================================= */

.form-label{
    display:block;
    margin-bottom:.5rem;
    color:#334155;
    font-size:.8rem;
    font-weight:700;
}

.form-input{
    width:100%;
    border:1px solid #e2e8f0;
    border-radius:.8rem;
    background:#f8fafc;
    padding:.78rem .9rem;
    color:#334155;
    font-size:.875rem;
    outline:none;
    transition:all .2s ease;
}

.form-input::placeholder{
    color:#94a3b8;
}

.form-input:hover{
    border-color:#cbd5e1;
}

.form-input:focus{
    border-color:#10b981;
    background:#ffffff;
    box-shadow:0 0 0 3px rgba(16,185,129,.1);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:640px){

    .scheme-card{
        min-height:auto;
        padding:1.2rem;
    }

    .modal-box{
        max-height:94vh;
        border-radius:1.5rem;
    }

}

@media(max-width:380px){

    .scheme-card{
        padding:1rem;
    }

}