/* ==========================================================================
   config_layout.css - responsive div layout for system_configuration.php
   Mobile first:  < 600px  single column
                  600-899  tablet, 2 columns
                  >= 900   desktop, matches the original 950px layout
   All classes are prefixed cfg- so nothing clashes with the older
   configquote*.css files (still loaded for the sections not yet converted).
   IDs that the scripts show/hide (style.display = "block"/"none") sit on
   plain wrapper divs; the grids are always on an inner div.
   ========================================================================== */

/* ---- Page container ---------------------------------------------------- */
.cfg-page {
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: left;
}
/* configuration page only: blank space under the last section, so the next input
   can scroll up clear of the bottom edge of the window / Odoo iframe */
#page1.cfg-page {
	padding-bottom: 120px;
}
.cfg-section {
	width: 100%;
	box-sizing: border-box;
}

/* ---- Section header (title + CLEAR link) ------------------------------- */
.cfg-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 20px;
	margin: 0 0 12px;
}
.cfg-section .cfg-head-title,
.cfg-section #sectionheadpanels,
.cfg-section #sectionheadsystems,
.cfg-section #sectionheadinverters,
.cfg-section #OptimiserAcc,
.cfg-section #sectionheadsquote1,
.cfg-section #sectionheadsquote2,
.cfg-section #sectionheadsquote3,
.cfg-section #sectionheadsquote4 {
	color: #304ddb;
	font-family: "Roboto", sans-serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.3;
	height: auto;
}
.cfg-head-clear {
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	cursor: pointer;
	white-space: nowrap;
}
.cfg-head-clear .under1 {
	text-decoration: underline;
	padding-right: 0;
}

/* small black sub-headings inside a section (PV PANEL ARRAY etc.) */
.cfg-section .cfg-subhead,
.cfg-section #sectionheadarray,
.cfg-section #sectionheadoptional {
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	height: auto;
	margin: 0 0 4px;
	text-align: left;
}
.cfg-note {
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #666;
	text-align: left;
}

/* ---- Grids -------------------------------------------------------------- */
.cfg-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px 20px;
}
.cfg-row {
	margin-top: 12px;
}
/* spans every column at all screen sizes (e.g. Project Address) */
.cfg-grid .cfg-field--full {
	grid-column: 1 / -1;
}

/* ---- Fields ------------------------------------------------------------- */
.cfg-field {
	min-width: 0;
}
.cfg-section .cfg-label {
	display: block;
	width: auto;
	margin: 0 0 4px;
	text-align: left;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}
/* an invisible label that lines a button up with the inputs beside it */
.cfg-section .cfg-label--spacer {
	display: none;
}
.cfg-help {
	height: 18px;
	width: auto;
	margin-left: 6px;
	vertical-align: -4px;
	cursor: pointer;
}

.cfg-input,
.cfg-section #RoofType1 {           /* RoofType1 is written by php/roofsystems.php */
	display: block;
	width: 100%;
	max-width: 100%;
	height: 36px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 10px;
	border: 0 none;
	border-radius: 10px;
	background-color: #f0f2ff;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 16px;          /* 16px stops iOS zooming on focus */
	font-weight: 400;
	text-align: left;
}
.cfg-input:focus,
.cfg-section #RoofType1:focus {
	outline: 2px solid #304ddb;
	outline-offset: 1px;
}
/* read-only style spec boxes (was .text25) */
.cfg-input--outline {
	border: 1px solid #ccc;
	background-color: #fff;
	font-weight: 500;
}
.cfg-input:disabled {
	color: #000;
	-webkit-text-fill-color: #000;
	opacity: 1;
}

.cfg-button {
	display: block;
	width: 100%;
	height: 36px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 16px;
	border: 0 none;
	border-radius: 10px;
	background-color: #304ddb;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.5px;
	cursor: pointer;
}
.cfg-button:hover {
	background-color: #2539a8;
}
.cfg-button:focus-visible {
	outline: 2px solid #304ddb;
	outline-offset: 2px;
}

