/**
 * Live Currency Switcher — Premium front-end styles.
 *
 * Color strategy:
 *  - Toggle pill: inherits the parent's text color via `currentColor`
 *    so it automatically matches any header / nav / footer it lives in.
 *  - Selected option accent: reads Blocksy's --theme-palette-color-1
 *    (falls back to a neutral blue on other themes).
 *  - Dropdown card: solid white background so it's readable above any
 *    header color; theme can override --lcs-dropdown-bg.
 */

/* ── Custom properties (override in child-theme CSS if needed) ── */
.lcs-switcher {
	--lcs-accent:       var(--theme-palette-color-1, #2563eb);
	--lcs-accent-text:  #ffffff;
	--lcs-dropdown-bg:  var(--wp--preset--color--background, #ffffff);
	--lcs-item-hover:   rgba(0, 0, 0, 0.05);
	--lcs-radius-pill:  100px;
	--lcs-radius-card:  14px;
	--lcs-radius-item:  9px;
	--lcs-shadow:       0 8px 30px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
	--lcs-border:       rgba(0, 0, 0, 0.10);
	--lcs-duration:     0.18s;

	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: inherit;
}

/* ── Toggle pill button ── */
.lcs-switcher__toggle {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	padding:        6px 12px 6px 8px;
	background:     transparent;
	border:         1.5px solid currentColor;
	border-radius:  var(--lcs-radius-pill);
	color:          inherit;
	font:           inherit;
	font-size:      0.875em;
	font-weight:    600;
	letter-spacing: 0.01em;
	cursor:         pointer;
	opacity:        0.82;
	transition:     background var(--lcs-duration) ease,
	                opacity    var(--lcs-duration) ease,
	                border-color var(--lcs-duration) ease;
	white-space:    nowrap;
	line-height:    1;
}

.lcs-switcher__toggle:hover,
.lcs-switcher__toggle:focus-visible {
	opacity:    1;
	background: transparent;
	outline:    none;
}

/* Flag */
.lcs-switcher__flag {
	font-size:   1.25em;
	line-height: 1;
	display:     inline-block;
}

/* Code label */
.lcs-switcher__code {
	letter-spacing: 0.04em;
}

/* Chevron icon */
.lcs-switcher__chevron {
	width:      11px;
	height:     11px;
	flex-shrink: 0;
	opacity:    0.65;
	transition: transform var(--lcs-duration) ease;
}

.lcs-switcher--open .lcs-switcher__chevron {
	transform: rotate(180deg);
}

/* Loading state — replace chevron with a spinner */
.lcs-switcher--loading .lcs-switcher__toggle {
	opacity:        0.55;
	cursor:         wait;
	pointer-events: none;
}

.lcs-switcher--loading .lcs-switcher__chevron {
	border:        1.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation:     lcs-spin 0.65s linear infinite;
	background:    transparent;
}

.lcs-switcher--loading .lcs-switcher__chevron path {
	display: none;
}

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

/* ── Dropdown card ── */
.lcs-switcher__dropdown {
	position:      absolute;
	top:           calc(100% + 8px);
	left:          0;
	z-index:       99999;
	min-width:     210px;
	margin:        0;
	padding:       6px;
	list-style:    none;
	background:    var(--lcs-dropdown-bg);
	border-radius: var(--lcs-radius-card);
	border:        1px solid var(--lcs-border);
	box-shadow:    var(--lcs-shadow);
	animation:     lcs-dropdown-in var(--lcs-duration) ease both;
}

.lcs-switcher__dropdown[hidden] {
	display: none;
}

@keyframes lcs-dropdown-in {
	from {
		opacity:   0;
		transform: translateY(-6px) scale(0.97);
	}
	to {
		opacity:   1;
		transform: translateY(0) scale(1);
	}
}

/* ── Option rows ── */
.lcs-switcher__option {
	display:       flex;
	align-items:   center;
	gap:           10px;
	padding:       9px 11px;
	border-radius: var(--lcs-radius-item);
	cursor:        pointer;
	color:         #1a1a1a;
	transition:    background var(--lcs-duration) ease;
	outline:       none;
	user-select:   none;
}

.lcs-switcher__option:hover,
.lcs-switcher__option:focus-visible {
	background: var(--lcs-item-hover);
}

/* Active / selected option */
.lcs-switcher__option[aria-selected="true"] {
	background: var(--lcs-accent);
	color:      var(--lcs-accent-text);
}

.lcs-switcher__option[aria-selected="true"]:hover,
.lcs-switcher__option[aria-selected="true"]:focus-visible {
	background: var(--lcs-accent);
	filter:     brightness(1.08);
}

/* Flag in option */
.lcs-switcher__option-flag {
	font-size:   1.3em;
	line-height: 1;
	flex-shrink: 0;
}

/* Currency code */
.lcs-switcher__option-code {
	font-weight:    700;
	font-size:      0.88em;
	letter-spacing: 0.04em;
	flex-shrink:    0;
	min-width:      36px;
}

/* Currency name */
.lcs-switcher__option-name {
	font-size:     0.82em;
	opacity:       0.68;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.lcs-switcher__option[aria-selected="true"] .lcs-switcher__option-name {
	opacity: 0.88;
}

/* ── RTL ── */
[dir="rtl"] .lcs-switcher__dropdown,
body.rtl .lcs-switcher__dropdown {
	left:  auto;
	right: 0;
}

/* ── Tablet + Mobile (≤ 900px) — flag + code only, no country name ── */
@media (max-width: 900px) {
	.lcs-switcher__option-name {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE — researched breakpoints:
   • Tablet  ≤ 768px  — Medium Android / iPad mini
   • Mobile  ≤ 480px  — Standard phones (375-428px viewport)
   • Small   ≤ 360px  — Compact Android (Samsung Galaxy A-series etc.)
   Touch target floor = 44px (Apple HIG / WCAG 2.5.5)
   ───────────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {
	.lcs-switcher__option {
		min-height: 44px;
		padding: 10px 12px;
	}

	.lcs-switcher__option-flag {
		font-size: 1.35em;
	}

	.lcs-switcher__dropdown {
		min-width: 200px;
	}
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
	/* Toggle: taller touch target, slightly smaller text */
	.lcs-switcher__toggle {
		min-height:  44px;
		padding:     10px 14px 10px 10px;
		font-size:   0.84em;
		gap:         5px;
	}

	/* Dropdown: clamp width to viewport, anchor to right to avoid left overflow */
	.lcs-switcher__dropdown {
		left:         auto;
		right:        0;
		width:        calc(100vw - 24px);
		max-width:    300px;
		min-width:    unset;
		border-radius: 12px;
		padding:      4px;
	}

	/* Options: comfortable touch targets */
	.lcs-switcher__option {
		min-height: 48px;
		padding:    12px 14px;
		gap:        12px;
		border-radius: 8px;
	}

	.lcs-switcher__option-flag {
		font-size: 1.4em;
	}

	.lcs-switcher__option-code {
		font-size:  0.9em;
		min-width:  34px;
	}
}

/* ── RTL + Mobile: flip anchor ── */
@media (max-width: 480px) {
	[dir="rtl"] .lcs-switcher__dropdown,
	body.rtl .lcs-switcher__dropdown {
		right: auto;
		left:  0;
	}
}

/* ── Small phones (≤ 360px) — Samsung Galaxy A, etc. ── */
@media (max-width: 360px) {
	.lcs-switcher__toggle {
		padding:   9px 12px 9px 9px;
		font-size: 0.8em;
	}

	.lcs-switcher__dropdown {
		width:     calc(100vw - 16px);
		max-width: unset;
		padding:   3px;
	}

	.lcs-switcher__option {
		padding: 11px 12px;
		gap:     10px;
	}
}