/**
 * Job Portal — front end.
 * Scoped under .hrbs-portal so it cannot leak into the theme.
 */

.hrbs-portal {
	/* Palette — every one of these is overridable from HRBS Jobs → Design. */
	--hrbs-navy: #12284c;
	--hrbs-navy-soft: #1b3a6b;
	--hrbs-blue: #2f55a4;
	--hrbs-blue-light: #e8effb;
	--hrbs-bg: #f4f7fc;
	--hrbs-card: #ffffff;
	--hrbs-line: #e3eaf5;
	--hrbs-text: #1c2b44;
	--hrbs-muted: #6b7c99;

	/* Component colours, independent of the palette above. */
	--hrbs-btn-bg: var(--hrbs-navy);
	--hrbs-btn-text: #ffffff;
	--hrbs-btn-hover: var(--hrbs-navy-soft);
	--hrbs-badge-bg: var(--hrbs-blue);
	--hrbs-badge-text: #ffffff;
	--hrbs-chip-bg: var(--hrbs-blue-light);
	--hrbs-chip-text: #3c5a8c;
	--hrbs-accent-bar: var(--hrbs-blue);

	/* Typography */
	--hrbs-font: inherit;
	--hrbs-fs-base: 15px;
	--hrbs-fs-heading: 34px;
	--hrbs-fs-card-title: 22px;
	--hrbs-fs-detail-title: 34px;
	--hrbs-fw-title: 700;

	/* Layout */
	--hrbs-list-width: 420px;
	--hrbs-gap: 26px;
	--hrbs-radius: 18px;
	--hrbs-radius-sm: 10px;
	--hrbs-card-radius: 14px;

	/* Buttons */
	--hrbs-btn-radius: 8px;
	--hrbs-btn-pad-y: 18px;
	--hrbs-btn-pad-x: 38px;
	--hrbs-btn-fs: 14px;
	--hrbs-btn-fw: 700;
	--hrbs-btn-spacing: 0px;
	--hrbs-btn-transform: none;
	--hrbs-btn-border-width: 0px;
	--hrbs-btn-border-color: transparent;
	--hrbs-btn-margin: 0px;
	--hrbs-search-height: 56px;
	--hrbs-search-pad-x: 46px;
	--hrbs-search-radius: 10px;
	--hrbs-clear-text: #6b7c99;

	--hrbs-panel-height: 1100px;
	--hrbs-shadow: 0 8px 30px rgba(18, 40, 76, .07);

	box-sizing: border-box;
	color: var(--hrbs-text);
	font-family: var(--hrbs-font);
	font-size: var(--hrbs-fs-base);
	line-height: 1.6;
	position: relative;
}

.hrbs-portal *,
.hrbs-portal *::before,
.hrbs-portal *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------- Filters */

.hrbs-filters {
	background: var(--hrbs-bg);
	border-radius: var(--hrbs-radius);
	padding: 22px;
	margin-bottom: 40px;
}

.hrbs-filters__search {
	display: grid;
	grid-template-columns: 1.6fr 1fr auto;
	gap: 14px;
	margin-bottom: 20px;
}

.hrbs-input {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0 18px;
	min-height: 56px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hrbs-input:focus-within {
	border-color: var(--hrbs-blue);
	box-shadow: 0 0 0 3px rgba(47, 85, 164, .12);
}

.hrbs-input svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	fill: var(--hrbs-navy);
	margin-right: 12px;
}

/* Themes style bare inputs heavily (borders, inset shadows, min-heights). The
   doubled prefix plus the type selectors keeps ours on top so the field looks
   like part of the rounded pill instead of a box inside a box. */
.hrbs-portal .hrbs-input input,
.hrbs-portal .hrbs-input input[type="text"],
.hrbs-portal .hrbs-input input[type="search"] {
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	background-image: none;
	width: 100%;
	font-family: var(--hrbs-font);
	font-size: var(--hrbs-fs-base);
	line-height: 1.4;
	color: var(--hrbs-text);
	padding: 0;
	margin: 0;
	min-height: 0;
	height: auto;
	box-shadow: none !important;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Chrome/Safari draw their own clear button and inner spin area on search. */
.hrbs-portal .hrbs-input input[type="search"]::-webkit-search-decoration,
.hrbs-portal .hrbs-input input[type="search"]::-webkit-search-cancel-button,
.hrbs-portal .hrbs-input input[type="search"]::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
}

