/* =========================================================
   MODAL BACKDROP
========================================================= */

.post-job-modal-wrapper {

    background: rgba(15, 23, 42, 0.25);

}


/* =========================================================
   MODAL
========================================================= */

.post-job-modal {

    border: 0;

    border-radius: 24px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, .28);

}


/* =========================================================
   HEADER
========================================================= */

.post-job-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 24px 30px;

    background: #ffffff;

    border-bottom: 1px solid #edf0f3;

}


.post-job-header-left {

    display: flex;

    align-items: center;

    gap: 15px;

}


.post-job-main-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    color: #ffffff;

    font-size: 24px;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #b91c1c
        );

    box-shadow:
        0 10px 25px rgba(220, 38, 38, .28);

}


.post-job-header-title {

    color: #111827;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.2;

}


.post-job-header-subtitle {

    margin-top: 4px;

    color: #6b7280;

    font-size: 13px;

}


.post-job-close {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 12px;

    background: #f3f4f6;

    color: #6b7280;

    font-size: 15px;

    transition: .2s ease;

}


.post-job-close:hover {

    background: #fee2e2;

    color: #dc2626;

}


/* =========================================================
   BODY
========================================================= */

.post-job-body {

    padding: 28px 30px 25px;

}


/* =========================================================
   HERO
========================================================= */

.post-job-hero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 210px;

    padding: 30px 34px;

    margin-bottom: 22px;

    border-radius: 20px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            #991b1b 0%,
            #dc2626 50%,
            #ef4444 100%
        );

}


/* Decorative circles */

.post-job-hero::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    top: -130px;

    border-radius: 50%;

    background: rgba(255,255,255,.08);

}


.post-job-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(0,0,0,.08);

}


.post-job-hero-text {

    position: relative;

    z-index: 2;

    max-width: 610px;

}


.post-job-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

    color: rgba(255,255,255,.82);

}


.post-job-pulse {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 5px rgba(255,255,255,.15);

}


.post-job-hero h2 {

    margin: 0;

    font-size: 29px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.5px;

}


.post-job-hero h2 strong {

    font-weight: 900;

}


.post-job-hero p {

    max-width: 570px;

    margin: 12px 0 17px;

    color: rgba(255,255,255,.82);

    font-size: 13px;

    line-height: 1.65;

}


.post-job-hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 18px;

}


.post-job-hero-features span {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 10.5px;

    font-weight: 600;

    color: rgba(255,255,255,.92);

}


.post-job-hero-features i {

    font-size: 12px;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.post-job-hero-visual {

    position: relative;

    z-index: 2;

    width: 145px;
    height: 145px;

    flex: 0 0 auto;

}


.post-job-visual-circle {

    position: absolute;

    right: 5px;
    top: 5px;

    width: 115px;
    height: 115px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.13);

    border: 1px solid rgba(255,255,255,.18);

    font-size: 42px;

}


.post-job-visual-users {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: #ffffff;

    color: #dc2626;

    font-size: 22px;

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

}


/* =========================================================
   PRIMARY ACTION
========================================================= */

.post-job-primary-action {

    display: flex;

    align-items: center;

    gap: 17px;

    min-height: 92px;

    padding: 18px 21px;

    border: 2px solid #dc2626;

    border-radius: 17px;

    text-decoration: none;

    color: #111827;

    background:
        linear-gradient(
            135deg,
            #fff7f7,
            #ffffff
        );

    box-shadow:
        0 8px 25px rgba(220,38,38,.09);

    transition: .2s ease;

}


.post-job-primary-action:hover {

    color: #111827;

    transform: translateY(-2px);

    background: #fff5f5;

    box-shadow:
        0 14px 32px rgba(220,38,38,.15);

}


.post-job-primary-icon {

    width: 52px;
    height: 52px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #dc2626;

    color: #ffffff;

    font-size: 22px;

    box-shadow:
        0 7px 17px rgba(220,38,38,.25);

}


.post-job-primary-content {

    flex: 1;

}


.post-job-primary-title {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 4px;

    font-size: 16px;

    font-weight: 800;

}


.post-job-primary-text {

    color: #6b7280;

    font-size: 12px;

}


.post-job-badge {

    padding: 4px 8px;

    border-radius: 20px;

    background: #dc2626;

    color: #ffffff;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .5px;

}


