/* =============================================================================
 *  Bliss Jobs Board — Frontend Styles
 * =============================================================================
 *  Architecture: BEM-style class names, CSS custom properties for all visual
 *  tokens so the host theme / Elementor can override without touching this file.
 *
 *  To restyle, override the CSS variables under `.bjb` and `.bjb-detail` in
 *  your theme's stylesheet or Elementor's Custom CSS.
 * =============================================================================
 */

/* ----------------------------------------------------------------------
 *  Design tokens (override these in the theme to restyle the plugin)
 * -------------------------------------------------------------------- */
.bjb,
.bjb-detail,
.bjb-empty {
	--bjb-color-text:        #1f3b54;
	--bjb-color-muted:       #5f7184;
	--bjb-color-accent:      #1ca3dd;
	--bjb-color-accent-2:    #f5a623;
	--bjb-color-accent-text: #ffffff;
	--bjb-color-border:      #e5eaf0;
	--bjb-color-surface:     #ffffff;
	--bjb-color-surface-alt: #f7fbfe;
	--bjb-color-filter-bg:   #f2f9fd;
	--bjb-color-hover:       #eef6fc;

	--bjb-radius:            14px;
	--bjb-radius-sm:         10px;

	--bjb-font-family:       inherit;
	--bjb-color-title:       var(--bjb-color-text);
	--bjb-title-size:        1.15rem;
	--bjb-title-weight:      600;
	--bjb-pill-fs:           0.875rem;
	--bjb-pill-padding:      0.45rem 0.95rem;
	--bjb-card-padding:      1.1rem 1.35rem;
	--bjb-card-gap:          0.85rem;
	--bjb-color-subtitle:    var(--bjb-color-muted);
	--bjb-subtitle-size:     0.9rem;
	--bjb-subtitle-weight:   400;
	--bjb-meta-size:         0.8125rem;
	--bjb-color-tag-text:    var(--bjb-color-text);
	--bjb-color-tag-bg:      #eef3f8;
	--bjb-color-cta:         var(--bjb-color-accent);
	--bjb-cta-size:          0.875rem;
	--bjb-cta-weight:        600;
	--bjb-cta-bg:            transparent;
	--bjb-cta-border-color:  var(--bjb-color-accent);
	--bjb-cta-border-width:  0px;
	--bjb-cta-radius-tl:     8px;
	--bjb-cta-radius-tr:     8px;
	--bjb-cta-radius-br:     8px;
	--bjb-cta-radius-bl:     8px;
	--bjb-cta-pad-y:         8px;
	--bjb-cta-pad-x:         18px;
	--bjb-color-count:       var(--bjb-color-muted);
	--bjb-count-size:        0.875rem;

	--bjb-loc-text:          var(--bjb-color-text);
	--bjb-loc-bg:            #eef3f8;
	--bjb-loc-size:          0.8125rem;
	--bjb-loc-weight:        500;
	--bjb-work-text:         var(--bjb-color-text);
	--bjb-work-bg:           #eef3f8;
	--bjb-work-size:         0.8125rem;
	--bjb-work-weight:       500;
	--bjb-emp-text:          var(--bjb-color-text);
	--bjb-emp-bg:            #eef3f8;
	--bjb-emp-size:          0.8125rem;
	--bjb-emp-weight:        500;

	/* Department pill + shared pill border (v1.9.9) */
	--bjb-dept-text:         var(--bjb-color-text);
	--bjb-dept-bg:           #eef3f8;
	--bjb-pill-border-width: 0px;
	--bjb-pill-border-color: #1f3b54;

	/* Job Detail page (v1.8) */
	--bjb-detail-max-width:    100%;
	--bjb-detail-margin:       0;
	--bjb-detail-padding:      0;
	--bjb-detail-back-color:   var(--bjb-color-muted);
	--bjb-detail-title-color:  var(--bjb-color-text);
	--bjb-detail-title-size:   30px;
	--bjb-detail-title-weight: 700;
	--bjb-detail-label-color:  var(--bjb-color-muted);
	--bjb-detail-label-size:   13px;
	--bjb-detail-value-color:  var(--bjb-color-text);
	--bjb-detail-value-size:   16px;
	--bjb-detail-body-color:   var(--bjb-color-text);
	--bjb-detail-body-size:    16px;
	--bjb-detail-btn-bg:       var(--bjb-color-accent);
	--bjb-detail-btn-text:     var(--bjb-color-accent-text);
	--bjb-detail-btn-border-color: var(--bjb-color-accent);
	--bjb-detail-btn-border-width: 0px;
	--bjb-detail-btn-padding:  12px 28px;
	--bjb-detail-btn-size:     16px;
	--bjb-detail-btn-weight:   600;

	/* Job Detail meta pills (v1.9) */
	--bjb-dpill-size:          14px;
	--bjb-dpill-weight:        500;
	--bjb-ddept-text:          #1f3b54;
	--bjb-ddept-bg:            #eef3f8;
	--bjb-dloc-text:           #1f3b54;
	--bjb-dloc-bg:             #eef3f8;
	--bjb-dwork-text:          #1f3b54;
	--bjb-dwork-bg:            #eef3f8;
	--bjb-dtype-text:          #1f3b54;
	--bjb-dtype-bg:            #eef3f8;

	/* Listing/grid excerpt (v1.9) */
	--bjb-excerpt-color:       var(--bjb-color-muted);
	--bjb-excerpt-size:        14px;

	/* Salary / compensation (v1.9.6) */
	--bjb-salary-color:        #1f3b54;
	--bjb-salary-size:         14px;
	--bjb-salary-weight:       600;
	--bjb-dsalary-color:       #1f3b54;
	--bjb-dsalary-size:        18px;
	--bjb-dsalary-weight:      600;
	--bjb-shadow:            0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
	--bjb-shadow-hover:      0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);

	--bjb-space-1: 0.25rem;
	--bjb-space-2: 0.5rem;
	--bjb-space-3: 0.75rem;
	--bjb-space-4: 1rem;
	--bjb-space-5: 1.5rem;
	--bjb-space-6: 2rem;
	--bjb-space-8: 3rem;

	--bjb-fs-sm:  0.875rem;
	--bjb-fs-md:  1rem;
	--bjb-fs-lg:  1.125rem;
	--bjb-fs-xl:  1.375rem;
	--bjb-fs-xxl: 1.75rem;

	--bjb-transition: 180ms ease;

	color: var(--bjb-color-text);
	font-family: var(--bjb-font-family, inherit);
	line-height: 1.5;
	box-sizing: border-box;
}

