/* IB Filters page components: place header, timeline, child tiles, flag facts, related flags.
   Uses the shop's own custom properties (Core Framework) with fallbacks; mobile first (390 px), desktop from 768 px. */
.ibf-place-header,
.ibf-timeline,
.ibf-children,
.ibf-facts,
.ibf-relations,
.ibf-place-text {
	--ibf-primary: var(--primary, #b80000);
	--ibf-icon-ink: #2b4a7a;
	--ibf-surface: var(--bg-surface, #fff);
	--ibf-body: var(--bg-body, #f7f7f7);
	--ibf-text: var(--text-body, #404040);
	--ibf-title: var(--text-title, #1f1f1f);
	--ibf-line: var(--border-primary, #e2e2e2);
	--ibf-muted: var(--dark-50, #6b6b6b);
	--ibf-current: #1a7f37;
	--ibf-gap: var(--space-s, 1rem);
	--ibf-gap-s: var(--space-xs, 0.5rem);
	--ibf-gap-l: var(--space-m, 1.5rem);
	--ibf-radius: var(--radius-s, 6px);
	--ibf-font: var(--text-m, 1rem);
	--ibf-font-s: var(--text-s, 0.875rem);
	color: var(--ibf-text);
	font-size: var(--ibf-font);
	width: 100%;
	box-sizing: border-box;
}

.ibf-section-title {
	margin: 0 0 var(--ibf-gap);
	font-size: var(--text-l, 1.25rem);
	color: var(--ibf-title);
}

.ibf-eyebrow {
	margin: 0 0 0.25rem;
	font-size: var(--ibf-font-s);
	color: var(--ibf-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Flag card: picture, name, optional kind badge */
.ibf-flagcard {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 0.375rem;
	padding: var(--ibf-gap-s);
	background: var(--ibf-surface);
	border: 1px solid var(--ibf-line);
	border-radius: var(--ibf-radius);
	color: var(--ibf-title);
	text-decoration: none;
}

a.ibf-flagcard:hover,
a.ibf-flagcard:focus-visible,
a.ibf-tile:hover,
a.ibf-tile:focus-visible {
	border-color: var(--ibf-primary);
}

.ibf-flagcard__img,
.ibf-tile__img {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--ibf-body);
	border-radius: calc(var(--ibf-radius) - 2px);
	overflow: hidden;
}

.ibf-flagcard__img img,
.ibf-tile__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ibf-flagcard__name {
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ibf-badge {
	justify-self: start;
	padding: 0.125rem 0.5rem;
	font-size: var(--ibf-font-s);
	line-height: 1.4;
	color: var(--ibf-title);
	background: var(--ibf-body);
	border: 1px solid var(--ibf-line);
	border-radius: 999px;
}

.ibf-badge--verified {
	display: inline-block;
	margin: 0 0 var(--ibf-gap);
	color: #14532d;
	background: #e7f5ec;
	border-color: #9fd3b0;
}

.ibf-warning {
	margin: 0.25rem 0 0;
	padding: 0.5rem 0.75rem;
	font-size: var(--ibf-font-s);
	color: #6b3d00;
	background: #fff4e0;
	border-left: 4px solid #e08a00;
	border-radius: 0 var(--ibf-radius) var(--ibf-radius) 0;
}

/* Place header: the map sits at the right of the title (the title is the template's own h1) */
.ibf-place-header {
	margin: 0 0 var(--ibf-gap);
}

.ibf-place-map {
	position: absolute;
	top: 0;
	right: 0;
	width: 120px;
	height: 120px;
	z-index: 1;
}

.ibf-place-map svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The section that holds the title and the header is the map's frame; the title leaves room and keeps the map's height. */
.ct-section-inner-wrap:has(> * .ibf-place-map) {
	position: relative;
}

.ct-section-inner-wrap:has(> * .ibf-place-map) .page-title {
	min-height: 120px;
	margin: 0 0 var(--ibf-gap-s, 0.5rem);
	padding-right: 136px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.ibf-place-header__body {
	display: grid;
	align-content: start;
	gap: var(--ibf-gap-s);
	min-width: 0;
}

.ibf-place-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
}

.ibf-place-meta > div {
	display: flex;
	gap: 0.5rem;
}

.ibf-place-meta dt {
	color: var(--ibf-muted);
}

.ibf-place-meta dd {
	margin: 0;
	font-weight: 600;
	color: var(--ibf-title);
}

.ibf-place-intro,
.ibf-place-text {
	max-width: 720px;
}

.ibf-place-intro > :first-child,
.ibf-place-text > :first-child {
	margin-top: 0;
}

.ibf-place-text {
	margin: var(--ibf-gap-l) 0;
}

/* Timeline */
.ibf-timeline,
.ibf-children,
.ibf-facts,
.ibf-relations {
	margin: 0 0 var(--ibf-gap-l);
}

.ibf-timeline__list {
	display: grid;
	gap: var(--ibf-gap-s);
	margin: 0;
	padding: 0 0 0 1rem;
	list-style: none;
	border-left: 2px solid var(--ibf-line);
}

.ibf-timeline__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.25rem;
	position: relative;
	max-width: 14rem;
}

.ibf-timeline__item::before {
	content: "";
	position: absolute;
	left: calc(-1rem - 6px);
	top: 0.4rem;
	width: 10px;
	height: 10px;
	background: var(--ibf-primary);
	border-radius: 50%;
}

.ibf-timeline__years {
	font-weight: 700;
	color: var(--ibf-title);
}

/* The current product closes the version timeline: green dot, green card border, «today» next to the years. */
.ibf-timeline__item--current::before {
	background: var(--ibf-current);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ibf-current) 25%, transparent);
}

.ibf-timeline__item--current .ibf-flagcard--current {
	border-color: var(--ibf-current);
	border-width: 2px;
}

/* The version being viewed (the current product keeps its green): the dot is ringed in the title colour. */
.ibf-timeline__item--viewing:not(.ibf-timeline__item--current)::before {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ibf-title) 30%, transparent);
}

.ibf-timeline__item--viewing:not(.ibf-timeline__item--current) .ibf-flagcard {
	border-color: var(--ibf-title);
	border-width: 2px;
}

.ibf-timeline__today {
	font-weight: 400;
	color: var(--ibf-current);
}

.ibf-timeline__list--current {
	margin-top: var(--ibf-gap-s);
}

.ibf-timeline__note {
	margin: 0;
	font-size: var(--ibf-font-s);
	color: var(--ibf-muted);
}

.ibf-more {
	margin-top: var(--ibf-gap-s);
}

.ibf-more > summary {
	cursor: pointer;
	display: inline-block;
	padding: 0.5rem 0;
	min-height: 24px;
	font-weight: 600;
	color: var(--ibf-primary);
}

.ibf-more > ol,
.ibf-more > ul {
	margin-top: var(--ibf-gap-s);
}

/* Places inside: a wrapped grid of tiles, each with the map of the child */
.ibf-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.75rem), 1fr));
	gap: var(--ibf-gap-s);
	margin: 0 0 var(--ibf-gap-s);
	padding: 0;
	list-style: none;
}

