/**
 * CurrencyX Frontend Styles
 * Theme: Modern Clean-Tech (Minimalist, Solid, Professional)
 *
 * @package CurrencyX
 */

/* ============================================
   CSS Variables & Theme System
   ============================================ */
:root {
	/* Palette: Indigo & Slate */
	--cx-primary: #4f46e5;
	--cx-primary-hover: #4338ca;
	--cx-primary-light: #eef2ff;
	--cx-secondary: #6366f1;

	--cx-text-main: #111827;
	--cx-text-muted: #6b7280;

	--cx-bg-color: #f9fafb;
	--cx-card-bg: #ffffff;
	--cx-border-color: #e5e7eb;

	--cx-input-bg: #f9fafb;
	--cx-input-border: #d1d5db;

	/* Shadows: Deep & Soft */
	--cx-shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
	--cx-shadow-input: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

	/* Radii */
	--cx-radius-card: 24px;
	--cx-radius-input: 12px;
}

/* ============================================
   Wrapper & Container
   ============================================ */
.currencyx-wrapper {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	box-sizing: border-box;
}

.currencyx-container {
	padding: 20px;
	/* No more animated background - clean slate */
}

/* ============================================
   Card - Modern Clean
   ============================================ */
.currencyx-card {
	background: var(--cx-card-bg);
	border: 1px solid var(--cx-border-color);
	border-radius: var(--cx-radius-card);
	padding: 32px;
	box-shadow: var(--cx-shadow-card);
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.currencyx-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Header
   ============================================ */
.currencyx-header {
	text-align: center;
	margin-bottom: 28px;
}

.currencyx-title {
	margin: 0 0 6px 0;
	font-size: 24px;
	font-weight: 800;
	color: var(--cx-text-main);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	letter-spacing: -0.5px;
}

.currencyx-icon {
	width: 28px;
	height: 28px;
	color: var(--cx-primary);
	stroke-width: 2.5;
}

.currencyx-subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--cx-text-muted);
	font-weight: 500;
}

/* ============================================
   Input Groups
   ============================================ */
.currencyx-input-group {
	margin-bottom: 20px;
}

.currencyx-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cx-text-main);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.currencyx-input-wrapper,
.currencyx-select-wrapper {
	position: relative;
}

/* ============================================
   Inputs & Selects (Flat Style)
   ============================================ */
.currencyx-amount-input,
.currencyx-currency-select {
	width: 100%;
	padding: 14px 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--cx-text-main);
	background: var(--cx-input-bg);
	border: 1px solid var(--cx-input-border);
	border-radius: var(--cx-radius-input);
	outline: none;
	transition: all 0.2s ease;
	box-sizing: border-box;
	box-shadow: var(--cx-shadow-input);
	color: var(--cx-text-main, #111827) !important;
	/* Explicit fallback */
}

.currencyx-input-wrapper .currencyx-amount-input {
	padding-right: 48px;
	/* Make room for mic */
}

/* Voice Input Button */
.currencyx-voice-btn {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--cx-text-muted);
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
	z-index: 5;
}

.currencyx-voice-btn svg {
	width: 18px;
	height: 18px;
	stroke-width: 2px;
}

.currencyx-voice-btn:hover {
	color: var(--cx-primary);
	background: rgba(var(--cx-primary-rgb), 0.1);
}

.currencyx-voice-btn.currencyx-listening {
	color: #ef4444;
	animation: cx-mic-pulse 1.5s infinite;
}

@keyframes cx-mic-pulse {
	0% {
		transform: translateY(-50%) scale(1);
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
	}

	70% {
		transform: translateY(-50%) scale(1.1);
		box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
	}

	100% {
		transform: translateY(-50%) scale(1);
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
	}
}

.currencyx-amount-input:focus,
.currencyx-currency-select:focus {
	background: #fff;
	border-color: var(--cx-primary);
	box-shadow: 0 0 0 4px rgba(var(--cx-primary-rgb), 0.15);
}

.currencyx-amount-input:hover,
.currencyx-currency-select:hover {
	border-color: #9ca3af;
}

/* ============================================
   Swap Button (High Visibility Fix)
   ============================================ */
.currencyx-swap-wrapper {
	position: relative;
	height: 24px;
	/* Reduced specific height to overlap inputs */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	/* Higher Z-Index */
	margin: -12px 0;
	/* Negative margin to pull it tight */
}

.currencyx-swap-btn {
	width: 44px;
	height: 44px;
	background: #ffffff;
	border: 1px solid #94a3b8;
	/* Stronger border default */
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
	color: #0f172a !important;
	/* Force Dark Icon Color */
}

.currencyx-swap-btn:hover {
	color: var(--cx-primary) !important;
	border-color: var(--cx-primary);
	transform: rotate(180deg);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
	background: #fff;
	/* Ensure hover is bright */
}

/* Force specific colors for swap button icon to ensure visibility */
.currencyx-swap-btn svg {
	width: 20px;
	height: 20px;
	stroke-width: 2px !important;
	color: inherit;
	stroke: currentColor !important;
	fill: none !important;
	overflow: visible;
	filter: drop-shadow(0 1px 0px rgba(255, 255, 255, 1));
	/* Contrast edge */
}

