/*
 * Banca Mea Exchange front end.
 *
 * Colours follow the palette of bancamea.md and are exposed as custom properties
 * so a theme can restyle the widgets without touching this file. Typography is
 * inherited from the theme on purpose.
 */

.bmex {
	--bmex-accent: #1b9b8f;
	--bmex-accent-dark: #15796f;
	--bmex-positive: #00a05e;
	--bmex-negative: #d63638;
	--bmex-ink: #262a33;
	--bmex-muted: #6c6c7f;
	--bmex-line: #e4e4e4;
	--bmex-surface: #ffffff;
	--bmex-surface-alt: #f4f2ed;
	--bmex-highlight: #f0f8f7;
	--bmex-radius: 15px;
	--bmex-radius-sm: 8px;

	color: var(--bmex-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
}

.bmex :focus-visible {
	outline: 2px solid var(--bmex-accent);
	outline-offset: 2px;
}

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

/*
 * The table adapts to the column it was dropped in, so the toolbar stacks in a
 * sidebar even on a wide screen. The container is the root, never .bmex-scroll:
 * containment on the scroller would break the sticky bank column inside it.
 */
.bmex-rates {
	container-type: inline-size;
	container-name: bmex-rates;
	/* Inline-size containment resolves max-content to zero, so a shrink-to-fit
	   parent - a Row block, a flex item - would collapse the widget. */
	width: 100%;
}

.bmex-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.bmex-tabs {
	display: inline-flex;
	border: 1px solid var(--bmex-line);
	border-radius: var(--bmex-radius-sm);
	overflow: hidden;
}

.bmex-tab {
	appearance: none;
	border: 0;
	background: var(--bmex-surface);
	color: var(--bmex-muted);
	padding: 8px 18px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.bmex-tab:hover {
	color: var(--bmex-ink);
	background: var(--bmex-surface-alt);
}

.bmex-tab.is-active,
.bmex-tab.is-active:hover {
	background: var(--bmex-accent);
	color: #fff;
}

/*
 * Currency tabs of the cash view. Seven codes fit a content column on desktop
 * and scroll sideways on a phone: wrapping them inside the rounded, bordered
 * strip would leave a ragged second row.
 */
.bmex-tabs--currency {
	display: flex;
	flex: 1 1 100%;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.bmex-tabs--currency::-webkit-scrollbar {
	display: none;
}

.bmex-tabs--currency .bmex-tab {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: 6px;
	text-align: center;
	white-space: nowrap;
}

.bmex-date-label {
	color: var(--bmex-muted);
	font-size: 13px;
	white-space: nowrap;
}

.bmex-date input,
.bmex-converter select,
.bmex-converter input {
	font: inherit;
	color: inherit;
	padding: 7px 10px;
	border: 1px solid var(--bmex-line);
	border-radius: var(--bmex-radius-sm);
	background: var(--bmex-surface);
}

.bmex-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
/* 	border: 1px solid var(--bmex-line); */
/* 	border-radius: var(--bmex-radius); */
/* 	background: var(--bmex-surface); */
}

.bmex-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.bmex-table th,
.bmex-table td {
	padding: 10px;
	text-align: right;
	border-bottom: 1px solid var(--bmex-line);
	white-space: nowrap;
}

.bmex-table tbody tr:hover td,
.bmex-table tbody tr:hover th {
	background: var(--bmex-highlight);
}

.bmex-table thead th {
	background: var(--bmex-surface-alt);
	color: var(--bmex-ink);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.bmex-table thead tr:last-child th {
	font-size: 11px;
	font-weight: 600;
	color: var(--bmex-muted);
	text-transform: none;
	letter-spacing: 0;
}

/*
 * The bank column stays put while the currencies scroll. The class alone loses to
 * the "th, td" rule above, so the table is part of the selector, and the shadow
 * marks the edge the rest of the table slides under.
 */
.bmex-table .bmex-col-bank {
	position: sticky;
	left: 0;
	z-index: 1;
	text-align: left;
/* 	background: var(--bmex-surface); */
	min-width: 170px;
	box-shadow: 1px 0 0 var(--bmex-line), 6px 0 8px -6px rgba(38, 42, 51, .18);
	padding-left: 14px;
}

.bmex-table thead .bmex-col-bank {
	background: var(--bmex-surface-alt);
}

.bmex-table .bmex-row--official .bmex-col-bank,
.bmex-row--official td {
	background: var(--bmex-surface-alt);
	font-weight: 700;
}

.bmex-bank-logo {
	max-height: 22px;
	width: auto;
	vertical-align: middle;
	margin-right: 8px;
}

.bmex-bank-name {
	vertical-align: middle;
}

.bmex-star {
	color: var(--bmex-accent);
	font-weight: 700;
}

.bmex-official-cell .bmex-value {
	margin-right: 4px;
}

.bmex-trend--up .bmex-arrow { color: var(--bmex-positive); }
.bmex-trend--down .bmex-arrow { color: var(--bmex-negative); }

.bmex-empty {
	text-align: center;
	color: var(--bmex-muted);
	padding: 24px 12px;
}

.bmex-footnote {
	margin: 10px 0 0;
	color: var(--bmex-muted);
	font-size: 13px;
}

.bmex-rates .bmex-more {
	margin-top: 8px;
}

/* compact="1": the same table at sidebar density. */
.bmex-rates--compact {
	font-size: 13px;
}

.bmex-rates--compact .bmex-table th,
.bmex-rates--compact .bmex-table td {
	padding: 6px 8px;
}

.bmex-rates--compact .bmex-table .bmex-col-bank {
	min-width: 110px;
	max-width: 132px;
	padding-left: 10px;
	white-space: normal;
}

.bmex-rates--compact .bmex-table thead th {
	font-size: 11px;
}

.bmex-rates--compact .bmex-bank-logo {
	max-height: 18px;
	margin-right: 6px;
}

.bmex-rates--compact .bmex-toolbar {
	gap: 6px;
	margin-bottom: 8px;
}

.bmex-rates--compact .bmex-tab {
	padding: 4px 8px;
	font-size: 12px;
}

.bmex-rates--compact .bmex-date-label,
.bmex-rates--compact .bmex-footnote {
	font-size: 11px;
}

.bmex-table tbody tr:last-child th,
.bmex-table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * Last visible row while the bank tail is collapsed. Kept in its own rule: a
 * selector list is not forgiving, so an unparsed :has() would drop the
 * :last-child rule above along with it on older Safari and Firefox.
 */
.bmex-table tbody tr:has( + tr[hidden] ) th,
.bmex-table tbody tr:has( + tr[hidden] ) td {
	border-bottom: 0;
}

/* Converter */

.bmex-converter-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.bmex-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bmex-muted);
}

.bmex-amount-group {
	display: flex;
	gap: 6px;
}

.bmex-amount-group input {
	flex: 1 1 auto;
	min-width: 0;
}

.bmex-converter-table td:first-child,
.bmex-converter-table th:first-child {
	text-align: left;
}

.bmex-converter-table .bmex-best {
	color: var(--bmex-positive);
	font-weight: 700;
	background: var(--bmex-highlight);
}

/* National bank widget */

.bmex-bnm {
	border: 1px solid var(--bmex-line);
	border-radius: var(--bmex-radius);
	padding: 12px 14px;
	background: var(--bmex-surface);
}

.bmex-bnm-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
}

