/*
Theme Name: GMP
Theme URI: https://example.com/gmp
Author: GMP
Description: Block theme for the Global Marine Platform. Provides the site chrome — header, footer, templates, palette and typography — while the GMP plugins provide the marketplace itself. Editable entirely from Appearance → Editor; no page builder required.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.2
Version: 0.8.9
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gmp-theme
Tags: block-theme, full-site-editing, business, e-commerce
*/

/*
 * Almost everything is declared in theme.json, which is where a block theme
 * belongs: settings there become CSS custom properties the block editor also
 * understands, so what an editor sees is what visitors get.
 *
 * Only the handful of rules the editor cannot express live here.
 */

/* Skip link — required for keyboard users, not provided by block markup. */
.skip-link {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
	left: 0;
	padding: 0.75rem 1.25rem;
	position: absolute;
	top: -100%;
	z-index: 999;
}

.skip-link:focus {
	top: 0;
}

/*
 * Marketplace screens opt out of the narrow content column. The plugins render
 * their own containers, so the page template just needs to get out of the way.
 */
.gmp-page-wide .wp-block-post-content > * {
	max-width: none;
}

/* Sticky footer on short pages, so a nearly empty dashboard still looks whole. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks {
	flex: 1 0 auto;
}

/* The header sits on a surface tint; give it a hairline rather than a shadow. */
.gmp-site-header {
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.gmp-site-footer {
	border-top: 1px solid var( --wp--preset--color--line );
}

/*
 * Header nav: mark the current section. Core's Navigation block adds the
 * current-menu-item class (an exact archive/page match, or the section
 * match added in functions.php for a single vessel/equipment/company/job
 * page) but ships no visual treatment for it — nothing here distinguished
 * the active link from the rest.
 */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--primary );
	font-weight: 700;
}

/*
 * Header brand lockup — the supplied Global Marine Platform logo, rendered
 * by the gmp/site-brand pattern.
 *
 * Sized by height so the 363x132 artwork keeps its ratio whatever the header
 * padding does. The logo carries the wordmark, so the site title and tagline
 * that used to sit beside the old CSS mark are gone from the header: printing
 * "Global Marine Platform" next to a logo that already says it read as a
 * mistake.
 */
.gmp-brand__link {
	display: block;
	line-height: 0;
}

.gmp-brand__logo {
	display: block;
	height: 38px;
	width: auto;
	max-width: 100%;
}

@media ( max-width: 40rem ) {
	.gmp-brand__logo {
		height: 30px;
	}
}

/*
 * The footer carries the same lockup knocked out to white, a little smaller
 * than the header's. The CSS-drawn square-and-diamond mark that used to stand
 * in for a logo in both places is gone with it.
 */
.gmp-brand--footer .gmp-brand__logo {
	height: 46px;
}

/*
 * Section-card icon swatch (front page "five sections" grid). Each
 * category gets its own shape, matching the approved design.
 */
.gmp-section-icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 9px;
	flex: none;
}

.gmp-section-icon::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: var( --wp--preset--color--accent );
	transform: rotate( 45deg );
}

.gmp-section-icon--equipment::before {
	background: none;
	border: 3px solid var( --wp--preset--color--accent );
	border-radius: 50%;
	transform: none;
}

.gmp-section-icon--companies::before {
	transform: none;
}

.gmp-section-icon--jobs::before {
	border-radius: 50% 50% 50% 0;
	transform: none;
}

.gmp-section-icon--parts::before {
	width: 18px;
	height: 6px;
	border-radius: 3px;
}

/*
 * Hero. The sea photograph is the background now, so the striped placeholder
 * that stood in for a photo nobody ever uploaded is gone with it.
 *
 * The copy is white over a dimmed photograph; the text shadow is what keeps
 * the headline legible where the surf runs bright, rather than pushing the
 * overlay darker still and losing the picture.
 */
.gmp-hero {
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.35 );
}

.gmp-hero .wp-element-button {
	text-shadow: none;
}

/* Signed-in account chip, shown by [gmp_account_chip] in the header. */
.gmp-account-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: var( --wp--preset--spacing--20 );
	border-left: 1px solid var( --wp--preset--color--line );
}

.gmp-account-chip__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--line );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var( --wp--preset--color--primary );
	flex: none;
}

.gmp-account-chip__name {
	font-size: 14px;
	font-weight: 600;
	color: var( --wp--preset--color--foreground );
}

/*
 * Footer links inherit the surrounding (semi-transparent white) text instead
 * of the blue link preset, which is unreadable on the dark footer. The link
 * columns set this inline; the shared gmp/account-links pattern is also used
 * on light backgrounds, so it carries no inline colour and relies on this.
 */
.gmp-site-footer a {
	color: inherit;
}

/* Footer link hover — the columns use color:inherit so links match the
 * surrounding (semi-transparent white) text; lighten fully on hover. */
.gmp-site-footer a:hover {
	color: #fff !important;
}

/*
 * Marketplace screens (vessels/equipment archives, single listings) are
 * rendered by gmp-listings' own templates, styled by gmp-core.css /
 * gmp-listings.css — those already read this theme's theme.json tokens
 * (--wp--preset--color--primary etc.), so most of the visual system carries
 * over automatically. What follows are the few gaps between that baseline
 * and the approved design: a header band, and a couple of controls the
 * plugin doesn't wrap in its own field styling.
 */

/* .gmp-archive__layout (the sidebar + results grid) gets its own
 * padding-inline from the plugin's base CSS (gmp-listings.css), but the
 * crumbs and header rows above it are outside that grid and got none —
 * they sat flush against the browser edge while everything below had a
 * margin. Match the same inset here so the whole page reads as one
 * consistent column. */
.gmp-archive__crumbs,
.gmp-archive__header {
	padding-inline: var( --gmp-space-4, var( --wp--preset--spacing--30 ) );
}

.gmp-archive__crumbs {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
	margin: 0 0 10px;
}

.gmp-archive__crumbs a {
	color: inherit;
}

.gmp-archive__crumbs span:last-child {
	color: var( --wp--preset--color--foreground );
}

.gmp-archive__header {
	align-items: flex-end;
	border-bottom: 1px solid var( --wp--preset--color--line );
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
	justify-content: space-between;
	margin: 0 0 var( --gmp-gap, 1.5rem );
	padding-bottom: 1.75rem;
}

.gmp-archive__title {
	font-size: var( --wp--preset--font-size--x-large );
	margin: 0;
}

.gmp-archive__count {
	color: var( --wp--preset--color--muted );
	font-size: 15px;
	margin: 6px 0 0;
}

.gmp-archive__sort {
	margin-bottom: 0 !important;
}

/* The sort <select> isn't wrapped in .gmp-field, so it doesn't inherit the
 * plugin's own field styling — give it the same treatment by hand. */
