/**
 * [ibariki_currency_switcher] + the optional floating switcher (see
 * Ibariki_Currency::render_switcher()). Loaded site-wide while
 * multi-currency is enabled, so kept deliberately small and self-contained
 * — it can't rely on calculator.css's custom properties, which only load on
 * calculator pages. Every rule is scoped under .ibariki-currency-switcher
 * so the theme's own button/list/link styles don't leak in.
 */
.ibariki-currency-switcher {
	--ibariki-cs-accent: #1a7f37;
	--ibariki-cs-text: #1a1a1a;
	--ibariki-cs-muted: #6b7280;
	--ibariki-cs-border: rgba(0, 0, 0, 0.14);
	--ibariki-cs-bg: #fff;
	--ibariki-cs-hover: #f1f7f3;

	position: relative;
	display: inline-block;
	font-size: 14px;
	line-height: 1.2;
	color: var(--ibariki-cs-text);
}

.ibariki-currency-switcher .ibariki-currency-switcher__dropdown {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The button showing the current currency. */
.ibariki-currency-switcher .ibariki-currency-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--ibariki-cs-border);
	border-radius: 999px;
	background: var(--ibariki-cs-bg);
	color: var(--ibariki-cs-text);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ibariki-currency-switcher .ibariki-currency-switcher__toggle::-webkit-details-marker,
.ibariki-currency-switcher .ibariki-currency-switcher__toggle::marker {
	display: none;
	content: '';
}

.ibariki-currency-switcher .ibariki-currency-switcher__toggle:hover,
.ibariki-currency-switcher .ibariki-currency-switcher__dropdown[open] > .ibariki-currency-switcher__toggle {
	border-color: var(--ibariki-cs-accent);
}

.ibariki-currency-switcher .ibariki-currency-switcher__toggle:focus-visible {
	outline: 2px solid var(--ibariki-cs-accent);
	outline-offset: 2px;
}

.ibariki-currency-switcher .ibariki-currency-switcher__icon {
	flex: none;
	color: var(--ibariki-cs-accent);
}

.ibariki-currency-switcher .ibariki-currency-switcher__caret {
	flex: none;
	color: var(--ibariki-cs-muted);
	transition: transform 0.15s ease;
}

.ibariki-currency-switcher .ibariki-currency-switcher__dropdown[open] .ibariki-currency-switcher__caret {
	transform: rotate(180deg);
}

/* The list of currencies — opens below the button by default. */
.ibariki-currency-switcher .ibariki-currency-switcher__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 10;
	min-width: 220px;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--ibariki-cs-border);
	border-radius: 12px;
	background: var(--ibariki-cs-bg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.ibariki-currency-switcher .ibariki-currency-switcher__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ibariki-currency-switcher .ibariki-currency-switcher__option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 34px 8px 12px;
	border-radius: 8px;
	color: var(--ibariki-cs-text);
	text-decoration: none;
}

.ibariki-currency-switcher .ibariki-currency-switcher__option:hover,
.ibariki-currency-switcher .ibariki-currency-switcher__option:focus-visible {
	background: var(--ibariki-cs-hover);
	color: var(--ibariki-cs-text);
	outline: none;
}

.ibariki-currency-switcher .ibariki-currency-switcher__option-code {
	font-weight: 600;
}

.ibariki-currency-switcher .ibariki-currency-switcher__option-name {
	font-size: 12px;
	color: var(--ibariki-cs-muted);
}

.ibariki-currency-switcher .ibariki-currency-switcher__option.is-current {
	color: var(--ibariki-cs-accent);
}

.ibariki-currency-switcher .ibariki-currency-switcher__option.is-current::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 6px;
	height: 11px;
	margin-top: -7px;
	border: solid var(--ibariki-cs-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Floating variant — pinned bottom-right (the bottom-left corner belongs to
   the CookieAdmin consent box and the re-open icon it leaves behind, which
   sits on top at a higher z-index), with the menu opening upwards. */
.ibariki-currency-switcher--floating {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9990;
}

.ibariki-currency-switcher--floating .ibariki-currency-switcher__toggle {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.ibariki-currency-switcher--floating .ibariki-currency-switcher__menu {
	top: auto;
	bottom: calc(100% + 8px);
	left: auto;
	right: 0;
}

.ibariki-currency-switcher--floating .ibariki-currency-switcher__dropdown:not([open]) .ibariki-currency-switcher__caret {
	transform: rotate(180deg);
}

.ibariki-currency-switcher--floating .ibariki-currency-switcher__dropdown[open] .ibariki-currency-switcher__caret {
	transform: none;
}

/* On narrow screens the calculator pins its own summary bar to the bottom
   of the screen, which would cover the floating switcher — the
   calculator's summary panel has its own currency menu instead. */
@media (max-width: 782px) {
	body:has(.ibariki-mobile-summary-bar) .ibariki-currency-switcher--floating {
		display: none;
	}
}