.hrbs-portal .hrbs-input input:focus {
	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	background: transparent !important;
}

.hrbs-portal .hrbs-input input::placeholder {
	color: #a9b6cc;
	opacity: 1;
}

.hrbs-filters__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	gap: 16px;
	align-items: end;
}

.hrbs-filters__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--hrbs-muted);
	margin-bottom: 8px;
}

.hrbs-portal .hrbs-select,
.hrbs-portal select.hrbs-select {
	width: 100%;
	min-height: 46px;
	height: auto;
	border: 0 !important;
	border-radius: var(--hrbs-radius-sm);
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7c99'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
	background-size: 20px;
	padding: 0 40px 0 16px;
	font-family: var(--hrbs-font);
	font-size: var(--hrbs-fs-base);
	color: var(--hrbs-text);
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.hrbs-portal .hrbs-select:focus {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(47, 85, 164, .12) !important;
}

.hrbs-portal .hrbs-select:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Doubled prefix + !important so theme/Elementor global "button" tag styling
   (background, padding, radius) cannot repaint this into a solid button. */
.hrbs-portal .hrbs-clear,
.hrbs-portal button.hrbs-clear {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	font-family: var(--hrbs-font);
	font-size: var(--hrbs-fs-base);
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: var(--hrbs-clear-text);
	padding: 0 4px !important;
	margin: 0;
	min-height: 46px;
}

.hrbs-portal .hrbs-clear:hover,
.hrbs-portal button.hrbs-clear:hover {
	background: transparent !important;
	color: var(--hrbs-navy);
}

.hrbs-clear svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	stroke: currentColor;
}

/* ------------------------------------------------------------------ Head */

.hrbs-portal__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.hrbs-portal__heading {
	font-size: var(--hrbs-fs-heading);
	line-height: 1.2;
	font-weight: var(--hrbs-fw-title);
	font-family: var(--hrbs-font);
	color: var(--hrbs-navy);
	margin: 0;
}

.hrbs-portal__count {
	margin: 0;
	color: var(--hrbs-muted);
	font-size: 14px;
}

/* ---------------------------------------------------------------- Layout */

.hrbs-portal__layout {
	display: grid;
	grid-template-columns: minmax(280px, var(--hrbs-list-width)) 1fr;
	gap: var(--hrbs-gap);
	align-items: start;
}

.hrbs-portal.is-busy {
	pointer-events: none;
}

.hrbs-portal.is-busy .hrbs-portal__layout {
	opacity: .55;
	transition: opacity .15s ease;
}

/* ------------------------------------------------------------------ List */

.hrbs-list {
	background: var(--hrbs-bg);
	border-radius: var(--hrbs-radius);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: var(--hrbs-panel-height);
	overflow-y: auto;
	scrollbar-width: thin;
}

.hrbs-list::-webkit-scrollbar {
	width: 6px;
}

.hrbs-list::-webkit-scrollbar-thumb {
	background: #c9d6ea;
	border-radius: 999px;
}

.hrbs-card {
	position: relative;
	background: var(--hrbs-card);
	border-radius: var(--hrbs-card-radius);
	padding: 20px 20px 18px;
	cursor: pointer;
	outline: none;
	transition: box-shadow .18s ease, transform .18s ease;
}

.hrbs-card::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 12px;
	bottom: 12px;
	width: 6px;
	border-radius: 999px;
	background: var(--hrbs-accent-bar);
	opacity: 0;
	transition: opacity .18s ease;
}

.hrbs-card:hover {
	box-shadow: var(--hrbs-shadow);
}

.hrbs-card.is-active {
	box-shadow: var(--hrbs-shadow);
}

.hrbs-card.is-active::before,
.hrbs-card:focus-visible::before {
	opacity: 1;
}

.hrbs-card:focus-visible {
	box-shadow: 0 0 0 3px rgba(47, 85, 164, .25);
}

.hrbs-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
	min-height: 0;
}

/* Only reserve badge height on cards that actually have a badge — otherwise the
   row collapsed to just the timestamp, leaving dead space above the title. */
.hrbs-card--featured .hrbs-card__top {
	margin-bottom: 12px;
	min-height: 30px;
}

