/* ─── Shared: cards ─────────────────────────────────────────────────────── */

.cbnb-card {
	display: flex;
	gap: 10px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	margin-bottom: 8px;
	cursor: pointer;
}

.cbnb-card:hover {
	border-color: #3b82f6;
}

.cbnb-card__thumb img {
	width: 80px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
}

.cbnb-card__title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 4px;
}

.cbnb-card__title a {
	color: inherit;
	text-decoration: none;
}

.cbnb-card__price {
	font-size: 13px;
	color: #16a34a;
	font-weight: 600;
}

.cbnb-card__dates {
	font-size: 12px;
	color: #6b7280;
}

.cbnb-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.cbnb-card__tag {
	font-size: 11px;
	background: #f3f4f6;
	padding: 2px 6px;
	border-radius: 3px;
}

/* ─── Shared: states ────────────────────────────────────────────────────── */

.cbnb-no-results {
	padding: 20px;
	color: #9ca3af;
	text-align: center;
}

.cbnb-loading {
	opacity: 0.5;
	pointer-events: none;
}


/* The list is a multi-column grid, so the wrapper has to span every column or the
   button ends up the width of one card. */
.cbnb-load-more {
	grid-column: 1 / -1;
	padding: 16px 0 8px;
}

/* Same navy, radius and type as the header's "List for Free" action
   (.listing-panel-head__btn in the theme), stretched across the grid. */
.cbnb-load-more__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.2222rem;
	padding: 0.3889rem 2.2222rem;
	background: #003D5B;
	color: #fff;
	border-radius: 1.1111rem;
	font-size: 1.1111rem;
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cbnb-load-more__btn:hover,
.cbnb-load-more__btn:focus-visible {
	background: #002B41;
	color: #fff;
	text-decoration: none;
}

/* ─── Shared: map popup ─────────────────────────────────────────────────── */

/* Remove default InfoWindow padding; overflow:visible so X can stick out */
.gm-style .gm-style-iw-c {
	padding: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Content wrapper — clips and rounds the card */
.gm-style .gm-style-iw-d {
	overflow: hidden !important;
	max-height: none !important;
	padding: 0 !important;
	border-radius: 1.111rem !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
	background: #fff !important;
}

/* Collapse the close-button wrapper so it takes no vertical space */
.gm-style .gm-style-iw-chr {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 0 !important;
	height: 0 !important;
	overflow: visible !important;
}

/* Close button — keep it inside the popup so it never detaches from the card. */
.gm-style .gm-style-iw-chr .gm-ui-hover-effect,
.gm-style .gm-ui-hover-effect {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
	width: 28px !important;
	height: 28px !important;
	z-index: 10 !important;
	background: #fff !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
	opacity: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

/* Hide default Google Maps X icon */
.gm-style .gm-ui-hover-effect img,
.gm-style .gm-ui-hover-effect span {
	display: none !important;
}

/* Draw X with CSS */
.gm-style .gm-ui-hover-effect::before,
.gm-style .gm-ui-hover-effect::after {
	content: '' !important;
	position: absolute !important;
	width: 12px !important;
	height: 1.5px !important;
	background: #555 !important;
	border-radius: 1px !important;
}

.gm-style .gm-ui-hover-effect::before {
	transform: rotate(45deg) !important;
}

.gm-style .gm-ui-hover-effect::after {
	transform: rotate(-45deg) !important;
}

.cbnb-map-popup {
	width: min(300px, calc(100vw - 64px));
	overflow: hidden;
	background: #fff;
	color: #1f2937;
}

.cbnb-map-popup[data-listing-url] {
	cursor: pointer;
}

.cbnb-map-popup--fallback {
	display: block;
	margin: 0;
}

.cbnb-map-popup__image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(145deg, #edf7fa, #dcebef);
}

.cbnb-map-popup__image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbnb-map-popup__image.is-missing img {
	display: none !important;
}

.cbnb-map-popup__image-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	color: #64748b;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
}

.cbnb-map-popup__body {
	display: grid;
	gap: 6px;
	padding: 14px 16px 16px;
}

.cbnb-map-popup__title {
	display: block;
	min-width: 0;
	padding-right: 36px;
	color: #003d5b;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.cbnb-map-popup__price {
	color: #0b9f43;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.cbnb-map-popup__rating {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: 14px;
}

.cbnb-map-popup__rating > span:first-child {
	color: #d4d8da;
}

.cbnb-map-popup__rating.is-active > span:first-child {
	color: var(--cbnb-catalog-yellow, #fbaf00);
}

.cbnb-map-popup__link {
	width: max-content;
	color: #006b8f;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Fast API cards replace the JetEngine results after a filter change. Keep
 * their markup on the same visual contract as the initial yacht cards. */
#yacht_cards .cbnb-api-card__image .fleet-compay__image-placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	color: #64748b;
	font-size: 13px;
	font-weight: 500;
}

#yacht_cards .cbnb-api-card__image > img {
	position: relative;
	z-index: 1;
}

#yacht_cards .cbnb-api-card__image.is-missing > img {
	display: none !important;
}

