/**
 * GetnDrive Rental Network — Samui map/list preview.
 * Operational preview UI; not a marketing hero.
 */

:root {
	--gnd-rn-navy: #0b1f3a;
	--gnd-rn-navy-2: #123456;
	--gnd-rn-teal: #1bae9f;
	--gnd-rn-teal-deep: #0d7f77;
	--gnd-rn-teal-ink: #075f62;
	--gnd-rn-ink: #102033;
	--gnd-rn-muted: #4d5f72;
	--gnd-rn-faint: #7b8b9c;
	--gnd-rn-surface: #eef3f4;
	--gnd-rn-page: #f6f9f9;
	--gnd-rn-card: #ffffff;
	--gnd-rn-line: rgba(11, 31, 58, 0.13);
	--gnd-rn-line-strong: rgba(11, 31, 58, 0.24);
	--gnd-rn-dim-pin: #93a3ae;

	/*
	 * Unclaimed marker colour (v0.5.9).
	 *
	 * `--gnd-rn-dim-pin` was chosen as a "quiet" grey, but OSM raster tiles are themselves a
	 * low-saturation grey-green, so an unclaimed company was effectively invisible on the map
	 * while claimed ones read clearly. Amber is restrained enough not to look like an alert
	 * and still separates from both the tiles and the white card surface. `--gnd-rn-amber-edge`
	 * is the darker companion used as a hairline on light surfaces, where the fill alone has
	 * too little contrast against white.
	 *
	 * This is a visibility change only: the claim state it paints is unchanged, and no new
	 * public state or badge is introduced.
	 */
	--gnd-rn-amber: #f5b82e;
	--gnd-rn-amber-edge: #b3801a;

	--gnd-rn-side-width: 372px;
	--gnd-rn-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", sans-serif;

	/*
	 * Height of everything the theme renders above the preview. The preview JS
	 * measures the real value; this fallback keeps the desktop shell sane if the
	 * script never runs.
	 */
	--gnd-rn-header-offset: 120px;
	--gnd-rn-shell-min-height: 520px;
	--gnd-rn-mobile-map-height: 42vh;

	/*
	 * Narrow-layout map height on a mapped company deep link (v0.5.8).
	 *
	 * The ordinary catalog opens with no popup, so 42vh is a map strip above the list. A
	 * company deep link opens with one popup already on the map, and that popup is taller
	 * than a 42vh strip on a phone, so its top was cut off by the pane edge.
	 *
	 * `dvh` is the real unit here: on iOS Safari `vh` is the *large* viewport, the one with
	 * the browser chrome hidden, so a `vh` pane is measured against a viewport the visitor
	 * cannot see yet on entry. The rule below keeps a literal `56vh` line in front of the
	 * token as the fallback for an engine without `dvh`. The ordinary catalog height above
	 * is deliberately left alone.
	 */
	--gnd-rn-mobile-map-height-focus: 56dvh;

	--gnd-rn-z-map-overlay: 400;
	--gnd-rn-z-map-toolbar: 450;
	--gnd-rn-z-catalog-panel: 500;

	/*
	 * The add-company modal is the only surface that leaves the preview shell, so it sits
	 * above the theme header as well as the catalog and the map.
	 */
	--gnd-rn-z-modal: 1000;
}

/*
 * Desktop catalog rail width (v0.5.4).
 *
 * 372px was set when a card was a name, an area and two text links. Repeatable contact chips
 * and outbound links made the cards denser than the rail, so the qualifier badges wrapped and
 * the chips broke onto their own rows. The map stays the main surface — it still takes every
 * pixel the rail does not — but the rail now gets enough width to render a card on the lines
 * it was designed for. Only the custom property moves; the grid rule that reads it is
 * unchanged.
 */
@media (min-width: 1025px) {
	:root {
		--gnd-rn-side-width: 408px;
	}
}

@media (min-width: 1280px) {
	:root {
		--gnd-rn-side-width: 452px;
	}
}

@media (min-width: 1600px) {
	:root {
		--gnd-rn-side-width: 476px;
	}
}

body.gnd-rn-preview-route .site-footer,
body.gnd-rn-preview-route .site-footer-wrap,
body.gnd-rn-preview-route .site-bottom-footer-wrap,
body.gnd-rn-preview-route #colophon,
body.gnd-rn-preview-route .sch-footer {
	display: none !important;
}

.gnd-rn-preview {
	background: var(--gnd-rn-page);
	color: var(--gnd-rn-ink);
	font-family: var(--gnd-rn-sans);
	line-height: 1.5;
	box-sizing: border-box;
}

.gnd-rn-preview *,
.gnd-rn-preview *::before,
.gnd-rn-preview *::after {
	box-sizing: border-box;
}

/*
 * Narrow layout is the base: map above, list below, one document scroll.
 * The bounded two-column workspace is added from 1025px upward.
 */
.gnd-rn-preview__shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 100%;
	border-top: 1px solid var(--gnd-rn-line);
	border-bottom: 1px solid var(--gnd-rn-line);
	background: var(--gnd-rn-card);
}

.gnd-rn-preview__side {
	order: 2;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border-top: 1px solid var(--gnd-rn-line);
	background: var(--gnd-rn-card);
}

.gnd-rn-preview__head {
	flex: 0 0 auto;
	padding: 10px 14px 9px;
	border-bottom: 1px solid var(--gnd-rn-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--gnd-rn-card);
}

.gnd-rn-preview__titlebar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.gnd-rn-preview__lang {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--gnd-rn-muted);
	text-decoration: none;
	border: 1px solid var(--gnd-rn-line);
	border-radius: 999px;
	padding: 5px 10px;
}

