/* ================================================================
   VACANCY PAGES — Stonebridge (Responsive, Professional)
   Scoped entirely to .vacancy-* and #vacancy-application
   Does NOT affect any other page template
   Bootstrap 4 breakpoints: sm 576 | md 768 | lg 992 | xl 1200
   ================================================================ */

/* ─────────────────────────────────────────
   GLOBAL FONT ENFORCEMENT — vacancy cards
   Ensures effra is applied on both the
   listing page (#vacancies) and carousel
───────────────────────────────────────── */
#vacancies .service-block,
#vacancies .service-block h4,
#vacancies .service-block p,
#vacancies .service-block div,
#vacancies .service-block span,
#vacancies .service-block a,
.vacancy-carousel-section .service-block,
.vacancy-carousel-section .service-block h4,
.vacancy-carousel-section .service-block p,
.vacancy-carousel-section .service-block div,
.vacancy-carousel-section .service-block span,
.vacancy-carousel-section .service-block a {
    font-family: effra, sans-serif !important;
}

/* Short description — cap at 14px on both listing and carousel cards */
#vacancies .service-block .desc,
.vacancy-carousel-section .service-block .desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.vacancy-hero {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: center;
}

.vacancy-hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.vacancy-hero .container {
    position: relative;
    z-index: 2;
}

.vacancy-hero h1 {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .vacancy-hero {
        min-height: 190px;
    }

    .vacancy-hero h1 {
        font-size: 2.1rem;
    }
}

@media (max-width: 575px) {
    .vacancy-hero {
        min-height: 140px;
    }

    .vacancy-hero h1 {
        font-size: 1.7rem;
    }
}

/* ─────────────────────────────────────────
   BACK LINK
───────────────────────────────────────── */
.vacancy-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e8611a;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: gap .2s, color .2s;
}

.vacancy-back-link:hover {
    gap: 10px;
    color: #c9521a;
    text-decoration: none;
}

/* ─────────────────────────────────────────
   SECTION NUMBER BADGE
───────────────────────────────────────── */
.vacancy-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8611a;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────
   FORM — LEFT COLUMN
───────────────────────────────────────── */
#vacancy-application .vacancy-form-section {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
}

@media (max-width: 575px) {
    #vacancy-application .vacancy-form-section {
        padding: 1.25rem 1rem;
    }
}

.vacancy-section-header {
    margin-bottom: 1.25rem;
}

.vacancy-section-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .1px;
}

/* Labels */
.vacancy-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #e8611a;
    margin-bottom: 5px;
    letter-spacing: .2px;
    text-transform: uppercase;
}

/* Inputs */
.vacancy-input,
.vacancy-apply-form .form-control {
    border: 1.5px solid #e2e2e2;
    border-radius: 6px;
    padding: 9px 13px;
    font-size: .9rem;
    width: 100%;
    color: #333;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
    -webkit-appearance: none;
}

.vacancy-input:focus,
.vacancy-apply-form .form-control:focus {
    outline: none;
    border-color: #e8611a;
    box-shadow: 0 0 0 3px rgba(232, 97, 26, .1);
}

select.vacancy-input {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}

.vacancy-apply-form .mb-4 {
    margin-bottom: 1.1rem !important;
}

/* Address sub-heading */
.vacancy-form-section h4.vacancy-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #888;
    font-weight: 600;
    border-top: 1px solid #f0f0f0;
    padding-top: 1.25rem;
    margin-top: .5rem;
}

/* Checkboxes */
.vacancy-apply-form .form-check {
    padding-left: 1.6rem;
    margin-bottom: .6rem;
}

.vacancy-apply-form .form-check-input {
    margin-top: .28rem;
    cursor: pointer;
}

.vacancy-apply-form .form-check-label {
    font-size: .875rem;
    color: #555;
    line-height: 1.5;
    cursor: pointer;
}

.vacancy-apply-form .form-check-label a {
    color: #e8611a;
}

/* ─────────────────────────────────────────
   UPLOAD AREA
───────────────────────────────────────── */
.vacancy-upload-area {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background .2s;
    background: #fafafa;
}

.vacancy-upload-area:hover,
.vacancy-upload-area.dragover {
    border-color: #e8611a;
    background: #fff8f5;
}

.vacancy-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.vacancy-upload-placeholder svg {
    color: #ccc;
    display: block;
    margin: 0 auto 8px;
}

.vacancy-upload-placeholder p {
    font-size: .85rem;
    color: #999;
    margin: 0;
}

