/* =====================================
   TIZAMA GROUP
   APPLY LOAN CSS
===================================== */


:root{

--primary:#FFC400;
--primary-dark:#F5B800;

--navy:#081D5C;

--blue:#10338A;

--bg:#F4F6FB;

--white:#FFFFFF;

--text:#222222;

--gray:#777777;

--light:#F7F8FD;

--border:#ECECEC;

--success:#22C55E;

--warning:#F59E0B;

--radius:24px;

--shadow:
0 15px 40px rgba(8,29,92,.08);

}




*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Poppins',sans-serif;

}




body{

background:linear-gradient(
180deg,
#F7F8FD,
#EEF2F8
);

color:var(--text);

}



.app{

max-width:430px;

margin:auto;

padding:20px;

min-height:100vh;

}




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


.header{

text-align:center;

margin-bottom:25px;

}



.logo{

width:75px;

height:75px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
#FFD84A,
#FFC400
);

font-size:30px;

color:var(--navy);

box-shadow:
0 12px 30px rgba(255,196,0,.35);

}



.header h1{

margin-top:15px;

font-size:30px;

color:var(--navy);

}



.header p{

font-size:14px;

color:var(--gray);

margin-top:6px;

}




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


.card{

background:var(--white);

border-radius:28px;

padding:22px;

margin-bottom:20px;

box-shadow:var(--shadow);

}



.card-title{

display:flex;

align-items:center;

gap:10px;

font-size:20px;

font-weight:700;

color:var(--navy);

margin-bottom:22px;

}



.card-title i{

color:var(--primary);

}




/* =====================
PROFILE BOX
===================== */


.profile-box{

display:flex;

align-items:center;

gap:15px;

background:#F8F9FD;

padding:15px;

border-radius:20px;

}



.profile-box img{

width:65px;

height:65px;

border-radius:20px;

object-fit:cover;

}



.profile-box h3{

color:var(--navy);

font-size:17px;

}



.profile-box p{

font-size:12px;

color:var(--gray);

}



.profile-box span{

display:inline-block;

margin-top:5px;

font-size:11px;

background:#EAFBF0;

color:#16A34A;

padding:5px 12px;

border-radius:20px;

}




/* =====================
MEMBER SUMMARY
===================== */


.member-summary{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin-top:15px;

}



.member-summary div{

background:#FFF8DD;

padding:15px;

border-radius:18px;

}



.member-summary small{

color:var(--gray);

}



.member-summary strong{

display:block;

margin-top:8px;

font-size:15px;

color:var(--navy);

}




/* =====================
SLIDER AREA
===================== */


.item{

margin-bottom:25px;

}



.row{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:12px;

}



.row span{

font-size:14px;

color:#555;

}



.row strong{

color:var(--navy);

font-size:18px;

}



input[type="range"]{

width:100%;

height:7px;

appearance:none;

border-radius:20px;

background:#E5E7EB;

outline:none;

}



input[type="range"]::-webkit-slider-thumb{

appearance:none;

width:28px;

height:28px;

background:var(--primary);

border-radius:50%;

border:5px solid white;

box-shadow:
0 5px 15px rgba(255,196,0,.5);

cursor:pointer;

}




.labels{

display:flex;

justify-content:space-between;

font-size:12px;

color:#888;

margin-top:8px;

}





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


.payment{

margin-top:20px;

padding:22px;

border-radius:22px;

background:linear-gradient(
135deg,
#FFF8DD,
#FFEFA6
);

display:flex;

align-items:center;

justify-content:space-between;

}



.payment small{

color:#666;

}



.payment h2{

margin-top:8px;

font-size:30px;

color:var(--navy);

}



.payment .icon{

width:60px;

height:60px;

background:var(--primary);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

color:var(--navy);

}





/* =====================
SUMMARY BOXES
===================== */


.summary{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin-top:18px;

}



.box{

background:#F7F8FD;

border:1px solid var(--border);

padding:15px;

border-radius:18px;

}



.box small{

color:var(--gray);

font-size:12px;

}



.box h3{

margin-top:8px;

font-size:16px;

color:var(--navy);

}





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


label{

font-size:14px;

color:#555;

}



textarea{

width:100%;

height:120px;

margin-top:10px;

border:1px solid var(--border);

border-radius:18px;

padding:15px;

font-size:14px;

resize:none;

outline:none;

}



textarea:focus{

border-color:var(--primary);

}




/* =====================
AGREEMENT
===================== */


.agreement-card{

background:white;

padding:18px;

border-radius:20px;

box-shadow:var(--shadow);

margin-bottom:20px;

}



.agreement-card label{

display:flex;

gap:12px;

align-items:flex-start;

font-size:13px;

}



.agreement-card input{

accent-color:var(--primary);

width:18px;

height:18px;

}





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


button{

width:100%;

border:none;

padding:18px;

border-radius:20px;

background:linear-gradient(
135deg,
#FFD84A,
#FFC400
);

font-size:18px;

font-weight:700;

color:var(--navy);

cursor:pointer;

box-shadow:
0 10px 25px rgba(255,196,0,.35);

}



button i{

margin-right:8px;

}




button:active{

transform:scale(.97);

}




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


@media(max-width:430px){


.app{

padding:15px;

}


.header h1{

font-size:26px;

}


.payment h2{

font-size:25px;

}


}