/* ==========================================================================
   JordanJobs — app shell & design polish (loaded after the JobBox theme CSS)
   Mobile (< 992px): native-app layout. Desktop (>= 992px): refined theme.
   ========================================================================== */

:root {
    --jj-green: #1e9e48;
    --jj-green-dark: #15803a;
    --jj-green-soft: #e8f6ed;
    --jj-red: #cf1126;
    --jj-ink: #14231c;
    --jj-text: #33443c;
    --jj-muted: #66766f;
    --jj-line: #e6ebe8;
    --jj-bg: #f4f6f5;
    --jj-card: #ffffff;
    --jj-radius: 16px;
    --jj-radius-sm: 12px;
    --jj-shadow: 0 1px 2px rgba(20, 35, 28, .04), 0 6px 20px rgba(20, 35, 28, .06);
    --jj-shadow-lg: 0 12px 40px rgba(20, 35, 28, .14);
    --jj-tabbar-h: 64px;
    --jj-safe-b: env(safe-area-inset-bottom, 0px);
    --jj-safe-t: env(safe-area-inset-top, 0px);
    --jj-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Elements that only exist in the mobile app shell */
.jj-tabbar,
.jj-apply-bar,
.jj-filter-fab,
.jj-back,
.jj-install { display: none; }

.jj-sheet[hidden],
.jj-install[hidden] { display: none !important; }

.jj-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--jj-muted);
    cursor: pointer;
}

.jj-icon-btn svg,
.jj-tabbar svg,
.jj-back svg,
.jj-filter-fab svg,
.jj-apply-share svg,
.jj-search-field svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jj-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 14px;
    background: var(--jj-green);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

.jj-btn-primary:hover { background: var(--jj-green-dark); color: #fff; }
.jj-btn-primary:active { transform: scale(.97); }
.jj-btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Search sheet (also usable on desktop)
   -------------------------------------------------------------------------- */
.jj-sheet {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.jj-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 22, 17, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.jj-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 8px 20px calc(24px + var(--jj-safe-b));
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: var(--jj-shadow-lg);
    transform: translateY(100%);
    transition: transform .3s var(--jj-ease);
}

.jj-sheet.is-open .jj-sheet-backdrop { opacity: 1; }
.jj-sheet.is-open .jj-sheet-panel { transform: translateY(0); }

.jj-sheet-handle {
    width: 44px;
    height: 5px;
    margin: 4px auto 10px;
    border-radius: 99px;
    background: #d5ddd9;
    cursor: pointer;
}

.jj-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.jj-sheet-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--jj-ink);
}

.jj-search-form { display: flex; gap: 10px; }

.jj-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 14px;
    border: 1.5px solid var(--jj-line);
    border-radius: 14px;
    background: var(--jj-bg);
    color: var(--jj-muted);
    transition: border-color .2s, background .2s;
}

.jj-search-field:focus-within { border-color: var(--jj-green); background: #fff; }

.jj-search-field input {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px; /* 16px avoids the iOS zoom on focus */
    color: var(--jj-ink);
}

.jj-sheet-label {
    margin: 22px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--jj-muted);
}

.jj-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.jj-chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 99px;
    background: var(--jj-green-soft);
    color: var(--jj-green-dark);
    font-size: 14px;
    font-weight: 600;
    transition: background .2s;
}

