/**
 * EMPOLAS B2B — locked billing details summary (0.12.9).
 *
 * Used in two places with one definition: in place of the checkout billing form
 * and in My Account. Scoped under .empolas-b2b-billing-summary so no theme or
 * WooCommerce styling is affected. A definition list rather than a table, so it
 * reads correctly to a screen reader and collapses naturally on a phone.
 */

.empolas-b2b-billing-summary {
	margin: 0 0 24px 0;
	padding: 16px 18px;
	border: 1px solid var(--empolas-border, #d8e1ea);
	border-radius: var(--empolas-radius, 10px);
	background: var(--empolas-surface, #f5f8fb);
	color: var(--empolas-ink, #111827);
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
}

.empolas-b2b-billing-summary__list {
	margin: 0;
	padding: 0;
	display: grid;
	/* Fixed label column so the values line up; `max-content` would let one long
	   label push every value across. */
	grid-template-columns: minmax(120px, 200px) 1fr;
	gap: 6px 16px;
}

/* The row wrapper keeps each pair together for assistive technology; the grid
   itself is what aligns the columns, so the wrapper must not create a new one. */
.empolas-b2b-billing-summary__row {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}

.empolas-b2b-billing-summary__label {
	margin: 0;
	font-weight: 600;
	color: var(--empolas-muted, #4b5563);
}

.empolas-b2b-billing-summary__value {
	margin: 0;
	word-break: break-word;
}

.empolas-b2b-billing-summary__empty {
	margin: 0;
}

.empolas-b2b-billing-summary__missing {
	margin: 12px 0 0 0;
	padding: 10px 12px;
	border-radius: calc(var(--empolas-radius, 10px) - 4px);
	border: 1px solid var(--empolas-red, #c61618);
	background: #fdf2f2;
	color: var(--empolas-red, #c61618);
	font-weight: 600;
}

.empolas-b2b-billing-summary__contact {
	margin: 12px 0 0 0;
	color: var(--empolas-muted, #4b5563);
}

.empolas-b2b-billing-summary__contact a {
	color: var(--empolas-blue, #0e4176);
	font-weight: 700;
	text-decoration: underline;
}

.empolas-b2b-billing-summary__contact a:focus-visible {
	outline: 2px solid var(--empolas-blue, #0e4176);
	outline-offset: 2px;
}

/* `subgrid` is not everywhere yet; without it the row wrapper would stack the
   label and value, which is exactly what a narrow screen wants anyway. */
@supports not (grid-template-columns: subgrid) {
	.empolas-b2b-billing-summary__list {
		display: block;
	}

	.empolas-b2b-billing-summary__row {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 12px;
		padding: 4px 0;
	}

	.empolas-b2b-billing-summary__label {
		flex: 0 0 auto;
		min-width: 120px;
	}
}

@media (max-width: 640px) {
	.empolas-b2b-billing-summary__list {
		display: block;
	}

	.empolas-b2b-billing-summary__row {
		display: block;
		padding: 6px 0;
	}

	.empolas-b2b-billing-summary__label {
		display: block;
	}
}