/*
 * iWorky gateway additions on top of the ported wpjobster-front bundle
 * (stage 06). Only for elements this rebuild introduces that the source
 * theme never had a class for (server-rendered form field errors, a flash
 * message banner, and a disabled-with-reason CTA state for functionality
 * later stages own) — never a redefinition of an existing theme class.
 */

.flash-banner {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
}

.flash-banner-error {
	background: #fdecea;
	color: #611a15;
	border: 1px solid #f5c6cb;
}

.flash-banner-success {
	background: #eafaf1;
	color: #0b4f30;
	border: 1px solid #b7e4c7;
}

.field-error {
	color: #9f3a38;
	font-size: 12px;
	margin-top: 4px;
	display: block;
}

.field.field-invalid .input,
.field.field-invalid input {
	border-color: #e0b4b4 !important;
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #1678c2 !important;
	outline-offset: 3px;
}

.password-visibility-button,
.favorite-toggle-button {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 0;
}

.password-visibility-button {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.favorite-toggle-form {
	display: inline;
}

.favorite-toggle-form[hidden] {
	display: none !important;
}

.wp-social-login-provider-list button.wp-social-login-provider {
	width: 100%;
	border: 0;
	font: inherit;
}

.legend-link > button {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

.cta-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.empty-state {
	padding: 40px 20px;
	text-align: center;
	color: #767676;
}

.pagination-wrapper {
	margin: 24px 0;
	text-align: center;
}

.pagination-wrapper .page-numbers {
	display: inline-block;
	margin: 0 4px;
	padding: 6px 12px;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	text-decoration: none;
}

.pagination-wrapper .page-numbers.current {
	background: #1b1c1d;
	color: #fff;
	border-color: #1b1c1d;
}

/* Snapshot integration: source WordPress wrapped the Kadence homepage in
   the same full-width container and positioned its transparent header over
   the first slide. These rules preserve that relationship in gateway. */
body.home.without-header #main-wrapper,
body.home.without-header #main-content {
	margin-top: 0;
	padding-top: 0;
}

body.home.without-header #main-content {
	width: 100%;
	max-width: none;
}

body.home.without-header .header-pc {
	position: absolute;
}

body.home.without-header .kb-row-layout-id_beeb8e-cf {
	overflow: hidden;
}

body.home.without-header .cta-section {
	background-image: url("/static/theme/assets/images/homepage/cta-background.webp");
}

@media screen and (max-width: 767px) {
	body.home.without-header .kb-row-layout-wrap.alignwide {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
	}

	body.home.without-header .home-hero-slider .slick-list {
		height: 800px !important;
	}

}

.footer-widget-toggle {
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 4px;
}

.footer-widget-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.footer-wrapper {
	width: 100%;
}

@media screen and (max-width: 543px) {
	body.home.without-header .home-hero-slider .slick-list {
		height: 940px !important;
	}
}
/* Ledger-backed payments chart keeps the source graph container and draws
   locally, without the source site's Google Charts runtime. */
.payments-ledger-chart{position:relative;width:100%;height:300px}.payments-ledger-chart svg{width:100%;height:100%;overflow:visible}.payments-ledger-chart .chart-axis{stroke:#ddd;stroke-width:2}.payments-ledger-chart .chart-series{fill:none;stroke-width:4;vector-effect:non-scaling-stroke}.payments-ledger-chart .chart-series.spent{stroke:#ff6252}.payments-ledger-chart .chart-series.credit{stroke:#20c497}.payments-chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#888}.payments-chart-legend{display:flex;gap:20px;justify-content:center;padding:8px}.payments-chart-legend span:before{content:"";display:inline-block;width:12px;height:3px;margin-right:6px;vertical-align:middle}.payments-chart-legend .spent:before{background:#ff6252}.payments-chart-legend .credit:before{background:#20c497}.export-transactions-wrapper{border:0;font:inherit;text-align:inherit}.js-export-user-transactions-modal:not([hidden]){display:block!important;position:fixed;z-index:1002;top:10%;left:50%;transform:translateX(-50%);background:#fff}.js-export-user-transactions-modal[hidden]{display:none!important}
.post-job-field-help {
	margin-top: 8px;
	color: #898eb4;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

.job-creation-wizard {
	box-sizing: border-box;
	width: calc(100% - 40px) !important;
	max-width: 1180px !important;
	margin: 34px auto 0 !important;
}

.job-wizard-progress {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-bottom: 32px;
	padding: 0;
	border: 1px solid #e1e4ef;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(69, 74, 96, 0.07);
	overflow: hidden;
}

.job-wizard-progress-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 76px;
	padding: 12px;
	border: 0;
	border-right: 1px solid #e8eaf2;
	background: transparent;
	color: #898eb4;
	cursor: pointer;
}

.job-wizard-progress-item:last-child {
	border-right: 0;
}

.job-wizard-progress-item::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: transparent;
}