.gmp-archive__sort select {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --gmp-border-strong, var( --wp--preset--color--line ) );
	border-radius: var( --gmp-radius, 8px );
	color: inherit;
	font: inherit;
	padding: 0.6rem 0.75rem;
}

.gmp-archive__meta-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: var( --gmp-gap );
}

.gmp-archive__meta-row .gmp-active-filters {
	margin: 0;
}

.gmp-archive__results-count {
	color: var( --wp--preset--color--muted );
	font-size: 14px;
	white-space: nowrap;
}

/*
 * Filters panel additions (theme override at gmp/listings/listing/filters.php).
 */
.gmp-filters__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.gmp-filters__title {
	font-size: 1.05rem;
	margin: 0;
}

.gmp-filters__clear {
	color: var( --wp--preset--color--primary );
	font-size: 13px;
	font-weight: 600;
}

.gmp-filters__group {
	border-top: 1px solid var( --wp--preset--color--line );
	margin-top: var( --gmp-space-5, 1.5rem );
	margin-bottom: var( --gmp-space-4, 1rem );
	padding-top: var( --gmp-space-5, 1.5rem );
}

.gmp-filters__group-label {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 10px;
}

.gmp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gmp-pill {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 12px;
}

.gmp-pill.is-active {
	background: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
}

.gmp-filters__term {
	font-size: 14px;
	justify-content: space-between;
	margin-bottom: 10px;
}

.gmp-filters__term-count {
	color: var( --wp--preset--color--muted );
}

.gmp-filters__term-name {
	flex: 1;
}

/*
 * Primary category multi-select (gmp/listings/listing/filters.php,
 * assets/js/filter-multiselect.js). A <details> so it still opens and
 * submits without JS; the script only adds search, the summary text and
 * close-on-outside-click. The panel opens in flow rather than floating:
 * .gmp-archive__sidebar scrolls (overflow-y: auto), which would clip an
 * absolutely positioned panel at the sidebar's edge.
 */
.gmp-multiselect__toggle {
	align-items: center;
	background: var( --wp--preset--color--white );
	border: 1px solid var( --gmp-border-strong, var( --wp--preset--color--line ) );
	border-radius: var( --gmp-radius, 8px );
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	gap: 8px;
	justify-content: space-between;
	list-style: none;
	padding: 0.7rem 0.9rem;
}

.gmp-multiselect__toggle::-webkit-details-marker {
	display: none;
}

.gmp-multiselect__toggle::after {
	border-bottom: 2px solid var( --wp--preset--color--muted );
	border-right: 2px solid var( --wp--preset--color--muted );
	content: "";
	flex-shrink: 0;
	height: 6px;
	margin-top: -3px;
	transform: rotate( 45deg );
	width: 6px;
}

.gmp-multiselect[open] .gmp-multiselect__toggle {
	border-color: var( --wp--preset--color--primary );
}

.gmp-multiselect[open] .gmp-multiselect__toggle::after {
	margin-top: 3px;
	transform: rotate( -135deg );
}

.gmp-multiselect__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gmp-multiselect__panel {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	box-shadow: 0 8px 24px rgba( 15, 23, 42, 0.08 );
	margin-top: 4px;
	padding: 8px;
}

.gmp-multiselect__search {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	box-sizing: border-box;
	font-size: 14px;
	margin-bottom: 6px;
	padding: 8px 10px;
	width: 100%;
}

.gmp-multiselect__options {
	max-height: 260px;
	overflow-y: auto;
}

.gmp-multiselect__options .gmp-filters__term {
	border-radius: 4px;
	cursor: pointer;
	margin: 0;
	padding: 7px 6px;
}

.gmp-multiselect__options .gmp-filters__term:hover {
	background: var( --wp--preset--color--surface );
}

.gmp-multiselect__empty {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
	margin: 6px;
}

.gmp-multiselect__footer {
	border-top: 1px solid var( --wp--preset--color--line );
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
	padding-top: 8px;
}

.gmp-multiselect__footer[hidden] {
	display: none;
}

.gmp-multiselect__clear {
	background: none;
	border: 0;
	color: var( --wp--preset--color--primary );
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 6px;
}

.gmp-multiselect__clear:not( :disabled ):hover {
	text-decoration: underline;
}

.gmp-multiselect__clear:disabled {
	color: var( --wp--preset--color--muted );
	cursor: default;
}

.gmp-field--range__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gmp-field--range__dash {
	color: var( --wp--preset--color--muted );
}

.gmp-save-search__title {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 6px;
}

.gmp-save-search__hint {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 12px;
}

/* The price is the one number a buyer scans for first — give it the weight
 * and colour the design calls for instead of the plugin's plain default. */
.gmp-card__price {
	color: var( --wp--preset--color--primary );
	font-size: 1.25rem;
	font-weight: 700;
}

.gmp-details__price {
	color: var( --wp--preset--color--primary );
	font-weight: 700;
}

/*
 * Listing-type / condition ribbon on cards (theme override at
 * gmp/listings/listing/card.php adds the markup; this is purely presentational).
 */
.gmp-card__media {
	position: relative;
}

.gmp-card__ribbon {
	background: var( --wp--preset--color--primary );
	border-radius: 6px;
	color: var( --wp--preset--color--white );
	font-size: 12px;
	font-weight: 700;
	left: 12px;
	letter-spacing: 0.03em;
	padding: 5px 10px;
	position: absolute;
	top: 12px;
}

.gmp-card__ribbon--outline {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--muted );
}

/*
 * Company directory card additions (theme override at
 * gmp/listings/listing/card.php): a "Verified" mark beside the title, and
 * small category/location tags in place of the price row that doesn't
 * apply to a company profile.
 */
.gmp-card__verified {
	align-items: center;
	color: var( --wp--preset--color--primary );
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 6px;
	margin-left: 8px;
	vertical-align: middle;
}

.gmp-card__verified-mark {
	background: var( --wp--preset--color--accent );
	flex: none;
	height: 8px;
	transform: rotate( 45deg );
	width: 8px;
}

/*
 * The unverified state. Quiet on purpose: it is a statement of fact about
 * where GMP has got to, not an accusation against the company, and every
 * account wears it on the day it registers.
 */
.gmp-card__verified--none {
	color: var( --wp--preset--color--muted, #6b7280 );
	font-weight: 500;
}

.gmp-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gmp-card__tag {
	background: var( --wp--preset--color--surface );
	border-radius: 6px;
	color: var( --wp--preset--color--muted );
	font-size: 12px;
	font-weight: 600;
	padding: 4px 8px;
}

/*
 * Spare part request form (theme override at
 * gmp/spare-parts/request/form.php): the plugin's own three legend-boxed
 * fieldsets become one flat card with paired two-column fields, matching
 * the approved design. Same fields/names, only the grouping changes.
 */
.gmp-part-request {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 12px );
	margin-inline: auto;
	max-width: 46rem;
	padding: var( --wp--preset--spacing--40 );
}

