/* HerJobsBD Recruitment Manager — shared public design tokens and base components. */

:root {
	--hjb-primary: #ff0a8a;
	--hjb-primary-dark: #df0078;
	--hjb-text: #333;
	--hjb-muted: #777;
	--hjb-border: #e2e2e2;
	--hjb-bg: #fff;
	--hjb-radius: 16px;
}

.hjb-card {
	background: var(--hjb-bg);
	border-radius: 24px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
	border: 1px solid #f0f0f0;
	padding: 28px;
}

/* The active theme's own content-area style (Hello Elementor's
 * `.page-content a { text-decoration: underline }`) wins over our plain
 * class selectors on equal specificity, since theme.css loads after this
 * stylesheet — and now does wrap our markup, since logged-out visitors on
 * Jobs/Companies/Pricing/Job Detail render through the theme's normal
 * template (see HJB_App_Shell). This plugin's whole design treats links as
 * color-on-hover, never underlined by default; !important defends that
 * convention wherever a shortcode can end up inside the theme's content
 * area, regardless of what the active theme's own styles do.
 */
.hjb-job-detail a,
.hjb-jobs-wrap a,
.hjb-pricing-grid a {
	text-decoration: none !important;
}

/* Anonymous visitors reach these pages through the theme's own template
 * (see HJB_App_Shell), which otherwise butts our content up directly
 * against the site header above and footer below with no breathing room —
 * give every public-facing page some top/bottom padding of its own rather
 * than depending on the active theme's content spacing. */
.hjb-job-detail,
.hjb-jobs-wrap,
.hjb-pricing-section {
	padding: 40px 0;
}

/* The active theme's own reset (Hello Elementor's reset.css matches
 * [type=submit] at the same specificity as our .hjb-btn class, and loads
 * after this stylesheet) otherwise wins that tie on every <button
 * type="submit">, leaving submit buttons (e.g. "Search Jobs") looking
 * different from <a class="hjb-btn"> links (e.g. "View & Apply") that the
 * theme's button reset never touches. !important keeps both identical. */
.hjb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 22px !important;
	border: none !important;
	border-radius: var(--hjb-radius) !important;
	background: linear-gradient(180deg, var(--hjb-primary), var(--hjb-primary-dark)) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.hjb-btn:hover,