.currencyx-swap-btn svg path {
	stroke: currentColor !important;
	fill: none !important;
}

/* Universal Dark Theme Fixes */
.currencyx-theme-dark .currencyx-swap-btn,
.currencyx-theme-midnight .currencyx-swap-btn,
.currencyx-theme-cyber .currencyx-swap-btn,
.currencyx-theme-royal .currencyx-swap-btn,
.currencyx-theme-crimson .currencyx-swap-btn,
.currencyx-theme-slate .currencyx-swap-btn {
	background-color: #334155 !important;
	/* Lighter than darkest bg */
	border-color: #64748b !important;
	color: #ffffff !important;
	/* Force White Icon */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.currencyx-theme-dark .currencyx-swap-btn:hover,
.currencyx-theme-midnight .currencyx-swap-btn:hover,
.currencyx-theme-cyber .currencyx-swap-btn:hover,
.currencyx-theme-royal .currencyx-swap-btn:hover,
.currencyx-theme-crimson .currencyx-swap-btn:hover,
.currencyx-theme-slate .currencyx-swap-btn:hover {
	background-color: var(--cx-primary) !important;
	color: #ffffff !important;
	border-color: var(--cx-primary) !important;
}

.currencyx-theme-dark .currencyx-swap-btn svg,
[class*="currencyx-theme-"] .currencyx-swap-btn svg {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* ============================================
   Result Display (Highlight Box)
   ============================================ */
.currencyx-result {
	background: var(--cx-primary-light);
	border: 1px solid rgba(var(--cx-primary-rgb), 0.1);
	border-radius: 16px;
	padding: 24px;
	text-align: center;
	margin-top: 28px;
	margin-bottom: 0;
	position: relative;
}

.currencyx-result-amount {
	font-size: 32px;
	font-weight: 800;
	color: var(--cx-primary);
	margin-bottom: 4px;
	letter-spacing: -1px;
}

.currencyx-result-label {
	font-size: 12px;
	color: var(--cx-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ============================================
   Rate Info
   ============================================ */
.currencyx-rate-info {
	margin-top: 16px;
	text-align: center;
}

.currencyx-rate-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--cx-text-main);
}

.currencyx-rate-updated {
	font-size: 11px;
	color: var(--cx-text-muted);
	margin-top: 2px;
}

/* ============================================
   Loading & Error
   ============================================ */
.currencyx-loading {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(2px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 20;
	border-radius: var(--cx-radius-card);
}

.currencyx-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--cx-border-color);
	border-top-color: var(--cx-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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

.currencyx-error {
	padding: 12px 16px;
	background: #fef2f2;
	border: 1px solid #fee2e2;
	border-radius: 8px;
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #991b1b;
}

/* ============================================
   Custom Dropdown (Modern)
   ============================================ */
.currencyx-select-wrapper {
	position: relative;
	width: 100%;
}

.currencyx-select-hidden {
	display: none !important;
}

.currencyx-select-selected {
	background: var(--cx-input-bg);
	padding: 14px 16px;
	height: 52px;
	/* Fixed height for alignment */
	border: 1px solid var(--cx-input-border);
	border-radius: var(--cx-radius-input);
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all 0.2s ease;
	box-shadow: var(--cx-shadow-input);
	color: var(--cx-text-main, #111827) !important;
	/* Explicit fallback */
	font-weight: 600;
}

.currencyx-select-selected:hover {
	border-color: #9ca3af;
}

.currencyx-select-selected.currencyx-active {
	background: var(--cx-input-bg);
	border-color: var(--cx-primary);
	box-shadow: 0 0 0 4px rgba(var(--cx-primary-rgb), 0.15);
}

.currencyx-select-content {
	display: flex;
	align-items: center;
	gap: 12px;
}

.currencyx-flag {
	width: 24px;
	height: 18px;
	border-radius: 2px;
	object-fit: cover;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.currencyx-arrow {
	width: 20px;
	height: 20px;
	color: var(--cx-text-muted);
	transition: transform 0.2s ease;
}

.currencyx-select-selected.currencyx-active .currencyx-arrow {
	transform: rotate(180deg);
	color: var(--cx-primary);
}

.currencyx-select-items {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--cx-card-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--cx-border-color);
	border-radius: 16px;
	max-height: 280px;
	overflow-y: auto;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.currencyx-select-item {
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 14px;
	color: var(--cx-text-main);
}

.currencyx-select-item:hover,
.currencyx-select-item.same-as-selected {
	background-color: var(--cx-primary-light);
	color: var(--cx-primary);
}

.currencyx-select-search {
	padding: 10px;
	position: sticky;
	top: 0;
	background: var(--cx-card-bg);
	z-index: 10;
	border-bottom: 1px solid var(--cx-border-color);
}

.currencyx-select-search input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--cx-border-color);
	border-radius: 6px;
	font-size: 14px;
	background: var(--cx-input-bg);
}

.currencyx-select-search input:focus {
	border-color: var(--cx-primary);
	outline: none;
	background: #fff;
}

/* ============================================
   Dark Theme (Slate)
   ============================================ */
.currencyx-theme-dark {
	--cx-text-main: #f3f4f6;
	--cx-text-muted: #9ca3af;
	/* --cx-card-bg is handled inline for opacity support */
	--cx-border-color: #374151;
	/* Gray 700 */
	--cx-input-bg: #1f2937;
	/* Gray 800 */
	--cx-input-border: #374151;
	--cx-shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Fix visibility on transparent backgrounds */
.currencyx-theme-dark .currencyx-title,
.currencyx-theme-dark .currencyx-subtitle,
.currencyx-theme-dark .currencyx-label,
.currencyx-theme-dark .currencyx-rate-text,
.currencyx-theme-dark .currencyx-rate-updated {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8);
	color: #ffffff !important;
}

.currencyx-theme-dark .currencyx-amount-input:focus,
.currencyx-theme-dark .currencyx-select-selected.currencyx-active {
	background: #111827;
}

.currencyx-theme-dark .currencyx-swap-btn {
	background: #1f2937;
	border-color: #374151;
	color: #e5e7eb;
	/* Clearly visible on dark */

}

.currencyx-theme-dark .currencyx-swap-btn:hover {
	color: #fff;
	border-color: var(--cx-primary);
	background: var(--cx-primary);
}

.currencyx-theme-dark .currencyx-result {
	background: rgba(var(--cx-primary-rgb), 0.15);
	border-color: rgba(var(--cx-primary-rgb), 0.2);
}

.currencyx-theme-dark .currencyx-result-amount {
	color: #fff;
}

.currencyx-theme-dark .currencyx-select-items {
	background: #1f2937;
	border-color: #374151;
}

.currencyx-theme-dark .currencyx-select-item:hover,
.currencyx-theme-dark .currencyx-select-item.same-as-selected {
	background-color: rgba(var(--cx-primary-rgb), 0.2);
	color: #fff;
}

.currencyx-theme-dark .currencyx-select-search {
	background: #1f2937;
	border-color: #374151;
}

.currencyx-theme-dark .currencyx-select-search input {
	background: #111827;
	border-color: #374151;
	color: white;
}

/* ============================================
   Premium Theme Presets
   ============================================ */

/* Midnight Pro (Deep Blue/Purple) */
.currencyx-theme-midnight {
	--cx-bg-color: #0f172a;
	--cx-card-bg: rgba(30, 41, 59, 0.85);
	--cx-text-main: #f8fafc;
	--cx-text-muted: #94a3b8;
	--cx-primary: #818cf8;
	--cx-primary-hover: #6366f1;
	--cx-primary-light: rgba(99, 102, 241, 0.15);
	--cx-border-color: #334155;
	--cx-input-bg: #1e293b;
	--cx-input-border: #475569;
	--cx-shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Ocean Breeze (Teal/Blue) */
.currencyx-theme-ocean {
	--cx-bg-color: #f0f9ff;
	--cx-card-bg: rgba(255, 255, 255, 0.9);
	--cx-text-main: #0c4a6e;
	--cx-text-muted: #64748b;
	--cx-primary: #0ea5e9;
	--cx-primary-hover: #0284c7;
	--cx-primary-light: #e0f2fe;
	--cx-border-color: #bae6fd;
	--cx-input-bg: #f0f9ff;
	--cx-input-border: #7dd3fc;
	--cx-shadow-card: 0 20px 25px -5px rgba(14, 165, 233, 0.15);
}

/* Forest Glass (Green/Nature) */
.currencyx-theme-forest {
	--cx-bg-color: #f0fdf4;
	--cx-card-bg: rgba(255, 255, 255, 0.9);
	--cx-text-main: #14532d;
	--cx-text-muted: #65a30d;
	--cx-primary: #16a34a;
	--cx-primary-hover: #15803d;
	--cx-primary-light: #dcfce7;
	--cx-border-color: #bbf7d0;
	--cx-input-bg: #f0fdf4;
	--cx-input-border: #86efac;
	--cx-shadow-card: 0 20px 25px -5px rgba(22, 163, 74, 0.15);
}

/* Cyber Neon (Black/Pink/Cyan) */
.currencyx-theme-cyber {
	--cx-bg-color: #000000;
	--cx-card-bg: rgba(10, 10, 10, 0.9);
	--cx-text-main: #ffffff;
	--cx-text-muted: #a1a1aa;
	--cx-primary: #d946ef;
	/* Neon Pink */
	--cx-primary-hover: #c026d3;
	--cx-primary-light: rgba(217, 70, 239, 0.2);
	--cx-border-color: #27272a;
	--cx-input-bg: #18181b;
	--cx-input-border: #3f3f46;
	--cx-shadow-card: 0 0 20px rgba(217, 70, 239, 0.2);
	font-family: 'Courier New', Courier, monospace;
	/* Tech feel */
}

/* Sunset Glow (Orange/Warm) */
.currencyx-theme-sunset {
	--cx-bg-color: #fff7ed;
	--cx-card-bg: rgba(255, 255, 255, 0.9);
	--cx-text-main: #7c2d12;
	--cx-text-muted: #9a3412;
	--cx-primary: #f97316;
	--cx-primary-hover: #ea580c;
	--cx-primary-light: #fed7aa;
	--cx-border-color: #fed7aa;
	--cx-input-bg: #fff7ed;
	--cx-input-border: #fdba74;
	--cx-shadow-card: 0 20px 25px -5px rgba(249, 115, 22, 0.15);
}

/* Royal Purple (Deep Purple) */
.currencyx-theme-royal {
	--cx-bg-color: #1e1b4b;
	--cx-card-bg: rgba(49, 46, 129, 0.85);
	--cx-text-main: #e0e7ff;
	--cx-text-muted: #c7d2fe;
	--cx-primary: #a78bfa;
	--cx-primary-hover: #8b5cf6;
	--cx-primary-light: rgba(167, 139, 250, 0.15);
	--cx-border-color: #4c1d95;
	--cx-input-bg: #312e81;
	--cx-input-border: #6366f1;
	--cx-shadow-card: 0 25px 50px -12px rgba(139, 92, 246, 0.3);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Mint Fresh (Light Green) */
.currencyx-theme-mint {
	--cx-bg-color: #ecfdf5;
	--cx-card-bg: rgba(255, 255, 255, 0.9);
	--cx-text-main: #064e3b;
	--cx-text-muted: #047857;
	--cx-primary: #10b981;
	--cx-primary-hover: #059669;
	--cx-primary-light: #d1fae5;
	--cx-border-color: #a7f3d0;
	--cx-input-bg: #ecfdf5;
	--cx-input-border: #6ee7b7;
	--cx-shadow-card: 0 20px 25px -5px rgba(16, 185, 129, 0.15);
}

/* Rose Gold (Pink/Rose) */
.currencyx-theme-rose {
	--cx-bg-color: #fff1f2;
	--cx-card-bg: rgba(255, 255, 255, 0.9);
	--cx-text-main: #881337;
	--cx-text-muted: #9f1239;
	--cx-primary: #f43f5e;
	--cx-primary-hover: #e11d48;
	--cx-primary-light: #ffe4e6;
	--cx-border-color: #fecdd3;
	--cx-input-bg: #fff1f2;
	--cx-input-border: #fda4af;
	--cx-shadow-card: 0 20px 25px -5px rgba(244, 63, 94, 0.15);
}

/* Slate Modern (Cool Gray) */
.currencyx-theme-slate {
	--cx-bg-color: #f8fafc;
	--cx-card-bg: rgba(255, 255, 255, 0.95);
	--cx-text-main: #0f172a;
	--cx-text-muted: #475569;
	--cx-primary: #475569;
	--cx-primary-hover: #334155;
	--cx-primary-light: #e2e8f0;
	--cx-border-color: #cbd5e1;
	--cx-input-bg: #f8fafc;
	--cx-input-border: #94a3b8;
	--cx-shadow-card: 0 20px 25px -5px rgba(71, 85, 105, 0.1);
}

/* Amber Warm (Yellow/Gold) */
.currencyx-theme-amber {
	--cx-bg-color: #fffbeb;
	--cx-card-bg: rgba(255, 255, 255, 0.9);
	--cx-text-main: #78350f;
	--cx-text-muted: #92400e;
	--cx-primary: #f59e0b;
	--cx-primary-hover: #d97706;
	--cx-primary-light: #fef3c7;
	--cx-border-color: #fde68a;
	--cx-input-bg: #fffbeb;
	--cx-input-border: #fcd34d;
	--cx-shadow-card: 0 20px 25px -5px rgba(245, 158, 11, 0.15);
}

/* Teal Wave (Teal/Cyan) */
.currencyx-theme-teal {
	--cx-bg-color: #f0fdfa;
	--cx-card-bg: rgba(255, 255, 255, 0.9);
	--cx-text-main: #134e4a;
	--cx-text-muted: #0f766e;
	--cx-primary: #14b8a6;
	--cx-primary-hover: #0d9488;
	--cx-primary-light: #ccfbf1;
	--cx-border-color: #99f6e4;
	--cx-input-bg: #f0fdfa;
	--cx-input-border: #5eead4;
	--cx-shadow-card: 0 20px 25px -5px rgba(20, 184, 166, 0.15);
}

/* Crimson Dark (Dark Red) */
.currencyx-theme-crimson {
	--cx-bg-color: #1a0b0e;
	--cx-card-bg: rgba(45, 18, 21, 0.85);
	--cx-text-main: #fecaca;
	--cx-text-muted: #fca5a5;
	--cx-primary: #dc2626;
	--cx-primary-hover: #b91c1c;
	--cx-primary-light: rgba(220, 38, 38, 0.15);
	--cx-border-color: #450a0a;
	--cx-input-bg: #2d1215;
	--cx-input-border: #7f1d1d;
	--cx-shadow-card: 0 25px 50px -12px rgba(220, 38, 38, 0.3);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Arctic Ice (Light Blue) */
.currencyx-theme-arctic {
	--cx-bg-color: #f0f9ff;
	--cx-card-bg: rgba(255, 255, 255, 0.9);
	--cx-text-main: #0c4a6e;
	--cx-text-muted: #075985;
	--cx-primary: #38bdf8;
	--cx-primary-hover: #0ea5e9;
	--cx-primary-light: #e0f2fe;
	--cx-border-color: #bae6fd;
	--cx-input-bg: #f0f9ff;
	--cx-input-border: #7dd3fc;
	--cx-shadow-card: 0 20px 25px -5px rgba(56, 189, 248, 0.15);
}

/* Apply variables to inputs in dark themes */
.currencyx-theme-midnight input,
.currencyx-theme-cyber input {
	color: #fff;
}

.currencyx-theme-midnight .currencyx-select-selected,
.currencyx-theme-cyber .currencyx-select-selected {
	color: #fff;
}

/* ============================================
   Compact Layout (Modern)
   ============================================ */
.currencyx-wrapper.currencyx-layout-compact {
	max-width: 340px;
}

.currencyx-layout-compact .currencyx-container,
.currencyx-layout-compact .currencyx-card {
	padding: 16px;
	border-radius: 20px;
}

.currencyx-layout-compact .currencyx-title {
	font-size: 18px;
	margin-bottom: 0;
}

.currencyx-layout-compact .currencyx-header {
	margin-bottom: 20px;
}

.currencyx-layout-compact .currencyx-result {
	padding: 16px;
	margin-top: 20px;
}

.currencyx-layout-compact .currencyx-result-amount {
	font-size: 24px;
}

.currencyx-layout-compact .currencyx-amount-input,
.currencyx-layout-compact .currencyx-select-selected {
	padding: 10px 12px;
	height: 42px;
	font-size: 14px;
}

/* ============================================
   Premium Features: Ticker
   ============================================ */
.currencyx-ticker {
	width: 100%;
	overflow: hidden;
	background: #111827;
	/* Dark background default */
	color: #fff;
	padding: 12px 0;
	white-space: nowrap;
	position: relative;
	box-sizing: border-box;
	font-family: inherit;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Default Ticker Style using Variables */
.currencyx-ticker {
	background: var(--cx-bg-color, #f3f4f6);
	color: var(--cx-text-main, #1f2937);
	border-bottom: 1px solid var(--cx-border-color, #e5e7eb);
}

/* Glass Theme Override (Specific transparency) */
.currencyx-ticker.currencyx-theme-glass {
	background: rgba(17, 24, 39, 0.7);
	color: #ffffff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.currencyx-theme-glass .currencyx-ticker-item {
	border-right: none;
}

.currencyx-ticker-track {
	display: inline-block;
	white-space: nowrap;
	/* Animation duration set via JS, default 30s */
	/* Animation keyframes injected via JS or defined below */
}

.currencyx-ticker-item {
	display: inline-block;
	padding: 6px 16px;
	margin: 0 4px;
	font-size: 13px;
	background: var(--cx-primary-light, rgba(0, 0, 0, 0.05));
	/* Pill bg from var */
	color: #1f2937 !important;
	/* Force Dark Text for Default/Light Themes */
	border-radius: 20px;
	border-right: none;
}

/* Force White Text for Dark Themes */
.currencyx-theme-dark .currencyx-ticker-item,
.currencyx-theme-midnight .currencyx-ticker-item,
.currencyx-theme-cyber .currencyx-ticker-item,
.currencyx-theme-royal .currencyx-ticker-item,
.currencyx-theme-crimson .currencyx-ticker-item {
	color: #ffffff !important;
}

.currencyx-ticker-item strong {
	font-weight: 700;
	color: var(--cx-primary, #6366f1);
	margin-right: 4px;
}

/* Light Theme Specifics (Legacy/Default) */
.currencyx-theme-light .currencyx-ticker-item {
	background: rgba(0, 0, 0, 0.05);
	border-right: none;
}

.currencyx-theme-glass .currencyx-ticker-item strong {
	color: #818cf8;
	/* Lighter indigo for dark glass */
}

/* Fallback Keyframes if JS fails to inject */
@keyframes currencyx-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* ============================================
   Premium Features: Comparison Table
   ============================================ */
.currencyx-table-wrapper {
	width: 100%;
	max-width: 850px;
	/* Constrain width */
	overflow-x: auto;
	margin: 40px auto;
	/* Center horizontally with vertical space */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	/* Premium shadow */
	border-radius: 16px;
	background: var(--cx-card-bg);
	border: 1px solid var(--cx-border-color);
}

.currencyx-compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	background-color: transparent;
	overflow: hidden;
}

.currencyx-compare-table th {
	background-color: #f3f4f6;
	padding: 18px 24px;
	text-align: left;
	font-weight: 700;
	color: #4b5563;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--cx-border-color);
}

.currencyx-compare-table td {
	padding: 16px 24px;
	text-align: left;
	border-bottom: 1px solid #e5e7eb;
	color: var(--cx-text-main, #374151) !important;
	/* Explicit fallback */
}

.currencyx-compare-table tr:last-child td {
	border-bottom: none;
}

.currencyx-compare-table tr:hover td {
	background-color: #f9fafb;
}

.currencyx-flag-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	color: var(--cx-text-main);
}

/* ============================================
   Premium Features: Chart
   ============================================ */
.currencyx-chart-wrapper {
	background: var(--cx-card-bg);
	border: 1px solid var(--cx-border-color);
	border-radius: var(--cx-radius-card);
	padding: 24px;
	margin: 20px 0;
	box-shadow: var(--cx-shadow-card);
	font-family: inherit;
}

.currencyx-chart-header {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--cx-border-color);
}

.currencyx-chart-header h3 {
	margin: 0 0 6px 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--cx-text-main);
}

.currencyx-chart-header p {
	margin: 0;
	font-size: 13px;
	color: var(--cx-text-muted);
}

.currencyx-chart-canvas-container {
	position: relative;
	height: 300px;
	width: 100%;
}

/* ============================================
   Travel Calculator Specifics
   ============================================ */
.currencyx-travel-calculator .currencyx-input-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: center;
}

@media (max-width: 480px) {
	.currencyx-travel-calculator .currencyx-input-row {
		grid-template-columns: 1fr;
	}
}

.currencyx-travel-calculator .currencyx-btn-primary {
	display: block;
	width: 100%;
	background: var(--cx-primary);
	color: white;
	padding: 16px;
	border: none;
	border-radius: var(--cx-radius-input);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 24px;
	box-shadow: 0 4px 6px -1px rgba(var(--cx-primary-rgb), 0.3);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.currencyx-travel-calculator .currencyx-btn-primary:hover {
	background: var(--cx-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(var(--cx-primary-rgb), 0.4);
}

.currencyx-travel-calculator .currencyx-btn-primary:active {
	transform: translateY(0);
}

.currencyx-travel-results {
	background: var(--cx-input-bg);
	border-radius: var(--cx-radius-input);
	padding: 24px;
	margin-top: 24px;
	border: 1px solid var(--cx-border-color);
	animation: fadeIn 0.3s ease-out;
}

.currencyx-result-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-size: 15px;
	color: var(--cx-text-main);
}

.currencyx-result-row .label {
	color: var(--cx-text-muted);
}

.currencyx-result-row .value {
	font-weight: 700;
}

.currencyx-result-row.highlight {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 2px dashed var(--cx-border-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}

.currencyx-result-row.highlight .label {
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--cx-primary);
}

.currencyx-result-row.highlight .value {
	font-size: 42px;
	font-weight: 800;
	color: var(--cx-text-main);
	line-height: 1;
}

.currencyx-exchange-rate-info {
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	color: var(--cx-text-muted);
	background: rgba(var(--cx-primary-rgb), 0.05);
	padding: 8px;
	border-radius: 6px;
	display: inline-block;
	width: 100%;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   Compact Layout (Floating Widget)
   ============================================ */
.currencyx-layout-compact .currencyx-card {
	padding: 16px;
	border-radius: 12px;
}

.currencyx-layout-compact .currencyx-header {
	margin-bottom: 12px;
	display: none;
	/* Hide header for ultra-compact look */
}

/* If title is empty, header might still take space, so hiding it is safer for compact */

.currencyx-layout-compact .currencyx-input-group {
	margin-bottom: 10px;
}

.currencyx-layout-compact .currencyx-label {
	font-size: 11px;
	margin-bottom: 4px;
}

.currencyx-layout-compact .currencyx-amount-input,
.currencyx-layout-compact .currencyx-select-selected {
	padding: 8px 12px;
	height: 36px;
	/* Smaller inputs */
	font-size: 14px;
}

.currencyx-layout-compact .currencyx-select-selected .currencyx-flag {
	width: 20px;
	height: 15px;
}

.currencyx-layout-compact .currencyx-swap-wrapper {
	height: 10px;
	margin: -5px 0;
}

.currencyx-layout-compact .currencyx-swap-btn {
	width: 32px;
	height: 32px;
}

.currencyx-layout-compact .currencyx-swap-btn svg {
	width: 16px;
	height: 16px;
}

.currencyx-layout-compact .currencyx-result {
	margin-top: 15px;
	padding: 12px;
	border-radius: 8px;
}

.currencyx-layout-compact .currencyx-result-amount {
	font-size: 20px;
	margin-bottom: 2px;
}

.currencyx-layout-compact .currencyx-result-label {
	font-size: 10px;
}

.currencyx-layout-compact .currencyx-rate-info {
	margin-top: 8px;
}

.currencyx-layout-compact .currencyx-rate-text {
	font-size: 11px;
}

.currencyx-layout-compact .currencyx-rate-updated {
	display: none !important;
	/* Hide updated time in compact mode to save space */
}
/* ============================================
   Expanded Premium Theme Presets (10 Unique Styles)
   ============================================ */

/* 1. Soft Neumorphism (Soft UI) */
.currencyx-theme-neumorph {
--cx-bg-color: #e0e5ec;
--cx-card-bg: #e0e5ec;
--cx-text-main: #4a5568;
--cx-text-muted: #718096;
--cx-primary: #a3b1c6;
--cx-primary-hover: #9cadc7;
--cx-border-color: transparent;
--cx-input-bg: #e0e5ec;
--cx-input-border: transparent;
--cx-shadow-card: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);
backdrop-filter: none;
}
.currencyx-theme-neumorph .currencyx-amount-input,
.currencyx-theme-neumorph .currencyx-select-selected {
box-shadow: inset 6px 6px 10px 0 rgba(163,177,198, 0.7), inset -6px -6px 10px 0 rgba(255,255,255, 0.8);
background: #e0e5ec;
border: none;
}
.currencyx-theme-neumorph .currencyx-result {
background: #e0e5ec;
box-shadow: inset 4px 4px 8px rgba(163,177,198,0.6), inset -4px -4px 8px rgba(255,255,255,0.7);
border: none;
}

/* 2. Bold Brutalist (Neo-Brutalism) */
.currencyx-theme-brutalist {
--cx-bg-color: #f4d03f;
--cx-card-bg: #ffffff;
--cx-text-main: #000000;
--cx-text-muted: #000000;
--cx-primary: #000000;
--cx-width-s: 3px;
--cx-shadow-hard: 4px 4px 0px #000000;
--cx-radius-card: 0px;
--cx-radius-input: 0px;
font-family: 'Courier New', Courier, monospace;
}
.currencyx-theme-brutalist .currencyx-card {
border: 3px solid #000;
box-shadow: 6px 6px 0px #000;
border-radius: 0;
}
.currencyx-theme-brutalist .currencyx-amount-input,
.currencyx-theme-brutalist .currencyx-select-selected {
border: 2px solid #000;
background: #fff;
box-shadow: 3px 3px 0px #000;
border-radius: 0;
}
.currencyx-theme-brutalist .currencyx-result {
background: #ff5252;
border: 3px solid #000;
border-radius: 0;
box-shadow: 4px 4px 0px #000;
color: #fff;
}
.currencyx-theme-brutalist .currencyx-result-amount {
color: #fff;
text-shadow: 2px 2px 0px #000;
}

/* 3. Cosmic Glass (Deep Dark Gradient) */
.currencyx-theme-cosmic {
--cx-bg-color: #0d0015;
--cx-card-bg: rgba(20, 0, 40, 0.6);
--cx-text-main: #e2e8f0;
--cx-text-muted: #a0aec0;
--cx-primary: #d53f8c;
--cx-primary-hover: #b83280;
--cx-border-color: rgba(255, 255, 255, 0.1);
--cx-input-bg: rgba(0, 0, 0, 0.4);
--cx-shadow-card: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.currencyx-theme-cosmic .currencyx-card {
background: linear-gradient(135deg, rgba(82, 0, 255, 0.15) 0%, rgba(200, 0, 100, 0.1) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.currencyx-theme-cosmic .currencyx-amount-input,
.currencyx-theme-cosmic .currencyx-select-selected {
background: rgba(0,0,0,0.3);
color: #fff !important;
border: 1px solid rgba(255,255,255,0.1);
}

/* 4. Luxury Gold (High-End Serif) */
.currencyx-theme-luxury {
--cx-bg-color: #0a0a0a;
--cx-card-bg: #141414;
--cx-text-main: #d4af37;
--cx-text-muted: #aa8c2c;
--cx-primary: #d4af37;
--cx-primary-hover: #c5a028;
--cx-border-color: #d4af37;
--cx-input-bg: #000;
--cx-input-border: #333;
font-family: 'Playfair Display', 'Times New Roman', serif;
}
.currencyx-theme-luxury .currencyx-card {
border: 1px solid #d4af37;
box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
border-radius: 4px;
}
.currencyx-theme-luxury .currencyx-amount-input,
.currencyx-theme-luxury .currencyx-select-selected {
border: 1px solid #333;
border-bottom: 2px solid #d4af37;
border-radius: 2px;
color: #fff !important;
letter-spacing: 1px;
}
.currencyx-theme-luxury .currencyx-result {
background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
border: 1px solid #d4af37;
border-radius: 2px;
}

/* 5. Hacker Terminal (Retro Code) */
.currencyx-theme-terminal {
--cx-bg-color: #000;
--cx-card-bg: #0c0c0c;
--cx-text-main: #33ff00;
--cx-text-muted: #22aa00;
--cx-primary: #33ff00;
--cx-primary-hover: #28cc00;
--cx-border-color: #33ff00;
--cx-input-bg: #000;
--cx-input-border: #33ff00;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.currencyx-theme-terminal .currencyx-card {
border: 2px solid #33ff00;
box-shadow: 0 0 10px rgba(51, 255, 0, 0.2);
border-radius: 0;
}
.currencyx-theme-terminal .currencyx-amount-input,
.currencyx-theme-terminal .currencyx-select-selected {
border-radius: 0;
color: #33ff00 !important;
border: 1px solid #33ff00;
}
.currencyx-theme-terminal .currencyx-result {
background: #001a00;
border: 1px dashed #33ff00;
border-radius: 0;
}

/* 6. Paper Stack (Minimal Flat) */
.currencyx-theme-paper {
--cx-bg-color: #fdfbf7;
--cx-card-bg: #ffffff;
--cx-text-main: #2d3748;
--cx-text-muted: #718096;
--cx-primary: #4a5568;
--cx-border-color: #cbd5e0;
--cx-input-bg: #fff;
--cx-shadow-card: 1px 1px 0px rgba(0,0,0,0.05);
}
.currencyx-theme-paper .currencyx-card {
border: 1px solid #e2e8f0;
box-shadow: 0 20px 0 -10px #fff, 0 20px 0 -9px #e2e8f0,
0 40px 0 -20px #fff, 0 40px 0 -19px #e2e8f0;
border-radius: 2px;
margin-bottom: 40px; 
}
.currencyx-theme-paper .currencyx-amount-input,
.currencyx-theme-paper .currencyx-select-selected {
background: #fff;
border-bottom: 2px solid #cbd5e0;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
box-shadow: none;
}

/* 7. Claymorphism (Soft 3D Rounded) */
.currencyx-theme-clay {
--cx-bg-color: #ffe4e1;
--cx-card-bg: #ffffff;
--cx-text-main: #5d5d5d;
--cx-text-muted: #888;
--cx-primary: #fa8072;
--cx-radius-card: 32px;
--cx-radius-input: 20px;
}
.currencyx-theme-clay .currencyx-card {
background: #ffffff;
border-radius: 36px;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
border: none;
}
.currencyx-theme-clay .currencyx-amount-input,
.currencyx-theme-clay .currencyx-select-selected {
background: #f0f0f0;
border-radius: 20px;
box-shadow: inset 5px 5px 10px #d9d9d9, inset -5px -5px 10px #ffffff;
border: none;
}
.currencyx-theme-clay .currencyx-result {
background: #fa8072;
color: #fff;
border-radius: 24px;
box-shadow: inset 5px 5px 15px rgba(0,0,0,0.1);
border: none;
}
.currencyx-theme-clay .currencyx-result-amount { color: #fff; }

/* 8. Blueprint (Technical Dark Blue) */
.currencyx-theme-blueprint {
--cx-bg-color: #0044cc;
--cx-card-bg: #0033aa;
--cx-text-main: #ffffff;
--cx-text-muted: #88ccff;
--cx-primary: #fff;
--cx-border-color: rgba(255,255,255,0.3);
--cx-input-bg: rgba(0, 0, 0, 0.2);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.currencyx-theme-blueprint .currencyx-card {
background-color: #0033aa;
background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
border: 2px solid #fff;
border-radius: 8px;
}
.currencyx-theme-blueprint .currencyx-amount-input,
.currencyx-theme-blueprint .currencyx-select-selected {
border: 1px dashed rgba(255,255,255,0.5);
background: rgba(0,0,0,0.2);
color: #fff !important;
border-radius: 4px;
}

/* 9. Solarized (Low Contrast Code) */
.currencyx-theme-solarized {
--cx-bg-color: #fdf6e3;
--cx-card-bg: #eee8d5;
--cx-text-main: #657b83;
--cx-text-muted: #93a1a1;
--cx-primary: #268bd2; /* Blue */
--cx-primary-hover: #2aa198; /* Cyan */
--cx-border-color: #b58900; /* Yellow */
font-family: 'Inconsolata', monospace;
}
.currencyx-theme-solarized .currencyx-card {
background: #eee8d5;
border: 1px solid #d33682; /* Magenta */
box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
border-radius: 4px;
}
.currencyx-theme-solarized .currencyx-amount-input,
.currencyx-theme-solarized .currencyx-select-selected {
background: #fdf6e3;
border: 1px solid #859900; /* Green */
color: #657b83 !important;
}

/* 10. High Contrast (Accessibility) */
.currencyx-theme-contrast {
--cx-bg-color: #fff;
--cx-card-bg: #000;
--cx-text-main: #ffff00;
--cx-text-muted: #fff;
--cx-primary: #ffff00;
--cx-border-color: #fff;
--cx-input-bg: #000;
--cx-input-border: #fff;
}
.currencyx-theme-contrast .currencyx-card {
border: 4px solid #ffff00;
border-radius: 0;
}
.currencyx-theme-contrast .currencyx-amount-input,
.currencyx-theme-contrast .currencyx-select-selected {
background: #000;
color: #ffff00 !important;
border: 2px solid #fff;
font-weight: 700;
}
.currencyx-theme-contrast label {
color: #fff;
text-decoration: underline;
}