.gmp-part-request__form {
	display: grid;
	gap: 0 var( --wp--preset--spacing--30 );
	grid-template-columns: 1fr;
}

@media ( min-width: 40rem ) {
	.gmp-part-request__form {
		grid-template-columns: 1fr 1fr;
	}
}

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

.gmp-part-request__divider {
	background: var( --wp--preset--color--line );
	height: 1px;
	margin: 0;
}

/*
 * Registration card: the account-type chooser is already live (gmp-core.js
 * toggles fields via data-gmp-account-type/data-gmp-only) — it just renders
 * as a plain radio fieldset. This restyles it as the two-tab switcher the
 * design calls for, with the native radios kept for click/keyboard
 * behaviour (visually hidden, not display:none, so focus/arrow-key
 * navigation still works) and the checked state read with :has().
 */
.gmp-register {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 12px );
	margin-inline: auto;
	max-width: 42rem;
	padding: var( --wp--preset--spacing--40 );
}

.gmp-register .gmp-field--type {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 var( --wp--preset--spacing--30 );
	overflow: hidden;
	padding: 0;
}

.gmp-register .gmp-field--type legend {
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.gmp-register .gmp-field--type .gmp-choice {
	background: var( --wp--preset--color--surface );
	border-bottom: 2px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--muted );
	cursor: pointer;
	font-weight: 600;
	justify-content: center;
	padding: 18px;
}

.gmp-register .gmp-field--type .gmp-choice input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.gmp-register .gmp-field--type .gmp-choice:has( input:checked ) {
	background: var( --wp--preset--color--white );
	border-bottom-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary );
	font-weight: 700;
}

.gmp-register .gmp-form__form {
	display: grid;
	gap: 0 var( --wp--preset--spacing--30 );
	grid-template-columns: 1fr;
}

@media ( min-width: 34rem ) {
	.gmp-register .gmp-form__form {
		grid-template-columns: 1fr 1fr;
	}
}

.gmp-register .gmp-field--type,
.gmp-register .gmp-field--terms,
.gmp-register .gmp-field--submit,
.gmp-register .gmp-hp {
	grid-column: 1 / -1;
}

/*
 * .gmp-field sets display:flex (gmp-core.css), which has the same
 * specificity as the browser's default [hidden] { display: none } rule and
 * loads after it — so a field the account-type toggle just hid (gmp-core.js
 * sets the `hidden` attribute) stayed visible anyway. This just needs to win.
 */
.gmp-field[hidden] {
	display: none;
}

/*
 * gmp-core.css sets width:100% on field inputs without box-sizing:border-box,
 * so their own padding and border add on top of that 100% (content-box, the
 * browser default) instead of being carved out of it — the input's right
 * edge overflows past its container by roughly the horizontal padding, most
 * visible in the narrow filter sidebar where it reads as touching the wall.
 */
.gmp-field input,
.gmp-field select,
.gmp-field textarea {
	box-sizing: border-box;
}

/*
 * Dashboard sidebar additions (theme override at
 * gmp/dashboard/dashboard/dashboard.php): the "Signed in as" account
 * summary and the log-out link the design shows above/below the nav.
 * .gmp-dashboard__sidebar wraps the plugin's own .gmp-dashboard__nav so
 * both sit inside the existing sidebar grid column.
 */
.gmp-dashboard__sidebar {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--30 );
}

.gmp-dashboard__who-label {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
	margin: 0;
}

.gmp-dashboard__who-name {
	font-size: 15px;
	font-weight: 700;
	margin: 2px 0 0;
}

.gmp-dashboard__verified {
	align-items: center;
	color: var( --wp--preset--color--primary );
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 6px;
	margin-top: 8px;
}

.gmp-dashboard__foot {
	border-top: 1px solid var( --wp--preset--color--line );
	padding-top: var( --wp--preset--spacing--20 );
}

.gmp-dashboard__foot a {
	color: var( --wp--preset--color--muted );
	font-size: 14px;
}

/*
 * Submit-listing wizard step 1 (category) — theme override at
 * gmp/listings/submit/step-type.php. One card per section in a 2x2 grid,
 * with a secondary "Listing type" pill row below the grid for a section
 * with more than one type. A card's own "selected" state keys off
 * .gmp-submit__category:has(input:checked) — matching when ANY radio in
 * that card is checked (the card itself carries the first type's radio),
 * and the pill row separately keys off the form containing a checked
 * radio for that section, so picking a pill also lights up its card.
 */
.gmp-submit__hint {
	color: var( --wp--preset--color--muted );
	margin: -0.5rem 0 var( --wp--preset--spacing--30 );
}

/* Confirms which category step 1 selected, shown under the Details/Photos/
 * Review step headings (gmp/listings/submit/step-details.php) — Category
 * itself has no equivalent, since a visitor is still choosing there. */
.gmp-submit__type-confirm {
	background: var( --wp--preset--color--surface );
	border-radius: var( --gmp-radius, 8px );
	color: var( --wp--preset--color--muted );
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	margin: -0.5rem 0 var( --wp--preset--spacing--30 );
	padding: 4px 10px;
}

.gmp-submit__categories {
	display: grid;
	row-gap: 3rem;
	column-gap: var( --wp--preset--spacing--30 );
	margin-bottom: 4.5rem;
}

@media ( min-width: 34rem ) {
	.gmp-submit__categories {
		grid-template-columns: 1fr 1fr;
	}
}

.gmp-submit .gmp-choice--card {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	height: 100%;
	margin-bottom: 0;
	padding: var( --wp--preset--spacing--30 );
}

.gmp-submit .gmp-choice--card input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.gmp-submit__category:has( input:checked ) {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 1px var( --wp--preset--color--primary );
}

/* Covers the multi-type case: picking a pill checks a different radio than
 * the card's own (first-type) one, so the card's plain :has(input:checked)
 * above stops matching — this keeps it selected as long as any radio
 * sharing its section is checked, wherever in the form that radio is. */
.gmp-form__form:has( input[ data-gmp-section="vessels" ]:checked ) .gmp-submit__category[ data-gmp-section="vessels" ] {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 1px var( --wp--preset--color--primary );
}

.gmp-submit .gmp-choice--card strong {
	display: block;
}

.gmp-submit .gmp-choice--card em {
	color: var( --wp--preset--color--muted );
	display: block;
	font-size: 13px;
	font-style: normal;
	line-height: 1.5;
	margin-top: 6px;
}

.gmp-submit__category--link {
	color: inherit;
	display: flex;
	text-decoration: none;
}

