/* ZoekJeWerk front-end styles. Scoped to .zj so they work inside Divi or any theme. */
/* Fonts are self-hosted (no Google Fonts requests, GDPR-friendly). SIL Open Font License, see assets/fonts. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; src: url(../fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; src: url(../fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
	--zj-primary: #2a46c8;
	--zj-primary-dark: #0e1726;
	--zj-accent: #ffd43b;
	--zj-ink: #0e1726;
	--zj-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, sans-serif;
	--zj-font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
	--zj-text: #1f2937;
	--zj-muted: #6b7280;
	--zj-border: #e5e7eb;
	--zj-bg: #f5f2ea;
	--zj-card: #ffffff;
	--zj-success: #047857;
	--zj-success-bg: #ecfdf5;
	--zj-error: #b91c1c;
	--zj-error-bg: #fef2f2;
	--zj-warning-bg: #fffbeb;
	--zj-radius: 12px;
	--zj-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

.zj, .zj * { box-sizing: border-box; }
.zj { color: var(--zj-text); font-size: 16px; line-height: 1.5; font-family: var(--zj-font); }
.zj h1, .zj h2, .zj h3, .zj-page-title { font-family: var(--zj-display); letter-spacing: -.02em; font-weight: 700; color: var(--zj-ink); }
.zj a { color: var(--zj-primary); }
.zj-container { max-width: 1180px; margin: 0 auto; padding: 24px 16px 48px; }
.zj-main { background: var(--zj-bg); }
.zj-page-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 8px 0 16px; color: var(--zj-primary-dark); }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }
.zj-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
.zj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--zj-border); background: #fff; color: var(--zj-text) !important; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; }
.zj-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
.zj-btn:active { transform: translateY(1px); }
.zj-btn--primary { background: var(--zj-accent); border-color: var(--zj-ink); color: var(--zj-ink) !important; box-shadow: 0 2px 0 var(--zj-ink); }
.zj-btn--primary:hover { background: #f5c400; border-color: var(--zj-ink); }
.zj-btn--ghost { background: transparent; }
.zj-btn--block { width: 100%; }
.zj-danger { color: var(--zj-error) !important; }

/* Search bar */
.zj-searchbar { display: grid; grid-template-columns: 1fr; gap: 10px; background: var(--zj-card); padding: 12px; border-radius: 16px; box-shadow: var(--zj-shadow); border: 1px solid var(--zj-border); margin-bottom: 20px; }
.zj-searchbar__field { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; border-radius: 10px; background: var(--zj-bg); margin: 0; }
.zj-searchbar__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--zj-muted); }
.zj-searchbar input { border: 0 !important; background: transparent !important; padding: 4px 0 !important; font-size: 16px; outline: none; box-shadow: none !important; width: 100%; color: var(--zj-text); }
.zj-searchbar .zj-btn { padding: 14px 22px; font-size: 16px; }
@media (min-width: 760px) {
	.zj-searchbar { grid-template-columns: 1fr 1fr auto; align-items: stretch; }
}

/* Layout */
.zj-search__layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 960px) {
	.zj-search__layout { grid-template-columns: 260px 1fr; align-items: start; }
	.zj-filters__toggle { display: none !important; }
}

