/* =========================================================================== */
/* Free delivery: the product panel, the cart bar, and the postcode zone list   */
/* --------------------------------------------------------------------------- */
/* Loaded only on product pages and the cart - the two places the checker       */
/* renders. See inc/freight.php for the enqueue condition.                      */
/*                                                                             */
/* The panel is deliberately NOT a tick in the trust list above it. The offer   */
/* has three conditions - product, spend, postcode - and a one-line tick can    */
/* only ever state one of them, which is how the site came to promise free      */
/* freight on a pallet racking order to Cairns.                                 */
/* =========================================================================== */

.srk-freight {
	margin: 22px 0 0;
	padding: 20px 22px;
	background: var(--srk-white);
	border: 1px solid var(--srk-line);
	border-top: 3px solid var(--srk-line);
	border-radius: 0;
}

/* The offer applies: the yellow rule is the signal, carried from the home page's accent. */
.srk-freight--free { background: var(--srk-paper); border-top-color: var(--srk-yellow); }

.srk-freight__flag {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 9px;
	background: var(--srk-yellow);
	color: var(--srk-yellow-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.srk-freight__title {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--srk-text-strong);
}

.srk-freight__terms {
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--srk-soft);
}

.srk-freight__label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--srk-text-strong);
}

.srk-freight__row { display: flex; gap: 8px; align-items: stretch; }

.srk-freight__input {
	flex: 0 1 140px;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	font-family: var(--srk-font);
	font-size: 16px; /* 16px or iOS zooms the page on focus. */
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--srk-ink);
	background: var(--srk-white);
	border: 1px solid var(--srk-line);
	border-radius: 0;
}
.srk-freight__input:focus {
	outline: 2px solid var(--srk-ink);
	outline-offset: -2px;
	border-color: var(--srk-ink);
}
/* No placeholder: a greyed-out "4077" reads as a postcode already filled in, which is exactly
   how it was read on 18 Sep. The label above the field says what to type. This rule stays so a
   placeholder added later by a filter is still styled as a hint rather than as a value. */
.srk-freight__input::placeholder { color: var(--srk-quiet); font-weight: 400; letter-spacing: 0; }

/* `.srk-btn` sets 16px padding-block, which on a 46px control makes it 78px tall. */
.srk-freight__go {
	height: 46px;
	padding: 0 22px;
	font-size: 13px;
	line-height: 46px;
	flex: 0 0 auto;
}

.srk-freight__result {
	margin: 12px 0 0;
	padding-left: 22px;
	position: relative;
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--srk-soft);
}
.srk-freight__result::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}
/* #1C6B3C on paper is 5.4:1, on white 5.8:1 - both clear AA for body text. */
.srk-freight__result[data-state="yes"]  { color: #1C6B3C; }
.srk-freight__result[data-state="yes"]::before  { content: "\2713"; color: #1C6B3C; }
.srk-freight__result[data-state="no"]   { color: var(--srk-red-text); }
.srk-freight__result[data-state="no"]::before   { content: "\2013"; color: var(--srk-red-text); }
.srk-freight__result[data-state="bad"]  { color: var(--srk-red-text); }
.srk-freight__result[data-state="bad"]::before  { content: "!"; color: var(--srk-red-text); }
.srk-freight__result[data-state="info"] { color: var(--srk-soft); }
.srk-freight__result[data-state="info"]::before { content: "\2192"; color: var(--srk-quiet); }
.srk-freight__result[hidden] { display: none; }

.srk-freight__note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--srk-quiet);
}

.srk-freight__view {
	margin: 10px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--srk-font);
	font-size: 13px;
	font-weight: 700;
	color: var(--srk-text-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.srk-freight__view:hover { color: var(--srk-red-text); }
.srk-freight__view[hidden] { display: none; }
/* It is an anchor now, so it needs a box for `margin-top` to mean anything. */
.srk-freight__view { display: inline-block; }
/*
 * With no script the zone list is already sitting inline immediately below, so a link to it
 * is noise. This is the same end state the old `hidden` attribute produced, decided by CSS
 * instead of by JavaScript - which is what lets the link be useful the moment scripting IS
 * on, even if freight.js itself never arrives.
 */
html:not(.js) .srk-freight__view { display: none; }

/* =========================================================================== */
/* The zone list                                                               */
/* --------------------------------------------------------------------------- */
/* Inline and readable with no script at all - this is the content the retired  */
/* Elementor PostCode popup held, and it must not depend on JavaScript to be    */
/* reachable. freight.js then adds `--modal`, which is what turns it into the   */
/* popup. Order matters: the base rules assume no script.                       */
/* =========================================================================== */

.srk-zones {
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--srk-line);
}