.job-wizard-progress-item > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid #d8dcea;
	border-radius: 50%;
	background: #f7f8fb;
	color: #898eb4;
	font-weight: 700;
}

.job-wizard-progress-item > strong {
	font-size: 14px;
	font-weight: 600;
}

.job-wizard-progress-item.is-active {
	color: #454a60;
	background: #fbfcff;
}

.job-wizard-progress-item.is-active::after {
	background: #20c497;
}

.job-wizard-progress-item.is-active > span,
.job-wizard-progress-item.is-complete > span {
	border-color: #20c497;
	background: #20c497;
	color: #fff;
}

.job-wizard-progress-item.is-complete {
	color: #5f657d;
}

.job-wizard-step[hidden] {
	display: none !important;
}

.job-wizard-step-heading {
	max-width: 760px;
	margin-bottom: 24px;
}

.job-wizard-step-heading > span {
	display: block;
	margin-bottom: 6px;
	color: #20c497;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.job-wizard-step-heading h2 {
	margin: 0 0 7px;
	color: #303548;
	font-size: 30px;
}

.job-wizard-step-heading p {
	margin: 0;
	color: #777d9b;
	font-size: 15px;
	line-height: 1.55;
}

.job-wizard-surface {
	margin-bottom: 24px;
	padding: 28px;
	border: 1px solid #e1e4ef;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(69, 74, 96, 0.05);
}

.order-panel-choice-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}

.order-panel-choice {
	min-width: 0;
	padding: 18px;
	border: 2px solid #e1e4ef;
	border-radius: 16px;
	background: #f9fafc;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.order-panel-choice:hover {
	border-color: #bfc5dc;
	transform: translateY(-1px);
}

.order-panel-choice.is-selected {
	border-color: #20c497;
	box-shadow: 0 12px 30px rgba(32, 196, 151, 0.13);
}

.order-panel-choice-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 58px;
	margin-bottom: 16px;
}

.order-panel-choice-header label {
	display: grid;
	gap: 3px;
	margin: 0 !important;
	cursor: pointer;
}

.order-panel-choice-header label strong {
	color: #3e4357;
	font-size: 18px;
}

.order-panel-choice-header label span {
	color: #898eb4;
	font-size: 13px;
	font-weight: 400;
}

.order-panel-choice-header input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	opacity: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.order-panel-choice:has(.js-order-panel-type:focus-visible) {
	outline: 3px solid rgba(32, 196, 151, 0.24);
	outline-offset: 3px;
}

.post-job-order-preview {
	border: 1px solid #e1e4ef;
	box-shadow: 0 8px 24px rgba(69, 74, 96, 0.08);
}

.order-panel-choice .post-job-order-preview {
	height: calc(100% - 74px);
}

.order-panel-settings {
	margin-top: 0;
}

.job-extras-live-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
	align-items: start;
	gap: 28px;
}

.job-extra-editor {
	display: grid;
	gap: 16px;
	margin-top: 0 !important;
}

.job-live-preview-column {
	position: sticky;
	top: 24px;
}

.job-live-preview-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: #707694;
	font-size: 13px;
	font-weight: 600;
}

.live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #20c497;
	box-shadow: 0 0 0 4px rgba(32, 196, 151, 0.12);
}

