/* ==========================================================
   BODY
========================================================== */

body{
    background:#f5f5f5;
    color:#333;
}


/* ==========================================================
   LAYOUT
========================================================== */

#container{

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

    min-height:100dvh;

    padding:12px;

}


/* ==========================================================
   CARD
========================================================== */

.card{

    width:100%;
    max-width:520px;

    padding:18px;

    background:rgb(240,240,240);
    background-image:url("../assets/bg1.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;

    border-radius:12px;

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

}


/* ==========================================================
   HEADER
========================================================== */

.card-header{

    display:flex;
    flex-direction:column;
    align-items:center;

    margin-bottom:22px;

}


.card-logo{

    width:80px;
    height:80px;

    margin-bottom:14px;

    overflow:hidden;

    border-radius:30%;

}


.card-logo img{

    width:100%;
    height:auto;

}


.card-title{

    color:#fc7b02;

    font-size:22px;
    font-weight:700;

    line-height:1.2;

    text-align:center;

    letter-spacing:.3px;

}


.card-subtitle{

    margin-top:4px;

    font-size:15px;

    color:#666;

    text-align:center;

}


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

.card-content{

    display:flex;
    flex-direction:column;

}


/* ==========================================================
   FIELD
========================================================== */

.field{

    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:14px;

}


.field label{

    width:75px;

    font-weight:500;

    flex-shrink:0;

}


.separator{

    width:12px;

    text-align:center;

    color:#888;

    flex-shrink:0;

}


.field input,
.field textarea{

    flex:1;

    min-width:0;

    width:100%;

    padding:12px;

    background:#fff;

    border:1px solid #cfcfcf;

    border-radius:8px;

    transition:.2s;

}


.field input{

    height:44px;

}


.field textarea{

    min-height:120px;

    resize:vertical;

}


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

.field input:focus,
.field textarea:focus{

    border-color:#fc7b02;

    box-shadow:0 0 0 3px rgba(252,123,2,.12);

}


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

.textarea-row{

    align-items:flex-start;

}


.textarea-row label,
.textarea-row .separator{

    padding-top:12px;

}


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

.btn{

    display:inline-flex;

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

    align-self:center;

    min-width:140px;

    margin-top:4px;

    padding:10px 24px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    transition:.2s;

}


.btn-primary{

    background:#fc7b02;

    color:#fff;

}


.btn-primary:hover{

    opacity:.92;

}


/* ==========================================================
   FOOTER
========================================================== */

.card-footer{

    margin-top:18px;

    text-align:center;

    font-size:12px;

    color:#999;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:768px){

    #container{

        padding:10px;

    }

    .card{

        padding:16px;

    }

}


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

@media (max-width:576px){

    #container{

        padding:8px;

    }

    .card{

        padding:16px;

    }

    .card-logo{

        width:70px;
        height:70px;

    }

    .card-title{

        font-size:20px;

    }

    .card-subtitle{

        font-size:14px;

    }

    .field{

        flex-direction:column;

        align-items:stretch;

        gap:6px;

    }

    .field label{

        width:auto;

    }

    .separator{

        display:none;

    }

    .btn{

        width:100%;

    }

}

/* ==========================================================
   TOAST
========================================================== */

.toast{

    position:fixed;

    top:24px;

    right:24px;

    min-width:280px;

    padding:14px 20px;

    border-radius:10px;

    color:#fff;

    font-size:14px;

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

    opacity:0;

    transform:translateY(-20px);

    transition:.25s;

    z-index:9999;

}

.toast.show{

    opacity:1;

    transform:translateY(0);

}

.toast-success{

    background:#27ae60;

}

.toast-error{

    background:#e74c3c;

}

.btn-primary:disabled{

    opacity:.7;

    cursor:not-allowed;

}