.srk-zones__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.srk-zones__title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 800;
	color: var(--srk-text-strong);
}

.srk-zones__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin: -6px -6px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--srk-soft);
	cursor: pointer;
}
.srk-zones__close:hover { color: var(--srk-ink); }
.srk-zones__close[hidden] { display: none; }
/* It is an anchor now: give it a box, centre the glyph, drop the underline. */
.srk-zones__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
/* Nothing to close when the list is inline. */
html:not(.js) .srk-zones__close { display: none; }

.srk-zones__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.srk-zones__zonename {
	margin: 0 0 3px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--srk-text-strong);
}

.srk-zones__codes {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--srk-soft);
	font-variant-numeric: tabular-nums;
}

.srk-zones__foot {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--srk-line);
	font-size: 12px;
	line-height: 1.5;
	color: var(--srk-quiet);
}

/*
 * The same panel, re-asserted against the page's prose styles.
 *
 * The cart renders the WooCommerce shortcode inside `.srk-content`, the site's prose
 * wrapper. `.srk-content h2`, `.srk-content h3` and `.srk-content ul` are all (0,1,1), and
 * every rule above is (0,1,0) - so on the cart, and ONLY on the cart, this panel came out
 * with a 43px title, 28px zone names, em-based heading margins, 1.3em of list indent and a
 * margin under every item. Same markup, same component, more than twice the height. That is
 * why the cart's popup did not look like the product page's, and why its inline form was
 * the enormous block in the first screenshot.
 *
 * Count the elements in the selector, not just the classes - for the sixth time on this
 * build. A component that can be dropped into prose has to state its own type at a weight
 * that survives the prose.
 */
.srk-zones .srk-zones__title    { font-size: 15px; margin: 0 0 14px; }
.srk-zones .srk-zones__zonename { font-size: 13.5px; margin: 0 0 3px; }
.srk-zones .srk-zones__list     { margin: 0; padding: 0; }
.srk-zones .srk-zones__zone     { margin: 0; }
.srk-zones .srk-zones__codes    { margin: 0; }
.srk-zones .srk-zones__foot     { margin: 16px 0 0; }

/* ---- and the same list, once the script has promoted it to a dialog ---- */

/*
 * `:target` is listed alongside `--modal` so the fallback LOOKS like the dialog.
 *
 * Without it, following the link before freight.js had loaded dropped the whole zone list
 * into the page as a full-width block inside the freight bar - which worked, and looked
 * terrible. Sam's screenshot, 22 Sep. The fallback now opens the same overlay the script
 * would have opened; the only difference is that no JavaScript was involved.
 */
.srk-zones--modal,
html.js .srk-zones:target {
	position: fixed;
	inset: 0;
	z-index: var(--srk-z-modal);
	margin: 0;
	padding: 20px;
	border-top: 0;
	background: rgba(23,23,26, .62);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
}

/* Must come after the `display: flex` above, or `hidden` loses to it and the
   overlay covers the page from first paint. Restated at the weight of the `:target`
   selector too: once the script is running, `hidden` is the authority on whether the
   dialog is open, even if a stale `#srk-zones` is still sitting in the address bar. */
.srk-zones[hidden],
html.js .srk-zones[hidden] { display: none; }

/*
 * No flash.
 *
 * The list renders inline and readable so that a customer with scripting off can still find
 * out which postcodes qualify - that requirement has not changed. But freight.js runs from
 * the footer, and on a ~2s page it spent that whole time as a full-width block of postcode
 * ranges in the middle of the cart before being folded away into a dialog. Sam photographed
 * it; 22 Sep.
 *
 * `html.js` is set by an inline script in `<head>`, before the body is parsed, so this hides
 * the panel from the first paint rather than after the footer runs. Scripting off means no
 * `js` class, which means the rule never applies and the list stays inline exactly as before.
 *
 * `:not(.is-open)` keeps this out of the way of `--modal`'s `display: flex` once the dialog
 * is opened - this selector is heavier and would otherwise win. `:target` is the safety net:
 * the opener is an `<a href="#srk-zones">`, so even if freight.js fails to load, clicking it
 * still reveals the list.
 */
html.js .srk-zones:not(.is-open):not(:target) { display: none; }

