/* =========================================================================
   Boorer Lock & Safe — trust marks, photo strips, contact, the request form.
   Dark throughout; see boorer.css for the token ladder.
   ========================================================================= */

/* ── Footer trust band ────────────────────────────────────────────────── */
.bl-ft-trust {
	border-top: 1px solid var(--bl-line);
	background: rgba(255, 255, 255, 0.035);
}
.bl-ft-trust-inner {
	max-width: var(--bl-wrap);
	margin: 0 auto;
	padding: 26px 20px;
	display: grid;
	gap: 22px;
	align-items: center;
}
.bl-ft-badges {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
/* The two badge artworks are black-and-red on white, so they get the one
   deliberate white plate on the site — anything else makes them illegible. */
.bl-ft-badges img {
	height: 60px;
	width: auto;
	background: var(--bl-light);
	border-radius: var(--bl-radius);
	padding: 9px 13px;
}
.bl-ft-assure {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px 22px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.82);
}
.bl-ft-assure li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.bl-ft-assure li::before {
	content: '';
	width: 7px;
	height: 7px;
	margin-top: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--bl-accent);
}

/* ── Badges elsewhere ─────────────────────────────────────────────────── */
.bl-badges {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
}
.bl-badges img {
	height: 54px;
	width: auto;
	background: var(--bl-light);
	border-radius: var(--bl-radius);
	padding: 8px 12px;
}
.bl-badges-sm img {
	height: 40px;
	padding: 6px 9px;
}

/* ── Real-work photo strips ───────────────────────────────────────────── */
.bl-shots {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bl-shots li {
	margin: 0;
}
.bl-shots li::before {
	content: none;
}
.bl-shots img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--bl-radius);
	background: var(--bl-shell);
	border: 1px solid var(--bl-line);
}
.bl-shots-cap {
	margin: 7px 0 0;
	font-size: 0.78rem;
	color: var(--bl-faint);
	line-height: 1.4;
}
.bl-shots-note {
	margin: 16px 0 0;
	font-size: 0.85rem;
	color: var(--bl-muted);
}
.bl-shots-note a {
	color: var(--bl-accent);
}

/* ── Contact page ─────────────────────────────────────────────────────────
   Rebuilt as cards. The previous version was a bare label/value list floating
   in whitespace with the CTA stranded on the far right, which read as three
   unrelated fragments rather than one page.
   ───────────────────────────────────────────────────────────────────────── */
.bl-contact-grid {
	display: grid;
	gap: 16px;
}
.bl-card {
	background: var(--bl-shell);
	border: 1px solid var(--bl-line);
	border-radius: var(--bl-radius);
	padding: 26px;
}
.bl-card-accent {
	background: var(--bl-charcoal);
	border-color: rgba(241, 89, 47, 0.45);
}
.bl-card-h {
	font-size: 1.1rem;
	margin: 0 0 4px;
}
.bl-card-p {
	margin: 0 0 18px;
	font-size: 0.92rem;
	color: var(--bl-muted);
}
/* One phone number, presented as the thing it is: a big tappable target. */
.bl-tel-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-decoration: none;
	background: var(--bl-raised);
	border: 1px solid var(--bl-line);
	border-radius: var(--bl-radius);
	padding: 16px 18px;
	margin-bottom: 10px;
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease;
}
.bl-tel-card:hover {
	border-color: var(--bl-accent);
	background: var(--bl-charcoal);
}
.bl-tel-k {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--bl-accent);
}
.bl-tel-v {
	display: block;
	font-family: var(--bl-display);
	font-weight: 700;
	font-size: 1.42rem;
	line-height: 1.25;
	color: var(--bl-ink);
	margin-top: 2px;
}
.bl-tel-note {
	display: block;
	font-size: 0.8rem;
	color: var(--bl-faint);
	margin-top: 2px;
}
.bl-tel-ic {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--bl-accent);
}
.bl-contact-addr {
	font-style: normal;
	font-family: var(--bl-display);
	font-size: 1.08rem;
	line-height: 1.6;
	margin: 0 0 14px;
	color: var(--bl-ink);
}
.bl-map {
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
	border-radius: var(--bl-radius);
	background: var(--bl-raised);
	display: block;
	filter: grayscale(0.35) contrast(1.05) brightness(0.92);
}

