﻿/* Styles for blocks are used in both the frontend and admin - so be specific */


.mbgmodelresults-wrap { display: flex; flex-flow: row wrap; justify-content: space-around; }
.mbgmodelgrid { flex-basis: calc(24.666% - 2em); padding: 1em; margin-bottom: .33%; }
.dhwp-hook.hewes .mbgmodelgrid,
.dhwp-hook.maverick .mbgmodelgrid { flex-basis: calc(33% - 2em); }

.mbgmodelgrid-contain h2 { color: #1B365D; }
.mbgmodelgrid-contain a { text-decoration: none; }

.mbgmodelgrid-wrap .builder-wrapper .builder-form-list { column-count: 1; }

.mbgmodelgrid-contain .wp-block-button__link { text-transform: uppercase; }
.mbgmodelgrid-contain table.mbgspecs-list .wp-block-button__link { text-transform: uppercase; padding: .5em 1em; font-size: .9em; font-weight: bold; }

.mbgmodelgrid-contain .extra-links .wp-block-button__link { display: block; margin-bottom: .4em; }

/*
.mbgmodelgrid-contain.view-compare .boat-finder-tools,
.mbgmodelgrid-contain .compare-clear,

*/
.mbgmodelgrid-contain.view-compare .mbgmodelgrid-wrap,
.mbgmodelgrid-contain .mbgmodelgrid-compare,
.mbgmodelgrid-contain.loading .mbgmodelgrid-compare,
.mbgmodelgrid-contain .mbgmodelgrid-loading { display: none; }

.mbgmodelgrid-contain.view-compare .mbgmodelgrid-compare { display: block; }

.mbgmodelgrid-contain .compare-clear.visible { display: inline-block; }

.mbgmodelgrid-contain.loading .mbgmodelgrid-loading { display: block; padding: 3em; margin: 0 auto; }

.mbgmodelgrid-contain.view-compare img { width: 200px; max-width: 100%; }


.mbgmodelgrid .compare-checkbox { display: none; }
.mbgmodelgrid input.compare-checkbox + label { display: block; line-height: 1em; font-size: 1rem; text-transform: uppercase; background: transparent url(../svg/icon-bab-unselected-checkbox.svg) no-repeat center left / 1em; padding: .1em 0 0 1.3em; margin: .5em 0 0; }
.mbgmodelgrid input.compare-checkbox:checked + label { background-image: url(../svg/icon-bab-selected-checkbox.svg); }


.mbgmodelgrid-contain .compare-tools { position: fixed; display: block; z-index: 0; bottom: 0px; right: 0px; opacity: 0; }
.mbgmodelgrid-contain .compare-tools.visible { opacity: 1; bottom: 10px; right: 10px; z-index: 1; transition: right .3s, bottom .3s, opacity .3s; }

.mbgmodelgrid-contain .compare-tools a { display: block; border: 1px solid #fff; }

/* table */
.mbgspecs-list-wrap { max-width: 100%; overflow-x: auto; }
table.mbgspecs-list { border-collapse: collapse; font-size: .8rem; min-width: 30%; margin: 0 auto; }
table.mbgspecs-list th, table.mbgspecs-list td { padding: .5em 1em; text-align: left; }
table.mbgspecs-list .mbgcategory-row th { border-bottom: 1px solid #ccc; cursor: pointer; text-transform: uppercase; }
table.mbgspecs-list .mbgcategory-row th:after { content: " +"; font-weight: bold; }
table.mbgspecs-list tbody.active .mbgcategory-row th:after { content: " \2013"; }
table.mbgspecs-list tbody { border: 1px solid #ccc; }
table.mbgspecs-list th, table.mbgspecs-list td { border: none; }
table.mbgspecs-list td { background-color: #f5f5f5; text-align: center; }
table.mbgspecs-list .mbggroup-row td { font-weight: bold; padding-top: 1.5em; }
table.mbgspecs-list .mbggroup-row,
table.mbgspecs-list .mbgspecs-row { display: none; }
table.mbgspecs-list .mbgspecs-row:last-of-type td { padding-bottom: 1.5em; }
table.mbgspecs-list .mbggroup-row td:first-of-type,
table.mbgspecs-list .mbgspecs-row td:first-of-type { text-align: left; }
table.mbgspecs-list tbody.active .mbggroup-row,
table.mbgspecs-list tbody.active .mbgspecs-row { display: table-row; border-bottom: 1px solid #e3e3e3; }

@media (max-width: 1200px) {
	.mbgmodelgrid { flex-basis: calc(33% - 2em); }
}

@media only screen and (max-width:900px) {
	.dhwp-hook.hewes .mbgmodelgrid,
	.dhwp-hook.maverick .mbgmodelgrid,
	.mbgmodelgrid { flex-basis: calc(50% - 2em); }
}

@media only screen and (max-width:600px) {

	.mbgmodelgrid-contain table.mbgspecs-list h2 { font-size: 1.1rem; }
	.mbgmodelgrid-contain table.mbgspecs-list .wp-block-button__link span { display: none; }

	.dhwp-hook.hewes .mbgmodelgrid,
	.dhwp-hook.maverick .mbgmodelgrid,
	.mbgmodelgrid { flex-basis: 100%; }
}

/**/