/**
 * Public CSS for Unified REW Multi-Currency & Translator Selector
 */

.rew-mc-switcher-container {
	position: relative;
	display: inline-block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	user-select: none;
	z-index: 99999;
}

/* Base button styling */
.rew-mc-active-currency-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
	color: #1e293b;
	font-weight: 600;
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease-in-out;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.rew-mc-active-currency-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.12), 0 3px 6px -1px rgba(15, 23, 42, 0.06);
	border-color: rgba(0, 0, 0, 0.12);
}

.rew-mc-active-currency-btn:active {
	transform: translateY(0);
}

.rew-mc-active-currency-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	transition: transform 0.25s ease-in-out;
}

.rew-mc-switcher-container.open .rew-mc-active-currency-btn .dashicons {
	transform: rotate(180deg);
}

/* Flag Icons using sharp lightweight inline SVGs */
.rew-mc-flag {
	width: 18px;
	height: 12px;
	display: inline-block;
	background-size: cover;
	background-position: center;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
}

.rew-mc-flag-clp {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 7"><rect width="13" height="3.5" fill="%23fff"/><rect y="3.5" width="13" height="3.5" fill="%23D52B1E"/><rect width="3.5" height="3.5" fill="%23002B7F"/><polygon points="1.75,0.7 2.1,1.8 1.15,1.1 2.35,1.1 1.4,1.8" fill="%23fff"/></svg>');
}

.rew-mc-flag-usd {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 7"><rect width="13" height="7" fill="%23B22234"/><path d="M0,1h13M0,3h13M0,5h13" stroke="%23fff" stroke-width="1"/><rect width="5" height="4" fill="%233C3B6E"/><polygon points="2,1.5 2.5,3 1.5,2 3.5,2 2.5,3" fill="%23fff" transform="scale(0.8) translate(0.5,0.5)"/></svg>');
}

.rew-mc-flag-br {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 504"><rect width="720" height="504" fill="%23009b3a"/><polygon points="360,40 680,252 360,464 40,252" fill="%23fedf00"/><circle cx="360" cy="252" r="102" fill="%23002776"/><path d="M258,252 a116,116 0 0,0 204,0 a102,102 0 0,1 -204,0" fill="%23fff"/><polygon points="300,240 305,245 295,245" fill="%23fff" transform="scale(0.5) translate(300,200)"/></svg>');
}

.rew-mc-flag-fr {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="%23002395"/><rect x="1" width="1" height="2" fill="%23fff"/><rect x="2" width="1" height="2" fill="%23ED2939"/></svg>');
}

.rew-mc-flag-de {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3"><rect width="5" height="1" fill="%23000"/><rect y="1" width="5" height="1" fill="%23D00"/><rect y="2" width="5" height="1" fill="%23FFCE00"/></svg>');
}

.rew-mc-flag-it {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="%23009246"/><rect x="1" width="1" height="2" fill="%23fff"/><rect x="2" width="1" height="2" fill="%23C11B17"/></svg>');
}

.rew-mc-flag-cn {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="%23DE2910"/><polygon points="5,2.5 4,5.5 6.5,3.5 3.5,3.5 6,5.5" fill="%23ffde00"/></svg>');
}

.rew-mc-flag-jp {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="2" fill="%23fff"/><circle cx="1.5" cy="1" r="0.6" fill="%23bc002d"/></svg>');
}

.rew-mc-currency-code {
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* Combined Dropdown Panel styling */
.rew-mc-combined-dropdown {
	position: absolute;
	left: 0;
	width: 220px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.95);
	pointer-events: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 10px 0;
}

/* Position mapping dropdown behavior */
.rew-mc-floating-switcher.bottom-right .rew-mc-combined-dropdown,
.rew-mc-floating-switcher.bottom-left .rew-mc-combined-dropdown {
	bottom: calc(100% + 8px);
	transform-origin: bottom center;
}

.rew-mc-floating-switcher.top-right .rew-mc-combined-dropdown,
.rew-mc-floating-switcher.top-left .rew-mc-combined-dropdown {
	top: calc(100% + 8px);
	transform-origin: top center;
}

.rew-mc-floating-switcher.bottom-right .rew-mc-combined-dropdown,
.rew-mc-floating-switcher.top-right .rew-mc-combined-dropdown {
	right: 0;
	left: auto;
}

.rew-mc-floating-switcher.bottom-left .rew-mc-combined-dropdown,
.rew-mc-floating-switcher.top-left .rew-mc-combined-dropdown {
	left: 0;
	right: auto;
}

.rew-mc-switcher-container.open .rew-mc-combined-dropdown {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	pointer-events: auto;
}

/* Dropdown Sections */
.rew-mc-dropdown-section {
	padding: 6px 0;
}

.rew-mc-section-title {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #64748b;
	padding: 4px 16px 8px 16px;
	letter-spacing: 0.05em;
}

.rew-mc-dropdown-divider {
	border-bottom: 1px solid #f1f5f9;
	margin: 6px 0;
}

/* Dropdown list items styling */
.rew-mc-combined-dropdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rew-mc-combined-dropdown li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	cursor: pointer;
	font-weight: 500;
	font-size: 13px;
	color: #475569;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.rew-mc-combined-dropdown li:hover {
	background-color: #f1f5f9;
	color: #0f172a;
}

.rew-mc-combined-dropdown li.active {
	background-color: #4f46e5;
	color: #ffffff;
}

/* Floating Switcher Position wrappers */
.rew-mc-floating-switcher {
	position: fixed;
	z-index: 999999;
}

.rew-mc-floating-switcher.bottom-right {
	bottom: 25px;
	right: 25px;
}

.rew-mc-floating-switcher.bottom-left {
	bottom: 25px;
	left: 25px;
}

.rew-mc-floating-switcher.top-right {
	top: 25px;
	right: 25px;
}

.rew-mc-floating-switcher.top-left {
	top: 25px;
	left: 25px;
}

/* Visual loading state overlay */
.rew-mc-switcher-container.loading {
	opacity: 0.7;
	pointer-events: none;
}

.rew-mc-switcher-container.loading .rew-mc-active-currency-btn:after {
	content: "";
	width: 12px;
	height: 12px;
	border: 2px solid rgba(0,0,0,0.2);
	border-top-color: #4f46e5;
	border-radius: 50%;
	display: inline-block;
	animation: spin 0.8s linear infinite;
	margin-left: 6px;
}

@keyframes spin {
	100% { transform: rotate(360deg); }
}