.job-image-dropzone {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: 30px;
	border: 2px dashed #cdd2e5;
	border-radius: 14px;
	background: #f9fafc;
	color: #777d9b !important;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.job-image-dropzone:hover,
.job-image-dropzone.is-dragover {
	border-color: #20c497;
	background: #f1fcf8;
}

.job-image-dropzone .icon {
	margin: 0 0 12px;
	color: #20c497;
	font-size: 34px;
}

.job-image-dropzone strong {
	margin-bottom: 5px;
	color: #454a60;
	font-size: 17px;
}

.job-image-dropzone span {
	font-size: 13px;
	font-weight: 400;
}

.job-image-dropzone input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.job-image-upload-status {
	min-height: 20px;
	margin: 12px 0 0;
	color: #777d9b;
	font-size: 13px;
}

.job-image-upload-status.is-success { color: #138d6c; }
.job-image-upload-status.is-error { color: #d84a4a; }

.job-image-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.job-image-preview {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 12px;
	background: #eef0f6;
}

.job-image-preview.is-cover {
	border-color: #20c497;
}

.job-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.job-image-preview-actions {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 22px 9px 8px;
	background: linear-gradient(transparent, rgba(25, 29, 43, 0.82));
}

.job-image-preview-actions button {
	padding: 4px 7px;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.92);
	color: #454a60;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}

.job-condition-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}

.job-condition-card {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 90px;
	padding: 18px;
	border: 1px solid #dfe2ed;
	border-radius: 12px;
	background: #fafbfc;
	cursor: pointer;
}

.job-condition-card span {
	display: grid;
	gap: 4px;
}

.job-condition-card strong { color: #454a60; }
.job-condition-card small { color: #898eb4; font-weight: 400; line-height: 1.35; }
.job-condition-card input { width: 20px; height: 20px; accent-color: #20c497; }

.job-wizard-ready {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	padding: 18px;
	border-radius: 12px;
	background: #effbf7;
	color: #317b67;
}

.job-wizard-ready .icon {
	margin: 0;
	font-size: 28px;
}

.job-wizard-ready p {
	margin: 4px 0 0;
	color: #5d8e80;
}

.job-wizard-actions {
	position: sticky;
	z-index: 5;
	bottom: 14px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
	padding: 15px 110px;
	border: 1px solid #dfe2ed;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 14px 34px rgba(69, 74, 96, 0.14);
	backdrop-filter: blur(8px);
}

.job-wizard-actions > :last-child {
	justify-self: end;
}

.job-wizard-step-counter {
	color: #898eb4;
	font-size: 13px;
	font-weight: 600;
}

.job-wizard-actions .text-button {
	margin: 0;
}

.job-wizard-actions [hidden] {
	display: none !important;
}

.js-job-wizard-back[hidden] ~ .js-job-wizard-next {
	grid-column: 3;
	justify-self: end;
}

.job-tier-editor,
.job-extra-editor {
	margin: 22px 0;
}

.job-tier-editor-heading {
	margin-bottom: 16px;
}

.job-tier-editor-heading h3 {
	margin-bottom: 5px;
}

.job-tier-editor-heading p {
	margin: 0;
	color: #898eb4;
}

.job-tier-editor-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.job-tier-editor-card {
	padding: 18px;
	border: 1px solid #d8dcea;
	border-radius: 12px;
	background: #fff;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.job-tier-editor-card.is-disabled {
	opacity: 0.58;
	background: #f7f8fb;
}

.job-tier-editor-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.job-tier-level-card .job-tier-editor-card-header {
	justify-content: flex-end;
}

.job-tier-card-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.job-tier-remove-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #e1e4ef;
	border-radius: 8px;
	background: #fff;
	color: #898eb4;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.job-tier-remove-button:hover,
.job-tier-remove-button:focus-visible {
	border-color: #ffb8b2;
	background: #fff5f4;
	color: #d84a4a;
}

.job-tier-remove-button .icon {
	margin: 0;
}

.job-tier-remove-button[hidden] {
	display: none !important;
}

.job-tier-editor-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}

.job-tier-editor-actions .text-button {
	margin: 0;
}

.job-tier-editor-actions > span {
	color: #898eb4;
	font-size: 13px;
}

.job-tier-editor-card .fields {
	margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
	.order-panel-choice-grid,
	.job-extras-live-layout {
		grid-template-columns: 1fr;
	}

	.job-live-preview-column {
		position: static;
	}

	.job-tier-editor-grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 767px) {
	.job-creation-wizard {
		margin-top: 22px;
	}

	.job-wizard-progress {
		grid-template-columns: repeat(5, 58px);
		justify-content: space-between;
		overflow-x: auto;
	}

	.job-wizard-progress-item {
		min-height: 60px;
		border-right: 0;
	}

	.job-wizard-progress-item > strong {
		display: none;
	}

	.job-wizard-step-heading h2 {
		font-size: 25px;
	}

	.job-wizard-surface,
	.order-panel-choice {
		padding: 18px;
		border-radius: 12px;
	}

	.job-tier-editor-actions {
		align-items: flex-start;
		flex-direction: column;
	}

	.job-image-preview-grid,
	.job-condition-list {
		grid-template-columns: 1fr;
	}

	.job-wizard-actions {
		grid-template-columns: 1fr 1fr;
		padding: 15px 18px;
	}

	.job-wizard-step-counter {
		display: none;
	}

	.job-wizard-actions .text-button {
		width: 100%;
	}

	.js-job-wizard-back[hidden] ~ .js-job-wizard-next {
		grid-column: 2;
	}
}

.order-additional-sidebar-wrapper {
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}

.compact-order-form,
.compact-order-panel {
	background: #fff;
}

.compact-order-configurator-heading {
	padding: 20px 24px 0;
	background: #fff;
}

.compact-order-configurator-heading > label {
	display: block;
	margin-bottom: 8px;
	color: #898eb4;
	font-size: 13px;
	font-weight: 600;
}

.compact-order-configurator-heading .ui.dropdown,
.compact-order-configurator-heading .js-post-preview-tier-select {
	width: 100%;
}

.compact-order-configurator-heading .js-post-preview-tier-select {
	height: 42px;
	padding: 0 36px 0 13px;
	border: 1px solid #d8dcea;
	border-radius: 7px;
	background: #fff;
	color: #454a60;
	font: inherit;
}

.order-additional-sidebar-wrapper .ui.menu.compact-order-package-tabs > a.item {
	padding: 14px 10px;
	text-transform: none;
	letter-spacing: 0;
}

.compact-order-summary {
	padding: 22px 24px 18px;
}

.compact-order-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 16px;
}

.compact-order-eyebrow {
	margin-bottom: 5px;
	color: #898eb4;
	font-size: 13px;
	font-weight: 600;
}

.compact-order-title {
	margin: 0;
	color: #454a60;
	font-size: 18px;
	line-height: 1.35;
}

.compact-order-price {
	color: #454a60;
	font-size: 20px;
	line-height: 1.35;
	white-space: nowrap;
}

.compact-order-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 16px;
	margin-top: 14px;
	color: #898eb4;
	font-size: 13px;
}

.compact-order-meta .icon {
	margin-right: 5px;
}

.compact-order-tier-features {
	display: grid;
	gap: 7px;
	margin: 15px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid #e8ebf6;
	list-style: none;
	color: #454a60;
	font-size: 13px;
}

.compact-order-tier-features .icon {
	color: #20c497;
}

.compact-order-extras {
	border-top: 1px solid #e8ebf6;
	border-bottom: 1px solid #e8ebf6;
}

.compact-order-extras summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	color: #454a60;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.compact-order-extras summary::-webkit-details-marker {
	display: none;
}

.compact-order-extras-count {
	color: #898eb4;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
}

.compact-order-extras-count .icon {
	margin: 0 0 0 4px;
	transition: transform 0.2s ease;
}

.compact-order-extras[open] .compact-order-extras-count .icon {
	transform: rotate(180deg);
}

.compact-order-extra-list {
	padding: 0 24px 8px;
}

.job-extra-option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid #e6e8f0;
	cursor: pointer;
}