/* The job wizard's own category step (gmp/jobs/job/step-type.php) shows the
 * three listing categories as submit buttons rather than radios, because
 * choosing one hands off to the other wizard instead of continuing here.
 * A button carries its own chrome, so it is reset back to the card. */
.gmp-submit__category--button {
	background: none;
	color: inherit;
	display: flex;
	font: inherit;
	text-align: left;
	width: 100%;
}

/* The card for the category already chosen. Not a control — there is nothing
 * to pick — so it gets the selected border without the hover affordance. */
.gmp-submit__category.is-chosen {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 1px var( --wp--preset--color--primary );
	cursor: default;
	display: flex;
}

/* Category icons: same CSS-shape technique as the front page's section
 * icons (.gmp-section-icon), sized down and reusing the family of shapes
 * rather than inventing a new one per label. */
.gmp-submit__icon {
	background: var( --wp--preset--color--surface );
	border-radius: 9px;
	flex: none;
	height: 40px;
	position: relative;
	width: 40px;
}

.gmp-submit__icon::before {
	background: var( --wp--preset--color--accent );
	content: "";
	height: 15px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% ) rotate( 45deg );
	width: 15px;
}

.gmp-submit__icon--equipment::before {
	background: none;
	border: 3px solid var( --wp--preset--color--accent );
	border-radius: 50%;
	transform: translate( -50%, -50% );
}

.gmp-submit__icon--job::before {
	transform: translate( -50%, -50% );
}

.gmp-submit__icon--company::before {
	border-radius: 3px;
	height: 6px;
	transform: translate( -50%, -50% );
	width: 18px;
}

/*
 * Secondary "Listing type" pill row: a full-width box below the whole
 * category grid (not nested inside a card — that made a card's own grid
 * cell grow taller than its row siblings, without the row itself
 * reflowing, so the box overlapped the row below). Revealed only for the
 * section it belongs to, via the form containing a checked radio carrying
 * that section's data-gmp-section. One explicit rule per multi-type
 * section — currently only vessels has more than one type; a future
 * second one needs its own matching rule here.
 */
.gmp-submit__subtypes {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 12px );
	display: none;
	margin-bottom: var( --wp--preset--spacing--30 );
	padding: var( --wp--preset--spacing--30 );
}

.gmp-form__form:has( input[ data-gmp-section="vessels" ]:checked ) .gmp-submit__subtypes[ data-gmp-subtypes-for="vessels" ] {
	display: block;
}

.gmp-submit__subtypes-label {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 8px;
}

.gmp-pill-radio {
	cursor: pointer;
}

.gmp-pill-radio input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.gmp-pill-radio span {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 12px;
}

.gmp-pill-radio:has( input:checked ) span {
	background: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
}

/*
 * Chat thread bubbles: .gmp-thread__messages (gmp-dashboard.css) is a flex
 * column with no align-items, so it defaults to stretch — every bubble
 * fills the full row width regardless of its max-width, which is why
 * .gmp-message.is-mine's margin-left:auto never had room to do anything.
 * Capping width with min() as well (not just max-width) guarantees a
 * visible narrower bubble even for long messages, where the browser's
 * shrink-to-fit line-breaking would otherwise happily claim the full row.
 */
.gmp-thread__messages {
	align-items: flex-start;
}

.gmp-message {
	width: fit-content;
	max-width: min( 42rem, 78% );
}

.gmp-message.is-mine {
	align-self: flex-end;
}

/*
 * Single listing page (theme override at gmp/listings/listing/single.php).
 */

/*
 * The two-column main/aside grid, normally styled by gmp-listings.css.
 * gmp-jobs deliberately never enqueues that stylesheet -- it doesn't depend
 * on gmp-listings at all, so it can move to a separate site later -- but the
 * single job page (gmp/jobs/job/details.php) reuses this same layout for
 * consistency with the listings pages, so the theme carries its own copy of
 * just the layout mechanics rather than the plugin's business-logic CSS.
 */
.gmp-details__grid {
	display: grid;
	gap: var( --wp--preset--spacing--40, 2rem );
}

@media ( min-width: 60rem ) {
	.gmp-details__grid {
		align-items: start;
		grid-template-columns: minmax( 0, 1fr ) 21rem;
	}

	.gmp-details__aside {
		position: sticky;
		top: var( --wp--preset--spacing--30 );
	}
}

.gmp-details__price {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.gmp-single__crumbs {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
	margin: 0 0 14px;
}

.gmp-single__crumbs a {
	color: inherit;
}

.gmp-single__crumbs span:last-child {
	color: var( --wp--preset--color--foreground );
}

.gmp-single__badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 10px;
}

.gmp-card__ribbon--static {
	position: static;
}

.gmp-single__escrow {
	align-items: center;
	color: var( --wp--preset--color--primary );
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
}

.gmp-single__dot {
	background: var( --wp--preset--color--accent );
	border-radius: 50%;
	flex: none;
	height: 6px;
	width: 6px;
}

.gmp-single__meta {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
}

.gmp-single__header {
	margin-bottom: var( --gmp-gap, 1.5rem );
}

.gmp-single__title {
	font-size: var( --wp--preset--font-size--x-large );
	margin: 0;
}

.gmp-single__subtitle {
	color: var( --wp--preset--color--muted );
	font-size: 15px;
	margin: 6px 0 0;
}

/* Gallery: radio-driven, no JS. One hidden radio per photo (first checked
 * by default); the per-index show/hide rule is generated inline per
 * listing since the photo count varies. Clicking a thumbnail label toggles
 * its radio, which the sibling main-photo rule and the :has() below both
 * read. */
.gmp-single-gallery__radios {
	height: 0;
	overflow: hidden;
	width: 0;
}

.gmp-single-gallery__main {
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 12px );
	overflow: hidden;
}

.gmp-single-gallery__main img {
	aspect-ratio: 3 / 2;
	display: none;
	object-fit: cover;
	width: 100%;
}

/*
 * Photo 0 needs no unconditional "show by default" rule of its own: its
 * radio already carries the checked attribute in the markup (single.php),
 * so the same per-photo :checked rule that switches between photos 1..n
 * (added inline, per-listing, right after the gallery markup) already
 * matches it on first render. An unconditional rule here would leave
 * photo 0 visible forever, stacked behind whichever photo got switched
 * to — that was the actual bug: clicking a thumbnail changed which radio
 * was checked, but nothing had ever hidden photo 0 to begin with.
 */

.gmp-single-gallery__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.gmp-single-gallery__thumb {
	border: 2px solid transparent;
	border-radius: var( --gmp-radius-sm, 6px );
	cursor: pointer;
	flex: none;
	overflow: hidden;
}

