/*
 * MVP The7 Essentials — structural styles.
 *
 * Original CSS written to reproduce the layout observed in the site's own rendered
 * output. Colour, spacing and typography are NOT set here: those come from the
 * per-widget controls, so they stay editable in Elementor and survive a CSS regen.
 * Only the structural rules the markup depends on live in this file.
 */

/* ------------------------------------------------------------------ *
 * Icon box (single) and icon box grid — shared box internals
 * ------------------------------------------------------------------ */

.elementor-widget-the7_icon_box_widget .the7-box-wrapper,
.elementor-widget-the7_icon_box_grid_widget .the7-icon-box-grid {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	box-sizing: border-box;
	height: 100%;
}

.elementor-widget-the7_icon_box_widget .box-content-wrapper,
.elementor-widget-the7_icon_box_grid_widget .box-content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
}

.elementor-widget-the7_icon_box_widget .elementor-icon-div,
.elementor-widget-the7_icon_box_grid_widget .elementor-icon-div {
	display: flex;
	flex: 0 0 auto;
	text-decoration: none;
}

.elementor-widget-the7_icon_box_widget .elementor-icon,
.elementor-widget-the7_icon_box_grid_widget .elementor-icon,
.elementor-widget-the7_icon_widget .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	line-height: 1;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.elementor-widget-the7_icon_box_widget .box-content,
.elementor-widget-the7_icon_box_grid_widget .box-content {
	min-width: 0;
}

.elementor-widget-the7_icon_box_widget .box-heading,
.elementor-widget-the7_icon_box_grid_widget .box-heading {
	margin: 0;
}

.elementor-widget-the7_icon_box_widget .box-heading a,
.elementor-widget-the7_icon_box_grid_widget .box-heading a {
	color: inherit;
	text-decoration: none;
}

.elementor-widget-the7_icon_box_widget .box-description > p:last-child,
.elementor-widget-the7_icon_box_grid_widget .box-description > p:last-child {
	margin-bottom: 0;
}

/* Icon placement relative to the content ---------------------------- */

.icon-position-top .box-content-wrapper {
	flex-direction: column;
}

.icon-position-left .box-content-wrapper {
	flex-direction: row;
}

.icon-position-right .box-content-wrapper {
	flex-direction: row-reverse;
}

/* Horizontal alignment of the content ------------------------------- */

.content-align-left .box-content-wrapper {
	align-items: flex-start;
	text-align: left;
}

.content-align-center .box-content-wrapper {
	align-items: center;
	text-align: center;
}

.content-align-right .box-content-wrapper {
	align-items: flex-end;
	text-align: right;
}

/* In a row layout the cross axis is vertical, so alignment classes move
   to justify-content and the icon gets its own vertical alignment. */

.icon-position-left.content-align-left .box-content-wrapper,
.icon-position-right.content-align-left .box-content-wrapper {
	justify-content: flex-start;
}

.icon-position-left.content-align-center .box-content-wrapper,
.icon-position-right.content-align-center .box-content-wrapper {
	justify-content: center;
}

.icon-position-left.content-align-right .box-content-wrapper,
.icon-position-right.content-align-right .box-content-wrapper {
	justify-content: flex-end;
}

.icon-vertical-align-start .elementor-icon-div {
	align-self: flex-start;
}

.icon-vertical-align-center .elementor-icon-div {
	align-self: center;
}

.icon-vertical-align-end .elementor-icon-div {
	align-self: flex-end;
}

/* Vertical alignment of the whole box ------------------------------- */

.icon-box-vertical-align-top .the7-box-wrapper,
.icon-box-vertical-align-top .the7-icon-box-grid {
	justify-content: flex-start;
}

.icon-box-vertical-align-center .the7-box-wrapper,
.icon-box-vertical-align-center .the7-icon-box-grid {
	justify-content: center;
}

.icon-box-vertical-align-bottom .the7-box-wrapper,
.icon-box-vertical-align-bottom .the7-icon-box-grid {
	justify-content: flex-end;
}

/* ------------------------------------------------------------------ *
 * Icon box grid
 * ------------------------------------------------------------------ */

.elementor-widget-the7_icon_box_grid_widget .dt-css-grid {
	--mvp-the7-columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--mvp-the7-columns), minmax(0, 1fr));
	width: 100%;
}

.elementor-widget-the7_icon_box_grid_widget .wf-cell {
	display: flex;
	min-width: 0;
}