.job-extra-option input { margin: 0; }
.job-extra-option > span { display: grid; gap: 3px; min-width: 0; }
.job-extra-option > span > span { color: #454a60; line-height: 1.3; }
.job-extra-option small { color: #898eb4; font-size: 11px; font-weight: 400; line-height: 1.3; }
.job-extra-option strong { white-space: nowrap; color: #454a60; }

.compact-order-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px 12px;
	color: #454a60;
}

.compact-order-total strong {
	font-size: 20px;
	white-space: nowrap;
}

.compact-order-actions {
	padding: 0 24px 20px;
}

.compact-order-actions .text-button {
	min-height: 48px;
	margin: 0;
}

.compact-order-custom-link {
	display: block;
	padding: 16px 24px;
	border-top: 1px solid #e8ebf6;
	background: #fff;
	color: #426195;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.compact-order-custom-link:hover,
.compact-order-custom-link:focus {
	color: #20c497;
}

@media screen and (max-width: 767px) {
	.compact-order-summary {
		padding: 20px;
	}

	.compact-order-configurator-heading {
		padding: 20px 20px 0;
	}

	.compact-order-extras summary {
		padding: 15px 20px;
	}

	.compact-order-extra-list {
		padding: 0 20px 8px;
	}

	.compact-order-total {
		padding: 18px 20px 12px;
	}

	.compact-order-actions {
		padding: 0 20px 20px;
	}

	.compact-order-custom-link {
		padding: 15px 20px;
	}
}

/* Fluid service-card thumbnails in the reference 230x153 (3:2) ratio. */
.job-card .image,
.job-card .image .card-image-clipper,
.job-card .image .card-image-helper {
	aspect-ratio: 3 / 2;
}

.job-card .image .card-image-helper {
	padding-bottom: 0;
}

/* Размер карточки только на странице «Избранное». */
.my-account-job-listing {
	display: grid;
	grid-template-columns: repeat(auto-fill, 240px);
	gap: 20px;
	align-items: stretch;
	justify-content: start;
	width: 100%;
}

.my-account-job-listing > .ui.card.job-card {
	width: 240px;
	min-width: 240px;
	max-width: 240px;
	flex: 0 0 240px;
	margin: 0;
}

/* Изображение занимает верхнюю часть карточки в пропорции 3:2. */
.my-account-job-listing > .ui.card.job-card > .image,
.my-account-job-listing > .ui.card.job-card > .image .card-image-clipper,
.my-account-job-listing > .ui.card.job-card > .image .card-image-helper {
	width: 100%;
	aspect-ratio: 3 / 2;
}

.my-account-job-listing > .ui.card.job-card > .image {
	position: relative;
	height: auto;
	overflow: hidden;
}

.my-account-job-listing > .ui.card.job-card > .image .card-image-clipper,
.my-account-job-listing > .ui.card.job-card > .image .card-image-helper {
	position: absolute;
	inset: 0;
	height: auto;
	overflow: hidden;
}

.my-account-job-listing > .ui.card.job-card > .image .wpj-carousel:not(.owl-loaded) {
	display: none;
}

.my-account-job-listing
	> .ui.card.job-card
	> .image
	.card-image-helper
	> img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transform: none;
}

.my-account-job-listing
	> .ui.card.job-card
	> .image
	.card-image-helper
	> img.my_image {
	z-index: 1;
}

@media screen and (max-width: 480px) {
	body .main-content {
		width: calc(100% - 24px);
		max-width: 1400px;
	}

	.my-account-job-listing {
		grid-template-columns: minmax(0, 1fr);
	}

	.my-account-job-listing > .ui.card.job-card {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		flex-basis: 100%;
	}
}

@media screen and (min-width: 481px) and (max-width: 1439px) {
	body .main-content {
		width: calc(100% - 32px);
		max-width: 1400px;
	}
}

.ui.cards > .card.job-card > :first-child,
.ui.card.job-card > :first-child {
	border-radius: 12px 12px 0 0 !important;
}

/* Job gallery: a compact 16:9 main frame with a scrollable thumbnail rail. */
.job-media-gallery {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 18px auto 0;
}

.job-media-gallery.has-thumbnails {
	max-width: 1004px;
	padding-right: 104px;
}

.job-media-gallery .job-images-slider {
	aspect-ratio: 16 / 9;
	min-width: 0;
	overflow: hidden;
	border-radius: 6px;
	background: #f1f3f8;
}

.job-media-gallery .job-images-slider .js-job-gallery-main {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.job-media-gallery .job-attachments-gallery {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: absolute;
	inset: 0 0 0 auto;
	width: 92px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 2px 5px 2px 2px;
	scrollbar-width: thin;
	scrollbar-color: #bfc3e0 transparent;
}

.job-media-gallery .js-job-gallery-thumbnail {
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 6px;
	background: #f1f3f8;
	opacity: 0.72;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.job-media-gallery .js-job-gallery-thumbnail:hover,
.job-media-gallery .js-job-gallery-thumbnail:focus-visible,
.job-media-gallery .js-job-gallery-thumbnail.is-active {
	border-color: #2f5cff;
	opacity: 1;
}

.job-media-gallery .js-job-gallery-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.job-media-gallery {
		padding-right: 0;
	}

	.job-media-gallery .job-attachments-gallery {
		flex-direction: row;
		position: static;
		width: auto;
		margin-top: 10px;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 2px 2px 6px;
	}

	.job-media-gallery .js-job-gallery-thumbnail {
		flex-basis: 80px;
	}
}