.vacancy-upload-placeholder p.small {
    font-size: .75rem;
    margin-top: 4px;
}

@media (max-width: 575px) {
    .vacancy-upload-area {
        padding: 1.1rem .75rem;
    }
}

/* ─────────────────────────────────────────
   SUBMIT BUTTON
───────────────────────────────────────── */
.vacancy-submit-btn {
    background: #e8611a;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 13px 24px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .3px;
    width: 100%;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
}

.vacancy-submit-btn:hover {
    background: #c9521a;
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 4px 16px rgba(232, 97, 26, .3);
}

.vacancy-submit-btn:active {
    transform: translateY(0);
}

/* External apply */
.vacancy-external-apply {
    padding: 3rem 1rem;
    text-align: center;
}

.vacancy-external-apply h3 {
    font-size: 1.3rem;
}

@media (max-width: 575px) {
    .vacancy-external-apply {
        padding: 2rem .5rem;
    }

    .vacancy-external-apply .btn {
        width: 100%;
    }
}

/* ─────────────────────────────────────────
   RIGHT SIDEBAR — CARDS
───────────────────────────────────────── */
.vacancy-sidebar-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    margin-bottom: 1.25rem;
}

@media (max-width: 991px) {
    #vacancy-application .col-lg-4 {
        margin-top: 2rem;
    }

    .vacancy-sidebar-card {
        padding: 1.1rem 1.25rem;
    }
}

@media (max-width: 575px) {
    .vacancy-sidebar-card {
        padding: 1rem;
    }
}

.vacancy-sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .15px;
    margin-bottom: 0;
}

.vacancy-sidebar-divider {
    border-color: #f0f0f0;
    margin: .65rem 0 .9rem;
}

/* ─────────────────────────────────────────
   ABOUT MY APPLICATION — CHECKLIST
───────────────────────────────────────── */
.vacancy-confirm-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    margin-bottom: 10px;
}

.vacancy-confirm-list li:last-child {
    margin-bottom: 0;
}

.vacancy-check {
    width: 16px;
    height: 16px;
    color: #e8611a;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ─────────────────────────────────────────
   JOB DETAILS LIST
───────────────────────────────────────── */
.vacancy-job-details li {
    font-size: 14px;
    color: #555;
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f5;
    line-height: 1.5;
}

.vacancy-job-details li:last-child {
    border-bottom: none;
}

.vacancy-job-details strong {
    color: #222;
    font-weight: 600;
}

/* ─────────────────────────────────────────
   FULL JOB DESCRIPTION — ACCORDION
───────────────────────────────────────── */
.vacancy-accordion-header {
    cursor: pointer;
    user-select: none;
    padding-bottom: 0;
}

.vacancy-accordion-header:hover .vacancy-sidebar-title {
    color: #c9521a;
}

.vacancy-accordion-icon {
    font-size: 1.3rem;
    color: #e8611a;
    font-weight: 700;
    line-height: 1;
    transition: transform .2s;
}

/* Description text — keep compact for sidebar */
.vacancy-accordion-body {
    padding-top: .85rem;
}

.vacancy-accordion-body,
.vacancy-accordion-body p,
.vacancy-accordion-body li,
.vacancy-accordion-body span {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #555 !important;
}

.vacancy-accordion-body strong,
.vacancy-accordion-body b {
    font-size: .78rem !important;
    color: #333 !important;
    font-weight: 600 !important;
}

.vacancy-accordion-body h4,
.vacancy-accordion-body h5,
.vacancy-accordion-body h6 {
    font-size: .8rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: .65rem 0 .25rem !important;
    letter-spacing: .15px;
}

.vacancy-accordion-body ul,
.vacancy-accordion-body ol {
    padding-left: 1.1rem;
    margin-bottom: .5rem;
}

.vacancy-accordion-body li {
    margin-bottom: 3px;
}

.vacancy-accordion-body p {
    margin-bottom: .5rem !important;
}

/* ─────────────────────────────────────────
   CAROUSEL (page-template-form-1)
───────────────────────────────────────── */
.vacancy-carousel-section {
    background: #f8f9fa;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
    border-top: 4px solid #e8611a;
}

/* Carousel header responsive */
.vacancy-carousel-section .row.mb-5.align-items-center h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.vacancy-carousel-section .row.mb-5.align-items-center p {
    font-size: .9rem;
    color: #777;
}

@media (max-width: 767px) {
    .vacancy-carousel-section .text-lg-right {
        text-align: left !important;
    }

    .vacancy-carousel-section .btn {
        width: 100%;
        margin-top: .5rem;
    }
}

/* Vacancy cards */
.vacancy-carousel-section .service-block,
.vacancy-grid .service-block {
    border-radius: 8px;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
    box-shadow: none;
    background-color: #ffffff;

}

.vacancy-carousel-section .service-block:hover,
.vacancy-grid .service-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12) !important;
}

