/**
 * PACTIV Calculator - front-end styles (Steps 2 and 5).
 *
 * Visual only. No JavaScript, no computation, no form submission. Product
 * panel switching and the two conditional blocks are driven purely by CSS
 * sibling rules, so each driver input must be a DIRECT SIBLING of the block
 * it controls (see the comment at the top of templates/calculator-form.php).
 *
 * Sections 1 to 12 dress the form on screen. Section 13 is the @media print
 * block that turns the visit into a tidy quote sheet: it hides everything on
 * the page except .pactiv-calc-print-doc, which the script builds at click
 * time from the estimate already on screen.
 *
 * ---------------------------------------------------------------------------
 * Two deliberate "do not style" decisions:
 *
 * 1) input / select / textarea appearance is NOT touched. The theme already
 *    provides the baseline that /contact/ uses (style.css):
 *      input[type=...], textarea { padding:10px; width:100%; font-size:14px;
 *        font-family:inherit; line-height:24px; color:#555;
 *        background-color:#f1f1f1; border:none; }
 *      select { padding:10px; width:100%; border:none; box-shadow:...; }
 *    Inheriting it is the only way to stay identical to /contact/. In
 *    particular there is no "rounded pill" input here: the theme class
 *    .nectar-wpcf7-rounded-form is not used anywhere on this site.
 *
 * 2) .pactiv-calc-section h3 keeps the theme type scale - only its margin is
 *    set. The theme already ships the full responsive ladder for "body h3"
 *    (30/40 -> 25.5/34 -> 24/32 -> 22.5/30, design-system.md 2.2). A fixed
 *    font-size here would break the 1000-1299px and 690-999px steps.
 *
 * Colour / type / radius values come from design-system.md (frozen):
 *   #6e8a34 accent | #143727 extra-1 | #676767 body text | #333 minor text
 *   #f5f5f5 light surface | #ececec border | #ffffff white
 *   4px radius | 2px border thickness | 16/24 body, 15/22 under 690px
 *   17px / weight 400 button text | breakpoints 1300 / 1000 / 690
 *
 * @package PACTIV_Calculator
 */

/* ==========================================================================
   1. Drivers - visually hidden but left in the tab order
   ========================================================================== */

.pactiv-calc-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   2. Show / hide skeleton
   ========================================================================== */

/* level 1 - product panel */
.pactiv-calc-panel {
	display: none;
}

#pactiv-product-decking:checked ~ .pactiv-calc-panel--decking,
#pactiv-product-fencing:checked ~ .pactiv-calc-panel--fencing,
#pactiv-product-pedestals:checked ~ .pactiv-calc-panel--pedestals {
	display: block;
}

/* level 2 - pedestal model and spacing */
.pactiv-calc-pedestal-options {
	display: none;
}

#pactiv-use-pedestal:checked ~ .pactiv-calc-pedestal-options {
	display: block;
}

/* level 2 - remove the old fence */
.pactiv-calc-only-install {
	display: none;
	/* BFC: stops the label's top margin collapsing out of the box, which would
	   otherwise drop the floated checkbox onto a line of its own (this block
	   starts with a checkbox + label pair and nothing else). */
	overflow: hidden;
}

#pactiv-mode-install:checked ~ .pactiv-calc-only-install {
	display: block;
}

/* level 2 - the staff discount control that belongs to the selected product.
   The three controls live side by side in one staff block, which has to be a
   direct sibling of the three product radios for this to work at all. */
.pactiv-calc-staff-panel {
	display: none;
}

#pactiv-product-decking:checked ~ .pactiv-calc-staff .pactiv-calc-staff-panel--decking,
#pactiv-product-fencing:checked ~ .pactiv-calc-staff .pactiv-calc-staff-panel--fencing,
#pactiv-product-pedestals:checked ~ .pactiv-calc-staff .pactiv-calc-staff-panel--pedestals {
	display: block;
}

/* Selected state of the switch buttons. Five rules, because this page
   contains two separate .pactiv-calc-switch groups: three product buttons and
   two supply-type buttons. */
