/* =====================================================================
   Digital Loan Services — Design System
   Palette: Navy (trust) + Red (action) + Green (success/completed)
   ===================================================================== */

:root {
    --dls-navy-900: #0B2545;
    --dls-navy-700: #13385E;
    --dls-navy-500: #1E5083;
    --dls-red-600: #D62839;
    --dls-red-700: #B71F2E;
    --dls-green-600: #1E8E5A;
    --dls-blue-500: #2563EB;
    --dls-amber-500: #E8A23D;
    --dls-bg: #F3F5F8;
    --dls-card: #FFFFFF;
    --dls-border: #E3E7EE;
    --dls-text: #17233D;
    --dls-text-muted: #5B6B85;
    --dls-radius: 14px;
    --dls-shadow: 0 4px 20px rgba(11, 37, 69, 0.08);
    --font-display: 'Sora', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--dls-bg);
    color: var(--dls-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .brand-font {
    font-family: var(--font-display);
    color: var(--dls-navy-900);
    font-weight: 700;
}

a { text-decoration: none; }

/* ---------------- Header ---------------- */
.dls-header {
    background: var(--dls-card);
    border-bottom: 1px solid var(--dls-border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.dls-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--dls-navy-900);
}

.dls-logo .logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--dls-navy-900), var(--dls-blue-500));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

.dls-nav a {
    color: var(--dls-navy-900);
    font-weight: 600;
    margin-left: 22px;
    font-size: 0.95rem;
}

.dls-nav a:hover { color: var(--dls-red-600); }

/* ---------------- Buttons ---------------- */
.btn-dls-primary {
    background: var(--dls-red-600);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 10px;
    transition: 0.2s ease;
}
.btn-dls-primary:hover { background: var(--dls-red-700); color: #fff; }

.btn-dls-outline {
    background: transparent;
    border: 2px solid var(--dls-navy-900);
    color: var(--dls-navy-900);
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 10px;
}
.btn-dls-outline:hover { background: var(--dls-navy-900); color: #fff; }

.btn-dls-secondary {
    background: var(--dls-navy-900);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 10px;
}
.btn-dls-secondary:hover { background: var(--dls-navy-700); color: #fff; }

/* ---------------- Hero ---------------- */
.dls-hero {
    background: radial-gradient(circle at top right, var(--dls-navy-700), var(--dls-navy-900));
    color: #fff;
    padding: 70px 0;
    border-radius: 0 0 32px 32px;
}
.dls-hero h1 { color: #fff; font-size: 2.6rem; line-height: 1.15; }
.dls-hero p { color: #C9D6E8; font-size: 1.1rem; }

/* ---------------- Cards ---------------- */
.dls-card {
    background: var(--dls-card);
    border-radius: var(--dls-radius);
    box-shadow: var(--dls-shadow);
    border: 1px solid var(--dls-border);
    padding: 28px;
}

.dls-option-card {
    background: var(--dls-card);
    border-radius: var(--dls-radius);
    border: 1px solid var(--dls-border);
    padding: 30px 24px;
    text-align: center;
    transition: 0.2s ease;
    height: 100%;
}
.dls-option-card:hover { transform: translateY(-4px); box-shadow: var(--dls-shadow); border-color: var(--dls-navy-500); }
.dls-option-card .icon-circle {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(11,37,69,0.06);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 1.5rem; color: var(--dls-navy-900);
}

.loan-product-card {
    border: 1px solid var(--dls-border);
    border-radius: var(--dls-radius);
    padding: 24px;
    background: #fff;
    height: 100%;
}
.loan-product-card .rate-badge {
    display: inline-block;
    background: rgba(30, 142, 90, 0.1);
    color: var(--dls-green-600);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

/* ---------------- Step Sidebar (Application flow) ---------------- */
.step-sidebar {
    background: var(--dls-card);
    border-radius: var(--dls-radius);
    border: 1px solid var(--dls-border);
    padding: 24px 0;
}
.step-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    position: relative;
    color: var(--dls-text-muted);
    font-weight: 600;
}
.step-item .step-circle {
    width: 32px; height: 32px; border-radius: 50%;
    background: #EDF0F5; color: var(--dls-text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
}
.step-item.completed .step-circle { background: var(--dls-green-600); color: #fff; }
.step-item.completed { color: var(--dls-green-600); }
.step-item.active .step-circle { background: var(--dls-blue-500); color: #fff; }
.step-item.active { color: var(--dls-blue-500); }

/* Mobile compact step indicator */
.step-indicator-mobile {
    display: flex;
    gap: 6px;
    padding: 14px 4px;
}
.step-indicator-mobile .dot {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: #EDF0F5;
}
.step-indicator-mobile .dot.completed { background: var(--dls-green-600); }
.step-indicator-mobile .dot.active { background: var(--dls-blue-500); }

/* ---------------- Forms ---------------- */
.form-label { font-weight: 600; color: var(--dls-navy-900); font-size: 0.9rem; }
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--dls-border);
    padding: 10px 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--dls-blue-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--dls-navy-900);
    border-bottom: 2px solid var(--dls-border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.invalid-feedback { font-weight: 600; }

/* ---------------- Status badges ---------------- */
.badge-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-pending { background: rgba(232,162,61,0.15); color: #A46A0F; }
.badge-review { background: rgba(37,99,235,0.12); color: var(--dls-blue-500); }
.badge-approved, .badge-sanctioned, .badge-completed { background: rgba(30,142,90,0.12); color: var(--dls-green-600); }
.badge-rejected { background: rgba(214,40,57,0.12); color: var(--dls-red-600); }

/* ---------------- Track timeline ---------------- */
.track-timeline { list-style: none; padding: 0; margin: 0; }
.track-timeline li {
    display: flex; align-items: flex-start; gap: 14px;
    padding-bottom: 26px; position: relative;
}
.track-timeline li::before {
    content: ''; position: absolute; left: 15px; top: 32px; bottom: 0;
    width: 2px; background: var(--dls-border);
}
.track-timeline li:last-child::before { display: none; }
.track-timeline .tl-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #EDF0F5; color: var(--dls-text-muted); flex-shrink: 0; z-index: 1;
}
.track-timeline li.done .tl-icon { background: var(--dls-green-600); color: #fff; }
.track-timeline li.current .tl-icon { background: var(--dls-blue-500); color: #fff; }

/* ---------------- Footer ---------------- */
.dls-footer {
    background: var(--dls-navy-900);
    color: #B9C6DA;
    padding: 40px 0 20px;
    margin-top: 60px;
}
.dls-footer a { color: #fff; }
.dls-footer .disclaimer {
    font-size: 0.8rem;
    color: #8091AC;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 24px;
    padding-top: 16px;
}

/* ---------------- Utility ---------------- */
.masked-field { font-family: 'Courier New', monospace; letter-spacing: 1px; }
.loading-spinner { display: none; }
.loading-spinner.show { display: inline-block; }

@media (max-width: 767px) {
    .dls-hero { padding: 40px 0; border-radius: 0 0 20px 20px; }
    .dls-hero h1 { font-size: 1.8rem; }
    .step-sidebar { display: none; }
}