/* SCV menu popup - the panel the hamburger opens (Elementor popup 564).

   The panel is Terracotta with white labels; hover and the active item go to
   Deep Terracotta. The white lockup sits on it. Elementor plays the popup's EXIT
   animation reversed, so the document repeats the entrance name (fadeInLeft) as
   its exit and the slow-down is set here on the .reverse state. */

/* The panel: full height, terracotta, generous left padding. */
.elementor-location-popup .scv-popup-panel {
	min-height: 100vh !important;
	background-color: #C96F4E !important;
	padding: 44px 44px 48px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 34px !important;
}
.elementor-location-popup .scv-popup-logo {
	height: 64px !important;
	width: auto !important;
	max-width: none !important;
}

/* The vertical menu: uppercase, left aligned, white on the terracotta panel. */
.scv-popup-menu .elementor-nav-menu {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
}
.scv-popup-menu .elementor-nav-menu > li {
	display: block !important;
	position: static !important;
	width: 100% !important;
	margin: 0 !important;
}
.scv-popup-menu .elementor-item {
	display: block !important;
	position: static !important;
	padding: 9px 12px !important;
	font-family: Aboreto, Optima, serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	color: #FFFFFF !important;
	text-align: left !important;
	background-color: transparent !important;
}
.scv-popup-menu .elementor-item:hover,
.scv-popup-menu .elementor-item.elementor-item-active {
	background-color: #A6533C !important;
	color: #FFFFFF !important;
}

/* The sub menu caret rides at the END of the label, not on a line of its own. */
.scv-popup-menu .elementor-item .sub-arrow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 0 8px !important;
	padding: 0 !important;
	vertical-align: middle !important;
	float: none !important;
	position: static !important;
}
.scv-popup-menu .elementor-item .sub-arrow svg {
	width: 14px !important;
	height: 14px !important;
	fill: currentColor !important;
}
.scv-popup-menu .elementor-item .sub-arrow i {
	font-size: 14px !important;
	color: currentColor !important;
}

/* The dropdown under a parent item: Deep Terracotta, white labels, hovering or
   the active item lifts back to Terracotta. Elementor's sub links carry
   .elementor-sub-item, so both classes are covered. */
.scv-popup-menu .sub-menu {
	position: static !important;
	left: auto !important;
	top: auto !important;
	margin: 6px 0 2px !important;
	padding: 8px 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	background-color: #A6533C !important;
	display: none;
}
.scv-popup-menu li.menu-item-has-children:hover > .sub-menu,
.scv-popup-menu .elementor-item-active + .sub-menu {
	display: block;
}
.scv-popup-menu .sub-menu .elementor-item,
.scv-popup-menu .sub-menu .elementor-sub-item {
	display: block !important;
	padding: 8px 18px !important;
	font-family: Aboreto, Optima, serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	color: #FFFFFF !important;
	background-color: transparent !important;
	text-align: left !important;
}
.scv-popup-menu .sub-menu .elementor-item:hover,
.scv-popup-menu .sub-menu .elementor-sub-item:hover,
.scv-popup-menu .sub-menu .elementor-item.elementor-item-active,
.scv-popup-menu .sub-menu .elementor-sub-item.elementor-item-active,
.scv-popup-menu .sub-menu .elementor-item:focus,
.scv-popup-menu .sub-menu .elementor-sub-item:focus {
	background-color: #C96F4E !important;
	color: #FFFFFF !important;
}

/* The close cross: white on the terracotta panel. The glyph may be an <i>, a
   <span> or an <svg> depending on the Elementor build, so every child is hit. */
.elementor-popup-modal .dialog-close-button {
	background-color: transparent !important;
	top: 26px !important;
	right: 26px !important;
	width: 34px !important;
	height: 34px !important;
	line-height: 34px !important;
}
.elementor-popup-modal .dialog-close-button,
.elementor-popup-modal .dialog-close-button *,
.elementor-popup-modal .dialog-close-button i,
.elementor-popup-modal .dialog-close-button span,
.elementor-popup-modal .dialog-close-button svg,
.elementor-popup-modal .dialog-close-button svg path {
	color: #FFFFFF !important;
	fill: #FFFFFF !important;
}
.elementor-popup-modal .dialog-close-button {
	font-size: 22px !important;
}
.elementor-popup-modal .dialog-close-button:hover,
.elementor-popup-modal .dialog-close-button:hover * {
	color: #E7D9C6 !important;
	fill: #E7D9C6 !important;
}

/* Closing: Elementor plays the exit reversed (panel slides back out to the left).
   It runs at the entrance duration, so the slower close is set here. */
.elementor-popup-modal .dialog-widget-content.reverse {
	animation-duration: 2.5s !important;
}
