/* Wash Associates Site Tools: car wash menu ([car_wash_menu]).
   Base layout for the same markup the Sonny's menu plugin produced, so each site's own CSS
   (Customizer / Divi custom CSS, written against that markup) styles it exactly as before.
   Keep this file to layout only; colours and fonts belong to the site CSS.
   It is printed FIRST in <head> (wp_head priority 1), where the Sonny's plugin's stylesheet sat: the site's
   Customizer CSS (same specificity, printed later) overrides it, and it still beats Divi's element reset. */

.carwash-menu-row, .carwash-menu-row * { box-sizing: border-box; }
.carwash-menu-row, .row-packages, .carwash-menu-container, .carwash-menu { display: flex; flex-wrap: wrap; }
.carwash-menu-row { margin: 0 -15px; }
.row-packages { width: 100%; margin: 0; }

/* Package columns: one row of N on wide screens, then 3 / 2 / 1 as the screen narrows. */
.col-package { padding: 0 15px; }
.col-packages-size-1 .col-package { flex: 0 0 100%; max-width: 100%; }
.col-packages-size-2 .col-package { flex: 0 0 50%; max-width: 50%; }
.col-packages-size-3 .col-package { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-packages-size-4 .col-package { flex: 0 0 25%; }
.col-packages-size-5 .col-package { flex: 0 0 20%; }
.col-packages-size-6 .col-package { flex: 0 0 16.666667%; max-width: 16.666667%; }
@media (max-width: 1199px) and (min-width: 992px) {
	.row-packages[class*="col-packages-size-"] .col-package { flex: 0 0 33.333333%; max-width: 33.333333%; margin-bottom: 30px; }
}
@media (max-width: 991px) and (min-width: 576px) {
	.row-packages[class*="col-packages-size-"] .col-package { flex: 0 0 50%; max-width: 50%; margin-bottom: 30px; }
}
@media (max-width: 575px) {
	.row-packages[class*="col-packages-size-"] .col-package { flex: 0 0 100%; max-width: 100%; margin-bottom: 30px; }
}

.carwash-packages-container { width: 100%; padding: 0 15px; margin: 0 auto; flex-wrap: nowrap; }
.carwash-packages-title, .premium-packages-description { width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; padding-bottom: 15px; text-align: center; }
.carwash-packages-title { margin-top: 30px; }
.package-logo, .package-name, .package-one-time-price, .package-monthly-subscription,
	.package-monthly-subscription .price, .package-content, .package-details-button, .carwash-menu-title { display: inline-block; width: 100%; }

/* Card */
.package-card { display: inline-block; width: 100%; border: 2px dashed #becaed; border-radius: 4px; }
.package-logo { max-height: 250px; margin-bottom: 30px; }
.package-logo-img { display: block; margin: 0 auto; max-height: 250px; width: auto; }
.package-name, .package-one-time-price, .package-monthly-subscription { border-bottom: 2px dashed #becaed; }
.package-name { padding: 0 15px; }
.package-title { display: inline-block; width: 100%; padding: 15px 0; text-align: center; }

/* Prices */
.package-one-time-price { float: left; min-height: 100px; padding: 15px; }
.single-price-box-container, .single-wash-text { text-align: center; }
.single-wash-text:empty { display: none; }
.dollar-sign { position: relative; bottom: 0.29em; font-size: 1.4em; line-height: 1.4em; }
.price-value { position: relative; font-size: 2em; line-height: normal; }
.package-monthly-subscription { padding: 0 15px; }
.package-monthly-subscription .price { text-align: center; }
.package-monthly-subscription .dollar-sign { display: inline; bottom: auto; font-size: inherit; line-height: inherit; }
.package-monthly-subscription .price .membership-price span { display: inline; }
.membership-renewal-length { margin-left: 2px; }
.membership-renewal-length::before { content: "/"; }
.membership-desc-text { display: block; width: 100%; clear: both; }
.membership-plan-offer { margin: 10px; text-align: center; border: 2px dashed #becaed; }
.membership-plan-offer .offer-price span { display: inline; }
.package-content { padding: 15px; }
.package-details-button { padding: 15px; text-align: center; }

/* Details button */
.carwash-menu-row .btn { display: inline-block; padding: 0.375rem 0.75rem; border: 1px solid transparent; border-radius: 0.25rem; background: transparent;
	color: #fff; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: center; vertical-align: middle; cursor: pointer; user-select: none;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.btn.control { background-color: #63678c; border-color: #63678c; }
.btn.control:hover, .btn.control:focus { color: #fff; background-color: #9b9fcc; border-color: #9b9fcc; text-decoration: none; }
.btn.control:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(71, 89, 131, 0.25); }

/* Package Details (filtered by the Details buttons) */
.carwash-menu-container { width: 100%; padding: 15px; }
.carwash-menu { width: 100%; margin: 0 -10px; padding: 15px 0; }
.carwash-menu-title { padding: 15px; text-align: center; opacity: 1; transition: opacity .25s ease-in-out; }
.carwash-menu-title.wait-to-show { opacity: 0; }
.carwash-menu-title span { margin-right: 4px; opacity: 1; color: inherit; font-size: inherit; line-height: inherit; transition: all .25s ease-in-out; }
.carwash-menu-title span:empty { margin: 0; opacity: 0; color: transparent; font-size: 0; line-height: 0; }
.mix { position: relative; display: inline-block; vertical-align: top; padding: 10px; flex: 0 0 25%; }
@media (max-width: 1405px) { .mix { flex: 0 0 50%; max-width: 50%; } }
@media (max-width: 479px) { .mix { flex: 0 0 100%; max-width: 100%; } }
/* Filter state (Details buttons). */
.carwash-menu-row[data-prefilter="none"] .mix { display: none; }
.carwash-menu-row .mix.cwm-show { display: inline-block; }
.carwash-menu-row .mix.cwm-hide { display: none; }
.carwash_services_main { display: flex; flex-wrap: wrap; width: 100%; height: 100%; padding: 15px; background: #fff; border: 2px dashed #becaed; border-radius: 4px; }
.carwash_services_image, .carwash_services_content { display: block; float: left; }
.carwash_services_image { max-width: 130px; }
.carwash_services_content { width: calc(100% - 130px); padding-left: 15px; }
@media (max-width: 767px) {
	.carwash_services_main { display: inline-block; }
	.carwash_services_image, .carwash_services_content { width: 100%; max-width: 100%; }
	.carwash_services_image img { display: block; max-width: 130px; margin: 0 auto; }
	.carwash_services_content { padding: 15px 0 0; }
	.carwash_services_content h4, .carwash_services_detail { text-align: center; }
}