.hjb-btn:focus {
	background: linear-gradient(180deg, #ff1493, #d40072) !important;
	color: #fff !important;
}

.hjb-btn-outline {
	background: #fff !important;
	color: var(--hjb-primary) !important;
	border: 1px solid var(--hjb-primary) !important;
}

.hjb-field {
	margin-bottom: 16px;
}

.hjb-field label {
	display: block;
	font-size: 13px;
	color: var(--hjb-muted);
	margin-bottom: 8px;
}

/* The active theme's own form-control reset (Hello Elementor's reset.css
 * sets a 3px radius on plain <input>/<select>/<textarea> with the same
 * selector specificity as ours, and loads after this stylesheet) wins on
 * the tie wherever a shortcode renders through the theme's template —
 * !important keeps every field's rounding consistent regardless of what
 * the active theme's own reset does. */
.hjb-field input,
.hjb-field select,
.hjb-field textarea {
	width: 100%;
	min-height: 50px;
	/* Without this, the 16px horizontal padding below adds on top of the
	 * declared 100% width instead of being carved out of it — nothing in
	 * this stylesheet sets a box-sizing default, so a field can render
	 * wider than its card on any browser/theme combination that doesn't
	 * happen to reset it globally. */
	box-sizing: border-box;
	border: 1px solid #cfcfcf !important;
	border-radius: var(--hjb-radius) !important;
	padding: 10px 16px;
	font-size: 15px;
	background: #fff;
	color: var(--hjb-text);
}

.hjb-field input:focus,
.hjb-field select:focus,
.hjb-field textarea:focus {
	border-color: var(--hjb-primary) !important;
	box-shadow: 0 0 0 4px rgba(255, 10, 138, 0.08);
	outline: none;
}

body.hjb-app-shell {
	background: #f5f5fa;
	margin: 0;
}

/* Generic breathing room for every HJB page now that the theme's own
 * container/padding is gone. Dashboard pages add their own padding on top
 * of this via .hjb-dashboard-shell; other pages (login, job listing, job
 * detail, companies, pricing) rely on this alone. */
.hjb-page-shell {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px;
}

.hjb-dashboard-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
	max-height: 200px;
	overflow: hidden;
	background: var(--hjb-bg);
	border-bottom: 1px solid var(--hjb-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.hjb-dashboard-topbar-brand {
	display: flex;
	align-items: center;
	width: 200px;
	flex-shrink: 0;
	font-weight: 800;
	font-size: 18px;
	color: var(--hjb-text) !important;
	text-decoration: none;
}

.hjb-dashboard-topbar-brand a {
	display: block;
	width: 100%;
	color: inherit !important;
	text-decoration: none;
}

.hjb-dashboard-logo {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	display: block;
}

.hjb-dashboard-topbar-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 14px;
}

.hjb-dashboard-topbar-actions a {
	color: var(--hjb-muted);
	text-decoration: none;
}

.hjb-dashboard-topbar-actions a:hover {
	color: var(--hjb-primary);
}

.hjb-dashboard-topbar-logout {
	color: var(--hjb-primary) !important;
	font-weight: 700;
}

.hjb-dashboard-footer {
	text-align: center;
	padding: 24px 32px;
	margin-top: 40px;
	color: var(--hjb-muted);
	font-size: 13px;
	border-top: 1px solid var(--hjb-border);
}

.hjb-dashboard-footer-links {
	margin-top: 6px;
}

.hjb-dashboard-footer-links a {
	color: var(--hjb-muted);
	text-decoration: none;
}

.hjb-dashboard-footer-links a:hover {
	color: var(--hjb-primary);
}

.hjb-dashboard-shell {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	max-width: 1180px;
	margin: 0 auto;
}

.hjb-dashboard-sidebar {
	width: 264px;
	flex-shrink: 0;
	position: sticky;
	/* --hjb-topbar-height is measured by public.js from the topbar's real
	   rendered height (it's only hard-capped at 200px as a worst case, and
	   is normally much shorter), so the sidebar sticks right under it
	   instead of leaving a large gap sized for the worst case. */
	top: calc(var(--hjb-topbar-height, 90px) + 24px);
	/* Bounding the sidebar to the remaining viewport height and giving it
	   its own scrollbar gives two independent scroll regions: the sidebar
	   scrolls within itself (e.g. if the nav list ever grows taller than
	   the viewport) while the main content area continues to scroll the
	   page normally, unaffected by how far the sidebar has been scrolled. */
	max-height: calc(100vh - var(--hjb-topbar-height, 90px) - 48px);
	overflow-y: auto;
	/* Scrollbar hidden by default, faded in only while actively scrolling
	   (toggled by public.js adding/removing .hjb-is-scrolling) — Firefox via
	   scrollbar-color, WebKit/Blink via the ::-webkit-scrollbar rules below. */
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color 0.3s ease;
}

.hjb-dashboard-sidebar.hjb-is-scrolling {
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.hjb-dashboard-sidebar::-webkit-scrollbar {
	width: 6px;
}

.hjb-dashboard-sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.hjb-dashboard-sidebar::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 3px;
}

.hjb-dashboard-sidebar.hjb-is-scrolling::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.25);
}

.hjb-dashboard-main {
	flex: 1;
	min-width: 0;
}

.hjb-dashboard-content.hjb-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.hjb-dashboard-content.hjb-loading::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--hjb-primary);
	border-radius: 50%;
	animation: hjb-spin 0.7s linear infinite;
	z-index: 9999;
}

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

.hjb-dashboard-user-card {
	display: block;
	background: #fff;
	border-radius: 20px;
	padding: 22px 18px;
	margin-bottom: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	text-align: center;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hjb-dashboard-user-card:hover,
.hjb-dashboard-user-card:focus-visible {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.hjb-dashboard-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--hjb-primary), var(--hjb-primary-dark));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	margin: 0 auto 10px;
}