/* checkboxes with their labels */
.cfg-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}
.cfg-check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 400;
}
.cfg-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: #304ddb;
	cursor: pointer;
}
.cfg-check label {
	cursor: pointer;
}

.cfg-rule {
	border: 0;
	border-bottom: 1px solid #000;
	margin: 20px 0;
	padding: 0;
}

/* ---- Selected panel card (#paneldisplayrow) ------------------------------
   Same three-part row at every width:  picture | name + prices | stock box.
   Columns and text scale with the viewport (clamp) instead of re-stacking.
   Selectors are prefixed .cfg-section to win over the old .custom-option
   rules in selectlistdesktop.css and configquotemobile.css.              */
.cfg-section .cfg-panelcard {
	display: grid;
	grid-template-columns: clamp(64px, 13vw, 100px) minmax(0, 1fr) clamp(108px, 26vw, 230px);
	gap: clamp(8px, 2vw, 20px);
	align-items: stretch;
	margin-top: 12px;
	padding: 0;
	height: auto;
	cursor: default;
	text-align: left;
}

/* picture */
.cfg-section .cfg-panelcard .cfg-card-pic {
	min-width: 0;
}
.cfg-section .cfg-panelcard img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
	border: 2px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}

/* name + prices */
.cfg-section .cfg-panelcard .cfg-card-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(2px, 0.8vw, 6px);
}
.cfg-section .cfg-panelcard .title {
	font-family: "Roboto", sans-serif;
	font-size: clamp(13px, 2.3vw, 18px);
	font-weight: 700;
	line-height: 1.25;
	color: #4040ff;
	overflow-wrap: anywhere;
}
.cfg-section .cfg-panelcard .panelprice1 {
	font-family: "Roboto", sans-serif;
	font-size: clamp(17px, 3.2vw, 24px);
	font-weight: 500;
	line-height: 1.2;
	color: #666;
	padding: 0;
}
.cfg-section .cfg-panelcard .panelpw1 {
	font-family: "Roboto", sans-serif;
	font-size: clamp(13px, 2.3vw, 18px);
	font-weight: 500;
	line-height: 1.2;
	color: #666;
	padding: 0;
}

/* stock box: article no. at the top, stock lines pinned to the bottom */
.cfg-section .cfg-panelcard .cfg-card-stock {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 4px;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: clamp(6px, 1.2vw, 10px);
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 6px;
	text-align: right;
}
.cfg-section .cfg-panelcard .cfg-card-stock > div {
	padding: 0;
	text-align: right;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.cfg-section .cfg-panelcard .panelstock1a {
	font-family: "Roboto", sans-serif;
	font-size: clamp(11px, 1.8vw, 12px);
	font-weight: 600;
	color: #808080;
}
.cfg-section .cfg-panelcard .panelstock1b {
	font-family: "Roboto", sans-serif;
	font-size: clamp(12px, 2vw, 15px);
	font-weight: 500;
	color: #009a71;
	margin-top: auto;
}
.cfg-section .cfg-panelcard .panelstock1c {
	font-family: "Roboto", sans-serif;
	font-size: clamp(12px, 2vw, 15px);
	font-weight: 500;
	color: #666;
}

/* ---- Mounting Systems --------------------------------------------------- */
/* roof / tile / rail / hook pictures on the left, rail choice ticks on the right */
.cfg-picrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
}
.cfg-section .Roofpics1 {
	position: static;
	width: auto;
	height: auto;
	text-align: left;
	line-height: 0;
}
/* every picture 80px high, width follows the picture (overrides the 85 / 50px set by getpicture.js) */
.cfg-section #LayerPics img {
	height: 80px;
	width: auto;
	max-width: 100%;
	margin: 0 8px 0 0;
	vertical-align: middle;
}