.bjb *,
.bjb *::before,
.bjb *::after,
.bjb-detail *,
.bjb-detail *::before,
.bjb-detail *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------------------
 *  Filters
 * -------------------------------------------------------------------- */
.bjb__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bjb-space-4);
	align-items: flex-end;
	margin-bottom: var(--bjb-space-4);
	padding: var(--bjb-space-4);
	background: var(--bjb-color-surface-alt);
	border-radius: var(--bjb-radius);
	border: 1px solid var(--bjb-color-border);
}

.bjb__filter-field {
	display: flex;
	flex-direction: column;
	gap: var(--bjb-space-1);
	min-width: 200px;
	flex: 1 1 200px;
}

.bjb__filter-label {
	font-size: var(--bjb-fs-sm);
	font-weight: 600;
	color: var(--bjb-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bjb__filter-select {
	padding: var(--bjb-space-2) var(--bjb-space-3);
	font: inherit;
	font-size: var(--bjb-fs-md);
	color: var(--bjb-color-text);
	background: var(--bjb-color-surface);
	border: 1px solid var(--bjb-color-border);
	border-radius: var(--bjb-radius-sm);
	cursor: pointer;
	transition: border-color var(--bjb-transition);
}

.bjb__filter-select:focus {
	outline: 2px solid var(--bjb-color-accent);
	outline-offset: 1px;
}

.bjb__filter-reset {
	padding: var(--bjb-space-2) var(--bjb-space-4);
	font: inherit;
	font-size: var(--bjb-fs-sm);
	font-weight: 600;
	color: var(--bjb-color-muted);
	background: transparent;
	border: 1px solid var(--bjb-color-border);
	border-radius: var(--bjb-radius-sm);
	cursor: pointer;
	transition: all var(--bjb-transition);
}

.bjb__filter-reset:hover {
	color: var(--bjb-color-text);
	border-color: var(--bjb-color-text);
}

.bjb__count {
	margin: 0 0 var(--bjb-space-5) 0;
	font-size: var(--bjb-fs-sm);
	color: var(--bjb-color-muted);
}

.bjb__no-results {
	padding: var(--bjb-space-6);
	text-align: center;
	color: var(--bjb-color-muted);
	background: var(--bjb-color-surface-alt);
	border-radius: var(--bjb-radius);
}

/* ----------------------------------------------------------------------
 *  Layout: Grid
 * -------------------------------------------------------------------- */
.bjb__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bjb-space-4);
}

.bjb__card {
	margin: 0;
	padding: 0;
	background: var(--bjb-color-surface);
	border: 1px solid var(--bjb-color-border);
	border-radius: var(--bjb-radius);
	box-shadow: var(--bjb-shadow);
	transition: box-shadow var(--bjb-transition), transform var(--bjb-transition);
	overflow: hidden;
}

.bjb__card:hover {
	box-shadow: var(--bjb-shadow-hover);
	transform: translateY(-2px);
}

.bjb__card-link {
	display: flex;
	flex-direction: column;
	gap: var(--bjb-space-3);
	padding: var(--bjb-space-5);
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.bjb__card-title {
	margin: 0;
	font-size: var(--bjb-fs-lg);
	font-weight: 700;
	color: var(--bjb-color-text);
	line-height: 1.3;
}

.bjb__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bjb-space-2);
}