.bmex-bnm-title {
	font-weight: 700;
	color: var(--bmex-accent);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .04em;
}

.bmex-bnm-date {
	color: var(--bmex-muted);
	font-size: 12px;
}

.bmex-bnm-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.bmex-bnm--stacked .bmex-bnm-list {
	flex-direction: column;
	gap: 6px;
}

.bmex-bnm-item {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}

.bmex-bnm-code {
	font-weight: 700;
	color: var(--bmex-muted);
	font-size: 12px;
}

.bmex-bnm-item .bmex-value {
	font-weight: 700;
}

/* National bank converter */

/*
 * The widget sits in a sidebar as often as in a content column, so it sizes
 * itself off its parent rather than off the viewport: the root only measures,
 * the card below carries the look.
 *
 * Both classes, so the cap outranks the block theme's content width.
 */
.bmex.bmex-bnm-converter {
	/* A row is a label, a short amount and a rate; stretched across a full content
	   column the inputs turn into empty banners. */
	width: 100%;
	max-width: 420px;
	container-type: inline-size;
	container-name: bmex-bnm;
}

.bmex-bnm-converter-card {
	/*border: 1px solid var(--bmex-line);*/
	/*border-radius: var(--bmex-radius);*/
	padding: 16px 18px;
	/*background: var(--bmex-surface);*/
	font-size: 14px;
}