.hrbs-badge {
	display: inline-block;
	background: var(--hrbs-badge-bg);
	color: var(--hrbs-badge-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 7px 16px;
	border-radius: 999px;
}

.hrbs-card__date {
	font-size: 13px;
	color: var(--hrbs-muted);
	white-space: nowrap;
}

.hrbs-card__title {
	font-size: var(--hrbs-fs-card-title);
	font-weight: var(--hrbs-fw-title);
	font-family: var(--hrbs-font);
	color: var(--hrbs-navy);
	margin: 0 0 8px;
	line-height: 1.25;
}

.hrbs-card__meta,
.hrbs-detail__meta {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--hrbs-blue);
	font-weight: 500;
}

.hrbs-dot {
	display: inline-block;
	margin: 0 8px;
	color: #b6c4da;
}

.hrbs-card__excerpt {
	margin: 0 0 14px;
	font-size: 14px;
	color: #5a6b86;
	line-height: 1.55;
}

.hrbs-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hrbs-chip {
	background: var(--hrbs-chip-bg);
	color: var(--hrbs-chip-text);
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 8px;
	white-space: nowrap;
}

.hrbs-list__more {
	text-align: center;
	margin-top: 18px;
}

/* ---------------------------------------------------------------- Detail */

.hrbs-detail {
	background: var(--hrbs-bg);
	border-radius: var(--hrbs-radius);
	padding: 22px;
	max-height: var(--hrbs-panel-height);
	overflow-y: auto;
	scrollbar-width: thin;
}

.hrbs-detail::-webkit-scrollbar {
	width: 6px;
}

.hrbs-detail::-webkit-scrollbar-thumb {
	background: #c9d6ea;
	border-radius: 999px;
}

.hrbs-detail__inner {
	background: var(--hrbs-card);
	border-radius: var(--hrbs-card-radius);
	padding: 30px;
}

.hrbs-detail__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.hrbs-detail__headline {
	flex: 1 1 320px;
	min-width: 0;
}

.hrbs-detail__title {
	font-size: var(--hrbs-fs-detail-title);
	line-height: 1.2;
	font-weight: var(--hrbs-fw-title);
	font-family: var(--hrbs-font);
	color: var(--hrbs-navy);
	margin: 12px 0 0;
	word-break: break-word;
}

.hrbs-detail__company {
	margin: 6px 0 0;
	color: var(--hrbs-muted);
	font-size: 15px;
}

.hrbs-detail__cta {
	text-align: right;
	flex: 0 0 auto;
}

.hrbs-detail__stats {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--hrbs-muted);
}

.hrbs-detail__subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--hrbs-navy);
}

.hrbs-detail__subhead .hrbs-detail__meta {
	margin: 0;
}

.hrbs-detail__facts {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.hrbs-detail__facts li {
	background: #fff;
	border: 1px solid var(--hrbs-line);
	border-radius: var(--hrbs-radius-sm);
	padding: 12px 14px;
}

.hrbs-detail__facts span {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--hrbs-muted);
	margin-bottom: 4px;
}

.hrbs-detail__facts strong {
	color: var(--hrbs-navy);
	font-size: 15px;
}

.hrbs-detail__section {
	font-size: 19px;
	font-weight: 700;
	color: var(--hrbs-blue);
	margin: 28px 0 12px;
}

.hrbs-detail__content {
	font-size: 14.5px;
	line-height: 1.7;
	color: #33445e;
}

.hrbs-detail__content h1,
.hrbs-detail__content h2,
.hrbs-detail__content h3,
.hrbs-detail__content h4 {
	color: var(--hrbs-navy);
	margin: 22px 0 10px;
	font-size: 16px;
	font-weight: 700;
}

.hrbs-detail__content ul,
.hrbs-detail__content ol {
	padding-left: 20px;
	margin: 10px 0;
}

.hrbs-detail__content li {
	margin-bottom: 6px;
}

.hrbs-detail__content p {
	margin: 0 0 12px;
}

.hrbs-detail__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--hrbs-radius-sm);
}

.hrbs-detail__content table {
	width: 100%;
	overflow-x: auto;
	display: block;
}

.hrbs-detail__foot {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--hrbs-line);
}

.hrbs-detail__empty,
.hrbs-noresults {
	background: var(--hrbs-card);
	border-radius: var(--hrbs-card-radius);
	padding: 60px 30px;
	text-align: center;
	color: var(--hrbs-muted);
}

.hrbs-noresults__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--hrbs-navy);
	margin: 0 0 8px;
}

.hrbs-noresults__text {
	margin: 0 0 18px;
}

/* --------------------------------------------------------------- Buttons */

/* Doubled `.hrbs-portal` prefix raises specificity above theme/Elementor button
   rules (.elementor-button, .theme .button …) which otherwise repaint these. */