#pactiv-product-decking:checked ~ .pactiv-calc-switch label[for="pactiv-product-decking"],
#pactiv-product-fencing:checked ~ .pactiv-calc-switch label[for="pactiv-product-fencing"],
#pactiv-product-pedestals:checked ~ .pactiv-calc-switch label[for="pactiv-product-pedestals"],
#pactiv-mode-supply:checked ~ .pactiv-calc-switch label[for="pactiv-mode-supply"],
#pactiv-mode-install:checked ~ .pactiv-calc-switch label[for="pactiv-mode-install"] {
	background-color: #6e8a34;
	border-color: #6e8a34;
	color: #ffffff;
}

/* ==========================================================================
   3. Container
   ========================================================================== */

.pactiv-calc {
	max-width: 900px;
	margin: 0 auto;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #676767;
}

/* ==========================================================================
   4. Switch buttons (products, supply type)
   ========================================================================== */

.pactiv-calc-switch {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.pactiv-calc-switch-btn {
	flex: 1 1 0;
	display: block;
	text-align: center;
	cursor: pointer;
	border: 2px solid #ececec;
	border-radius: 4px;
	background-color: #ffffff;
	color: #6e8a34;
	padding: 13px 18px;
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   5. Sections
   ========================================================================== */

.pactiv-calc-section {
	margin-top: 60px;
}

.pactiv-calc-section h3 {
	margin: 0 0 24px;
}

/* ==========================================================================
   6. Field grid and field labels
   ========================================================================== */

.pactiv-calc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.pactiv-calc-row label {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 24px;
	color: #333;
}

/* ==========================================================================
   7. Standalone checkbox rows (pedestals, spare material, remove old fence)
   ========================================================================== */

/* The checkbox sits OUTSIDE its <label> on purpose: the pure-CSS show/hide
   needs #pactiv-use-pedestal to be a direct sibling of the block it reveals,
   so the pair cannot be wrapped. Floating the checkbox left and giving the
   label a block box that flows around it keeps each pair on its own line -
   which matters now that the decking section carries two of them. */

.pactiv-calc-section > input[type="checkbox"],
.pactiv-calc-only-install > input[type="checkbox"] {
	float: left;
	margin: 27px 8px 0 0;
}

.pactiv-calc-section > label,
.pactiv-calc-only-install > label {
	display: block;
	overflow: hidden;
	margin-top: 24px;
	font-size: 16px;
	line-height: 24px;
	color: #333;
}

/* ==========================================================================
   8. Measured areas - one or more rectangles per job
   ========================================================================== */

/* Every row past the first is separated by a hairline, so it is obvious at a
   glance that the figures belong to different rectangles. */
.pactiv-calc-area + .pactiv-calc-area {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #ececec;
}

/* Both text buttons are plain links. The [hidden] rule is repeated so a theme
   that sets "display" on button elements cannot bring the last row's remove
   button back. */
.pactiv-calc-area-remove[hidden] {
	display: none;
}

.pactiv-calc-area-remove,
.pactiv-calc-area-add {
	margin-top: 12px;
	border: none;
	background: none;
	padding: 0;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: #6e8a34;
	text-decoration: underline;
	cursor: pointer;
	transition: color 0.2s ease;
}

.pactiv-calc-area-add {
	margin-top: 20px;
	font-size: 16px;
}

.pactiv-calc-area-remove:hover,
.pactiv-calc-area-remove:focus,
.pactiv-calc-area-add:hover,
.pactiv-calc-area-add:focus {
	color: #143727;
}

.pactiv-calc-area-total {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: #676767;
}

.pactiv-calc-area-total strong {
	color: #143727;
}

/* Small print that explains a choice - the 5% allowance, the pedestal grid. */
.pactiv-calc-hint {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: #676767;
}

/* Staff-only block. Given a grey panel of its own so it is never mistaken for
   something a customer sees. The whole section is only rendered for a
   signed-in administrator. */
.pactiv-calc-staff {
	padding: 32px 40px;
	border-radius: 4px;
	background-color: #f5f5f5;
}

.pactiv-calc-staff h3 {
	margin-bottom: 16px;
}

/* One line saying whether the rate that was just changed got saved. It is
   empty until a rate is touched, and taken out of the flow while it is empty,
   so an untouched page looks exactly as it did before. */
.pactiv-calc-staff-status {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: #676767;
}

.pactiv-calc-staff-status:empty {
	display: none;
}

.pactiv-calc-staff-status--ok {
	color: #143727;
	font-weight: 700;
}

/* Same functional red as the enquiry errors below. */
.pactiv-calc-staff-status--error {
	color: #b32d2e;
}

/* ==========================================================================
   9. Result area and primary button
   ========================================================================== */

.pactiv-calc-results {
	margin-bottom: 24px;
	padding: 40px;
	border-radius: 4px;
	background-color: #f5f5f5;
	color: #676767;
	font-size: 16px;
	line-height: 24px;
}

.pactiv-calc-submit {
	margin-top: 24px;
	border: none;
	border-radius: 4px;
	padding: 13px 18px;
	font-family: Roboto, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	color: #ffffff;
	background-color: #6e8a34;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.pactiv-calc-submit:hover,
.pactiv-calc-submit:focus {
	background-color: #143727;
}

.pactiv-calc-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* The two secondary actions, revealed only once there is an estimate to take
   away. The [hidden] rule is repeated for the same reason as the enquiry block
   below: a theme that sets "display" on div elements must not be able to undo
   it. */
.pactiv-calc-result-actions[hidden] {
	display: none;
}

.pactiv-calc-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* One quiet outline each, because neither is the main thing on this page -
   calculating is. They differ only in what they hand over: a sheet of paper,
   or a file. */
.pactiv-calc-print,
.pactiv-calc-save-pdf {
	border: 2px solid #6e8a34;
	border-radius: 4px;
	background-color: #ffffff;
	color: #6e8a34;
	/* 11px + the 2px border matches the 13px of the solid button beside it */
	padding: 11px 18px;
	font-family: Roboto, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pactiv-calc-print:not([disabled]):hover,
.pactiv-calc-print:not([disabled]):focus,
.pactiv-calc-save-pdf:not([disabled]):hover,
.pactiv-calc-save-pdf:not([disabled]):focus {
	background-color: #6e8a34;
	color: #ffffff;
}

/* Only ever set while a file is being built, which takes a moment on a phone. */
.pactiv-calc-save-pdf[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* The single line under the two buttons: the file is being built, it has been
   saved, or why it could not be. Empty and therefore invisible by default, so
   it takes up no space until there is something to say. */
.pactiv-calc-pdf-status {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 22px;
	color: #676767;
}

.pactiv-calc-pdf-status:empty {
	display: none;
}

.pactiv-calc-pdf-status--ok {
	color: #6e8a34;
}

.pactiv-calc-pdf-status--error {
	color: #b32d2e;
}

/* ==========================================================================
   10. Estimate output (written by assets/js/pactiv-calculator.js)
   ========================================================================== */

.pactiv-calc-results-placeholder {
	margin: 0;
}

.pactiv-calc-result-heading {
	margin: 0 0 20px;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: #143727;
}

.pactiv-calc-result-lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pactiv-calc-result-lines li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid #ececec;
}

.pactiv-calc-result-lines li:first-child {
	border-top: 1px solid #ececec;
}

.pactiv-calc-result-label {
	flex: 1 1 auto;
	color: #676767;
}

.pactiv-calc-result-qty {
	flex: 0 0 auto;
	color: #676767;
	white-space: nowrap;
}

.pactiv-calc-result-amount {
	flex: 0 0 auto;
	min-width: 110px;
	text-align: right;
	font-weight: 700;
	color: #333;
	white-space: nowrap;
}

.pactiv-calc-result-amount--soft {
	font-weight: 400;
	font-style: italic;
	color: #676767;
}

/* The discount line sits directly above the total and is read as a
   deduction, so both halves are picked out in the accent colour to make the
   rate visible at a glance. */
.pactiv-calc-result-label--discount {
	font-weight: 700;
	color: #6e8a34;
}

.pactiv-calc-result-amount--discount {
	color: #6e8a34;
}

.pactiv-calc-result-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 2px solid #143727;
}

.pactiv-calc-result-total-label {
	font-size: 17px;
	font-weight: 700;
	color: #143727;
}

.pactiv-calc-result-total-amount {
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	color: #6e8a34;
	white-space: nowrap;
}

.pactiv-calc-result-meta {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	font-size: 15px;
	line-height: 24px;
	color: #676767;
}

.pactiv-calc-result-meta li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.pactiv-calc-result-note {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: #676767;
}

.pactiv-calc-result-note--strong {
	color: #143727;
	font-weight: 700;
}

/* ==========================================================================
   11. Enquiry block
   ========================================================================== */

/* Hidden until the script has an estimate to attach to. The [hidden] rule is
   repeated here so a theme that sets "display" on section elements cannot
   undo it. */
.pactiv-calc-enquiry[hidden] {
	display: none;
}

.pactiv-calc-enquiry {
	position: relative;
	padding: 40px;
	border-radius: 4px;
	background-color: #f5f5f5;
}

.pactiv-calc-enquiry h3 {
	margin-bottom: 8px;
}

.pactiv-calc-enquiry-intro {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 24px;
	color: #676767;
}

/* Honeypot field: off screen, not focusable, not announced. A person never
   sees it; a script that fills every input it finds trips the check. */
.pactiv-calc-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.pactiv-calc-optional {
	font-weight: 400;
	color: #676767;
}

.pactiv-calc-enquiry-output p {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: #676767;
}

.pactiv-calc-enquiry-output--ok p {
	font-weight: 700;
	color: #143727;
}

/* #b32d2e is the WordPress admin error red - a functional colour, not part of
   the site palette, used nowhere else in this stylesheet. */
.pactiv-calc-enquiry-output--error p {
	color: #b32d2e;
}

/* ==========================================================================
   12. Responsive - 1300 / 1000 / 690
   ========================================================================== */

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

	.pactiv-calc {
		max-width: 100%;
	}

}

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

	.pactiv-calc-section {
		margin-top: 48px;
	}

	.pactiv-calc-results {
		padding: 32px;
	}

	.pactiv-calc-enquiry {
		padding: 32px;
	}

	.pactiv-calc-staff {
		padding: 24px 32px;
	}

}

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

	.pactiv-calc {
		font-size: 15px;
		line-height: 22px;
	}

	/* Three product buttons have to fit across a phone. A 30% basis lets them
	   share the row, and wrap only if the words really do not fit. */
	.pactiv-calc-switch {
		flex-wrap: wrap;
		gap: 8px;
	}

	.pactiv-calc-switch-btn {
		flex: 1 1 30%;
		padding: 11px 8px;
		font-size: 15px;
	}

	.pactiv-calc-section {
		margin-top: 40px;
	}

	.pactiv-calc-row {
		grid-template-columns: 1fr;
	}

	.pactiv-calc-row label,
	.pactiv-calc-section > label,
	.pactiv-calc-only-install > label {
		font-size: 15px;
		line-height: 22px;
	}

	.pactiv-calc-results {
		padding: 24px;
		font-size: 15px;
		line-height: 22px;
	}

	.pactiv-calc-enquiry {
		padding: 24px;
	}

	.pactiv-calc-staff {
		padding: 24px;
	}

	.pactiv-calc-area-total {
		font-size: 15px;
		line-height: 22px;
	}

	.pactiv-calc-enquiry-intro,
	.pactiv-calc-enquiry-output p {
		font-size: 15px;
		line-height: 22px;
	}

	.pactiv-calc-print,
	.pactiv-calc-save-pdf,
	.pactiv-calc-submit {
		width: 100%;
	}

	.pactiv-calc-result-heading {
		font-size: 21px;
		line-height: 28px;
	}

	.pactiv-calc-result-lines li {
		flex-wrap: wrap;
		gap: 2px 12px;
	}

	.pactiv-calc-result-amount {
		min-width: 0;
		margin-left: auto;
	}

	.pactiv-calc-result-total-label {
		font-size: 16px;
	}

	.pactiv-calc-result-total-amount {
		font-size: 24px;
	}

	.pactiv-calc-result-meta {
		font-size: 14px;
		line-height: 22px;
	}

}

