/* ============================
   UpSkillX Career Counsellor Popup
   Version 1.0
============================= */

:root{
    --primary:#00bcd4;
    --primary-dark:#0097a7;
    --text:#1f2937;
    --border:#d1d5db;
    --bg:#ffffff;
    --overlay:rgba(0,0,0,.65);
}

#careerModal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:var(--overlay);
    backdrop-filter:blur(6px);
    z-index:99999;
    animation:fadeIn .25s ease;
}

#careerModal.active{
    display:flex;
}

.career-modal-box{

    width:95%;
    max-width:720px;

    background:#fff;

    border-radius:18px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.25);

    overflow:hidden;

    animation:popup .35s ease;
}

.career-header{

    background:linear-gradient(
        135deg,
        #002147,
        #004c99
    );

    color:white;

    padding:22px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.career-header h2{

    margin:0;

    font-size:28px;

    font-weight:700;
}

.career-close{

    cursor:pointer;

    font-size:32px;

    line-height:1;

    transition:.2s;
}

.career-close:hover{

    transform:rotate(90deg);
}

.career-body{

    padding:30px;
}

.career-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

.career-field{

    display:flex;

    flex-direction:column;
}

.career-field.full{

    grid-column:1 / -1;
}

.career-field label{

    margin-bottom:8px;

    font-weight:600;

    color:var(--text);
}

.career-field input,
.career-field select,
.career-field textarea{

    padding:13px 15px;

    border:1px solid var(--border);

    border-radius:10px;

    font-size:15px;

    transition:.25s;
}

.career-field textarea{

    resize:vertical;

    min-height:110px;
}

.career-field input:focus,
.career-field select:focus,
.career-field textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(0,188,212,.15);
}

.career-submit{

    margin-top:28px;

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #00bcd4,
        #0097a7
    );

    color:white;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

.career-submit:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0,188,212,.30);
}

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(25px) scale(.95);
    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);
    }
}

@keyframes fadeIn{

    from{

        opacity:0;
    }

    to{

        opacity:1;
    }
}

@media(max-width:768px){

    .career-grid{

        grid-template-columns:1fr;
    }

    .career-body{

        padding:22px;
    }

    .career-header h2{

        font-size:22px;
    }
}