.bjb__meta-item {
	display: inline-block;
	padding: var(--bjb-space-1) var(--bjb-space-3);
	font-size: var(--bjb-fs-sm);
	color: var(--bjb-color-muted);
	background: var(--bjb-color-surface-alt);
	border-radius: 999px;
}

.bjb__meta-item--department {
	color: var(--bjb-color-accent);
	background: color-mix(in srgb, var(--bjb-color-accent) 8%, transparent);
}

.bjb__card-cta {
	margin-top: auto;
	font-size: var(--bjb-fs-sm);
	font-weight: 600;
	color: var(--bjb-color-accent);
}

/* ----------------------------------------------------------------------
 *  Layout: List
 * -------------------------------------------------------------------- */
.bjb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bjb-color-border);
}

.bjb__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bjb-space-4);
	align-items: center;
	padding: var(--bjb-space-4) var(--bjb-space-2);
	border-bottom: 1px solid var(--bjb-color-border);
	transition: background-color var(--bjb-transition);
}

.bjb__row:hover {
	background: var(--bjb-color-hover);
}

.bjb__row-main {
	flex: 2 1 240px;
	min-width: 0;
}

.bjb__row-title {
	margin: 0 0 var(--bjb-space-1) 0;
	font-size: var(--bjb-fs-lg);
	font-weight: 700;
	line-height: 1.3;
}

.bjb__row-title a {
	color: var(--bjb-color-text);
	text-decoration: none;
}

.bjb__row-title a:hover {
	color: var(--bjb-color-accent);
}

.bjb__row-department {
	margin: 0;
	font-size: var(--bjb-fs-sm);
	color: var(--bjb-color-muted);
}

.bjb__row-meta {
	flex: 1 1 200px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bjb-space-2);
	align-items: center;
}

.bjb__row-location {
	font-size: var(--bjb-fs-sm);
	color: var(--bjb-color-muted);
}

.bjb__row-tag {
	padding: var(--bjb-space-1) var(--bjb-space-3);
	font-size: var(--bjb-fs-sm);
	color: var(--bjb-color-muted);
	background: var(--bjb-color-surface-alt);
	border-radius: 999px;
}

.bjb__row-action {
	flex: 0 0 auto;
}

.bjb__row-cta {
	font-size: var(--bjb-fs-sm);
	font-weight: 600;
	color: var(--bjb-color-accent);
	text-decoration: none;
}

/* ----------------------------------------------------------------------
 *  Layout: Table
 * -------------------------------------------------------------------- */
.bjb__table-wrap {
	overflow-x: auto;
	border: 1px solid var(--bjb-color-border);
	border-radius: var(--bjb-radius);
	background: var(--bjb-color-surface);
}

.bjb__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.bjb__table thead th {
	padding: var(--bjb-space-3) var(--bjb-space-4);
	text-align: left;
	font-size: var(--bjb-fs-sm);
	font-weight: 600;
	color: var(--bjb-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--bjb-color-surface-alt);
	border-bottom: 1px solid var(--bjb-color-border);
}

.bjb__table tbody tr {
	transition: background-color var(--bjb-transition);
}

.bjb__table tbody tr:hover {
	background: var(--bjb-color-hover);
}

.bjb__table tbody tr + tr {
	border-top: 1px solid var(--bjb-color-border);
}

.bjb__cell {
	padding: var(--bjb-space-4);
	font-size: var(--bjb-fs-md);
	text-align: left;
	vertical-align: middle;
}

.bjb__cell--title {
	font-weight: 600;
}

.bjb__cell--title a {
	color: var(--bjb-color-text);
	text-decoration: none;
}

.bjb__cell--title a:hover {
	color: var(--bjb-color-accent);
}

.bjb__cell--cta {
	text-align: right;
}

.bjb__table-cta {
	font-size: var(--bjb-fs-sm);
	font-weight: 600;
	color: var(--bjb-color-accent);
	text-decoration: none;
	white-space: nowrap;
}

/* ----------------------------------------------------------------------
 *  Detail view
 * -------------------------------------------------------------------- */
.bjb-detail {
	max-width: var(--bjb-detail-max-width);
	margin: var(--bjb-detail-margin);
	padding: var(--bjb-detail-padding);
}

.bjb-detail__back {
	margin: 0 0 var(--bjb-space-4) 0;
	font-size: var(--bjb-fs-sm);
}

.bjb-detail__back a {
	color: var(--bjb-color-muted);
	text-decoration: none;
	transition: color var(--bjb-transition);
}

.bjb-detail__back a:hover {
	color: var(--bjb-color-accent);
}

.bjb-detail__header {
	margin-bottom: var(--bjb-space-6);
	padding-bottom: var(--bjb-space-5);
	border-bottom: 1px solid var(--bjb-color-border);
}