.ibf-tiles[hidden] {
	display: none;
}

.ibf-tiles > li {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.ibf-tile {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	height: 100%;
	box-sizing: border-box;
	padding: 0.375rem 0.75rem 0.375rem 0.375rem;
	background: var(--ibf-surface);
	border: 1px solid var(--ibf-line);
	border-radius: var(--ibf-radius);
	color: var(--ibf-title);
	text-decoration: none;
}

.ibf-tile--text {
	padding-left: 0.75rem;
}

.ibf-tile__map {
	flex: 0 0 3.5rem;
	width: 3.5rem;
	height: 3.5rem;
}

.ibf-tile__map svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ibf-tile__text {
	display: grid;
	min-width: 0;
}

.ibf-tile__name {
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: break-word;
	hyphens: auto;
}

.ibf-tile__count {
	font-size: var(--ibf-font-s);
	color: var(--ibf-muted);
}

/* The «Types» row: the same tile with the line icon of the group instead of a map. */
.ibf-tile--type {
	padding-left: 0.5rem;
}

.ibf-tile__icon {
	display: block;
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--ibf-icon-ink);
}

/* Line icons (Types row, «Flags without a country»): one ink colour, decorative; the ink is the panel's dark blue. */
.ibf-li {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--ibf-icon-ink);
}

