/* ESBD Portal Application Form - Mobile First CSS */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--navy:#0A1F3F;--navy-light:#0F2A54;--navy-dark:#061429;--gold:#C6922A;--gold-light:#D4A84D;--cream:#FAF8F3;--white:#FFF;--grey-50:#FAFAFA;--grey-100:#F4F4F5;--grey-200:#E4E4E7;--grey-300:#D4D4D8;--grey-400:#A1A1AA;--grey-500:#71717A;--grey-600:#52525B;--grey-800:#27272A;--error:#DC2626;--success:#16A34A;--radius:8px;--radius-lg:12px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 12px rgba(0,0,0,.08);--font-display:'DM Serif Display',Georgia,serif;--font-body:'Plus Jakarta Sans','Segoe UI',sans-serif}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{min-height:100vh;font-family:var(--font-body);background:var(--cream);color:var(--grey-800)}

/* Top nav */
.esbd-topnav{background:var(--white);border-bottom:1px solid var(--grey-200);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.esbd-topnav-left{display:flex;align-items:center;gap:10px}
.esbd-topnav-logo{height:36px;width:auto}
.esbd-topnav-name{font-family:var(--font-display);font-size:14px;color:var(--navy)}
.esbd-topnav-loc{font-size:9px;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.esbd-topnav-right{display:flex;align-items:center;gap:16px}
.esbd-topnav-link{font-size:14px;color:var(--grey-600);text-decoration:none}
.esbd-topnav-btn{padding:8px 20px;background:var(--navy);color:var(--white);border-radius:50px;font-size:13px;font-weight:600;text-decoration:none}

/* Layout - mobile first (single column) */
.esbd-app-layout{display:block;max-width:1440px;margin:0 auto;min-height:calc(100vh - 64px)}
.esbd-faq-sidebar,.esbd-guidelines-sidebar{display:none}
.esbd-form-area{padding:24px 16px;overflow-y:auto}

/* Sidebar titles */
.esbd-sidebar-title{font-family:var(--font-display);font-size:20px;color:var(--navy);margin-bottom:14px}
.esbd-sidebar-desc{font-size:12px;color:var(--grey-500);line-height:1.6;margin-bottom:12px}
.esbd-sidebar-divider{height:1px;background:var(--grey-200);margin:18px 0}

/* Collapsible panels */
.esbd-collapsible{margin-bottom:5px;border-radius:var(--radius);overflow:hidden}
.esbd-collapsible-header{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;cursor:pointer;background:var(--navy);color:var(--white);font-size:12px;font-weight:600;border-radius:var(--radius);transition:.2s}
.esbd-collapsible-header:hover{background:var(--navy-light)}
.esbd-collapsible-header span{font-size:16px;transition:transform .3s}
.esbd-collapsible.open .esbd-collapsible-header{border-radius:var(--radius) var(--radius) 0 0}
.esbd-collapsible.open .esbd-collapsible-header span{transform:rotate(45deg)}
.esbd-collapsible-body{max-height:0;overflow:hidden;transition:max-height .35s;background:var(--grey-50)}
.esbd-collapsible.open .esbd-collapsible-body{max-height:600px}
.esbd-collapsible-body p{font-size:12px;line-height:1.65;color:var(--grey-600);padding:12px 14px}

/* Scholarship cards in sidebar */
.esbd-scholarship-card{background:var(--navy);border-radius:var(--radius);padding:14px;margin-bottom:6px;color:var(--white)}
.esbd-sch-name{font-size:12px;font-weight:700}
.esbd-sch-pct{font-size:11px;color:var(--gold);font-weight:600;margin:2px 0 6px}
.esbd-sch-desc{font-size:11px;color:rgba(255,255,255,.6);line-height:1.5}

/* Auto-save indicator */
.esbd-autosave-indicator{display:flex;align-items:center;gap:8px;margin-top:18px;padding:10px 14px;background:rgba(198,146,42,.08);border-radius:var(--radius);font-size:12px;color:var(--gold)}
.esbd-autosave-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* Form header */
.esbd-form-header h1{font-family:var(--font-display);font-size:24px;color:var(--navy);margin-bottom:4px}
.esbd-form-header p{font-size:13px;color:var(--grey-500);margin-bottom:20px}

/* Stepper */
.esbd-stepper{display:flex;justify-content:space-between;padding:16px 20px;background:var(--navy);border-radius:var(--radius-lg);margin-bottom:28px;overflow-x:auto;gap:4px}
.esbd-step{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:60px}
.esbd-step-circle{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:rgba(255,255,255,.3);transition:.3s}
.esbd-step.active .esbd-step-circle{border-color:var(--gold);color:var(--white);background:var(--gold)}
.esbd-step.current .esbd-step-circle{border-color:var(--gold);color:var(--gold)}
.esbd-step-label{font-size:9px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;text-align:center;white-space:nowrap}
.esbd-step.active .esbd-step-label{color:rgba(255,255,255,.7)}

/* Form fields */
.esbd-field{margin-bottom:16px}
.esbd-field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:5px}
.esbd-field input,.esbd-field select,.esbd-field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--grey-200);border-radius:var(--radius);font-family:var(--font-body);font-size:14px;color:var(--grey-800);outline:none;transition:.2s;min-height:44px;background:var(--white)}
.esbd-field input:focus,.esbd-field select:focus,.esbd-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,146,42,.1)}
.esbd-field textarea{resize:vertical;min-height:100px}
.esbd-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A1A1AA' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.esbd-field-row{display:grid;grid-template-columns:1fr;gap:16px}
.esbd-req{color:var(--gold);font-size:12px;font-weight:500}
.esbd-hint{font-size:12px;color:var(--grey-400);margin-top:4px;display:block}
.esbd-file-input{padding:10px !important;background:var(--grey-50) !important;cursor:pointer}
.esbd-section-title{font-size:16px;font-weight:700;color:var(--navy);margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--grey-200)}
.esbd-divider{height:1px;background:var(--grey-200);margin:24px 0}

