/**
 * Public shipping-countries list.
 *
 * Theme-agnostic on purpose: it inherits the page's font and only sets colour through
 * custom properties the shortcode can override, so it drops into any theme without a
 * restyle. Layout is intrinsically responsive (auto-fill grid), so no breakpoint list
 * has to be maintained per theme width.
 */

/*
 * Colour strategy: inherit the theme rather than guess at it.
 *
 * `prefers-color-scheme` is deliberately NOT used — it reports the visitor's OS preference,
 * not whether the surrounding theme is dark, so honouring it paints light text onto light
 * themes. Instead, text inherits the theme's own colour and the secondary tones are mixed
 * from `currentColor`, which is correct on any background. Flat fallbacks cover browsers
 * without color-mix(); the admin can still pin exact colours in the settings.
 */
.mwc-ships {
	--mwc-ships-accent: #2563eb;
	--mwc-ships-ink: inherit;
	--mwc-ships-surface: transparent;
	--mwc-ships-muted: #6b7684;
	--mwc-ships-line: rgba(128, 133, 140, 0.32);
	--mwc-ships-soft: rgba(37, 99, 235, 0.1);

	color: var(--mwc-ships-ink);
	font-size: 1rem;
	line-height: 1.5;
	container-type: inline-size;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.mwc-ships {
		--mwc-ships-muted: color-mix(in srgb, currentColor 62%, transparent);
		--mwc-ships-line: color-mix(in srgb, currentColor 20%, transparent);
		--mwc-ships-soft: color-mix(in srgb, var(--mwc-ships-accent) 12%, transparent);
	}
}

.mwc-ships *,
.mwc-ships *::before,
.mwc-ships *::after { box-sizing: border-box; }

.mwc-ships__heading { margin: 0 0 0.4em; }
.mwc-ships__intro { margin: 0 0 1.2em; color: var(--mwc-ships-muted); max-width: 70ch; }
.mwc-ships__intro p { margin: 0 0 0.6em; }

/* --------------------------------------------------------------- toolbar */

/*
 * Kept in normal flow rather than sticky: a sticky toolbar needs a guaranteed-opaque
 * background, and this list inherits the theme's colours instead of owning them, so there is
 * no colour we could paint that is safe on every theme.
 */
.mwc-ships__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	margin-bottom: 0.9rem;
	padding: 0.1rem 0;
}

.mwc-ships__search { position: relative; flex: 1 1 240px; min-width: 200px; }

.mwc-ships__input {
	width: 100%;
	padding: 0.6em 2.2em 0.6em 0.85em;
	border: 1px solid var(--mwc-ships-line);
	border-radius: 999px;
	font: inherit;
	color: inherit;
	background: var(--mwc-ships-surface);
	-webkit-appearance: none;
	appearance: none;
}

.mwc-ships__input:focus {
	outline: 2px solid var(--mwc-ships-accent);
	outline-offset: 1px;
	border-color: var(--mwc-ships-accent);
}

.mwc-ships__clear {
	position: absolute;
	right: 0.5em;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 1.35em;
	line-height: 1;
	color: var(--mwc-ships-muted);
	padding: 0 0.25em;
}
.mwc-ships__clear:hover { color: var(--mwc-ships-ink); }

.mwc-ships__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.mwc-ships__chip {
	border: 1px solid var(--mwc-ships-line);
	background: var(--mwc-ships-surface);
	color: var(--mwc-ships-muted);
	border-radius: 999px;
	padding: 0.35em 0.85em;
	font: inherit;
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	line-height: 1.4;
}
.mwc-ships__chip span {
	font-size: 0.85em;
	font-weight: 700;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}
.mwc-ships__chip:hover { border-color: var(--mwc-ships-accent); color: var(--mwc-ships-ink); }
.mwc-ships__chip.is-active {
	background: var(--mwc-ships-accent);
	border-color: var(--mwc-ships-accent);
	color: #fff;
}
.mwc-ships__chip.is-active span { opacity: 0.8; }

.mwc-ships__count { font-size: 0.85em; color: var(--mwc-ships-muted); margin: 0 0 0.9rem; }

/* ------------------------------------------------------------- the list */

.mwc-ships__group { margin: 0 0 1.4rem; }
.mwc-ships__group[hidden] { display: none; }