.hjb-dashboard-user-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--hjb-text);
	margin: 0 0 2px;
}

.hjb-dashboard-user-role {
	font-size: 11px;
	color: var(--hjb-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
}

.hjb-dashboard-user-sub {
	font-size: 12px;
	color: var(--hjb-muted);
	margin-top: 4px;
}

.hjb-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 20px 0;
}

.hjb-stat-card {
	background: #fff;
	border: 1px solid var(--hjb-border);
	border-left: 3px solid var(--hjb-primary);
	border-radius: var(--hjb-radius);
	padding: 18px 20px;
}

.hjb-stat-card .hjb-stat-label {
	font-size: 13px;
	color: var(--hjb-muted);
	display: block;
	margin-bottom: 6px;
}

.hjb-stat-card .hjb-stat-value {
	font-size: 26px;
	font-weight: 800;
	color: var(--hjb-text);
}

.hjb-quick-links-heading {
	margin: 24px 0 0;
}

.hjb-quick-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin: 16px 0 0;
}

.hjb-quick-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #fff;
	border: 1px solid var(--hjb-border);
	border-radius: 14px;
	padding: 14px 10px;
	color: var(--hjb-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.15s ease;
}

.hjb-quick-link:hover {
	border-color: var(--hjb-primary);
	color: var(--hjb-primary);
}

.hjb-admin-recent-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.hjb-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

.hjb-table th,
.hjb-table td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--hjb-border);
	font-size: 14px;
}

.hjb-table th {
	color: var(--hjb-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.03em;
	background: #fafafa;
}

.hjb-table tbody tr:hover {
	background: #fff8fb;
}

/* Rounds just the table's own corners (the <table> element itself can't
 * take border-radius cleanly with collapsed borders) without affecting the
 * .hjb-card it sits inside, which already has its own larger radius. */
.hjb-table-wrap {
	border: 1px solid var(--hjb-border);
	border-radius: 12px;
	overflow: hidden;
}

.hjb-table-wrap .hjb-table {
	border: none;
}

.hjb-table-wrap .hjb-table tr:last-child td {
	border-bottom: none;
}

/* Section toolbar: title + result count + search field, all inside the
 * same card as the table below it (previously the search form sat outside
 * any card, directly on the page background, which looked unstyled). */
.hjb-section-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hjb-border);
}

.hjb-section-toolbar h2 {
	margin: 0;
	font-size: 20px;
}

.hjb-section-search {
	display: flex;
	gap: 8px;
	margin: 0;
}

.hjb-section-search input[type="text"] {
	width: 240px;
	min-height: 0 !important;
	padding: 9px 14px !important;
	border: 1px solid var(--hjb-border) !important;
	border-radius: 999px !important;
	font-size: 14px;
}

.hjb-section-search .hjb-btn {
	padding: 9px 20px;
	font-size: 14px;
}

/* Sidebar nav card: the section list and its small label live in one card
 * (matching the look of .hjb-dashboard-nav used on the real dashboards)
 * instead of a separate, larger .hjb-card floating above it. */
.hjb-overview-nav-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hjb-muted);
	padding: 8px 14px 12px;
}

.hjb-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.hjb-badge-success {
	background: #e8f8ee;
	color: #1f8a4c;
}

.hjb-badge-warning {
	background: #fff6e5;
	color: #b8860b;
}

.hjb-badge-danger {
	background: #fff3f5;
	color: #b10049;
}

.hjb-msg {
	padding: 14px 16px;
	border-radius: var(--hjb-radius);
	margin-bottom: 16px;
	font-size: 14px;
}

.hjb-msg.error {
	background: #fff3f5;
	color: #b10049;
	border: 1px solid #ffd1e3;
}

.hjb-msg.success {
	background: linear-gradient(180deg, var(--hjb-primary), var(--hjb-primary-dark));
	color: #fff;
	border: none;
	font-weight: 600;
}

.hjb-empty-state {
	text-align: center;
	padding: 28px 16px;
}

