/* VTG Category Menu — default VTG look. Everything here can be overridden from the widget's Style tab. */
.vtg-cm {
	--vtg-cm-text: var(--e-global-color-text, #35373B);
	--vtg-cm-strong: #1B2733;
	--vtg-cm-accent: #3A8FD1;
	--vtg-cm-accent-dark: var(--e-global-color-772d73c, #005B7F);
	--vtg-cm-hover-bg: #F1F7FD;
	--vtg-cm-active-bg: var(--e-global-color-21142bd, #DCEAF9);
	--vtg-cm-divider-color: #EEF1F5;
	--vtg-cm-divider-width: 1px;
	--vtg-cm-bar-color: var(--vtg-cm-accent);
	--vtg-cm-bar-width: 3px;
	--vtg-cm-indent: 14px;
	--vtg-cm-arrow-size: 12px;
	--vtg-cm-arrow-box: 36px;
	--vtg-cm-arrow-width: 48px;
	--vtg-cm-panel-gap: 8px;
	--vtg-cm-speed: .28s;
	width: 100%;
	font-size: 15px;
	line-height: 1.35;
}
.vtg-cm, .vtg-cm *, .vtg-cm *::before, .vtg-cm *::after { box-sizing: border-box; }

/* Box */
.vtg-cm__box {
	background: #fff;
	border: 1px solid #E4E8EE;
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.vtg-cm__title {
	padding: 10px 12px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6B7785;
}

/* Lists */
.vtg-cm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vtg-cm-divider-yes .vtg-cm__list--top > .vtg-cm__item + .vtg-cm__item { border-top: var(--vtg-cm-divider-width) solid var(--vtg-cm-divider-color); }
.vtg-cm__item { margin: 0; padding: 0; }

/* Row = link + arrow */
.vtg-cm__row {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 8px;
	transition: background-color .15s ease;
}
.vtg-cm__row:hover { background-color: var(--vtg-cm-hover-bg); }
.vtg-cm__item.is-current > .vtg-cm__row { background-color: var(--vtg-cm-active-bg); }
.vtg-cm__item.is-current > .vtg-cm__row::before {
	content: "";
	position: absolute;
	left: 0; top: 7px; bottom: 7px;
	width: var(--vtg-cm-bar-width);
	border-radius: 0 3px 3px 0;
	background: var(--vtg-cm-bar-color);
}

.vtg-cm .vtg-cm__link {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	margin: 0;
	padding: 11px 12px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--vtg-cm-strong);
	font: inherit;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
	cursor: pointer;
	transition: color .15s ease;
	overflow-wrap: anywhere;
}
.vtg-cm .vtg-cm__row:hover .vtg-cm__link { color: var(--vtg-cm-accent-dark); }
.vtg-cm .vtg-cm__item.is-open > .vtg-cm__row .vtg-cm__link,
.vtg-cm .vtg-cm__item.is-ancestor > .vtg-cm__row .vtg-cm__link { color: var(--vtg-cm-accent-dark); font-weight: 600; }
.vtg-cm .vtg-cm__item.is-current > .vtg-cm__row .vtg-cm__link { color: var(--vtg-cm-accent-dark); font-weight: 600; }
.vtg-cm .vtg-cm__link:focus-visible,
.vtg-cm .vtg-cm__arrow:focus-visible,
.vtg-cm .vtg-cm__toggle:focus-visible { outline: 2px solid var(--vtg-cm-accent); outline-offset: -2px; border-radius: 8px; }

/* Sub levels */
.vtg-cm__list--sub { padding: 0; }
.vtg-cm__list--sub > .vtg-cm__item:first-child { margin-top: 2px; }
.vtg-cm__list--sub > .vtg-cm__item:last-child { margin-bottom: 6px; }
.vtg-cm .vtg-cm__item--sub > .vtg-cm__row .vtg-cm__link {
	padding: 8px 12px 8px calc(26px + var(--vtg-cm-indent) * (var(--vtg-cm-level, 1) - 1));
	font-size: .9em;
	font-weight: 400;
	color: var(--vtg-cm-text);
}
.vtg-cm__item--sub > .vtg-cm__row::after {
	/* small guide line on the left of sub items */
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: calc(14px + var(--vtg-cm-indent) * (var(--vtg-cm-level, 1) - 1));
	width: 1px;
	background: #E4E8EE;
}
.vtg-cm__item--sub.is-current > .vtg-cm__row::before { left: calc(13px + var(--vtg-cm-indent) * (var(--vtg-cm-level, 1) - 1)); top: 4px; bottom: 4px; border-radius: 3px; }
.vtg-cm__item--sub + .vtg-cm__item--sub > .vtg-cm__row {
	/* thin line between sub items, starting where the text starts */
	background-image: linear-gradient(var(--vtg-cm-sub-line, #E4E8EE), var(--vtg-cm-sub-line, #E4E8EE));
	background-size: calc(100% - 26px - var(--vtg-cm-indent) * (var(--vtg-cm-level, 1) - 1)) 1px;
	background-position: right top;
	background-repeat: no-repeat;
}

.vtg-cm__count {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #EEF1F5;
	color: #6B7785;
	font-size: .78em;
	font-weight: 500;
	vertical-align: 1px;
}

/* Arrow button */
.vtg-cm .vtg-cm__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vtg-cm-arrow-width);
	height: var(--vtg-cm-arrow-box);
	margin: 0 4px 0 2px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #7A8794;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s ease, color .15s ease;
}
.vtg-cm .vtg-cm__arrow:hover { background: #E3EEF9; color: var(--vtg-cm-accent-dark); }
.vtg-cm__arrow-icon,
.vtg-cm__toggle-chevron { display: inline-flex; transition: transform var(--vtg-cm-speed) ease; line-height: 1; }
.vtg-cm__arrow-icon i, .vtg-cm__toggle-chevron i { font-size: var(--vtg-cm-arrow-size); }
.vtg-cm__arrow-icon svg, .vtg-cm__toggle-chevron svg { width: var(--vtg-cm-arrow-size); height: var(--vtg-cm-arrow-size); fill: currentColor; }
.vtg-cm__item.is-open > .vtg-cm__row .vtg-cm__arrow-icon { transform: rotate(180deg); }
.vtg-cm__item.is-open > .vtg-cm__row .vtg-cm__arrow { color: var(--vtg-cm-accent-dark); }

/* Accordion animation (grid rows 0fr -> 1fr pushes content down, never overlaps) */
.vtg-cm--js .vtg-cm__sub {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows var(--vtg-cm-speed) ease, visibility 0s linear var(--vtg-cm-speed);
}
.vtg-cm--js .vtg-cm__item.is-open > .vtg-cm__sub {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows var(--vtg-cm-speed) ease, visibility 0s;
}
.vtg-cm__sub > .vtg-cm__list { min-height: 0; overflow: hidden; }

/* Mobile/tablet toggle (hidden on desktop; breakpoint rules are added inline by the plugin) */
.vtg-cm .vtg-cm__toggle {
	display: none;
	position: relative;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 48px 13px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--vtg-cm-accent-dark);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	box-shadow: none;
	max-width: var(--vtg-cm-toggle-max, 600px);
	margin-left: auto;
	margin-right: auto;
	transition: background-color .15s ease;
}
.vtg-cm .vtg-cm__toggle:hover,
.vtg-cm.is-panel-open .vtg-cm__toggle { background: #00496A; color: #fff; }
.vtg-cm__toggle-icon { display: inline-flex; line-height: 1; }
.vtg-cm__toggle-icon svg { width: 16px; height: 16px; fill: currentColor; }
.vtg-cm__toggle-text { flex: 0 1 auto; }
.vtg-cm__toggle-chevron { position: absolute; right: 18px; top: 50%; margin-top: -.5em; height: 1em; align-items: center; }
.vtg-cm.is-panel-open .vtg-cm__toggle-chevron { transform: rotate(180deg); }
.vtg-cm__panel-inner { min-height: 0; }

/* Scroll hint: grey shadow along the box's top/bottom edge while there is more to scroll that way
   (classes set by the script). Painted as the box's own background, so it reaches the border and
   follows the rounded corners. */
.vtg-cm__box.has-more-above,
.vtg-cm__box.has-more-below {
	background-repeat: no-repeat;
	background-size: 100% var(--vtg-cm-scroll-shadow-size, 20px);
}
.vtg-cm__box.has-more-below {
	background-image: linear-gradient(to top, var(--vtg-cm-scroll-shadow, rgba(16, 24, 40, .14)), transparent);
	background-position: center bottom;
}
.vtg-cm__box.has-more-above {
	background-image: linear-gradient(to bottom, var(--vtg-cm-scroll-shadow, rgba(16, 24, 40, .14)), transparent);
	background-position: center top;
}
.vtg-cm__box.has-more-above.has-more-below {
	background-image:
		linear-gradient(to bottom, var(--vtg-cm-scroll-shadow, rgba(16, 24, 40, .14)), transparent),
		linear-gradient(to top, var(--vtg-cm-scroll-shadow, rgba(16, 24, 40, .14)), transparent);
	background-position: center top, center bottom;
}

@media (prefers-reduced-motion: reduce) {
	.vtg-cm { --vtg-cm-speed: 0s; }
}

.vtg-cm-empty { padding: 16px; border: 1px dashed #C9D2DC; border-radius: 8px; color: #6B7785; font-size: 14px; }

/* Sticky bar on tablet/mobile (class is set by the script only while the button is visible) */
.vtg-cm-holder { position: relative; }
.vtg-cm.is-stuck {
	position: fixed;
	width: auto;
	top: calc(var(--vtg-cm-adminbar, 0px) + var(--vtg-cm-sticky-top, 0px));
	left: 0;
	right: 0;
	z-index: 9990;
	padding: 8px 16px;
	background: var(--vtg-cm-stuck-bg, rgba(255, 255, 255, .96));
	box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
	-webkit-backdrop-filter: saturate(1.4) blur(6px);
	backdrop-filter: saturate(1.4) blur(6px);
}
.vtg-cm.is-stuck .vtg-cm__box {
	max-height: calc(100vh - var(--vtg-cm-adminbar, 0px) - var(--vtg-cm-sticky-top, 0px) - 90px);
	overflow-y: auto;
	overscroll-behavior: contain;
}