.vacancy-carousel-section .job-title,
.vacancy-grid .job-title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .35rem;
}

.vacancy-carousel-section .service-block-upper,
.vacancy-grid .service-block-upper {
    word-break: break-word;
}

.vacancy-carousel-section .text-muted.small,
.vacancy-grid .text-muted.small {
    font-size: .78rem;
    line-height: 1.4;
}

.vacancy-carousel-section .font-weight-bold.text-secondary,
.vacancy-grid .font-weight-bold.text-secondary {
    font-size: .85rem;
}

.vacancy-carousel-section .text-tertiary.small,
.vacancy-grid .text-tertiary.small {
    font-size: .8rem;
    line-height: 1.5;
}

/* ─── Slick Base Theme Styles (replaces slick-theme.min.css) ─ */
/* Scoped so they ONLY apply to the vacancy carousel             */

/* Arrows — base positioning (from slick-theme) */
.vacancy-carousel-section .js-vacancy-carousel .slick-prev,
.vacancy-carousel-section .js-vacancy-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none;
    line-height: 0;
    font-size: 0;
}

/* Dots list — base positioning (from slick-theme) */
.vacancy-carousel-section .js-vacancy-carousel~.slick-dots,
.vacancy-carousel-section .js-vacancy-carousel .slick-dots {
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

.vacancy-carousel-section .js-vacancy-carousel~.slick-dots li,
.vacancy-carousel-section .js-vacancy-carousel .slick-dots li {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.vacancy-carousel-section .js-vacancy-carousel~.slick-dots li button,
.vacancy-carousel-section .js-vacancy-carousel .slick-dots li button {
    display: block;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
}

/* ─── Carousel Track — padding creates the arrow lane ───────── */
/* 55px each side: arrow(42px) + 13px gap = no card overlap      */
.vacancy-carousel-section .vacancy-carousel-track {
    padding: 0 55px;
}

@media (max-width: 575px) {
    .vacancy-carousel-section .vacancy-carousel-track {
        padding: 0 40px;
    }
}

/* Clip cards during slide but allow side shadows to breathe    */
/* padding + negative-margin trick prevents shadow clipping      */
.vacancy-carousel-section .js-vacancy-carousel .slick-list {
    overflow: hidden;
    padding: 12px 4px !important;
    margin: -12px -4px;
}

/* ─── Slick Carousel — Arrows (CSS chevron, no font dependency) ─ */
/* Arrow offset: negative enough that right edge clears slider start*/
/* 55px padding - 50px offset = 5px gap; 50px - 42px(width) = 8px spare */
.vacancy-carousel-section .js-vacancy-carousel .slick-prev,
.vacancy-carousel-section .js-vacancy-carousel .slick-next {
    width: 42px;
    height: 42px;
    background: #e8611a;
    border-radius: 50%;
    z-index: 10;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 3px 10px rgba(232, 97, 26, .35);
}

/* left: -50px → arrow sits at 55-50=5px from track edge, RIGHT edge at 5+42=47px < 55px ✓ */
.vacancy-carousel-section .js-vacancy-carousel .slick-prev {
    left: -50px;
}

.vacancy-carousel-section .js-vacancy-carousel .slick-next {
    right: -50px;
}

@media (max-width: 575px) {
    .vacancy-carousel-section .js-vacancy-carousel .slick-prev {
        left: -35px;
    }

    .vacancy-carousel-section .js-vacancy-carousel .slick-next {
        right: -35px;
    }
}

/* hide the default slick font character completely */
.vacancy-carousel-section .js-vacancy-carousel .slick-prev:before,
.vacancy-carousel-section .js-vacancy-carousel .slick-next:before {
    content: '' !important;
    display: none !important;
}

/* draw a CSS border-chevron via ::after */
.vacancy-carousel-section .js-vacancy-carousel .slick-prev:after,
.vacancy-carousel-section .js-vacancy-carousel .slick-next:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2.5px solid #fff;
    border-right: 2.5px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
}

/* left arrow points left */
.vacancy-carousel-section .js-vacancy-carousel .slick-prev:after {
    transform: translate(-30%, -50%) rotate(-135deg);
}

/* right arrow points right */
.vacancy-carousel-section .js-vacancy-carousel .slick-next:after {
    transform: translate(-70%, -50%) rotate(45deg);
}

.vacancy-carousel-section .js-vacancy-carousel .slick-prev:hover,
.vacancy-carousel-section .js-vacancy-carousel .slick-next:hover {
    background: #c9521a;
    box-shadow: 0 4px 14px rgba(201, 82, 26, .45);
}

.vacancy-carousel-section .js-vacancy-carousel .slick-prev:focus,
.vacancy-carousel-section .js-vacancy-carousel .slick-next:focus {
    outline: none;
}

@media (max-width: 480px) {

    .vacancy-carousel-section .js-vacancy-carousel .slick-prev,
    .vacancy-carousel-section .js-vacancy-carousel .slick-next {
        display: none !important;
    }
}

/* ─── Slick Carousel — Dots (background-color, no font) ─────── */
/* Dots are children of .js-vacancy-carousel (slick-slider)       */
.vacancy-carousel-section .js-vacancy-carousel~.slick-dots,
.vacancy-carousel-section .js-vacancy-carousel .slick-dots {
    bottom: -36px;
    text-align: center;
}

.vacancy-carousel-section .js-vacancy-carousel~.slick-dots li,
.vacancy-carousel-section .js-vacancy-carousel .slick-dots li {
    margin: 0 4px;
    width: auto;
    height: auto;
}

.vacancy-carousel-section .js-vacancy-carousel~.slick-dots li button,
.vacancy-carousel-section .js-vacancy-carousel .slick-dots li button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e8611a;
    opacity: 0.3;
    padding: 0;
    border: none;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: opacity .2s, transform .2s;
}