.gnd-rn-preview__lang:hover,
.gnd-rn-preview__lang:focus-visible {
	color: var(--gnd-rn-ink);
	border-color: var(--gnd-rn-line-strong);
}

.gnd-rn-preview__title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 650;
	letter-spacing: 0;
	line-height: 1.14;
	text-wrap: balance;
	color: var(--gnd-rn-navy);
}

/*
 * Catalog controls: location scope first, then the business-name search. One stack, so
 * the head reads as a search/filter area rather than a page heading with widgets bolted on.
 */
.gnd-rn-preview__controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.gnd-rn-preview__search {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.gnd-rn-preview__search-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--gnd-rn-faint);
}

.gnd-rn-preview__search-row {
	display: flex;
	gap: 8px;
	min-width: 0;
}

.gnd-rn-preview__search-input {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	min-height: 38px;
	padding: 7px 10px;
	border: 1px solid var(--gnd-rn-line-strong);
	border-radius: 10px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-ink);
	-webkit-appearance: none;
	appearance: none;
}

.gnd-rn-preview__search-input::placeholder {
	color: var(--gnd-rn-faint);
}

.gnd-rn-preview__search-input:focus-visible {
	outline: 2px solid var(--gnd-rn-teal-deep);
	outline-offset: -1px;
	border-color: var(--gnd-rn-teal-deep);
}

.gnd-rn-preview__search-submit {
	flex: 0 0 auto;
	font: inherit;
	font-size: 13px;
	font-weight: 650;
	min-height: 38px;
	padding: 7px 14px;
	border: 1px solid var(--gnd-rn-teal-deep);
	border-radius: 8px;
	background: var(--gnd-rn-teal-deep);
	color: #fff;
	cursor: pointer;
}

.gnd-rn-preview__search-submit:hover,
.gnd-rn-preview__search-submit:focus-visible {
	background: var(--gnd-rn-teal-ink);
	border-color: var(--gnd-rn-teal-ink);
}

/* Active search is stated, never implied by a shorter list. */
.gnd-rn-preview__searchstate {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var(--gnd-rn-muted);
}

.gnd-rn-preview__searchstate-term {
	min-width: 0;
	overflow-wrap: anywhere;
}

.gnd-rn-preview__searchstate-term strong {
	color: var(--gnd-rn-ink);
	font-weight: 650;
}

.gnd-rn-preview__searchstate-clear {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--gnd-rn-teal-ink);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--gnd-rn-teal) 40%, transparent);
}

.gnd-rn-preview__searchstate-clear:hover,
.gnd-rn-preview__searchstate-clear:focus-visible {
	color: var(--gnd-rn-navy);
}

.gnd-rn-preview__filters {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
}

.gnd-rn-preview__filters label {
	font-size: 12px;
	color: var(--gnd-rn-muted);
	white-space: nowrap;
}

.gnd-rn-preview__filters select {
	width: 100%;
	max-width: 100%;
	font: inherit;
	font-size: 14px;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--gnd-rn-line-strong);
	border-radius: 8px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-ink);
}

.gnd-rn-preview__counts {
	padding: 8px 0 0;
	border-top: 1px solid var(--gnd-rn-line);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
}

.gnd-rn-preview__counts-main,
.gnd-rn-preview__counts-sub {
	margin: 0;
	font-size: 13px;
}

.gnd-rn-preview__counts-main strong {
	font-weight: 700;
}

.gnd-rn-preview__counts-of {
	color: var(--gnd-rn-muted);
}

.gnd-rn-preview__counts-sub {
	color: var(--gnd-rn-muted);
}

.gnd-rn-preview__counts-sub span {
	color: var(--gnd-rn-teal-deep);
	font-weight: 650;
}

.gnd-rn-preview__list {
	flex: 1 1 auto;
	min-height: 0;
	-webkit-overflow-scrolling: touch;
}

.gnd-rn-preview__empty {
	padding: 28px 18px;
}

.gnd-rn-preview__empty-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 650;
}

.gnd-rn-preview__empty-body {
	margin: 0;
	color: var(--gnd-rn-muted);
	font-size: 14px;
	max-width: 36ch;
	text-wrap: pretty;
}

/*
 * A search with no matches is a composed state, not a blank column: same padding rhythm
 * as the catalog rows, and a way out that is a plain link.
 */
.gnd-rn-preview__empty--search {
	border-bottom: 1px solid var(--gnd-rn-line);
	background: color-mix(in srgb, var(--gnd-rn-surface) 45%, transparent);
}

.gnd-rn-preview__empty-action {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 650;
	padding: 9px 14px;
	border: 1px solid var(--gnd-rn-line-strong);
	border-radius: 10px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-teal-ink);
	text-decoration: none;
}

.gnd-rn-preview__empty-action:hover,
.gnd-rn-preview__empty-action:focus-visible {
	color: var(--gnd-rn-navy);
	border-color: color-mix(in srgb, var(--gnd-rn-teal) 55%, transparent);
}

/*
 * The whole row stays clickable to focus its map pin, but it must not read as a
 * navigation link: hover is a faint map-selection cue, the active row reads as
 * "selected on the map", and only the CTA links navigate.
 */
.gnd-rn-company {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--gnd-rn-line);
	cursor: default;
	outline: none;
	transition: background-color 140ms ease;
}

.gnd-rn-company:hover {
	background: color-mix(in srgb, var(--gnd-rn-surface) 50%, transparent);
}

.gnd-rn-company:focus-visible {
	background: color-mix(in srgb, var(--gnd-rn-surface) 50%, transparent);
	outline: 2px solid var(--gnd-rn-teal-deep);
	outline-offset: -2px;
}