/* ==========================================================================
   13. Printed estimate
   ========================================================================== */

/* The sheet is built by the script into .pactiv-calc-print-doc and appended to
   <body> at click time. Off screen it takes no part in the layout at all. */
.pactiv-calc-print-doc {
	display: none;
}

/* The sheet's own appearance is deliberately media-independent. The same
   rules dress the paper copy and the PDF file that "Save as PDF" builds:
   the print dialogue lays it out in the print media and html2canvas lays it
   out in the screen media, so the two cannot drift apart. Only the parts
   that are genuinely about paper - what gets hidden, and where the margins
   fall - stay inside @media print below. */
.pactiv-calc-print-doc {
	margin: 0;
	padding: 0;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	line-height: 1.45;
	color: #333;
}

.pactiv-calc-print-head {
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid #6e8a34;
}

/* The letterhead is set type: the company name out of the same JSON file as
   everything else, dressed in the deep green the site already uses. */
.pactiv-calc-print-brand {
	margin: 0 0 6px;
	font-size: 20pt;
	font-weight: 700;
	color: #143727;
	letter-spacing: 0.06em;
}

.pactiv-calc-print-sub {
	margin: 0;
	font-size: 10pt;
	color: #676767;
}

.pactiv-calc-print-block {
	margin-bottom: 18px;
}

