/**
 * Woo Essential - Currency Switcher (front-end base styles).
 * Kept intentionally neutral; the Divi module layers its own design controls on top.
 */

.dnwooe-currency-switcher {
	display: inline-block;
	position: relative;
	font-size: 14px;
	line-height: 1.4;
}

.dnwooe-currency-switcher .dnwooe-cs-flag {
	font-size: 1.1em;
	line-height: 1;
}

/* <button> and <select> do not inherit typography from their container: the UA
   stylesheet gives them their own font. Without this the module's Switcher Font
   settings (family / size / weight / style / spacing) would style the wrapper
   and never reach the visible control text. */
.dnwooe-currency-switcher .dnwooe-cs-toggle,
.dnwooe-currency-switcher .dnwooe-cs-button,
.dnwooe-currency-switcher .dnwooe-cs-select {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: inherit;
	color: inherit;
}

.dnwooe-currency-switcher img.dnwooe-cs-flag {
	display: inline-block;
	width: 20px;
	height: 15px;
	border-radius: 2px;
	object-fit: cover;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
	flex-shrink: 0;
	vertical-align: middle;
}

/* ---- Dropdown ---- */
.dnwooe-currency-switcher--dropdown .dnwooe-cs-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	cursor: pointer;
}

.dnwooe-currency-switcher--dropdown .dnwooe-cs-caret {
	font-size: 0.7em;
	transition: transform 0.15s ease;
}

.dnwooe-currency-switcher--dropdown.is-open .dnwooe-cs-caret {
	transform: rotate(180deg);
}

.dnwooe-currency-switcher--dropdown .dnwooe-cs-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 999;
	min-width: 100%;
	/* !important guards against theme content-list styles (e.g. Divi's
	   `#left-area ul { padding: 0 0 23px 1em; }`) leaking into the menu. */
	margin: 0 !important;
	padding: 4px 0 !important;
	list-style: none !important;
	line-height: 1.4;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	display: none;
}

.dnwooe-currency-switcher--dropdown.is-open .dnwooe-cs-menu {
	display: block;
}

.dnwooe-currency-switcher--dropdown .dnwooe-cs-option {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 6px 12px;
	list-style: none;
	cursor: pointer;
	white-space: nowrap;
}

.dnwooe-currency-switcher--dropdown .dnwooe-cs-option:hover,
.dnwooe-currency-switcher--dropdown .dnwooe-cs-option.is-active {
	background: rgba(0, 0, 0, 0.05);
}

/* ---- Buttons ---- */
.dnwooe-currency-switcher--buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dnwooe-currency-switcher--buttons .dnwooe-cs-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	cursor: pointer;
}

.dnwooe-currency-switcher--buttons .dnwooe-cs-button.is-active {
	background: #6c4fff;
	border-color: #6c4fff;
	color: #fff;
}

/* ---- Global site-wide placements ---- */

/* Fixed positioning lives on this outer wrapper: .dnwooe-currency-switcher
   itself must stay position:relative for its absolute dropdown menu. */
.dnwooe-cs-global--floating {
	position: fixed;
	z-index: 99999;
}

/* --dnwooe-cs-offset-x / -y are printed inline from the admin's floating
   offset settings; the fallbacks keep the original 24px corner gap. */
.dnwooe-cs-global--bottom-right {
	right: var(--dnwooe-cs-offset-x, 24px);
	bottom: var(--dnwooe-cs-offset-y, 24px);
}

.dnwooe-cs-global--bottom-left {
	left: var(--dnwooe-cs-offset-x, 24px);
	bottom: var(--dnwooe-cs-offset-y, 24px);
}

.dnwooe-cs-global--top-right {
	right: var(--dnwooe-cs-offset-x, 24px);
	top: var(--dnwooe-cs-offset-y, 24px);
}

.dnwooe-cs-global--top-left {
	left: var(--dnwooe-cs-offset-x, 24px);
	top: var(--dnwooe-cs-offset-y, 24px);
}

/* Keep top corners clear of the WP admin bar. */
body.admin-bar .dnwooe-cs-global--top-right,
body.admin-bar .dnwooe-cs-global--top-left {
	top: calc(var(--dnwooe-cs-offset-y, 24px) + 32px);
}

/* Bottom corners: open the dropdown menu upward so it stays in the viewport. */
.dnwooe-cs-global--bottom-right .dnwooe-cs-menu,
.dnwooe-cs-global--bottom-left .dnwooe-cs-menu {
	top: auto;
	bottom: calc(100% + 4px);
}