.gnd-rn-company.is-active {
	background: var(--gnd-rn-surface);
}

/*
 * Deep-linked card (v0.5.4). Server-rendered, so a shared link lands on a visibly selected
 * card with JavaScript disabled too. It reads as an edge marker rather than a second
 * background, so it can sit under the `is-active` map-selection state without fighting it.
 */
.gnd-rn-company.is-selected {
	background: color-mix(in srgb, var(--gnd-rn-surface) 55%, transparent);
	box-shadow: inset 3px 0 0 var(--gnd-rn-teal-deep);
}

.gnd-rn-company__pin {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border-radius: 50%;
	border: 2px solid var(--gnd-rn-dim-pin);
	background: transparent;
	justify-self: center;
	transition: box-shadow 140ms ease;
}

.gnd-rn-company.is-active .gnd-rn-company__pin {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--gnd-rn-teal) 32%, transparent);
}

.gnd-rn-pin--booking {
	background: var(--gnd-rn-teal-deep);
	border-color: var(--gnd-rn-teal-deep);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gnd-rn-teal) 28%, transparent);
}

.gnd-rn-pin--claimed {
	background: transparent;
	border-color: var(--gnd-rn-navy-2);
	border-width: 2.5px;
}

/*
 * Unclaimed list dot (amber since v0.5.9).
 *
 * The dot has to tell the same story as its map marker, so it takes the same amber. It stays
 * the smallest pin in the rail — booking and claimed keep their size advantage — but it gains
 * a hairline edge because a mid-amber fill alone is weak against the white card. The 12px box
 * plus a 1px edge is 14px, and `margin-top` is dropped from 6px to 4px so the optical centre
 * lands exactly where the 10px dot's did.
 */
.gnd-rn-pin--unclaimed {
	width: 12px;
	height: 12px;
	margin-top: 4px;
	border: 1px solid var(--gnd-rn-amber-edge);
	background: var(--gnd-rn-amber);
}

.gnd-rn-pin--car::after,
.gnd-rn-pin--motorbike::after,
.gnd-rn-pin--mixed::after,
.gnd-rn-pin--other::after {
	content: "";
	display: block;
}

.gnd-rn-company__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gnd-rn-company__topline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.gnd-rn-company__name {
	margin: 0;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.25;
	text-wrap: balance;
	color: var(--gnd-rn-ink);
}

.gnd-rn-company__claim {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid var(--gnd-rn-line);
	color: var(--gnd-rn-muted);
	background: color-mix(in srgb, var(--gnd-rn-muted) 8%, transparent);
	white-space: nowrap;
}

.gnd-rn-company__claim--claimed {
	color: var(--gnd-rn-navy-2);
	background: color-mix(in srgb, var(--gnd-rn-navy-2) 10%, transparent);
	border-color: color-mix(in srgb, var(--gnd-rn-navy-2) 24%, transparent);
}

.gnd-rn-company__area,
.gnd-rn-company__address,
.gnd-rn-company__source,
.gnd-rn-company__missing,
.gnd-rn-company__booking {
	margin: 0;
	font-size: 13px;
	color: var(--gnd-rn-muted);
	overflow-wrap: anywhere;
}

.gnd-rn-company__booking {
	color: var(--gnd-rn-teal-ink);
	font-weight: 600;
}

.gnd-rn-company__missing {
	color: #8a5a2b;
	font-weight: 600;
}

.gnd-rn-company__source {
	font-size: 11px;
	color: var(--gnd-rn-faint);
}

.gnd-rn-company__types {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.gnd-rn-company__types li {
	font-size: 11px;
	color: var(--gnd-rn-muted);
	border: 1px solid var(--gnd-rn-line);
	border-radius: 5px;
	padding: 4px 6px;
}

.gnd-rn-company__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.gnd-rn-action {
	font-size: 12px;
	font-weight: 600;
	color: var(--gnd-rn-teal-ink);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--gnd-rn-teal) 40%, transparent);
}

.gnd-rn-action:hover,
.gnd-rn-action:focus-visible {
	color: var(--gnd-rn-navy);
}

.gnd-rn-action--fleet {
	color: var(--gnd-rn-navy);
	border-bottom-color: color-mix(in srgb, var(--gnd-rn-navy) 40%, transparent);
}

/*
 * Contact and link groups (v0.5.3). One chip system shared by the list card and the map
 * popup, so a company with three phone numbers reads identically in both places. Chips
 * rather than underlined text because contacts are now repeatable and language-tagged:
 * a wrapping row of text links gave no way to see which number belongs to which language.
 */
.gnd-rn-contacts,
.gnd-rn-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gnd-rn-links {
	gap: 4px 12px;
	align-items: baseline;
}

.gnd-rn-contact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 5px 9px;
	border: 1px solid var(--gnd-rn-line);
	border-radius: 8px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-teal-ink);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.25;
	text-decoration: none;
}

.gnd-rn-contact:hover,
.gnd-rn-contact:focus-visible {
	color: var(--gnd-rn-navy);
	border-color: var(--gnd-rn-line-strong);
	background: var(--gnd-rn-surface);
}

.gnd-rn-contact__name {
	white-space: nowrap;
}