/* ── Request form ─────────────────────────────────────────────────────── */
.bl-form {
	max-width: 840px;
}
.bl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.bl-step {
	border: 0;
	margin: 0 0 34px;
	padding: 0;
}
.bl-step-h {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--bl-display);
	font-size: 1.25rem;
	font-weight: 700;
	padding: 0;
	margin-bottom: 16px;
	color: var(--bl-ink);
}
.bl-step-h span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--bl-accent);
	color: #fff;
	font-size: 0.95rem;
}
.bl-need-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.bl-need input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.bl-need-box {
	display: block;
	cursor: pointer;
	background: var(--bl-shell);
	border: 2px solid var(--bl-line);
	border-radius: var(--bl-radius);
	padding: 14px 16px;
	height: 100%;
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease;
}
.bl-need-box:hover {
	border-color: var(--bl-accent);
	background: var(--bl-raised);
}
.bl-need input:checked + .bl-need-box {
	border-color: var(--bl-accent);
	background: var(--bl-accent-soft);
}
.bl-need input:focus-visible + .bl-need-box {
	outline: 3px solid var(--bl-accent);
	outline-offset: 2px;
}
.bl-need-label {
	display: block;
	font-family: var(--bl-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--bl-ink);
}
.bl-need-note {
	display: block;
	font-size: 0.83rem;
	color: var(--bl-muted);
	margin-top: 2px;
}

.bl-field {
	margin-bottom: 20px;
	display: block;
}
.bl-field-row {
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}
.bl-sub {
	display: block;
}
.bl-label {
	display: block;
	font-family: var(--bl-display);
	font-weight: 500;
	font-size: 0.95rem;
	margin-bottom: 7px;
	color: var(--bl-ink);
}
.bl-req {
	color: var(--bl-accent);
}
.bl-form input[type='text'],
.bl-form input[type='tel'],
.bl-form input[type='email'],
.bl-form input[type='date'],
.bl-form input:not([type]),
.bl-form textarea {
	width: 100%;
	font: inherit;
	color: var(--bl-ink);
	background: var(--bl-raised);
	border: 1px solid var(--bl-line);
	border-radius: var(--bl-radius);
	padding: 11px 13px;
}
.bl-form input::placeholder,
.bl-form textarea::placeholder {
	color: var(--bl-faint);
}
.bl-form textarea {
	resize: vertical;
}
.bl-form input:focus,
.bl-form textarea:focus {
	border-color: var(--bl-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(241, 89, 47, 0.22);
}
/* The native date picker paints itself light; force the control's own glyph to
   the dark scheme so it isn't a white square on a dark field. The styled
   calendar (datepick.js) replaces it entirely where JS is available. */
.bl-form input[type='date'] {
	color-scheme: dark;
}
.bl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bl-chip input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.bl-chip span {
	display: inline-block;
	cursor: pointer;
	background: var(--bl-raised);
	border: 1px solid var(--bl-line);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 0.89rem;
	color: var(--bl-ink);
	transition:
		border-color 0.12s ease,
		background-color 0.12s ease,
		color 0.12s ease;
}
.bl-chip span:hover {
	border-color: var(--bl-accent);
}
.bl-chip input:checked + span {
	background: var(--bl-accent);
	border-color: var(--bl-accent);
	color: #fff;
}
.bl-chip input:focus-visible + span {
	outline: 3px solid var(--bl-accent);
	outline-offset: 2px;
}
.bl-hint {
	margin: 7px 0 0;
	font-size: 0.83rem;
	color: var(--bl-faint);
}
.bl-hint a {
	color: var(--bl-accent);
}
.bl-field-error,
.bl-form-error {
	margin: 7px 0 0;
	font-size: 0.87rem;
	color: #ff9a8e;
}
.bl-form-error {
	background: rgba(179, 38, 30, 0.18);
	border: 1px solid rgba(255, 154, 142, 0.35);
	border-radius: var(--bl-radius);
	padding: 12px 14px;
	margin-bottom: 20px;
}
.bl-submit {
	margin-top: 8px;
}

/* The lockout call-out: the phone number, before any form field. */
.bl-callout {
	background: var(--bl-deep);
	border: 1px solid rgba(241, 89, 47, 0.4);
	color: #fff;
	border-radius: var(--bl-radius);
	padding: 22px 24px;
	margin-bottom: 30px;
}
.bl-callout-h {
	font-family: var(--bl-display);
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0 0 6px;
}
.bl-callout-p {
	margin: 0 0 16px;
	color: var(--bl-muted);
	max-width: 56ch;
}

/* ── Styled date picker (progressive enhancement) ─────────────────────────
   The platform standard: never ship the browser's native calendar, which is
   a light-blue Chrome panel that ignores the site entirely. datepick.js swaps
   the <input type="date"> for this; with JS off the native input remains and
   the form still submits, so nothing depends on the script.
   ───────────────────────────────────────────────────────────────────────── */
.bl-dp {
	position: relative;
}
.bl-dp-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	font: inherit;
	text-align: left;
	cursor: pointer;
	color: var(--bl-ink);
	background: var(--bl-raised);
	border: 1px solid var(--bl-line);
	border-radius: var(--bl-radius);
	padding: 11px 13px;
}
.bl-dp-trigger:hover {
	border-color: var(--bl-accent);
}
.bl-dp-trigger.is-empty {
	color: var(--bl-faint);
}
.bl-dp-trigger svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--bl-accent);
}
.bl-dp-pop {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	width: 288px;
	background: var(--bl-charcoal);
	border: 1px solid var(--bl-line);
	border-radius: var(--bl-radius);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
	padding: 14px;
}
.bl-dp-pop[hidden] {
	display: none;
}
.bl-dp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.bl-dp-month {
	font-family: var(--bl-display);
	font-weight: 700;
	font-size: 0.95rem;
}
.bl-dp-head button {
	width: 32px;
	height: 32px;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--bl-ink);
	background: var(--bl-raised);
	border: 1px solid var(--bl-line);
	border-radius: var(--bl-radius);
}
.bl-dp-head button:hover {
	border-color: var(--bl-accent);
	color: var(--bl-accent);
}
.bl-dp-dows,
.bl-dp-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}
.bl-dp-dows span {
	text-align: center;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bl-faint);
	padding-bottom: 5px;
}
.bl-dp-grid button {
	aspect-ratio: 1;
	font: inherit;
	font-size: 0.86rem;
	cursor: pointer;
	color: var(--bl-ink);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
}
.bl-dp-grid button:hover:not(:disabled) {
	border-color: var(--bl-accent);
}
.bl-dp-grid button.is-out {
	color: var(--bl-faint);
}
.bl-dp-grid button.is-today {
	border-color: var(--bl-line);
	font-weight: 700;
}
.bl-dp-grid button.is-on {
	background: var(--bl-accent);
	border-color: var(--bl-accent);
	color: #fff;
	font-weight: 700;
}
.bl-dp-grid button:disabled {
	color: rgba(255, 255, 255, 0.18);
	cursor: default;
}
.bl-dp-foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--bl-line);
}
.bl-dp-foot button {
	font: inherit;
	font-size: 0.84rem;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 4px 2px;
	color: var(--bl-accent);
}
.bl-dp-foot button:hover {
	text-decoration: underline;
}