.mwc-ships__group-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.8em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mwc-ships-muted);
	margin: 0 0 0.6rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--mwc-ships-line);
}
.mwc-ships__group-count {
	background: var(--mwc-ships-soft);
	color: var(--mwc-ships-accent);
	border-radius: 999px;
	padding: 0.1em 0.6em;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.mwc-ships__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
	gap: 0.5rem;
}

.mwc-ships__item {
	display: grid;
	gap: 0.25rem 0.6rem;
	align-content: start;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--mwc-ships-line);
	border-radius: 10px;
	background: var(--mwc-ships-surface);
	margin: 0;
}
.mwc-ships__item[hidden] { display: none; }
.mwc-ships__item.is-special { border-left: 3px solid var(--mwc-ships-accent); }

.mwc-ships__country { display: flex; align-items: baseline; gap: 0.45em; min-width: 0; }
.mwc-ships__flag { font-size: 1.15em; line-height: 1; flex: none; }
.mwc-ships__name { font-weight: 600; overflow-wrap: anywhere; }
.mwc-ships__code {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--mwc-ships-muted);
	flex: none;
}

.mwc-ships__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.5rem;
	font-size: 0.82em;
	color: var(--mwc-ships-muted);
}

.mwc-ships__badge {
	background: var(--mwc-ships-soft);
	color: var(--mwc-ships-accent);
	border-radius: 5px;
	padding: 0.1em 0.5em;
	font-weight: 700;
	font-size: 0.95em;
}
.mwc-ships__lead::before { content: "\1F5D3\FE0F"; margin-right: 0.35em; }
.mwc-ships__services { overflow-wrap: anywhere; }
.mwc-ships__note { font-size: 0.82em; color: var(--mwc-ships-muted); font-style: italic; }

.mwc-ships__empty {
	display: none;
	padding: 1rem 1.1rem;
	border: 1px dashed var(--mwc-ships-line);
	border-radius: 10px;
	color: var(--mwc-ships-muted);
	margin: 0.5rem 0;
}
.mwc-ships__empty.is-visible,
.mwc-ships__empty:not([hidden]) { display: block; }

.mwc-ships__footer {
	margin: 1.2rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--mwc-ships-line);
	font-size: 0.88em;
	color: var(--mwc-ships-muted);
}

/* ------------------------------------------------------- layout variants */

/* Table-ish: one row per destination, aligned columns on wide containers. */
.mwc-ships--table .mwc-ships__list { grid-template-columns: 1fr; gap: 0; }
.mwc-ships--table .mwc-ships__item {
	border: 0;
	border-bottom: 1px solid var(--mwc-ships-line);
	border-radius: 0;
	padding: 0.6rem 0.2rem;
}
.mwc-ships--table .mwc-ships__item.is-special { border-left: 3px solid var(--mwc-ships-accent); padding-left: 0.6rem; }

@container (min-width: 620px) {
	.mwc-ships--table .mwc-ships__item {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
		align-items: baseline;
	}
	.mwc-ships--table .mwc-ships__meta { justify-content: flex-end; }
	.mwc-ships--table .mwc-ships__note { grid-column: 1 / -1; }
}

/* Cards: force the roomier card presentation even in narrow containers. */
.mwc-ships--cards .mwc-ships__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Mobile: the toolbar stacks, search goes full width, chips scroll horizontally. */
@media (max-width: 480px) {
	.mwc-ships__tools { gap: 0.5rem; }
	.mwc-ships__search { flex-basis: 100%; }
	.mwc-ships__filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; -webkit-overflow-scrolling: touch; }
	.mwc-ships__chip { flex: none; }
}

/* ------------------------------------------------------------ tabs (3.15) */

/* Several named lists as tabs. Colours come from the surrounding theme (currentColor) plus the
   accent, like the rest of the list - never from prefers-color-scheme. */
.mwc-ships-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 0 1em;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.mwc-ships-tabs__tab {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: 0.55em 0.9em;
	margin-bottom: -1px;
	cursor: pointer;
	opacity: 0.75;
}
.mwc-ships-tabs__tab:hover { opacity: 1; }
.mwc-ships-tabs__tab[aria-selected="true"] {
	opacity: 1;
	font-weight: 600;
	border-bottom-color: var(--mwc-ships-accent, currentColor);
}
.mwc-ships-tabs__tab:focus-visible { outline: 2px solid var(--mwc-ships-accent, currentColor); outline-offset: 2px; }
.mwc-ships-tabs__panel[hidden] { display: none; }