/* The qualifier — operator label and/or language code — is the part allowed to shrink. */
.gnd-rn-contact__note {
	min-width: 0;
	padding: 1px 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--gnd-rn-muted) 12%, transparent);
	color: var(--gnd-rn-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gnd-rn-contact--whatsapp,
.gnd-rn-contact--telegram,
.gnd-rn-contact--line {
	border-color: color-mix(in srgb, var(--gnd-rn-teal) 32%, var(--gnd-rn-line));
}

.gnd-rn-contact--phone {
	border-color: color-mix(in srgb, var(--gnd-rn-navy) 28%, var(--gnd-rn-line));
	color: var(--gnd-rn-navy);
}

/*
 * Outbound links as icon controls (v0.5.4). Website, Facebook and Instagram were three
 * underlined words competing with the contact chips they sit under; as icons they read as one
 * quiet row of secondary destinations. The visible label is the icon, the accessible name is
 * the translated text in `.gnd-rn-sr`, and the tap target stays at 32px.
 */
.gnd-rn-sociallink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--gnd-rn-muted);
	text-decoration: none;
	border: 1px solid var(--gnd-rn-line);
	border-radius: 999px;
	background: var(--gnd-rn-card);
}

.gnd-rn-sociallink:hover,
.gnd-rn-sociallink:focus-visible {
	color: var(--gnd-rn-navy);
	border-color: var(--gnd-rn-line-strong);
	background: var(--gnd-rn-surface);
}

.gnd-rn-sociallink__icon {
	display: block;
	width: 18px;
	height: 18px;
}

.gnd-rn-company__contacts {
	margin-top: 2px;
}

/*
 * Share control (v0.5.4). A quiet text action under the links row: it is a utility, not a
 * call to action, so it never outweighs the contact chips.
 */
.gnd-rn-company__sharerow {
	margin: 2px 0 0;
}

.gnd-rn-share {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--gnd-rn-faint);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.gnd-rn-share::before {
	content: "";
	width: 12px;
	height: 12px;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	box-shadow: 3px -3px 0 -1.5px var(--gnd-rn-card), 3px -3px 0 currentColor;
}

.gnd-rn-share:hover,
.gnd-rn-share:focus-visible {
	color: var(--gnd-rn-navy);
	border-bottom-color: color-mix(in srgb, var(--gnd-rn-navy) 40%, transparent);
}

.gnd-rn-share.is-copied {
	color: var(--gnd-rn-teal-ink);
	border-bottom-color: transparent;
}

.gnd-rn-preview__missing-block {
	padding: 14px 16px 20px;
	border-top: 1px solid var(--gnd-rn-line);
	background: var(--gnd-rn-surface);
}

.gnd-rn-preview__missing-title {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 650;
}

.gnd-rn-preview__missing-count {
	margin: 0;
	font-size: 12px;
	color: var(--gnd-rn-muted);
}

.gnd-rn-preview__map-pane {
	order: 1;
	position: relative;
	min-width: 0;
	height: var(--gnd-rn-mobile-map-height);
	min-height: 280px;
	background: var(--gnd-rn-surface);
}

/*
 * Narrow-layout company deep link (v0.5.8).
 *
 * The body class is only present when the deep link resolved to a company that has
 * coordinates, so the ordinary catalog, an unmapped company and an unknown slug all keep the
 * 42vh strip. Both rules below are capped at 1024px on purpose: the desktop split workspace
 * sets the pane to `height: 100%` at the same specificity, and a media query adds none, so
 * an uncapped `body.…` rule would win at 1025px and break the bounded two-column shell.
 *
 * A popup can never be taller than the pane that has to show it. The deep-link popup also
 * gets Leaflet's own `maxHeight` option from script, measured against the real pane; the CSS
 * below is the floor for every popup in the narrow layout, including one opened by tapping a
 * marker, so a tall card cannot run off the top of the map on a phone.
 *
 * `128px` is the room the pane keeps for the marker (~72px from the bottom edge), the popup
 * tip, the popup chrome and a small top gap.
 */
@media (max-width: 1024px) {
	body.gnd-rn-deeplink-map-focus .gnd-rn-preview__map-pane {
		height: 56vh;
		height: var(--gnd-rn-mobile-map-height-focus);
	}

	.gnd-rn-preview__map .leaflet-popup-content {
		max-height: calc(var(--gnd-rn-mobile-map-height) - 128px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	body.gnd-rn-deeplink-map-focus .gnd-rn-preview__map .leaflet-popup-content {
		max-height: calc(56vh - 128px);
		max-height: calc(var(--gnd-rn-mobile-map-height-focus) - 128px);
	}
}

/*
 * The map always fills its pane instead of carrying its own viewport height, so
 * the pane is the only thing that decides how tall the map is.
 */
.gnd-rn-preview__map {
	width: 100%;
	height: 100%;
	background: #d9e3e4;
}

.gnd-rn-preview__map-empty {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 12px 16px;
	max-width: min(42ch, calc(100% - 32px));
	text-align: center;
	font-size: 14px;
	color: var(--gnd-rn-muted);
	background: color-mix(in srgb, var(--gnd-rn-card) 92%, transparent);
	border: 1px solid var(--gnd-rn-line);
	border-radius: 10px;
	pointer-events: none;
	z-index: var(--gnd-rn-z-map-overlay);
}

.gnd-rn-preview__map-toolbar {
	position: absolute;
	z-index: var(--gnd-rn-z-map-toolbar);
	top: 10px;
	right: 10px;
}

.gnd-rn-preview__mobile-toggle {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 12px;
	border: 1px solid var(--gnd-rn-line-strong);
	border-radius: 8px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-ink);
	cursor: pointer;
}

.leaflet-container {
	font: inherit;
	background: #d9e3e4;
}

.gnd-rn-map-marker {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gnd-rn-map-marker__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(11, 31, 58, 0.35);
	background: var(--gnd-rn-dim-pin);
}

.gnd-rn-map-marker--booking .gnd-rn-map-marker__dot {
	width: 18px;
	height: 18px;
	background: var(--gnd-rn-teal-deep);
}

.gnd-rn-map-marker--claimed .gnd-rn-map-marker__dot {
	background: #fff;
	border: 2.5px solid var(--gnd-rn-navy-2);
}

/*
 * Unclaimed map marker (amber since v0.5.9).
 *
 * The grey fill plus a 1px white ring lost to the OSM tiles at every zoom level. Amber with
 * the full 2px white stroke the other markers carry makes it readable on land, on water and
 * over road fills, without promoting it: it is still the smallest of the three markers, so
 * booking-enabled and claimed keep their visual priority. Only fill and stroke width change —
 * the icon size and anchor set in `markerIcon()` are untouched.
 */
.gnd-rn-map-marker--unclaimed .gnd-rn-map-marker__dot {
	width: 12px;
	height: 12px;
	background: var(--gnd-rn-amber);
	border-width: 2px;
}

.gnd-rn-map-marker.is-active .gnd-rn-map-marker__dot {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--gnd-rn-teal) 35%, transparent);
}

