/*
 * Styling for the comparison on the website.
 *
 * Deliberately modest and self-contained: everything is prefixed with .esim-,
 * nothing reaches outside the shortcode, and no element of the theme is
 * overwritten. It therefore looks the same in every theme and survives a
 * theme update. Sizes are in rem, so it follows the font size of the site.
 */

.esim-compare {
	--esim-line: #e2e5e9;
	--esim-ink: #1f2933;
	--esim-muted: #5b6875;
	--esim-accent: #1d6fa5;
	--esim-accent-ink: #ffffff;
	--esim-soft: #f6f8fa;
	--esim-stripe: #fafbfc;
	--esim-star: #e8a33d;
	--esim-radius: 10px;

	color: var(--esim-ink);
	font-size: 1rem;
	line-height: 1.5;
	margin: 1.5rem 0;

	/*
	 * The tool lives in the article column and must never grow past it. The
	 * two lines below are what keep it there even when a theme puts the
	 * column in a flex or grid container, where a child may otherwise refuse
	 * to shrink below its content and lap over the sidebar.
	 */
	max-width: 100%;
	min-width: 0;
}

.esim-compare *,
.esim-compare *::before,
.esim-compare *::after {
	box-sizing: border-box;
}

/*
 * Looks like a heading, is not one: see compare.php. Inherits the site's
 * font so it sits in the page rather than on it.
 */
