/**
 * AutoPro Core — job system (Phase 4).
 * Dark brand palette from the site kit: #171717 / #E10012 / Space Grotesk.
 * Tokens are re-declared on .apc-app / .apc-settings in apc-account.css.
 */

/* ===== Section wrapper (keeps long forms readable on wide screens) ===== */
.apc-jobs {
/* 	max-width: 880px; */
	color-scheme: dark;
}

/* ===== Section headers & lists ===== */
.apc-jobs__head { margin: 0 0 22px; }
.apc-jobs__head .apc-jobs__cta { margin-top: 12px; display: inline-block; text-decoration: none; }

.apc-jobs__title {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 6px;
	font-family: var(--apc-heading, 'Space Grotesk', sans-serif);
	font-size: 26px; font-weight: 700; color: var(--apc-text, #f5f5f5);
	letter-spacing: -0.02em;
}

.apc-jobs__sub { margin: 0; color: var(--apc-muted, #f5f5f5bf); font-size: 14.5px; }

.apc-jobs__notice { text-align: left; }
.apc-jobs__notice h3 { margin: 0 0 8px; font-family: var(--apc-heading, 'Space Grotesk', sans-serif); font-size: 20px; color: var(--apc-text, #f5f5f5); }
.apc-jobs__notice p { margin: 0 0 12px; color: var(--apc-muted, #f5f5f5bf); }
.apc-jobs__notice a { color: var(--apc-red, #e10012); font-weight: 600; text-decoration: underline; }
.apc-jobs__notice a:hover { color: var(--apc-red-dark, #b8000f); }

.apc-jobs__list { display: flex; flex-direction: column; gap: 14px; }

/* ===== Job rows ===== */
.apc-jrow {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--apc-card, #171717);
	border: 1px solid var(--apc-border, #363636);
	border-radius: 14px; padding: 16px 18px;
}

.apc-jrow__thumb {
	position: relative; flex: 0 0 74px; width: 74px; height: 74px;
	border-radius: 10px; overflow: hidden; background: var(--apc-card-2, #121212);
	display: flex; align-items: center; justify-content: center;
}
.apc-jrow__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apc-jrow__thumb--empty .apc-ico { width: 30px; height: 30px; color: #636363; }
.apc-jrow__thumb--empty { color: #636363; }

.apc-jrow__photocount {
	position: absolute; right: 4px; bottom: 4px;
	background: rgba(0, 0, 0, 0.75); color: #ffffff;
	font-size: 10.5px; font-weight: 600; font-style: normal;
	line-height: 1; padding: 4px 6px; border-radius: 999px;
}

.apc-jrow__body { flex: 1 1 auto; min-width: 0; }
.apc-jrow__title { margin: 2px 0 6px; font-family: var(--apc-heading, 'Space Grotesk', sans-serif); font-size: 17px; font-weight: 600; color: var(--apc-text, #f5f5f5); line-height: 1.35; }
.apc-jrow__meta { margin: 0 0 6px; font-size: 13.5px; color: var(--apc-muted, #f5f5f5bf); }
.apc-jrow__submeta { margin: 0; font-size: 12.5px; color: rgba(245, 245, 245, 0.55); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ===== Status / urgency chips ===== */
.apc-statuschip {
	display: inline-flex; align-items: center;
	font-style: normal; font-size: 11.5px; font-weight: 600;
	line-height: 1; padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
.apc-statuschip--draft { background: #242424; color: #b3b3b3; }
.apc-statuschip--open { background: rgba(225, 0, 18, 0.18); color: #ff6b74; }
.apc-statuschip--in_progress { background: rgba(240, 154, 0, 0.16); color: #f2b04c; }
.apc-statuschip--completed { background: rgba(34, 170, 72, 0.18); color: #5fd07c; }
.apc-statuschip--closed { background: #242424; color: #8f8f8f; }

.apc-urgchip {
	font-style: normal; font-size: 11px; font-weight: 600;
	padding: 4px 8px; border-radius: 999px; background: #242424; color: #b3b3b3;
}
.apc-urgchip--emergency { background: rgba(225, 0, 18, 0.18); color: #ff6b74; }

/* ===== Job row actions ===== */
.apc-jrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.apc-jrow__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.apc-jrow__actions form { display: inline-flex; margin: 0; }

.apc-jobs__pagination { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.apc-jobs__pagination a { text-decoration: none; }

/* ===== Drawer messaging CTA (Phase 10/11) ===== */
.apc-drawer__locked { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.apc-drawer__locked .apc-chip { border: 1px solid rgba(225, 0, 18, 0.45); color: #ff6b74; }

.apc-drawer__msgform { display: flex; flex-direction: column; gap: 0; margin: 0; }

/* ===== Post / Edit job form ===== */
.apc-jform__form { max-width: none; margin: 0; }
.apc-jform__cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 28px; align-items: start; margin: 0 0 6px; }
.apc-jform__main { min-width: 0; }
.apc-jform__photo-col { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.apc-jform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.apc-jform__actions {
	display: flex; gap: 12px; justify-content: flex-end; flex-wrap: nowrap; align-items: center;
	margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--apc-border, #363636);
}
.apc-jform__actions .apc-btn { white-space: nowrap; }

/* Urgency pills */
.apc-urgency { border: 0; padding: 0; margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.apc-urgency legend { font-size: 13px; font-weight: 600; color: var(--apc-text, #f5f5f5); padding: 0 0 8px; width: 100%; }
.apc-urgency input[type='radio'] { position: absolute; opacity: 0; pointer-events: none; }
.apc-urgency label {
	font-size: 12.5px; font-weight: 600; color: var(--apc-muted, #f5f5f5bf);
	background: var(--apc-card-2, #121212); border: 1.5px solid var(--apc-border, #363636); border-radius: 999px;
	padding: 8px 14px; cursor: pointer; transition: all 0.15s ease; user-select: none;
}
.apc-urgency label:hover { border-color: #5a5a5a; color: var(--apc-text, #f5f5f5); }
.apc-urgency input[type='radio']:checked + label {
	background: var(--apc-red, #e10012); border-color: var(--apc-red, #e10012); color: #ffffff;
}
.apc-urgency input[type='radio']:focus-visible + label { outline: 2px solid var(--apc-red, #e10012); outline-offset: 2px; }

/* Photo picker — hero cover preview + removable thumbnail strip */
.apc-jform__drop { position: relative; }
.apc-jform__hero[class] {
	position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
	background: #0d0d0d; border: 1.5px dashed #3f3f3f;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.apc-jform__hero[class]:hover, .apc-jform__drop.is-over .apc-jform__hero { border-color: var(--apc-red, #e10012); background: rgba(225, 0, 18, 0.07); }
.apc-jform__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;aspect-ratio: 16/10; }
.apc-jform__hero.has-img .apc-jform__hero-empty { display: none; }
.apc-jform__hero-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px; }
.apc-jform__hero-empty .apc-ico { width: 30px; height: 30px; color: var(--apc-red, #e10012); }
.apc-jform__hero-empty strong { font-size: 14px; color: var(--apc-text, #f5f5f5); }
.apc-jform__hero-empty span:last-child { font-size: 12.5px; color: var(--apc-muted, #f5f5f5bf); }
.apc-jform__drop input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }

.apc-jform__fileerr { color: var(--apc-red, #e10012); font-size: 12.5px; font-weight: 600; }

.apc-jform__strip { display: flex; flex-wrap: wrap; gap: 10px; }
.apc-jform__thumb { position: relative; flex: 0 0 auto; width: 78px; height: 78px; border-radius: 10px; overflow: hidden; border: 1px solid var(--apc-border, #363636); }
.apc-jform__thumbimg { width: 100%; height: 100%; object-fit: cover; display: block;    aspect-ratio: 1 / 1; }
.apc-jform__removebtn[class] {
	position: absolute; top: 4px; right: 4px; z-index: 1; margin: 0; padding: 0;
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, 0.78); color: #ffffff; font-size: 14px; line-height: 1; cursor: pointer;
}
.apc-jform__removebtn[class]:hover { background: var(--apc-red, #e10012); }
.apc-jform__pending { display: contents; }
.apc-jform__slot[class] {
	flex: 0 0 auto; width: 78px; height: 78px; border-radius: 10px;
	border: 1.5px dashed #3f3f3f; background: transparent; color: #8a8a8a;
	font-size: 22px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.apc-jform__slot[class]:hover { border-color: var(--apc-red, #e10012); color: #ffffff; }

/* Honeypot stays invisible but renderable */
.apc-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ===== Small buttons (row actions) ===== */
.apc-btn--sm[class] { padding: 7px 12px; font-size: 12px; }

/* ===== Dashboard CTA row + link-style rows ===== */
.apc-dash__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.apc-dash__actions .apc-btn { text-decoration: none; }

.apc-jrow--link { text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.apc-jrow--link:hover { border-color: #4a4a4a; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.apc-jrow--link .apc-jrow__title { color: var(--apc-text, #f5f5f5); }

.apc-jobs__list--compact .apc-jrow { align-items: center; padding: 12px 16px; }
.apc-jobs__list--compact .apc-jrow__thumb { flex-basis: 54px; width: 54px; height: 54px; }

.apc-panel__link { text-decoration: none; }
a.apc-panel__link:hover { color: var(--apc-red, #e10012); }

/* ===== Dashboard: recent message rows ===== */
.apc-msgrow { align-items: center; }

.apc-msgrow__ava {
	flex: 0 0 44px; width: 44px; height: 44px;
	border-radius: 50%; background: #242424;
	color: var(--apc-text, #f5f5f5);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700;
}

.apc-msgrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }

.apc-msgrow__job {
	font-style: normal; font-size: 11px; font-weight: 600;
	color: var(--apc-red, #e10012);
	max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.apc-msgrow__unread {
	font-style: normal; background: var(--apc-red, #e10012); color: #ffffff;
	font-size: 11px; font-weight: 700;
	min-width: 20px; height: 20px; border-radius: 999px;
	display: grid; place-items: center; padding: 0 6px; box-sizing: border-box;
}


/* ===== Responsive ===== */
@media (max-width: 720px) {
	.apc-jrow { flex-direction: column; }
	.apc-jrow__side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; flex-wrap: wrap; }
	.apc-jform__grid { grid-template-columns: 1fr; }
	.apc-jform__actions { justify-content: stretch; flex-direction: column; }
	.apc-jform__actions .apc-btn { width: 100%; text-align: center; }
}

/* ===== Button icons (SVG arrow instead of text glyphs) ===== */
.apc-btn[class] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.apc-btn .apc-btn__ico { width: 15px; height: 15px; flex: 0 0 auto; }

/* ===== Secondary "ghost" button (matches the site's Elementor outline buttons) ===== */
.apc-btn--ghost[class] { background: rgba(8, 8, 8, 0); border: 1px solid #363636; color: #ffffff; }
.apc-btn--ghost[class]:hover:not([disabled]),
.apc-btn--ghost[class]:focus-visible:not([disabled]) { background: #ffffff; border-color: var(--apc-red, #e10012); color: #080808; }

/* ===== Phase 5 — Browse Jobs (standalone page, not the app shell) ===== */
.apc-browse { max-width: 100%; margin: 0 auto; padding: 38px 0px 90px; }

.apc-bfilters {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
	padding: 12px;
	background: var(--apc-card-2, #121212);
	border: 1px solid #363636;
	border-radius: var(--apc-radius, 14px);
}

.apc-bfilters__search {
	position: relative;
	flex: 1 1 280px;
	display: flex;
	align-items: center;
	margin: 0;
}

.apc-bfilters__ico {
	position: absolute;
	left: 12px;
	display: flex;
	color: var(--apc-muted, #9a9a9a);
	pointer-events: none;
}

.apc-bfilters__ico svg { width: 16px; height: 16px; }

.apc-bfilters__search input {
	width: 100%;
	box-sizing: border-box;
	background: #0e0e0e;
	border: 1px solid #363636;
	border-radius: 10px;
	color: var(--apc-text, #f5f5f5);
	font-size: 13px;
	padding: 10px 12px 10px 38px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	color-scheme: dark;
}

.apc-bfilters__search input::placeholder { color: var(--apc-muted, #9a9a9a); }

/* Custom clear button for the search (the native type=search X is not
   wired to the GET filters and renders inconsistently). */
.apc-bfilters__clear[class] {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--apc-muted, #9a9a9a) !important;
	cursor: pointer !important;
	border-radius: 50% !important;
}

.apc-bfilters__clear[class]:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

.apc-bfilters__clear svg { width: 14px; height: 14px; }

/* Sidebar Live Support button: same look as links; flash = no provider. */
button.apc-appnav__item[class] {
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer !important;
	font: inherit !important;
	color: inherit !important;
	text-align: left !important;
}

button.apc-appnav__item[class].is-flash {
	animation: apc-supflash 0.6s ease 2;
}

@keyframes apc-supflash {
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	button.apc-appnav__item[class].is-flash { animation: none; }
}

.apc-bfilters__search input:focus {
	border-color: var(--apc-red, #e10012);
	box-shadow: 0 0 0 3px rgba(225, 0, 18, 0.18);
}

.apc-bfilters select {
	flex: 0 1 auto;
	min-width: 150px;
	background: #0e0e0e;
	border: 1px solid #363636;
	border-radius: 10px;
	color: var(--apc-text, #f5f5f5);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 34px 10px 12px;
	cursor: pointer;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
	color-scheme: dark;
}

.apc-bfilters select:focus {
	border-color: var(--apc-red, #e10012);
	box-shadow: 0 0 0 3px rgba(225, 0, 18, 0.18);
}

.apc-bcount {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: var(--apc-muted, #9a9a9a);
}

@media (max-width: 720px) {
	.apc-bfilters select { flex: 1 1 44%; }
}

/* Desktop: one row — search takes 50%, the three selects share the rest. */
@media (min-width: 721px) {
	.apc-bfilters { flex-wrap: nowrap; }
	.apc-bfilters__search { flex: 0 0 50%; }
	.apc-bfilters select { flex: 1 1 0; min-width: 0; }
}

.apc-bgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.apc-bcard {
	display: flex; flex-direction: column;
	background: var(--apc-card, #171717);
	border: 1px solid #363636;
	border-radius: var(--apc-radius, 14px);
	overflow: hidden; cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.apc-bcard:hover, .apc-bcard:focus-visible {
	border-color: rgba(225, 0, 18, 0.55);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	outline: none;
}
.apc-bcard__media { position: relative; aspect-ratio: 16 / 9; background: #0d0d0d; }
.apc-bcard__img { width: 100%; height: 100%; object-fit: cover; display: block;aspect-ratio: 3/2; }
.apc-bcard__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #3d3d3d; }
.apc-bcard__placeholder svg { width: 44px; height: 44px; }
.apc-bcard__count {
	position: absolute; bottom: 10px; right: 10px;
	font-size: 11px; font-weight: 600; font-style: normal;
	background: rgba(0, 0, 0, 0.65); color: #e6e6e6;
	padding: 3px 8px; border-radius: 999px;
}
.apc-bcard__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.apc-bcard__meta { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.apc-bcard__posted { font-size: 11.5px; color: var(--apc-muted, #9a9a9a); white-space: nowrap; }
.apc-bcard__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--apc-text, #f5f5f5); line-height: 1.4; }
.apc-bcard__tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.apc-bcard__tag { font-size: 11px; font-weight: 600; font-style: normal; color: #b3b3b3; background: #242424; border-radius: 999px; padding: 3px 9px; }
.apc-bcard__loc { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--apc-muted, #9a9a9a); }
.apc-bcard__loc svg { width: 13px; height: 13px; flex: 0 0 auto; }
.apc-bcard__excerpt {
	margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--apc-muted, #9a9a9a);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.apc-bcard__foot {
	margin-top: auto; padding-top: 10px; border-top: 1px solid #363636;
	display: flex; align-items: center; justify-content: space-between;
	font-size: 12px; color: var(--apc-muted, #9a9a9a); gap: 8px;
}
.apc-bcard__facts { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; }
.apc-bcard__view {
	display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
	padding: 7px 12px; border-radius: 8px; border: 1px solid #363636;
	background: rgba(8, 8, 8, 0); color: #ffffff;
	font-size: 12px; font-weight: 600; white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.apc-bcard__view svg { width: 12px; height: 12px; transform: rotate(-45deg); transition: transform 0.15s ease; }
.apc-bcard:hover .apc-bcard__view, .apc-bcard:focus-visible .apc-bcard__view {
	background: #ffffff; border-color: var(--apc-red, #e10012); color: #080808;
}
.apc-bcard:hover .apc-bcard__view svg, .apc-bcard:focus-visible .apc-bcard__view svg { transform: rotate(-45deg) translateX(1px); }

/* Pagination page numbers */
.apc-jobs__pagination { flex-wrap: wrap; align-items: center; }
.apc-jobs__pagination .apc-page-num { min-width: 38px; }
.apc-jobs__pagination .is-current {
	background: var(--apc-red, #e10012);
	border-color: var(--apc-red, #e10012);
	color: #ffffff; pointer-events: none;
}

/* ===== Fullscreen photo lightbox (drawer gallery) ===== */
.apc-lightbox {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(0, 0, 0, 0.93);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}
.apc-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.apc-lightbox img {
	max-width: 90vw; max-height: 82vh;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* Close + arrows are naked glyphs: no background, border or padding in ANY
   state (base, hover, active, focus). The !important guards exist because
   the theme/kit styles raw <button> elements with filled circles. */
.apc-lightbox__close[class] {
	position: absolute; top: 14px; right: 22px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	appearance: none; -webkit-appearance: none;
	color: #ffffff; font-size: 46px; line-height: 1;
	cursor: pointer;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.apc-lightbox__close[class]:hover,
.apc-lightbox__close[class]:active,
.apc-lightbox__close[class]:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: var(--apc-red, #e10012);
}

.apc-lightbox__nav[class] {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 62px; height: 62px; border-radius: 50%;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	appearance: none; -webkit-appearance: none;
	color: #ffffff;
	display: grid; place-items: center;
	cursor: pointer; transition: color 0.15s ease;
}
.apc-lightbox__nav[class]:hover,
.apc-lightbox__nav[class]:active,
.apc-lightbox__nav[class]:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: var(--apc-red, #e10012);
}
.apc-lightbox__nav svg { width: 30px; height: 30px; }
.apc-lightbox__nav--prev { left: 22px; }
.apc-lightbox__nav--next { right: 22px; }

.apc-lightbox__count {
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
	color: #cfcfcf; font-size: 13px;
	background: rgba(0, 0, 0, 0.5);
	padding: 4px 12px; border-radius: 999px;
}

.apc-drawer__photo { cursor: zoom-in; }

/* ===== Phase 6 UI — job details drawer ===== */
body.apc-drawer-lock { overflow: hidden; }

.apc-drawer-overlay {
	position: fixed; inset: 0; z-index: 99990;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity 0.22s ease, visibility 0.22s ease;
}
.apc-drawer-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.apc-drawer {
	position: fixed; top: 0; right: 0; z-index: 99991;
	height: 100dvh; width: min(520px, 100%);
	display: flex; flex-direction: column;
	background: #121212;
	/* Token scope: the drawer is moved to <body> by JS, outside .apc-app,
	   so the palette must be re-declared here for every var() inside. */
	--apc-red: #e10012;
	--apc-border: #363636;
	--apc-text: #f5f5f5;
	--apc-muted: #9a9a9a;
	border-left: 1px solid var(--apc-border);
	box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45);
	transform: translateX(102%);
	transition: transform 0.25s ease;
}
.apc-drawer.is-open { transform: translateX(0); }

/* Naked close glyph: no background, border or padding in ANY state —
   the theme/kit otherwise paints raw <button> elements as filled circles. */
.apc-drawer__close[class] {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	appearance: none; -webkit-appearance: none;
	color: #ffffff;
	font-size: 34px; line-height: 1; cursor: pointer;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
	transition: color 0.15s ease;
}
.apc-drawer__close[class]:hover,
.apc-drawer__close[class]:active,
.apc-drawer__close[class]:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: var(--apc-red);
}
.apc-drawer__close[class]:focus-visible { outline: 2px solid var(--apc-red); outline-offset: 2px; }

.apc-drawer__body {
	overflow-y: auto; padding: 22px 22px 28px;
	display: flex; flex-direction: column; gap: 16px;
	color-scheme: dark;
}
.apc-drawer__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.apc-drawer__title { margin: 0; font-size: 19px; line-height: 1.3; color: var(--apc-text, #f5f5f5); }
.apc-drawer__meta { margin: 0; font-size: 12.5px; color: var(--apc-muted, #9a9a9a); }
.apc-drawer__photo {
	width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
	border-radius: 10px; border: 1px solid var(--apc-border);
}

/* Phase 21 — featured photo + 4-up grid for the rest. */
.apc-drawer__photo--feature { width: 100%; height: auto; aspect-ratio: auto; border-radius: 12px; }

.apc-drawer__photogrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.apc-drawer__photogrid .apc-drawer__photo {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	margin: 0;
}

/* Phase 21 — pagination as small boxes with SVG arrows. */
.apc-jobs__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.apc-jobs__pagination .apc-btn[class] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	padding: 9px 16px !important;
	gap: 7px !important;
}

.apc-jobs__pagination .apc-btn[class] svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.apc-jobs__pagination .apc-page-num[class] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
}

.apc-drawer__section { display: flex; flex-direction: column; gap: 6px; }
.apc-drawer__label {
	margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--apc-muted, #9a9a9a);
}
.apc-drawer__text { margin: 0; font-size: 13.5px; line-height: 1.65; color: #cfcfcf; white-space: pre-line; }
.apc-drawer__text--muted { color: var(--apc-muted, #9a9a9a); }
.apc-drawer__cta {
	margin-top: auto; padding-top: 16px;
	border-top: 1px solid var(--apc-border);
	display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.apc-drawer__cta .apc-chip { font-style: normal; }
.apc-drawer__hint { margin: 0; font-size: 12px; color: var(--apc-muted, #9a9a9a); }

/* ===== Responsive (browse) ===== */
@media (max-width: 980px) {
	.apc-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.apc-bgrid { grid-template-columns: 1fr; }
	.apc-bfilters { grid-template-columns: 1fr; }
	.apc-drawer { width: 100%; }
}


/* ===== Posted By row (drawer) — avatar + name ===== */
.apc-drawer__byrow {
	display: flex;
	align-items: center;
	gap: 10px;
}

.apc-drawer__byrow .apc-drawer__avatar {
	width: 42px;
	height: 42px;
	font-size: 14px;
	flex: 0 0 auto;
}

.apc-drawer__byrow .apc-avatar--photo {
	background-size: cover;
	background-position: center;
	color: transparent;
}

.apc-drawer__byline {
	margin: 0;
	font-weight: 600;
	color: #ffffff;
}

/* ===== Phase 16 — Near Me ===== */
/* Phase 17: control row hidden by product decision — the Near Me FEATURE
   stays fully functional (URL params apc_where/apc_nkm/apc_nlat/apc_nlng,
   sort=near, geocode-at-save; chip + km badges still render when active). */
.apc-near {
	display: none !important;
}

.apc-near__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1.5px solid #3a3a3a;
	background: #1a1a1a;
	color: #f5f5f5 !important;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.apc-near__btn svg {
	width: 16px;
	height: 16px;
	color: var(--apc-red, #e10012);
}

.apc-near__btn[class]:hover {
	border-color: var(--apc-red, #e10012);
	background: #1a1a1a;
	color: #f5f5f5 !important;
}

.apc-near__btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

.apc-near__where {
	min-width: 0;
	max-width: 210px;
	flex: 1 1 130px;
}

.apc-near__status {
	font-size: 12.5px;
	color: #ffb84d;
	white-space: nowrap;
}

.apc-nearchip {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	padding: 9px 14px;
	border-radius: 10px;
	border: 1px solid rgba(225, 0, 18, 0.45);
	background: rgba(225, 0, 18, 0.08);
	color: var(--apc-text, #f5f5f5);
	font-size: 13px;
}

.apc-nearchip a {
	color: var(--apc-red, #e10012);
	font-weight: 600;
	text-decoration: none;
}

.apc-nearchip a:hover {
	text-decoration: underline;
}

.apc-nearchip--miss {
	border-color: rgba(255, 184, 77, 0.5);
	background: rgba(255, 184, 77, 0.08);
}

.apc-bcard__dist {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--apc-red, #e10012);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.apc-bcard__dist svg {
	width: 14px;
	height: 14px;
}

/* Browse Jobs AJAX swap: dim + brand spinner while the fresh markup is in
 * flight (falls back to a full page load on error). */
.apc-bresults {
	position: relative;
	transition: opacity 0.15s ease;
}

.apc-bresults.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

.apc-bresults.is-loading::after {
	content: "";
	position: absolute;
	top: 72px;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid rgba(255, 255, 255, 0.18);
	border-top-color: var(--apc-red, #e11d2e);
	border-radius: 50%;
	animation: apc-spin 0.7s linear infinite;
	z-index: 2;
}

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

@media (prefers-reduced-motion: reduce) {
	.apc-bresults.is-loading::after {
		animation-duration: 1.6s;
	}
}