.srk-zones--modal .srk-zones__panel,
html.js .srk-zones:target .srk-zones__panel {
	width: 100%;
	max-width: 480px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 26px 28px;
	background: var(--srk-white);
	border-top: 4px solid var(--srk-yellow);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

html.srk-zones-open { overflow: hidden; }

/* =========================================================================== */
/* The cart bar                                                                */
/* =========================================================================== */

.srk-ffbar {
	margin: 0 0 26px;
	padding: 18px 22px;
	background: var(--srk-paper);
	border: 1px solid var(--srk-line);
	border-left: 4px solid var(--srk-yellow);
}
.srk-ffbar--won   { border-left-color: #1C6B3C; }
.srk-ffbar--mixed { border-left-color: var(--srk-line); }

.srk-ffbar__lead {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--srk-text-strong);
}
.srk-ffbar--mixed .srk-ffbar__lead { font-weight: 400; color: var(--srk-soft); }

.srk-ffbar__track {
	position: relative;
	height: 6px;
	margin: 12px 0 0;
	background: #E2DDD4;
	overflow: hidden;
}
.srk-ffbar__fill { position: absolute; inset: 0 auto 0 0; background: var(--srk-yellow); }
.srk-ffbar--won .srk-ffbar__fill { background: #1C6B3C; }

.srk-ffbar__zone {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--srk-soft);
}
.srk-ffbar__zone[data-state="yes"] { color: #1C6B3C; }
.srk-ffbar__zone[data-state="no"]  { color: var(--srk-soft); }
.srk-ffbar__zone[hidden] { display: none; }

.srk-ffbar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	margin: 10px 0 0;
}
.srk-ffbar__actions .srk-freight__view { margin: 0; }
.srk-ffbar__note { font-size: 12px; line-height: 1.5; color: var(--srk-quiet); }

/* The cart's copy of the zone list is inside the bar; without script it should not
   push the totals half a screen down, so it reads as a compact tail there. */
.srk-ffbar .srk-zones { margin-top: 14px; padding-top: 14px; }
.srk-ffbar .srk-zones__list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/*
 * ...but once it is a dialog it is the same dialog as the product page's, and those two
 * rules have to get out of the way.
 *
 * They are written for the list sitting INSIDE the bar, and they outweigh the modal rules -
 * `.srk-ffbar .srk-zones` is (0,2,0) against `.srk-zones--modal` at (0,1,0). So the cart's
 * overlay was inheriting `margin-top: 14px` and `padding-top: 14px` from its inline form:
 * the backdrop started 14px down the screen instead of at the top, and the columns were
 * laid out for a full-width bar rather than a 480px panel. Small numbers, but it is why the
 * cart's popup did not look like the one on the product page.
 */
.srk-ffbar .srk-zones--modal,
html.js .srk-ffbar .srk-zones:target { margin: 0; padding: 20px; }
.srk-ffbar .srk-zones--modal .srk-zones__list,
html.js .srk-ffbar .srk-zones:target .srk-zones__list { grid-template-columns: 1fr; }

/* =========================================================================== */
/* Narrow                                                                      */
/* =========================================================================== */

@media (max-width: 600px) {
	.srk-freight { padding: 18px; }
	.srk-freight__row { flex-wrap: wrap; }
	.srk-freight__input { flex: 1 1 100%; }
	.srk-freight__go { flex: 1 1 100%; }
	.srk-zones--modal,
	html.js .srk-zones:target { padding: 0; align-items: flex-end; }
	.srk-zones--modal .srk-zones__panel,
	html.js .srk-zones:target .srk-zones__panel { max-width: none; max-height: 82vh; padding: 22px 20px; }
	.srk-ffbar { padding: 16px 18px; }
	.srk-ffbar .srk-zones__list { grid-template-columns: 1fr; }
	/* Matches the mobile overlay above: bottom sheet, no inset. */
	.srk-ffbar .srk-zones--modal,
	html.js .srk-ffbar .srk-zones:target { margin: 0; padding: 0; }
}

/* =========================================================================== */
/* Two columns, from 900px                                                     */
/* --------------------------------------------------------------------------- */
/* On the product page this panel sits in a ~700px column, and stacked it was   */
/* 275px of it. What it says and what it asks are different jobs, so they sit   */
/* side by side: the offer and its conditions on the left, the postcode check   */
/* on the right. Below 900px it stacks again - the phone layout was fine.       */
/*                                                                             */
/* The cart's bar (.srk-ffbar) is a different component and is untouched.       */
/* =========================================================================== */

@media (min-width: 900px) {
	.srk-freight {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px 28px;
		align-items: start;
	}

	.srk-freight__say,
	.srk-freight__do { min-width: 0; }

	/*
	 * The zone list is a direct child, so without this it would become a third grid item and
	 * land in the next cell. It is full width in flow and `position: fixed` once the script
	 * has promoted it to a dialog, where grid placement stops mattering.
	 */
	.srk-freight > .srk-zones { grid-column: 1 / -1; }

	.srk-freight__terms { margin-bottom: 10px; }
	.srk-freight__note { margin-top: 10px; }

	/* The check is the action; give it the whole of its own column. */
	.srk-freight__input { flex: 1 1 auto; }
}