/* =====================================
   Global Layout
===================================== */

body{
background:#f4f6f9;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
min-height:100vh;
}


/* =====================================
   Loan Card
===================================== */

.loan-card{
border:none;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.loan-card .card-body{
padding:35px;
}


/* =====================================
   Branding
===================================== */

.logo{
font-size:22px;
font-weight:700;
color:#0d6efd;
}

.form-title{
font-weight:600;
font-size:22px;
}

.form-subtitle{
font-size:14px;
color:#6c757d;
}


/* =====================================
   Form Inputs
===================================== */

.form-control,
.form-select{
height:48px;
border-radius:8px;
border:1px solid #ced4da;
transition:all .2s ease;
}

.form-control:focus,
.form-select:focus{
border-color:#0d6efd;
box-shadow:none;
}


/* =====================================
   Validation Styles
===================================== */

.form-control.is-invalid,
.form-select.is-invalid{
border-color:#dc3545;
}

.form-control.is-valid,
.form-select.is-valid{
border-color:#198754;
}


/* =====================================
   Validation Messages
===================================== */

.invalid-feedback{
display:none;
font-size:13px;
margin-top:4px;
color:#dc3545;
}

.valid-feedback{
display:none;
font-size:13px;
margin-top:4px;
color:#198754;
}

/* JS will control display */


/* =====================================
   Input Group Support
===================================== */

.input-group .form-control.is-invalid{
z-index:2;
}

.input-group .form-control.is-valid{
z-index:2;
}


/* =====================================
   Buttons
===================================== */

.btn-primary,
.btn-success{
height:48px;
font-weight:600;
border-radius:8px;
}

.btn-primary:hover,
.btn-success:hover{
transform:translateY(-1px);
}


/* =====================================
   Step Form
===================================== */

.step{
display:none;
}

.step.active{
display:block;
}


/* =====================================
   Progress Bar
===================================== */

.progress-container{
margin-bottom:25px;
}

.progress{
height:6px;
border-radius:20px;
}

.progress-bar{
transition:width .4s ease;
}


/* =====================================
   Submitting Modal
===================================== */

.modal-content{
border-radius:12px;
}

.spinner-border{
width:2.2rem;
height:2.2rem;
}


/* =====================================
   Toast
===================================== */

.toast{
border-radius:10px;
font-size:14px;
}


/* =====================================
   Agent Visit Page
===================================== */

.visit-card{
border:none;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.visit-label{
font-weight:600;
margin-top:15px;
}

.visit-value{
color:#444;
margin-bottom:8px;
}

.visit-btn{
padding:12px 18px;
border-radius:8px;
font-weight:500;
text-decoration:none;
}

.visit-btn:hover{
opacity:0.9;
}


/* =====================================
   Share Box
===================================== */

.share-box{
background:#f8f9fa;
padding:15px;
border-radius:8px;
font-size:14px;
white-space:pre-line;
}


/* =====================================
   Responsive
===================================== */

@media (max-width:768px){

.loan-card .card-body{
padding:25px;
}

.form-title{
font-size:20px;
}

}

@media (max-width:480px){

.form-control,
.form-select{
height:46px;
}

.btn-primary,
.btn-success{
height:46px;
}

}