.post-job-primary-arrow {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #fee2e2;

    color: #dc2626;

    font-size: 17px;

    transition: .2s ease;

}


.post-job-primary-action:hover
.post-job-primary-arrow {

    background: #dc2626;

    color: #ffffff;

    transform: translateX(3px);

}


/* =========================================================
   SECONDARY ACTIONS
========================================================= */

.post-job-secondary-action {

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 78px;

    padding: 14px 15px;

    border: 1px solid #e5e7eb;

    border-radius: 15px;

    text-decoration: none;

    color: #111827;

    background: #ffffff;

    transition: .2s ease;

}


.post-job-secondary-action:hover {

    color: #111827;

    border-color: #d1d5db;

    transform: translateY(-2px);

    box-shadow:
        0 9px 22px rgba(15,23,42,.07);

}


.post-job-secondary-icon {

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #f3f4f6;

    color: #374151;

}


.post-job-secondary-icon.pricing {

    background: #fef3c7;

    color: #b45309;

}


.post-job-secondary-icon.support {

    background: #eff6ff;

    color: #2563eb;

}


.post-job-secondary-content {

    flex: 1;

    min-width: 0;

}


.post-job-secondary-content strong {

    display: block;

    margin-bottom: 3px;

    font-size: 12.5px;

}


.post-job-secondary-content span {

    display: block;

    color: #6b7280;

    font-size: 10.5px;

}


.post-job-secondary-action > i {

    color: #9ca3af;

    font-size: 12px;

}


/* =========================================================
   TRUST
========================================================= */

.post-job-trust-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-top: 21px;

    padding-top: 17px;

    border-top: 1px solid #eef0f3;

}


.post-job-trust-row div {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #6b7280;

    font-size: 10.5px;

    font-weight: 600;

}


.post-job-trust-row i {

    color: #16a34a;

    font-size: 13px;

}


.post-job-trust-row > span {

    width: 1px;

    height: 15px;

    background: #e5e7eb;

}


/* =========================================================
   FOOTER
========================================================= */

.post-job-footer {

    padding: 13px 30px;

    text-align: center;

    border-top: 1px solid #eef0f3;

    background: #f8fafc;

    color: #64748b;

    font-size: 10.5px;

}


.post-job-footer i {

    margin-right: 4px;

    color: #3b82f6;

}


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

@media (max-width: 767.98px) {

    .post-job-header {

        padding: 20px;

    }


    .post-job-body {

        padding: 20px;

    }


    .post-job-hero {

        padding: 24px;

    }


    .post-job-hero h2 {

        font-size: 23px;

    }


    .post-job-hero-visual {

        display: none;

    }


    .post-job-trust-row {

        gap: 10px;

        flex-wrap: wrap;

    }


    .post-job-trust-row > span {

        display: none;

    }

}


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

@media (max-width: 480px) {

    .post-job-modal {

        border-radius: 18px;

    }


    .post-job-header {

        padding: 17px;

    }


    .post-job-main-icon {

        width: 46px;
        height: 46px;

        font-size: 19px;

    }


    .post-job-header-title {

        font-size: 19px;

    }


    .post-job-header-subtitle {

        font-size: 10px;

    }


    .post-job-body {

        padding: 17px;

    }


    .post-job-hero {

        min-height: auto;

        padding: 21px;

    }


    .post-job-hero h2 {

        font-size: 21px;

    }


    .post-job-hero p {

        font-size: 11px;

    }


    .post-job-hero-features {

        display: none;

    }


    .post-job-primary-action {

        min-height: 82px;

        padding: 14px;

    }


    .post-job-primary-icon {

        width: 44px;
        height: 44px;

        font-size: 18px;

    }


    .post-job-primary-title {

        font-size: 13px;

    }


    .post-job-primary-text {

        font-size: 10px;

    }


    .post-job-badge {

        display: none;

    }


    .post-job-primary-arrow {

        width: 36px;
        height: 36px;

    }


    .post-job-secondary-action {

        min-height: 70px;

    }


    .post-job-secondary-content span {

        font-size: 9.5px;

    }


    .post-job-trust-row {

        justify-content: center;

    }


    .post-job-trust-row div {

        font-size: 9.5px;

    }


    .post-job-footer {

        padding: 11px 15px;

        font-size: 9.5px;

    }

}