/* BG Postcode → Delivery — Phase 5 polished styles
 * Scoped under the existing .bg-home-postcode hero aside and the
 * .bg-postcode-slot sibling injected by postcode-delivery.js.
 * Palette: #FA9F03 yellow, #101828 ink, #344054 body, #667085 muted,
 * #E2E8F0 hairline, #F6F7F9 surface — matches the rest of the BG design system.
 */

.bg-home-postcode__form[hidden] { display: none; }

.bg-postcode-slot {
	margin-top: 1rem;
}

/* ---------- shared shell ---------- */

.bg-postcode-result {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 1.1rem 1.2rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	animation: bgPostcodeFadeIn 0.22s ease-out both;
}

@keyframes bgPostcodeFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.bg-postcode-result { animation: none; }
}

.bg-postcode-result__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-right: 0.45rem;
	vertical-align: -3px;
}

/* ---------- header row: "✓ CT10 1AA — Kent" / "📍 ZZ99 9ZZ" ---------- */

.bg-postcode-result__pc {
	margin: 0;
	color: #101828;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.15rem;
}

.bg-postcode-result__pc strong {
	font-weight: 700;
	letter-spacing: 0.01em;
}

.bg-postcode-result--ok .bg-postcode-result__pc .bg-postcode-result__icon {
	color: #16a34a; /* tailwind green-600 — readable on white */
}

.bg-postcode-result--out .bg-postcode-result__pc .bg-postcode-result__icon,
.bg-postcode-result--temp .bg-postcode-result__pc .bg-postcode-result__icon {
	color: #667085;
}

/* ---------- delivery breakdown ---------- */

.bg-postcode-result__delivery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0;
	padding: 0.85rem 0.95rem;
	background: #f6f7f9;
	border-radius: 12px;
}

.bg-postcode-result__delivery > div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.bg-postcode-result__delivery dt {
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #667085;
	margin: 0;
	font-weight: 600;
}

.bg-postcode-result__delivery dd {
	margin: 0;
	font-size: 0.95rem;
	color: #101828;
	line-height: 1.2;
}

.bg-postcode-result__delivery dd strong {
	font-weight: 800;
	color: #FA9F03;
	font-size: 1.15rem;
	letter-spacing: -0.005em;
}

/* ---------- message + note ---------- */

.bg-postcode-result__msg {
	margin: 0;
	color: #344054;
	font-size: 0.95rem;
	line-height: 1.45;
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
}

.bg-postcode-result__msg > span { flex: 1; }

.bg-postcode-result__note {
	margin: 0;
	color: #667085;
	font-size: 0.78rem;
	line-height: 1.4;
}

/* ---------- actions ---------- */

.bg-postcode-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bg-postcode-result__shop,
.bg-postcode-result__contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.05rem;
	background: #FA9F03;
	color: #ffffff;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease;
}

.bg-postcode-result__shop:hover,
.bg-postcode-result__contact:hover,
.bg-postcode-result__shop:focus-visible,
.bg-postcode-result__contact:focus-visible {
	background: #d96a0d;
	color: #ffffff;
}

.bg-postcode-result__change {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.05rem;
	background: transparent;
	color: #101828;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.bg-postcode-result__change:hover,
.bg-postcode-result__change:focus-visible {
	border-color: #cbd5e1;
	background: #f6f7f9;
}

/* ---------- state tints ---------- */

.bg-postcode-result--out {
	border-color: #fde6c8;
	background: #fffaf1;
}

.bg-postcode-result--out .bg-postcode-result__msg {
	color: #92400e;
}

.bg-postcode-result--error {
	border-color: #fecaca;
	background: #fef2f2;
}

.bg-postcode-result--error .bg-postcode-result__msg,
.bg-postcode-result--error .bg-postcode-result__msg .bg-postcode-result__icon {
	color: #b42318;
}

.bg-postcode-result--temp {
	border-color: #cfdcec;
	background: #f5f8fc;
}

/* ---------- loading state on the Check button (both contexts) ---------- */

.bg-home-postcode__form button[type="submit"][data-bg-state="loading"],
.bg-product-postcode__form button[type="submit"][data-bg-state="loading"] {
	opacity: 0.7;
	cursor: progress;
}

/* ---------- inline form variant used inside the product delivery tab ---------- */

.bg-postcode-inline {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.75rem 0 0.25rem;
	max-width: 420px;
}

.bg-postcode-inline__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #667085;
}

.bg-postcode-inline__row {
	display: flex;
	gap: 0.5rem;
}

.bg-postcode-inline__input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.85rem;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #ffffff;
	font: inherit;
	font-size: 0.95rem;
	color: #101828;
}

.bg-postcode-inline__input:focus-visible {
	outline: 2px solid #FA9F03;
	outline-offset: 1px;
	border-color: #FA9F03;
}

.bg-postcode-inline__btn {
	padding: 0.6rem 1.1rem;
	background: #FA9F03;
	color: #ffffff;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bg-postcode-inline__btn:hover,
.bg-postcode-inline__btn:focus-visible {
	background: #d96a0d;
}

/* ---------- responsive: stack delivery breakdown on small screens ---------- */

@media (max-width: 600px) {
	.bg-postcode-result {
		padding: 1rem;
		gap: 0.65rem;
	}
	.bg-postcode-result__delivery {
		grid-template-columns: 1fr;
		gap: 0.55rem;
		padding: 0.75rem 0.85rem;
	}
	.bg-postcode-result__delivery dd strong { font-size: 1.05rem; }
	.bg-postcode-result__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.bg-postcode-result__shop,
	.bg-postcode-result__contact,
	.bg-postcode-result__change {
		width: 100%;
		justify-content: center;
	}
}