.hjb-empty-state-message {
	font-size: 15px;
	font-weight: 700;
	color: var(--hjb-text);
	margin: 0 0 6px;
}

.hjb-empty-state-description {
	font-size: 13px;
	color: var(--hjb-muted);
	margin: 0 0 18px;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.hjb-tip-list {
	margin: 0;
	padding-left: 20px;
}

.hjb-tip-list li {
	margin-bottom: 8px;
	color: #555;
}

.hjb-share-buttons {
	margin: 0;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 13px;
}

.hjb-share-buttons span {
	color: var(--hjb-muted);
}

.hjb-share-buttons a {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--hjb-border);
	color: var(--hjb-text);
	text-decoration: none;
	font-size: 13px;
	transition: all 0.15s ease;
}

.hjb-share-buttons a:hover {
	border-color: var(--hjb-primary);
	color: var(--hjb-primary);
}

.hjb-jobs-landing-title {
	margin-bottom: 16px;
}

.hjb-divider-text {
	text-align: center;
	color: #888;
	font-size: 13px;
	margin: 6px 0 16px;
	position: relative;
}

.hjb-payment-amount-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--hjb-primary-light, #fff0f6);
	border: 1px solid var(--hjb-primary);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 18px;
}

.hjb-payment-amount-label {
	font-size: 13px;
	color: var(--hjb-text-muted, #666);
	font-weight: 600;
}

.hjb-payment-amount-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--hjb-primary);
}

.hjb-payment-method-details {
	background: #fafafa;
	border: 1px solid var(--hjb-border);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 16px;
}

.hjb-payment-method-details p {
	margin: 0 0 8px;
}

.hjb-payment-method-details p:last-child {
	margin-bottom: 0;
}

.hjb-bank-details-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.hjb-bank-details-list li {
	margin-bottom: 4px;
}

.hjb-dashboard-nav {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: #fff;
	border-radius: 20px;
	padding: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.hjb-dashboard-nav-item {
	display: flex;
	align-items: center;
	padding: 11px 14px;
	border-radius: 12px;
	background: transparent;
	border: none;
	color: var(--hjb-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.hjb-dashboard-nav-item.active,
.hjb-dashboard-nav-item:hover {
	background: var(--hjb-primary);
	color: #fff;
}

.hjb-dashboard-nav-divider {
	height: 1px;
	background: var(--hjb-border);
	margin: 10px 6px;
}

.hjb-nav-badge {
	display: inline-block;
	background: var(--hjb-primary);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	padding: 1px 7px;
	margin-left: 4px;
}

.hjb-dashboard-nav-item.active .hjb-nav-badge {
	background: #fff;
	color: var(--hjb-primary);
}

.hjb-notifications-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.hjb-notifications-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hjb-notifications-list .hjb-list-item {
	padding: 18px 20px;
	border: 1px solid var(--hjb-border);
	border-radius: 14px;
	background: #fafafa;
}

.hjb-notifications-list .hjb-list-item:last-child {
	border-bottom: 1px solid var(--hjb-border);
}

.hjb-notification-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 8px;
}

.hjb-notification-title-row strong {
	font-size: 15px;
}

.hjb-notifications-list p {
	margin: 0 0 12px;
	color: var(--hjb-text);
	line-height: 1.5;
}

.hjb-notifications-list .hjb-list-item-meta {
	margin-top: 0;
	gap: 16px;
	flex-wrap: wrap;
}

.hjb-notification-unread {
	background: #fff6fb;
	border-color: var(--hjb-primary);
	border-left: 3px solid var(--hjb-primary);
}

.hjb-dashboard-content .hjb-card {
	margin-bottom: 20px;
}

.hjb-list-item {
	padding: 14px 0;
	border-bottom: 1px solid var(--hjb-border);
}

.hjb-list-item:last-child {
	border-bottom: none;
}

.hjb-list-item-meta {
	font-size: 13px;
	color: var(--hjb-muted);
	margin-top: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: center;
}

.hjb-inline-form {
	display: inline;
	margin: 0;
}

.hjb-row.hjb-name-row {
	display: flex;
	gap: 16px;
}

.hjb-row.hjb-name-row > * {
	flex: 1;
	min-width: 0;
}

/* Interview feedback scorecard (5 rating fields) — a fixed 2-up flex row
 * like .hjb-row.hjb-name-row would just squeeze all 5 onto one line between
 * the 700px stacking breakpoint and ~900px. An auto-fit grid reflows to
 * however many columns actually fit at any width, no breakpoint needed. */
.hjb-scorecard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
	margin-bottom: 8px;
}

.hjb-scorecard-grid .hjb-field {
	margin-bottom: 0;
}

/* Base look for every .hjb-link-btn used across both dashboards (Duplicate,
 * Pause, Close, Remove, Withdraw, etc.) — previously only the login/register
 * pages' own separate stylesheet styled this class, so on every dashboard
 * page it rendered as an unstyled default browser button. */
.hjb-link-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--hjb-primary);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
}