/* Filters */
.zj-filters { background: var(--zj-card); border: 1px solid var(--zj-border); border-radius: var(--zj-radius); padding: 16px; display: none; }
.zj-filters.is-open { display: block; }
@media (min-width: 960px) { .zj-filters { display: block; position: sticky; top: 24px; } }
.zj-filter { display: block; margin: 0 0 14px; }
.zj-filter__label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--zj-text); }
.zj-filter select, .zj-filter input { width: 100%; padding: 9px 10px; border: 1px solid var(--zj-border); border-radius: 8px; background: #fff; font-size: 15px; color: var(--zj-text); }
.zj-filters__reset { font-size: 14px; }

/* Results */
.zj-results__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zj-results__count { margin: 0; font-weight: 700; color: var(--zj-muted); }
.zj-results__list { display: grid; gap: 12px; }

/* Card */
.zj-card { position: relative; display: flex; gap: 16px; justify-content: space-between; background: var(--zj-card); border: 1px solid var(--zj-border); border-radius: var(--zj-radius); padding: 16px 18px; transition: border-color .15s, box-shadow .15s; }
.zj-card:hover { border-color: #bfd3ee; box-shadow: var(--zj-shadow); }
.zj-card__title { font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
.zj-card__title a { color: var(--zj-primary-dark); text-decoration: none; }
.zj-card__title a::after { content: ""; position: absolute; inset: 0; }
.zj-card__title a:hover { text-decoration: underline; }
.zj-card__meta { margin: 0 0 8px; color: var(--zj-text); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.zj-card__company { font-weight: 600; }
.zj-card__location::before { content: "📍"; margin-right: 4px; font-size: 13px; }
.zj-card__excerpt { margin: 8px 0 6px; color: var(--zj-muted); font-size: 14px; }
.zj-card__footer { margin: 0; font-size: 13px; color: var(--zj-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.zj-card__logo { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; border: 1px solid var(--zj-border); background: #fff; flex: 0 0 auto; }

/* Badges */
.zj-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.zj-badge { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: #eef2f7; color: #374151; }
.zj-badge--salary { background: #e8f5e9; color: #1b5e20; }
.zj-badge--direct { background: #fff4e5; color: #9a4b00; }

/* Pagination */
.zj-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 0; flex-wrap: wrap; }
.zj-pagination__info { color: var(--zj-muted); font-size: 14px; }

/* Empty + notices */
.zj-empty { background: var(--zj-card); border: 1px dashed #cbd5e1; border-radius: var(--zj-radius); padding: 24px; text-align: center; }
.zj-empty h3 { margin-top: 0; }
.zj-notice { padding: 12px 14px; border-radius: 10px; margin: 0 0 16px; font-weight: 500; }
.zj-notice--success { background: var(--zj-success-bg); color: var(--zj-success); border: 1px solid #a7f3d0; }
.zj-notice--error { background: var(--zj-error-bg); color: var(--zj-error); border: 1px solid #fecaca; }
.zj-notice--warning { background: var(--zj-warning-bg); color: #92400e; border: 1px solid #fde68a; }

/* Alert box */
.zj-alert-box { background: linear-gradient(135deg, var(--zj-primary-dark), var(--zj-primary)); color: #fff; border-radius: var(--zj-radius); padding: 18px; margin: 4px 0; }
.zj-alert-box__title { font-weight: 800; font-size: 18px; margin: 0 0 2px; }
.zj-alert-box__desc { margin: 0 0 12px; opacity: .85; font-size: 14px; }
.zj-alert-box__form { display: flex; gap: 8px; flex-wrap: wrap; }
.zj-alert-box__form input, .zj-alert-box__form select { flex: 1 1 200px; padding: 11px 12px; border-radius: 10px; border: 0; font-size: 15px; color: var(--zj-text); }
.zj-alert-box__form select { flex: 0 1 140px; }
.zj-alert-box .zj-btn--primary { background: var(--zj-accent); border-color: var(--zj-accent); color: var(--zj-ink) !important; }
.zj-alert-box .zj-btn--primary:hover { background: #e67a00; border-color: #e67a00; }
.zj-alert-box--compact .zj-alert-box__form { flex-direction: column; }
.zj-alert-box--compact .zj-alert-box__form input { flex: 0 0 auto; }

/* Single job */
.zj-back { margin: 0 0 12px; font-size: 14px; }
.zj-back a { text-decoration: none; }
.zj-job__layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 960px) { .zj-job__layout { grid-template-columns: 1fr 340px; align-items: start; } .zj-job__aside { position: sticky; top: 24px; } }
.zj-job__content, .zj-apply, .zj-panel { background: var(--zj-card); border: 1px solid var(--zj-border); border-radius: var(--zj-radius); padding: 20px; }
.zj-job__aside { display: grid; gap: 16px; }
.zj-job__header { border-bottom: 1px solid var(--zj-border); padding-bottom: 16px; margin-bottom: 16px; }
.zj-job__logo { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; border: 1px solid var(--zj-border); float: right; margin-left: 12px; background: #fff; }
.zj-job__title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 6px; color: var(--zj-primary-dark); }
.zj-job__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; color: var(--zj-muted); }
.zj-job__meta strong { color: var(--zj-text); }
.zj-job__description { font-size: 16px; }
.zj-job__description h3, .zj-job__description h4 { margin: 1.2em 0 .4em; }
.zj-job__description ul { padding-left: 1.2em; }
.zj-job__source { margin-top: 20px; font-size: 14px; color: var(--zj-muted); border-top: 1px solid var(--zj-border); padding-top: 12px; }
.zj-apply__title { font-size: 20px; margin: 0 0 12px; }
.zj-apply__hint { font-size: 13px; color: var(--zj-muted); margin: 8px 0 0; text-align: center; }
.zj-similar { margin-top: 32px; }
.zj-similar h2 { font-size: 22px; color: var(--zj-primary-dark); }

/* Forms */
.zj-form h3 { margin: 18px 0 10px; font-size: 18px; }
.zj-form h3:first-of-type { margin-top: 0; }
.zj-field { display: block; margin: 0 0 14px; }
.zj-field > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.zj-field small { color: var(--zj-muted); }
.zj-field input, .zj-field select, .zj-field textarea, .zj-account input[type=text], .zj-account input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; background: #fff; color: var(--zj-text); }
.zj-field input:focus, .zj-field select:focus, .zj-field textarea:focus { outline: 2px solid #bfdbfe; border-color: var(--zj-primary); }
.zj-form__grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .zj-form__grid { grid-template-columns: 1fr 1fr; } }
.zj-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 0 0 14px; }
.zj-check input { margin-top: 4px; }
.zj-form__hint { color: var(--zj-muted); font-size: 14px; }
.zj-form__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.zj-segmented { display: flex; gap: 0; border: 1px solid var(--zj-border); border-radius: 10px; padding: 4px; margin: 0 0 14px; }
.zj-segmented label { flex: 1; margin: 0; }
.zj-segmented input { position: absolute; opacity: 0; }
.zj-segmented span { display: block; text-align: center; padding: 8px; border-radius: 7px; cursor: pointer; font-weight: 600; }
.zj-segmented input:checked + span { background: var(--zj-primary); color: #fff; }
.zj-segmented input:focus-visible + span { outline: 2px solid #93c5fd; }

/* Account */
.zj-account__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 860px) { .zj-account__grid { grid-template-columns: 1fr 1fr; } }
.zj-account #loginform p { margin: 0 0 12px; }
.zj-account #loginform label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.zj-account #wp-submit { background: var(--zj-primary); color: #fff; border: 0; padding: 11px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.zj-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

/* Dashboard */
.zj-dashboard__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.zj-dashboard__head h2 { margin: 0; }
.zj-table-wrap { background: var(--zj-card); border: 1px solid var(--zj-border); border-radius: var(--zj-radius); overflow: hidden; }
.zj-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; }
.zj-table th, .zj-table td { padding: 12px 14px; border-bottom: 1px solid var(--zj-border); text-align: left; vertical-align: top; }
.zj-table th { background: #f9fafb; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--zj-muted); }
.zj-table tr:last-child td { border-bottom: 0; }
.zj-table__actions a { margin-right: 10px; white-space: nowrap; }
.zj-status { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #eef2f7; }
.zj-status--publish { background: #d1fae5; color: #065f46; }
.zj-status--pending { background: #fef3c7; color: #92400e; }
.zj-status--zj_expired { background: #f3f4f6; color: #6b7280; }
@media (max-width: 720px) {
	.zj-table thead { display: none; }
	.zj-table tr { display: block; border-bottom: 1px solid var(--zj-border); padding: 8px 0; }
	.zj-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 14px; }
	.zj-table td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--zj-muted); font-size: 13px; }
}
.zj-profile { margin-top: 20px; }
.zj-profile summary { cursor: pointer; list-style: none; }
.zj-profile summary h3 { display: inline; margin: 0; }
.zj-profile__logo { max-width: 96px; height: auto; display: block; margin: 0 0 12px; border-radius: 8px; }
.zj-applications { display: grid; gap: 12px; }
.zj-application__head { display: flex; justify-content: space-between; gap: 8px; }
.zj-application__letter { background: var(--zj-bg); border-radius: 8px; padding: 10px 12px; margin: 8px 0 12px; font-size: 15px; }

/* Latest jobs shortcode */
.zj-latest { display: grid; gap: 12px; }
@media (min-width: 860px) { .zj-latest { grid-template-columns: 1fr 1fr; } }

/* Block themes: let the board use the wide layout width. */
.wp-block-post-content > .zj.alignwide, .entry-content > .zj.alignwide { max-width: var(--wp--style--global--wide-size, 1180px); margin-left: auto; margin-right: auto; width: 100%; }

/* ------------------------------------------------------------------ */
/* Differentiators                                                     */
/* ------------------------------------------------------------------ */
:root { --zj-whatsapp: #1fa855; --zj-net: #0f766e; }
.zj-section-title { font-size: 18px; margin: 0 0 10px; color: var(--zj-primary-dark); }
.zj-badge--net { background: #e6fffa; color: var(--zj-net); }
.zj-badge--lang { background: #eef2ff; color: #3730a3; }
.zj-badge--response { background: #ecfdf5; color: #065f46; }
.zj-badge--response-ok { background: #f0fdf4; color: #166534; }
.zj-card__commute { color: var(--zj-muted); }
.zj-card__perks { margin: 8px 0 0; font-size: 13px; color: #4b5563; }
.zj-card__perks::before { content: "🎁 "; }
.zj-match { position: relative; z-index: 1; display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-bottom: 6px; }
.zj-match--high { background: #dcfce7; color: #166534; }
.zj-match--mid { background: #fef9c3; color: #854d0e; }
.zj-job__id { font-size: 13px; }

/* Buttons */
.zj-btn--whatsapp { background: var(--zj-whatsapp); border-color: var(--zj-whatsapp); color: #fff !important; margin-top: 10px; }
.zj-btn--whatsapp:hover { background: #178a45; border-color: #178a45; }
.zj-btn--whatsapp::before { content: "💬"; }
.zj-alert-box .zj-btn--whatsapp { margin-top: 0; }

/* Commute filter */
.zj-commute { border: 1px solid var(--zj-border); border-radius: 10px; padding: 10px; margin: 0 0 14px; background: #f8fafc; }
.zj-commute legend { padding: 0 4px; }
.zj-commute__from { display: flex; gap: 6px; margin-bottom: 6px; }
.zj-commute__from input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--zj-border); border-radius: 8px; font-size: 15px; }
.zj-commute__locate { padding: 8px 10px; }
.zj-commute__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zj-commute__row select { width: 100%; padding: 8px; border: 1px solid var(--zj-border); border-radius: 8px; background: #fff; font-size: 14px; }
.zj-commute__error { color: var(--zj-error); font-size: 13px; margin: 6px 0 0; }

/* Perks on job page */
.zj-perks { margin: 0 0 18px; padding: 14px 16px; background: #f8fafc; border-radius: 10px; }
.zj-perks__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zj-perk { background: #fff; border: 1px solid var(--zj-border); border-radius: 99px; padding: 5px 12px; font-size: 14px; }
.zj-perk::before { content: "✓ "; color: var(--zj-success); font-weight: 700; }

/* Net salary box */
.zj-net { border-top: 4px solid var(--zj-net); }
.zj-net.is-loading { opacity: .6; }
.zj-net__amount { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zj-net__amount strong { font-size: 32px; color: var(--zj-net); line-height: 1.1; }
.zj-net__amount span { color: var(--zj-muted); }
.zj-net__range, .zj-net__note { font-size: 13px; color: var(--zj-muted); margin: 6px 0; }
.zj-net__options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.zj-net__options label span { display: block; font-size: 12px; font-weight: 700; color: var(--zj-muted); margin-bottom: 2px; }
.zj-net__options select { width: 100%; padding: 8px; border: 1px solid var(--zj-border); border-radius: 8px; background: #fff; font-size: 14px; }
.zj-net__breakdown { margin: 0; border-top: 1px dashed var(--zj-border); padding-top: 8px; }
.zj-net__breakdown div { display: flex; justify-content: space-between; font-size: 14px; padding: 2px 0; }
.zj-net__breakdown dt { color: var(--zj-muted); }
.zj-net__breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.zj-net__extra { background: #e6fffa; color: var(--zj-net); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 10px 0 0; }

/* Commute box on job page */
.zj-commute-box__form { display: flex; gap: 6px; }
.zj-commute-box__form input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--zj-border); border-radius: 8px; font-size: 15px; }
.zj-commute-box__form .zj-btn { padding: 9px 12px; }
.zj-commute-box__result { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.zj-commute-box__item { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 8px 10px; background: #f8fafc; border-radius: 8px; }
.zj-commute-box__item a { white-space: nowrap; font-size: 13px; }
.zj-commute-box__note { font-size: 12px; color: var(--zj-muted); margin: 10px 0 0; }

/* AI box */
.zj-ai { border-top: 4px solid var(--zj-accent); }
.zj-ai__score { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.zj-ai__ring { --zj-score: 0; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#0d7a57 calc(var(--zj-score) * 1%), #e2f4ea 0); }
.zj-ai__ring span { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 800; color: #5b21b6; }
.zj-ai__reasons { margin: 0; padding-left: 18px; font-size: 14px; }
.zj-ai__actions { display: grid; gap: 8px; }
.zj-ai__output { margin-top: 12px; font-size: 14px; background: #faf5ff; border-radius: 8px; padding: 10px 12px; }
.zj-ai__output h4 { margin: 8px 0 4px; font-size: 14px; }
.zj-ai__output ul { margin: 0; padding-left: 18px; }
.zj-ai__summary { font-weight: 600; margin: 0; }
.zj-ai__tip { margin: 8px 0 0; }

/* Employer: applications and reply stats */
.zj-application__head { align-items: center; flex-wrap: wrap; }
.zj-application__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.zj-status--app-new { background: #dbeafe; color: #1e40af; }
.zj-status--app-viewed { background: #f3f4f6; color: #374151; }
.zj-status--app-invited { background: #d1fae5; color: #065f46; }
.zj-status--app-rejected { background: #fee2e2; color: #991b1b; }
.zj-status--app-hired { background: #ede9fe; color: #5b21b6; }
.zj-application--rejected { opacity: .7; }
.zj-waiting { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 99px; padding: 1px 8px; }
.zj-reply-stats { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 760px) { .zj-reply-stats { grid-template-columns: 1fr 1fr 2fr; align-items: center; } }
.zj-reply-stats strong { display: block; font-size: 26px; color: var(--zj-primary-dark); }
.zj-reply-stats span { font-size: 13px; color: var(--zj-muted); }
.zj-reply-stats__badge small { display: block; color: var(--zj-muted); margin-top: 4px; }

/* Forms */
.zj-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; border: 0; padding: 0; margin: 0 0 8px; }
.zj-benefits-form { display: grid; grid-template-columns: 1fr; gap: 0 18px; margin-bottom: 8px; }
@media (min-width: 640px) { .zj-benefits-form { grid-template-columns: 1fr 1fr; } }
.zj-field--inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zj-field--inline > span { margin: 0; font-weight: 500; }
.zj-field--inline input { max-width: 120px; }
.zj-apply__saved { background: #f0fdf4; border-radius: 8px; padding: 8px 10px; }

/* Candidate profile */
.zj-profile-card { margin-top: 20px; }
.zj-profile-card__upload { border-bottom: 1px solid var(--zj-border); padding-bottom: 14px; margin-bottom: 14px; }
.zj-profile-card__summary { background: #faf5ff; border-radius: 8px; padding: 10px 12px; }

/* Fixes: fieldsets default to min-width:min-content and overflow narrow sidebars; respect [hidden]. */
.zj [hidden] { display: none !important; }
.zj-commute { min-width: 0; max-width: 100%; }
.zj-commute__from input, .zj-commute__row select { min-width: 0; }
.zj-commute__row select { text-overflow: ellipsis; }
/* Let grid columns shrink on phones (default min-width:auto causes horizontal overflow). */
.zj-job__layout > *, .zj-search__layout > *, .zj-job__aside > * { min-width: 0; }
.zj-container { overflow-x: clip; }
.zj-commute-box__form .zj-btn { flex: 0 0 auto; }

/* Job seeker dashboard */
.zj-muted { color: var(--zj-muted); }
.zj-mine__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.zj-mine__head h2 { margin: 0; }
.zj-mine__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
@media (min-width: 720px) { .zj-mine__stats { grid-template-columns: repeat(4, 1fr); } }
.zj-mine__stats div { background: var(--zj-card); border: 1px solid var(--zj-border); border-radius: var(--zj-radius); padding: 14px 16px; }
.zj-mine__stats strong { display: block; font-size: 28px; color: var(--zj-primary-dark); line-height: 1.1; }
.zj-mine__stats span { color: var(--zj-muted); font-size: 13px; }
.zj-mine__stats .is-good strong { color: var(--zj-success); }
.zj-mine__list { display: grid; gap: 12px; margin-bottom: 18px; }
.zj-myapp__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.zj-myapp__title { margin: 0 0 4px; font-size: 18px; }
.zj-myapp__title a { color: var(--zj-primary-dark); text-decoration: none; }
.zj-myapp__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--zj-muted); font-size: 14px; }
.zj-myapp__meta strong { color: var(--zj-text); }
.zj-myapp__closed { color: var(--zj-error); }
.zj-myapp--rejected { opacity: .85; }
.zj-timeline { list-style: none; margin: 16px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.zj-timeline::before { content: ""; position: absolute; top: 7px; left: 8%; right: 8%; height: 2px; background: var(--zj-border); }
.zj-timeline__step { position: relative; text-align: center; font-size: 13px; color: var(--zj-muted); display: grid; justify-items: center; gap: 2px; }
.zj-timeline__dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--zj-border); position: relative; z-index: 1; }
.zj-timeline__step.is-done { color: var(--zj-text); }
.zj-timeline__step.is-done .zj-timeline__dot { background: var(--zj-success); border-color: var(--zj-success); }
.zj-timeline__step.is-current .zj-timeline__dot { border-color: var(--zj-primary); box-shadow: 0 0 0 4px #dbeafe; }
.zj-timeline__step.is-current { color: var(--zj-primary); font-weight: 600; }
.zj-timeline__step.is-bad .zj-timeline__dot { background: var(--zj-error); border-color: var(--zj-error); }
.zj-timeline__step.is-bad { color: var(--zj-error); }
.zj-timeline__step small { color: var(--zj-muted); font-weight: 400; }
.zj-myapp__explain { margin: 6px 0 10px; background: var(--zj-bg); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.zj-myapp__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; }
.zj-myapp__cv { color: var(--zj-muted); }
.zj-myapp__actions { margin-left: auto; display: flex; gap: 14px; }
.zj-alert-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.zj-alert-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; background: var(--zj-bg); border-radius: 8px; flex-wrap: wrap; }
.zj-alert-list small { display: block; color: var(--zj-muted); }
.zj-alert-list__actions { display: flex; gap: 14px; }
.zj-perf { margin-bottom: 12px; }
@media (min-width: 760px) { .zj-perf { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Site header and footer (block themes, created by "Set up homepage") ---------- */
.zj-site-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 242, 234, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(14, 23, 38, .1); padding: 14px 20px !important; margin: 0 !important; font-family: var(--zj-font); }
.admin-bar .zj-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .zj-site-header { top: 0; position: relative; } }
.zj-site-header > *, .zj-site-footer > * { max-width: 1240px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; }
.zj-site-header__inner { gap: 16px; }
.zj-site-header__brand { gap: 10px; }
.zj-site-header .wp-block-site-title { margin: 0; font: 800 22px/1 var(--zj-display) !important; letter-spacing: -.03em; }
.zj-site-header .wp-block-site-title a { color: var(--zj-ink); text-decoration: none; }
.zj-site-header__nav { gap: 22px; }
.zj-site-header .wp-block-navigation { font-weight: 600; font-size: 15px; gap: 24px; }
.zj-site-header .wp-block-navigation a { text-decoration: none; color: var(--zj-ink); }
.zj-site-header .wp-block-navigation a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--zj-accent); }
.zj-site-header .wp-block-button__link { background: var(--zj-ink) !important; color: #fff !important; border-radius: 999px !important; padding: 10px 18px !important; font: 700 14px/1 var(--zj-font) !important; border: 0; }
.zj-site-header .wp-block-button__link:hover { background: #000 !important; }
@media (max-width: 600px) { .zj-site-header__cta { display: none; } }

.zj-site-footer { background: #0e1726; color: rgba(255, 255, 255, .75); padding: 72px 20px 32px !important; margin: 0 !important; font-family: var(--zj-font); font-size: 15px; }
.zj-site-footer .wp-block-site-title { font: 800 26px/1 var(--zj-display) !important; letter-spacing: -.03em; margin: 0 0 14px; }
.zj-site-footer .wp-block-site-title a { color: #fff; text-decoration: none; }
.zj-site-footer__tagline { max-width: 26em; }
.zj-site-footer__cols { gap: 40px; }
.zj-site-footer .zj-site-footer__title { white-space: nowrap; color: #ffd43b; font: 700 12px/1 var(--zj-font) !important; letter-spacing: .14em; text-transform: uppercase; margin: 6px 0 16px; }
.zj-site-footer p { margin: 0 0 10px; }
.zj-site-footer a { color: #fff; text-decoration: none; }
.zj-site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.zj-site-footer__legal { margin-top: 48px !important; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .5); }

/* Plugin pages inside the theme: brand background and headings */
body.zj-page { background: var(--zj-bg); }
body.zj-page .wp-block-post-title, body.zj-page .entry-title { font-family: var(--zj-display) !important; font-weight: 800 !important; letter-spacing: -.035em; color: var(--zj-ink); }
.zj .zj-card__title { font-weight: 700; letter-spacing: -.01em; }
.zj-card { border-radius: 16px; }
