/*--------------------------------------------------------------
# MCW Product Add-ons / Advanced Product Fields
# Only targets WAPF option fields and WAPF totals
--------------------------------------------------------------*/

/*
 * Edit these values only.
 */
body.single-product {
	/* Colours */
	--mcw-wapf-dark-blue: #414566;
	--mcw-wapf-light-blue: #8da8d9;
	--mcw-wapf-text: #1f2a44;
	--mcw-wapf-white: #ffffff;
	--mcw-wapf-soft-bg: #f6f8fc;
	--mcw-wapf-border: #d9e2f3;

	/* WAPF wrapper spacing */
	--mcw-wapf-wrapper-margin-top: 18px;
	--mcw-wapf-wrapper-margin-bottom: 18px;

	/* Option field sizing */
	--mcw-wapf-field-max-width: 720px;
	--mcw-wapf-field-margin-bottom: 10px;

	/* Option labels */
	--mcw-wapf-label-font-size: 14px;
	--mcw-wapf-label-line-height: 1.3;
	--mcw-wapf-label-font-weight: 700;
	--mcw-wapf-label-margin-bottom: 5px;

	/* Option select boxes */
	--mcw-wapf-select-font-size: 14px;
	--mcw-wapf-select-line-height: 1.3;
	--mcw-wapf-select-font-weight: 500;
	--mcw-wapf-select-min-height: 38px;
	--mcw-wapf-select-padding-top: 7px;
	--mcw-wapf-select-padding-right: 34px;
	--mcw-wapf-select-padding-bottom: 7px;
	--mcw-wapf-select-padding-left: 10px;
	--mcw-wapf-select-border-width: 1px;
	--mcw-wapf-select-border-radius: 3px;

	/* WAPF totals table */
	--mcw-wapf-totals-max-width: 720px;
	--mcw-wapf-totals-margin-top: 22px;
	--mcw-wapf-totals-margin-bottom: 20px;
	--mcw-wapf-total-label-column: 170px;
	--mcw-wapf-total-font-size: 14px;
	--mcw-wapf-grand-total-font-size: 15px;
	--mcw-wapf-tax-label-font-size: 12px;
	--mcw-wapf-total-font-weight: 800;
	--mcw-wapf-total-cell-padding: 10px 12px;
	--mcw-wapf-total-border-width: 1px;
	--mcw-wapf-total-border-radius: 3px;
}

/*--------------------------------------------------------------
# WAPF Wrapper
--------------------------------------------------------------*/

.single-product .wapf {
	width: 100%;
	margin: var(--mcw-wapf-wrapper-margin-top) 0 var(--mcw-wapf-wrapper-margin-bottom);
	padding: 0;
}

.single-product .wapf-wrapper,
.single-product .wapf-field-group {
	width: 100%;
	margin: 0;
	padding: 0;
}

.single-product .wapf-field-container {
	width: 100% !important;
	max-width: var(--mcw-wapf-field-max-width);
	margin: 0 0 var(--mcw-wapf-field-margin-bottom);
	padding: 0;
}

/*--------------------------------------------------------------
# WAPF Option Labels
--------------------------------------------------------------*/

.single-product .wapf-field-label {
	display: block;
	margin: 0 0 var(--mcw-wapf-label-margin-bottom);
	padding: 0;
	color: var(--mcw-wapf-dark-blue);
	font-size: var(--mcw-wapf-label-font-size);
	line-height: var(--mcw-wapf-label-line-height);
	font-weight: var(--mcw-wapf-label-font-weight);
}

.single-product .wapf-field-label label,
.single-product .wapf-field-label span {
	display: inline;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}

.single-product .wapf-field-label abbr.required {
	display: inline;
	margin-left: 3px;
	color: var(--mcw-wapf-dark-blue);
	text-decoration: none;
}

/*--------------------------------------------------------------
# WAPF Select Fields
--------------------------------------------------------------*/

.single-product .wapf-field-input {
	width: 100%;
	margin: 0;
	padding: 0;
}

.single-product .wapf-field-input select,
.single-product select.wapf-input {
	display: block;
	width: 100%;
	max-width: var(--mcw-wapf-field-max-width);
	min-height: var(--mcw-wapf-select-min-height);
	margin: 0;
	padding:
		var(--mcw-wapf-select-padding-top)
		var(--mcw-wapf-select-padding-right)
		var(--mcw-wapf-select-padding-bottom)
		var(--mcw-wapf-select-padding-left);
	box-sizing: border-box;
	color: var(--mcw-wapf-text);
	background-color: var(--mcw-wapf-white);
	border: var(--mcw-wapf-select-border-width) solid var(--mcw-wapf-light-blue);
	border-radius: var(--mcw-wapf-select-border-radius);
	font-size: var(--mcw-wapf-select-font-size);
	line-height: var(--mcw-wapf-select-line-height);
	font-weight: var(--mcw-wapf-select-font-weight);
	appearance: auto;
}

.single-product .wapf-field-input select:focus,
.single-product select.wapf-input:focus {
	outline: none;
	border-color: var(--mcw-wapf-dark-blue);
	box-shadow: 0 0 0 1px var(--mcw-wapf-dark-blue);
}