.elementor-widget-the7_icon_box_grid_widget .the7-icon-box-grid {
	width: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * Standalone icon
 * ------------------------------------------------------------------ */

.elementor-widget-the7_icon_widget .the7-icon-wrapper {
	display: flex;
}

.elementor-align-left .the7-icon-wrapper,
.elementor-align-left .elementor-button-wrapper {
	justify-content: flex-start;
}

.elementor-align-center .the7-icon-wrapper,
.elementor-align-center .elementor-button-wrapper {
	justify-content: center;
}

.elementor-align-right .the7-icon-wrapper,
.elementor-align-right .elementor-button-wrapper {
	justify-content: flex-end;
}

/* ------------------------------------------------------------------ *
 * Button
 * ------------------------------------------------------------------ */

.elementor-widget-the7_button_widget .elementor-button-wrapper {
	display: flex;
}

.elementor-widget-the7_button_widget .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
	border: none;
	background: none;
	text-decoration: none;
	line-height: 1;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.elementor-widget-the7_button_widget .elementor-button.no-text {
	gap: 0;
}

.elementor-widget-the7_button_widget .elementor-align-justify .elementor-button {
	width: 100%;
}

/* Default padding per size. Any explicit padding control overrides these. */
.elementor-widget-the7_button_widget .elementor-size-xs { padding: 8px 16px; }
.elementor-widget-the7_button_widget .elementor-size-sm { padding: 10px 20px; }
.elementor-widget-the7_button_widget .elementor-size-md { padding: 13px 26px; }
.elementor-widget-the7_button_widget .elementor-size-lg { padding: 16px 34px; }
.elementor-widget-the7_button_widget .elementor-size-xl { padding: 20px 42px; }

/* ------------------------------------------------------------------ *
 * Search form
 * ------------------------------------------------------------------ */

.elementor-widget-the7-search-form-widget .the7-search-form {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
}

.elementor-widget-the7-search-form-widget .the7-search-input__container {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.elementor-widget-the7-search-form-widget .the7-search-form__input {
	width: 100%;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

.elementor-widget-the7-search-form-widget .the7-search-form__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.elementor-widget-the7-search-form-widget .the7-search-form__submit,
.elementor-widget-the7-search-form-widget .the7-clear-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: color .3s ease, background-color .3s ease;
}

/* The clear button only earns its space once the field has something in it. */
.elementor-widget-the7-search-form-widget .the7-search-form__input:placeholder-shown ~ .the7-clear-search {
	opacity: 0;
	pointer-events: none;
}

.elementor-widget-the7-search-form-widget.the7-search-form-icon-position-outside .the7-search-form__submit {
	margin-left: auto;
}

/* ------------------------------------------------------------------ *
 * Menus (vertical + horizontal)
 * ------------------------------------------------------------------ */

.dt-nav-menu,
.dt-nav-menu-horizontal,
.dt-sub-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dt-nav-menu {
	display: flex;
	flex-direction: column;
}

.dt-nav-menu > li > a,
.dt-nav-menu-horizontal > li > a,
.dt-sub-nav > li > a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: color .3s ease;
}

.dt-nav-menu > li > a {
	justify-content: space-between;
	gap: 8px;
}

.dt-nav-menu_align-left .dt-nav-menu > li > a  { justify-content: flex-start; }
.dt-nav-menu_align-center .dt-nav-menu > li > a { justify-content: center; }
.dt-nav-menu_align-right .dt-nav-menu > li > a { justify-content: flex-end; }

.next-level-button {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	line-height: 1;
}

/* Only one of the pair shows at a time: closed by default, swapped when open. */
.next-level-button .icon-active,
.dt-nav-menu li.submenu-open > a .next-level-button .open-button {
	display: none;
}

.dt-nav-menu li.submenu-open > a .next-level-button .icon-active {
	display: inline-flex;
}

/* Submenus are collapsed until opened, except in "always" mode. */
.dt-sub-menu-display-on_click .dt-sub-nav,
.dt-sub-menu-display-on_hover .dt-sub-nav {
	display: none;
}

.dt-sub-menu-display-on_click li.submenu-open > .dt-sub-nav,
.dt-sub-menu-display-on_hover li:hover > .dt-sub-nav {
	display: block;
}

/* Horizontal ------------------------------------------------------- */

.horizontal-menu-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

.dt-nav-menu-horizontal {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}

.dt-nav-menu-horizontal.justify-content-start         { justify-content: flex-start; }
.dt-nav-menu-horizontal.justify-content-center        { justify-content: center; }
.dt-nav-menu-horizontal.justify-content-end           { justify-content: flex-end; }
.dt-nav-menu-horizontal.justify-content-space-between { justify-content: space-between; }

.dt-nav-menu-horizontal > li {
	position: relative;
}

.dt-nav-menu-horizontal > li > a {
	position: relative;
	gap: 6px;
}

/* Underline decoration, drawn only when the widget asks for it. */
.items-decoration-yes .dt-nav-menu-horizontal > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	background-color: transparent;
	transition: background-color .3s ease;
}

.decoration-align-text .dt-nav-menu-horizontal > li > a::after {
	left: 50%;
	width: auto;
	right: 50%;
	transition: left .3s ease, right .3s ease, background-color .3s ease;
}

.decoration-align-text .dt-nav-menu-horizontal > li > a:hover::after {
	left: 0;
	right: 0;
}

/* Desktop submenus drop below their parent. */
.dt-nav-menu-horizontal .dt-sub-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 200px;
}

.dt-nav-menu-horizontal > li:hover > .dt-sub-nav,
.dt-nav-menu-horizontal > li:focus-within > .dt-sub-nav {
	display: block;
}

.horizontal-menu-toggle {
	display: none;
	align-items: center;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}

.horizontal-menu-toggle .menu-toggle-icons {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.horizontal-menu-toggle .icon-active {
	display: none;
}

/* Below the tablet breakpoint the list gives way to the toggle, which opens the
   mobile-menu popup. Matches the behaviour The7 drove from its own inline style. */
@media screen and (max-width: 989px) {
	.elementor-widget-the7_horizontal-menu .dt-nav-menu-horizontal__container {
		display: none;
	}

	.elementor-widget-the7_horizontal-menu .horizontal-menu-toggle {
		display: inline-flex;
	}
}

/* Screen-reader-only labels, matching the class the markup uses. */
.elementor-screen-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
