/* ==========================================================================
   Multi Currency for WooCommerce — frontend
   Modern switcher styling (CSS variables so themes can override easily)
   ========================================================================== */
:root {
	--mcwc-bg: #ffffff;
	--mcwc-fg: #1e2330;
	--mcwc-muted: #6b7280;
	--mcwc-border: #e6e8ee;
	--mcwc-accent: #2f6f4e;        /* matches a green storefront; override per theme */
	--mcwc-accent-weak: #eaf3ee;
	--mcwc-radius: 12px;
	--mcwc-shadow: 0 10px 30px rgba(16, 24, 40, .14);
	--mcwc-shadow-sm: 0 2px 8px rgba(16, 24, 40, .10);
}

.mcwc-switcher { display: inline-block; font-size: 14px; line-height: 1.4; }

/* ----- Inline dropdown (native select) ----- */
.mcwc-switcher.mcwc-dropdown .mcwc-select {
	padding: 8px 30px 8px 12px;
	border: 1px solid var(--mcwc-border);
	border-radius: 8px;
	background: var(--mcwc-bg);
	color: var(--mcwc-fg);
	cursor: pointer;
	font-size: 14px;
}

/* ----- Inline list / flags ----- */
.mcwc-switcher.mcwc-list,
.mcwc-switcher.mcwc-flags {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.mcwc-switcher .mcwc-item a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 12px;
	border: 1px solid var(--mcwc-border);
	border-radius: 999px;
	text-decoration: none; color: var(--mcwc-fg);
	background: var(--mcwc-bg);
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.mcwc-switcher .mcwc-item a:hover { border-color: var(--mcwc-accent); transform: translateY(-1px); }
.mcwc-switcher .mcwc-item.mcwc-active a {
	border-color: var(--mcwc-accent);
	background: var(--mcwc-accent-weak);
	font-weight: 600;
}

.mcwc-flag {
	width: 22px; height: 22px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block; vertical-align: middle;
	box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

/* ==========================================================================
   Floating switcher (FAB)
   ========================================================================== */
.mcwc-fab {
	position: fixed;
	z-index: 99999;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}
.mcwc-fab-right-bottom { right: 22px; bottom: 22px; }
.mcwc-fab-left-bottom  { left: 22px;  bottom: 22px; }
.mcwc-fab-right-top    { right: 22px; top: 90px; }
.mcwc-fab-left-top     { left: 22px;  top: 90px; }

/* Pill toggle button */
.mcwc-fab-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--mcwc-border);
	border-radius: 999px;
	background: var(--mcwc-bg);
	color: var(--mcwc-fg);
	box-shadow: var(--mcwc-shadow-sm);
	cursor: pointer;
	font-size: 14px; font-weight: 600;
	transition: box-shadow .18s ease, transform .12s ease;
}
.mcwc-fab-toggle:hover { box-shadow: var(--mcwc-shadow); transform: translateY(-1px); }
.mcwc-fab-current { display: inline-flex; align-items: center; gap: 8px; }
.mcwc-fab-code { letter-spacing: .2px; }
.mcwc-fab-symbol { color: var(--mcwc-muted); font-weight: 500; }
.mcwc-fab-caret { color: var(--mcwc-muted); transition: transform .2s ease; }
.mcwc-fab[data-open="true"] .mcwc-fab-caret { transform: rotate(180deg); }

/* Panel */
.mcwc-fab-panel {
	list-style: none; margin: 0; padding: 6px;
	position: absolute;
	min-width: 230px;
	background: var(--mcwc-bg);
	border: 1px solid var(--mcwc-border);
	border-radius: var(--mcwc-radius);
	box-shadow: var(--mcwc-shadow);
	opacity: 0; visibility: hidden;
	transform: translateY(8px) scale(.98);
	transform-origin: bottom right;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mcwc-fab[data-open="true"] .mcwc-fab-panel {
	opacity: 1; visibility: visible;
	transform: translateY(0) scale(1);
}
/* Position panel relative to corner */
.mcwc-fab-right-bottom .mcwc-fab-panel { right: 0; bottom: calc(100% + 10px); transform-origin: bottom right; }
.mcwc-fab-left-bottom  .mcwc-fab-panel { left: 0;  bottom: calc(100% + 10px); transform-origin: bottom left; }
.mcwc-fab-right-top    .mcwc-fab-panel { right: 0; top: calc(100% + 10px); transform-origin: top right; }
.mcwc-fab-left-top     .mcwc-fab-panel { left: 0;  top: calc(100% + 10px); transform-origin: top left; }

.mcwc-fab-opt a {
	display: grid;
	grid-template-columns: 26px 1fr auto;
	grid-template-areas: "flag name check" "flag meta check";
	align-items: center;
	column-gap: 10px;
	padding: 9px 10px;
	border-radius: 9px;
	text-decoration: none;
	color: var(--mcwc-fg);
	transition: background .14s ease;
}
.mcwc-fab-opt a:hover { background: #f5f7fa; }
.mcwc-fab-opt.is-active a { background: var(--mcwc-accent-weak); }
.mcwc-fab-opt .mcwc-flag { grid-area: flag; width: 26px; height: 26px; }
.mcwc-fab-noflag {
	grid-area: flag;
	width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #eef1f6; color: var(--mcwc-muted);
	font-size: 11px; font-weight: 700;
}
.mcwc-fab-opt-name { grid-area: name; font-weight: 600; font-size: 14px; }
.mcwc-fab-opt-meta { grid-area: meta; font-size: 12px; color: var(--mcwc-muted); }
.mcwc-fab-check { grid-area: check; color: var(--mcwc-accent); }

@media (max-width: 480px) {
	.mcwc-fab-right-bottom, .mcwc-fab-left-bottom { bottom: 16px; }
	.mcwc-fab-right-bottom { right: 16px; }
	.mcwc-fab-left-bottom { left: 16px; }
	.mcwc-fab-panel { min-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
	.mcwc-fab-toggle, .mcwc-fab-panel, .mcwc-fab-caret { transition: none; }
}