#yacht_cards .cbnb-api-card .fleet-compay__title {
	color: #333;
	text-decoration: none;
}

#yacht_cards .cbnb-api-card .fleet-compay__info {
	color: #333;
	font-size: .9rem;
}

#yacht_cards .cbnb-api-card__rating {
	display: flex;
	align-items: center;
	gap: .35rem;
	white-space: nowrap;
}

#yacht_cards .cbnb-api-card__rating > span:first-child {
	color: #d4d8da;
}

#yacht_cards .cbnb-api-card__rating.is-active > span:first-child {
	color: var(--cbnb-catalog-yellow, #fbaf00);
}

.cbnb-map-popup .fleet-compay__item {
	border: none;
	border-radius: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.cbnb-map-popup .fleet-compay__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
	margin: 0;
}

.cbnb-map-popup .fleet-compay__image .tariff-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
}

.cbnb-map-popup .fleet-compay__image picture,
.cbnb-map-popup .fleet-compay__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbnb-map-popup .fleet-compay__cont {
	padding: 20px;
}

.cbnb-map-popup .fleet-compay__text {
	white-space: normal;
	word-break: break-word;
}

/* JetEngine's Crew map uses its own InfoBox shell. Normalize that shell and
 * the listing-template spacing to the same visual contract as Yacht popups. */
body.cbnb-catalog-page #lessee_map .jet-map-box {
	width: min(300px, calc(100vw - 64px)) !important;
	margin-left: max(10px, calc((384px - 100vw) / 2)) !important;
	overflow: visible !important;
	background: transparent !important;
	font-size: 13px;
}

body.cbnb-catalog-page #lessee_map .jet-map-box::after {
	content: '';
	position: absolute;
	z-index: 0;
	bottom: -8px;
	left: 50%;
	width: 18px;
	height: 18px;
	background: #fff;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.08);
	transform: translateX(-50%) rotate(45deg);
}

body.cbnb-catalog-page #lessee_map .jet-map-box > div {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 1.111rem;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

body.cbnb-catalog-page #lessee_map .jet-map-box > .jet-map-close {
	position: absolute;
	z-index: 3;
	top: 8px;
	right: 8px;
	float: none;
	box-sizing: border-box;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 7px !important;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	object-fit: contain;
}

body.cbnb-catalog-page #lessee_map .cbnb-map-popup--crew {
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
}

body.cbnb-catalog-page #lessee_map .cbnb-map-popup--crew > .elementor {
	width: 100%;
}

body.cbnb-catalog-page #lessee_map .cbnb-map-popup--crew > .elementor > .e-con {
	width: 92.484% !important;
	max-width: 92.484% !important;
	margin: 0 auto !important;
	padding: 10px !important;
}

body.cbnb-catalog-page #lessee_map .cbnb-map-popup--crew > .elementor > .e-con > .e-con-inner {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

/* ─── Demo layout ───────────────────────────────────────────────────────── */

.cbnb-demo-wrap {
	font-family: sans-serif;
	width: 100%;
}

.cbnb-demo-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.cbnb-demo-filters__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cbnb-demo-filters__field label {
	font-size: 12px;
	font-weight: 600;
	color: #555;
}

.cbnb-demo-filters__field input,
.cbnb-demo-filters__field select {
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.cbnb-demo-summary {
	margin-bottom: 12px;
	font-size: 13px;
	color: #666;
}

.cbnb-demo-layout {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 16px;
	width: 100%;
}

.cbnb-demo-list {
	overflow-y: auto;
	max-height: 800px;
}

.cbnb-demo-map {
	height: 500px;
	position: relative;
	overflow: hidden;
}

@media (max-width: 700px) {
	.cbnb-demo-layout {
		grid-template-columns: 1fr;
	}

	.cbnb-demo-map {
		height: 300px;
	}
}

/* ─── Hero layout ───────────────────────────────────────────────────────── */

.cbnb-hero {
	position: relative;
	width: 100%;
	height: 100%;
}

#cbnb-yacht-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: 738px;
	overflow-y: auto;
	padding: 0 10px;
}

#cbnb-yacht-list .fleet-compay__cont {
	position: relative;
}

#cbnb-yacht-list .fleet-compay__image {
	position: relative;
}

#cbnb-yacht-list .fleet-compay__favorite,
#cbnb-yacht-list .fleet-compay__favorite_grey {
	position: absolute;
	top: 1.111rem;
	right: 1.111rem;
}

#cbnb-yacht-map {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Exact-coordinate clusters stay grouped at maximum zoom. Their listings are
 * exposed in a map-owned panel instead of being rendered as overlapping pins. */
