/* ==========================================================================
   NEW PARAMETER PSYCHOMETRIC TEST — FRONTEND STYLES
   Colors are set as CSS variables below — change these 3-4 values to
   exactly match newparameter.com's brand colors (open their site, use
   browser inspector on a button/heading to copy exact hex codes).
   ========================================================================== */

:root{
    --np-primary:   #0b2f5c;   /* deep navy blue - header / primary buttons */
    --np-accent:    #f5a623;   /* gold/orange accent - highlights, CTA */
    --np-accent-2:  #2fa84f;   /* green - success states */
    --np-bg:        #f7f9fc;
    --np-card-bg:   #ffffff;
    --np-text:      #1c2b3a;
    --np-muted:     #6b7a8d;
    --np-border:    #e3e8ef;
    --np-radius:    12px;
}

.np-test-wrapper{
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    font-family: 'Poppins','Segoe UI',Arial,sans-serif;
    color: var(--np-text);
    background: var(--np-bg);
}

.np-test-header{
    display:flex;
    align-items:center;
    gap:16px;
    background: linear-gradient(135deg, var(--np-primary), #133f7a);
    color:#fff;
    padding:24px;
    border-radius: var(--np-radius);
    margin-bottom: 28px;
    box-shadow: 0 8px 24px rgba(11,47,92,0.18);
}
.np-test-logo{
    width:56px;height:56px;flex-shrink:0;
    background: var(--np-accent);
    color:#1c2b3a;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    font-weight:700;font-size:20px;
}
.np-header-eyebrow{ margin:0 0 2px; font-size:13px; font-weight:600; opacity:.85; letter-spacing:.5px; }
.np-test-header h1{ margin:0; font-size:24px; }
.np-header-tagline{ margin:4px 0 0; opacity:.85; letter-spacing:1px; font-size:13px; text-transform:uppercase; }

.np-intro-text{
    text-align:center;
    color: var(--np-muted);
    font-size:14px;
    margin: 0 0 18px;
    padding: 0 10px;
}
.np-intro-text p{ margin:0; }

.np-howto-box{
    background:#fff8e8;
    border:1px solid #f3d9a0;
    border-radius: var(--np-radius);
    padding:14px 18px;
    margin-bottom:22px;
    font-size:13.5px;
    color:#6b5220;
}
.np-howto-box strong{ display:block; margin-bottom:4px; color:#8a5b00; font-size:13px; text-transform:uppercase; letter-spacing:.4px; }
.np-howto-box p{ margin:0; line-height:1.5; }

.np-test-section{
    background: var(--np-card-bg);
    border:1px solid var(--np-border);
    border-radius: var(--np-radius);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.np-test-section h2{
    margin:0 0 16px;
    font-size:18px;
    color: var(--np-primary);
    border-left: 4px solid var(--np-accent);
    padding-left:10px;
}

.np-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
}
@media(max-width:640px){ .np-grid{ grid-template-columns: 1fr; } }

.np-field{ display:flex; flex-direction:column; }
.np-field label{ font-size:13px; font-weight:600; margin-bottom:6px; color: var(--np-text); }
.np-field .req{ color:#e03131; }
.np-field input,
.np-field select{
    padding:10px 12px;
    border:1px solid var(--np-border);
    border-radius:8px;
    font-size:14px;
    background:#fff;
}
.np-field input:focus,
.np-field select:focus{
    outline:none;
    border-color: var(--np-primary);
    box-shadow: 0 0 0 3px rgba(11,47,92,0.12);
}

.np-question{
    padding:16px 0;
    border-bottom:1px solid var(--np-border);
}
.np-question:last-child{ border-bottom:none; }
.np-q-text{ font-weight:600; margin:0 0 10px; }

.np-options{ display:flex; flex-direction:column; gap:8px; }
.np-option{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--np-border);
    border-radius:8px;
    cursor:pointer;
    transition: all .15s ease;
    font-size:14px;
}
.np-option:hover{ border-color: var(--np-accent); background:#fffaf0; }
.np-option input{ margin-top:3px; accent-color: var(--np-primary); }
.np-option:has(input:checked){
    border-color: var(--np-primary);
    background:#eef4fc;
}

.np-test-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background: var(--np-card-bg);
    border:1px solid var(--np-border);
    border-radius: var(--np-radius);
    padding:18px 22px;
    position:sticky;
    bottom:12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
#np-progress-text{ font-size:13px; color: var(--np-muted); font-weight:600; }

#np-submit-btn{
    background: var(--np-accent);
    color:#1c2b3a;
    border:none;
    padding:12px 28px;
    font-size:15px;
    font-weight:700;
    border-radius:8px;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
#np-submit-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(245,166,35,0.4); }
#np-submit-btn:disabled{ opacity:.6; cursor:not-allowed; }

.np-error{
    margin-top:12px;
    background:#fdecec;
    color:#c92a2a;
    border:1px solid #f3b3b3;
    padding:10px 14px;
    border-radius:8px;
    font-size:14px;
}

/* Success modal */
.np-modal-overlay{
    position:fixed; inset:0;
    background:rgba(11,20,35,0.55);
    display:flex; align-items:center; justify-content:center;
    z-index:99999;
    padding:20px;
}
.np-modal-box{
    background:#fff;
    border-radius:16px;
    padding:36px 30px;
    max-width:420px;
    width:100%;
    text-align:center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: npPop .25s ease;
}
@keyframes npPop{ from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
.np-modal-icon{
    width:64px;height:64px;
    background: var(--np-accent-2);
    color:#fff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:30px;
    margin:0 auto 16px;
}
.np-modal-box h3{ margin:0 0 10px; color: var(--np-primary); font-size:19px; }
.np-modal-box p{ margin:0 0 22px; color: var(--np-muted); font-size:14px; line-height:1.5; }
#np-modal-close-btn{
    background: var(--np-primary);
    color:#fff;
    border:none;
    padding:10px 26px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}