.gmp-single-gallery__thumb img {
	display: block;
	height: 64px;
	object-fit: cover;
	width: 84px;
}

/* Per-index active-thumbnail rules are generated inline in single.php,
 * alongside the matching main-photo show/hide rules — the radios and the
 * thumbnails are siblings (not nested), which the main-photo swap requires
 * (~ only selects later siblings), so :has() can't correlate them by
 * containment and needs :nth-child position matching instead. */

.gmp-single-specs {
	display: grid;
	gap: 0 var( --wp--preset--spacing--30 );
	grid-template-columns: 1fr;
	margin: 0;
}

@media ( min-width: 40rem ) {
	.gmp-single-specs {
		grid-template-columns: 1fr 1fr;
	}
}

.gmp-single-specs__row {
	border-bottom: 1px solid var( --wp--preset--color--line );
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
}

.gmp-single-specs__row dt {
	color: var( --wp--preset--color--muted );
	font-size: 14px;
}

.gmp-single-specs__row dd {
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.gmp-single__docs {
	font-size: 14px;
	margin-top: var( --gmp-gap );
}

.gmp-single__docs span {
	color: var( --wp--preset--color--line );
	margin: 0 8px;
}

.gmp-single__price-label {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
	margin: 0;
}

.gmp-single__price {
	font-size: 1.6rem !important;
	margin: 4px 0 var( --gmp-gap );
}

.gmp-single__save {
	margin-bottom: 10px;
	width: 100%;
}

.gmp-single__note {
	align-items: flex-start;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius-sm, 8px );
	display: flex;
	font-size: 13px;
	gap: 10px;
	line-height: 1.6;
	margin-top: var( --gmp-gap );
	padding: 14px;
}

.gmp-single__note-dot {
	background: var( --wp--preset--color--accent );
	flex: none;
	height: 8px;
	margin-top: 4px;
	transform: rotate( 45deg );
	width: 8px;
}

.gmp-single__seller {
	border-top: 1px solid var( --wp--preset--color--line );
	margin-top: var( --gmp-gap );
	padding-top: var( --gmp-gap );
}

.gmp-single__seller-head {
	align-items: center;
	display: flex;
	gap: 12px;
}

.gmp-single__seller-mark {
	align-items: center;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius-sm, 8px );
	color: var( --wp--preset--color--primary );
	display: flex;
	flex: none;
	font-size: 13px;
	font-weight: 700;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.gmp-single__seller-name {
	font-weight: 700;
}

.gmp-single__verified {
	align-items: center;
	color: var( --wp--preset--color--primary );
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 6px;
	margin-top: 2px;
}

.gmp-single__seller-stats {
	display: flex;
	justify-content: space-between;
	margin: 14px 0 0;
}

.gmp-single__seller-stats dt {
	color: var( --wp--preset--color--muted );
	font-size: 12px;
	margin: 0 0 2px;
}

.gmp-single__seller-stats dd {
	font-weight: 600;
	margin: 0;
}

.gmp-single__seller-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	margin-top: 12px;
}

/*
 * Companies directory (theme override at gmp/listings/listing/archive.php,
 * branched off $gmp_section === 'companies'): a search bar and category
 * pills instead of the sidebar filter panel a vessel/equipment archive
 * uses. Pill labels come from the real gmp_company_cat terms.
 */
.gmp-directory__search {
	display: grid;
	gap: var( --wp--preset--spacing--20 );
	grid-template-columns: 1fr;
	margin-bottom: var( --wp--preset--spacing--30 );
}

@media ( min-width: 40rem ) {
	.gmp-directory__search {
		grid-template-columns: 1fr 12rem auto;
	}
}

.gmp-directory__search input {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	box-sizing: border-box;
	font: inherit;
	height: 46px;
	padding: 0 14px;
	width: 100%;
}

/*
 * The search input, country input and Search button live in the same grid
 * row (grid-template-columns above) with an 8px gap already set on the
 * grid — but each input was width:100% in content-box (the browser
 * default), so its own padding and border added on top of that 100%
 * instead of being carved out of it, overflowing into the gap and making
 * neighbouring controls look like one fused control with no gap.
 * box-sizing:border-box above is the actual fix; nothing else changes.
 */

.gmp-directory__pills {
	margin-bottom: var( --wp--preset--spacing--30 );
}

.gmp-directory__pills .gmp-pill {
	border-radius: 999px;
}

.gmp-directory__pills .gmp-pill.is-active {
	background: var( --wp--preset--color--primary-dark );
	border-color: var( --wp--preset--color--primary-dark );
	color: var( --wp--preset--color--white );
}

.gmp-directory__count {
	color: var( --wp--preset--color--muted );
	font-size: 14px;
	margin: 0 0 var( --wp--preset--spacing--20 );
}

/*
 * The card title link's stretched-link pseudo-element (gmp-listings.css,
 * .gmp-card__title a::after — position:absolute; inset:0, to make the
 * whole card clickable) is contained by .gmp-card--listing's own
 * position:relative in the plugin's markup. This theme's card override
 * (gmp/listings/listing/card.php) renders the article as .gmp-card, not
 * .gmp-card--listing, so that containment never applied: with no
 * positioned ancestor, the pseudo-element expanded all the way up to the
 * viewport, covering the entire page and hijacking clicks anywhere on it
 * (the sidebar filters included) to whichever card's link won the
 * stacking order.
 */
.gmp-card {
	position: relative;
}

/*
 * Company card logo row (theme override at gmp/listings/listing/card.php):
 * a company profile doesn't have a listing photo the way a vessel or an
 * equipment item does, so it gets a small square logo slot instead of the
 * full-width media banner, with the Verified mark on the same row instead
 * of squeezed onto the title line.
 */
.gmp-card--company {
	padding: var( --wp--preset--spacing--20 );
}

.gmp-card__logo-row {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin-bottom: var( --wp--preset--spacing--20 );
}

.gmp-card__logo {
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius-sm, 8px );
	display: block;
	flex: none;
	height: 48px;
	overflow: hidden;
	width: 48px;
}

.gmp-card__logo img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.gmp-card__logo-placeholder {
	align-items: center;
	background: color-mix( in srgb, var( --wp--preset--color--primary ) 10%, var( --wp--preset--color--white ) );
	color: var( --wp--preset--color--primary );
	display: flex;
	font-size: 20px;
	font-weight: 700;
	height: 100%;
	justify-content: center;
}

.gmp-card__logo {
	text-decoration: none;
}

.gmp-card--company .gmp-card__verified {
	margin-left: 0;
	margin-top: 4px;
}

/*
 * Dashboard Active/Inactive Listings tabs (theme addition at
 * inc/dashboard.php, registered through the dashboard's own
 * gmp_dashboard_tabs filter): heading row, stat cards, and the
 * type-pills + search toolbar the plugin's own listings tab doesn't have.
 */