.cbnb-map-with-cluster-panel > .cbnb-map-cluster-panel,
#cbnb-yacht-map > .cbnb-map-cluster-panel,
#cbnb-crew-map > .cbnb-map-cluster-panel,
#lessee_map > .cbnb-map-cluster-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100% - 32px));
	min-width: 280px;
	padding: 0;
	background: #fff;
	color: #263238;
	box-shadow: -10px 0 30px rgba(0, 61, 91, 0.2);
}

.cbnb-map-with-cluster-panel > .cbnb-map-cluster-panel[hidden],
#cbnb-yacht-map > .cbnb-map-cluster-panel[hidden],
#cbnb-crew-map > .cbnb-map-cluster-panel[hidden],
#lessee_map > .cbnb-map-cluster-panel[hidden] {
	display: none !important;
}

.cbnb-map-cluster-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 14px 8px 18px;
}

.cbnb-map-cluster-panel__title {
	margin: 0;
	color: #003d5b;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.cbnb-map-cluster-panel__close {
	display: inline-flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #dce4e8;
	border-radius: 50%;
	background: #fff;
	color: #003d5b;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.cbnb-map-cluster-panel__close:hover,
.cbnb-map-cluster-panel__preview:hover {
	border-color: #fbaf00;
	background: #fff8e1;
}

.cbnb-map-cluster-panel__close:focus-visible,
.cbnb-map-cluster-panel__link:focus-visible,
.cbnb-map-cluster-panel__preview:focus-visible {
	outline: 3px solid rgba(0, 111, 166, 0.3);
	outline-offset: 2px;
}

.cbnb-map-cluster-panel__hint {
	margin: 0;
	padding: 0 18px 12px;
	color: #65737b;
	font-size: 13px;
	line-height: 1.4;
}

.cbnb-map-cluster-panel__list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	margin: 0;
	padding: 0 14px 16px 18px;
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
}

.cbnb-map-cluster-panel__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) max-content;
	align-items: center;
	gap: 10px;
	min-height: 66px;
	padding: 7px;
	border: 1px solid #dce4e8;
	border-radius: 10px;
	background: #fff;
}

.cbnb-map-cluster-panel__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 54px;
	border-radius: 7px;
	background: #e8f3f6;
	color: #65737b;
	font-size: 11px;
	object-fit: cover;
}

.cbnb-map-cluster-panel__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.cbnb-map-cluster-panel__link {
	overflow: hidden;
	color: #003d5b;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cbnb-map-cluster-panel__link:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cbnb-map-cluster-panel__price {
	overflow: hidden;
	color: #0b9f43;
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cbnb-map-cluster-panel__meta {
	display: -webkit-box;
	overflow: hidden;
	color: #65737b;
	font-size: 12px;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.cbnb-map-cluster-panel__preview {
	min-height: 36px;
	padding: 7px 9px;
	border: 1px solid #dce4e8;
	border-radius: 8px;
	background: #fff;
	color: #003d5b;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.cbnb-map-cluster-panel--crew .cbnb-map-cluster-panel__item {
	grid-template-columns: 64px minmax(0, 1fr) max-content;
	min-height: 80px;
}

.cbnb-map-cluster-panel--crew .cbnb-map-cluster-panel__image {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	aspect-ratio: 1;
}

@media (max-width: 700px) {
	.cbnb-map-with-cluster-panel > .cbnb-map-cluster-panel,
	#cbnb-yacht-map > .cbnb-map-cluster-panel,
	#cbnb-crew-map > .cbnb-map-cluster-panel,
	#lessee_map > .cbnb-map-cluster-panel {
		top: auto;
		left: 0;
		width: 100%;
		min-width: 0;
		height: min(82%, 420px);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -10px 30px rgba(0, 61, 91, 0.2);
	}

	.cbnb-map-cluster-panel__item {
		grid-template-columns: 62px minmax(0, 1fr) max-content;
	}

	.cbnb-map-cluster-panel__image {
		width: 62px;
		height: 48px;
	}

	.cbnb-map-cluster-panel--crew .cbnb-map-cluster-panel__item {
		min-height: 78px;
	}

	.cbnb-map-cluster-panel--crew .cbnb-map-cluster-panel__image {
		flex-basis: 62px;
		height: 62px;
	}

	.cbnb-map-cluster-panel__list {
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
}

/* Popup opened before the Elementor card template finished loading. Card markup is
   never built in JS (SOW §3), so the popup waits here and is swapped once the
   template cache fires cbnb:catalog-card-templates-ready. */
.cbnb-map-popup--awaiting-template {
	min-width: 180px;
	padding: 18px 20px;
}

.cbnb-map-popup__waiting {
	color: #5b6b73;
	font-size: 13px;
	text-align: center;
}