/* ==========================
   INPUT TEXT / PASSWORD
========================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"]{

    width:100%;
    height:32px;

    padding:0 14px;

    background:#ffffff;

    border:1px solid #e7ebf2;
    border-radius:8px;

    color:#1f2937;

    font-family:'Inter',sans-serif;
    font-size:13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover{

    border-color:#d5deea;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder{

    color:#9aa4b2;
}

/* ==========================
   TEXTAREA
========================== */

textarea{

    width:100%;
    min-height:120px;

    padding:12px 14px;

    background:#ffffff;

    border:1px solid #e7ebf2;
    border-radius:12px;

    color:#1f2937;

    font-family:'Inter',sans-serif;
    font-size:13px;
    line-height:1.5;

    resize:vertical;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

textarea:hover{

    border-color:#d5deea;
}

textarea:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

textarea::placeholder{

    color:#9aa4b2;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus{

    background:#ffffff;
}