.ibf-tile__map .ibf-li {
	padding: 0.5rem;
	box-sizing: border-box;
}

.ibf-showall {
	margin: 0 0 var(--ibf-gap);
}

.ibf-showall__link,
.ibf-showall__btn {
	display: inline-block;
	min-height: 24px;
	padding: 0.5rem 0;
	font: inherit;
	font-weight: 600;
	color: var(--ibf-primary);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

.ibf-showall__link:focus-visible,
.ibf-showall__btn:focus-visible,
a.ibf-tile:focus-visible {
	outline: 2px solid var(--ibf-primary);
	outline-offset: 2px;
}

/* Flag facts */
.ibf-facts__list {
	display: grid;
	margin: 0;
	background: var(--ibf-surface);
	border: 1px solid var(--ibf-line);
	border-radius: var(--ibf-radius);
}

.ibf-facts__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.125rem;
	padding: 0.625rem var(--ibf-gap);
	border-top: 1px solid var(--ibf-line);
}

.ibf-facts__row--first {
	border-top: 0;
}

/* One column (phones): the two column wrappers vanish and every row takes its place in the original order. */
.ibf-facts__col {
	display: contents;
}

/* The place of a row in the original order (`ibf-o-N`, N = 0..24). */
.ibf-o-0 {
	order: 0;
}

.ibf-o-1 {
	order: 1;
}

.ibf-o-2 {
	order: 2;
}

.ibf-o-3 {
	order: 3;
}

.ibf-o-4 {
	order: 4;
}

.ibf-o-5 {
	order: 5;
}

.ibf-o-6 {
	order: 6;
}

.ibf-o-7 {
	order: 7;
}

.ibf-o-8 {
	order: 8;
}

.ibf-o-9 {
	order: 9;
}

.ibf-o-10 {
	order: 10;
}

.ibf-o-11 {
	order: 11;
}

.ibf-o-12 {
	order: 12;
}

.ibf-o-13 {
	order: 13;
}

.ibf-o-14 {
	order: 14;
}

.ibf-o-15 {
	order: 15;
}

.ibf-o-16 {
	order: 16;
}

.ibf-o-17 {
	order: 17;
}

.ibf-o-18 {
	order: 18;
}

.ibf-o-19 {
	order: 19;
}

.ibf-o-20 {
	order: 20;
}

.ibf-o-21 {
	order: 21;
}

.ibf-o-22 {
	order: 22;
}

.ibf-o-23 {
	order: 23;
}

.ibf-o-24 {
	order: 24;
}


.ibf-facts__list dt {
	color: var(--ibf-muted);
	font-size: var(--ibf-font-s);
}

.ibf-facts__list dd {
	margin: 0;
	color: var(--ibf-title);
	overflow-wrap: anywhere;
}

.ibf-facts__value + .ibf-facts__value::before {
	content: ", ";
}

.ibf-fiav-use {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.ibf-fiav {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--ibf-title);
	line-height: 0;
}

.ibf-fiav__svg {
	display: block;
	width: 48px;
	height: 32px;
}

.ibf-fiav-use__text {
	min-width: 0;
}

.ibf-fiav-use__line {
	display: block;
}

.ibf-fiav-use__label {
	color: var(--ibf-muted);
}

/* Value links: the site red with a dotted underline, no change of size (the same box as plain text). */
.ibf-facts__list dd a {
	color: var(--ibf-primary);
	text-decoration: underline dotted;
	text-underline-offset: 0.2em;
}

.ibf-facts__list dd a:hover,
.ibf-facts__list dd a:focus-visible {
	text-decoration-style: solid;
}