/*
 * Popup card. Leaflet's default content margin is generous for a paragraph of text and
 * wrong for a dense card, so the popup owns its own padding and radius here.
 */
.gnd-rn-preview .leaflet-popup-content-wrapper {
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(11, 31, 58, 0.22);
}

.gnd-rn-preview .leaflet-popup-content {
	margin: 11px 13px;
	min-width: 0;
	line-height: 1.4;
}

.gnd-rn-popup {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 200px;
	max-width: 292px;
}

.gnd-rn-popup__topline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.gnd-rn-popup__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.gnd-rn-popup__name {
	margin: 0;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.25;
	color: var(--gnd-rn-ink);
	text-wrap: balance;
}

.gnd-rn-popup__claim {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 7px;
	border-radius: 999px;
	border: 1px solid var(--gnd-rn-line);
	color: var(--gnd-rn-muted);
	background: color-mix(in srgb, var(--gnd-rn-muted) 8%, transparent);
	white-space: nowrap;
}

.gnd-rn-popup__claim--claimed {
	color: var(--gnd-rn-navy-2);
	background: color-mix(in srgb, var(--gnd-rn-navy-2) 10%, transparent);
	border-color: color-mix(in srgb, var(--gnd-rn-navy-2) 24%, transparent);
}

.gnd-rn-popup__meta,
.gnd-rn-popup__address {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--gnd-rn-muted);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.gnd-rn-popup__types {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.gnd-rn-popup__types li {
	font-size: 11px;
	color: var(--gnd-rn-muted);
	border: 1px solid var(--gnd-rn-line);
	border-radius: 5px;
	padding: 3px 6px;
}

.gnd-rn-popup__booking {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--gnd-rn-teal-ink);
}

.gnd-rn-popup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: 1px;
}

/* The two chip groups get a hairline separator instead of extra empty space. */
.gnd-rn-popup__contacts {
	padding-top: 7px;
	border-top: 1px solid var(--gnd-rn-line);
}

.gnd-rn-popup__contacts .gnd-rn-contact {
	background: var(--gnd-rn-surface);
}

.gnd-rn-popup__links {
	margin-top: -1px;
	gap: 6px;
}

/* Slightly tighter icon controls in the popup than on the card. */
.gnd-rn-popup__links .gnd-rn-sociallink {
	width: 30px;
	height: 30px;
	background: var(--gnd-rn-surface);
}

.gnd-rn-popup__action {
	font-size: 12px;
	font-weight: 600;
	color: var(--gnd-rn-teal-ink);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--gnd-rn-teal) 45%, transparent);
}

.gnd-rn-popup__action:hover,
.gnd-rn-popup__action:focus-visible {
	color: var(--gnd-rn-navy);
}

.gnd-rn-popup__action--fleet {
	font-weight: 650;
	color: var(--gnd-rn-navy);
	border-bottom-color: color-mix(in srgb, var(--gnd-rn-navy) 40%, transparent);
}

/*
 * Desktop split workspace. The shell is bounded to the viewport below the public
 * header, the left column owns the only scroll container, and the map pane keeps
 * a stable rect while the list scrolls under a fixed head.
 */
@media (min-width: 1025px) {
	body.gnd-rn-preview-route {
		overflow: hidden;
	}

	.gnd-rn-preview__shell {
		grid-template-columns: var(--gnd-rn-side-width) minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		height: calc(100vh - var(--gnd-rn-header-offset));
		height: calc(100dvh - var(--gnd-rn-header-offset));
		min-height: var(--gnd-rn-shell-min-height);
		overflow: hidden;
		overflow: clip;
	}

	.gnd-rn-preview__head {
		padding: 9px 14px 8px;
		gap: 7px;
	}

	.gnd-rn-preview__title {
		font-size: 1.18rem;
		line-height: 1.12;
	}

	.gnd-rn-preview__side {
		order: 0;
		height: 100%;
		overflow: hidden;
		border-top: 0;
		border-right: 1px solid var(--gnd-rn-line);
	}

	.gnd-rn-preview__list {
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
	}

	.gnd-rn-preview__map-pane {
		order: 0;
		height: 100%;
		min-height: 0;
	}

	.gnd-rn-preview__map-toolbar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gnd-rn-company,
	.gnd-rn-company__pin,
	.gnd-rn-map-marker__dot {
		transition: none !important;
	}
}

