.vap-assessment-wrap,
.vap-assessment-wrap * {
    box-sizing: border-box;
}

.vap-assessment-wrap {
    width: 100%;
    min-height: 760px;
    padding: 0px 0px;
    font-family: 'Poppins', Arial, sans-serif;
    background:#ffffff;
    color: #16323a;
}

.vap-card {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(61,118,136,0.16);
    border-radius: 34px;
    padding: 36px;
    box-shadow: 0 34px 90px rgba(20,58,68,0.16);
    position: relative;
    overflow: hidden;
}

.vap-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: -130px;
    right: -110px;
    border-radius: 50%;
    background: var(--vap-primary);
    opacity: 0.08;
}

.vap-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.vap-logo-mark {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #3D7688;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 12px 28px rgba(61,118,136,0.28);
}

.vap-company-logo{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:contain;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    padding:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    flex-shrink:0;
}

.vap-brand h2 {
    margin: 0;
    color: #3D7688;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 800;
}

.vap-brand p {
    margin: 4px 0 0;
    color: #6c7f86;
    font-size: 14px;
    font-weight: 500;
}

.vap-progress {
    height: 9px;
    background: #e5f0f2;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 36px;
    position: relative;
    z-index: 1;
}

.vap-progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #3D7688, var(--vap-secondary));
    transition: width 0.35s ease;
}

.vap-form {
    position: relative;
    z-index: 1;
}

.vap-step {
    display: none;
    animation: vapFadeUp 0.35s ease;
}

.vap-step.active {
    display: block;
}

@keyframes vapFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vap-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 999px;
    background: #e9f4f6;
    color: #3D7688;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.vap-step h1 {
    margin: 0 0 18px;
    max-width: 100%;
    color: #15323a;
    font-size: 36px;
    line-height: 1.12;
    letter-spacing: -1.3px;
    font-weight: 800;
}

.vap-step h2 {
    margin: 0 0 22px;
    max-width: 100%;
    color: #15323a;
    font-size: 30px;
    line-height: 1.28;
    letter-spacing: -0.7px;
    font-weight: 700;
}

.vap-step p {
    max-width: 1200px;
    color: #536b72;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 22px;
}

.vap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 8px;
}

.vap-grid input {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border: 1px solid #d6e5e8;
    border-radius: 16px;
    background: #ffffff;
    color: #15323a;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: 0.25s ease;
}

.vap-grid input:focus {
    border-color: #3D7688;
    box-shadow: 0 0 0 4px rgba(61,118,136,0.10);
}

.vap-options {
    display: grid;
    gap: 13px;
    margin-top: 22px;
}

.vap-option {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid #dce9eb;
    border-radius: 18px;
    background: #ffffff;
    color: #203b43;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.25s ease;
}

.vap-option:hover {
    border-color: #3D7688;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(33, 79, 91, 0.08);
}

.vap-option input {
    accent-color: #3D7688;
    width: 17px;
    height: 17px;
}

.vap-option strong {
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #edf6f7;
    color: #3D7688;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.vap-option:has(input:checked) {
    border-color: #3D7688;
    background: #f2fafb;
    box-shadow: 0 0 0 4px rgba(61,118,136,0.08);
}

.vap-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}

.vap-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    min-height: 52px;
    padding: 14px 30px;
    background: #3D7688;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(61,118,136,0.28);
    transition: 0.25s ease;
}

.vap-btn:hover {
    transform: translateY(-2px);
    background: #315f6d;
    color: #ffffff;
}

.vap-btn.vap-ghost {
    background: #eef6f7;
    color: #3D7688;
    box-shadow: none;
}

.vap-btn.vap-ghost:hover {
    background: #e2f0f2;
    color: #315f6d;
}

.vap-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.vap-thankyou {
    text-align: center;
    padding: 26px 0 10px;
}

.vap-thankyou .vap-tag {
    margin-left: auto;
    margin-right: auto;
}

.vap-thankyou h2 {
    margin-left: auto;
    margin-right: auto;
}

.vap-thankyou p {
    margin-left: auto;
    margin-right: auto;
}

.vap-status {
    margin-top: 16px !important;
    font-weight: 800;
    color: #3D7688 !important;
}

.vap-error {
    padding: 12px 14px;
    margin-top: 16px;
    border-radius: 14px;
    background: #fff2f2;
    border: 1px solid #ffd1d1;
    color: #b42318;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .vap-assessment-wrap {
        padding: 34px 14px;
        min-height: auto;
    }

    .vap-card {
        padding: 24px;
        border-radius: 24px;
    }

    .vap-brand {
        align-items: flex-start;
    }

    .vap-logo-mark {
        width: 50px;
        height: 50px;
    }

    .vap-step h1 {
        font-size: 31px;
        letter-spacing: -0.8px;
    }

    .vap-step h2 {
        font-size: 23px;
        letter-spacing: -0.3px;
    }

    .vap-grid {
        grid-template-columns: 1fr;
    }

    .vap-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .vap-btn {
        width: 100%;
    }
}