.bjb-detail__title {
	margin: 0 0 var(--bjb-space-4) 0;
	font-size: var(--bjb-fs-xxl);
	font-weight: 700;
	line-height: 1.2;
}

.bjb-detail__meta {
	list-style: none;
	margin: 0 0 var(--bjb-space-5) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bjb-space-5);
}

.bjb-detail__meta-item {
	display: flex;
	flex-direction: column;
	gap: var(--bjb-space-1);
}

.bjb-detail__meta-label {
	font-size: var(--bjb-fs-sm);
	color: var(--bjb-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bjb-detail__meta-value {
	font-size: var(--bjb-fs-md);
	font-weight: 600;
}

.bjb-detail__apply,
.bjb-detail__footer {
	margin: var(--bjb-space-5) 0 0 0;
}

.bjb-detail__apply-btn {
	display: inline-block;
	padding: var(--bjb-space-3) var(--bjb-space-6);
	font: inherit;
	font-size: var(--bjb-fs-md);
	font-weight: 600;
	color: var(--bjb-color-accent-text);
	background: var(--bjb-color-accent);
	text-decoration: none;
	border-radius: var(--bjb-cta-radius-tl) var(--bjb-cta-radius-tr) var(--bjb-cta-radius-br) var(--bjb-cta-radius-bl);
	transition: opacity var(--bjb-transition), transform var(--bjb-transition);
}

.bjb-detail__apply-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.bjb-detail__body {
	font-size: var(--bjb-fs-md);
	line-height: var(--bjb-detail-body-line-height, 1.7);
}

.bjb-detail__body h1,
.bjb-detail__body h2,
.bjb-detail__body h3,
.bjb-detail__body h4,
.bjb-detail__body h5,
.bjb-detail__body h6 {
	margin-top: var(--bjb-space-6);
	margin-bottom: var(--bjb-space-3);
	color: var(--bjb-detail-body-heading-color, #1f3b54);
	font-size: var(--bjb-detail-body-heading-size, 20px);
	font-weight: var(--bjb-detail-body-heading-weight, 600);
}

.bjb-detail__body p,
.bjb-detail__body ul,
.bjb-detail__body ol {
	margin: 0 0 var(--bjb-detail-body-para-gap, 16px) 0;
}

.bjb-detail__body ul,
.bjb-detail__body ol {
	padding-left: var(--bjb-space-5);
}

/* List item spacing. Kula wraps each <li> in a <p>; that inner paragraph would
 * otherwise inherit the full paragraph gap and blow the bullets apart. Zero the
 * inner <p> margin and apply a dedicated, tunable gap to the <li> instead. */
.bjb-detail__body li {
	margin-bottom: var(--bjb-detail-body-li-gap, 4px);
}

.bjb-detail__body li > p {
	margin: 0;
}

.bjb-detail__body li:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------------
 *  Empty state
 * -------------------------------------------------------------------- */
.bjb-empty {
	padding: var(--bjb-space-8) var(--bjb-space-4);
	text-align: center;
	background: var(--bjb-color-surface-alt);
	border-radius: var(--bjb-radius);
}

.bjb-empty__message {
	margin: 0;
	color: var(--bjb-color-muted);
}

.bjb-empty__detail {
	margin-top: var(--bjb-space-3);
	font-size: var(--bjb-fs-sm);
}

/* ----------------------------------------------------------------------
 *  Responsive
 * -------------------------------------------------------------------- */
@media (max-width: 600px) {
	.bjb__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.bjb__row-action {
		align-self: flex-end;
	}

	.bjb-detail__meta {
		gap: var(--bjb-space-3);
	}

	.bjb-detail__title {
		font-size: var(--bjb-fs-xl);
	}
}

/* Hide elements with the [hidden] attribute (defense for theme resets that miss it) */
.bjb [hidden] {
	display: none !important;
}

/* =============================================================================
 *  Application form (v1.1+)
 *  ---------------------------------------------------------------------------
 *  Uses the same --bjb-* design tokens declared at the top of this file.
 *  Restyle by overriding those variables in your theme — no need to touch
 *  these rules directly.
 * ========================================================================= */

.bjb-form {
	margin: var(--bjb-space-8) 0 var(--bjb-space-6);
	padding: var(--bjb-space-6);
	background: var(--bjb-color-surface-alt);
	border: 1px solid var(--bjb-color-border);
	border-radius: var(--bjb-radius);
	color: var(--bjb-color-text);
}

.bjb-form__heading {
	font-size: var(--bjb-fs-xl);
	margin: 0 0 var(--bjb-space-5);
	padding-bottom: var(--bjb-space-4);
	border-bottom: 1px solid var(--bjb-color-border);
}

.bjb-form__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bjb-space-5);
}

@media (max-width: 640px) {
	.bjb-form__form {
		grid-template-columns: 1fr;
	}
}

.bjb-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--bjb-space-2);
}