/* panel array: generated table scrolls inside its frame instead of the page */
.cfg-section .scroll-frame {
	width: 100%;
	max-width: 100%;
	margin: 8px 0;
	overflow-x: auto;
	overflow-y: hidden;          /* frame grows with the array; only wide arrays scroll */
	-webkit-overflow-scrolling: touch;
}
.cfg-section .inner-content {
	width: max-content;
	min-width: 100%;
}

/* panel array grid - built by scripts/systemarray_div.js render_array_div()
   col 1 height dimension, col 2 row numbers, then one column per panel;
   row 1 width dimension, row 2 column numbers, then one row per panel row */
.cfg-arr {
	display: grid;
	width: max-content;          /* block-level grid: no baseline gap under the array */
	gap: 0;
	font-family: "Roboto", sans-serif;
	color: #000;
}
.cfg-arr-dimh {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 4px 6px;
}
.cfg-arr-dimv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px 0 0;
}
.cfg-arr-arrow {
	color: #2d84c6;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
}
.cfg-arr-dimtext {
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}
.cfg-arr-vtext {
	writing-mode: vertical-rl;
	transform: rotate(180deg);          /* reads bottom-to-top */
}
.cfg-arr-colnum {
	padding: 0 0 2px;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
}
.cfg-arr-rownum {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 14px;
	padding: 0 6px 0 0;
	font-size: 16px;
}
/* reset the old table-cell rules, then re-apply the gap markers */
.cfg-arr .cfg-arr-cell {
	margin: 0;
	padding: 1px;
	border: 0 none;
	line-height: 0;
	vertical-align: top;
}
.cfg-arr .cfg-arr-cell img {
	display: block;
	max-width: none;
	cursor: pointer;
}
.cfg-arr .tdarrayv {
	border-bottom: 10px solid #304ddb;   /* expansion gap below this row */
}
.cfg-arr .tdarrayh {
	border-right: 10px solid #304ddb;    /* expansion gap right of this column */
}
.cfg-arr .tdarrayhv {
	border-bottom: 10px solid #304ddb;
	border-right: 10px solid #304ddb;
}
.cfg-arr .tdarraysf,
.cfg-arr .tdarraysfh {
	padding-bottom: 30px;                /* south facing row spacing */
}
.cfg-arr .tdarraysfv {
	padding-bottom: 40px;
}

/* ---- Optional mounting equipment rows (php/ancilliaryroof_div.php) --------------------------------
   tablet / desktop: [ article | description | price ]  qty  total  picture   - one line per product
   phone:            picture on the left; article, description, price above qty and total          */
.cfg-anc-head,
.cfg-anc-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px 100px 60px;
	column-gap: 14px;
	align-items: center;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
}
.cfg-anc-head {
	margin-top: 8px;
}
.cfg-anc-row {
	margin-top: 10px;
}
.cfg-anc-item {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr) 80px;
	align-items: center;
	min-height: 32px;
	background-color: #f0f2ff;
	border-radius: 10px;
}
.cfg-anc-head .cfg-anc-item {
	grid-template-columns: minmax(0, 1fr) 80px;
	min-height: 0;
	background: none;
}
.cfg-anc-art,
.cfg-anc-desc {
	padding: 4px 8px;
	border-right: 1px solid #000;
	overflow-wrap: anywhere;
}
.cfg-anc-price {
	padding: 4px 8px;
	white-space: nowrap;
}
.cfg-anc-input {
	display: block;
	width: 100%;
	height: 32px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 4px;
	border: 0 none;
	border-radius: 10px;
	background-color: #f0f2ff;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	text-align: center;
}
.cfg-anc-input:focus {
	outline: 2px solid #304ddb;
	outline-offset: 1px;
}
.cfg-anc-total {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	box-sizing: border-box;
	padding: 0 6px;
	border: 1px solid #ccc;
	border-radius: 10px;
	white-space: nowrap;
}
@media (min-width: 600px) {
	.cfg-anc-total {
		border-color: #000;              /* fine black outline on tablet and desktop */
	}
}
.cfg-anc-total:empty {
	border-color: transparent;
}
.cfg-anc-pic img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: contain;
}
.cfg-anc-lbl {
	display: none;
}