.hjb-link-btn:hover {
	text-decoration: underline;
}

.hjb-inline-form .hjb-link-btn {
	width: auto;
	margin: 0;
	font-size: 13px;
}

/* Table cells with several actions (Edit, Applications, Duplicate,
 * Feature, Pause/Resume, Close, Renew, etc.) previously had no layout
 * rule at all, so they packed onto one unwrapped line — very wide inside
 * the .hjb-table horizontal-scroll fallback on mobile. */
.hjb-table-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}

.hjb-table-actions a {
	color: var(--hjb-primary);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
}

.hjb-table-actions a:hover {
	text-decoration: underline;
}

.hjb-jobs-wrap {
	max-width: 960px;
	margin: 0 auto;
}

.hjb-job-search-form {
	margin-bottom: 24px;
}

.hjb-job-search-title {
	margin: 0 0 20px;
}

/* All 8 filter fields in one flat grid instead of four stacked two-up rows
 * — lets the browser fit as many as the available width allows per line
 * (typically all 8 across on desktop, wrapping to two lines on narrower
 * viewports) instead of always burning four rows regardless of width. */
.hjb-job-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: 8px;
}

.hjb-job-search-grid .hjb-field {
	margin-bottom: 0;
}

.hjb-job-search-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}

.hjb-job-search-checks {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.hjb-job-search-buttons {
	display: flex;
	gap: 10px;
}

.hjb-is-hidden {
	display: none !important;
}

.hjb-check-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: var(--hjb-text);
	user-select: none;
}

.hjb-check-row input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.hjb-check-row .hjb-box {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 1px solid #cfcfcf;
	border-radius: 5px;
	background: #fff;
	position: relative;
	transition: all 0.15s ease;
}

.hjb-check-row input:checked + .hjb-box {
	background: var(--hjb-primary);
	border-color: var(--hjb-primary);
}

.hjb-check-row input:checked + .hjb-box::after {
	content: "\2713";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.hjb-job-results-count {
	font-size: 14px;
	font-weight: 600;
	color: var(--hjb-muted);
	margin: 0 0 4px;
}

/* Shown while the Jobs search/pagination AJAX request is in flight (see
 * initJobSearchAjax() in public.js) — fixed to the viewport rather than the
 * results container, so it sits dead-center of the screen regardless of
 * how far down the page the visitor has scrolled. */
.hjb-global-loader {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
}

.hjb-global-loader.is-visible {
	display: flex;
}

.hjb-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid var(--hjb-border);
	border-top-color: var(--hjb-primary);
	border-radius: 50%;
	animation: hjb-spin 0.8s linear infinite;
}

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

.hjb-job-results {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hjb-job-card {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--hjb-border);
	border-radius: var(--hjb-radius);
	padding: 18px 20px;
	align-items: flex-start;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hjb-job-card:hover {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.hjb-job-card-logo {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
}

.hjb-job-card-logo img {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	object-fit: cover;
}

.hjb-job-card-logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--hjb-primary), var(--hjb-primary-dark));
	color: #fff;
	font-size: 24px;
	font-weight: 800;
}

.hjb-job-card-body {
	flex: 1;
	min-width: 0;
}