/* hide slick's default ::before dot character */
.vacancy-carousel-section .js-vacancy-carousel~.slick-dots li button:before,
.vacancy-carousel-section .js-vacancy-carousel .slick-dots li button:before {
    display: none !important;
}

.vacancy-carousel-section .js-vacancy-carousel~.slick-dots li.slick-active button,
.vacancy-carousel-section .js-vacancy-carousel .slick-dots li.slick-active button {
    opacity: 1;
    transform: scale(1.25);
}

.vacancy-carousel-section .slick-dotted.slick-slider {
    margin-bottom: 48px;
}


/* ─────────────────────────────────────────
   FILTER TABS (page-template-form-2)
───────────────────────────────────────── */
.filter-tabs {
    flex-wrap: wrap;
    gap: 8px;
}

.btn-filter {
    background: #fff;
    border: 1.5px solid #e8611a;
    color: #e8611a;
    border-radius: 24px;
    padding: 5px 16px;
    font-size: .8rem;
    font-weight: 600;
    transition: background .2s, color .2s;
    white-space: nowrap;
}

.btn-filter:hover,
.btn-filter.active {
    background: #e8611a;
    color: #fff;
}

.vacancy-no-results {
    color: #6c757d;
    font-size: .9rem;
}

@media (max-width: 575px) {
    .btn-filter {
        font-size: .75rem;
        padding: 4px 12px;
    }
}

/* ─────────────────────────────────────────
   NINJA FORMS — Professional brand override
   Scoped: .vacancy-application-section only
───────────────────────────────────────── */

/* ── Form section header badge (① Personal Details) ── */
.vacancy-application-section .vacancy-section-header {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 1rem;
    margin-bottom: 1.75rem;
}
.vacancy-application-section .vacancy-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #e8611a;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Ninja Forms wrapper reset ── */
.vacancy-application-section .nf-form-cont {
    padding: 0 !important;
    background: transparent !important;
}
.vacancy-application-section .nf-form-cont *,
.vacancy-application-section .nf-form-cont *::before,
.vacancy-application-section .nf-form-cont *::after {
    box-sizing: border-box;
}

/* ── Field container spacing ── */
.vacancy-application-section .nf-form-cont .nf-field-container {
    margin-bottom: 1.25rem !important;
    padding: 0 !important;
}