.pactiv-calc-print-title {
	margin: 0 0 6px;
	font-size: 11pt;
	font-weight: 700;
	color: #143727;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pactiv-calc-print-facts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pactiv-calc-print-facts li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.pactiv-calc-print-facts li > span:first-child {
	color: #676767;
}

/* The priced lines are lifted from the on-screen result area, so they arrive
   carrying the screen classes. Only the screen dressing is undone here: the
   grey card and its 40px padding would waste a third of the sheet. */
.pactiv-calc-print-doc .pactiv-calc-print-estimate {
	margin: 0;
}

.pactiv-calc-print-doc .pactiv-calc-result-heading {
	display: none;
}

.pactiv-calc-print-doc .pactiv-calc-result-lines,
.pactiv-calc-print-doc .pactiv-calc-result-meta {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pactiv-calc-print-doc .pactiv-calc-result-lines li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	border-bottom: 1px solid #e6e6e6;
}

.pactiv-calc-print-doc .pactiv-calc-result-lines li:first-child {
	border-top: 1px solid #e6e6e6;
}

.pactiv-calc-print-doc .pactiv-calc-result-label,
.pactiv-calc-print-doc .pactiv-calc-result-qty {
	color: #676767;
}

.pactiv-calc-print-doc .pactiv-calc-result-amount {
	min-width: 0;
	text-align: right;
	font-weight: 700;
	color: #333;
}