/* Right corners: right-align the menu so it can't overflow the viewport edge. */
.dnwooe-cs-global--bottom-right .dnwooe-cs-menu,
.dnwooe-cs-global--top-right .dnwooe-cs-menu {
	left: auto;
	right: 0;
}

/* Floating switcher gets a little elevation so it reads as an overlay. */
.dnwooe-cs-global--floating .dnwooe-cs-toggle,
.dnwooe-cs-global--floating .dnwooe-cs-button,
.dnwooe-cs-global--floating .dnwooe-cs-select {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Switcher appended to the header navigation as a menu item. Menu links sit
   at the top of their li on a 1em line box (the li grows only by the link's
   padding-bottom), so centering on the whole li puts the switcher below the
   link text. Collapse our item to that same 1em line box and let the taller
   control overflow it evenly, which centers it on the link text. !important
   beats Divi's `#top-menu li` / Menu module `> ul > li` display rules. */
li.dnwooe-cs-menu-item {
	display: inline-flex !important;
	align-items: center;
	align-self: flex-start;
	height: 1em;
	line-height: 1.4;
	vertical-align: top;
}

li.dnwooe-cs-menu-item > .dnwooe-currency-switcher {
	align-self: center;
}

li.dnwooe-cs-menu-item .dnwooe-currency-switcher {
	font-size: 14px;
	font-weight: 400;
}

/* Divi treats any ul inside a nav li as a submenu and hides it with
   visibility/opacity (plus a 240px width and hover transitions). Undo that
   for the switcher's own dropdown — its visibility is governed solely by
   the .is-open display toggle. */
li.dnwooe-cs-menu-item .dnwooe-cs-menu {
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	min-width: 100%;
	transform: none !important;
	transition: none !important;
}

li.dnwooe-cs-menu-item .dnwooe-cs-menu li {
	margin: 0 !important;
	padding: 6px 12px !important;
}

/* Divi clones the menu into .et_mobile_menu; give the item breathing room
   in the stacked mobile list. */
.et_mobile_menu li.dnwooe-cs-menu-item {
	display: block !important;
	height: auto;
	padding: 10px 5%;
}

/* ---- Select ---- */
.dnwooe-currency-switcher--select .dnwooe-cs-select {
	padding: 6px 28px 6px 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	cursor: pointer;
}

/* ---- Dropdown designs (card / country / pill / inline) ----
   Wrapper carries .dnwooe-cs-rich plus .dnwooe-cs-design--{design}.
   Selectors keep the same specificity as the base dropdown rules above so
   they replace them here, while the Style tab inline CSS (printed after
   this file) and the Divi module's order-class settings still win. */

.dnwooe-cs-rich {
	--dnwooe-cs-accent: #373dfa;
	--dnwooe-cs-accent-soft: #e9eaff;
	--dnwooe-cs-line: #e4e6f0;
	--dnwooe-cs-hover: #f1f2f9;
	--dnwooe-cs-ink: #0f1222;
	--dnwooe-cs-muted: #5b6078;
	--dnwooe-cs-faint: #8a8fa8;
	color: var(--dnwooe-cs-ink);
}

.dnwooe-cs-rich .dnwooe-cs-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 12px 0 10px;
	border: 1px solid var(--dnwooe-cs-line);
	border-radius: 10px;
	background: #fff;
	font-weight: 600;
	transition: background 0.15s, border-color 0.15s;
}

.dnwooe-cs-rich .dnwooe-cs-toggle:hover {
	background: var(--dnwooe-cs-hover);
	border-color: #d9dbe8;
}

.dnwooe-cs-rich.is-open .dnwooe-cs-toggle {
	border-color: var(--dnwooe-cs-accent);
}