/*
 * Location picker (v0.4.1, All Thailand scope v0.4.2, contained panel v0.4.3). Lives in
 * the non-scrolling head of the catalog column.
 *
 * Two presentations of ONE options node:
 *   - no JavaScript: the inline pill row, byte-equivalent in behaviour to 0.4.0
 *   - JavaScript:    a compact trigger plus a contained disclosure panel
 *
 * v0.4.2 used a native <dialog> opened with showModal(). That painted in the top layer,
 * which is exactly why it was rejected: a centred modal over the whole viewport, map
 * included, reads as a page-level interruption rather than a catalog control. The panel
 * replacing it is scoped to `.gnd-rn-preview__side`:
 *   - narrow layout: in flow under the trigger, pushing the list down
 *   - desktop:       absolutely positioned inside the picker, overlaying the catalog
 *                    column only
 * `.gnd-rn-preview__side` is `overflow: hidden` on desktop, so the panel is structurally
 * incapable of reaching the map pane. Absolute positioning also keeps the stylesheet free
 * of the sticky/fixed positioning the layout contract checker forbids.
 */
.gnd-rn-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Positioning context for the desktop panel. */
.gnd-rn-regionpicker {
	position: relative;
	min-width: 0;
}

.gnd-rn-regionpicker [hidden] {
	display: none;
}

/* Compact control. Reads as the current filter value, not as a link. */
.gnd-rn-regionpicker__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 38px;
	font: inherit;
	font-size: 14px;
	text-align: left;
	padding: 7px 10px;
	border: 1px solid var(--gnd-rn-line-strong);
	border-radius: 8px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-ink);
	cursor: pointer;
}

.gnd-rn-regionpicker__trigger:hover,
.gnd-rn-regionpicker__trigger:focus-visible {
	border-color: color-mix(in srgb, var(--gnd-rn-teal) 55%, transparent);
}

.gnd-rn-regionpicker__trigger-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--gnd-rn-faint);
	flex: 0 0 auto;
}

.gnd-rn-regionpicker__trigger-value {
	font-weight: 650;
	color: var(--gnd-rn-navy);
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gnd-rn-regionpicker__trigger-count {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--gnd-rn-teal-ink);
	background: color-mix(in srgb, var(--gnd-rn-teal) 14%, transparent);
	border-radius: 999px;
	padding: 2px 8px;
}

/* Chevron. Decorative, so it stays out of the accessibility tree. */
.gnd-rn-regionpicker__trigger::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--gnd-rn-muted);
	border-bottom: 2px solid var(--gnd-rn-muted);
	transform: translateY(-2px) rotate(45deg);
}

/* Inline fallback row. */
.gnd-rn-regionpicker__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gnd-rn-region {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	padding: 5px 10px;
	border: 1px solid var(--gnd-rn-line);
	border-radius: 999px;
	color: var(--gnd-rn-navy);
	background: var(--gnd-rn-surface);
	text-decoration: none;
	white-space: nowrap;
}

.gnd-rn-region:hover,
.gnd-rn-region:focus-visible {
	border-color: color-mix(in srgb, var(--gnd-rn-teal) 55%, transparent);
	color: var(--gnd-rn-teal-ink);
}

.gnd-rn-region.is-active {
	border-color: var(--gnd-rn-teal);
	background: color-mix(in srgb, var(--gnd-rn-teal) 12%, transparent);
	color: var(--gnd-rn-teal-ink);
}

.gnd-rn-region--country {
	font-weight: 700;
}

.gnd-rn-region__count {
	font-weight: 700;
	color: var(--gnd-rn-teal-ink);
}

/*
 * An empty market is a real answer, not a failure. It stays selectable and keeps its
 * count visible; only the emphasis is dropped.
 */
.gnd-rn-region--empty {
	color: var(--gnd-rn-muted);
}

.gnd-rn-region--empty .gnd-rn-region__count {
	color: var(--gnd-rn-faint);
	font-weight: 600;
}

/*
 * Contained panel. Narrow layout: an in-flow disclosure directly under the trigger, so
 * the catalog column simply grows and the map above it is untouched.
 */
.gnd-rn-regionpicker__panel {
	margin-top: 8px;
	border: 1px solid var(--gnd-rn-line-strong);
	border-radius: 12px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-ink);
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(11, 31, 58, 0.1);
}

.gnd-rn-regionpicker__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--gnd-rn-line);
}

.gnd-rn-regionpicker__panel-title {
	margin: 0;
	font-size: 14px;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--gnd-rn-navy);
}

.gnd-rn-regionpicker__close {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	min-height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--gnd-rn-line);
	border-radius: 999px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-muted);
	cursor: pointer;
}

.gnd-rn-regionpicker__close:hover,
.gnd-rn-regionpicker__close:focus-visible {
	color: var(--gnd-rn-ink);
	border-color: var(--gnd-rn-line-strong);
}

.gnd-rn-regionpicker__panel-body {
	padding: 8px 10px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	max-height: min(52vh, 340px);
}

/*
 * Inside the panel the same options become full-width rows with comfortable tap
 * targets. Selectors are scoped to the panel body so the inline fallback is untouched.
 */
.gnd-rn-regionpicker__panel-body .gnd-rn-regionpicker__options {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 4px;
}

.gnd-rn-regionpicker__panel-body .gnd-rn-region {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	font-size: 15px;
	padding: 12px 14px;
	border-radius: 10px;
	border-color: transparent;
	background: transparent;
	white-space: normal;
}

/*
 * The country scope is separated from the destinations by its own bottom rule. The row
 * keeps the shared radius: `.is-active` colours all four borders, so squaring this one
 * would make All Thailand the only option that changes shape when it is the current one.
 */
.gnd-rn-regionpicker__panel-body .gnd-rn-region--country {
	margin-bottom: 4px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--gnd-rn-line);
}

.gnd-rn-regionpicker__panel-body .gnd-rn-region:hover,
.gnd-rn-regionpicker__panel-body .gnd-rn-region:focus-visible {
	background: var(--gnd-rn-surface);
}