/* ── Labels ── */
.vacancy-application-section .nf-form-cont .nf-field-label label,
.vacancy-application-section .nf-form-cont .nf-field-label .nf-label-span {
    color: #1b1b1b !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* ── Text / Email / Tel / Number inputs ── */
.vacancy-application-section .nf-form-cont input[type="text"],
.vacancy-application-section .nf-form-cont input[type="email"],
.vacancy-application-section .nf-form-cont input[type="tel"],
.vacancy-application-section .nf-form-cont input[type="number"],
.vacancy-application-section .nf-form-cont input[type="url"],
.vacancy-application-section .nf-form-cont textarea {
    border: 1.5px solid #dde1e7 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: .9rem !important;
    color: #333 !important;
    width: 100% !important;
    background: #fff !important;
    transition: border-color .2s, box-shadow .2s !important;
    -webkit-appearance: none;
}

/* ── Selects ── */
.vacancy-application-section .nf-form-cont select {
    border: 1.5px solid #dde1e7 !important;
    border-radius: 6px !important;
    padding: 10px 36px 10px 14px !important;
    font-size: .9rem !important;
    color: #333 !important;
    width: 100% !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e8611a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .2s, box-shadow .2s !important;
}

/* ── Focus state ── */
.vacancy-application-section .nf-form-cont input[type="text"]:focus,
.vacancy-application-section .nf-form-cont input[type="email"]:focus,
.vacancy-application-section .nf-form-cont input[type="tel"]:focus,
.vacancy-application-section .nf-form-cont input[type="number"]:focus,
.vacancy-application-section .nf-form-cont input[type="url"]:focus,
.vacancy-application-section .nf-form-cont textarea:focus,
.vacancy-application-section .nf-form-cont select:focus {
    border-color: #e8611a !important;
    box-shadow: 0 0 0 3px rgba(232, 97, 26, .12) !important;
    outline: none !important;
}

/* ── File upload ── */
.vacancy-application-section .nf-form-cont .upload-wrap .nf-field-element,
.vacancy-application-section .nf-form-cont input[type="file"] {
    border: 2px dashed #dde1e7 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    background: #fafafa !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: border-color .2s, background .2s !important;
}
.vacancy-application-section .nf-form-cont .upload-wrap .nf-field-element:hover,
.vacancy-application-section .nf-form-cont input[type="file"]:hover {
    border-color: #e8611a !important;
    background: #fff8f5 !important;
}

/* ── Required asterisk ── */
.vacancy-application-section .nf-form-cont .ninja-forms-req-symbol {
    color: #e8611a !important;
}

/* ── Error messages ── */
.vacancy-application-section .nf-form-cont .nf-error-msg,
.vacancy-application-section .nf-form-cont .ninja-forms-field-error {
    color: #c0392b !important;
    font-size: .78rem !important;
    margin-top: 4px !important;
}
.vacancy-application-section .nf-form-cont .field-wrap.nf-error input,
.vacancy-application-section .nf-form-cont .field-wrap.nf-error select,
.vacancy-application-section .nf-form-cont .field-wrap.nf-error textarea {
    border-color: #c0392b !important;
}

/* ── Submit button ── */
.vacancy-application-section .nf-form-cont input[type="submit"],
.vacancy-application-section .nf-form-cont .submit-container input,
.vacancy-application-section .nf-form-cont button[type="submit"] {
    background: #e8611a !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 28px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background .2s, box-shadow .2s, transform .15s !important;
    letter-spacing: .3px !important;
    margin-top: .5rem !important;
}
.vacancy-application-section .nf-form-cont input[type="submit"]:hover,
.vacancy-application-section .nf-form-cont .submit-container input:hover,
.vacancy-application-section .nf-form-cont button[type="submit"]:hover {
    background: #c9521a !important;
    box-shadow: 0 6px 20px rgba(232, 97, 26, .3) !important;
    transform: translateY(-1px) !important;
}

/* ── Success message ── */
.vacancy-application-section .nf-form-cont .nf-response-msg {
    background: #f0fdf4 !important;
    border: 1.5px solid #22c55e !important;
    border-radius: 8px !important;
    color: #15803d !important;
    padding: 16px 20px !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
}

@media (max-width: 767px) {
    .vacancy-application-section .nf-form-cont .nf-field-container {
        margin-bottom: .9rem !important;
    }
}

/* ── Hide empty file-upload progress bar (shown before any upload) ── */
.vacancy-application-section .nf-form-cont .nf-fu-progress {
    display: none !important;
}
/* Only reveal it once JS sets an actual width (upload in progress) */
.vacancy-application-section .nf-form-cont .nf-fu-progress[style*="width"] {
    display: block !important;
    height: 6px !important;
    background: #e8611a !important;
    border-radius: 3px !important;
    margin-top: 8px !important;
    transition: width .3s ease !important;
}
/* Hide the empty pre-upload message text too */
.vacancy-application-section .nf-form-cont .nf-fu-fileinput-button + .nf-fu-message:empty,
.vacancy-application-section .nf-form-cont .nf-fu-message {
    font-size: .8rem !important;
    color: #6c757d !important;
    margin-top: 6px !important;
}