.gmp-dashboard__listings-head {
	align-items: flex-end;
	display: flex;
	gap: var( --wp--preset--spacing--20 );
	justify-content: space-between;
	margin-bottom: var( --wp--preset--spacing--30 );
}

.gmp-dashboard__listings-head h1 {
	font-size: var( --wp--preset--font-size--x-large );
	margin: 0;
}

.gmp-dashboard__listings-count {
	color: var( --wp--preset--color--muted );
	font-size: 14px;
	margin: 6px 0 0;
}

.gmp-dashboard__stats {
	display: grid;
	gap: var( --wp--preset--spacing--20 );
	grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
	margin-bottom: var( --wp--preset--spacing--30 );
}

.gmp-dashboard__stat {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 12px );
	padding: 18px;
}

.gmp-dashboard__stat-label {
	color: var( --wp--preset--color--muted );
	display: block;
	font-size: 13px;
}

.gmp-dashboard__stat-value {
	display: block;
	font-size: 28px;
	font-weight: 700;
	margin-top: 6px;
}

.gmp-dashboard__toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
	justify-content: space-between;
	margin-bottom: var( --wp--preset--spacing--20 );
}

.gmp-dashboard__search input {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	font: inherit;
	height: 42px;
	min-width: 14rem;
	padding: 0 12px;
}

.gmp-dashboard__table th,
.gmp-dashboard__table td {
	vertical-align: middle;
}

.gmp-dashboard__listing-cell {
	align-items: center;
	display: flex;
	gap: 12px;
}

.gmp-dashboard__listing-thumb {
	background: var( --wp--preset--color--surface );
	border-radius: 6px;
	flex: none;
	height: 38px;
	overflow: hidden;
	width: 52px;
}

.gmp-dashboard__listing-thumb img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.gmp-dashboard__listing-cell small {
	color: var( --wp--preset--color--muted );
}

/*
 * The cell stays a table cell: display:flex on the <td> took it out of the
 * row, so its border and height no longer matched the rest of the row and
 * "Mark as sold" wrapped a word per line.
 */
.gmp-dashboard__actions {
	white-space: nowrap;
}

.gmp-dashboard__actions .gmp-actions__form {
	display: inline-block;
	margin-right: 14px;
}

.gmp-dashboard__actions .gmp-actions__form:last-child {
	margin-right: 0;
}

/*
 * Submit-listing wizard step 3 (photos) — theme override at
 * gmp/listings/submit/step-media.php. The plugin's photo upload is a plain
 * <input type="file"> separate from the uploaded-thumbnails list; this
 * merges them into one tile row. .gmp-gallery (the plugin's own sortable
 * list) gets display:contents so its <li> items flow into this row as if
 * they were direct children, without touching the list's own sortable
 * behaviour or markup.
 */
.gmp-submit__photos {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
	margin-bottom: 10px;
}

.gmp-submit__photos .gmp-gallery {
	display: contents;
}

.gmp-submit__photos .gmp-gallery__item {
	height: 96px;
	margin: 0;
	width: 128px;
}

/*
 * Archive controls row — the "Filters" button and the Sort control, side by
 * side in the header (see the note at the top of
 * gmp/listings/listing/archive.php). Filters used to be a sidebar reserving
 * its own column on every screen size; it now opens as a dropdown anchored
 * under its own button, so .gmp-archive__filters needs position:relative
 * as that anchor and results render full width underneath regardless of
 * whether the panel is open.
 */
.gmp-archive__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
	/* When the header wraps to its own line (a narrow screen), this keeps
	 * it flush with the right edge instead of the left. Also the anchor for
	 * .gmp-archive__filters-panel's right:0 below — not .gmp-archive__filters
	 * itself, which sits to the *left* of Sort within this row, nowhere near
	 * the actual right edge the panel needs to line up against. */
	margin-left: auto;
	position: relative;
}

.gmp-archive__filters-toggle {
	align-items: center;
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 8px;
	list-style: none;
	padding: 0.6rem 1rem;
}

.gmp-archive__filters[open] .gmp-archive__filters-toggle {
	border-color: var( --wp--preset--color--primary );
}

.gmp-archive__filters-toggle::-webkit-details-marker {
	display: none;
}

.gmp-archive__filters-toggle::before {
	background: var( --wp--preset--color--muted );
	content: "";
	flex: none;
	height: 12px;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2h14L9.5 9v4.5L6.5 15V9L1 2Z' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2h14L9.5 9v4.5L6.5 15V9L1 2Z' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
	width: 12px;
}

.gmp-archive__filters-count {
	background: var( --wp--preset--color--primary );
	border-radius: 999px;
	color: var( --wp--preset--color--white );
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 7px;
}

/* The dropdown itself. Right-anchored because the button sits at the right
 * end of the header next to Sort — left-anchoring would routinely push it
 * past the browser's edge. min() keeps it from overflowing a narrow phone
 * screen instead of a fixed width doing that. */
.gmp-archive__filters-panel {
	background: var( --wp--preset--color--white );
	border-radius: var( --gmp-radius, 8px );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.14 );
	margin-top: 8px;
	max-height: min( 32rem, calc( 100vh - 8rem ) );
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: 100%;
	width: min( 22rem, 90vw );
	z-index: 30;
}

/* .gmp-filters (the form itself, from gmp-listings.css) already carries its
 * own border/background/padding meant for a flush sidebar block; drop those
 * here since .gmp-archive__filters-panel already supplies them for a
 * floating one. */
.gmp-archive__filters-panel .gmp-filters {
	background: none;
	border: none;
	padding: var( --wp--preset--spacing--20 );
}

/* The panel's own "Filters" heading (gmp/listings/listing/filters.php)
 * would otherwise repeat the toggle button's label the instant it opens;
 * "Clear all" stays, since that is still new information. */
.gmp-archive__filters-panel .gmp-filters__title {
	display: none;
}

.gmp-archive__results--full {
	padding-inline: var( --gmp-space-4, var( --wp--preset--spacing--30 ) );
}

/* Quick-pick category pills above a non-directory archive's results — see
 * the note at the top of gmp/listings/listing/archive.php. Same rounded,
 * primary-dark-when-active treatment as .gmp-directory__pills, so the two
 * read as the same control even though one sits above a search bar and the
 * other above a Filters button. */
.gmp-archive__pills {
	margin-bottom: var( --wp--preset--spacing--30 );
	padding-inline: var( --gmp-space-4, var( --wp--preset--spacing--30 ) );
}

.gmp-archive__pills .gmp-pill {
	border-radius: 999px;
}

.gmp-archive__pills .gmp-pill.is-active {
	background: var( --wp--preset--color--primary-dark );
	border-color: var( --wp--preset--color--primary-dark );
	color: var( --wp--preset--color--white );
}

