/* ==========================================================
   LAEC LEARNING ACADEMY
   FORMS.CSS
   Shared Form Components
   Version 1.0
========================================================== */

/* ---------- Form Layout ---------- */

.form-shell{
    max-width:900px;
    margin:0 auto;
}

.form-card{
    background:#fff;
    border:1px solid #DFE7DF;
    border-radius:20px;
    box-shadow:0 10px 28px rgba(27,94,32,.08);
    overflow:hidden;
}

.form-header{
    padding:28px 32px;
    background:linear-gradient(135deg,#1B5E20,#2E7D32);
    color:#fff;
}

.form-header h1,
.form-header h2,
.form-header h3{
    color:#fff;
    margin:0;
    font-family:"Merriweather",serif;
}

.form-header p{
    color:rgba(255,255,255,.88);
    margin-top:8px;
}

.form-body{
    padding:32px;
}

.form-footer{
    padding:20px 32px;
    border-top:1px solid #DFE7DF;
    background:#F8FAF8;
}

/* ---------- Typography ---------- */

.form-section-title{
    margin:28px 0 18px;
    color:#1B5E20;
    font-weight:700;
    font-size:1.05rem;
}

.form-help{
    color:#6C757D;
    font-size:.85rem;
}

.required{
    color:#B3261E;
}

/* ---------- Inputs ---------- */

.form-label{
    margin-bottom:6px;
    color:#33423A;
    font-weight:700;
}

.form-control,
.form-select,
.form-textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid #DFE7DF;
    border-radius:12px;
    background:#fff;
    transition:.25s;
}

textarea.form-control,
.form-textarea{
    min-height:120px;
    resize:vertical;
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus{
    outline:none;
    border-color:#2E7D32;
    box-shadow:0 0 0 .2rem rgba(46,125,50,.12);
}

.form-control.is-valid{
    border-color:#2E7D32;
}

.form-control.is-invalid{
    border-color:#B3261E;
}

/* ---------- Input Groups ---------- */

.input-group{
    display:flex;
}

.input-group-text{
    display:flex;
    align-items:center;
    padding:0 14px;
    border:1px solid #DFE7DF;
    border-right:none;
    border-radius:12px 0 0 12px;
    background:#F3F7F3;
    color:#1B5E20;
}

.input-group .form-control{
    border-radius:0 12px 12px 0;
}

/* ---------- Checkboxes ---------- */

.form-check{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:12px 0;
}

.form-check-input{
    margin-top:4px;
}

.form-check-input:checked{
    background:#2E7D32;
    border-color:#2E7D32;
}

.form-check-label{
    color:#444;
}

/* ---------- Buttons ---------- */

.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px;
}

.btn-primary-form{
    padding:12px 28px;
    border:none;
    border-radius:50px;
    background:#2E7D32;
    color:#fff;
    font-weight:700;
}

.btn-primary-form:hover{
    background:#1B5E20;
}

.btn-secondary-form{
    padding:12px 28px;
    border:2px solid #2E7D32;
    border-radius:50px;
    background:#fff;
    color:#2E7D32;
    font-weight:700;
}

.btn-secondary-form:hover{
    background:#F3F8F3;
}

/* ---------- Status Alerts ---------- */

.form-status{
    display:none;
    margin-top:20px;
    padding:14px 16px;
    border-radius:12px;
    font-size:.9rem;
}

.form-status.show{
    display:block;
}

.form-status.success{
    background:#E8F5EC;
    color:#1F7A3D;
    border:1px solid #BFE3C9;
}

.form-status.error{
    background:#FBECEA;
    color:#B3261E;
    border:1px solid #EFC4BF;
}

.form-status.info{
    background:#EEF4FB;
    color:#315F8C;
    border:1px solid #CADCF0;
}

.form-status.warning{
    background:#FFF5DA;
    color:#9A6500;
    border:1px solid #F0D890;
}

/* ---------- Progress ---------- */

.progress-stepper{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:30px;
}

.progress-step{
    flex:1;
    text-align:center;
    font-size:.8rem;
    font-weight:700;
    color:#777;
}

.progress-step .circle{
    width:36px;
    height:36px;
    margin:0 auto 8px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#E8ECE8;
}

.progress-step.active{
    color:#1B5E20;
}

.progress-step.active .circle{
    background:#2E7D32;
    color:#fff;
}

/* ---------- Responsive ---------- */

@media(max-width:768px){

    .form-header,
    .form-body,
    .form-footer{
        padding:22px;
    }

    .form-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .btn-primary-form,
    .btn-secondary-form{
        width:100%;
    }

    .progress-stepper{
        flex-direction:column;
    }
}