@media (max-width: 599px) {
	.cfg-anc-head {
		display: none;
	}
	.cfg-anc-row {
		grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"pic item item"
			"pic qty  tot";
		gap: 8px 10px;
		padding: 10px;
		background-color: #f0f2ff;
		border-radius: 10px;
		text-align: left;
	}
	.cfg-anc-item {
		grid-area: item;
		display: block;
		min-height: 0;
		background: none;
		border-radius: 0;
	}
	.cfg-anc-art {
		padding: 0;
		border: 0;
		font-size: 12px;
		color: #666;
	}
	.cfg-anc-desc {
		padding: 0;
		border: 0;
		font-weight: 500;
	}
	.cfg-anc-price {
		padding: 0;
	}
	.cfg-anc-qty {
		grid-area: qty;
	}
	.cfg-anc-tot {
		grid-area: tot;
	}
	.cfg-anc-qty,
	.cfg-anc-tot {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.cfg-anc-input {
		width: 64px;
		background-color: #fff;
	}
	.cfg-anc-total {
		flex: 1;
		background-color: #fff;
	}
	.cfg-anc-pic {
		grid-area: pic;
		align-self: start;
	}
	.cfg-anc-lbl {
		display: inline;
		font-size: 12px;
		color: #666;
	}
}

/* ---- Inverter accessory / battery / all-accessory lists (php/*_div.php) ------------------------------
   Same row layout as above, plus category headings and "pick an item" dropdown rows. */
.cfg-anc-cathead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px 100px 60px;
	column-gap: 14px;
	align-items: end;
	margin-top: 18px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	text-align: center;
}
.cfg-anc-cattitle {
	text-align: left;
	font-weight: 500;
}
.cfg-anc-more {
	margin-left: 12px;
	font-size: 12px;
	font-weight: 400;
	cursor: pointer;
}
.cfg-anc-droprow .cfg-anc-dropsel {
	min-width: 0;
}
.cfg-anc-droprow .cfg-anc-input:disabled {
	opacity: 0.6;
}

@media (max-width: 599px) {
	.cfg-anc-cathead {
		grid-template-columns: minmax(0, 1fr);
	}
	.cfg-anc-cathead .cfg-anc-qty,
	.cfg-anc-cathead .cfg-anc-tot,
	.cfg-anc-cathead .cfg-anc-pic {
		display: none;
	}
	.cfg-anc-droprow {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: none;
		padding: 0;
		background: none;
	}
	.cfg-anc-droprow .cfg-anc-qty,
	.cfg-anc-droprow .cfg-anc-tot,
	.cfg-anc-droprow .cfg-anc-pic {
		display: none;
	}
}

/* ---- Inverters section ---------------------------------------------------- */
/* radio choices and Total System Power on one line, wrapping on phones */
.cfg-multirow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}
.cfg-total-power {
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 700;
}
/* inverter row: model | quantity | picture (phones: model on its own line) */
.cfg-grid-inv {
	grid-template-columns: minmax(0, 1fr) 100px;
	grid-template-areas:
		"sel sel"
		"qty pic";
	align-items: end;
}
.cfg-inv-sel {
	grid-area: sel;
}
.cfg-inv-qty {
	grid-area: qty;
}
.cfg-invpic {
	grid-area: pic;
	min-width: 0;
}
.cfg-section #LayerInverterPics {
	height: auto !important;          /* getpicture.js sets 310px for the old floating layer */
}
.cfg-invpic img {
	display: block;
	max-width: 100%;
	height: auto;
}
.cfg-backtotop {
	margin-top: 12px;
	text-align: right;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	cursor: pointer;
}
.cfg-continue {
	margin-top: 16px;
}
.cfg-continue .cfg-button {
	max-width: 450px;
	margin: 0 auto;
}