.gmp-submit__photos .gmp-gallery__item.is-cover {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 1px var( --wp--preset--color--primary );
}

.gmp-submit__photos .gmp-gallery img {
	height: 100%;
	max-width: none;
	object-fit: cover;
	width: 100%;
}

.gmp-submit__add-photos {
	align-items: center;
	background: var( --wp--preset--color--surface );
	border: 1px dashed var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 8px );
	color: var( --wp--preset--color--primary );
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-size: 13px;
	font-weight: 600;
	gap: 4px;
	height: 96px;
	justify-content: center;
	width: 128px;
}

.gmp-submit__add-photos-icon {
	font-size: 22px;
	line-height: 1;
}

.gmp-submit__file-input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.gmp-submit__divider {
	background: var( --wp--preset--color--line );
	height: 1px;
	margin: var( --wp--preset--spacing--30 ) 0;
}

/*
 * Continue/Submit loading state (assets/js/submit-loading.js). The
 * full-page submit can take 2-3s with no feedback otherwise, which reads
 * as a failed click and invites a double-submit. The spinner replaces the
 * button label rather than sitting beside it, so the button's width does
 * not jump when the text disappears.
 */
.gmp-submit .gmp-button:disabled {
	cursor: wait;
	opacity: 0.7;
}

.gmp-is-submitting__button {
	color: transparent !important;
	position: relative;
}

.gmp-is-submitting__button::after {
	animation: gmp-spin 0.7s linear infinite;
	border: 2px solid rgb( 0 0 0 / 20% );
	border-radius: 50%;
	border-top-color: var( --wp--preset--color--white );
	content: "";
	height: 16px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 16px;
}

.gmp-button--ghost.gmp-is-submitting__button::after {
	border-color: rgb( 0 0 0 / 15% );
	border-top-color: var( --wp--preset--color--foreground );
}

@keyframes gmp-spin {
	to {
		transform: translate( -50%, -50% ) rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gmp-is-submitting__button::after {
		animation: none;
	}
}

/*
 * Jobs get one identity colour of their own — seafoam — used the way brass is
 * used elsewhere in the marketplace palette: the status marker, the urgency
 * flag, the rank badge. Everything else here stays on the core GMP palette
 * (theme.json's primary/accent/ink/muted/surface/line) so a job row sits
 * beside a vessel row without competing with it.
 */
:root {
	--gmp-job-seafoam: #1f6f52;
	--gmp-job-seafoam-dark: #15513c;
	--gmp-job-seafoam-tint: #e8f1ee;
	--gmp-job-brass-tint: #fdf3e2;
	--gmp-job-brass-ink: #8a5c10;
	--gmp-job-sea-tint: #eaf0f6;
	--gmp-job-neutral-tint: #f2f4f7;
}

.gmp-button--wide {
	width: 100%;
}

.gmp-job-row {
	align-items: flex-start;
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius-sm, 6px );
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	padding: var( --wp--preset--spacing--30 );
}

.gmp-job-row:hover,
.gmp-job-row:focus-within {
	border-color: var( --gmp-job-seafoam );
}

.gmp-job-row__mark {
	align-items: center;
	background: var( --gmp-job-sea-tint );
	border-radius: 8px;
	color: var( --wp--preset--color--primary );
	display: flex;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.gmp-job-row__main {
	flex: 1 1 20rem;
	min-width: 0;
}

.gmp-job-row__badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.gmp-job-badge {
	background: var( --gmp-job-sea-tint );
	border-radius: 999px;
	color: var( --wp--preset--color--primary );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 3px 10px;
	text-transform: uppercase;
	white-space: nowrap;
}

.gmp-job-badge--urgent {
	background: var( --gmp-job-brass-tint );
	color: var( --gmp-job-brass-ink );
}

.gmp-job-badge--verified {
	align-items: center;
	background: var( --gmp-job-seafoam-tint );
	color: var( --gmp-job-seafoam-dark );
	display: inline-flex;
	gap: 5px;
}

.gmp-job-badge--verified .gmp-card__verified-mark {
	background: var( --gmp-job-seafoam-dark );
}

.gmp-job-badge--open {
	background: var( --gmp-job-seafoam-tint );
	color: var( --gmp-job-seafoam-dark );
}

.gmp-job-badge--closing {
	background: var( --gmp-job-brass-tint );
	color: var( --gmp-job-brass-ink );
}

.gmp-job-badge--closed {
	background: var( --gmp-job-neutral-tint );
	color: var( --wp--preset--color--muted );
}

.gmp-job-row__posted {
	color: var( --wp--preset--color--muted );
	font-size: 12px;
	margin-left: auto;
	text-transform: none;
}

.gmp-job-row__employer {
	color: var( --wp--preset--color--muted );
	margin: 0 0 8px;
}

.gmp-job-row__aside {
	align-items: flex-end;
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 8px;
	text-align: right;
}

.gmp-job-row__pay {
	font-size: 15px;
	margin: 0;
}

.gmp-job-row__pay strong {
	color: var( --wp--preset--color--foreground );
}

@media ( max-width: 40rem ) {
	.gmp-job-row {
		flex-wrap: wrap;
	}

	.gmp-job-row__aside {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		text-align: left;
		width: 100%;
	}
}

/*
 * Page alignment.
 *
 * The header is constrained to 72rem, but the plugin screens (listing
 * archives, single listings) render straight into .wp-site-blocks with only
 * a 1rem inset, so their content ran from one edge of the window to the
 * other while the header sat in a centred column above it. Put them in the
 * same column, with the same root padding, so every edge lines up.
 */
.gmp-archive,
.gmp-single {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc( var( --gmp-container, 72rem ) + var( --wp--style--root--padding-left, 1rem ) + var( --wp--style--root--padding-right, 1rem ) );
	padding-inline: var( --wp--style--root--padding-left, 1rem ) var( --wp--style--root--padding-right, 1rem );
	width: 100%;
}

.gmp-archive .gmp-archive__crumbs,
.gmp-archive .gmp-archive__header,
.gmp-archive .gmp-archive__layout,
.gmp-archive .gmp-archive__pills,
.gmp-archive .gmp-archive__results--full,
.gmp-single .gmp-details {
	padding-inline: 0;
}

/* The title band now sits inside the column, so it reads as a card. */
.gmp-single .gmp-single__header {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gmp-radius, 12px );
	padding: var( --gmp-space-5, 1.5rem );
}

/* Two spec columns need a real gutter: "Esbjerg" ran straight into "Country". */
.gmp-single-specs {
	column-gap: var( --wp--preset--spacing--50, 2.5rem );
}