.hjb-job-card-title {
	margin: 0 0 8px;
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.hjb-job-card-title a {
	color: var(--hjb-text);
	text-decoration: none;
}

.hjb-job-card-title a:hover {
	color: var(--hjb-primary);
}

.hjb-job-card-meta {
	font-size: 13px;
	color: var(--hjb-muted);
	margin: 4px 0;
}

.hjb-job-card-salary {
	color: var(--hjb-text);
}

.hjb-job-card-pills {
	display: flex;
	gap: 6px;
	margin: 8px 0;
	flex-wrap: wrap;
}

/* Featured/urgent jobs get a tinted background and colored left border so
   they stand out from plain listings at a glance, on top of their badge —
   featured (a paid placement) takes visual priority over urgent when a job
   is both. */
.hjb-job-card-urgent {
	border-color: #ffc9d6;
	border-left: 4px solid #e3004f;
	background: linear-gradient(135deg, #fff5f8 0%, #fff 65%);
}

.hjb-job-card-featured {
	border-color: #f3cd5b;
	border-left: 4px solid #e0a800;
	background: linear-gradient(135deg, #fffaf0 0%, #fff 65%);
}

.hjb-badge-featured {
	background: linear-gradient(180deg, #ffce3d, #e0a800);
	color: #4d3500;
}

.hjb-badge-urgent {
	background: #e3004f;
	color: #fff;
}

.hjb-job-card-pill {
	display: inline-block;
	background: #f5f5f7;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hjb-muted);
}

.hjb-job-card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
}

.hjb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 10px;
}

.hjb-page-link {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid var(--hjb-border);
	color: var(--hjb-text);
	text-decoration: none;
	font-size: 14px;
}

.hjb-page-link.active {
	background: var(--hjb-primary);
	color: #fff;
	border-color: var(--hjb-primary);
}

.hjb-page-link-nav {
	font-weight: 600;
}

.hjb-page-ellipsis {
	display: inline-flex;
	align-items: center;
	padding: 8px 4px;
	color: var(--hjb-muted);
	font-size: 14px;
}

.hjb-job-detail-header {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-bottom: 20px;
}

.hjb-job-detail-logo {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
}

.hjb-job-detail-logo img {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	object-fit: cover;
}

.hjb-job-detail-logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: linear-gradient(180deg, var(--hjb-primary), var(--hjb-primary-dark));
	color: #fff;
	font-size: 32px;
	font-weight: 800;
}

.hjb-job-detail-headline {
	flex: 1;
	min-width: 0;
}

.hjb-job-detail-title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.hjb-job-detail-headline h1 {
	margin: 0;
	font-size: 26px;
	line-height: 1.25;
}

.hjb-job-detail-badges {
	display: flex;
	gap: 6px;
}

.hjb-job-detail-company-line {
	margin: 8px 0 4px;
	font-size: 15px;
	font-weight: 600;
}

.hjb-job-detail-company-line a {
	color: var(--hjb-text);
	text-decoration: none;
}

.hjb-job-detail-company-line a:hover {
	color: var(--hjb-primary);
}

.hjb-job-detail-meta-line {
	margin: 0;
	font-size: 14px;
	color: var(--hjb-muted);
}

.hjb-job-detail-dot {
	color: var(--hjb-border);
}

.hjb-job-detail-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 20px;
	align-items: start;
}

.hjb-job-detail-main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.hjb-job-detail-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 24px;
}

.hjb-job-detail-category {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--hjb-primary);
	background: var(--hjb-primary-light, #fff0f6);
	padding: 4px 12px;
	border-radius: 999px;
	margin: 0 0 16px;
}

.hjb-job-detail-section-title {
	margin: 24px 0 10px;
	padding-top: 16px;
	border-top: 1px solid var(--hjb-border);
}

