/* Fixed navigation bar at the bottom of the screen on phones.
   The file is registered by the module itself, so a store with the feature off never downloads it.
   Every length is derived from one pair of custom properties, which is what keeps the reserved
   space and the bar exactly the same height; a plain value precedes each derived one so a browser
   without custom properties still gets the same layout. */
:root {
--evo-bnav-height: 52px;
--evo-bnav-safe: env(safe-area-inset-bottom, 0px);
}

/* Box at the end of the document that holds the bar's height open. The bar itself is out of the
   flow, so without this box the footer would sit underneath it. `flex: 0 0 auto` is required
   because the theme lays the page out as a flex column and would otherwise shrink it away. */
.evo-bnav-spacer {
display: none;
width: 100%;
}

.evo-bnav {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
/* Above page content and the theme's own sticky bars, below its modal windows. */
z-index: 1030;
box-sizing: border-box;
height: 52px;
height: calc(var(--evo-bnav-height) + var(--evo-bnav-safe));
/* Keeps the buttons clear of the home indicator on a phone with a rounded screen. */
padding-bottom: 0;
padding-bottom: var(--evo-bnav-safe);
background: #fff;
border-top: 1px solid #e5e5e5;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.evo-bnav__item {
flex: 1 1 0;
/* Without this a long caption would stretch its button and push the others off the screen. */
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6px 2px;
color: #333;
font-size: 11px;
line-height: 1.15;
text-align: center;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
}
.evo-bnav__item:hover,
.evo-bnav__item:focus,
.evo-bnav__item:active {
color: #4c85d3;
text-decoration: none;
}

.evo-bnav__icon {
display: block;
line-height: 1;
margin-bottom: 3px;
}
.evo-bnav__icon .fa {
font-size: 20px;
}

.evo-bnav__text {
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* Without captions the icon carries the whole button, so it is centred instead of sitting high. */
.evo-bnav--nolabels .evo-bnav__item {
padding: 12px 2px;
}
.evo-bnav--nolabels .evo-bnav__icon {
margin-bottom: 0;
}

@media (max-width: 767px) {
	.evo-bnav {
	display: flex;
	}
	/* Exactly the outer height of the bar, and only while the bar is on screen. */
	.evo-bnav-spacer {
	display: block;
	flex: 0 0 auto;
	height: 52px;
	height: calc(var(--evo-bnav-height) + var(--evo-bnav-safe));
	}
	/* The theme pins its cookie notice to the very bottom of the window with a higher stacking
	   order, which would bury the buttons under it. Marked important because the theme's own rule
	   has the same specificity and this file is not guaranteed to be the later one after a merge. */
	.bottom_cookie_block {
	bottom: 52px !important;
	bottom: calc(var(--evo-bnav-height) + var(--evo-bnav-safe)) !important;
	}
}

/* While the theme's mobile drawer is open the page is slid sideways by a transform, and a fixed
   element inside a transformed ancestor is positioned against that ancestor instead of the window
   - the bar would drift away with the page. It has nothing to offer while the drawer is open. */
html.mm-wrapper_opened .evo-bnav {
display: none;
}

/* A printed page has no fixed bar and needs no room reserved for one. */
@media print {
	.evo-bnav,
	.evo-bnav-spacer {
	display: none !important;
	}
}