.bmex-bnm-converter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bmex-bnm-converter-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(72px, auto) 14px;
	align-items: center;
	gap: 12px;
}

.bmex-bnm-converter-code {
	font-weight: 700;
}

/* A row is a grid, which outranks the display:none the hidden attribute relies on. */
.bmex-bnm-converter-row[hidden] {
	display: none;
}

.bmex-bnm-converter-row input {
	width: 100%;
	font: inherit;
	font-weight: 600;
	color: inherit;
	padding: 10px 12px;
	border: 1px solid var(--bmex-line);
	border-radius: var(--bmex-radius-sm);
	background: var(--bmex-surface-alt);
	font-variant-numeric: tabular-nums;
}

.bmex-bnm-converter-row input:focus {
	background: var(--bmex-surface);
}

.bmex-bnm-converter-rate {
	color: var(--bmex-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bmex-bnm-converter .bmex-arrow {
	font-size: 11px;
	line-height: 1;
}

/* Disclosure button of both widgets: reveals the rows past the shortcode's limit. */
.bmex-more {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--bmex-muted);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	text-align: center;
}

.bmex-more:hover {
	color: inherit;
}

/*
 * A pointer click leaves no ring, the keyboard keeps one. Focus itself stays on
 * the button so assistive tech announces the aria-expanded flip.
 */
.bmex-more:focus:not(:focus-visible) {
	outline: none;
}

.bmex-bnm-converter-foot {
	margin: 14px 0 0;
	color: var(--bmex-muted);
	font-size: 12px;
}
.bmex-more {
	color: var(--bmex-accent);
}

.bmex-more:hover {
	color: var(--bmex-accent-dark);
}

/* Narrow parent, a sidebar column for instance: tighten the card, not the page. */
@container bmex-bnm (max-width: 360px) {
	.bmex-bnm-converter-card {
		padding: 12px 14px;
		font-size: 13px;
	}

	.bmex-bnm-converter-list {
		gap: 8px;
	}

	.bmex-bnm-converter-row {
		grid-template-columns: 40px minmax(0, 1fr) minmax(58px, auto) 10px;
		gap: 8px;
	}

	.bmex-bnm-converter-row input {
		padding: 7px 9px;
	}

	.bmex-bnm-converter .bmex-more {
		margin-top: 8px;
		font-size: 11px;
	}

	.bmex-bnm-converter-foot {
		margin-top: 10px;
		font-size: 11px;
	}
}

/*
 * Below this the four columns stop fitting and the amount field clips its own
 * value, so the rate gives up its minimum width and the paddings shrink again.
 */
@container bmex-bnm (max-width: 260px) {
	.bmex-bnm-converter-row {
		grid-template-columns: 34px minmax(0, 1fr) minmax(0, auto) 8px;
		gap: 5px;
	}

	.bmex-bnm-converter-row input {
		padding: 5px 6px;
	}

	.bmex-bnm-converter-rate {
		font-size: 11px;
	}
}

.bmex-is-loading {
	opacity: .55;
	transition: opacity .15s ease;
}


@media (max-width: 600px) {
	.bmex-table th,
	.bmex-table td { padding: 8px; }
	/*
	 * The shared "th, td" rule sets nowrap, so the longest bank name dictated the
	 * column width and min-width never bit: 200px of a 375px screen went to names
	 * and the rates were pushed off view. Let it wrap and cap it instead.
	 */
	.bmex-table .bmex-col-bank {
		min-width: 110px;
		max-width: 132px;
		padding-left: 10px;
		white-space: normal;
	}
	.bmex { font-size: 14px; }
}

/* Tabs and date side by side leave the tab strip a few pixels wide. */
@container bmex-rates (max-width: 420px) {
	.bmex-rates--tabs .bmex-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		/*
		 * A wrapping column stretches its children to the widest item on the line
		 * instead of to the toolbar, so seven codes would push the strip past the
		 * column rather than scroll inside it.
		 */
		flex-wrap: nowrap;
	}

	.bmex-rates--tabs .bmex-date-label {
		text-align: right;
	}
}

.bmex-polls{
/* 	padding: 18px 0; */
	background: transparent;
	border-top: 1px solid #deddd8;
	border-bottom: 1px solid #deddd8;
	border-radius: 0;
	color: #414157;
}