.vap-assessment-wrap .vap-btn {
    background: var(--vap-primary) !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--vap-primary) 28%, transparent) !important;
}

.vap-assessment-wrap .vap-btn:hover {
    background: var(--vap-secondary) !important;
}

.vap-assessment-wrap .vap-btn.vap-ghost {
    background: color-mix(in srgb, var(--vap-primary) 10%, white) !important;
    color: var(--vap-primary) !important;
    box-shadow: none !important;
}

.vap-assessment-wrap .vap-btn.vap-ghost:hover {
    background: color-mix(in srgb, var(--vap-primary) 18%, white) !important;
    color: var(--vap-primary) !important;
}


.vap-intro-box{
    background:rgba(61,118,136,.06);
    border:1px solid rgba(61,118,136,.14);
    border-radius:18px;
    padding:18px 20px;
    margin:22px 0 18px;
}

.vap-intro-box p{
    margin:0 0 10px;
    font-size:16px;
    line-height:1.7;
}

.vap-scale-preview{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    margin:18px 0 26px;
}

.vap-scale-card{
    background:#fff;
    border:1px solid rgba(61,118,136,.18);
    border-radius:16px;
    padding:12px 10px;
    text-align:center;
}

.vap-scale-number{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--vap-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin:0 auto 8px;
}

.vap-scale-label{
    font-size:13px;
    font-weight:600;
    color:#2b4b5a;
    line-height:1.35;
}

@media(max-width:768px){
    .vap-scale-preview{
        grid-template-columns:repeat(2,1fr);
    }
}

.vap-brand-logos{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    width:100%;
}

.vap-brand-logo-left,
.vap-brand-logo-right{
    display:flex;
    align-items:center;
}

.vap-brand-logo-left img,
.vap-brand-logo-right img{
    width:290px;
    max-width:100%;
    height:125px;
    object-fit:contain;
}

@media(max-width:768px){
    .vap-brand-logos{
        flex-direction:column;
        align-items:flex-start;
    }

    .vap-brand-logo-left img,
    .vap-brand-logo-right img{
        width:220px;
        height:auto;
    }
}



/* New professional two-logo header */
.vap-brand,
.vap-brand-logos{
    display:none !important;
}

.vap-logo-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    width:100%;
    padding:0px 0 15px;
}

.vap-logo-left,
.vap-logo-right{
    display:flex;
    align-items:center;
}

.vap-logo-left img,
.vap-logo-right img{
    max-width:290px;
    max-height:95px;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}

.vap-progress{
    margin-top:0 !important;
}

@media(max-width:768px){
    .vap-logo-header{
        flex-direction:row;
        gap:16px;
    }

    .vap-logo-left img,
    .vap-logo-right img{
        max-width:120px;
        max-height:42px;
    }
}

/* V1.3 Frontend UI Polish */

.vap-assessment-wrap{
    background:#f8fafc !important;
}

.vap-card{
    max-width:980px !important;
    border-radius:28px !important;
    box-shadow:0 24px 70px rgba(15,48,61,.10) !important;
}

.vap-logo-header{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:center !important;
    gap:30px !important;
}

.vap-logo-left{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
}

.vap-logo-right{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
}

.vap-logo-left img{
    max-height:70px !important;
    max-width:260px !important;
    width:auto !important;
    object-fit:contain !important;
}

.vap-logo-right img{
    max-height:60px !important;
    max-width:260px !important;
    width:auto !important;
    object-fit:contain !important;
}

.vap-progress{
    margin:18px 0 34px !important;
    height:8px !important;
    border-radius:30px !important;
    background:#e5f0f2 !important;
}

.vap-progress-bar{
    border-radius:30px !important;
}

.vap-step h1{
    font-size:44px !important;
    line-height:1.15 !important;
    margin-bottom:22px !important;
}

.vap-step > p{
    font-size:16px !important;
    line-height:1.75 !important;
    max-width:760px !important;
}

.vap-intro-box{
    background:#f8fbfc !important;
    border:1px solid #dbecef !important;
    border-radius:18px !important;
    padding:20px 24px !important;
    margin:24px 0 !important;
}

.vap-intro-box p{
    font-size:16px !important;
    line-height:1.7 !important;
    margin:0 0 10px !important;
}

.vap-intro-box ul{
    margin:0 !important;
    padding-left:22px !important;
}

.vap-intro-box li{
    font-size:15px !important;
    line-height:1.7 !important;
    margin-bottom:6px !important;
}