.pactiv-calc-print-doc .pactiv-calc-result-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 2px solid #143727;
}

.pactiv-calc-print-doc .pactiv-calc-result-total-label {
	font-size: 11pt;
	font-weight: 700;
	color: #143727;
}

.pactiv-calc-print-doc .pactiv-calc-result-total-amount {
	font-size: 16pt;
	font-weight: 700;
	color: #6e8a34;
}

.pactiv-calc-print-doc .pactiv-calc-result-meta {
	margin-top: 8px;
	font-size: 10pt;
}

.pactiv-calc-print-doc .pactiv-calc-result-meta li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.pactiv-calc-print-doc .pactiv-calc-result-note {
	margin: 10px 0 0;
	font-size: 9pt;
	line-height: 1.4;
	color: #676767;
}

.pactiv-calc-print-foot {
	margin-top: 22px;
	padding-top: 10px;
	border-top: 1px solid #e6e6e6;
	font-size: 9pt;
	line-height: 1.4;
	color: #676767;
}

.pactiv-calc-print-foot p {
	margin: 0 0 4px;
}

/* "Save as PDF" renders the sheet off screen at exactly the width the
   printer would give it: A4 (210mm) less the 16mm margins set by @page
   below, so lines break where the paper copy breaks them. Parked outside
   the viewport so the visitor never sees it, yet still laid out - an
   element with display:none has no box to measure. */
.pactiv-calc-print-doc.pactiv-calc-print-doc--render {
	display: block;
	position: absolute;
	top: 0;
	left: -10000px;
	width: 178mm;
	background-color: #ffffff;
}

@media print {

	/* Clicking "Print" puts .pactiv-calc-printing on <html>. Everything that
	   is not the sheet is then dropped: no theme header, no menu, no footer,
	   no form controls. The marker class has no effect outside this media
	   query, so a browser that never fires afterprint cannot leave the site
	   looking broken. */
	html.pactiv-calc-printing body > *:not(.pactiv-calc-print-doc) {
		display: none !important;
	}

	html.pactiv-calc-printing,
	html.pactiv-calc-printing body {
		display: block !important;
		background: #ffffff !important;
	}

	html.pactiv-calc-printing .pactiv-calc-print-doc {
		display: block !important;
	}

	@page {
		margin: 16mm;
	}
}