/* Some fields should always span the full width */
.bjb-form__field--textarea,
.bjb-form__field--file,
.bjb-form__field--multi_select,
.bjb-form__field--turnstile,
.bjb-form__field--yes_no {
	grid-column: 1 / -1;
}

.bjb-form__label {
	font-size: var(--bjb-fs-sm);
	font-weight: 600;
	color: var(--bjb-color-text);
}

.bjb-form__required {
	color: #c0392b;
	margin-left: 2px;
}

.bjb-form__input {
	width: 100%;
	padding: var(--bjb-space-3) var(--bjb-space-4);
	background: var(--bjb-color-surface);
	border: 1px solid var(--bjb-color-border);
	border-radius: var(--bjb-radius-sm);
	font-size: var(--bjb-fs-md);
	font-family: inherit;
	color: var(--bjb-color-text);
	transition: border-color var(--bjb-transition), box-shadow var(--bjb-transition);
	box-sizing: border-box;
}

.bjb-form__input:focus,
.bjb-form__input:focus-visible {
	outline: none;
	border-color: var(--bjb-color-accent);
	box-shadow: 0 0 0 3px rgba(11, 107, 203, 0.15);
}

.bjb-form__input--textarea {
	resize: vertical;
	min-height: 7em;
	line-height: 1.5;
}

.bjb-form__input--select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--bjb-color-muted) 50%),
	                  linear-gradient(135deg, var(--bjb-color-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 13px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--bjb-space-6);
}

.bjb-form__input--file {
	padding: var(--bjb-space-2);
	font-size: var(--bjb-fs-sm);
}

.bjb-form__checkgroup {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bjb-space-3) var(--bjb-space-5);
}

.bjb-form__checkitem {
	display: inline-flex;
	align-items: center;
	gap: var(--bjb-space-2);
	font-size: var(--bjb-fs-md);
	cursor: pointer;
}

.bjb-form__help {
	margin: 0;
	font-size: var(--bjb-fs-sm);
	color: var(--bjb-color-muted);
}

.bjb-form__hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bjb-form__status {
	grid-column: 1 / -1;
	min-height: 1.5em;
}

.bjb-form__status--error {
	padding: var(--bjb-space-3) var(--bjb-space-4);
	background: #fdecea;
	border: 1px solid #f5c2bf;
	border-radius: var(--bjb-radius-sm);
	color: #8a1c12;
	font-size: var(--bjb-fs-sm);
}

.bjb-form__actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	padding-top: var(--bjb-space-3);
	border-top: 1px solid var(--bjb-color-border);
	margin-top: var(--bjb-space-2);
}

.bjb-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bjb-space-2);
	min-width: 200px;
	padding: var(--bjb-space-3) var(--bjb-space-6);
	background: var(--bjb-color-accent);
	color: var(--bjb-color-accent-text);
	border: 0;
	border-radius: var(--bjb-radius-sm);
	font-size: var(--bjb-fs-md);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background var(--bjb-transition), transform var(--bjb-transition);
}

.bjb-form__submit:hover:not([disabled]) {
	transform: translateY(-1px);
	filter: brightness(0.95);
}

.bjb-form__submit:focus-visible {
	outline: 3px solid rgba(11, 107, 203, 0.4);
	outline-offset: 2px;
}

.bjb-form__submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.bjb-form__success {
	padding: var(--bjb-space-6);
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: var(--bjb-radius);
	color: #065f46;
}

.bjb-form__success-heading {
	margin: 0 0 var(--bjb-space-3);
	font-size: var(--bjb-fs-xl);
}

.bjb-form__success-text {
	margin: 0;
	font-size: var(--bjb-fs-md);
	line-height: 1.6;
}

/* ----------------------------------------------------------------------
 *  Inline filter bar — pills + dropdowns (v1.2)
 *  Appended last so these rules win over the earlier base .bjb__filters.
 * -------------------------------------------------------------------- */
.bjb__filters {
	background: var(--bjb-color-filter-bg);
	align-items: flex-end;
}

/* Pills: everything on one inline row, wrapping when space runs out. */
.bjb__filters--pills {
	align-items: center;
	gap: var(--bjb-space-3) var(--bjb-space-5);
}

.bjb__filter-group {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bjb-space-2);
}

.bjb__filter-grouplabel {
	font-size: var(--bjb-fs-sm);
	font-weight: 600;
	color: var(--bjb-color-muted);
	margin-right: var(--bjb-space-1);
}

.bjb__pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--bjb-space-2);
}

.bjb__pill {
	font: inherit;
	font-size: var(--bjb-fs-sm);
	line-height: 1.2;
	padding: 0.4rem 0.85rem;
	color: var(--bjb-color-text);
	background: var(--bjb-color-surface);
	border: 1px solid var(--bjb-color-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--bjb-transition), border-color var(--bjb-transition), color var(--bjb-transition);
}