@media (forced-colors: active) {
	.ibf-tile__icon,
	.ibf-li {
		color: CanvasText;
	}

	.ibf-facts__list dd a {
		color: LinkText;
	}
}

.ibf-facts__note,
.ibf-facts__law {
	display: block;
	font-size: var(--ibf-font-s);
	color: var(--ibf-muted);
}

/* Related flags */
.ibf-relgroup {
	margin: 0 0 var(--ibf-gap);
}

.ibf-relgroup__title {
	margin: 0 0 var(--ibf-gap-s);
	font-size: var(--text-m, 1rem);
	color: var(--ibf-title);
}

.ibf-relgroup__family {
	font-weight: 400;
	color: var(--ibf-muted);
}

/* «Easily confused with»: filled orange warning triangle (decorative, no text; a background image so it stays in forced-colors mode). */
.ibf-relgroup--confused .ibf-relgroup__title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ibf-relgroup--confused .ibf-relgroup__title::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 30 28H2Z' fill='%23e08a00' stroke='%23b26a00' stroke-width='1.5' stroke-linejoin='round'/%3E%3Crect x='14.5' y='11' width='3' height='9' rx='1.5' fill='%23fff'/%3E%3Ccircle cx='16' cy='23.5' r='1.8' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ibf-relcards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ibf-gap-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ibf-relcards > li {
	min-width: 0;
}

.ibf-relgroup__more {
	margin: var(--ibf-gap-s) 0 0;
}

@media (min-width: 768px) {
	.ibf-tiles {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
	}

	.ibf-place-map {
		width: 220px;
		height: 220px;
	}

	.ct-section-inner-wrap:has(> * .ibf-place-map) .page-title {
		min-height: 220px;
		padding-right: 240px;
	}

	.ibf-relcards {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 14rem));
	}

	.ibf-facts__row {
		grid-template-columns: 12rem minmax(0, 1fr);
		gap: var(--ibf-gap);
	}

	/* The timeline reads left to right on a wide screen */
	.ibf-timeline__list {
		grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
		gap: var(--ibf-gap) var(--ibf-gap);
		padding: 1rem 0 0;
		border-left: 0;
		border-top: 2px solid var(--ibf-line);
	}

	.ibf-timeline__item {
		max-width: 13rem;
	}

	.ibf-timeline__item::before {
		left: 0;
		top: calc(-1rem - 6px);
	}
}

.ibf-preset-intro {
	max-width: 720px;
	margin: 0 0 var(--space-m, 1.5rem);
	color: var(--text-body, #404040);
}

/* Two columns from tablet width up (a container query was tried: it makes the block's width independent of its content,
   and the template's flex wrappers then shrink it to nothing). */
@media (min-width: 768px) {
	.ibf-facts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ibf-gap);
		align-items: start;
		background: none;
		border: 0;
	}

	.ibf-facts__list--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.ibf-facts__col {
		display: block;
		background: var(--ibf-surface);
		border: 1px solid var(--ibf-line);
		border-radius: var(--ibf-radius);
	}

	.ibf-facts__row {
		grid-template-columns: 8.5rem minmax(0, 1fr);
	}

	.ibf-facts__col > .ibf-facts__row:first-child {
		border-top: 0;
	}
}

/* The flag page puts the facts in the left half of a two-column grid (Oxygen template). The facts block takes the full width
   and what shares the grid (the related flags) sits below it; an empty wrapper adds no gap. */
.ct-div-block:has(> .ct-div-block > .ct-shortcode > .ibf-facts) {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	width: 100%;
}

.ct-div-block:has(> .ct-div-block > .ct-shortcode > .ibf-facts) > .ct-div-block:not(:has(.ibf-facts)):not(:empty) > .ct-shortcode:has(.ibf-relations) {
	margin-top: var(--space-m, 1.5rem);
}

/* A focus move made by script after a tap or a click paints no ring (see frontend.css); after a key press the ring stays. */
html[data-ibf-input="pointer"] body [data-ibf-moved]:focus,
html[data-ibf-input="pointer"] body [data-ibf-moved]:focus-visible {
	outline: none;
}