/* pop-up boxes (reset, Viridian, help) */
.cfg-pop-actions {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 12px;
}
.helppanel1 .closehelp,
.helppanel .closehelp {
	margin-top: 8px;
	text-align: right;
}
.closehelp,
.closehelp2 {
	cursor: pointer;
}

/* ---- Quote page (quotelist.php) ---------------------------------------------------------------- */
.cfg-quote {
	padding-bottom: 24px;
}
.cfg-qhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 18px 0 12px;
}
.cfg-qtoggle img {
	display: block;
	height: 30px;
	width: auto;
	cursor: pointer;
}
/* label | value boxes */
.cfg-qinfo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 20px;
}
.cfg-qitem {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	align-items: stretch;
	min-height: 32px;
	border: 2px solid #f0f0f0;
	border-radius: 10px;
	overflow: hidden;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	box-sizing: border-box;
}
.cfg-qitem-label {
	display: flex;
	align-items: center;
	padding: 4px 10px;
	background-color: #f0f0f0;
	color: #404040;
}
.cfg-qitem-value {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 4px 10px;
	overflow-wrap: anywhere;
}
.cfg-qitem--full {
	grid-column: 1 / -1;
}
.cfg-qna {
	color: #d3d3d3;
}
.cfg-qspacer {
	display: none;
}
.cfg-qnote {
	margin-top: 8px;
	font-family: "Roboto", sans-serif;
	font-size: 13px;
}
/* product list section headings */
.cfg-qsection {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 16px;
	margin-top: 18px;
	font-family: "Roboto", sans-serif;
}
.cfg-qsection-title {
	font-size: 14px;
	font-weight: 500;
}
.cfg-qsection-rates {
	font-size: 12px;
	color: #555;
}
.cfg-anc-qtyval {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	box-sizing: border-box;
	padding: 0 6px;
	border-radius: 10px;
	background-color: #f0f2ff;
}
/* totals under the product list */
.cfg-qtotals {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: 18px;
}
.cfg-qtotals .totaltexts1 {
	flex: 1 1 220px;
	height: auto;
}
.cfg-qtotals-list {
	display: grid;
	gap: 8px;
	flex: 1 1 300px;
	max-width: 380px;
}
.cfg-qtotals-list .cfg-qitem {
	grid-template-columns: 170px minmax(0, 1fr);
}
.cfg-qtotals-list .cfg-qitem-value {
	justify-content: flex-end;
	font-weight: 500;
}
/* installation costs: label | value | per watt */
.cfg-qcosts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px 24px;
}
.cfg-qcostlist {
	display: grid;
	gap: 8px;
	align-content: start;
}
.cfg-qitem--3,
.cfg-qcolhead {
	grid-template-columns: minmax(0, 1fr) 115px 80px;
}
.cfg-qcolhead {
	display: grid;
	padding: 0 12px;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	color: #555;
}
.cfg-qcolhead > div:last-child,
.cfg-qpw {
	justify-content: flex-end;
	text-align: right;
}
.cfg-quote .textquote,
.cfg-quote .textquote2 {
	width: 72px;
	height: 28px;
	box-sizing: border-box;
	padding: 0 6px;
	border: 2px solid #4040ff;
	border-radius: 8px;
	background-color: #f0f2ff;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
}
/* GO BACK / NEXT */
.cfg-qnav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
}
.cfg-qnav .cfg-button {
	max-width: 220px;
}
.cfg-button--secondary {
	background-color: #e6e6e6;
	color: #000;
}
.cfg-button--secondary:hover {
	background-color: #d4d4d4;
}
.cfg-button--go {
	background-color: #32f675;
	color: #142553;
}
.cfg-button--go:hover {
	background-color: #22d862;
}
/* array on the quote page is not clickable */
.cfg-arr--static .cfg-arr-cell img {
	cursor: default;
}
/* NEXT panel (loadpage3): centred card instead of the old fixed 450px absolute layer */
#Page3layer0.Page3layer1 {
	position: static;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: 16px;
	box-sizing: border-box;
}
#Page3layer1.pagelayer1 {
	position: relative;
	top: auto;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	max-width: 450px;
	height: auto !important;          /* loadpage3() sets 530 / 745px */
	box-sizing: border-box;
	padding: 20px;
}
#Page3layer1 .page3boxes {
	width: auto;
	gap: 8px;
}
#Page3layer1 .textBlkLg2 {
	width: auto;
	padding-left: 0;
	font-size: 20px;
	align-items: flex-start;
}
#Page3layer1 .textBlkLg2 input {
	margin-top: 5px;
}
.cfg-qconfirm {
	display: flex;
	justify-content: center;
}
#Page3layer1 .confP3 {
	width: 100%;
	max-width: 320px;
	height: auto;
	padding: 8px 0;
}
#Page3layer1 .disclayer1 {
	width: auto;
	height: auto !important;           /* loadpage3() sets 210px */
	padding: 10px 20px 20px;
}
#Page3layer1 .closegoback2 {
	align-self: center;
	height: auto;
	padding: 8px 0;
}