.bjb__pill:hover {
	border-color: var(--bjb-color-accent);
}

.bjb__pill.is-active {
	background: var(--bjb-color-accent);
	border-color: var(--bjb-color-accent);
	color: var(--bjb-color-accent-text);
}

.bjb__pill:focus-visible {
	outline: 2px solid var(--bjb-color-accent);
	outline-offset: 2px;
}

/* Dropdowns: inline columns across the bar, wrapping on narrow viewports. */
.bjb__filters--dropdown .bjb__filter-field {
	flex: 0 1 220px;
	min-width: 160px;
}

/* Bliss-style "blob" corner on the primary call-to-action buttons. */
.bjb__row-cta,
.bjb__table-cta {
	color: var(--bjb-color-accent);
}

.bjb__card-cta {
	color: var(--bjb-color-accent);
}

/* Mobile: stack each pill group on its own line for easier tapping. */
@media (max-width: 600px) {
	.bjb__filters--pills {
		align-items: stretch;
		flex-direction: column;
		gap: var(--bjb-space-3);
	}
	.bjb__filter-group {
		width: 100%;
	}
}

/* ======================================================================
 *  v1.3 — visual fidelity (boxed list cards, filter divider) and
 *  theme-override hardening. These rules are scoped with .bjb and a few
 *  use !important specifically to win against aggressive theme button
 *  styles (e.g. Elementor global buttons). Values still reference tokens,
 *  so everything stays editable from the Display & Branding settings.
 * ==================================================================== */

