/* Mavan Dropdown Tabs — base styles (override in the widget's Style tab) */

.mavan-dd {
	/* Colors are CSS variables so the widget's Style tab can set each state:
	   --mavan-dd-{toggle|opt|hover|sel}-{bg|name|desc}, --mavan-dd-list-bg, --mavan-dd-check */
	--mavan-dd-radius: 16px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(100%, 640px);
	max-width: 100%;
}

.mavan-dd__label {font-size: .875rem; opacity: .7;}

/* Title + description */
.mavan-dd__text {display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.mavan-dd__name {font-weight: 600; font-size: 1.0625rem; line-height: 1.3;}
.mavan-dd__desc {font-size: .9375rem; line-height: 1.4; color: inherit;}

/* Text colors per area/state (description defaults to a softer shade of the text) */
.mavan-dd__toggle .mavan-dd__name {color: var(--mavan-dd-toggle-name, inherit);}
.mavan-dd__toggle .mavan-dd__desc {color: var(--mavan-dd-toggle-desc, color-mix(in srgb, currentColor 70%, transparent));}
:is(.mavan-dd__option, .mavan-dd__tab) .mavan-dd__name {color: var(--mavan-dd-opt-name, inherit);}
:is(.mavan-dd__option, .mavan-dd__tab) .mavan-dd__desc {color: var(--mavan-dd-opt-desc, color-mix(in srgb, currentColor 70%, transparent));}
:is(.mavan-dd__option:is(:hover, .is-focused), .mavan-dd .mavan-dd__tab:is(:hover, :focus-visible)) .mavan-dd__name {color: var(--mavan-dd-hover-name, var(--mavan-dd-opt-name, inherit));}
:is(.mavan-dd__option:is(:hover, .is-focused), .mavan-dd .mavan-dd__tab:is(:hover, :focus-visible)) .mavan-dd__desc {color: var(--mavan-dd-hover-desc, var(--mavan-dd-opt-desc, color-mix(in srgb, currentColor 70%, transparent)));}
.mavan-dd.mavan-dd :is(.mavan-dd__option[aria-selected="true"], .mavan-dd__tab:is([aria-selected="true"], [aria-current="page"])) .mavan-dd__name {color: var(--mavan-dd-sel-name, var(--mavan-dd-opt-name, inherit));}
.mavan-dd.mavan-dd :is(.mavan-dd__option[aria-selected="true"], .mavan-dd__tab:is([aria-selected="true"], [aria-current="page"])) .mavan-dd__desc {color: var(--mavan-dd-sel-desc, var(--mavan-dd-opt-desc, color-mix(in srgb, currentColor 70%, transparent)));}
.mavan-dd__desc[hidden] {display: none;}

/* Toggle button */
.mavan-dd__dropdown {position: relative;}
.mavan-dd .mavan-dd__toggle {display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin: 0; padding: 20px 24px; font: inherit; text-align: left; color: inherit; background: var(--mavan-dd-toggle-bg, #fff); border: 0; border-radius: var(--mavan-dd-radius); cursor: pointer;}
/* The button and tabs are role="button"/"tab" divs, not <button>s, so site-wide
   button styles (Elementor Site Settings → Buttons, Hello's reset) never apply. */
.mavan-dd .mavan-dd__toggle, .mavan-dd .mavan-dd__tab {-webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;}
.mavan-dd .mavan-dd__toggle:focus-visible {outline: 2px solid currentColor; outline-offset: 2px;}

.mavan-dd__chevron {position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .06); transition: transform .25s ease;}
.mavan-dd__chevron::after {content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg);}
.mavan-dd__toggle[aria-expanded="true"] .mavan-dd__chevron {transform: rotate(180deg);}

/* Options list */
.mavan-dd__list {position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 8px; list-style: none; background: var(--mavan-dd-list-bg, #fff); border-radius: var(--mavan-dd-list-radius, min(var(--mavan-dd-radius), 24px)); box-shadow: 0 16px 40px rgba(0, 0, 0, .12);}
.mavan-dd__list[hidden] {display: none;}

.mavan-dd__option {position: relative; margin: 0; padding: 14px 56px 14px 18px; border-radius: var(--mavan-dd-item-radius, calc(var(--mavan-dd-list-radius, min(var(--mavan-dd-radius), 24px)) - 6px)); cursor: pointer; transition: background-color .15s ease;}
.mavan-dd__option {background: var(--mavan-dd-opt-bg, transparent);}
.mavan-dd__option:is(:hover, .is-focused) {background: var(--mavan-dd-hover-bg, rgba(0, 0, 0, .04));}
.mavan-dd__option[aria-selected="true"] {background: var(--mavan-dd-sel-bg, rgba(0, 0, 0, .06));}
.mavan-dd__link {display: block; color: inherit; text-decoration: none;}
.mavan-dd__link:is(:hover, :focus) {color: inherit;}

/* Check mark on the selected option / tab */
.mavan-dd--check :is(.mavan-dd__option[aria-selected="true"], .mavan-dd__tab:is([aria-selected="true"], [aria-current="page"]))::after {content: ""; position: absolute; top: 50%; right: 24px; width: 12px; height: 6px; border-left: 1.5px solid var(--mavan-dd-check, var(--mavan-dd-sel-name, currentColor)); border-bottom: 1.5px solid var(--mavan-dd-check, var(--mavan-dd-sel-name, currentColor)); transform: translateY(-75%) rotate(-45deg);}

/* Tabs layout */
.mavan-dd__tabs {display: flex; flex-wrap: var(--mavan-dd-tabs-wrap, wrap); gap: 8px; overflow-x: var(--mavan-dd-tabs-overflow, visible); scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.mavan-dd__tabs::-webkit-scrollbar {display: none;}
.mavan-dd--tabs .mavan-dd__dropdown {display: none;}
.mavan-dd .mavan-dd__tab:is(a, div) {position: relative; display: flex; flex: var(--mavan-dd-tab-flex, 1 1 200px); margin: 0; padding: 16px 56px 16px 20px; font: inherit; text-align: left; color: inherit; text-decoration: none; background: var(--mavan-dd-opt-bg, #fff); border: 0; border-radius: var(--mavan-dd-item-radius, calc(min(var(--mavan-dd-radius), 24px) - 4px)); cursor: pointer; transition: background-color .15s ease;}
.mavan-dd .mavan-dd__tab:is(:hover, :focus) {color: inherit; background: var(--mavan-dd-hover-bg, rgba(0, 0, 0, .04));}
.mavan-dd .mavan-dd__tab:is([aria-selected="true"], [aria-current="page"]) {background: var(--mavan-dd-sel-bg, rgba(0, 0, 0, .06));}
.mavan-dd .mavan-dd__tab:focus-visible {outline: 2px solid currentColor; outline-offset: 2px;}

@media (max-width: 767px) {
	.mavan-dd--tabs.mavan-dd--mobile-dropdown .mavan-dd__dropdown {display: block;}
	.mavan-dd--tabs.mavan-dd--mobile-dropdown .mavan-dd__tabs {display: none;}
}

/* Sections hidden by a "tabs" widget (Elementor sets display on containers, hence !important) */
.mavan-dd-hidden {display: none !important;}

@media (prefers-reduced-motion: reduce) {
	.mavan-dd__chevron {transition: none;}
}