/* Info box */
.esbd-info-box{padding:14px 16px;border-radius:var(--radius);background:var(--grey-50);border-left:4px solid var(--gold);font-size:13px;color:var(--grey-600);line-height:1.6;margin-bottom:20px}
.esbd-info-gold{background:rgba(198,146,42,.06);border-left-color:var(--gold)}

/* Toggle */
.esbd-toggle-wrap{display:flex;align-items:center;gap:10px;margin-top:8px}
.esbd-toggle-wrap input[type="checkbox"]{width:20px;height:20px;accent-color:var(--gold);cursor:pointer}
.esbd-toggle-label{font-size:14px;color:var(--grey-600);cursor:pointer}

/* Checkbox group */
.esbd-checkbox-group{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.esbd-checkbox-group input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold);cursor:pointer;flex-shrink:0}
.esbd-checkbox-group label{font-size:13px;color:var(--grey-600);line-height:1.6;cursor:pointer}

/* Radio group */
.esbd-radio-group{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.esbd-radio{display:flex;align-items:center;gap:8px;padding:10px 18px;border:1.5px solid var(--grey-200);border-radius:var(--radius);cursor:pointer;font-size:14px;color:var(--grey-600);transition:.2s}
.esbd-radio:hover{border-color:var(--gold)}
.esbd-radio input{accent-color:var(--gold);width:16px;height:16px}

/* Voucher input */
.esbd-voucher-input{display:flex;gap:10px}
.esbd-voucher-input input{flex:1;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.esbd-voucher-valid{padding:14px;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:var(--radius);color:var(--success);font-size:13px;margin-top:10px}
.esbd-voucher-invalid{padding:14px;background:#FEF2F2;border:1px solid #FECACA;border-radius:var(--radius);color:var(--error);font-size:13px;margin-top:10px}

/* Recommendation box */
.esbd-recommendation-box{padding:16px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--navy-dark),var(--navy));color:var(--white);margin-bottom:20px}
.esbd-recommendation-box strong{color:var(--gold);font-size:13px}
.esbd-recommendation-box p{font-size:13px;color:rgba(255,255,255,.8);margin:8px 0}

/* Buttons */
.esbd-btn{padding:12px 24px;border:none;border-radius:var(--radius);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:.2s;min-height:44px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.esbd-btn-navy{background:var(--navy);color:var(--white)}
.esbd-btn-gold{background:var(--gold);color:var(--white)}
.esbd-btn-gold:hover{background:var(--gold-light)}
.esbd-btn-outline{background:var(--white);color:var(--navy);border:1.5px solid var(--grey-200)}
.esbd-btn-submit{background:var(--navy);color:var(--white);padding:14px 32px;font-size:15px}
.esbd-btn-sm{padding:8px 16px;font-size:12px}
.esbd-form-nav{display:flex;justify-content:space-between;margin-top:28px;padding-top:20px;border-top:1px solid var(--grey-200)}

/* Success panel */
.esbd-success-panel{text-align:center;padding:48px 24px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.esbd-success-icon{width:64px;height:64px;border-radius:50%;background:#F0FDF4;color:var(--success);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 20px}
.esbd-success-panel h2{font-family:var(--font-display);color:var(--navy);margin-bottom:8px}
.esbd-success-panel p{color:var(--grey-500);margin-bottom:20px}
.esbd-success-details{background:var(--grey-50);border-radius:var(--radius);padding:16px;margin:16px 0;text-align:left}
.esbd-success-details p{margin-bottom:6px;font-size:14px}

/* ─── RESPONSIVE: TABLET (768px+) ─── */
@media(min-width:768px){
    .esbd-field-row{grid-template-columns:1fr 1fr}
    .esbd-form-area{padding:32px}
    .esbd-form-header h1{font-size:28px}
}

/* ─── RESPONSIVE: LAPTOP (1024px+) ─── */
@media(min-width:1024px){
    .esbd-app-layout{display:grid;grid-template-columns:200px 280px 1fr}
    .esbd-faq-sidebar{display:block;padding:24px 16px;border-right:1px solid var(--grey-200);background:var(--white);overflow-y:auto}
    .esbd-guidelines-sidebar{display:block;padding:24px 16px;border-right:1px solid var(--grey-200);background:var(--white);overflow-y:auto}
    .esbd-form-area{padding:36px 44px}
}

/* ─── RESPONSIVE: DESKTOP (1280px+) ─── */
@media(min-width:1280px){
    .esbd-app-layout{grid-template-columns:220px 300px 1fr}
    .esbd-faq-sidebar{padding:28px 20px}
    .esbd-guidelines-sidebar{padding:28px 20px}
    .esbd-form-area{padding:36px 48px}
    .esbd-form-header h1{font-size:30px}
}