/* List layout rendered as stacked, boxed cards with spacing. */
.bjb .bjb__list {
	display: flex;
	flex-direction: column;
	gap: var(--bjb-card-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bjb .bjb__list .bjb__row {
	background: var(--bjb-color-surface);
	border: 1px solid var(--bjb-color-border);
	border-radius: var(--bjb-radius);
	padding: var(--bjb-card-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	transition: border-color var(--bjb-transition), box-shadow var(--bjb-transition);
}

.bjb .bjb__list .bjb__row:hover {
	border-color: var(--bjb-color-accent);
	box-shadow: var(--bjb-shadow);
}

.bjb .bjb__row-title a {
	font-size: var(--bjb-title-size);
	font-weight: var(--bjb-title-weight);
	color: var(--bjb-color-title);
	text-decoration: none;
}

.bjb .bjb__row-title a:hover {
	color: var(--bjb-color-accent);
}

/* Card (grid) titles share the title tokens too. */
.bjb .bjb__card-title {
	font-size: var(--bjb-title-size);
	font-weight: var(--bjb-title-weight);
	color: var(--bjb-color-title);
}

/* Divider between pill filter groups, matching the mockup. */
.bjb__filters--pills .bjb__filter-group + .bjb__filter-group {
	border-left: 1px solid var(--bjb-color-border);
	padding-left: var(--bjb-space-5);
}

/* ---- Theme-override hardening for buttons (pills + reset) ---- */
.bjb .bjb__pill,
.bjb .bjb__filter-reset {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	cursor: pointer;
}

.bjb .bjb__pill {
	background: var(--bjb-color-surface) !important;
	color: var(--bjb-color-text) !important;
	border: 1px solid var(--bjb-color-border) !important;
	border-radius: 999px !important;
	padding: var(--bjb-pill-padding) !important;
	font-size: var(--bjb-pill-fs) !important;
	font-weight: 500 !important;
}

.bjb .bjb__pill:hover {
	border-color: var(--bjb-color-accent) !important;
}

.bjb .bjb__pill.is-active {
	background: var(--bjb-color-accent) !important;
	border-color: var(--bjb-color-accent) !important;
	color: var(--bjb-color-accent-text) !important;
}

.bjb .bjb__filter-reset {
	background: transparent !important;
	color: var(--bjb-color-muted) !important;
	border: 1px solid var(--bjb-color-border) !important;
	border-radius: 999px !important;
	padding: var(--bjb-pill-padding) !important;
	font-size: var(--bjb-fs-sm) !important;
	font-weight: 500 !important;
}

.bjb .bjb__filter-reset:hover {
	border-color: var(--bjb-color-accent) !important;
	color: var(--bjb-color-accent) !important;
}

@media (max-width: 600px) {
	.bjb__filters--pills .bjb__filter-group + .bjb__filter-group {
		border-left: 0;
		padding-left: 0;
	}
	.bjb .bjb__list .bjb__row {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.75rem;
	}
	.bjb .bjb__list .bjb__row-main {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
	}
	.bjb .bjb__list .bjb__row-action {
		flex: 0 0 auto;
		width: auto;
		align-self: flex-start;
	}
}

/* ======================================================================
 *  v1.4 — per-element typography tokens (subtitle, meta/tags, CTA, count)
 * ==================================================================== */
.bjb .bjb__row-department,
.bjb .bjb__meta-item--department {
	color: var(--bjb-color-subtitle);
	font-size: var(--bjb-subtitle-size);
	font-weight: var(--bjb-subtitle-weight);
}

.bjb .bjb__row-location,
.bjb .bjb__meta-item--location,
.bjb .bjb__meta-item--workplace,
.bjb .bjb__meta-item--employment {
	font-size: var(--bjb-meta-size);
}

.bjb .bjb__row-tag {
	font-size: var(--bjb-meta-size);
	background: var(--bjb-color-tag-bg);
	color: var(--bjb-color-tag-text);
}

.bjb .bjb__row-cta,
.bjb .bjb__table-cta,
.bjb .bjb__card-cta {
	color: var(--bjb-color-cta) !important;
	font-size: var(--bjb-cta-size);
	font-weight: var(--bjb-cta-weight);
}

.bjb .bjb__count {
	color: var(--bjb-color-count);
	font-size: var(--bjb-count-size);
}

/* ======================================================================
 *  v1.5 — per-type meta pills (location, workplace, employment), each
 *  independently styleable. Appended last so these win over the shared
 *  v1.4 tag rules.
 * ==================================================================== */
.bjb .bjb__row-location,
.bjb .bjb__meta-item--location {
	display: inline-block;
	background: var(--bjb-loc-bg);
	color: var(--bjb-loc-text);
	font-size: var(--bjb-loc-size);
	font-weight: var(--bjb-loc-weight);
	padding: 2px 11px;
	border-radius: 999px;
	line-height: 1.6;
}

.bjb .bjb__row-tag--workplace,
.bjb .bjb__meta-item--workplace {
	background: var(--bjb-work-bg);
	color: var(--bjb-work-text);
	font-size: var(--bjb-work-size);
	font-weight: var(--bjb-work-weight);
	padding: 2px 11px;
	border-radius: 999px;
	line-height: 1.6;
}

.bjb .bjb__row-tag--employment,
.bjb .bjb__meta-item--employment {
	background: var(--bjb-emp-bg);
	color: var(--bjb-emp-text);
	font-size: var(--bjb-emp-size);
	font-weight: var(--bjb-emp-weight);
	padding: 2px 11px;
	border-radius: 999px;
	line-height: 1.6;
}

/* ======================================================================
 *  v1.9.9 — inline tag row (department + tags + salary), department pill,
 *  and a shared, settable border on every card pill.
 * ==================================================================== */
.bjb .bjb__row-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bjb-space-2);
	margin: 0 0 var(--bjb-space-2);
}

/* Department rendered as a pill (when enabled in settings). */
.bjb .bjb__row-tag--department {
	display: inline-block;
	background: var(--bjb-dept-bg);
	color: var(--bjb-dept-text);
	font-size: var(--bjb-subtitle-size);
	font-weight: var(--bjb-subtitle-weight);
	padding: 2px 11px;
	border-radius: 999px;
	line-height: 1.6;
}

/* Salary sits inline, immediately after the pills. */
.bjb .bjb__row-tags .bjb__row-salary {
	margin: 0;
	line-height: 1.6;
	white-space: nowrap;
}

/* Settable border applied to every card pill (width 0 = no border). */
.bjb .bjb__row-tag,
.bjb .bjb__row-location,
.bjb .bjb__meta-item--location,
.bjb .bjb__meta-item--workplace,
.bjb .bjb__meta-item--employment {
	border: var(--bjb-pill-border-width) solid var(--bjb-pill-border-color);
}

/* ======================================================================
 *  v1.6 — "View" link is now a fully styleable button (background,
 *  border width/color, radius, padding) in addition to text color,
 *  size, and weight. Appended last to win over the v1.4 CTA rule.
 *  With the default transparent background and 0px border it still
 *  reads as a text link until you give it a fill or border.
 * ==================================================================== */
.bjb .bjb__row-cta,
.bjb .bjb__table-cta,
.bjb .bjb__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bjb-cta-bg) !important;
	border: var(--bjb-cta-border-width) solid var(--bjb-cta-border-color) !important;
	border-radius: var(--bjb-cta-radius-tl) var(--bjb-cta-radius-tr) var(--bjb-cta-radius-br) var(--bjb-cta-radius-bl) !important;
	padding: var(--bjb-cta-pad-y) var(--bjb-cta-pad-x) !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	width: auto !important;
	transition: filter var(--bjb-transition), border-color var(--bjb-transition);
}

.bjb .bjb__row-cta:hover,
.bjb .bjb__table-cta:hover,
.bjb .bjb__card-cta:hover {
	filter: brightness(0.94);
}

/* ======================================================================
 *  v1.7 — grid capped at 3 columns (4 was too crammed), stepping down to
 *  2 then 1 on smaller viewports.
 * ==================================================================== */
