@import url('https://fonts.googleapis.com/css2?family=Anek+Malayalam:wght@300;400;500&display=swap');

*{
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Anek Malayalam',
    sans-serif;
}

body{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    background: linear-gradient(0deg, rgba(79, 168, 231, 1) 0%, rgba(25, 119, 212, 1) 31%, rgba(19, 41, 186, 1) 100%);
}

.wrapper{ 
    height: 260px;
    background: #fff;
    max-width: 410px ; 
    border-radius: 7px;
    padding: 16px 25px; 
    transition: height 0.2s ease;
}

.wrapper.active{
    height: 520px;
}

header h1{ 
    font-size: 21px; 
    font-weight:500;
}
header p{ 
    margin-top:  5px; 
    color: #474747;
    font-size: 16px; 
}

.wrapper .form{ 
    margin: 20px 0 25px; 
}

.form :where(input,button){  
    width: 100%; 
    height: 55px; 
    border:none; 
    outline: none; 
    border-radius: 7px; 
}

.form input{ 
    font-size: 16px; 
    padding: 0 17px;
    border: 1px solid #ccc; 
}

.form button{ 
    margin-top: 20px; 
    background: #100E09;
    color: #fff; 
    font-size: 16px; 
    font-weight: 500; 
    padding: 0 17px; 
    border: none; 
    cursor: pointer; 
    border-radius: 7px; 
}

.wrapper .qr-code{ 
    display: flex;
    opacity: 0;
    pointer-events: none; 
    padding: 20px 0; 
    align-items: center; 
    justify-content: center; 
    border: 1px solid #ccc; 
    border-radius: 7px; 
}

.wrapper.active .qr-code{
    opacity: 1; 
    pointer-events: auto; 
    transition: opacity 0.5s 0.05s ease;
}