/**
 * All public-facing CSS styles.
 * Currency Converter for WooCommerce
 */

/* =============================================
   Base Switcher Component
   ============================================= */

.ccvt-switcher-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	line-height: 1;
}

/* "Currency" prefix label */
.ccvt-switcher-prefix {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	white-space: nowrap;
	user-select: none;
}

/* Wrapper around select + arrow icon */
.ccvt-select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* The <select> element — invisible native control */
.ccvt-currency-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	color: inherit;
	/* Right padding makes room for the SVG arrow */
	padding: 0 20px 0 0;
	margin: 0;
	line-height: inherit;
}

.ccvt-currency-select::-ms-expand {
	display: none;
}

.ccvt-currency-select:focus {
	outline: none;
	box-shadow: none;
}

/* SVG chevron arrow — absolutely positioned at the right */
.ccvt-select-arrow {
	pointer-events: none;
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	color: inherit;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.ccvt-switcher-wrapper:hover .ccvt-select-arrow {
	opacity: 1;
}

/* =============================================
   Default / storefront_header position
   ============================================= */

.site-header .ccvt-switcher-wrapper {
	float: right;
	margin-top: 15px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 20px;
}

@media (max-width: 768px) {
	.site-header .ccvt-switcher-wrapper {
		float: none;
		display: flex;
		justify-content: center;
		margin: 10px auto;
		max-width: 180px;
	}
}

/* =============================================
   Menu Item Mode (wp_nav_menu_items injection)
   Matches Storefront nav <li><a> appearance
   ============================================= */

/* The injected <li> — behaves like any other menu item */
li.ccvt-menu-item {
	display: inline-flex !important;
	align-items: center;
	list-style: none;
}

/* ── Primary Navigation ────────────────────── */
/* Storefront primary nav <a> uses:
   padding: 1.618em 1em, font-size: 1em (inherited), color from theme */

.primary-navigation li.ccvt-menu-item .ccvt-switcher-wrapper {
	/* Match exactly the padding Storefront applies to nav links */
	padding: 1.618em 1em;
	gap: 5px;
	color: inherit;
}

.primary-navigation li.ccvt-menu-item .ccvt-switcher-prefix {
	font-size: 1em;
	font-weight: 400;
	color: inherit;
	opacity: 0.85;
}

.primary-navigation li.ccvt-menu-item .ccvt-currency-select {
	font-size: 1em;
	font-weight: 700;
	color: inherit;
	padding-right: 18px;
}

.primary-navigation li.ccvt-menu-item .ccvt-select-arrow svg {
	width: 11px;
	height: 11px;
}

/* Hover: match the theme's nav link hover (usually opacity or underline) */
.primary-navigation li.ccvt-menu-item:hover .ccvt-switcher-wrapper {
	color: inherit;
	opacity: 0.8;
}

/* ── Secondary Navigation ──────────────────── */
/* Storefront secondary nav <a> uses:
   padding: 1em .875em, font-size: .875em, color: #737781, font-weight: 400 */

.secondary-navigation li.ccvt-menu-item .ccvt-switcher-wrapper {
	padding: 1em 0.875em;
	gap: 4px;
	color: inherit;
}

.secondary-navigation li.ccvt-menu-item .ccvt-switcher-prefix {
	font-size: 1rem;
	font-weight: 400;
	color: inherit;
	opacity: 0.85;
}

.secondary-navigation li.ccvt-menu-item .ccvt-currency-select {
	font-size: 1rem;
	font-weight: 700;
	color: inherit;
	padding-right: 16px;
}

.secondary-navigation li.ccvt-menu-item .ccvt-select-arrow svg {
	width: 10px;
	height: 10px;
}

.secondary-navigation li.ccvt-menu-item:hover .ccvt-switcher-wrapper {
	color: inherit;
	opacity: 0.8;
}