.vap-scale-preview{
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:12px !important;
    margin:24px 0 30px !important;
}

.vap-scale-card{
    background:#ffffff !important;
    border:1px solid #dbecef !important;
    border-radius:18px !important;
    padding:16px 12px !important;
    text-align:center !important;
    box-shadow:0 8px 22px rgba(15,48,61,.05) !important;
}

.vap-scale-number{
    width:38px !important;
    height:38px !important;
    margin:0 auto 10px !important;
    border-radius:50% !important;
    background:var(--vap-primary) !important;
    color:#fff !important;
    font-weight:800 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.vap-scale-label{
    font-size:14px !important;
    font-weight:700 !important;
    color:#28495a !important;
    line-height:1.35 !important;
}

.vap-btn{
    padding:16px 34px !important;
    border-radius:999px !important;
    font-size:15px !important;
    font-weight:800 !important;
    box-shadow:0 14px 28px rgba(61,118,136,.20) !important;
}

.vap-btn.vap-next::after{
    content:" →";
}

@media(max-width:768px){
    .vap-card{
        max-width:94% !important;
        border-radius:22px !important;
    }

    .vap-logo-header{
        grid-template-columns:1fr 1fr !important;
        gap:12px !important;
    }

    .vap-logo-left img,
    .vap-logo-right img{
        max-width:120px !important;
        max-height:42px !important;
    }

    .vap-step h1{
        font-size:32px !important;
    }

    .vap-scale-preview{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

/* Remove remaining grey background and make card wider */
.vap-assessment-wrap,
.vap-assessment-wrap::before,
.vap-assessment-wrap::after{
    background:#ffffff !important;
    background-image:none !important;
}

.vap-card{
    width:100% !important;
    max-width:1280px !important;
    margin:0 auto !important;
    background:#ffffff !important;
    background-image:none !important;
    box-shadow:none !important;
}

.vap-card::before,
.vap-card::after{
    background:none !important;
    background-image:none !important;
}

/* If theme/page builder section is adding grey */
.vap-assessment-wrap .vap-card,
.vap-assessment-wrap{
    border:0 !important;
}



.vap-card{
    width:100% !important;
    max-width:1280px !important;
    margin:0 auto !important;
    background:#ffffff !important;
    border:1px solid #dbecef !important;
    border-radius:28px !important;
    box-shadow:0 24px 70px rgba(15,48,61,.10) !important;
    padding:40px 40px !important;
}


.vap-step > p{
    max-width:100% !important;
    width:100% !important;
}

.vap-step.active > p{
    max-width:100% !important;
    width:100% !important;
}



/* ===========================
   Mobile Optimization
=========================== */

@media (max-width:768px){

    .vap-card{
        padding:24px 20px !important;
        border-radius:20px !important;
    }

    .vap-step h1{
        font-size:26px !important;
        line-height:1.15 !important;
        margin-bottom:18px !important;
    }

    .vap-step h2{
        font-size:24px !important;
        line-height:1.2 !important;
    }

    .vap-step p{
        font-size:14px !important;
        line-height:1.7 !important;
    }

    .vap-intro-box{
        padding:14px !important;
    }

    .vap-scale-preview{
        gap:8px !important;
    }

    .vap-btn{
        width:100%;
        justify-content:center;
    }

}







/* ===========================
   Question Options Grid
   Desktop: 3 columns
   Mobile: 2 columns
=========================== */

.vap-options{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:14px !important;
}

.vap-option{
    width:100% !important;
    margin:0 !important;
    min-height:64px !important;
    display:flex !important;
    align-items:center !important;
    box-sizing:border-box !important;
}

/* Tablet */
@media (max-width:900px){

    .vap-options{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

}

/* Mobile */
@media (max-width:600px){

    .vap-options{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
    }

    .vap-option{
        min-height:58px !important;
        padding:12px !important;
        font-size:13px !important;
    }

}
















/* ==========================================
   Gender Dropdown - Match Basic Detail Fields
   ========================================== */

.vap-grid select {
    width: 100% !important;
    height: 56px !important;

    padding: 0 50px 0 18px !important;

    border: 1px solid #d5e5e9 !important;
    border-radius: 18px !important;

    background-color: #ffffff !important;

    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #55666d !important;

    box-sizing: border-box !important;
    outline: none !important;
    cursor: pointer;

    /* Remove browser's default arrow */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355666d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    /* Arrow moved slightly left from right edge */
    background-position: right 20px center !important;

    background-size: 14px !important;
}


/* Focus State */
.vap-grid select:focus {
    border-color: var(--vap-primary) !important;
    box-shadow: 0 0 0 2px rgba(61, 118, 136, 0.08) !important;
}


/* Dropdown options */
.vap-grid select option {
    background: #ffffff;
    color: #55666d;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 15px;
}