/* ===========================
   POPUP BACKGROUND
=========================== */

.popup-form{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

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

    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;

    padding:12px;

    box-sizing:border-box;

}


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

.form-box{

    width:min(430px, 100%);

    max-width:100%;

    background:#fff;

    border-radius:16px;

    padding:16px 16px 14px;

    position:relative;

    box-shadow:0 12px 35px rgba(0,0,0,.28);

    animation:popup .35s ease;

    max-height:calc(100vh - 16px);

    overflow-y:auto;

    box-sizing:border-box;

}


/* ===========================
   ANIMATION
=========================== */

@keyframes popup{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}


/* ===========================
   TITLE
=========================== */

.form-box h2{

    text-align:center;

    color:#0047AB;

    font-size:clamp(20px, 2.6vw, 24px);

    margin:4px 0 10px;

    font-weight:700;

}


/* ===========================
   CLOSE BUTTON
=========================== */

.close-btn{

    position:absolute;

    top:10px;

    right:10px;

    width:34px;

    height:34px;

    background:red;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    cursor:pointer;

}


/* ===========================
   INPUT
=========================== */

.form-box input,
.form-box select,
.form-box textarea{

    width:100%;

    padding:9px 11px;

    margin-top:8px;

    border:1px solid #d7d7d7;

    border-radius:10px;

    font-size:16px;

    outline:none;

    box-sizing:border-box;

    transition:.3s;

    font-family:Poppins,sans-serif;

}


/* ===========================
   FOCUS
=========================== */

.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus{

    border-color:#00a651;

    box-shadow:0 0 8px rgba(0,166,81,.20);

}

.form-box input[type="date"]{

    color:#333;

    min-height:38px;

}

.form-box input[type="date"]::-webkit-date-and-time-value{

    text-align:left;

    min-height:1.4em;

}


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

.form-box textarea{

    height:48px;

    min-height:48px;

    resize:none;

}


/* ===========================
   BUTTON
=========================== */

.form-box button{

    width:100%;

    margin-top:10px;

    padding:10px;

    background:#00a651;

    color:#fff;

    border:none;

    border-radius:10px;

    font-size:22px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.form-box button:hover,
.form-box button:focus,
.form-box button:active{

    background:#008d46;
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0, 166, 81, 0.22);

}


/* ===========================
   ERROR
=========================== */

.error{

    display:block;

    color:red;

    font-size:12px;

    margin-top:2px;

    margin-bottom:2px;

}


/* ===========================
   SUCCESS MESSAGE
=========================== */

.popup-success{

    display:none;

    background:#d4edda;

    color:#155724;

    border:1px solid #28a745;

    padding:12px;

    border-radius:8px;

    margin-bottom:15px;

    text-align:center;

    font-weight:600;

}

.popup-success i{

    margin-right:8px;

}


/* ===========================
   SCROLLBAR
=========================== */

.form-box::-webkit-scrollbar{

    width:8px;

}

.form-box::-webkit-scrollbar-thumb{

    background:#00a651;

    border-radius:20px;

}


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

@media(max-width:768px){

.popup-form{

padding:6px;

}

.form-box{

width:100%;

padding:14px 12px;

max-height:calc(100vh - 12px);

}

.form-box h2{

font-size:20px;

margin-bottom:8px;

}

.form-box input,
.form-box select,
.form-box textarea{

padding:8px 10px;

font-size:13px;

}

.form-box button{

font-size:15px;

padding:9px;

}

}