@media (max-width: 1024px) {
	.bjb .bjb__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.bjb .bjb__grid {
		grid-template-columns: 1fr;
	}
}

/* ======================================================================
 *  v1.8 — Job Detail page: full per-element control + width/responsive.
 *  The apply button is hardened with !important so the theme's global
 *  link/button colors cannot override the configured button colors
 *  (which is what made the button text near-invisible).
 * ==================================================================== */
.bjb-detail__back a {
	color: var(--bjb-detail-back-color);
}

.bjb-detail__title {
	color: var(--bjb-detail-title-color);
	font-size: var(--bjb-detail-title-size);
	font-weight: var(--bjb-detail-title-weight);
}

.bjb-detail__meta-label {
	color: var(--bjb-detail-label-color);
	font-size: var(--bjb-detail-label-size);
}

.bjb-detail__meta-value {
	color: var(--bjb-detail-value-color);
	font-size: var(--bjb-detail-value-size);
}

.bjb-detail__body {
	color: var(--bjb-detail-body-color);
	font-size: var(--bjb-detail-body-size);
}

.bjb-detail .bjb-detail__apply-btn {
	display: inline-block;
	background: var(--bjb-detail-btn-bg) !important;
	color: var(--bjb-detail-btn-text) !important;
	border: var(--bjb-detail-btn-border-width) solid var(--bjb-detail-btn-border-color) !important;
	border-radius: var(--bjb-cta-radius-tl) var(--bjb-cta-radius-tr) var(--bjb-cta-radius-br) var(--bjb-cta-radius-bl) !important;
	padding: var(--bjb-detail-btn-padding) !important;
	font-size: var(--bjb-detail-btn-size) !important;
	font-weight: var(--bjb-detail-btn-weight) !important;
	text-decoration: none !important;
	text-shadow: none !important;
	line-height: 1.2 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Mobile: keep the detail content from overflowing and stack the meta grid. */
@media (max-width: 640px) {
	.bjb-detail__meta {
		gap: var(--bjb-space-4);
	}
	.bjb-detail__apply-btn {
		display: block !important;
		text-align: center;
	}
}

/* ======================================================================
 *  v1.9 — grid card consistency, full-width button centering, excerpts,
 *  and Job Detail meta pills.
 * ==================================================================== */

/* Full-width (grid) View button: center the label. List/table View stay inline. */
.bjb .bjb__card-cta {
	justify-content: center;
	text-align: center;
}

/* Equal-height grid cards with three clearly separated rows:
 * header (title + optional excerpt) at top, pills in the middle, button at
 * the bottom. The card stretches to the tallest in its row; margin-top:auto
 * on the meta keeps the button pinned to the bottom regardless of content. */
.bjb .bjb__card {
	height: 100%;
}
.bjb .bjb__card-link {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--bjb-space-3);
}
.bjb .bjb__card-link .bjb__meta {
	margin-top: var(--bjb-space-2);
}
.bjb .bjb__card-link .bjb__card-cta {
	margin-top: auto;
}

/* Short description / excerpt */
.bjb .bjb__card-excerpt,
.bjb .bjb__row-excerpt {
	color: var(--bjb-excerpt-color);
	font-size: var(--bjb-excerpt-size);
	line-height: 1.5;
	margin: 0;
}

/* Salary / compensation (v1.9.6) */
.bjb .bjb__card-salary,
.bjb .bjb__row-salary {
	color: var(--bjb-salary-color);
	font-size: var(--bjb-salary-size);
	font-weight: var(--bjb-salary-weight);
	line-height: 1.4;
	margin: 0;
}
.bjb .bjb__cell--salary {
	color: var(--bjb-salary-color);
	font-size: var(--bjb-salary-size);
	font-weight: var(--bjb-salary-weight);
	white-space: nowrap;
}
.bjb-detail__salary {
	color: var(--bjb-dsalary-color);
	font-size: var(--bjb-dsalary-size);
	font-weight: var(--bjb-dsalary-weight);
	line-height: 1.3;
	margin: 0 0 0.6em;
}

/* Job Detail meta values rendered as pills, styleable per type. */
.bjb-detail__meta-value {
	display: inline-block;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: var(--bjb-dpill-size);
	font-weight: var(--bjb-dpill-weight);
}
.bjb-detail__meta-item--department .bjb-detail__meta-value {
	color: var(--bjb-ddept-text);
	background: var(--bjb-ddept-bg);
}
.bjb-detail__meta-item--location .bjb-detail__meta-value {
	color: var(--bjb-dloc-text);
	background: var(--bjb-dloc-bg);
}
.bjb-detail__meta-item--workplace .bjb-detail__meta-value {
	color: var(--bjb-dwork-text);
	background: var(--bjb-dwork-bg);
}
.bjb-detail__meta-item--type .bjb-detail__meta-value {
	color: var(--bjb-dtype-text);
	background: var(--bjb-dtype-bg);
}