/* =========================================================
   SIGN-IN PAGE STYLES - NGO Mitra Design
   Matches provided design: navy left panel + orange curve + card
   ========================================================= */

.signin-body{
    margin:0;
    font-family:var(--font, 'Poppins', sans-serif);
    background:#f4f6fb;
    overflow-x:hidden;
}

.signin-wrapper{
    display:flex;
    min-height:100vh;
    position:relative;
}

/* ============ LEFT PANEL ============ */
.signin-left{
    flex:0 0 46%;
    background:radial-gradient(circle at 20% 20%, #1e3a6e 0%, #152a52 45%, #0e1d3d 100%);
    position:relative;
    color:#fff;
    padding:56px 60px;
    display:flex;
    align-items:center;
    overflow:hidden;
    clip-path: none;
}
.signin-left::after{
    content:"";
    position:absolute;
    top:0; right:-60px;
    width:120px; height:100%;
    background:linear-gradient(180deg,#f5841f,#ff9d47);
    border-radius:0 0 0 0;
    clip-path: ellipse(60px 60% at 0% 50%);
    z-index:1;
}
.signin-left-inner{position:relative;z-index:2;max-width:520px;}

.brand-row{display:flex;align-items:center;gap:14px;margin-bottom:34px;}
.brand-icon{
    width:52px;height:52px;
    background:linear-gradient(135deg,#152a52,#f5841f);
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px;color:#fff;
    flex-shrink:0;
}
.brand-title{font-weight:800;font-size:26px;letter-spacing:0.5px;line-height:1.1;}
.brand-ngo{color:#fff;}
.brand-mitra{color:#f5841f;}
.brand-tagline{font-size:10.5px;letter-spacing:1.5px;color:rgba(255,255,255,0.55);font-weight:600;margin-top:2px;}

.signin-heading{font-size:32px;font-weight:700;line-height:1.25;margin-bottom:18px;}
.text-orange{color:#f5841f;}
.signin-desc{font-size:14px;color:rgba(255,255,255,0.7);line-height:1.7;margin-bottom:28px;max-width:440px;}

.feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px 22px;
    margin-bottom:28px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(255,255,255,0.12);
}
.feature-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:12.5px;color:rgba(255,255,255,0.85);font-weight:500;line-height:1.35;}
.feature-icon{
    width:40px;height:40px;
    border-radius:10px;
    background:rgba(245,132,31,0.15);
    border:1.5px solid rgba(245,132,31,0.4);
    color:#f5841f;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;
}

.signin-quote{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    padding:14px 18px;
    font-size:13px;
    font-weight:500;
    color:rgba(255,255,255,0.85);
}
.signin-quote i{color:#f5841f;font-size:16px;}

/* ============ RIGHT PANEL ============ */
.signin-right{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    position:relative;
    background:
        radial-gradient(circle at 95% 90%, rgba(245,132,31,0.06) 0%, transparent 45%),
        #f8f9fc;
}

.lang-select{
    position:absolute;
    top:28px; right:36px;
    background:#fff;
    border:1px solid #e7eaf0;
    border-radius:10px;
    padding:8px 16px;
    font-size:13px;
    font-weight:600;
    color:#152a52;
    display:flex;align-items:center;gap:8px;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(20,30,60,0.05);
}

.signin-card{
    width:100%;
    max-width:460px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(20,30,60,0.08);
    padding:40px 40px 36px;
}
.signin-card-logo{text-align:center;margin-bottom:18px;}
.signin-card-logo .brand-icon{margin:0 auto 12px;}
.signin-card-logo .brand-title{font-size:24px;}

.signin-card-title{
    text-align:center;
    font-weight:700;
    font-size:22px;
    color:#152a52;
    margin-bottom:4px;
}
.signin-card-sub{
    text-align:center;
    font-size:13px;
    color:#8a94a6;
    margin-bottom:24px;
}

.signin-card .form-label{font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;}

.input-icon-group{
    position:relative;
    display:flex;
    align-items:center;
}
.input-icon-group i{
    position:absolute;
    left:14px;
    color:#94a3b8;
    font-size:15px;
    pointer-events:none;
}
.input-icon-group .toggle-eye{
    left:auto;
    right:14px;
    cursor:pointer;
    pointer-events:auto;
}
.input-icon-group .form-control{
    padding-left:42px;
    padding-right:42px;
    height:48px;
    border-radius:10px;
    border:1.5px solid #e7eaf0;
    font-size:14px;
    background:#f9fafc;
}
.input-icon-group .form-control:focus{
    border-color:#f5841f;
    box-shadow:0 0 0 3px rgba(245,132,31,0.12);
    background:#fff;
}

.form-check-input:checked{background-color:#f5841f;border-color:#f5841f;}
.form-check-label{font-size:13px;color:#475569;}
.forgot-link{font-size:13px;font-weight:600;color:#f5841f;}
.forgot-link:hover{color:#d9700f;}

.btn-signin{
    background:linear-gradient(135deg,#f5841f,#ff9d47);
    color:#fff;
    border:none;
    height:50px;
    border-radius:12px;
    font-weight:700;
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.2s;
    box-shadow:0 8px 20px rgba(245,132,31,0.35);
}
.btn-signin:hover{
    background:linear-gradient(135deg,#e97613,#f5841f);
    color:#fff;
    transform:translateY(-1px);
}

.signin-footer-badges{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    margin-top:26px;
    font-size:12.5px;
    color:#64748b;
    font-weight:600;
}
.signin-footer-badges i{color:#f5841f;margin-right:4px;}
.signin-footer-badges .sep{color:#cbd5e1;}

.signin-copyright{
    text-align:center;
    font-size:12px;
    color:#94a3b8;
    margin-top:14px;
}

/* ================= RESPONSIVE ================= */
@media (max-width:1199.98px){
    .signin-left{padding:44px 40px;}
    .signin-heading{font-size:27px;}
}

@media (max-width:991.98px){
    .signin-wrapper{flex-direction:column;}
    .signin-left{flex:none;width:100%;padding:40px 30px;clip-path:none;}
    .signin-left::after{display:none;}
    .feature-grid{grid-template-columns:1fr 1fr;}
    .signin-right{padding:40px 20px;}
    .lang-select{position:static;align-self:flex-end;margin-bottom:20px;}
}

@media (max-width:575.98px){
    .signin-left{padding:32px 20px;}
    .signin-heading{font-size:22px;}
    .feature-grid{grid-template-columns:1fr 1fr;gap:14px;}
    .feature-item{font-size:11.5px;}
    .signin-card{padding:28px 22px 24px;border-radius:16px;}
    .brand-title{font-size:20px;}
    .signin-card-title{font-size:19px;}
}