/**
 * Neha Currency Switcher - Frontend Styles
 *
 * Supports both automatic Cart Attachment and Kadence Header HTML box (Shortcode).
 *
 * @package Neha_Currency_Switcher
 */

/* ========================================================
   1. TRIGGER BUTTON & BASE SWITCHER
   ======================================================== */

.ncs-switcher {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	user-select: none !important;
	vertical-align: middle !important;
	line-height: 1 !important;
}

/* Ensure Kadence Header Cart inner wrap displays as an inline flex row */
.header-cart-inner-wrap {
	display: inline-flex !important;
	align-items: center !important;
}

/* Desktop Cart Attachment: clean gap between flag and cart */
.header-cart-inner-wrap .ncs-header-switcher {
	margin-right: 12px !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* Shortcode inside Kadence Header HTML block */
.site-header-item .header-html,
.site-header-item .header-html-inner {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
}

.site-header-item .ncs-header-switcher {
	display: inline-flex !important;
	align-items: center !important;
}

/* Trigger button */
.ncs-trigger {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	outline: none !important;
	line-height: 1 !important;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.ncs-trigger:hover {
	opacity: 0.85 !important;
	transform: scale(1.05);
}

.ncs-flag {
	width: 24px !important;
	height: 16px !important;
	min-width: 24px !important;
	object-fit: cover !important;
	border-radius: 2px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
	display: block !important;
}

/* ========================================================
   2. DROPDOWN MENU
   ======================================================== */

.ncs-dropdown {
	display: none;
	position: absolute !important;
	top: calc(100% + 10px) !important;
	right: 0 !important;
	background-color: #FAF5EE !important;
	border: 1px solid #e5dacb !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
	min-width: 145px !important;
	padding: 6px 0 !important;
	z-index: 999999 !important;
}

.ncs-switcher.open .ncs-dropdown {
	display: block !important;
	animation: ncsFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ncsFadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Dropdown Item */
.ncs-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 14px !important;
	text-decoration: none !important;
	color: #3b2818 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	transition: background-color 0.15s ease !important;
}

.ncs-item:hover {
	background-color: #ede2d2 !important;
	color: #24160c !important;
}

.ncs-item.active {
	font-weight: 700 !important;
	background-color: rgba(179, 93, 72, 0.12) !important;
	color: #8c3b28 !important;
}

.ncs-item .ncs-flag {
	width: 20px !important;
	height: 13px !important;
	min-width: 20px !important;
	border-radius: 2px !important;
}

.ncs-item .ncs-symbol {
	margin-left: auto !important;
	color: #765230 !important;
	font-weight: 600 !important;
}

/* ========================================================
   3. MOBILE RESPONSIVE (DOCK FAR RIGHT BESIDE CART)
   ======================================================== */

@media (max-width: 900px) {
	/* Ensure right header section stays right-aligned */
	#mobile-header .site-header-section-right,
	.site-mobile-header-wrap .site-header-section-right {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		margin-left: auto !important;
		flex: 0 0 auto !important;
	}

	.header-mobile-cart-wrap,
	.header-mobile-cart-wrap .header-cart-inner-wrap {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	/* Tight 6px gap between flag and cart button on mobile */
	.header-mobile-cart-wrap .ncs-header-switcher,
	#mobile-header .ncs-header-switcher {
		margin-right: 6px !important;
		margin-left: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		flex: 0 0 auto !important;
	}

	/* Remove giant default button padding in Kadence mobile cart */
	.header-mobile-cart-wrap .header-cart-inner-wrap .header-cart-button,
	#mobile-header .header-cart-button {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	.ncs-header-switcher .ncs-flag {
		width: 22px !important;
		height: 15px !important;
		min-width: 22px !important;
	}

	/* Prevent dropdown running off screen */
	.ncs-dropdown {
		right: -10px !important;
	}
}

/* ========================================================
   4. FULL / STANDALONE SHORTCODE ([neha_currency_switcher style="full"])
   ======================================================== */

.ncs-standalone-switcher .ncs-trigger {
	gap: 8px;
	padding: 6px 12px !important;
	background: #FAF5EE !important;
	border: 1px solid #e0d3c1 !important;
	border-radius: 6px !important;
	color: #3b2818 !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
}