.jj-chip:hover { background: #d4efdd; color: var(--jj-green-dark); }

body.jj-lock { overflow: hidden; }

/* ==========================================================================
   MOBILE & TABLET — app layout
   ========================================================================== */
@media (max-width: 991.98px) {
    html { -webkit-tap-highlight-color: transparent; }

    body.jj-app {
        background: var(--jj-bg);
        padding-bottom: calc(var(--jj-tabbar-h) + var(--jj-safe-b));
        -webkit-font-smoothing: antialiased;
    }

    body.jj-app .main { background: var(--jj-bg); }

    /* ---- App bar -------------------------------------------------------- */
    body.jj-app .header,
    body.jj-app .header.sticky-bar.stick {
        position: sticky !important;
        top: 0;
        z-index: 1000;
        float: none;
        padding: var(--jj-safe-t) 0 0 !important;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 0;
        box-shadow: none;
        animation: none;
        transition: box-shadow .2s ease;
    }

    body.jj-app.jj-scrolled .header { box-shadow: 0 1px 0 var(--jj-line), 0 6px 18px rgba(20, 35, 28, .06); }

    body.jj-app .header .main-header {
        position: relative;
        min-height: 58px;
        gap: 4px;
        padding-inline-end: 44px; /* room for the menu button */
    }

    body.jj-app .header-logo a img { max-height: 38px; width: auto; }
    body.jj-app .header .main-header .header-left .header-logo { min-width: 0; }

    body.jj-app .burger-icon,
    body.jj-app .sticky-bar.stick .burger-icon { top: 50%; margin-top: -10px; }

    body.jj-app .jj-back {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        margin-inline-start: -8px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--jj-ink);
    }

    body.jj-app .jj-back:active { background: var(--jj-bg); }
    html[dir="ltr"] body.jj-app .jj-back svg,
    body.jj-app:not([dir="rtl"]) .jj-back svg { transform: scaleX(-1); }

    /* ---- Bottom tab bar ------------------------------------------------- */
    .jj-tabbar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        height: calc(var(--jj-tabbar-h) + var(--jj-safe-b));
        padding: 0 6px var(--jj-safe-b);
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid var(--jj-line);
        box-shadow: 0 -4px 20px rgba(20, 35, 28, .05);
        transition: transform .25s var(--jj-ease);
    }

    .jj-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: var(--jj-tabbar-h);
        padding: 0;
        border: 0;
        background: none;
        color: #7d8c86;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        transition: color .15s;
    }

    .jj-tab svg { width: 24px; height: 24px; transition: transform .2s var(--jj-ease); }
    .jj-tab:active svg { transform: scale(.88); }

    .jj-tab.is-active { color: var(--jj-green); }
    .jj-tab.is-active svg { stroke-width: 2.2; }

    .jj-tab.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 28px;
        height: 3px;
        margin-left: -14px;
        border-radius: 0 0 4px 4px;
        background: var(--jj-green);
    }

    .jj-tab-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
    .jj-tab.is-active .jj-tab-avatar { box-shadow: 0 0 0 2px var(--jj-green); }

    .jj-tab-search { color: var(--jj-ink); }

    .jj-tab-search-bubble {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-top: -26px;
        border-radius: 18px;
        background: linear-gradient(145deg, #23b153, var(--jj-green-dark));
        color: #fff;
        box-shadow: 0 8px 20px rgba(30, 158, 72, .35), 0 0 0 5px #fff;
    }

    .jj-tab-search-bubble svg { width: 24px; height: 24px; stroke-width: 2.2; }

    /* Hide the tab bar while the on-screen keyboard is likely open */
    body.jj-lock .jj-tabbar { transform: translateY(110%); }

    /* ---- Theme elements that clash with the app shell ------------------- */
    #scrollUp { display: none !important; }

    body.jj-app .header .block-signin { display: none; }

    .floating-wpp,
    .whatsapp-floating-button,
    [class*="floating-wpp"] { bottom: calc(var(--jj-tabbar-h) + var(--jj-safe-b) + 14px) !important; }

    body.jj-has-apply .floating-wpp,
    body.jj-has-apply [class*="floating-wpp"] { bottom: calc(var(--jj-tabbar-h) + var(--jj-safe-b) + 84px) !important; }

    .site-notice.site-notice-full-width,
    .js-site-notice {
        inset-inline: 12px !important;
        bottom: calc(var(--jj-tabbar-h) + var(--jj-safe-b) + 12px) !important;
        width: auto !important;
        max-width: none !important;
        border-radius: var(--jj-radius) !important;
        box-shadow: var(--jj-shadow-lg);
        font-size: 13.5px;
        line-height: 1.7;
    }

    .site-notice .site-notice-body { padding: 14px 16px !important; }

    /* ---- Page rhythm ---------------------------------------------------- */
    body.jj-app .section-box.mt-50,
    body.jj-app .section-box.mt-70 { margin-top: 28px !important; }
    body.jj-app .mt-60 { margin-top: 28px !important; }
    body.jj-app .mt-40 { margin-top: 20px !important; }

    body.jj-app .container { padding-inline: 16px; }

    body.jj-app h2.section-title,
    body.jj-app .section-title {
        font-size: 21px !important;
        line-height: 1.5 !important;
        font-weight: 800;
        color: var(--jj-ink);
    }

    body.jj-app .section-box .font-lg { font-size: 15px !important; line-height: 1.8; }

    /* ---- Hero / search banners ----------------------------------------- */
    body.jj-app .banner-hero { padding: 0 !important; }

    body.jj-app .banner-hero.hero-2,
    body.jj-app .banner-hero.hero-3 {
        padding: 26px 16px 28px !important;
        border-radius: 0 0 28px 28px;
        overflow: hidden;
    }

    body.jj-app .banner-hero .banner-inner { min-height: 0 !important; }
    body.jj-app .banner-hero .block-banner { padding: 0 !important; }

    body.jj-app .banner-hero h1,
    body.jj-app .banner-hero .text-42 {
        font-size: 24px !important;
        line-height: 1.55 !important;
        margin-bottom: 8px;
    }

    body.jj-app .banner-hero .font-lg {
        font-size: 14.5px !important;
        line-height: 1.8 !important;
        margin-top: 8px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.jj-app .banner-hero .form-find {
        margin-top: 18px !important;
        padding: 10px;
        border-radius: 20px;
        box-shadow: var(--jj-shadow-lg);
    }

    body.jj-app .banner-hero .form-find form { gap: 0; }

    body.jj-app .banner-hero .form-find .form-input,
    body.jj-app .banner-hero .form-find .select2-container .select2-selection {
        min-height: 46px;
        font-size: 15px;
    }

    body.jj-app .banner-hero .form-find .btn-find {
        width: 100%;
        min-height: 48px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 700;
    }

    body.jj-app .banner-hero .list-tags-banner {
        margin-top: 16px !important;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    body.jj-app .banner-hero .list-tags-banner::-webkit-scrollbar { display: none; }

    body.jj-app .banner-hero .list-tags-banner a {
        display: inline-block;
        flex: 0 0 auto;
        padding: 6px 12px;
        border-radius: 99px;
        font-size: 13px;
    }

    body.jj-app .banner-hero .mt-60 .row > [class*="col-"] { margin-bottom: 8px !important; }
    body.jj-app .banner-hero .mt-60 h4 { font-size: 22px; margin-bottom: 0; }

    body.jj-app .banner-hero .banner-imgs,
    body.jj-app .banner-hero .block-1,
    body.jj-app .banner-hero .block-2 { display: none !important; }

    /* ---- Cards (jobs, companies, candidates, posts) -------------------- */
    body.jj-app .card-grid-2,
    body.jj-app .card-grid-2.hover-up,
    body.jj-app .card-list-4,
    body.jj-app .card-grid-3,
    body.jj-app .card-blog-1 {
        background: var(--jj-card) !important;
        border: var(--jj-card-border, 0) !important;
        border-radius: var(--jj-radius) !important;
        box-shadow: var(--jj-card-shadow, var(--jj-shadow)) !important;
        margin-bottom: 14px;
        transform: none !important;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    body.jj-app .card-grid-2:active,
    body.jj-app .card-list-4:active { transform: scale(.985) !important; }

    body.jj-app .card-grid-2 .card-grid-2-image-left { padding: 16px 16px 0 !important; }
    body.jj-app .card-grid-2 .card-block-info { padding: 12px 16px 16px !important; }

    body.jj-app .card-grid-2 .image-box img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 0 0 1px var(--jj-line);
    }

    body.jj-app .card-grid-2 .card-block-info h6,
    body.jj-app .card-grid-2 .card-block-info h6 a {
        font-size: 16.5px;
        line-height: 1.6;
        font-weight: 800;
        color: var(--jj-ink);
        white-space: normal;
    }

    body.jj-app .card-grid-2 .job-description {
        margin-top: 8px !important;
        font-size: 14px;
        line-height: 1.8;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.jj-app .card-grid-2 .mt-30 { margin-top: 12px !important; }

    body.jj-app .card-grid-2 .card-block-info .mt-30:has(.btn-grey-small) {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    body.jj-app .card-grid-2 .btn-grey-small {
        flex: 0 0 auto;
        margin: 0 !important;
        border-radius: 99px;
        padding: 5px 12px;
        font-size: 12.5px;
    }

    body.jj-app .card-grid-2 .card-2-bottom { margin-top: 14px !important; }

    body.jj-app .card-grid-2 .btn-apply-now,
    body.jj-app .card-grid-2 .card-2-bottom .btn:not(.btn-tags-sm):not(.btn-grey-small) {
        width: 100%;
        min-height: 44px;
        border-radius: 12px;
        font-weight: 700;
    }

    body.jj-app .card-briefcase,
    body.jj-app .card-time { font-size: 13px; }

    /* Category tiles on the homepage */
    body.jj-app .card-grid-5 { border-radius: var(--jj-radius) !important; overflow: hidden; }
    body.jj-app .bg-brand-2.pt-60 { padding-top: 28px !important; padding-bottom: 20px !important; }
    body.jj-app .bg-brand-2 .pt-70 { padding-top: 0 !important; }
    body.jj-app .bg-brand-2 .box-swiper.mt-50 { margin-top: 20px !important; }

    /* ---- Listing toolbar + filter sheet -------------------------------- */
    body.jj-app .jobs-listing { margin-inline: 0; }
    body.jj-app .content-page .box-filters-job { margin-bottom: 12px; }
    body.jj-app .box-filters-job .btn-advanced-filter:not(.jj-filter-fab) { display: none !important; }

    .jj-filter-fab {
        position: fixed;
        z-index: 1030;
        left: 50%;
        bottom: calc(var(--jj-tabbar-h) + var(--jj-safe-b) + 14px);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 20px;
        border: 0;
        border-radius: 99px;
        background: var(--jj-ink);
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
        box-shadow: 0 10px 24px rgba(20, 35, 28, .3);
        transform: translateX(-50%);
        cursor: pointer;
    }

    .jj-filter-fab svg { width: 18px; height: 18px; stroke-width: 2.2; }

    body.jj-app .sidebar-filter-mobile.active { z-index: 10060; }

    body.jj-app .sidebar-filter-mobile .backdrop { background: rgba(12, 22, 17, .45); }

    body.jj-app .sidebar-filter-mobile__inner {
        top: auto !important;
        bottom: 0;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: 86vh;
        padding-bottom: var(--jj-safe-b);
        border-radius: 24px 24px 0 0;
        transform: translateY(100%) !important;
        transition: transform .3s var(--jj-ease), opacity .2s, visibility .2s !important;
    }

    body.jj-app .sidebar-filter-mobile.active .sidebar-filter-mobile__inner { transform: translateY(0) !important; }

    body.jj-app .sidebar-filter-mobile__inner::before {
        content: "";
        display: block;
        width: 44px;
        height: 5px;
        margin: 10px auto 2px;
        border-radius: 99px;
        background: #d5ddd9;
    }

    body.jj-app .sidebar-filter-mobile__header {
        background: #fff !important;
        color: var(--jj-ink) !important;
        padding: 10px 20px !important;
        border-bottom: 1px solid var(--jj-line);
    }

    body.jj-app .sidebar-filter-mobile__header h5 { color: var(--jj-ink) !important; }
    body.jj-app .sidebar-filter-mobile__header .close-sidebar-filter-mobile { color: var(--jj-muted) !important; }

    /* ---- Job detail ----------------------------------------------------- */
    body.jj-app .section-box-2 .banner-image-single img {
        border-radius: 0 0 var(--jj-radius) var(--jj-radius);
        max-height: 160px;
        width: 100%;
        object-fit: cover;
    }

    body.jj-app .section-box-2 > .container { padding-inline: 0; }
    body.jj-app .section-box-2 .banner-image-single { margin-inline: 0; }

    body.jj-app .job-header-content {
        flex-direction: column;
        align-items: stretch !important;
        margin: -20px 16px 0 !important;
        padding: 18px 16px;
        position: relative;
        background: #fff;
        border-radius: var(--jj-radius);
        box-shadow: var(--jj-shadow);
    }

    body.jj-app .job-header-content h1 {
        font-size: 21px !important;
        line-height: 1.6 !important;
        font-weight: 800;
        color: var(--jj-ink);
    }

    body.jj-app .job-header-content .btn-apply-big,
    body.jj-app .job-header-content .btn-apply {
        width: 100%;
        min-height: 50px;
        margin-top: 8px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 700;
    }

    body.jj-app .job-header-content > div,
    body.jj-app .job-header-content .ms-auto { margin: 0 !important; width: 100%; }

    body.jj-app .section-box-2 .border-bottom.pt-10 { display: none; }

    body.jj-app .job-overview,
    body.jj-app .content-single,
    body.jj-app .sidebar-border,
    body.jj-app .sidebar-shadow:not(.none-shadow) {
        padding: 18px 16px !important;
        border: 0 !important;
        border-radius: var(--jj-radius) !important;
        background: #fff;
        box-shadow: var(--jj-shadow);
        margin-bottom: 14px;
    }

    body.jj-app .content-single,
    body.jj-app .ck-content { font-size: 15.5px; line-height: 1.95; color: var(--jj-text); }

    body.jj-app .content-single h2,
    body.jj-app .content-single h3 { font-size: 18px; margin-top: 18px; }

    body.jj-app .job-detail-section { margin-top: 16px !important; }

    body.jj-app .single-apply-jobs { display: none; }

    /* Sticky apply bar */
    .jj-apply-bar {
        position: fixed;
        inset-inline: 0;
        bottom: calc(var(--jj-tabbar-h) + var(--jj-safe-b));
        z-index: 1035;
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 10px 16px;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--jj-line);
        transform: translateY(120%);
        opacity: 0;
        transition: transform .28s var(--jj-ease), opacity .2s;
    }

    body.jj-apply-visible .jj-apply-bar { transform: translateY(0); opacity: 1; }

    .jj-apply-bar > a,
    .jj-apply-bar > button.jj-apply-main,
    .jj-apply-bar .jj-apply-main { flex: 1; margin: 0 !important; }

    .jj-apply-bar .btn,
    .jj-apply-bar .jj-apply-main,
    .jj-apply-bar a > div {
        width: 100%;
        min-height: 48px;
        margin: 0 !important;
        border-radius: 14px !important;
        font-size: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .jj-apply-share {
        flex: 0 0 48px;
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 1.5px solid var(--jj-line);
        border-radius: 14px;
        background: #fff;
        color: var(--jj-ink);
    }

    body.jj-has-apply.jj-apply-visible .jj-filter-fab { display: none; }

    /* ---- Company detail ------------------------------------------------- */
    body.jj-app .company-detail .banner-image-single img { max-height: 150px; object-fit: cover; width: 100%; border-radius: var(--jj-radius); }

    body.jj-app .box-company-profile {
        margin-top: -34px;
        padding: 0 16px 16px !important;
        background: #fff;
        border-radius: var(--jj-radius);
        box-shadow: var(--jj-shadow);
        position: relative;
    }

    body.jj-app .box-company-profile .image-company img {
        width: 76px;
        height: 76px;
        object-fit: contain;
        border-radius: 18px;
        background: #fff;
        box-shadow: var(--jj-shadow);
        margin-top: -38px;
    }

    body.jj-app .jj-company-title { font-size: 20px !important; font-weight: 800; color: var(--jj-ink); line-height: 1.6; }
    body.jj-app .jj-company-title .card-location { display: block; margin: 4px 0 0 !important; font-size: 13.5px; }

    /* ---- Forms (login / register / apply) ------------------------------ */
    body.jj-app .form-control,
    body.jj-app .form-input,
    body.jj-app input.form-control,
    body.jj-app select.form-control,
    body.jj-app textarea.form-control {
        min-height: 48px;
        font-size: 16px;
        border-radius: 12px;
    }

    body.jj-app .modal-dialog { margin: 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
    body.jj-app .modal-content { border: 0; border-radius: 24px 24px 0 0; padding-bottom: var(--jj-safe-b); }
    body.jj-app .modal.fade .modal-dialog { transform: translateY(40px); }
    body.jj-app .modal.show .modal-dialog { transform: none; }

    /* ---- Footer: compact on mobile ------------------------------------- */
    body.jj-app .footer { margin-top: 28px !important; padding-top: 28px !important; padding-bottom: 12px; }
    body.jj-app .footer .footer-col-1,
    body.jj-app .footer [class*="col-"] { margin-bottom: 18px; }
    body.jj-app .footer h6 { font-size: 16px; margin-bottom: 10px; }
    body.jj-app .footer .menu-footer li { margin-bottom: 6px; }
    body.jj-app .footer-bottom { padding-bottom: 8px !important; font-size: 13px; }

    /* Newsletter strip */
    body.jj-app .box-newsletter { border-radius: var(--jj-radius) !important; padding: 24px 16px !important; }

    /* ---- Off-canvas menu ------------------------------------------------ */
    body.jj-app .mobile-header-wrapper-style { border-radius: 0 0 0 24px; }
    body.jj-app .mobile-header-wrapper-style .mobile-menu li a { min-height: 44px; display: flex; align-items: center; font-size: 16px; }

    /* ---- Install banner ------------------------------------------------- */
    .jj-install {
        position: fixed;
        inset-inline: 12px;
        bottom: calc(var(--jj-tabbar-h) + var(--jj-safe-b) + 12px);
        z-index: 1045;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        background: #fff;
        border-radius: 18px;
        box-shadow: var(--jj-shadow-lg);
        transform: translateY(20px);
        opacity: 0;
        transition: transform .3s var(--jj-ease), opacity .3s;
    }

    .jj-install.is-open { transform: none; opacity: 1; }
    .jj-install img { flex: 0 0 44px; border-radius: 12px; }
    .jj-install-text { flex: 1; min-width: 0; line-height: 1.5; }
    .jj-install-text strong { display: block; font-size: 14.5px; color: var(--jj-ink); }
    .jj-install-text span { display: block; font-size: 12.5px; color: var(--jj-muted); }

    body.jj-has-apply .jj-install { bottom: calc(var(--jj-tabbar-h) + var(--jj-safe-b) + 80px); }

    /* ---- Page transitions ---------------------------------------------- */
    @media (prefers-reduced-motion: no-preference) {
        body.jj-app .main { animation: jj-page-in .28s ease-out both; }
    }

    /* Wow.js hides content until it animates: never leave content invisible on phones */
    body.jj-app .wow { visibility: visible !important; animation-name: none !important; }
}

/* Very small phones */
@media (max-width: 360px) {
    .jj-tab { font-size: 10.5px; }
    body.jj-app .banner-hero h1,
    body.jj-app .banner-hero .text-42 { font-size: 21px !important; }
}

/* Installed app (standalone): no browser chrome, respect the notch */
.jj-standalone body.jj-app .header { padding-top: var(--jj-safe-t) !important; }
.jj-standalone .jj-install { display: none !important; }

@keyframes jj-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   DESKTOP (>= 992px) — polish the theme
   ========================================================================== */
@media (min-width: 992px) {
    .header.sticky-bar {
        transition: background .2s, box-shadow .2s, padding .2s;
    }

    .header.sticky-bar.stick {
        background: rgba(255, 255, 255, .92) !important;
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        box-shadow: 0 1px 0 var(--jj-line), 0 8px 24px rgba(20, 35, 28, .06);
        border-bottom: 0;
        animation: none;
    }

    .header-logo a img { max-height: 52px; }

    .main-menu > li > a { font-weight: 600; }

    /* Hero */
    .banner-hero.hero-2 .block-banner h1,
    .banner-hero .text-42 { line-height: 1.5; }

    .banner-hero .form-find {
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(20, 35, 28, .14);
    }

    .banner-hero .form-find .btn-find { border-radius: 12px; }

    .banner-hero .list-tags-banner a {
        display: inline-block;
        margin: 4px;
        padding: 6px 14px;
        border-radius: 99px;
        background: rgba(255, 255, 255, .14);
        transition: background .2s;
    }

    .banner-hero .list-tags-banner a:hover { background: rgba(255, 255, 255, .26); }

    /* Cards */
    .card-grid-2 {
        background: #fff;
        border: 1px solid var(--jj-line);
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(20, 35, 28, .03);
        transition: transform .2s var(--jj-ease), box-shadow .2s var(--jj-ease), border-color .2s;
    }

    .card-grid-2:hover {
        border-color: transparent;
        box-shadow: 0 16px 40px rgba(20, 35, 28, .10);
        transform: translateY(-4px);
    }

    .card-grid-2 .image-box img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 0 0 1px var(--jj-line);
        background: #fff;
    }

    .card-grid-2 .card-block-info h6 a { font-weight: 800; color: var(--jj-ink); }
    .card-grid-2 .card-block-info h6 a:hover { color: var(--jj-green); }

    .card-grid-2 .job-description {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-grid-5,
    .card-grid-3,
    .card-list-4,
    .card-blog-1 { border-radius: 18px; overflow: hidden; }

    /* Job & company detail */
    .job-header-content h1 { font-weight: 800; line-height: 1.5; }

    .job-overview,
    .sidebar-border {
        border-radius: 18px !important;
        border-color: var(--jj-line) !important;
    }

    .content-single,
    .ck-content { font-size: 16.5px; line-height: 2; color: var(--jj-text); }

    .content-single h2,
    .content-single h3 { margin-top: 28px; }

    .banner-image-single img { border-radius: 18px; }

    .jj-company-title { font-size: 26px !important; font-weight: 800; }

    /* Sidebar filters */
    .sidebar-shadow { border-radius: 18px; }

    /* Buttons */
    .btn-apply-now,
    .btn-apply,
    .btn-default { border-radius: 12px; }

    /* Footer */
    .footer .menu-footer li a { transition: color .2s, padding .2s; }
    .footer .menu-footer li a:hover { color: var(--jj-green); padding-inline-start: 4px; }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* Keyboard focus that is visible on every screen */
.jj-tab:focus-visible,
.jj-chip:focus-visible,
.jj-btn-primary:focus-visible,
.jj-icon-btn:focus-visible,
.jj-back:focus-visible,
.jj-filter-fab:focus-visible,
.jj-apply-share:focus-visible {
    outline: 3px solid rgba(30, 158, 72, .45);
    outline-offset: 2px;
}