.gnd-rn-regionpicker__panel-body .gnd-rn-region.is-active {
	border-color: var(--gnd-rn-teal);
	background: color-mix(in srgb, var(--gnd-rn-teal) 12%, transparent);
}

/* Checkmark for the current region. Decorative; aria-current carries the meaning. */
.gnd-rn-regionpicker__panel-body .gnd-rn-region.is-active .gnd-rn-region__name::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 11px;
	margin-left: 9px;
	border-right: 2px solid var(--gnd-rn-teal-deep);
	border-bottom: 2px solid var(--gnd-rn-teal-deep);
	transform: rotate(45deg) translateY(-1px);
}

.gnd-rn-regionpicker__panel-body .gnd-rn-region__count {
	font-size: 13px;
	background: var(--gnd-rn-surface);
	border-radius: 999px;
	padding: 3px 10px;
}

.gnd-rn-regionpicker__panel-body .gnd-rn-region--empty .gnd-rn-region__count {
	background: transparent;
}

@media (max-width: 640px) {
	/*
	 * Phone: the panel stays in the catalog flow and simply gets more room per row plus
	 * safe-area padding. It is not a viewport bottom sheet — nothing here covers the map.
	 */
	.gnd-rn-regionpicker__panel-body {
		max-height: min(60vh, 400px);
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}

	.gnd-rn-regionpicker__panel-body .gnd-rn-region {
		min-height: 56px;
	}
}

@media (min-width: 1025px) {
	/* Desktop keeps the control compact: it sits beside the heading, not across it. */
	.gnd-rn-regionpicker__trigger {
		width: auto;
		max-width: 100%;
		min-height: 40px;
	}

	/*
	 * Desktop: the panel leaves the flow and overlays the catalog column under its own
	 * trigger. The offset parent is `.gnd-rn-regionpicker` inside the non-scrolling head,
	 * so the panel stays anchored while the list scrolls beneath it, and the whole thing
	 * is clipped by `.gnd-rn-preview__side { overflow: hidden }` — the map pane is a
	 * separate grid item and is unreachable from here.
	 */
	.gnd-rn-regionpicker__panel {
		position: absolute;
		z-index: var(--gnd-rn-z-catalog-panel);
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		margin-top: 0;
		max-width: 100%;
		box-shadow: 0 12px 30px rgba(11, 31, 58, 0.18);
	}

	.gnd-rn-regionpicker__panel-body {
		max-height: min(46vh, 320px);
	}
}

/* -------------------------------------------------------------------------
 * Owner submission / claim entry points and GetnDrive partner badge (v0.5.0).
 * ------------------------------------------------------------------------- */

/*
 * Owner self-service: "Not listed?" callout (v0.5.1) + centered add-company modal (v0.5.2).
 * The callout is a distinct bordered row so it reads as an action, not another filter. It
 * stays exactly where it was; only what it opens changed.
 */
.gnd-rn-preview__addcta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 2px;
	padding: 10px 12px;
	border: 1px solid var(--gnd-rn-line-strong);
	border-radius: 10px;
	background: color-mix(in srgb, var(--gnd-rn-teal) 7%, var(--gnd-rn-card));
}

.gnd-rn-preview__addcta-prompt {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 650;
	color: var(--gnd-rn-navy);
}

.gnd-rn-preview__addcta-action {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 650;
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid var(--gnd-rn-teal-deep);
	border-radius: 8px;
	background: var(--gnd-rn-teal-deep);
	color: #ffffff;
	cursor: pointer;
}

.gnd-rn-preview__addcta-action:hover,
.gnd-rn-preview__addcta-action:focus-visible {
	background: var(--gnd-rn-teal-ink);
	border-color: var(--gnd-rn-teal-ink);
}

/* Submission result notice near the CTA. */
.gnd-rn-preview__addnotice {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--gnd-rn-line-strong);
	border-radius: 10px;
	font-size: 13px;
	color: var(--gnd-rn-ink);
}

.gnd-rn-preview__addnotice--ok {
	border-color: #2f9e44;
	background: #ebfbee;
	color: #1b5e2a;
}

.gnd-rn-preview__addnotice--error {
	border-color: #e03131;
	background: #fff5f5;
	color: #8a2b2b;
}

@media (max-width: 1024px) {
	/* Phone/tablet: the action spans the row so it is unmissable, never an oversized field. */
	.gnd-rn-preview__addcta-action {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* --- add-company modal overlay (v0.5.2): start --- */

/*
 * The 0.5.1 rejection: the intake form opened as a disclosure anchored inside the 372px
 * catalog rail, which forced a ~340px inner scroll area around a fifteen-field form. The
 * approved replacement is a centered overlay above the whole preview.
 *
 * The overlay is the only surface in this stylesheet that leaves the preview shell, which is
 * why it is the only `position: fixed` here — the map/list layout itself is still a contained
 * grid. The container is rendered as a sibling of `.gnd-rn-preview__shell`, so no pane's
 * `overflow` or grid track can clip it.
 */
.gnd-rn-preview__addmodal {
	position: fixed;
	inset: 0;
	z-index: var(--gnd-rn-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(16px, 3vh) 16px;
}

/*
 * `display: flex` above beats the UA rule for the `hidden` attribute, so the closed state has
 * to be restated. Without this the modal would ship open on every catalog load.
 */
.gnd-rn-preview__addmodal[hidden] {
	display: none;
}

.gnd-rn-preview__addmodal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(11, 31, 58, 0.55);
}

/*
 * Roughly 820px on desktop: wide enough for a two-column form, well short of fullscreen. The
 * viewport-relative cap keeps it off the edges on small laptops, and the height cap is what
 * makes any scrolling happen inside the body rather than under a clipped submit button.
 */
.gnd-rn-preview__addmodal-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 820px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	border-radius: 16px;
	background: var(--gnd-rn-card);
	box-shadow: 0 24px 60px rgba(11, 31, 58, 0.32);
	overflow: hidden;
}

.gnd-rn-preview__addmodal-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--gnd-rn-line);
	background: var(--gnd-rn-card);
}