.hrbs-portal .hrbs-btn,
.hrbs-portal a.hrbs-btn,
.hrbs-portal button.hrbs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--hrbs-font);
	font-size: var(--hrbs-btn-fs);
	font-weight: var(--hrbs-btn-fw);
	line-height: 1.4;
	border: var(--hrbs-btn-border-width) solid var(--hrbs-btn-border-color);
	border-radius: var(--hrbs-btn-radius);
	cursor: pointer;
	text-decoration: none;
	text-transform: var(--hrbs-btn-transform);
	letter-spacing: var(--hrbs-btn-spacing);
	padding: var(--hrbs-btn-pad-y) var(--hrbs-btn-pad-x);
	margin: var(--hrbs-btn-margin);
	transition: background-color .16s ease, color .16s ease;
	transform: none !important;
	animation: none !important;
}

/* Neutralise any theme/page-builder hover lift, pulse or shadow on every
   button in the portal — only the background/text colour fade above remains. */
.hrbs-portal .hrbs-btn:hover,
.hrbs-portal a.hrbs-btn:hover,
.hrbs-portal button.hrbs-btn:hover,
.hrbs-portal .hrbs-btn:focus,
.hrbs-portal a.hrbs-btn:focus,
.hrbs-portal button.hrbs-btn:focus,
.hrbs-portal .hrbs-btn:focus-visible,
.hrbs-portal .hrbs-btn:active,
.hrbs-portal a.hrbs-btn:active,
.hrbs-portal button.hrbs-btn:active {
	transform: none !important;
	animation: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	top: auto !important;
	left: auto !important;
	filter: none !important;
}

/* A theme that fakes a hover "lift" with margin/padding instead of transform
   changes real layout, which nudges everything around the button. Pin the box
   metrics per variant (they differ) so hovering can only change colour. */
.hrbs-portal .hrbs-btn--apply:hover,
.hrbs-portal a.hrbs-btn--apply:hover,
.hrbs-portal button.hrbs-btn--apply:hover,
.hrbs-portal .hrbs-btn--apply:active,
.hrbs-portal button.hrbs-btn--apply:active {
	padding: var(--hrbs-btn-pad-y) var(--hrbs-btn-pad-x) !important;
	margin: var(--hrbs-btn-margin) !important;
	border-width: var(--hrbs-btn-border-width) !important;
	font-size: var(--hrbs-btn-fs) !important;
	font-weight: var(--hrbs-btn-fw) !important;
	letter-spacing: var(--hrbs-btn-spacing) !important;
}

.hrbs-portal .hrbs-btn--ghost:hover,
.hrbs-portal button.hrbs-btn--ghost:hover,
.hrbs-portal .hrbs-btn--ghost:active,
.hrbs-portal button.hrbs-btn--ghost:active {
	padding: var(--hrbs-btn-pad-y) var(--hrbs-btn-pad-x) !important;
	margin: var(--hrbs-btn-margin) !important;
	border: 1px solid var(--hrbs-line) !important;
	font-size: var(--hrbs-btn-fs) !important;
	font-weight: var(--hrbs-btn-fw) !important;
	letter-spacing: var(--hrbs-btn-spacing) !important;
}

.hrbs-portal .hrbs-btn--search:hover,
.hrbs-portal button.hrbs-btn--search:hover,
.hrbs-portal .hrbs-btn--search:active,
.hrbs-portal button.hrbs-btn--search:active {
	padding: 0 var(--hrbs-search-pad-x) !important;
	margin: 0 !important;
	min-height: var(--hrbs-search-height) !important;
	border-width: var(--hrbs-btn-border-width) !important;
}

.hrbs-portal .hrbs-btn--apply,
.hrbs-portal a.hrbs-btn--apply,
.hrbs-portal button.hrbs-btn--apply {
	background: var(--hrbs-btn-bg);
	color: var(--hrbs-btn-text);
}

.hrbs-portal .hrbs-btn--apply:hover:not(.is-disabled):not(:disabled),
.hrbs-portal a.hrbs-btn--apply:hover,
.hrbs-portal button.hrbs-btn--apply:hover:not(.is-disabled):not(:disabled) {
	background: var(--hrbs-btn-hover);
	color: var(--hrbs-btn-text);
}

.hrbs-portal .hrbs-btn--apply.is-disabled,
.hrbs-portal .hrbs-btn--apply:disabled {
	background: #c3cddd;
	color: #fff;
	cursor: not-allowed;
}