/*
 * Listing sidebar: "Buy this item" (h3) and "Contact the seller" (h2) came
 * out at two very different sizes, one stacked right under the other.
 */
.gmp-details__aside .gmp-buy__title,
.gmp-details__aside .gmp-enquiry__title {
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.gmp-details__aside .gmp-enquiry {
	border-top: 1px solid var( --wp--preset--color--line );
	margin-top: var( --gmp-space-5, 1.5rem );
	padding-top: var( --gmp-space-5, 1.5rem );
}

.gmp-details__aside .gmp-enquiry .gmp-button {
	box-sizing: border-box;
	justify-content: center;
	text-align: center;
	width: 100%;
}

.gmp-details__aside .gmp-buy__small {
	color: var( --wp--preset--color--muted );
	font-size: 13px;
	font-weight: 400;
	margin-top: 0.5rem;
}

/*
 * Footer: keep it at the bottom of short pages (checkout, purchase) instead
 * of leaving a white strip under it. The footer part is the last child of
 * .wp-site-blocks in both the block templates and the classic bridge.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc( 100vh - var( --wp-admin--admin-bar--height, 0px ) );
}

.wp-site-blocks > :last-child {
	margin-top: auto;
}

/*
 * Seven footer columns in 72rem: the wide tracking on the column headings
 * broke "Your account" over two lines and pushed its links out of step with
 * the other columns.
 */
.gmp-site-footer .wp-block-column > p:first-child {
	letter-spacing: 0.06em !important;
}

.gmp-details__aside .gmp-buy {
	margin-top: var( --gmp-space-4, 1rem );
}

/*
 * The assistant is docked bottom-left (gmp-chatbot.css) and sat on top of
 * the copyright line. Leave it room at the foot of the page.
 */
body:has( .gmp-bot ) .gmp-site-footer > .alignwide:last-child {
	padding-bottom: 6.5rem !important;
}

/*
 * Category picker ("What are you listing?"): equal-height cards on an even
 * grid. The 3rem row gap against a ~1rem column gap left the second row
 * floating away from the first, and on Post a job (no .gmp-submit wrapper)
 * the cards didn't stretch, so each row came out a different height.
 */
.gmp-submit__categories {
	margin-bottom: var( --wp--preset--spacing--50, 2.5rem );
	row-gap: var( --wp--preset--spacing--30 );
}

.gmp-submit__categories > .gmp-choice--card {
	box-sizing: border-box;
	height: 100%;
}

/*
 * Dashboard on a phone. The grid had no explicit column below 48rem, so the
 * implicit track grew to fit the listings table and dragged the whole
 * dashboard wider than the screen — stat cards and the Activity/Actions
 * columns were cut off. Pin the tracks to the available width and let the
 * table scroll inside it instead.
 */
.gmp-dashboard {
	grid-template-columns: minmax( 0, 1fr );
}

.gmp-dashboard > * {
	min-width: 0;
}

@media ( min-width: 48rem ) {
	.gmp-dashboard {
		grid-template-columns: 15rem minmax( 0, 1fr );
	}
}

@media ( max-width: 56rem ) {
	.gmp-dashboard__table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.gmp-dashboard__search input {
		min-width: 0;
		width: 100%;
	}

	.gmp-dashboard__search {
		flex: 1 1 100%;
	}

	.gmp-dashboard__listing-cell {
		min-width: 15rem;
	}
}

/*
 * Sold listings. Vessels for sale keep their sold listings in the archive
 * (Listing_Types `show_sold`), after everything still for sale; the flag and
 * the dimmed photo make it plain at a glance which is which.
 */
.gmp-card__sold {
	background: #b42318;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.18 );
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	padding: 5px 12px;
	position: absolute;
	right: 12px;
	text-transform: uppercase;
	top: 12px;
}

.gmp-card__sold--static {
	box-shadow: none;
	position: static;
}

.gmp-card--sold .gmp-card__media img,
.gmp-card--sold .gmp-card__placeholder {
	filter: grayscale( 0.85 );
	opacity: 0.7;
}

.gmp-card--sold .gmp-card__price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.gmp-card__sold-label,
.gmp-single__sold-label {
	color: #b42318;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gmp-card--sold .gmp-card__price .gmp-muted {
	font-size: 14px;
}

.gmp-single__sold-label {
	font-size: 14px;
	font-weight: 800;
	margin: 0 0 8px;
}

.gmp-single__sold-notice a {
	margin-left: 4px;
}

/*
 * Show/hide toggle on a password field (gmp/core/auth/login.php,
 * assets/js/password-toggle.js) — an eye icon that swaps to a slashed eye
 * once revealed. Extra right padding on the input makes room for the
 * button rather than letting it sit on top of typed text.
 */
.gmp-password-field {
	display: block;
	position: relative;
}

.gmp-password-field input {
	padding-right: 2.75rem !important;
}

.gmp-password-toggle {
	background: none;
	border: none;
	border-radius: var( --gmp-radius-sm, 4px );
	cursor: pointer;
	height: 1.75rem;
	position: absolute;
	right: 0.4rem;
	top: 50%;
	transform: translateY( -50% );
	width: 1.75rem;
}

.gmp-password-toggle:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.gmp-password-toggle::before {
	background: var( --wp--preset--color--muted );
	content: "";
	display: block;
	height: 100%;
	margin: 0 auto;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E" ) center / 20px no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E" ) center / 20px no-repeat;
	width: 100%;
}

.gmp-password-field.is-visible .gmp-password-toggle::before {
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath stroke='black' stroke-width='1.6' stroke-linecap='round' d='M3 21 21 3'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath stroke='black' stroke-width='1.6' stroke-linecap='round' d='M3 21 21 3'/%3E%3C/svg%3E" );
}

/*
 * Messages icon in the header ([gmp_messages_icon], GMP Chat), beside the
 * account and cart icons. The red badge counts conversations with something
 * unread, and is hidden when there are none.
 */
.gmp-messages-icon {
	align-items: center;
	color: var( --wp--preset--color--foreground );
	display: inline-flex;
	flex: none;
	height: 34px;
	justify-content: center;
	/* The same breathing room the account and cart icons have before it. */
	margin-right: var( --wp--preset--spacing--20 );
	position: relative;
	text-decoration: none;
	width: 34px;
}

.gmp-messages-icon:hover,
.gmp-messages-icon:focus-visible {
	color: var( --wp--preset--color--primary );
}

.gmp-messages-icon__badge {
	background: #d92d20;
	border: 2px solid var( --wp--preset--color--white, #ffffff );
	border-radius: 999px;
	box-sizing: border-box;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	min-width: 20px;
	padding: 0 4px;
	position: absolute;
	right: -5px;
	text-align: center;
	top: -4px;
}

.gmp-messages-icon__badge[hidden] {
	display: none;
}