/* The ferry comparison map and the port picker. Loaded only on pages that use
   one of the two shortcodes. Everything works without JavaScript: the table and
   the per-destination panels are in the HTML, the script adds the map and the
   filters on top. */

/* ---- Comparison map ---- */
.pf-fc { margin: 1.6rem 0; }

.pf-fc-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.8rem; }
.pf-fc-chip {
	font: inherit;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.88rem;
	min-height: 44px;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 7px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.pf-fc-chip:hover { border-color: var(--wp--preset--color--ink); }
.pf-fc-chip.is-on {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.pf-fc-map {
	height: 520px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--paper);
}

.pf-fc-legend { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf-fc-legend li[hidden] { display: none; }
.pf-fc-li {
	font: inherit;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 36px;
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 7px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.pf-fc-li:hover { border-color: var(--wp--preset--color--ink); }
.pf-fc-li i { width: 18px; height: 4px; border-radius: 2px; display: inline-block; }

.pf-fc-table { margin: 1.4rem 0 0; }
.pf-fc-table tr[hidden] { display: none !important; }
.pf-fc-showmap {
	font: inherit;
	font-size: 0.85rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	min-height: 36px;
}
.pf-fc-showmap:hover { border-color: var(--wp--preset--color--amber); color: var(--wp--preset--color--amber); }
.pf-fc-foot { font-size: 0.8rem; color: var(--wp--preset--color--ink-soft); margin-top: 0.8rem; }

/* Without the script there is no map to point at, so the map-only parts stay hidden. */
.pf-fc:not(.is-ready) .pf-fc-chips,
.pf-fc:not(.is-ready) .pf-fc-map,
.pf-fc:not(.is-ready) .pf-fc-legend,
.pf-fc:not(.is-ready) .pf-fc-showmap,
.pf-fc:not(.is-ready) .pf-fc-table th:last-child,
.pf-fc:not(.is-ready) .pf-fc-table td:last-child { display: none; }

/* Popup */
.pf-fc-pop { font-family: var(--wp--preset--font-family--body); font-size: 0.88rem; line-height: 1.5; min-width: 220px; }
.pf-fc-pop strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1rem; margin-bottom: 0.3rem; }
.pf-fc-pop-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.pf-fc-pop-tags span {
	font-size: 0.74rem;
	padding: 0.1rem 0.5rem;
	border-radius: 5px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
}
.pf-fc-pop-tags .pf-fc-tag-sailed {
	background: var(--wp--preset--color--amber-tint);
	border-color: var(--wp--preset--color--amber);
}
.pf-fc-pop dl { margin: 0 0 0.4rem; display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.7rem; }
.pf-fc-pop dt { color: var(--wp--preset--color--ink-soft); }
.pf-fc-pop dd { margin: 0; }
.pf-fc-pop p { margin: 0 0 0.6rem; }
.pf-fc-pop a { display: block; margin-top: 0.3rem; font-weight: 600; text-decoration: none; }
.pf-fc-pop a.pf-fc-pop-main { color: var(--wp--preset--color--amber); text-decoration: underline; }
.pf-fc-pop a.pf-fc-pop-book {
	text-align: center;
	padding: 0.5rem 0.7rem;
	border-radius: 7px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* ---- Port picker ---- */
.pf-pp { margin: 1.4rem 0; }
.pf-pp-map { height: 420px; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); margin-bottom: 1rem; }
.pf-pp:not(.is-ready) .pf-pp-map { display: none; }
.pf-pp-panel[hidden] { display: none; }
.pf-pp-best {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.05rem 0.45rem;
	border-radius: 5px;
	font-size: 0.72rem;
	font-weight: 600;
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--white);
	vertical-align: middle;
}
.pf-pp .leaflet-popup-content { font-family: var(--wp--preset--font-family--body); font-size: 0.88rem; line-height: 1.5; }

@media (max-width: 600px) {
	.pf-fc-map { height: 420px; }
	.pf-pp-map { height: 340px; }
	.pf-fc-chip { padding: 0.35rem 0.7rem; }
}

@media (min-width: 761px) {
	.pf-fc-table td:nth-child(1) { min-width: 9.5rem; }
	.pf-fc-table td:nth-child(5) { min-width: 15rem; }
}