.hrbs-portal .hrbs-btn--search,
.hrbs-portal button.hrbs-btn--search {
	background: var(--hrbs-btn-bg);
	color: var(--hrbs-btn-text);
	border-radius: var(--hrbs-search-radius);
	min-height: var(--hrbs-search-height);
	padding: 0 var(--hrbs-search-pad-x);
	margin: 0;
}

.hrbs-portal .hrbs-btn--search:hover,
.hrbs-portal button.hrbs-btn--search:hover {
	background: var(--hrbs-btn-hover);
	color: var(--hrbs-btn-text);
}

.hrbs-portal .hrbs-btn--ghost,
.hrbs-portal button.hrbs-btn--ghost {
	background: #fff;
	color: var(--hrbs-navy);
	border: 1px solid var(--hrbs-line);
}

.hrbs-portal .hrbs-btn--ghost:hover,
.hrbs-portal button.hrbs-btn--ghost:hover {
	background: var(--hrbs-blue-light);
	color: var(--hrbs-navy);
}

.hrbs-portal .hrbs-btn--wide {
	width: 100%;
}

/* ----------------------------------------------------------------- Modal */

body.hrbs-modal-open {
	overflow: hidden;
}

.hrbs-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.hrbs-modal[hidden] {
	display: none;
}

.hrbs-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 26, 48, .6);
	backdrop-filter: blur(2px);
}

.hrbs-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: var(--hrbs-radius, 18px);
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 70px rgba(12, 26, 48, .3);
	animation: hrbs-pop .2s ease;
}

@keyframes hrbs-pop {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hrbs-modal__dialog { animation: none; }
	.hrbs-card { transition: none; }
}

.hrbs-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px;
	border-bottom: 1px solid var(--hrbs-line, #e3eaf5);
}

.hrbs-modal__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--hrbs-navy, #12284c);
	line-height: 1.3;
}

/* Themes commonly style every bare <button> (background, padding, radius) for
   their own UI. Reset all of that explicitly so the × stays a plain glyph
   instead of inheriting a filled, rounded button look. */
.hrbs-portal .hrbs-modal__close,
.hrbs-portal button.hrbs-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0;
	padding: 0 !important;
	font-family: Arial, sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	color: #8b9ab3;
	flex: 0 0 auto;
}

