/* ════════════════════════════════
   BASE
════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;}
[x-cloak]{display:none!important;}
body{
    font-family:'Inter',sans-serif;
    background:linear-gradient(160deg,#eef1fb 0%,#f5f7ff 50%,#eaf4fb 100%);
    background-attachment:fixed;
    color:#1a1f36;
    min-height:100vh;
    border-top:5px solid #e31e25;
}

/* ════════════════════════════════
   HEADER TOP BAR (navy)
════════════════════════════════ */
.hdr-topbar{
    background:linear-gradient(90deg,#0f1b6b 0%,#1a237e 60%,#1565c0 100%);
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.hdr-topbar-inner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hdr-top-left{display:flex;align-items:center;}
.hdr-top-right{display:flex;align-items:center;gap:20px;}
@media(max-width:767px){
    .hdr-topbar-inner{flex-direction:column;gap:6px;text-align:center;}
    .hdr-top-left,.hdr-top-right{justify-content:center;flex-wrap:wrap;gap:12px;}
}
.hdr-info-item{
    display:inline-flex;align-items:center;gap:7px;
    font-size:.8rem;color:rgba(255,255,255,.9);
}
.hdr-info-item i{
    color:#67e8f9;font-size:.9rem;
    background:rgba(255,255,255,.1);
    border-radius:6px;padding:4px 5px;
}
.hdr-info-item strong{color:#fff;}
.hdr-info-item a{color:rgba(255,255,255,.9);text-decoration:none;transition:color .15s;}
.hdr-info-item a:hover{color:#67e8f9;}

/* ── Sticky white header ── */
.site-header{
    background:#fff;
    position:sticky;top:0;z-index:1050;
    border-bottom:4px solid #e31e25;
    box-shadow:0 4px 20px rgba(0,0,0,.10);
}
.hdr-logo-bar{
    display:flex;align-items:center;justify-content:center;
    padding:8px 0;
    background:#fff;
}
.hdr-logo{width:100%;max-width:100%;height:auto;object-fit:contain;display:block;background:#fff;}
@media(max-width:767px){.hdr-logo{max-height:80px;}}

/* ════════════════════════════════
   MAIN WRAP
════════════════════════════════ */
.main-wrap{padding:8px 0 32px;}

/* ════════════════════════════════
   FORM TITLE BAR
════════════════════════════════ */
.form-title-bar{
    background:linear-gradient(135deg,#1e2d8a 0%,#2563eb 60%,#0891b2 100%);
    border-radius:16px;
    padding:20px 24px;
    margin-bottom:20px;
    box-shadow:0 6px 24px rgba(30,45,138,.22);
    text-align:center;
}
.form-title-main{
    font-family:'Poppins',sans-serif;
    font-size:1.3rem;font-weight:800;
    color:#fff;letter-spacing:.02em;line-height:1.2;
}
.form-title-sub{
    font-size:.8rem;font-weight:500;
    color:rgba(255,255,255,.78);
    margin-top:4px;
}

/* ════════════════════════════════
   PROGRESS BAR CARD
════════════════════════════════ */
.prog-card{
    background:#fff;
    border-radius:16px;
    border:1px solid #e4e8f5;
    box-shadow:0 4px 20px rgba(44,62,168,.07);
    padding:18px 22px;
    position:relative;
    overflow:hidden;
}
.prog-card::before{
    content:'';
    position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,#e31e25,#1e2d8a,#0891b2);
}
.prog-bar-track{background:#eef0fb;border-radius:999px;height:7px;overflow:hidden;}
.prog-bar-fill{
    height:100%;border-radius:999px;
    background:linear-gradient(90deg,#1e2d8a,#2563eb,#0891b2);
    transition:width .4s cubic-bezier(.4,0,.2,1);
}
.step-node{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;}
.step-dot{
    width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.65rem;font-weight:700;
    border:2px solid #dde1f0;background:#fff;color:#94a3b8;
    transition:all .25s;box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.step-dot.done{
    background:linear-gradient(135deg,#1e2d8a,#2563eb);
    border-color:#1e2d8a;color:#fff;
    box-shadow:0 3px 10px rgba(30,45,138,.3);
}
.step-lbl{font-size:.58rem;color:#94a3b8;font-weight:600;white-space:nowrap;}

/* ════════════════════════════════
   SECTION CARDS
════════════════════════════════ */
.sec-card{
    background:#fff;
    border-radius:18px;
    border:1px solid #e8ecf8;
    box-shadow:0 4px 24px rgba(44,62,168,.06);
    overflow:hidden;
    margin-bottom:22px;
    transition:box-shadow .2s;
}
.sec-card:hover{box-shadow:0 8px 32px rgba(44,62,168,.10);}
.sec-hd{
    display:flex;align-items:center;gap:12px;
    padding:14px 22px;
    border-bottom:1px solid #f1f4fc;
}
.sec-icon{
    width:38px;height:38px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:.9rem;flex-shrink:0;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.sec-title{
    font-size:.75rem;font-weight:800;
    letter-spacing:.07em;text-transform:uppercase;
}
.sec-body{padding:22px;}

/* Section themes */
.th-blue  .sec-hd{background:linear-gradient(90deg,#f0f3ff,#f8f9ff);border-left:4px solid #2c3ea8;}
.th-blue  .sec-icon{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#2c3ea8;}
.th-blue  .sec-title{color:#1e2d8a;}

.th-teal  .sec-hd{background:linear-gradient(90deg,#ecfeff,#f8fdff);border-left:4px solid #0891b2;}
.th-teal  .sec-icon{background:linear-gradient(135deg,#cffafe,#a5f3fc);color:#0369a1;}
.th-teal  .sec-title{color:#0369a1;}

.th-violet .sec-hd{background:linear-gradient(90deg,#f5f3ff,#faf8ff);border-left:4px solid #7c3aed;}
.th-violet .sec-icon{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#6d28d9;}
.th-violet .sec-title{color:#5b21b6;}

.th-amber .sec-hd{background:linear-gradient(90deg,#fffbeb,#fefce8);border-left:4px solid #d97706;}
.th-amber .sec-icon{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#b45309;}
.th-amber .sec-title{color:#92400e;}

.th-rose  .sec-hd{background:linear-gradient(90deg,#fff0f2,#fff5f7);border-left:4px solid #e11d48;}
.th-rose  .sec-icon{background:linear-gradient(135deg,#ffe4e6,#fecdd3);color:#be123c;}
.th-rose  .sec-title{color:#9f1239;}

.th-slate .sec-hd{background:linear-gradient(90deg,#f8fafc,#f1f5f9);border-left:4px solid #64748b;}
.th-slate .sec-icon{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);color:#475569;}
.th-slate .sec-title{color:#334155;}

/* ════════════════════════════════
   FORM INPUTS
════════════════════════════════ */
.fi{
    width:100%;
    border:1.5px solid #dde3f5;
    border-radius:10px;
    padding:.52rem .8rem;
    font-size:.875rem;
    color:#1a1f36;
    background:#fcfcff;
    outline:none;
    transition:border-color .18s,box-shadow .18s,background .18s;
    font-family:'Inter',sans-serif;
}
.fi::placeholder{color:#b8c0d8;}
.fi:focus{
    border-color:#2c3ea8;
    box-shadow:0 0 0 3.5px rgba(44,62,168,.12);
    background:#fff;
}
.fi.err{border-color:#f43f5e;box-shadow:0 0 0 3px rgba(244,63,94,.1);}
.fi[readonly]{background:#f4f6ff;color:#64748b;border-color:#e8ecf8;cursor:default;}
.fi-label{
    display:block;font-size:.68rem;font-weight:700;color:#64748b;
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;
}
.fi-icon-wrap{position:relative;}
.fi-icon-wrap .fi{padding-left:2.1rem;}
.fi-icon-wrap .fi-ico{
    position:absolute;left:.72rem;top:50%;transform:translateY(-50%);
    color:#94a3b8;font-size:.75rem;
}
.fi-icon-wrap textarea~.fi-ico{top:.75rem;transform:none;}
.err-txt{
    font-size:.68rem;color:#f43f5e;margin-top:4px;
    display:flex;align-items:center;gap:4px;
    font-weight:500;
}

/* ════════════════════════════════
   QUALIFICATION SWITCHER
════════════════════════════════ */
.qual-switcher{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    background:#ede9fe;
    border-radius:14px;
    padding:5px;
    gap:0;
    border:2px solid #ddd6fe;
    width:fit-content;
    max-width:100%;
}
.qual-tab{
    display:flex !important;
    align-items:center;
    gap:9px;
    padding:11px 28px;
    border-radius:10px;
    cursor:pointer;
    font-size:.88rem;
    font-weight:700;
    color:#5b21b6;
    background:transparent;
    border:none;
    margin:0;
    line-height:1;
    transition:all .22s cubic-bezier(.4,0,.2,1);
    user-select:none;
    white-space:nowrap;
}
.qual-tab i{font-size:.95rem;color:#7c3aed;flex-shrink:0;}
.qual-tab:hover{background:rgba(255,255,255,.6);color:#4c1d95;}
.qual-tab.active{
    background:#fff;
    color:#4c1d95;
    font-weight:800;
    box-shadow:0 3px 14px rgba(124,58,237,.22);
}
.qual-tab.active i{color:#6d28d9;}
.qual-divider{
    width:2px;height:28px;
    background:#ddd6fe;
    border-radius:2px;
    flex-shrink:0;
    margin:0 2px;
}

/* ════════════════════════════════
   PILL RADIOS / CHECKBOXES
════════════════════════════════ */
.pill-wrap{display:flex;flex-wrap:wrap;gap:7px;}
.pill{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 14px;border-radius:20px;cursor:pointer;
    border:1.5px solid #dde3f5;background:#f8f9ff;
    font-size:.8rem;font-weight:500;color:#475569;
    transition:all .15s;user-select:none;
}
.pill:hover{border-color:#7b8ed6;color:#2c3ea8;background:#eef0fb;transform:translateY(-1px);}
.pill.on{
    border-color:#2c3ea8;
    background:linear-gradient(135deg,#eef0fb,#e0e7ff);
    color:#1e2d8a;font-weight:700;
    box-shadow:0 2px 8px rgba(44,62,168,.15);
}
.pill.on-teal{
    border-color:#0891b2;
    background:linear-gradient(135deg,#ecfeff,#cffafe);
    color:#0369a1;font-weight:700;
    box-shadow:0 2px 8px rgba(8,145,178,.15);
}
.pill.on-violet{
    border-color:#7c3aed;
    background:linear-gradient(135deg,#f5f3ff,#ede9fe);
    color:#5b21b6;font-weight:700;
    box-shadow:0 2px 8px rgba(124,58,237,.15);
}

/* ════════════════════════════════
   BRANCH CARDS
════════════════════════════════ */
.br-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:576px){.br-grid{grid-template-columns:repeat(3,1fr);gap:8px;}}
.br-card{
    border:2px solid #e4e8f5;border-radius:14px;
    padding:16px 8px 12px;text-align:center;cursor:pointer;
    background:#f8f9ff;
    transition:all .2s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column;align-items:center;gap:6px;
    position:relative;overflow:hidden;
}
.br-card::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(44,62,168,.04),transparent);
    opacity:0;transition:opacity .2s;
}
.br-card:hover{
    border-color:#7b8ed6;background:#eef0fb;
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(44,62,168,.13);
}
.br-card:hover::after{opacity:1;}
.br-card.on{
    border-color:#1e2d8a;
    background:linear-gradient(135deg,#eef0fb,#e0e7ff);
    box-shadow:0 0 0 3px rgba(44,62,168,.15),0 6px 18px rgba(44,62,168,.12);
    transform:translateY(-2px);
}
.br-ring{
    width:44px;height:44px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:.72rem;font-weight:800;letter-spacing:.02em;
    background:#e8eaff;color:#2c3ea8;
    transition:all .2s;
    box-shadow:0 2px 8px rgba(44,62,168,.1);
}
.br-card.on .br-ring{
    background:linear-gradient(135deg,#1e2d8a,#2563eb);
    color:#fff;
    box-shadow:0 4px 12px rgba(30,45,138,.35);
}
.br-code{font-size:.78rem;font-weight:700;color:#334155;transition:color .15s;}
.br-card.on .br-code{color:#1e2d8a;}
.br-name{font-size:.6rem;color:#94a3b8;line-height:1.3;text-align:center;}

/* ════════════════════════════════
   RESULT BOXES
════════════════════════════════ */
.res-box{
    border-radius:16px;padding:20px 14px;text-align:center;
    border:1.5px solid;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    box-shadow:0 4px 16px rgba(0,0,0,.05);
    transition:transform .15s;
}
.res-box:hover{transform:translateY(-2px);}
.res-val{
    font-family:'Poppins',sans-serif;
    font-size:1.85rem;font-weight:800;line-height:1;
}
.res-lbl{font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.6;}
.res-sub{font-size:.65rem;opacity:.45;margin-top:1px;}

/* ════════════════════════════════
   CAPTCHA
════════════════════════════════ */
.cap-box{
    background:repeating-linear-gradient(
        45deg,#f0f3ff,#f0f3ff 8px,#e8eaf5 8px,#e8eaf5 16px);
    border:2px dashed #b0b9d4;
    border-radius:12px;
    padding:11px 24px;
    font-family:'Courier New',monospace;
    font-size:1.3rem;font-weight:700;letter-spacing:.35em;
    color:#1e2d8a;user-select:none;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.04);
}

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */
.btn-submit{
    background:linear-gradient(135deg,#1e2d8a 0%,#2563eb 100%);
    color:#fff;border:none;border-radius:12px;
    padding:.72rem 2rem;font-size:.9rem;font-weight:700;
    box-shadow:0 5px 18px rgba(37,99,235,.4);
    transition:all .2s cubic-bezier(.4,0,.2,1);
    display:inline-flex;align-items:center;gap:8px;
    letter-spacing:.02em;
}
.btn-submit:hover{
    background:linear-gradient(135deg,#151f5e 0%,#1d4ed8 100%);
    box-shadow:0 8px 26px rgba(37,99,235,.48);
    transform:translateY(-2px);
}
.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-outline{
    background:#fff;color:#475569;
    border:1.5px solid #dde3f5;border-radius:12px;
    padding:.62rem 1.2rem;font-size:.83rem;font-weight:600;
    transition:all .15s;display:inline-flex;align-items:center;gap:6px;
}
.btn-outline:hover{border-color:#7b8ed6;color:#2c3ea8;background:#f0f4ff;transform:translateY(-1px);}
.btn-reset{
    background:#fff5f5;color:#dc2626;
    border:1.5px solid #fecaca;border-radius:12px;
    padding:.62rem 1.2rem;font-size:.83rem;font-weight:600;
    transition:all .15s;display:inline-flex;align-items:center;gap:6px;
}
.btn-reset:hover{background:#fef2f2;border-color:#fca5a5;transform:translateY(-1px);}
.btn-pdf{
    background:linear-gradient(135deg,#dc2626,#ef4444);
    color:#fff;border:none;border-radius:12px;
    padding:.72rem 2rem;font-size:.9rem;font-weight:700;
    box-shadow:0 5px 18px rgba(220,38,38,.35);
    transition:all .2s;display:inline-flex;align-items:center;gap:8px;
    text-decoration:none;cursor:pointer;
}
.btn-pdf:hover{
    background:linear-gradient(135deg,#b91c1c,#dc2626);
    transform:translateY(-2px);color:#fff;
    box-shadow:0 8px 24px rgba(220,38,38,.45);
}
.btn-print{
    background:linear-gradient(135deg,#059669,#10b981);
    color:#fff;border:none;border-radius:12px;
    padding:.72rem 2rem;font-size:.9rem;font-weight:700;
    box-shadow:0 5px 18px rgba(5,150,105,.35);
    transition:all .2s;display:inline-flex;align-items:center;gap:8px;
}
.btn-print:hover{
    background:linear-gradient(135deg,#047857,#059669);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(5,150,105,.4);
}

/* ════════════════════════════════
   SPINNER
════════════════════════════════ */
.spin{
    width:16px;height:16px;
    border:2.5px solid rgba(255,255,255,.35);
    border-top-color:#fff;border-radius:50%;
    animation:sp .7s linear infinite;display:inline-block;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ════════════════════════════════
   SUCCESS PANEL
════════════════════════════════ */
.success-panel{
    background:#fff;border-radius:20px;
    border:2px solid #a7f3d0;
    box-shadow:0 8px 40px rgba(5,150,105,.12);
    padding:48px 32px;text-align:center;
    position:relative;overflow:hidden;
}
.success-panel::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,#059669,#10b981,#34d399);
}
.success-icon-wrap{
    width:80px;height:80px;border-radius:50%;
    background:linear-gradient(135deg,#d1fae5,#a7f3d0);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 22px;
    box-shadow:0 0 0 10px rgba(167,243,208,.25),0 8px 24px rgba(5,150,105,.2);
}

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.footer-bottom{
    background:linear-gradient(90deg,#0f1b6b 0%,#1a237e 60%,#1565c0 100%);
    padding:14px 0;text-align:center;
    border-top:3px solid #e31e25;
    margin-top:16px;
}
.footer-copyright{font-size:.75rem;color:rgba(255,255,255,.7);letter-spacing:.02em;}

/* ════════════════════════════════
   MOBILE STICKY BAR
════════════════════════════════ */
@media(max-width:767px){
    .mob-bar{
        position:fixed;bottom:0;left:0;right:0;z-index:1040;
        padding:.65rem 1rem;
        background:rgba(255,255,255,.97);
        backdrop-filter:blur(12px);
        border-top:1px solid #eaecf5;
        box-shadow:0 -4px 24px rgba(0,0,0,.10);
    }
    .main-wrap{padding-bottom:74px;}
    .hdr-logo{max-height:60px;width:auto;}
}

/* ════════════════════════════════
   PRINT
════════════════════════════════ */
@media print{
    .no-print,.site-header,.site-footer,.mob-bar,
    .btn-submit,.btn-outline,.btn-reset,
    .prog-card,button[type=button]{display:none!important;}
    body{background:#fff!important;}
    .sec-card{
        box-shadow:none!important;
        border:1px solid #ccc!important;
        border-radius:4px!important;
        break-inside:avoid;
    }
    .sec-hd{background:#f5f5f5!important;border-left:2px solid #666!important;}
    .print-header{display:block!important;}
    .main-wrap{padding-bottom:0!important;}
}

/* Print header (hidden on screen) */
.print-header{display:none;}