/**
 * Nav Dropdown Widget — frontend styles
 * All colors/sizes are overridden by Elementor controls via inline CSS vars/selectors.
 * This file only defines structure, defaults, and behavior-related CSS (animations, states).
 */

.ndw-wrapper {
	--ndw-indent-size: 20px;
	--ndw-depth: 0;
	--ndw-anim-duration: 180ms;
	--ndw-anim-delay: 0ms;
	--ndw-anim-easing: ease-out;
	position: relative;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	box-sizing: border-box;
}

.ndw-wrapper *,
.ndw-wrapper *::before,
.ndw-wrapper *::after {
	box-sizing: border-box;
}

/* Trigger */
.ndw-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	background: #fff;
	border: 1px solid #D8DAE0;
	border-radius: 8px;
	padding: 14px 18px;
	cursor: pointer;
	user-select: none;
	transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.ndw-trigger:focus-visible {
	outline: none;
	border-color: #3B82F6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.ndw-trigger__label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	color: #5B6470;
}

.ndw-trigger__arrow {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	display: inline-block;
	position: relative;
	transition: transform var(--ndw-anim-duration) var(--ndw-anim-easing);
}

.ndw-trigger__arrow.ndw-arrow--chevron::before,
.ndw-trigger__arrow.ndw-arrow--caret::before {
	content: "";
	position: absolute;
	top: 40%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.ndw-trigger__arrow.ndw-arrow--plus::before,
.ndw-trigger__arrow.ndw-arrow--plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.ndw-trigger__arrow.ndw-arrow--plus::before { width: 10px; height: 2px; }
.ndw-trigger__arrow.ndw-arrow--plus::after { width: 2px; height: 10px; transition: opacity var(--ndw-anim-duration) ease; }

.ndw-wrapper.is-open .ndw-trigger__arrow.ndw-rotate {
	transform: rotate(180deg);
}
.ndw-wrapper.is-open .ndw-trigger__arrow.ndw-arrow--plus::after {
	opacity: 0;
}

/* Panel */
.ndw-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	border: 1px solid #E4E6EA;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
	overflow: hidden;
	transform-origin: top center;
}

.ndw-panel[hidden] {
	display: none;
}

.ndw-wrapper.is-open .ndw-panel {
	animation-duration: var(--ndw-anim-duration);
	animation-delay: var(--ndw-anim-delay);
	animation-timing-function: var(--ndw-anim-easing);
	animation-fill-mode: both;
}

.ndw-anim--fade.ndw-panel   { animation-name: ndw-fade; }
.ndw-anim--slide.ndw-panel  { animation-name: ndw-slide; }
.ndw-anim--zoom.ndw-panel   { animation-name: ndw-zoom; }
.ndw-anim--scale.ndw-panel  { animation-name: ndw-scale; }
.ndw-anim--none.ndw-panel   { animation: none; }

@keyframes ndw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ndw-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ndw-zoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes ndw-scale { from { opacity: 0; transform: scaleY(0.9); } to { opacity: 1; transform: scaleY(1); } }

/* Search */
.ndw-search {
	padding: 8px 10px;
	border-bottom: 1px solid #EEF0F3;
}
.ndw-search input {
	width: 100%;
	border: 1px solid #E1E3E8;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 14px;
	outline: none;
	background: #F7F8FA;
}
.ndw-search input:focus {
	border-color: #3B82F6;
}

/* Heading */
.ndw-heading {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	padding: 10px 16px 6px;
	color: #2A2E36;
	cursor: default;
	pointer-events: none;
}

/* List / options */
.ndw-panel__list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	max-height: 320px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.ndw-panel__list::-webkit-scrollbar {
	width: var(--ndw-scrollbar-width, 6px);
}
.ndw-panel__list::-webkit-scrollbar-track {
	background: transparent;
}
.ndw-panel__list::-webkit-scrollbar-thumb {
	background-color: #C9CCD2;
	border-radius: 8px;
}

.ndw-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	padding-left: calc(16px + (var(--ndw-depth) * var(--ndw-indent-size)));
	font-size: 15px;
	color: #2A2E36;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 120ms ease, color 120ms ease;
}

.ndw-option:hover,
.ndw-option.is-highlighted {
	background-color: #EDEEF1;
	color: #111827;
}

.ndw-option.is-current {
	color: #3B82F6;
	font-weight: 600;
}

.ndw-option--heading {
	font-weight: 700;
	cursor: default;
	pointer-events: none;
}

.ndw-option[aria-disabled="true"] {
	cursor: not-allowed;
	color: #B0B4BB;
}

.ndw-option.ndw-has-separator {
	border-bottom: 1px solid #EAEBEE;
}

.ndw-option__prefix {
	flex: 0 0 auto;
	opacity: 0.7;
}

.ndw-option__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}
.ndw-option__icon.ndw-icon--right {
	order: 3;
	margin-left: auto;
}

.ndw-option__title {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ndw-option__caret {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.5;
}

mark.ndw-match {
	background: rgba(255, 214, 0, 0.45);
	color: inherit;
	border-radius: 2px;
	padding: 0 1px;
}

.ndw-empty {
	padding: 14px 16px;
	border: 1px dashed #D8DAE0;
	border-radius: 8px;
	color: #7A7F87;
	font-size: 14px;
}

/* Native fallback select — visually hidden, used only if JS fails to init */
.ndw-native-fallback {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.ndw-wrapper.ndw-js-failed .ndw-native-fallback {
	position: static;
	width: 100%;
	height: auto;
	margin: 0;
	clip: auto;
	padding: 12px 14px;
	font-size: 16px;
}
.ndw-wrapper.ndw-js-failed .ndw-trigger,
.ndw-wrapper.ndw-js-failed .ndw-panel {
	display: none;
}

/* Responsive visibility helpers driven by widget settings */
@media (max-width: 767px) {
	.ndw-hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.ndw-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	.ndw-hide-desktop { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ndw-panel,
	.ndw-trigger__arrow {
		animation: none !important;
		transition: none !important;
	}
}