.hrbs-portal .hrbs-modal__close:hover,
.hrbs-portal button.hrbs-modal__close:hover {
	background: transparent !important;
	color: var(--hrbs-navy, #12284c);
}

.hrbs-modal__body {
	padding: 26px;
	overflow-y: auto;
	/* Reserve the scrollbar track so content never jumps sideways when the
	   scrollbar appears or disappears mid-interaction. */
	scrollbar-gutter: stable;
}

.hrbs-modal__loading {
	text-align: center;
	padding: 50px 0;
}

/* ------------------------------------------------------------------ Form */

.hrbs-form__intro {
	margin: 0 0 18px;
	color: var(--hrbs-muted, #6b7c99);
}

.hrbs-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.hrbs-field--full {
	grid-column: 1 / -1;
}

.hrbs-field--heading h4 {
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--hrbs-navy, #12284c);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hrbs-line, #e3eaf5);
}

.hrbs-field__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--hrbs-navy, #12284c);
	margin-bottom: 7px;
}

.hrbs-req {
	color: #d64545;
	margin-left: 3px;
}

.hrbs-form input[type="text"],
.hrbs-form input[type="email"],
.hrbs-form input[type="tel"],
.hrbs-form input[type="url"],
.hrbs-form input[type="number"],
.hrbs-form input[type="date"],
.hrbs-form input[type="file"],
.hrbs-form select,
.hrbs-form textarea {
	width: 100%;
	font: inherit;
	color: var(--hrbs-text, #1c2b44);
	background: #f7f9fd;
	border: 1px solid var(--hrbs-line, #e3eaf5);
	border-radius: var(--hrbs-radius-sm, 10px);
	padding: 12px 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hrbs-form textarea {
	resize: vertical;
	min-height: 110px;
}

.hrbs-form input:focus,
.hrbs-form select:focus,
.hrbs-form textarea:focus {
	outline: none;
	border-color: var(--hrbs-blue, #2f55a4);
	box-shadow: 0 0 0 3px rgba(47, 85, 164, .12);
	background: #fff;
}

.hrbs-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hrbs-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

.hrbs-choice input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.hrbs-choice--consent {
	color: #4c5d78;
	line-height: 1.5;
}

.hrbs-field__help {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--hrbs-muted, #6b7c99);
}

.hrbs-field__error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: #d64545;
	min-height: 0;
}

.hrbs-field.has-error input,
.hrbs-field.has-error select,
.hrbs-field.has-error textarea {
	border-color: #d64545;
	background: #fdf5f5;
}

/* The spinner sits inside the submit button but stays invisible until the form
   is submitting. Taken out of flex flow so its reserved width never pushes the
   label off centre while hidden. */
.hrbs-form__submit {
	position: relative;
}

.hrbs-form__submit .hrbs-spinner {
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -9px;
}

.hrbs-form__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.hrbs-form__note {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--hrbs-muted, #6b7c99);
}

.hrbs-form__status {
	margin-top: 14px;
	font-size: 14px;
}

.hrbs-form__status.is-error {
	color: #d64545;
	background: #fdf1f1;
	border-radius: var(--hrbs-radius-sm, 10px);
	padding: 12px 14px;
}

.hrbs-form__error {
	color: #d64545;
	text-align: center;
	padding: 30px 0;
}

/* Honeypot — visually gone but not display:none (bots skip those). */
.hrbs-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hrbs-success {
	text-align: center;
	padding: 30px 10px;
}

.hrbs-success__mark {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #e6f6ec;
	color: #1e8a4c;
	font-size: 32px;
	line-height: 64px;
}

.hrbs-success__text {
	font-size: 16px;
	color: var(--hrbs-text, #1c2b44);
	margin: 0 0 24px;
}

/* --------------------------------------------------------------- Spinner */

.hrbs-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hrbs-spin .7s linear infinite;
	opacity: 0;
}

.hrbs-modal__loading .hrbs-spinner,
.hrbs-portal__loader .hrbs-spinner {
	opacity: 1;
	border-color: rgba(47, 85, 164, .25);
	border-top-color: var(--hrbs-blue, #2f55a4);
	width: 30px;
	height: 30px;
}

.is-submitting .hrbs-spinner {
	opacity: 1;
}

@keyframes hrbs-spin {
	to { transform: rotate(360deg); }
}

.hrbs-portal__loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}

.hrbs-portal__loader[hidden] {
	display: none;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1100px) {
	.hrbs-portal__layout {
		grid-template-columns: minmax(280px, 360px) 1fr;
		gap: 20px;
	}

	.hrbs-detail__inner {
		padding: 24px;
	}

	.hrbs-detail__title {
		font-size: calc(var(--hrbs-fs-detail-title) * .82);
	}

	.hrbs-portal__heading {
		font-size: calc(var(--hrbs-fs-heading) * .82);
	}
}

@media (max-width: 900px) {
	.hrbs-portal__layout {
		grid-template-columns: 1fr;
	}

	.hrbs-list,
	.hrbs-detail {
		max-height: none;
	}

	.hrbs-list {
		max-height: 620px;
	}

	.hrbs-filters__search {
		grid-template-columns: 1fr;
	}

	.hrbs-btn--search {
		width: 100%;
	}

	.hrbs-filters__row {
		grid-template-columns: repeat(2, 1fr);
	}

	.hrbs-filters__cell--clear {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.hrbs-portal {
		font-size: calc(var(--hrbs-fs-base) * .97);
	}

	.hrbs-filters {
		padding: 16px;
	}

	.hrbs-filters__row {
		grid-template-columns: 1fr;
	}

	.hrbs-detail__inner {
		padding: 18px;
	}

	.hrbs-detail__head,
	.hrbs-detail__cta {
		text-align: left;
	}

	.hrbs-detail__cta {
		width: 100%;
	}

	.hrbs-detail__cta .hrbs-btn {
		width: 100%;
	}

	.hrbs-detail__title {
		font-size: calc(var(--hrbs-fs-detail-title) * .7);
	}

	.hrbs-portal__heading {
		font-size: calc(var(--hrbs-fs-heading) * .7);
	}

	.hrbs-form__grid {
		grid-template-columns: 1fr;
	}

	.hrbs-field--half {
		grid-column: 1 / -1;
	}

	.hrbs-modal {
		padding: 0;
		align-items: flex-end;
	}

	.hrbs-modal__dialog {
		max-height: 92vh;
		border-radius: 18px 18px 0 0;
	}
}