.hjb-job-detail-main .hjb-card > .hjb-job-detail-section-title:first-of-type,
.hjb-job-detail-facts .hjb-job-detail-section-title {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.hjb-job-detail-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hjb-job-detail-skill-pill {
	display: inline-block;
	background: #f5f5f7;
	border: 1px solid var(--hjb-border);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 13px;
	color: var(--hjb-text);
}

.hjb-job-detail-facts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hjb-job-detail-facts-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--hjb-border);
	font-size: 14px;
}

.hjb-job-detail-facts-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.hjb-job-detail-facts-list li span {
	color: var(--hjb-muted);
	flex-shrink: 0;
}

.hjb-job-detail-facts-list li strong {
	text-align: right;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.hjb-job-detail-apply-card .hjb-job-detail-actions {
	margin-top: 0;
}

.hjb-job-detail-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hjb-job-detail-actions .hjb-btn {
	width: 100%;
}

.hjb-job-detail-card-footer {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--hjb-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hjb-similar-job-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--hjb-text);
	text-decoration: none;
	transition: padding-left 0.15s ease;
}

.hjb-similar-job-item:hover {
	color: var(--hjb-primary);
	padding-left: 4px;
}

.hjb-similar-job-item strong {
	display: block;
}

.hjb-similar-job-arrow {
	font-size: 22px;
	color: var(--hjb-muted);
	flex-shrink: 0;
}

.hjb-safety-notice {
	font-size: 13px;
	color: var(--hjb-muted);
	background: #f7f7f8;
	border: 1px solid var(--hjb-border);
	border-radius: var(--hjb-radius);
	padding: 14px 16px;
	margin: 0;
}

.hjb-job-detail-auth-prompt {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hjb-job-detail-auth-prompt .hjb-btn {
	width: 100%;
}

.hjb-applications-filter {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hjb-border);
}

/* Pricing is commonly embedded in a theme/Elementor content column. Break
 * the section out to the viewport so its background is genuinely full width,
 * while keeping the cards at a readable maximum width on large screens. */
.hjb-pricing-section {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 56px 24px;
	background: #fff;
}

.hjb-pricing-header {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.hjb-pricing-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--hjb-primary-light, #fff0f6);
	color: var(--hjb-primary);
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 20px;
}

.hjb-pricing-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hjb-primary);
	display: inline-block;
}

.hjb-pricing-title {
	font-size: 36px;
	line-height: 1.2;
	margin: 0 0 16px;
	color: var(--hjb-text);
}

.hjb-pricing-subtitle {
	color: var(--hjb-muted);
	font-size: 16px;
	margin: 0;
}

.hjb-pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: start;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.hjb-pricing-card {
	position: relative;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hjb-pricing-card-recommended {
	border-color: var(--hjb-primary);
	box-shadow: 0 20px 50px rgba(255, 10, 138, 0.18);
}

.hjb-pricing-badge {
	position: absolute;
	top: -14px;
	right: 24px;
	background: linear-gradient(180deg, var(--hjb-primary), var(--hjb-primary-dark));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
}

.hjb-pricing-name {
	margin: 4px 0 0;
	font-size: 22px;
	color: var(--hjb-text);
}

.hjb-pricing-description {
	color: var(--hjb-muted);
	font-size: 14px;
	margin: 0 0 12px;
}

.hjb-pricing-price {
	font-size: 30px;
	font-weight: 800;
	color: var(--hjb-text);
	margin: 4px 0 16px;
}

.hjb-pricing-cycle {
	font-size: 14px;
	font-weight: 500;
	color: var(--hjb-muted);
}

.hjb-pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--hjb-text);
	text-align: left;
	flex-grow: 1;
}

.hjb-pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
}

.hjb-pricing-check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.hjb-pricing-card .hjb-btn {
	width: 100%;
}