.esim-compare__heading {
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- Form */

.esim-form {
	background: var(--esim-soft);
	border: 1px solid var(--esim-line);
	border-radius: var(--esim-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem;
}

.esim-form__field {
	flex: 1 1 14rem;
	margin: 0;
}

/* The data question takes a row of its own: six options need the width. */
.esim-form__field--wide {
	border: 0;
	flex: 1 1 100%;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.esim-choice__legend {
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	padding: 0;
}

.esim-choice__options {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.esim-choice__option {
	display: block;
	margin: 0;
	position: relative;
}

/*
 * The radio button itself is taken out of the picture but not out of the
 * page: it keeps working with the keyboard and is what a screen reader
 * announces. The box beside it is what is seen.
 */
.esim-choice__option input {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.esim-choice__box {
	background: #fff;
	border: 1px solid var(--esim-line);
	border-radius: 8px;
	cursor: pointer;
	display: block;
	padding: 0.55rem 0.7rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.esim-choice__name {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
}

.esim-choice__hint {
	color: var(--esim-muted);
	display: block;
	font-size: 0.78rem;
	line-height: 1.3;
	margin-top: 0.1rem;
}

.esim-choice__option input:checked + .esim-choice__box {
	background: var(--esim-soft);
	background: color-mix(in srgb, var(--esim-accent) 6%, #fff);
	border-color: var(--esim-accent);
	box-shadow: 0 0 0 1px var(--esim-accent);
}

/* Keyboard focus has to be visible even though the control itself is not. */
.esim-choice__option input:focus-visible + .esim-choice__box {
	outline: 2px solid var(--esim-accent);
	outline-offset: 2px;
}

@media (max-width: 40rem) {

	.esim-choice__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.esim-form__field label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.esim-form select,
.esim-form input[type="number"],
.esim-filter select {
	background: #fff;
	border: 1px solid var(--esim-line);
	border-radius: 6px;
	color: inherit;
	font: inherit;
	max-width: 100%;
	padding: 0.5rem;
	width: 100%;
}

.esim-form__submit {
	align-self: flex-end;
	flex: 0 0 auto;
	margin: 0;
}

.esim-form button,
.esim-filter button {
	background: var(--esim-accent);
	border: 0;
	border-radius: 6px;
	color: var(--esim-accent-ink);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0.6rem 1.2rem;
}

.esim-form button:hover,
.esim-filter button:hover {
	filter: brightness(0.92);
}

/* ------------------------------------------------------- Three results */

.esim-intro,
.esim-empty {
	margin: 1.25rem 0;
}

.esim-picks {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin: 1.25rem 0;
}

/*
 * Three boxes belong in one row, even when the content column is narrow:
 * auto-fit would put two of them side by side and leave the third alone
 * under half an empty row. Below 48rem of screen the media query at the end
 * of this file puts every box under the next one anyway, which is where the
 * narrow column is genuinely better off.
 */
@media (min-width: 48em) {

	.esim-picks--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.esim-picks--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * A box must never be wider than its share of the row. Without this, a long
 * tariff name or a promotion code without spaces stretches the grid column
 * and pushes the whole tool over the sidebar.
 */
.esim-pick {
	min-width: 0;
	overflow-wrap: anywhere;
}

.esim-pick {
	border: 1px solid var(--esim-line);
	border-radius: var(--esim-radius);
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.esim-pick--best {
	border-color: var(--esim-accent);
	box-shadow: 0 0 0 1px var(--esim-accent);
}

.esim-pick__title {
	align-items: center;
	display: flex;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: 0.4rem;
	letter-spacing: 0.02em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.esim-pick__mark {
	color: var(--esim-accent);
	font-size: 1.1rem;
}

.esim-pick__provider {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

.esim-pick__facts {
	color: var(--esim-muted);
	margin: 0.25rem 0 0.5rem;
}

.esim-pick__score {
	margin: 0 0 0.5rem;
}

.esim-pick__points {
	font-size: 1.5rem;
	font-weight: 700;
}

.esim-pick__why {
	flex: 1 1 auto;
	font-size: 0.9375rem;
	margin: 0 0 1rem;
}

.esim-pick__more {
	margin: 0.75rem 0 0;
}

.esim-pick__more a,
.esim-showall a {
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------- Button */

.esim-button {
	background: var(--esim-accent);
	border-radius: 6px;
	color: var(--esim-accent-ink);
	display: inline-block;
	font-weight: 600;
	padding: 0.6rem 1.2rem;
	text-align: center;
	text-decoration: none;
}

.esim-button:hover,
.esim-button:focus {
	color: var(--esim-accent-ink);
	filter: brightness(0.92);
	text-decoration: none;
}

.esim-button--small {
	font-size: 0.875rem;
	padding: 0.4rem 0.7rem;
}

/*
 * The step from the three winners to the whole list. It used to be a plain
 * text link and was overlooked; as a button it reads as the next thing to do.
 */
.esim-button--wide {
	font-size: 1.0625rem;
	padding: 0.8rem 1.6rem;
}

/* -------------------------------------------------------- Full table */

.esim-showall {
	margin: 1.5rem 0;
}

.esim-showall--main {
	text-align: center;
}

.esim-showall__hint {
	color: var(--esim-muted);
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.4rem;
}

/*
 * Deliberately not headings: an <h3> inside the tool lands in the article's
 * table of contents and is styled by the theme's heading rules. These two
 * classes carry what a heading looked like, in the body font.
 */
.esim-all__title {
	font-family: inherit;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 1.5rem 0 0.75rem;
}

.esim-filter {
	align-items: end;
	background: var(--esim-soft);
	border: 1px solid var(--esim-line);
	border-radius: var(--esim-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.75rem;
}

.esim-filter label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
}

.esim-filter__check {
	align-self: center;
	font-weight: 400;
}

.esim-table {
	border-collapse: collapse;
	width: 100%;
}

/*
 * The last line of defence around every table. The rules further down keep
 * the content narrow enough that this hardly ever comes into play — but a
 * tariff name without spaces, a long discount code or a very narrow column
 * can always add up to more than the article column has. Then the table
 * scrolls inside its own box, and nothing is pushed over the sidebar.
 */
.esim-tablewrap {
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Six columns, and every one of them pays twice for its padding. Going from
 * 0.5rem to 0.4rem on each side gives the table about 20 pixels back, which
 * in a narrow article column is the difference between fitting and scrolling.
 * Vertically everything stays as it was.
 */
.esim-table th,
.esim-table td {
	border-bottom: 1px solid var(--esim-line);
	padding: 0.6rem 0.4rem;
	text-align: left;
	vertical-align: middle;
}

/*
 * The headings are set in capitals, and capitals are wide. In three of the
 * six columns the heading, not the content, is what decides the width — so a
 * slightly smaller size and less spacing between the letters buys room for
 * the figures underneath without changing how the table reads.
 */
.esim-table thead th {
	font-size: 0.75rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/*
 * The provider column carries three or four lines and takes what is left; the
 * four narrow columns keep their numbers on one line each. Without this the
 * long name of the score column squeezes the price until "13,90 €" breaks in
 * two.
 */
/*
 * The data column carries the volume and, underneath, the provider's special
 * feature — "15 GB inklusive Always On" reads as one statement, which is why
 * it belongs here rather than crammed into the provider cell.
 */
.esim-table__plans {
	width: 10rem;
}

.esim-table__plans .esim-highlight {
	display: inline-flex;
	margin-top: 0.3rem;
}

.esim-table__days {
	white-space: nowrap;
	width: 6rem;
}

/*
 * No figure ever breaks in the middle — but the cell as a whole may break
 * between them. "19,55 € (22,00 USD)" on one unbreakable line was one of the
 * things that made the table wider than the article column; now the original
 * price drops below the euro figure when the column is tight.
 */
.esim-table__price {
	white-space: normal;
	width: 10rem;
}

.esim-table__price .esim-price__eur,
.esim-table__price .esim-price__original {
	white-space: nowrap;
}

/* On its own line under the figure, and it may use two lines of its own. */
.esim-table__price .esim-promo {
	display: flex;
	max-width: 100%;
	white-space: normal;
	width: fit-content;
}

.esim-promo__code {
	white-space: nowrap;
}

/* The provider's own feature behaves the same way in the narrow data cell. */
.esim-table__plans .esim-highlight {
	max-width: 100%;
	white-space: normal;
}

/*
 * Nothing in a cell may be wider than the cell — but a word is only broken
 * when it genuinely does not fit. "anywhere" would also break "Superalink"
 * into two lines in a narrow column, which looks like a fault rather than a
 * layout.
 */
.esim-table > tbody > tr > td {
	overflow-wrap: break-word;
}

/*
 * The one exception: a tariff name is long, comes from the provider and is
 * full of identifiers without spaces. It may break anywhere.
 */
.esim-table__plan {
	overflow-wrap: anywhere;
}

/* A button's label never breaks: half a word on a button reads as broken. */
.esim-table .esim-button {
	white-space: nowrap;
}

.esim-table__score {
	position: relative;
	width: 10rem;
}

.esim-table__go {
	width: 7rem;
}

.esim-table__provider {
	display: block;
	font-weight: 600;
}

.esim-table__plan {
	color: var(--esim-muted);
	display: block;
	font-size: 0.8125rem;
}

.esim-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 1rem 0;
}

.esim-pages a,
.esim-pages__current {
	border: 1px solid var(--esim-line);
	border-radius: 6px;
	display: inline-block;
	min-width: 2rem;
	padding: 0.3rem 0.5rem;
	text-align: center;
	text-decoration: none;
}

.esim-pages__current {
	background: var(--esim-accent);
	color: var(--esim-accent-ink);
	font-weight: 700;
}

/* ------------------------------------------------------------- Footer */

.esim-disclosure,
.esim-stand {
	color: var(--esim-muted);
	font-size: 0.8125rem;
	margin: 1rem 0 0;
}

.esim-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ------------------------------------------------------------ Phones */

@media (max-width: 40rem) {

	/*
	 * Every rule here uses the child combinator on purpose. A table inside a
	 * cell of this table — the points breakdown a row can open — is a table
	 * of its own and must not be turned into stacked cards as well.
	 */
	.esim-table > thead {
		display: none;
	}

	.esim-table,
	.esim-table > tbody,
	.esim-table > tbody > tr,
	.esim-table > tbody > tr > td {
		display: block;
		width: 100%;
	}

	.esim-table > tbody > tr {
		border: 1px solid var(--esim-line);
		border-radius: var(--esim-radius);
		margin-bottom: 0.75rem;
		padding: 0.5rem;
	}

	.esim-table > tbody > tr > td {
		border: 0;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		padding: 0.3rem 0.2rem;
	}

	.esim-table > tbody > tr > td::before {
		color: var(--esim-muted);
		content: attr(data-label);
		font-size: 0.8125rem;
		font-weight: 600;
	}

	.esim-table > tbody > tr > td[data-label=""] {
		justify-content: stretch;
	}

	/*
	 * On a phone every cell is one line of "label -- value". The provider
	 * cell holds three pieces of information, so they are stacked and pushed
	 * to the right edge, in line with the numbers in the rows below.
	 */
	.esim-table__who {
		align-items: flex-end;
		display: flex;
		flex-direction: column;
		text-align: right;
	}

	/* The logo and the name line up with everything else on the right. */
	.esim-table__provider {
		justify-content: flex-end;
	}

	.esim-table > tbody > tr > td[data-label=""] .esim-button {
		width: 100%;
	}

	/* The panel may be wider than the cell it hangs from, but not than the screen. */
	.esim-why__panel {
		right: 0;
		width: min(17rem, calc(100vw - 3rem));
	}

	.esim-form__submit,
	.esim-form__field {
		flex: 1 1 100%;
	}

	.esim-form button {
		width: 100%;
	}
}


/* ------------------------------------------------------------- Stars */

.esim-stars {
	display: inline-block;
	position: relative;
	white-space: nowrap;
}

.esim-stars__empty {
	color: #d6dade;
	letter-spacing: 0.05em;
}

.esim-stars__fill {
	color: var(--esim-star);
	left: 0;
	letter-spacing: 0.05em;
	overflow: hidden;
	position: absolute;
	top: 0;
	white-space: nowrap;
}

.esim-stars__value {
	color: var(--esim-muted);
	font-size: 0.8125rem;
	margin-left: 0.35rem;
}

/* ------------------------------------------------------------- Logos */

/*
 * Providers upload logos at every size imaginable: a 600-pixel wordmark, a
 * square icon, a tall badge. The height is what is capped, because the height
 * is what decides how tall a table row becomes — and the width then follows
 * the proportions, up to five times the height so a long wordmark stays
 * readable instead of shrinking to a smudge. object-fit keeps the shape
 * whatever arrives, and flex-shrink is off so the logo is never squashed
 * while the name beside it wraps.
 */
.esim-logo {
	border-radius: 4px;
	flex: 0 0 auto;
	height: auto;
	max-height: var(--esim-logo-max, 24px);
	max-width: calc(var(--esim-logo-max, 24px) * 5);
	object-fit: contain;
	vertical-align: middle;
	width: auto;
}

.esim-pick__provider .esim-logo {
	max-height: calc(var(--esim-logo-max, 24px) * 1.3);
	max-width: calc(var(--esim-logo-max, 24px) * 6);
}

.esim-pick__provider {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	min-width: 0;
}

.esim-pick__provider > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.esim-pick__rating {
	margin: 0 0 0.25rem;
}

/* ------------------------------------------- Price in two currencies */

/*
 * The euro figure is what gets compared; the provider's own currency is the
 * honest footnote saying what will actually be charged. Set back, not hidden.
 */
.esim-price__original {
	font-size: 0.8125em;
	font-style: italic;
	opacity: 0.75;
	white-space: nowrap;
}

/* -------------------------------------------------- Special feature */

.esim-highlight {
	align-items: baseline;

	/*
	 * Plain values first, the tinted ones after: a browser that does not know
	 * color-mix simply keeps the first pair instead of losing the box.
	 */
	background: var(--esim-soft);
	background: color-mix(in srgb, var(--esim-accent) 8%, #fff);
	border: 1px solid var(--esim-line);
	border-color: color-mix(in srgb, var(--esim-accent) 25%, #fff);
	border-radius: 8px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	line-height: 1.35;
	padding: 0.3rem 0.7rem;
}

.esim-highlight__mark {
	color: var(--esim-accent);
}

.esim-highlight__title {
	font-weight: 700;
}

.esim-highlight__text {
	color: var(--esim-muted);
}

.esim-highlight--compact {
	font-size: 0.8125rem;
	margin-top: 0.25rem;
	padding: 0.15rem 0.55rem;
}

/* ---------------------------------------------------- Discount code */

/*
 * Green, and only here: a discount is the one thing on the page that is
 * money off, and it is the only green element in the comparison. The accent
 * colour stays with the site's own branding, the blue box stays with the
 * provider's special feature, and nothing else competes with either.
 */
.esim-promo {
	align-items: baseline;
	background: #eef8f0;
	border: 1px solid #bfe3c8;
	border-radius: 8px;
	color: #1d5b2c;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	line-height: 1.35;
	padding: 0.3rem 0.7rem;
}

.esim-promo__code {
	background: #fff;
	border: 1px dashed #8cc79b;
	border-radius: 4px;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.05rem 0.4rem;
}

.esim-promo__text {
	color: #2f6b3d;
}

.esim-promo--compact {
	display: inline-flex;
	font-size: 0.8125rem;
	margin-top: 0.3rem;
	padding: 0.15rem 0.55rem;
}

/*
 * The spacing between the letters makes a code easier to read out loud, and
 * in the table it is what decides the width of the whole price column. The
 * code stays legible without it; the box in the winner card keeps it.
 */
.esim-promo--compact .esim-promo__code {
	letter-spacing: 0.01em;
}

.esim-pick__highlight,
.esim-pick__promo {
	margin: 0 0 0.5rem;
}

/* -------------------------------------------------- Paid placement */

.esim-pick--sponsored {
	background: var(--esim-soft);
}

.esim-pick__ad {
	background: #4a5560;
	border-radius: 4px;
	color: #fff;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	margin-left: auto;
	padding: 0.1rem 0.4rem;
}

/* ------------------------------------------- Score, broken down */

.esim-why {
	border-top: 1px solid var(--esim-line);
	margin: 0 0 1rem;
	padding-top: 0.6rem;
}

.esim-why > summary {
	cursor: pointer;
	font-size: 0.875rem;
	list-style: revert;
}

.esim-why__points {
	font-size: 1.25rem;
	font-weight: 700;
}

.esim-why__table {
	border-collapse: collapse;
	font-size: 0.8125rem;
	margin: 0.5rem 0;
	table-layout: fixed;
	width: 100%;
}

.esim-why__table th {
	width: 60%;
}

.esim-why__table th,
.esim-why__table td {
	border-bottom: 1px solid var(--esim-line);
	font-weight: 400;
	padding: 0.25rem 0;
	text-align: left;
}

.esim-why__table td {
	text-align: right;
}

.esim-why__table tfoot th,
.esim-why__table tfoot td {
	border-bottom: 0;
	font-weight: 700;
}

.esim-why__unknown {
	color: var(--esim-muted);
}

/* ------------------------------------- Regional plans, country list unchecked */

.esim-maybe {
	border-top: 1px solid var(--esim-line);
	margin-top: 2rem;
	padding-top: 1.25rem;
}

.esim-maybe__title {
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.esim-maybe__lead {
	color: var(--esim-muted);
	font-size: 0.875rem;
	margin: 0 0 1rem;
}

.esim-maybe__lead strong {
	color: var(--esim-ink);
}

.esim-table--maybe {
	opacity: 0.92;
}

.esim-checknote {
	color: var(--esim-muted);
	font-size: 0.875rem;
	font-style: italic;
	margin: 1.25rem 0 0;
}

.esim-checknote {
	color: var(--esim-muted);
	font-size: 0.875rem;
	font-style: italic;
	margin: 1.25rem 0 0;
}

.esim-folded {
	color: var(--esim-muted);
	font-size: 0.8125rem;
	margin: 0.75rem 0 0;
}

.esim-why__hint {
	color: var(--esim-muted);
	display: block;
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.3;
}

.esim-why__note {
	color: var(--esim-muted);
	font-size: 0.75rem;
	margin: 0.25rem 0 0;
}

/*
 * The same breakdown from a table row. In the row there is no space for it,
 * so the number itself is the handle and the detail opens in a small panel
 * above the rows below. The cell is the positioning anchor, which is why
 * .esim-table__score carries position: relative.
 *
 * No JavaScript: <details> does the opening and closing by itself, which
 * means it also works when a theme or a plugin breaks the page's scripts.
 */
.esim-why--row {
	border-top: 0;
	display: inline-block;
	margin: 0;
	padding-top: 0;
}

.esim-why--row > summary {
	border-bottom: 1px dotted var(--esim-muted);
	font-size: inherit;
	font-weight: 700;
	list-style: none;
}

.esim-why--row > summary::-webkit-details-marker {
	display: none;
}

.esim-why--row > summary::marker {
	content: "";
}

/*
 * A number on its own does not look clickable. The small triangle says it
 * is, in every language, and turns when the panel is open.
 */
.esim-why--row > summary::after {
	content: " \25BE";
	font-size: 0.75em;
	opacity: 0.65;
}

.esim-why--row[open] > summary::after {
	content: " \25B4";
}

.esim-why--row[open] > summary {
	border-bottom-color: var(--esim-accent);
}

.esim-why__panel {
	background: #fff;
	border: 1px solid var(--esim-line);
	border-radius: var(--esim-radius);
	box-shadow: 0 6px 18px rgba(31, 41, 51, 0.16);
	max-width: 80vw;
	padding: 0.6rem 0.8rem 0.5rem;
	position: absolute;
	right: 0.2rem;
	text-align: left;
	top: calc(100% - 0.2rem);
	white-space: normal;
	width: 17rem;
	z-index: 30;
}

.esim-why__panel .esim-why__table {
	margin-top: 0;
}

/* ------------------------------------------------- Table polish */

.esim-table tbody tr:nth-child(odd) {
	background: var(--esim-stripe);
}

.esim-table tbody tr:hover {
	background: #eef3f7;
}

/*
 * min-width: 0 is what stops a long provider name from pushing the cell wider
 * than its column; without it a flex item refuses to shrink below its content
 * and the text runs out of the table.
 */
.esim-table__provider {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-weight: 600;
	gap: 0.4rem;
	min-width: 0;
}

.esim-table__provider > span {
	min-width: 0;
	overflow-wrap: break-word;
}

.esim-table__who {
	display: block;
	min-width: 0;
}

.esim-table__rating {
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.15rem;
}

.esim-table__note {
	font-size: 0.875em;
	text-decoration: none;
	vertical-align: super;
}

.esim-all__back {
	margin: 0 0 0.75rem;
}

/* ------------------------------------------- Advertising row */

/*
 * One paid row inside the list, as comparison sites have always done it. It
 * carries its own label, sits in no sort order and counts in no number.
 */
/*
 * The cell itself stays a plain table cell — a cell set to display:flex drops
 * out of the table layout and its colspan stops reaching across the columns.
 * The arrangement therefore happens one level further in.
 */
.esim-adrow > td {
	background: var(--esim-soft);
	padding: 0.8rem 0.6rem;
}

.esim-adrow__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.esim-adrow__tag {
	background: #4a5560;
	border-radius: 4px;
	color: #fff;
	flex: 0 0 auto;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	padding: 0.1rem 0.4rem;
	text-transform: uppercase;
}

.esim-adrow__body {
	display: flex;
	flex: 1 1 14rem;
	flex-wrap: wrap;
	gap: 0.15rem 0.5rem;
	min-width: 0;
}

.esim-adrow__title {
	flex: 0 0 auto;
}

.esim-adrow__text {
	color: var(--esim-muted);
}

.esim-adrow__code code {
	background: #fff;
	border: 1px dashed var(--esim-line);
	border-radius: 4px;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.05rem 0.4rem;
}

.esim-adrow__button {
	flex: 0 0 auto;
	margin-left: auto;
}

/* The advertising row is never striped and never highlighted on hover:
   it must not look like one of the results. */
.esim-table tbody tr.esim-adrow,
.esim-table tbody tr.esim-adrow:hover {
	background: transparent;
}

/* ------------------------------------- Notes under the table */

.esim-scorenote,
.esim-hint {
	background: var(--esim-soft);
	border-left: 3px solid var(--esim-accent);
	border-radius: 0 6px 6px 0;
	color: var(--esim-muted);
	font-size: 0.875rem;
	margin: 1rem 0;
	padding: 0.7rem 0.9rem;
}

.esim-scorenote strong {
	color: var(--esim-ink);
}

@media (max-width: 40rem) {

	.esim-table tbody tr:nth-child(odd) {
		background: transparent;
	}

	.esim-table tbody tr:hover {
		background: transparent;
	}

	/* The advertising row keeps its own card shape on a phone. */
	.esim-adrow > td {
		background: transparent;
		display: block;
	}

	.esim-adrow > td::before {
		content: none;
	}

	.esim-adrow__inner {
		display: block;
	}

	.esim-adrow__body {
		display: block;
		margin: 0.4rem 0 0.6rem;
	}

	.esim-adrow__text,
	.esim-adrow__code {
		display: block;
		margin-top: 0.2rem;
	}

	.esim-adrow__button {
		display: block;
		margin-left: 0;
		width: 100%;
	}
}

/* --------------------------------------- A note for the editor only */

/*
 * A typo in a shortcode is an editing mistake. Readers never see this; whoever
 * can edit the article does, and it should be impossible to miss.
 */
.esim-editor-note {
	background: #fff6e5;
	border-left: 3px solid #e8a33d;
	border-radius: 0 6px 6px 0;
	color: #5b4a24;
	font-size: 0.9375rem;
	margin: 1rem 0;
	padding: 0.7rem 0.9rem;
}

/* ------------------------------------------- The list in an article */

.esim-compare--list {
	margin: 1.5rem 0;
}

.esim-compare--list .esim-all__title {
	margin-top: 0;
}