.gnd-rn-preview__addmodal-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--gnd-rn-navy);
}

.gnd-rn-preview__addmodal-title:focus-visible {
	outline: 2px solid var(--gnd-rn-teal-deep);
	outline-offset: 3px;
}

.gnd-rn-preview__addmodal-close {
	flex: 0 0 auto;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	min-height: 40px;
	padding: 6px 16px;
	border: 1px solid var(--gnd-rn-line);
	border-radius: 999px;
	background: var(--gnd-rn-card);
	color: var(--gnd-rn-muted);
	cursor: pointer;
}

.gnd-rn-preview__addmodal-close:hover,
.gnd-rn-preview__addmodal-close:focus-visible {
	color: var(--gnd-rn-ink);
	border-color: var(--gnd-rn-line-strong);
}

/*
 * The form reuses the intake field styles from the submit stylesheet. Pin the modal to the
 * light catalog palette so it never inherits the submit route's dark-scheme tokens, and strip
 * the full-page padding the submit shell would otherwise add.
 */
.gnd-rn-preview__addmodal-body.gnd-rn-submit {
	--gnd-rn-submit-ink: var(--gnd-rn-ink);
	--gnd-rn-submit-muted: var(--gnd-rn-muted);
	--gnd-rn-submit-line: var(--gnd-rn-line-strong);
	--gnd-rn-submit-accent: var(--gnd-rn-teal-deep);
	--gnd-rn-submit-bg: var(--gnd-rn-card);
	flex: 1 1 auto;
	display: block;
	padding: 18px 20px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/*
 * Height is the enemy here: every row saved is a row the owner does not have to scroll past.
 * Stacked one-per-line checkboxes and radios cost ~120px of an otherwise short form.
 */
.gnd-rn-preview__addmodal-body .gnd-rn-submit__check,
.gnd-rn-preview__addmodal-body .gnd-rn-submit__radio {
	display: inline-flex;
	align-items: center;
	margin: 6px 18px 6px 0;
}

.gnd-rn-preview__addmodal-body .gnd-rn-submit__consent .gnd-rn-submit__check {
	margin-right: 0;
}

.gnd-rn-preview__addmodal-body .gnd-rn-submit__vehicles,
.gnd-rn-preview__addmodal-body .gnd-rn-submit__intent,
.gnd-rn-preview__addmodal-body .gnd-rn-submit__contacts {
	padding: 8px 14px 10px;
}

.gnd-rn-preview__addmodal-body .gnd-rn-submit__field {
	margin-bottom: 12px;
}

.gnd-rn-preview__addmodal-body .gnd-rn-submit__hint {
	margin: -4px 0 12px;
}

.gnd-rn-preview__addmodal-body .gnd-rn-submit__consent {
	margin-top: 10px;
}

.gnd-rn-preview__addmodal-body .gnd-rn-submit__actions {
	margin: 14px 0 6px;
}

/* Wide layout: two columns, so the form reads as one screen instead of a long ribbon. */
@media (min-width: 900px) {
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 20px;
		align-items: start;
	}

	/*
	 * Company name and location pair up on the first row; the vehicle types and the message
	 * pair up further down. Everything that reads as a full-width block says so explicitly,
	 * so auto-placement never splits a field group across columns.
	 */
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__field--address,
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__pair,
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__hint,
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__contacts,
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__intent,
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__consent,
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__actions,
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__required,
	.gnd-rn-preview__addmodal-body .gnd-rn-submit__claiming {
		grid-column: 1 / -1;
	}

	.gnd-rn-preview__addmodal-body .gnd-rn-submit__field--address textarea {
		min-height: 62px;
	}
}

@media (max-width: 640px) {
	/*
	 * Phone: nearly full width with safe margins, and the body owns the scroll so the page
	 * behind it never scrolls away under the form.
	 */
	.gnd-rn-preview__addmodal {
		padding: 10px;
	}

	.gnd-rn-preview__addmodal-dialog {
		width: 100%;
		max-width: calc(100vw - 20px);
		max-height: calc(100vh - 20px);
		max-height: calc(100dvh - 20px);
		border-radius: 14px;
	}

	.gnd-rn-preview__addmodal-head {
		padding: 12px 14px;
	}

	.gnd-rn-preview__addmodal-title {
		font-size: 17px;
	}

	.gnd-rn-preview__addmodal-body.gnd-rn-submit {
		padding: 14px 14px max(16px, env(safe-area-inset-bottom));
	}
}

/*
 * Scroll lock while the modal is open. The desktop preview route already locks the body, but
 * the narrow layout scrolls normally and would otherwise drift behind the overlay.
 */
body.gnd-rn-add-modal-open {
	overflow: hidden;
}

/* --- add-company modal overlay (v0.5.2): end --- */

.gnd-rn-partner-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gnd-rn-navy);
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.gnd-rn-company__badge {
	margin-left: 6px;
}

.gnd-rn-company__claimcta {
	margin: 8px 0 0;
}

.gnd-rn-company__claimlink {
	color: var(--gnd-rn-teal-ink);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.gnd-rn-company__claimlink:hover,
.gnd-rn-company__claimlink:focus {
	text-decoration: underline;
}

.gnd-rn-popup__badge {
	display: inline-block;
	margin-top: 4px;
}