/* ---- Tablet ------------------------------------------------------------- */
@media (min-width: 600px) {
	.cfg-grid-2,
	.cfg-grid-3,
	.cfg-grid-4,
	.cfg-grid-211 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cfg-grid-31 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
	/* Trapezoidal MultiRail / MiniRail: no hook, Spacing on the left at its usual (narrow) width - show_trap_spacing() */
	.cfg-grid-31.cfg-nohook {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
	.cfg-grid-inv {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) 100px;
		grid-template-areas: "sel qty pic";
	}
	.cfg-qinfo,
	.cfg-grid-3eq,
	.cfg-qcosts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* two cost lists side by side: narrower value / per watt columns until desktop */
	.cfg-qitem--3,
	.cfg-qcolhead {
		grid-template-columns: minmax(0, 1fr) 96px 64px;
	}
	.cfg-quote .cfg-qitem--3 .textquote,
	.cfg-quote .cfg-qitem--3 .textquote2 {
		width: 58px;
	}
	.cfg-grid .cfg-field--wide,
	.cfg-grid .cfg-field--span2 {
		grid-column: 1 / -1;
	}
	.cfg-input,
	.cfg-section #RoofType1,
	.cfg-button {
		height: 30px;
	}
	.cfg-section .cfg-label--spacer {
		display: block;
		visibility: hidden;
	}
}

/* ---- Desktop ------------------------------------------------------------ */
@media (min-width: 900px) {
	.cfg-grid-3 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
	}
	.cfg-grid-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.cfg-grid-211 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	}
	.cfg-grid-31 {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}
	.cfg-grid-31.cfg-nohook {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}
	.cfg-grid-3eq {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cfg-qspacer {
		display: block;
	}
	.cfg-qitem--3,
	.cfg-qcolhead {
		grid-template-columns: minmax(0, 1fr) 115px 80px;
	}
	.cfg-quote .cfg-qitem--3 .textquote,
	.cfg-quote .cfg-qitem--3 .textquote2 {
		width: 72px;
	}
	.cfg-grid .cfg-field--wide {
		grid-column: auto;
	}
	.cfg-grid .cfg-field--span2 {
		grid-column: span 2;
	}
	.cfg-head {
		margin-bottom: 16px;
	}
	/* article no column 50% wider (100px -> 150px) on desktop - optional mounting equipment, batteries,
	   accessories and the quote page rows all use .cfg-anc-item; the header row keeps its own two columns */
	.cfg-anc-item {
		grid-template-columns: 150px minmax(0, 1fr) 80px;
	}
}