/**
 * The switcher, styled to sit in the theme's dark top bar exactly where the
 * YayCurrency control used to be — same height, so the top bar's row alignment is
 * unchanged.
 */

.tr-cur {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.tr-topbar .tr-cur__select {
	min-height: 30px;
	padding: .15rem .5rem;
	font: inherit;
	font-size: .82rem;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	max-width: 100%;
}

/* The open list is painted by the OS, so it needs its own colours. */
.tr-topbar .tr-cur__select option {
	color: #14224e;
	background: #fff;
}

.tr-topbar .tr-cur__select:focus {
	outline: 2px solid rgba(255, 255, 255, .55);
	outline-offset: 1px;
}

.tr-topbar .tr-cur__go {
	min-height: 30px;
	padding: .15rem .6rem;
	font: inherit;
	font-size: .82rem;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 6px;
	cursor: pointer;
}

/**
 * Checkout notice: tells the customer which currency the payment is taken in.
 *
 * Theme tokens are used where they exist, with plain fallbacks so the banner still
 * reads correctly if the theme is ever swapped for one that does not define them.
 * Built in the browser (assets/js/blocks-price.js) because the amount has to follow
 * the live order total.
 */
.tr-cur-notice {
	background: var(--tr-accent-soft, #f5fadc);
	border: 1px solid var(--tr-accent, #7fb2f3);
	border-left-width: 4px;
	border-radius: var(--tr-radius, 10px);
	color: var(--tr-text, #111a2e);
	font-size: .95rem;
	line-height: 1.6;
	margin: 0 0 1.75rem;
	padding: .9rem 1.15rem;
}

.tr-cur-notice strong {
	font-weight: 700;
}