/* ── BRANCHING, in CSS only ───────────────────────────────────────────────
   A block is shown when the form contains a checked radio whose id matches
   one of the needs in its data-when. Written as explicit rules per need so
   there is no JavaScript anywhere in this form.

   FALLBACK BEHAVIOUR MATTERS: where :has() is unsupported the first rule never
   applies, so every block stays visible. That is a long form, but a working
   one — nobody is locked out of contacting a locksmith by their browser.
   ───────────────────────────────────────────────────────────────────────── */
.bl-form:has(input[name='need']:checked) .bl-branch {
	display: none;
}
.bl-form:has(#need-lockout:checked) .bl-branch[data-when~='lockout'],
.bl-form:has(#need-keys:checked) .bl-branch[data-when~='keys'],
.bl-form:has(#need-locks:checked) .bl-branch[data-when~='locks'],
.bl-form:has(#need-upvc:checked) .bl-branch[data-when~='upvc'],
.bl-form:has(#need-safe:checked) .bl-branch[data-when~='safe'],
.bl-form:has(#need-vehicle:checked) .bl-branch[data-when~='vehicle'],
.bl-form:has(#need-bars:checked) .bl-branch[data-when~='bars'] {
	display: block;
}
/* Rows that are themselves grids must come back as grids, not blocks. */
.bl-form:has(#need-lockout:checked) .bl-field-row.bl-branch[data-when~='lockout'],
.bl-form:has(#need-keys:checked) .bl-field-row.bl-branch[data-when~='keys'],
.bl-form:has(#need-locks:checked) .bl-field-row.bl-branch[data-when~='locks'],
.bl-form:has(#need-upvc:checked) .bl-field-row.bl-branch[data-when~='upvc'],
.bl-form:has(#need-safe:checked) .bl-field-row.bl-branch[data-when~='safe'],
.bl-form:has(#need-vehicle:checked) .bl-field-row.bl-branch[data-when~='vehicle'],
.bl-form:has(#need-bars:checked) .bl-field-row.bl-branch[data-when~='bars'] {
	display: grid;
}
/* Step 2 has nothing to say until a need is chosen — hide the whole heading
   rather than leave an empty numbered step sitting there. */
.bl-form:has(input[name='need']:checked) .bl-step-2 {
	display: block;
}
.bl-form:not(:has(input[name='need']:checked)) .bl-step-2 {
	display: none;
}

@media (min-width: 720px) {
	.bl-ft-trust-inner {
		grid-template-columns: auto 1fr;
		gap: 34px;
	}
	.bl-ft-assure {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bl-field-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bl-shots {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1040px) {
	.bl-shots {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.bl-contact-grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

/* Platform rule 17 — token overrides at html:root. */
html:root {
	--color-accent: #f1592f;
	--color-ink: #efedeb;
	--color-paper: #1a1a1d;
}