.dnwooe-cs-rich .dnwooe-cs-toggle-content {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dnwooe-cs-rich .dnwooe-cs-chevron {
	flex-shrink: 0;
	opacity: 0.65;
	transition: transform 0.18s ease;
}

.dnwooe-cs-rich.is-open .dnwooe-cs-chevron {
	transform: rotate(180deg);
}

.dnwooe-cs-rich .dnwooe-cs-menu {
	min-width: max(100%, 220px);
	/* !important: see the base menu rule (theme list styles). */
	padding: 8px !important;
	border: 1px solid var(--dnwooe-cs-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 18, 34, 0.04), 0 16px 40px -8px rgba(15, 18, 34, 0.16);
}

.dnwooe-cs-rich.is-open .dnwooe-cs-menu {
	animation: dnwooe-cs-menu-in 0.16s ease-out;
}

@keyframes dnwooe-cs-menu-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.dnwooe-cs-rich .dnwooe-cs-menu-title {
	margin: 0 !important;
	padding: 8px 10px 6px;
	list-style: none;
	color: var(--dnwooe-cs-faint);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dnwooe-cs-rich .dnwooe-cs-option {
	gap: 12px;
	margin: 0 0 2px !important;
	padding: 8px 10px;
	border-radius: 10px;
	transition: background 0.12s;
}

.dnwooe-cs-rich .dnwooe-cs-option:hover {
	background: var(--dnwooe-cs-hover);
}

.dnwooe-cs-rich .dnwooe-cs-option.is-active {
	background: var(--dnwooe-cs-accent-soft);
	color: var(--dnwooe-cs-accent);
}

.dnwooe-cs-rich .dnwooe-cs-option img.dnwooe-cs-flag {
	width: 24px;
	height: 18px;
	border-radius: 4px;
}

.dnwooe-cs-rich .dnwooe-cs-option-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.dnwooe-cs-rich .dnwooe-cs-option-title {
	font-weight: 600;
	line-height: 1.3;
}

.dnwooe-cs-rich .dnwooe-cs-option-sub {
	overflow: hidden;
	color: var(--dnwooe-cs-muted);
	font-size: 0.86em;
	line-height: 1.35;
	text-overflow: ellipsis;
}

.dnwooe-cs-rich .dnwooe-cs-option-meta {
	color: var(--dnwooe-cs-muted);
	font-size: 0.93em;
	font-weight: 500;
}

.dnwooe-cs-rich .dnwooe-cs-check {
	flex-shrink: 0;
	color: var(--dnwooe-cs-accent);
	opacity: 0;
}

.dnwooe-cs-rich .dnwooe-cs-option.is-active .dnwooe-cs-check {
	opacity: 1;
}

/* Country: two-line toggle ("Currency" / "United States · USD"). */
.dnwooe-cs-design--country .dnwooe-cs-toggle {
	min-height: 48px;
	padding: 4px 12px 4px 10px;
	text-align: left;
}

.dnwooe-cs-design--country .dnwooe-cs-toggle-text {
	display: flex;
	flex-direction: column;
}

.dnwooe-cs-design--country .dnwooe-cs-eyebrow {
	color: var(--dnwooe-cs-faint);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
}

.dnwooe-cs-design--country .dnwooe-cs-toggle-value {
	line-height: 1.35;
}

.dnwooe-cs-design--country .dnwooe-cs-menu {
	min-width: max(100%, 260px);
}

/* Pill: rounded, elevated trigger (suits the floating placement). */
.dnwooe-cs-design--pill .dnwooe-cs-toggle {
	min-height: 44px;
	padding: 0 14px 0 8px;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(15, 18, 34, 0.06), 0 8px 24px -8px rgba(15, 18, 34, 0.25);
}

.dnwooe-cs-design--pill .dnwooe-cs-toggle img.dnwooe-cs-flag {
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

/* Inline: "Currency:" label with a compact, borderless trigger. */
.dnwooe-currency-switcher.dnwooe-cs-design--inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dnwooe-cs-design--inline .dnwooe-cs-prefix {
	color: var(--dnwooe-cs-muted);
}

.dnwooe-cs-design--inline .dnwooe-cs-toggle {
	gap: 6px;
	min-height: 32px;
	padding: 0 8px;
	border-color: transparent;
	border-radius: 8px;
	background: var(--dnwooe-cs-hover);
}

.dnwooe-cs-design--inline .dnwooe-cs-menu {
	left: auto;
	right: 0;
	min-width: max(100%, 180px);
}

.dnwooe-cs-design--inline .dnwooe-cs-option {
	padding: 7px 10px;
}

/* Header menu placement: its generic `li` padding reset would flatten the
   designed rows. */
li.dnwooe-cs-menu-item .dnwooe-cs-rich .dnwooe-cs-menu li.dnwooe-cs-option {
	padding: 8px 10px !important;
}

li.dnwooe-cs-menu-item .dnwooe-cs-rich .dnwooe-cs-menu li.dnwooe-cs-menu-title {
	padding: 8px 10px 6px !important;
}