/* ============================================================
 *  GeoPrice Pro — currency switcher
 *  Three variants: dropdown / buttons / grid
 *  All variants share the .wcgp-price-switcher namespace so
 *  Custom CSS in admin can override any rule cleanly.
 * ============================================================ */

.wcgp-price-switcher {
	--wcgp-radius:       8px;
	--wcgp-pad-y:        8px;
	--wcgp-pad-x:        14px;
	--wcgp-gap:          8px;
	--wcgp-border:       rgba(0, 0, 0, 0.12);
	--wcgp-border-hover: rgba(0, 0, 0, 0.36);
	--wcgp-border-active: currentColor;
	--wcgp-bg:           rgba(255, 255, 255, 0.6);
	--wcgp-bg-hover:     rgba(0, 0, 0, 0.04);
	--wcgp-bg-active:    rgba(0, 0, 0, 0.06);
	--wcgp-shadow:       0 1px 2px rgba(0, 0, 0, 0.04);
	--wcgp-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08);
	--wcgp-flag-size:    1.15em;

	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wcgp-gap);
	margin-top: 10px;
	font-size: 0.9em;
	line-height: 1.3;
	font-family:
		"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
		"Twemoji Mozilla",
		system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
	color: inherit;
}

/* Under-price switcher should span the full price column width by
 * default. The `--under-price` modifier is applied automatically by
 * the renderer (PriceSwitcher) so this rule scopes only to that
 * placement and does NOT widen the shortcode widget — which inherits
 * the surrounding container's natural width. */
.wcgp-price-switcher--under-price {
	min-width: 100%;
}

/* When the under-price switcher is in dropdown mode, the inner <select>
 * should also fill the wrapper. Without this the wrapper is 100% wide
 * but the select stays at its content-driven width inside it. */
.wcgp-price-switcher--under-price .wcgp-price-switcher__select {
	width: 100%;
	max-width: none;
}

/* The flag emoji should sit baseline-aligned and sized a touch larger
 * than the surrounding text so it actually reads as an icon, not as a
 * compressed glyph. macOS/iOS render it natively in colour; Windows 11
 * and Android do too. Older Linux falls back to glyph-style flags
 * which are still recognisable. */
.wcgp-price-switcher .wcgp-flag {
	display: inline-block;
	font-size: var(--wcgp-flag-size);
	line-height: 1;
	margin-right: 2px;
	vertical-align: -0.05em;
	font-family:
		"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
		"Twemoji Mozilla", sans-serif;
}

/* ─── Dropdown variant ──────────────────────────────────── */

.wcgp-price-switcher--dropdown .wcgp-price-switcher__select,
.wcgp-price-switcher .wcgp-price-switcher__select {
	appearance: none;
	-webkit-appearance: none;
	padding: var(--wcgp-pad-y) calc( var(--wcgp-pad-x) + 22px ) var(--wcgp-pad-y) var(--wcgp-pad-x);
	border: 1px solid var(--wcgp-border);
	border-radius: var(--wcgp-radius);
	background-color: var(--wcgp-bg);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 14px) 50%,
		calc(100% - 9px)  50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	color: inherit;
	font: inherit;
	cursor: pointer;
	min-width: 110px;
	max-width: 240px;
	box-shadow: var(--wcgp-shadow);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wcgp-price-switcher__select:hover {
	border-color: var(--wcgp-border-hover);
	box-shadow: var(--wcgp-shadow-hover);
}

.wcgp-price-switcher__select:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ─── Buttons variant (inline pills) ────────────────────── */

.wcgp-price-switcher--buttons .wcgp-price-switcher__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: calc( var(--wcgp-pad-y) - 2px ) var(--wcgp-pad-x);
	border: 1px solid var(--wcgp-border);
	border-radius: 999px;
	background: var(--wcgp-bg);
	color: inherit;
	font: inherit;
	cursor: pointer;
	box-shadow: var(--wcgp-shadow);
	transition:
		border-color 0.15s ease,
		background  0.15s ease,
		box-shadow  0.15s ease,
		color       0.15s ease;
}

.wcgp-price-switcher--buttons .wcgp-price-switcher__btn:hover {
	border-color: var(--wcgp-border-hover);
	background: var(--wcgp-bg-hover);
	box-shadow: var(--wcgp-shadow-hover);
}

.wcgp-price-switcher--buttons .wcgp-price-switcher__btn.is-active {
	border-color: var(--wcgp-border-active);
	background: var(--wcgp-bg-active);
	font-weight: 600;
}

/* ─── Grid variant (larger tiles) ───────────────────────── */

.wcgp-price-switcher--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
	max-width: 100%;
}

.wcgp-price-switcher--grid .wcgp-price-switcher__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 10px;
	border: 1px solid var(--wcgp-border);
	border-radius: var(--wcgp-radius);
	background: var(--wcgp-bg);
	color: inherit;
	font: inherit;
	cursor: pointer;
	box-shadow: var(--wcgp-shadow);
	transition:
		border-color 0.15s ease,
		background  0.15s ease,
		box-shadow  0.15s ease,
		transform   0.15s ease;
}

.wcgp-price-switcher--grid .wcgp-price-switcher__btn:hover {
	border-color: var(--wcgp-border-hover);
	background: var(--wcgp-bg-hover);
	box-shadow: var(--wcgp-shadow-hover);
	transform: translateY(-1px);
}

.wcgp-price-switcher--grid .wcgp-price-switcher__btn.is-active {
	border-color: var(--wcgp-border-active);
	background: var(--wcgp-bg-active);
	font-weight: 600;
}

/* In the grid variant the flag glyph is the primary visual — bump it. */
.wcgp-price-switcher--grid .wcgp-flag {
	font-size: 1.4em;
}

/* ─── Loading + focus + dark-mode ───────────────────────── */

.wcgp-price-switcher.is-loading .wcgp-price-switcher__select,
.wcgp-price-switcher.is-loading .wcgp-price-switcher__btn {
	opacity: 0.55;
	cursor: progress;
	pointer-events: none;
}

.wcgp-price-switcher__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
	.wcgp-price-switcher {
		--wcgp-border:       rgba(255, 255, 255, 0.18);
		--wcgp-border-hover: rgba(255, 255, 255, 0.45);
		--wcgp-bg:           rgba(255, 255, 255, 0.04);
		--wcgp-bg-hover:     rgba(255, 255, 255, 0.08);
		--wcgp-bg-active:    rgba(255, 255, 255, 0.12);
		--wcgp-shadow:       0 1px 2px rgba(0, 0, 0, 0.35);
		--wcgp-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.45);
	}
}