@media (max-width: 600px) {
	.hjb-pricing-section {
		padding: 36px 16px;
	}

	/* Same underlying issue as .hjb-dashboard-shell below: align-items:
	 * flex-start/center on the base rule means something different once
	 * flex-direction flips to column here (it now governs the horizontal
	 * cross axis), so the card body/headline was shrink-wrapping to its
	 * own content width instead of stretching to the card's full width. */
	.hjb-job-card {
		flex-direction: column;
		align-items: stretch;
	}

	.hjb-job-card-actions {
		align-items: flex-start;
		flex-direction: row;
	}

	.hjb-job-detail-header {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 480px) {
	/* Narrow the outer page gutter further than the 900px breakpoint
	 * already does — every dashboard tab's content (and every other
	 * .hjb-page-shell page) otherwise keeps a 16px side margin on top of
	 * the card's own padding, which reads as a lot of wasted grey space
	 * pinching the white card on a phone-width screen. */
	.hjb-page-shell {
		padding: 16px 10px;
	}

	.hjb-card {
		padding: 16px;
		border-radius: 16px;
	}

	/* Even wrapped, 11+ pill buttons (Prev, first, ellipsis, the current
	   page's window, ellipsis, last, Next) at full desktop size barely fit
	   2-3 per row on a phone — shrink them so a sensible number fit per
	   line instead of each wrapped row holding only one or two. */
	.hjb-page-link,
	.hjb-page-ellipsis {
		padding: 6px 10px;
		font-size: 13px;
	}

	/* The topbar (shared by every HJB page, including both dashboards) never
	 * shrank its 200px-wide brand block below this width, and its "Visit
	 * Site"/"Log In"/"Log Out" links never wrapped — on a ~360-390px phone
	 * that combination leaves too little room and pushes the actions past
	 * the edge of the screen. */
	.hjb-dashboard-topbar-brand {
		width: 130px;
	}

	.hjb-dashboard-topbar-actions {
		gap: 10px;
		font-size: 13px;
	}
}

@media (max-width: 500px) {
	input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
		padding: 0 !important;
	}
}

@media (max-width: 700px) {
	.hjb-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* Unscoped (not just .hjb-dashboard-content) so every two-field row
	 * stacks on mobile, including the login/registration pages — those
	 * render outside the dashboard shell but reuse this exact same
	 * .hjb-row.hjb-name-row markup for First/Last Name, Industry/Company
	 * Size, etc. Scoping this to .hjb-dashboard-content previously meant
	 * auth pages never got it, and its own bespoke grid-based mobile CSS
	 * (in HJB_Auth::get_css()) could never win: .hjb-row.hjb-name-row's two
	 * combined classes always out-specificity a plain .hjb-name-row rule,
	 * regardless of load order, leaving both fields squeezed side by side
	 * at any viewport width down to the smallest phones. */
	.hjb-row.hjb-name-row {
		flex-direction: column;
	}
}

@media (max-width: 900px) {
	.hjb-job-detail-layout {
		grid-template-columns: 1fr;
	}

	.hjb-job-detail-sidebar {
		position: static;
	}

	.hjb-dashboard-shell {
		flex-direction: column;
		/* align-items: flex-start (set on the base rule for the desktop
		 * row layout, to top-align the sidebar/main columns instead of
		 * stretching them to match heights) means something entirely
		 * different once flex-direction flips to column here: it governs
		 * the cross axis, which is now horizontal, so it was shrink-wrapping
		 * every tab's content to its own natural width instead of
		 * stretching to fill the screen — the exact "card doesn't reach
		 * the right edge" gap this rule fixes. */
		align-items: stretch;
	}

	.hjb-dashboard-sidebar {
		width: 100%;
		position: static;
		max-height: none;
		overflow-y: visible;
	}

	.hjb-dashboard-main {
		width: 100%;
	}

	.hjb-dashboard-user-card {
		display: none;
	}

	.hjb-dashboard-nav {
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.hjb-dashboard-nav-item {
		flex-shrink: 0;
	}

	.hjb-overview-nav-eyebrow {
		display: none;
	}

	.hjb-section-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.hjb-section-search {
		flex-direction: column;
	}

	.hjb-section-search input[type="text"] {
		width: 100%;
	}

	.hjb-dashboard-topbar {
		padding: 12px 16px;
	}

	.hjb-dashboard-topbar-actions {
		gap: 12px;
	}

	.hjb-page-shell {
		padding: 20px 16px;
	}

	.hjb-dashboard-footer {
		padding: 20px 16px;
	}
}