/* ==========================================================================
   JordanJobs design layer
   All tokens come from Appearance → Theme options (see <style id="jj-design-options">).
   The values below are only fallbacks.
   ========================================================================== */

:root {
    --jj-primary: var(--primary-color, #1a9a4b);
    --jj-primary-dark: var(--primary-color-hover, #13803d);
    --jj-accent: #d1162b;
    --jj-dark: #10251b;
    --jj-dark-rgb: 16, 37, 27;
    --jj-bg: #f6f4ef;
    --jj-surface: #ffffff;
    --jj-text: #2c3a33;
    --jj-line: #e5e1d8;
    --jj-muted: color-mix(in srgb, var(--jj-text) 62%, var(--jj-bg));
    --jj-radius: 14px;
    --jj-radius-lg: 21px;
    --jj-radius-sm: 10px;
    --jj-font-size: 16px;
    --jj-card-border: 1px solid var(--jj-line);
    --jj-card-shadow: none;
    --jj-display: var(--primary-font);
    --jj-primary-soft: color-mix(in srgb, var(--jj-primary) 10%, #fff);

    /* keep app.css in sync */
    --jj-green: var(--jj-primary);
    --jj-green-dark: var(--jj-primary-dark);
    --jj-green-soft: var(--jj-primary-soft);
    --jj-ink: var(--jj-dark);
    --jj-red: var(--jj-accent);
    --jj-card: var(--jj-surface);
    --jj-sand: var(--jj-bg);

    --jj-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12.00 2.00 L14.00 7.86 L19.82 5.77 L16.48 10.98 L21.75 14.23 L15.60 14.87 L16.34 21.01 L12.00 16.60 L7.66 21.01 L8.40 14.87 L2.25 14.23 L7.52 10.98 L4.18 5.77 L10.00 7.86Z' transform='translate(7 7) scale(.42)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
body {
    font-family: var(--primary-font);
    font-size: var(--jj-font-size);
    color: var(--jj-text);
    background: var(--jj-bg);
}

h1, h2, h3, h4, h5, h6,
.section-title,
.main-menu > li > a,
.btn,
.card-grid-2 .card-block-info h6,
.text-42, .text-52 {
    font-family: var(--jj-display);
    letter-spacing: 0;
}

h1, h2, h3, h4 { color: var(--jj-dark); }

p, li { line-height: 1.85; }

.color-text-paragraph,
.color-text-paragraph-2,
.color-text-mutted { color: var(--jj-muted) !important; }

::selection { background: color-mix(in srgb, var(--jj-primary) 22%, transparent); color: var(--jj-dark); }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--jj-primary);
    outline-offset: 2px;
}

/* Never leave sections invisible while WOW.js waits for scroll events */
.wow { visibility: visible !important; }

@media (prefers-reduced-motion: reduce) {
    .wow, .animate__animated, body.jj-app .main { animation: none !important; }
    * { scroll-behavior: auto !important; }
}

/* ---------- Section headings ---------- */
.section-title { font-weight: 800; color: var(--jj-dark); }
.section-box .text-start > p.font-lg,
.section-box .text-center > p.font-lg { color: var(--jj-muted) !important; }

/* ---------- Buttons ---------- */
.btn-default,
.btn.btn-default,
.btn-find,
.btn-apply-big,
.btn-apply-icon {
    background-color: var(--jj-primary) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: var(--jj-radius-sm) !important;
    font-weight: 700;
    box-shadow: none !important;
    transition: background-color .15s ease;
}

.btn-default:hover,
.btn-find:hover,
.btn-apply-big:hover,
.btn-apply-icon:hover { background-color: var(--jj-primary-dark) !important; }

.btn-brand-1 {
    background: var(--jj-surface) !important;
    color: var(--jj-dark) !important;
    border-radius: var(--jj-radius-sm) !important;
    font-weight: 700;
}

.btn-brand-1:hover { background: var(--jj-primary) !important; color: #fff !important; }

.btn-apply-now {
    background: var(--jj-primary-soft) !important;
    color: var(--jj-primary-dark) !important;
    border: 0 !important;
    border-radius: var(--jj-radius-sm) !important;
    font-weight: 700;
}

.btn-apply-now:hover { background: var(--jj-primary) !important; color: #fff !important; }

.btn-grey-small,
.btn-tags-sm {
    background: var(--jj-bg) !important;
    color: var(--jj-text) !important;
    border: 1px solid var(--jj-line) !important;
    border-radius: 999px !important;
    font-weight: 500;
}

.btn-grey-small:hover { border-color: var(--jj-primary) !important; color: var(--jj-primary-dark) !important; }

/* ==========================================================================
   Header & main menu
   ========================================================================== */
.header {
    background: var(--jj-surface);
    border-bottom: 1px solid var(--jj-line);
}

.header.sticky-bar.stick { background: var(--jj-surface) !important; box-shadow: 0 1px 0 var(--jj-line) !important; border-bottom: 0; }

@media (min-width: 992px) {
    .header .main-header .header-left { flex: 0 0 auto; }
    .header .main-header .header-left .header-logo { min-width: 0; }
    .header-logo a img { height: 46px; width: auto; max-width: none; max-height: none; }
    .header .main-header .header-nav { flex: 1 1 auto; min-width: 0; }
    .header .main-menu { display: flex; flex-wrap: nowrap; justify-content: center; gap: 2px; }
    .header .main-menu > li { white-space: nowrap; }
    .header .main-header .header-right { min-width: 0; flex: 0 0 auto; padding-inline-start: 12px; }
    .header .block-signin { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
    .header .block-signin .btn-default { margin: 0 !important; }

    .header { padding: 12px 0; }
    .header.stick { padding: 8px 0; }

    .header .main-menu > li > a {
        padding: 9px 12px !important;
        color: var(--jj-dark);
        font-size: 15px;
        font-weight: 600;
        border-radius: var(--jj-radius-sm);
    }

    .header .main-menu > li > a:hover,
    .header .main-menu > li > a.active { color: var(--jj-primary-dark); background: var(--jj-primary-soft); }

    .header .main-menu li a:before { display: none !important; }

    .header .main-menu li ul.sub-menu {
        min-width: 230px;
        padding: 8px;
        border: 1px solid var(--jj-line);
        border-radius: var(--jj-radius);
        box-shadow: 0 12px 32px rgba(var(--jj-dark-rgb), .12);
    }

    .header .main-menu li ul.sub-menu li a {
        display: block;
        padding: 9px 12px !important;
        border-radius: var(--jj-radius-sm);
        color: var(--jj-text);
        font-size: 14.5px;
    }

    .header .main-menu li ul.sub-menu li a:hover { background: var(--jj-bg); color: var(--jj-primary-dark); }

    .header .block-signin .btn-default { padding: 10px 18px !important; }
    .header .block-signin .text-link-bd-btom { color: var(--jj-dark); font-weight: 600; }
}

/* ==========================================================================
   Hero & page headers
   Variants (Theme options -> واجهة الموقع): light (default) | photo | dark | primary
   ========================================================================== */
.bg-homepage1 { display: none; }
.banner-hero.hero-3::before { display: none !important; }

.banner-hero.hero-2,
.banner-hero.hero-3,
.breadcrumb-cover {
    position: relative;
    isolation: isolate;
    background-size: cover !important;
    background-position: center !important;
}

.banner-hero h1,
.banner-hero .text-42 { font-weight: 800; text-wrap: balance; }

.banner-hero .form-find {
    background: var(--jj-surface);
    border: 1px solid var(--jj-line);
    border-radius: var(--jj-radius);
    box-shadow: 0 10px 30px rgba(var(--jj-dark-rgb), .08);
}

/* Light */
.jj-hero-light .banner-hero.hero-2,
.jj-hero-light .banner-hero.hero-3,
.jj-hero-light .breadcrumb-cover {
    background: var(--jj-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--jj-line);
}

.jj-hero-light .banner-hero h1,
.jj-hero-light .banner-hero .text-42,
.jj-hero-light .breadcrumb-cover h1,
.jj-hero-light .breadcrumb-cover h2 { color: var(--jj-dark) !important; }

.jj-hero-light .banner-hero .color-green,
.jj-hero-light .banner-hero h1 span { color: var(--jj-primary) !important; }

.jj-hero-light .banner-hero .font-lg,
.jj-hero-light .banner-hero .color-white,
.jj-hero-light .breadcrumb-cover p { color: var(--jj-muted) !important; }

.jj-hero-light .banner-hero .list-tags-banner strong { color: var(--jj-dark); font-weight: 700; }

.jj-hero-light .banner-hero .list-tags-banner a {
    display: inline-block;
    margin: 3px;
    padding: 5px 12px;
    background: var(--jj-bg) !important;
    border: 1px solid var(--jj-line);
    border-radius: 999px;
    color: var(--jj-text) !important;
    font-size: 14px;
    text-decoration: none !important;
}

.jj-hero-light .banner-hero .list-tags-banner a:hover { border-color: var(--jj-primary); color: var(--jj-primary-dark) !important; }

.jj-hero-light .banner-hero .mt-60 h4 { color: var(--jj-dark) !important; }

.jj-hero-light .breadcrumb-cover .breadcrumbs li,
.jj-hero-light .breadcrumb-cover .breadcrumbs li a { color: var(--jj-muted) !important; }
.jj-hero-light .breadcrumb-cover .breadcrumbs li a:hover { color: var(--jj-primary-dark) !important; }

/* Photo / dark / primary */
.jj-hero-photo .banner-hero.hero-2,
.jj-hero-photo .banner-hero.hero-3,
.jj-hero-dark .banner-hero.hero-2,
.jj-hero-dark .banner-hero.hero-3,
.jj-hero-photo .breadcrumb-cover,
.jj-hero-dark .breadcrumb-cover { background-color: var(--jj-dark) !important; }

.jj-hero-dark .banner-hero.hero-2,
.jj-hero-dark .banner-hero.hero-3,
.jj-hero-photo .breadcrumb-cover,
.jj-hero-dark .breadcrumb-cover { background-image: none !important; }

.jj-hero-primary .banner-hero.hero-2,
.jj-hero-primary .banner-hero.hero-3,
.jj-hero-primary .breadcrumb-cover { background: var(--jj-primary-dark) !important; }

:is(.jj-hero-photo, .jj-hero-dark, .jj-hero-primary) .banner-hero :is(h1, .text-42, h1 span, .color-green, .mt-60 h4),
:is(.jj-hero-photo, .jj-hero-dark, .jj-hero-primary) .breadcrumb-cover :is(h1, h2) { color: #fff !important; }

:is(.jj-hero-photo, .jj-hero-dark, .jj-hero-primary) .banner-hero .font-lg,
:is(.jj-hero-photo, .jj-hero-dark, .jj-hero-primary) .breadcrumb-cover :is(p, .breadcrumbs li, .breadcrumbs li a) { color: rgba(255, 255, 255, .82) !important; }

:is(.jj-hero-photo, .jj-hero-dark, .jj-hero-primary) .banner-hero .list-tags-banner a { color: #fff !important; }

.jj-pattern:is(.jj-hero-photo, .jj-hero-dark, .jj-hero-primary) .banner-hero::after,
.jj-pattern .footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--jj-star);
    background-size: 80px 80px;
    opacity: .05;
    pointer-events: none;
}

.breadcrumb-cover { padding: 36px 0 !important; }
.breadcrumb-cover h1,
.breadcrumb-cover h2 { font-weight: 800; margin-bottom: 6px; }

.list-brands img { max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.list-brands a:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   "Popular categories" band: light section instead of a solid colour block
   ========================================================================== */
.bg-brand-2 {
    position: relative;
    background: var(--jj-surface) !important;
    border-top: 1px solid var(--jj-line);
    border-bottom: 1px solid var(--jj-line);
}

.bg-brand-2 h2,
.bg-brand-2 .color-white { color: var(--jj-dark) !important; }
.bg-brand-2 p.color-white { color: var(--jj-muted) !important; }
.bg-brand-2 .btn-brand-1 { background: var(--jj-primary) !important; color: #fff !important; }
.bg-brand-2 .btn-brand-1:hover { background: var(--jj-primary-dark) !important; }
.bg-brand-2 .card-grid-5 .color-white { color: #fff !important; }

.card-grid-5 { border-radius: var(--jj-radius) !important; overflow: hidden; }
.card-grid-5 .box-cover-img { position: relative; }

.card-grid-5 .box-cover-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(var(--jj-dark-rgb), .85));
    pointer-events: none;
}

.card-grid-5 .content-bottom { position: relative; z-index: 2; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card-grid-2,
.card-grid-1,
.card-grid-3,
.card-list-4,
.card-blog-1,
.card-grid-border {
    background: var(--jj-surface) !important;
    border: var(--jj-card-border) !important;
    border-radius: var(--jj-radius) !important;
    box-shadow: var(--jj-card-shadow) !important;
    transition: border-color .15s ease, transform .15s ease;
}

.card-grid-2:hover,
.card-grid-1:hover,
.card-list-4:hover,
.card-grid-border:hover {
    background: var(--jj-surface) !important;
    border-color: color-mix(in srgb, var(--jj-primary) 45%, var(--jj-line)) !important;
    transform: translateY(-2px);
}

.card-grid-2 .card-grid-2-image-left .right-info .name-job { color: var(--jj-dark); font-weight: 700; }
.card-grid-2 .card-block-info h6 a { color: var(--jj-dark); font-weight: 700; }
.card-grid-2 .card-block-info h6 a:hover { color: var(--jj-primary-dark); }

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

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

.card-grid-2 .card-text-price { color: var(--jj-dark); font-weight: 700; }

.card-grid-2 .card-block-info .btn-grey-small { display: inline-block; margin: 0 0 6px 4px !important; padding: 3px 10px; font-size: 12.5px; }
.card-grid-2 .card-block-info .btn-grey-small:nth-of-type(n+4) { display: none; }
.card-grid-2 .card-block-info .mt-30 { margin-top: 14px !important; }

.featured-job-item { border-color: var(--jj-line) !important; box-shadow: inset 0 3px 0 var(--jj-accent), var(--jj-card-shadow) !important; }
.featured-job-item .flash {
    width: auto !important;
    height: auto !important;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--jj-accent) 10%, #fff) !important;
    background-image: none !important;
}
.featured-job-item .flash::after { content: "مميزة"; color: var(--jj-accent); font-size: 12px; font-weight: 700; }
html[lang="en"] .featured-job-item .flash::after { content: "Featured"; }

/* ==========================================================================
   Listing, detail, forms
   ========================================================================== */
.box-filters-job,
.sidebar-shadow,
.job-overview,
.sidebar-border,
.content-single {
    background: var(--jj-surface) !important;
    border: 1px solid var(--jj-line) !important;
    border-radius: var(--jj-radius) !important;
    box-shadow: none !important;
}

.box-filters-job { padding: 12px 16px; }
.job-overview,
.content-single { padding: 26px !important; }

.filter-block h5 { color: var(--jj-dark); }
.filter-block .link-reset { color: var(--jj-accent) !important; }

.paginations .pager li a { border-radius: var(--jj-radius-sm) !important; }
.paginations .pager li a.active,
.paginations .pager li a:hover { background: var(--jj-primary) !important; color: #fff !important; }

.sidebar-icon-item {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--jj-radius-sm);
    background: var(--jj-bg);
}

.sidebar-icon-item img { width: 20px; height: 20px; }
.sidebar-text-info .small-heading { color: var(--jj-dark); font-weight: 700; }

.ck-content :is(p, li, td) > a,
.content-single :is(p, li, td) > a { color: var(--jj-primary-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Shortcode blocks live inside .ck-content too: never underline UI links */
.ck-content .section-box a:not(.jj-intro-card a),
.ck-content .btn,
.ck-content .nav-tabs a,
.ck-content .card-grid-2 a,
.ck-content .card-blog-1 a { text-decoration: none !important; }

.ck-content ul li::marker,
.content-single ul li::marker { color: var(--jj-primary); }

.box-company-profile .image-company img {
    background: #fff;
    border: 1px solid var(--jj-line);
    border-radius: var(--jj-radius);
}

.form-control,
.form-input { border-color: var(--jj-line) !important; border-radius: var(--jj-radius-sm) !important; }

.form-control:focus,
.form-input:focus {
    border-color: var(--jj-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jj-primary) 15%, transparent) !important;
}

.site-notice { background: var(--jj-dark) !important; color: rgba(255, 255, 255, .92) !important; }

.site-notice button,
.site-notice .site-notice__agree {
    background: var(--jj-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--jj-radius-sm) !important;
}

/* ==========================================================================
   Newsletter & footer
   ========================================================================== */
.box-newsletter {
    position: relative;
    isolation: isolate;
    background: var(--jj-primary-dark) !important;
    background-image: none !important;
    border-radius: var(--jj-radius-lg) !important;
}

.box-newsletter img[src*="newsletter-image"] { display: none; }

.box-newsletter h2,
.box-newsletter .text-md-newsletter { color: #fff !important; }

.box-newsletter .box-form-newsletter { border-radius: var(--jj-radius-sm); overflow: hidden; }

.jj-footer-dark .footer {
    position: relative;
    isolation: isolate;
    background: var(--jj-dark);
    border-top: 3px solid var(--jj-primary);
}

.jj-footer-dark .footer h6,
.jj-footer-dark .footer .h6 { color: #fff !important; }

.jj-footer-dark .footer a,
.jj-footer-dark .footer p,
.jj-footer-dark .footer span,
.jj-footer-dark .footer .color-text-paragraph { color: rgba(255, 255, 255, .72) !important; }

.jj-footer-dark .footer a:hover { color: #fff !important; }

.jj-footer-dark .footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12) !important; }

.jj-footer-dark .footer .footer-col-1 img { filter: brightness(0) invert(1); }

.jj-footer-light .footer { background: var(--jj-surface); border-top: 1px solid var(--jj-line); }

.footer { padding-top: 56px; }
.footer .menu-footer li { margin-bottom: 8px; }

/* ==========================================================================
   Content blocks written for jordanjobs.net
   ========================================================================== */
.jj-intro-card {
    padding: 32px 36px;
    background: var(--jj-surface);
    border: 1px solid var(--jj-line);
    border-radius: var(--jj-radius-lg);
}

.jj-intro-card p { color: var(--jj-text); margin-bottom: 12px; }
.jj-intro-card a { color: var(--jj-primary-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.jj-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 20px 0 10px;
}

.jj-contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--jj-surface);
    border: 1px solid var(--jj-line);
    border-radius: var(--jj-radius);
    color: var(--jj-dark) !important;
    text-decoration: none !important;
    transition: border-color .15s ease;
}

.jj-contact-card:hover { border-color: var(--jj-primary); }
.jj-contact-card > span:last-child { display: flex; flex-direction: column; line-height: 1.5; }
.jj-contact-card strong { font-family: var(--jj-display); }
.jj-contact-card span[dir="ltr"] { color: var(--jj-muted); text-align: start; }

.jj-contact-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--jj-radius-sm);
    background: var(--jj-primary-soft);
    color: var(--jj-primary-dark);
}

.jj-contact-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.jj-contact-note { color: var(--jj-muted); font-size: 14.5px; }

.jj-empty-state {
    padding: 28px;
    background: var(--jj-surface);
    border: 1px dashed var(--jj-line);
    border-radius: var(--jj-radius);
    color: var(--jj-muted);
    text-align: center;
}

.jj-landing-intro { max-width: 820px; }

.ck-content h2 { font-size: 26px; margin: 6px 0 14px; }
.ck-content h3 { font-size: 19px; margin: 26px 0 10px; }
.ck-content ul { padding-inline-start: 22px; }
.ck-content li { margin-bottom: 6px; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 991.98px) {
    body.jj-app,
    body.jj-app .main { background: var(--jj-bg); }

    body.jj-app .header,
    body.jj-app .header.sticky-bar.stick { background: color-mix(in srgb, var(--jj-surface) 94%, transparent) !important; }

    .banner-hero.hero-2,
    .banner-hero.hero-3 { border-radius: 0 0 var(--jj-radius-lg) var(--jj-radius-lg); }

    .breadcrumb-cover { padding: 24px 0 !important; }
    .breadcrumb-cover h1,
    .breadcrumb-cover h2 { font-size: 22px !important; }
    .breadcrumb-cover .breadcrumbs { margin-top: 6px !important; font-size: 13px; }

    .footer { padding-top: 32px; }

    .job-overview,
    .content-single { padding: 18px 16px !important; }

    .jj-intro-card { padding: 20px 18px; border-radius: var(--jj-radius); }

    .ck-content h2 { font-size: 22px; }
    .ck-content h3 { font-size: 17.5px; }

    .card-grid-2:hover { transform: none; }
}

/* Jobs by governorate (homepage) */
.jj-location-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.jj-location-grid a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: var(--jj-surface);
    border: var(--jj-card-border);
    box-shadow: var(--jj-card-shadow);
    border-radius: var(--jj-radius);
    color: var(--jj-dark) !important;
    text-decoration: none !important;
    transition: border-color .15s ease;
}

.jj-location-grid a:hover { border-color: var(--jj-primary); }
.jj-location-grid strong { font-family: var(--jj-display); font-size: 18px; font-weight: 700; }
.jj-location-grid span { color: var(--jj-muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 991.98px) {
    .jj-location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .jj-location-grid a { padding: 14px; }
    .jj-location-grid strong { font-size: 16px; }
    .jj-location-grid span { font-size: 13px; }
}

/* The theme darkens hero-2 with a ::before layer in the secondary colour; our variants handle overlays themselves */
.banner-hero.hero-2::before { display: none !important; }

@media (min-width: 992px) and (max-width: 1280px) {
    .header .main-menu > li > a { padding: 8px 9px !important; font-size: 14.5px; }
    .header .block-signin .text-link-bd-btom { display: none; }
}

@media (min-width: 992px) {
    .header .main-menu > li { padding: 10px 2px !important; }
    .header .main-menu > li.has-children > a { padding-inline-end: 22px !important; position: relative; }
    .header .main-menu > li.has-children > a .arrow-down { inset-inline-end: 6px; }
}

/* Trending searches: the theme prints commas between links */
.banner-hero .list-tags-banner { font-size: 0; }
.banner-hero .list-tags-banner strong { font-size: 15px; margin-inline-end: 6px; }
.banner-hero .list-tags-banner a { font-size: 14px; }

/* Homepage "latest jobs" cards: keep them compact */
.card-grid-2 .btn-tags-sm { display: inline-block; margin: 0 0 6px 4px !important; padding: 3px 10px !important; font-size: 12.5px !important; }
.card-grid-2 .btn-tags-sm:nth-of-type(n+4) { display: none !important; }
.card-grid-2 .card-grid-2-image .image-box img { width: 100%; height: 150px; object-fit: cover; border: 0; border-radius: 0; }
.card-grid-2 .card-grid-2-image .image-box figure { margin: 0; }
.card-grid-2 .card-block-info .name-job { color: var(--jj-dark); font-weight: 700; line-height: 1.6; }
.card-grid-2 .lbl-hot { border-radius: 999px; }
.job-of-the-day .list-tabs .nav-tabs a { border-radius: 999px !important; border: 1px solid var(--jj-line) !important; background: var(--jj-surface) !important; color: var(--jj-text) !important; }
.job-of-the-day .list-tabs .nav-tabs a.active,
.job-of-the-day .list-tabs .nav-tabs a:hover { background: var(--jj-primary) !important; border-color: var(--jj-primary) !important; color: #fff !important; }

.jj-hero-light .banner-hero h1.color-white,
.jj-hero-light .banner-hero .text-42.color-white { color: var(--jj-dark) !important; }

@media (min-width: 992px) {
    .banner-hero.hero-2 { padding-top: 64px !important; padding-bottom: 44px !important; }
    .banner-hero.hero-2 .banner-inner { min-height: 0 !important; }
    .banner-hero .list-tags-banner.mt-60 { margin-top: 26px !important; }
    .banner-hero.hero-3 { padding-top: 56px !important; padding-bottom: 56px !important; }
}


/* Reviews are not used on this site: hide empty star rows */
.card-grid-1 .rate-reviews,
.card-grid-1 .rating,
.card-grid-3 .rate-reviews,
.company-rating,
.card-grid-1 .text-sm.font-bold + .rating { display: none !important; }

/* The job-of-the-day block reserves a tall area for its loader */
.job-of-the-day .tab-content,
.job-of-the-day .job-of-the-day-list { min-height: 0 !important; }
.job-of-the-day { padding-bottom: 20px; }

/* Company carousel: reviews are not used, hide the empty stars */
.item-5 .rating-star,
.item-5 .font-xs.color-text-mutted:has(+ .rating-star),
.item-5 span.font-xs:empty { display: none !important; }
.item-5 { background: var(--jj-surface); border: var(--jj-card-border) !important; border-radius: var(--jj-radius) !important; box-shadow: var(--jj-card-shadow); }
.item-5:hover { border-color: color-mix(in srgb, var(--jj-primary) 45%, var(--jj-line)) !important; }

/* Newsletter: the side illustrations were demo images that no longer exist */
.box-newsletter .row > .col-xl-3 { display: none !important; }
.box-newsletter .row > .col-xl-6 { flex: 0 0 100%; max-width: 720px; margin-inline: auto; }
.box-newsletter .icon-send-letter { font-size: 0 !important; }
.box-newsletter .icon-send-letter::after { content: "اشترك"; font-size: 16px; }
html[lang="en"] .box-newsletter .icon-send-letter::after { content: "Subscribe"; }

@media (max-width: 991.98px) {
    /* Category tabs above "latest jobs": one scrollable row, like an app */
    .job-of-the-day .list-tabs { overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
    .job-of-the-day .list-tabs::-webkit-scrollbar { display: none; }
    .job-of-the-day .list-tabs .nav-tabs { flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; }
    .job-of-the-day .list-tabs .nav-tabs li,
    .job-of-the-day .list-tabs .nav-tabs a { flex: 0 0 auto; }
    .job-of-the-day .list-tabs .nav-tabs a { padding: 8px 14px !important; font-size: 14px; }
}

@media (max-width: 991.98px) {
    /* Hero search: compact stacked fields */
    .banner-hero .form-find form { display: flex; flex-direction: column; gap: 6px; }
    .banner-hero .form-find .box-industry,
    .banner-hero .form-find .form-input,
    .banner-hero .form-find .select2-container { width: 100% !important; margin: 0 !important; }
    .banner-hero .form-find .form-input,
    .banner-hero .form-find .select2-container .select2-selection--single {
        height: 48px !important;
        min-height: 48px;
        line-height: 48px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 1px solid var(--jj-line) !important;
    }
    .banner-hero .form-find .search-btn-group { margin-top: 6px; }
    .banner-hero .form-find .btn-advanced-filter { display: none !important; }

    .jj-hero-light .banner-hero .list-tags-banner strong { color: var(--jj-dark) !important; font-size: 14px; flex: 0 0 auto; align-self: center; }

    /* Footer columns stack neatly */
    .footer .row > [class*="col-"] { margin-bottom: 22px; }
    .footer .footer-bottom .row > [class*="col-"] { margin-bottom: 8px; }
}

.banner-hero h1 span,
.banner-hero .text-42 span,
.banner-hero .text-52 span { font-size: inherit !important; line-height: inherit !important; }

@media (max-width: 991.98px) {
    body.jj-app .banner-hero .text-52,
    body.jj-app .banner-hero.hero-3 h1 { font-size: 24px !important; line-height: 1.55 !important; }
}