/* =====================================================
   JOB POPUP STYLES
   File : job-popup.css
   Used : includes/job-popup.php

   FEATURES:
   - Beautiful animated running border
   - 2px gradient border
   - Blue / Cyan / Purple colour combination
   - Soft glowing effect
   - Responsive design
   ===================================================== */


/* =====================================================
   POPUP OVERLAY
===================================================== */

.popup-overlay {

    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.70);

    z-index: 99999;

    justify-content: center;
    align-items: center;

    overflow-y: auto;

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);
}


/* =====================================================
   POPUP BOX
===================================================== */

.popup-box {

    position: relative;

    width: 100%;
    max-width: 400px;

    padding: 40px 30px;

    background:
        #ffffff;

    border-radius: 25px;

    overflow: hidden;

    isolation: isolate;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.30);

    animation:
        popupFade 0.4s ease;
}


/* =====================================================
   ANIMATED RUNNING BORDER
===================================================== */

.popup-box::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 2px;

    border-radius: 25px;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00d4ff,
            #7b2cff,
            #ff3cac,
            #2f54eb
        );

    background-size:
        400% 400%;

    animation:
        runningBorder 5s linear infinite;

    /*
       Cut out the centre so that only
       the 2px border remains visible.
    */

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:
        xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    mask-composite:
        exclude;

    pointer-events: none;

    z-index: -1;
}


/* =====================================================
   OUTER GLOW
===================================================== */

.popup-box::after {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 28px;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00d4ff,
            #7b2cff,
            #ff3cac,
            #2f54eb
        );

    background-size:
        400% 400%;

    animation:
        runningBorder 5s linear infinite;

    filter:
        blur(10px);

    opacity:
        0.30;

    pointer-events:
        none;

    z-index: -2;
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.close-btn {

    position: absolute;

    top: 13px;
    right: 17px;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    color:
        #555;

    background:
        rgba(47, 84, 235, 0.06);

    transition:
        all 0.3s ease;

    z-index: 10;
}


/* =====================================================
   CLOSE BUTTON HOVER
===================================================== */

.close-btn:hover {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #7b2cff
        );

    transform:
        rotate(90deg)
        scale(1.08);

    box-shadow:
        0 5px 15px
        rgba(47, 84, 235, 0.30);
}


/* =====================================================
   POPUP TITLE
===================================================== */

.popup-box h2 {

    margin: 0 35px 15px 0;

    text-align:
        center;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        32px;

    font-weight:
        700;

    line-height:
        1.2;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00a8ff,
            #7b2cff
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;
}


/* =====================================================
   POPUP DESCRIPTION
===================================================== */

.popup-box p {

    margin:
        0 0 25px;

    text-align:
        center;

    color:
        #666666;

    font-family:
        'Roboto',
        sans-serif;

    font-size:
        15px;

    line-height:
        1.7;
}


/* =====================================================
   FORM
===================================================== */

.popup-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;
}


/* =====================================================
   INPUT FIELDS
===================================================== */

.popup-form input {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        14px 16px;

    border:
        1px solid #d9dfe8;

    border-radius:
        12px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #333333;

    font-family:
        'Roboto',
        sans-serif;

    font-size:
        15px;

    transition:
        all 0.3s ease;
}


/* =====================================================
   INPUT PLACEHOLDER
===================================================== */

.popup-form input::placeholder {

    color:
        #999999;
}


/* =====================================================
   INPUT FOCUS
===================================================== */

.popup-form input:focus {

    border-color:
        #2f54eb;

    box-shadow:
        0 0 0 4px
        rgba(47, 84, 235, 0.10);

    transform:
        translateY(-1px);
}


/* =====================================================
   FILE INPUT
===================================================== */

.popup-form input[type="file"] {

    padding:
        10px;

    cursor:
        pointer;

    background:
        #f8faff;
}


/* =====================================================
   FILE SELECTOR BUTTON
===================================================== */

.popup-form input[type="file"]::file-selector-button {

    margin-right:
        12px;

    padding:
        9px 16px;

    border:
        none;

    border-radius:
        8px;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

    color:
        #ffffff;

    font-family:
        'Roboto',
        sans-serif;

    font-size:
        14px;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        all 0.3s ease;
}


/* =====================================================
   FILE BUTTON HOVER
===================================================== */

.popup-form input[type="file"]::file-selector-button:hover {

    background:
        linear-gradient(
            135deg,
            #1d3fcf,
            #2f54eb
        );

    transform:
        translateY(-1px);
}


/* =====================================================
   SUBMIT BUTTON
===================================================== */

.popup-form button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        52px;

    padding:
        15px 20px;

    border:
        none;

    border-radius:
        40px;

    cursor:
        pointer;

    color:
        #ffffff;

    background:
        linear-gradient(
            90deg,
            #2f54eb,
            #00a8ff,
            #7b2cff
        );

    background-size:
        200% 100%;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        16px;

    font-weight:
        600;

    box-shadow:
        0 8px 22px
        rgba(47, 84, 235, 0.28);

    transition:
        all 0.35s ease;
}


/* =====================================================
   SUBMIT BUTTON HOVER
===================================================== */

.popup-form button:hover {

    background-position:
        100% 0;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(47, 84, 235, 0.38);
}


/* =====================================================
   SUBMIT BUTTON ACTIVE
===================================================== */

.popup-form button:active {

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 15px
        rgba(47, 84, 235, 0.25);
}


/* =====================================================
   RUNNING BORDER ANIMATION
===================================================== */

@keyframes runningBorder {

    0% {

        background-position:
            0% 50%;
    }

    50% {

        background-position:
            100% 50%;
    }

    100% {

        background-position:
            0% 50%;
    }
}


/* =====================================================
   POPUP ENTRY ANIMATION
===================================================== */

@keyframes popupFade {

    from {

        opacity:
            0;

        transform:
            translateY(-25px)
            scale(0.96);
    }

    to {

        opacity:
            1;

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


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 768px) {

    .popup-overlay {

        padding:
            18px;
    }


    .popup-box {

        max-width:
            390px;

        padding:
            36px 25px;

        border-radius:
            23px;
    }


    .popup-box::before {

        border-radius:
            23px;
    }


    .popup-box::after {

        border-radius:
            26px;
    }


    .popup-box h2 {

        font-size:
            29px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 480px) {

    .popup-overlay {

        padding:
            15px;
    }


    .popup-box {

        max-width:
            100%;

        padding:
            32px 20px;

        border-radius:
            20px;
    }


    .popup-box::before {

        border-radius:
            20px;
    }


    .popup-box::after {

        border-radius:
            23px;
    }


    .popup-box h2 {

        margin-right:
            32px;

        font-size:
            26px;
    }


    .popup-box p {

        font-size:
            14px;

        line-height:
            1.6;
    }


    .popup-form {

        gap:
            15px;
    }


    .popup-form input {

        padding:
            13px 14px;

        font-size:
            14px;
    }


    .popup-form button {

        min-height:
            50px;

        padding:
            14px;

        font-size:
            15px;
    }


    .close-btn {

        width:
            34px;

        height:
            34px;

        top:
            11px;

        right:
            12px;

        font-size:
            27px;
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 360px) {

    .popup-box {

        padding:
            30px 16px;
    }


    .popup-box h2 {

        font-size:
            24px;
    }


    .popup-box p {

        font-size:
            13px;
    }
}


/* =====================================================
   REDUCED MOTION ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .popup-box,
    .popup-box::before,
    .popup-box::after {

        animation:
            none;
    }

    .close-btn,
    .popup-form input,
    .popup-form button {

        transition:
            none;
    }
}