/*--------------------------------------------------------------
# WAPF Totals Table
--------------------------------------------------------------*/

.single-product .wapf-product-totals {
	width: 100%;
	max-width: var(--mcw-wapf-totals-max-width);
	margin: var(--mcw-wapf-totals-margin-top) 0 var(--mcw-wapf-totals-margin-bottom);
	padding: 0;
	color: var(--mcw-wapf-dark-blue);
	font-size: var(--mcw-wapf-total-font-size);
	line-height: 1.35;
}

.single-product .wapf-product-totals .wapf--inner {
	width: 100%;
	margin: 0;
	padding: 0;
	border: var(--mcw-wapf-total-border-width) solid var(--mcw-wapf-border);
	border-bottom: 0;
	border-radius: var(--mcw-wapf-total-border-radius);
	overflow: hidden;
}

/* Each WAPF total row */
.single-product .wapf-product-totals .wapf--inner > div {
	display: grid;
	grid-template-columns: var(--mcw-wapf-total-label-column) minmax(0, 1fr);
	align-items: stretch;
	margin: 0;
	padding: 0;
	border-bottom: var(--mcw-wapf-total-border-width) solid var(--mcw-wapf-border);
	background: var(--mcw-wapf-white);
}

/* Left label cell */
.single-product .wapf-product-totals .wapf--inner > div > span:first-child {
	display: flex;
	align-items: center;
	margin: 0;
	padding: var(--mcw-wapf-total-cell-padding);
	color: var(--mcw-wapf-dark-blue);
	background: var(--mcw-wapf-soft-bg);
	border-right: var(--mcw-wapf-total-border-width) solid var(--mcw-wapf-border);
	font-size: var(--mcw-wapf-total-font-size);
	font-weight: var(--mcw-wapf-total-font-weight);
	text-align: left;
}

/* Right price area */
.single-product .wapf-product-totals .wapf-total {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--mcw-wapf-dark-blue);
	font-size: var(--mcw-wapf-total-font-size);
	font-weight: var(--mcw-wapf-total-font-weight);
	text-align: left;
	white-space: normal;
}

/*
 * product-addons.js splits the original WAPF price text into:
 * .mcw-wapf-total-inline
 * .mcw-wapf-price-line
 * .mcw-wapf-tax-label
 */
.single-product .mcw-wapf-total-inline,
.single-product .mcw-wapf-total-lines {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.single-product .mcw-wapf-price-line {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: var(--mcw-wapf-total-cell-padding);
	color: var(--mcw-wapf-dark-blue);
	font-size: var(--mcw-wapf-total-font-size);
	font-weight: var(--mcw-wapf-total-font-weight);
	white-space: nowrap;
	text-align: right;
}

.single-product .mcw-wapf-price-line:first-child {
	border-right: var(--mcw-wapf-total-border-width) solid var(--mcw-wapf-border);
}

.single-product .mcw-wapf-tax-label {
	margin-left: 4px;
	color: var(--mcw-wapf-dark-blue);
	font-size: var(--mcw-wapf-tax-label-font-size);
	font-weight: 700;
	text-transform: none;
}

.single-product .mcw-wapf-tax-label::before {
	content: "(";
}

.single-product .mcw-wapf-tax-label::after {
	content: ")";
}

/* Grand total row */
.single-product .wapf-product-totals .wapf--inner > div:last-child {
	background: var(--mcw-wapf-soft-bg);
}

.single-product .wapf-grand-total .mcw-wapf-price-line {
	font-size: var(--mcw-wapf-grand-total-font-size);
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width: 767px) {
	body.single-product {
		--mcw-wapf-field-max-width: 100%;
		--mcw-wapf-totals-max-width: 100%;
		--mcw-wapf-total-label-column: 1fr;
		--mcw-wapf-total-cell-padding: 9px 10px;
		--mcw-wapf-total-font-size: 13px;
		--mcw-wapf-grand-total-font-size: 14px;
		--mcw-wapf-tax-label-font-size: 11px;
	}

	.single-product .wapf-product-totals .wapf--inner > div {
		grid-template-columns: 1fr;
	}

	.single-product .wapf-product-totals .wapf--inner > div > span:first-child {
		border-right: 0;
		border-bottom: var(--mcw-wapf-total-border-width) solid var(--mcw-wapf-border);
	}

	.single-product .mcw-wapf-total-inline,
	.single-product .mcw-wapf-total-lines {
		grid-template-columns: 1fr 1fr;
	}

	.single-product .mcw-wapf-price-line {
		white-space: normal;
	}
	
	.single-product .mcw-wapf-price-line {
	justify-content: flex-start;
	text-align: left;
}
}

@media (max-width: 420px) {
	.single-product .mcw-wapf-total-inline,
	.single-product .mcw-wapf-total-lines {
		grid-template-columns: 1fr;
	}

	.single-product .mcw-wapf-price-line:first-child {
		border-right: 0;
		border-bottom: var(--mcw-wapf-total-border-width) solid var(--mcw-wapf-border);
	}
}