/*
 * MMT Quote - layout-local styles only.
 * Relies entirely on the site's global design-system tokens (--mmt-*) and
 * shared components (.mmt-btn, .mmt-field, .mmt-qty) - see design.md.
 *
 * Audience is 50+ on the shop floor (design.md §1.1): body text sits at
 * --mmt-fs-base (17px) or larger everywhere it carries content the customer
 * has to read to make a decision - specs, notes, disclaimers, form
 * instructions. --mmt-fs-sm/--mmt-fs-label stay reserved for what design.md
 * actually scopes them to: table column headers and pure UI chrome (the
 * count badge), never body copy.
 */

/* An author-stylesheet rule that sets `display` on a class always beats the
 * browser's built-in `[hidden]{display:none}`, regardless of specificity -
 * origin (author vs. user-agent) decides the tie, not selector weight. Every
 * element here that's shown/hidden via the native `hidden` attribute/property
 * (.mmt-q-clear-confirm, .mmt-q-totals, .mmt-q-actions, .mmt-q-row__note-toggle,
 * .mmt-q-row__note-status, .mmt-q-add-error, plus any shared .mmt-btn button)
 * sits behind a `display:` rule elsewhere in this file or in the site's global
 * CSS, which silently made `hidden` a no-op - e.g. clicking "Изчисти" toggled
 * the attribute correctly but nothing visually changed, and the confirm step
 * appeared permanently visible. `!important` here is the standard, documented
 * fix for exactly this conflict, not a specificity workaround.
 */
[ hidden ] {
	display: none !important;
}

/* ---------------------------------------------------------- Pending state */

.mmt-q-spinner {
	display: inline-block;
	vertical-align: middle;
	animation: mmtq-spin 0.8s linear infinite;
}

@keyframes mmtq-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mmt-q-spinner {
		animation: none;
	}
}

.is-pending {
	opacity: 0.7;
	cursor: wait;
}

.mmt-q-pending-label {
	margin-left: var( --mmt-sp-2, 8px );
}

.mmt-q-row.is-removing {
	opacity: 0.5;
}

.mmt-q-list-wrap.is-busy {
	opacity: 0.6;
}

.mmt-q-clear-confirm {
	display: inline-flex;
	align-items: center;
	gap: var( --mmt-sp-3, 12px );
}

.mmt-q-clear-confirm__label {
	font-size: var( --mmt-fs-base, 1rem );
	font-weight: 600;
}

.mmt-q-clear-confirm__yes {
	color: var( --mmt-danger, #b3261e );
	border-color: var( --mmt-danger, #b3261e );
}

.mmt-q-clear-confirm__yes:hover {
	background: rgba( 179, 38, 30, 0.08 );
}

.mmt-q-add-error {
	display: block;
	flex-basis: 100%; /* inside a flex row (e.g. the variation table's action cell), forces the error onto its own line instead of squeezing next to the button */
	margin-top: var( --mmt-sp-2, 8px );
	color: var( --mmt-danger, #b3261e );
	font-size: var( --mmt-fs-base, 1rem );
	font-weight: 600;
	text-align: right;
}

[ data-mmtq-empty-heading ]:focus {
	outline: none;
	box-shadow: var( --mmt-focus, 0 0 0 3px rgba( 30, 111, 216, 0.45 ) );
	border-radius: var( --mmt-radius-sm, 3px );
}

.mmt-q-count-wrap {
	display: inline-flex;
	align-items: center;
	gap: var( --mmt-sp-2, 8px );
	font-size: 15px;
	font-weight: 600;
}

.mmt-q-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: var( --mmt-radius-pill, 999px );
	background: var( --mmt-blue, #1e6fd8 );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.mmt-q-price-hidden,
.mmt-q-disclaimer {
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.6;
}

.mmt-q-price-bgn {
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-base, 1rem );
}

/* ---------------------------------------------------------- Price table */

.mmt-q-price-table__tiers {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var( --mmt-sp-3, 12px );
	font-size: var( --mmt-fs-base, 1rem );
}

.mmt-q-price-table__tiers th,
.mmt-q-price-table__tiers td {
	padding: var( --mmt-sp-3, 12px );
	border-bottom: var( --mmt-border, 1px solid #d9dde5 );
	text-align: left;
}

.mmt-q-price-table__tiers th {
	background: var( --mmt-head, #eef1f6 );
	font-size: var( --mmt-fs-base, 1rem );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mmt-q-price-table__tiers td {
	font-weight: 600;
}

/* ---------------------------------------------------------- List / form wrap */

.mmt-q-list-wrap {
	display: flex;
	flex-direction: column;
	gap: var( --mmt-sp-6, 32px );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.6;
}

.mmt-q-loading,
.mmt-q-empty {
	padding: var( --mmt-sp-7, 48px ) 0;
	text-align: center;
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-lg, 1.2rem );
}

.mmt-q-empty p {
	margin-bottom: var( --mmt-sp-4, 16px );
}

/* ---------------------------------------------------------- Table */

/* A <table> cannot be laid out narrower than its min-content width, so on any
 * viewport where the full 7-column table doesn't fit (notably a phone in
 * landscape, 641-900px - below 640px it becomes cards instead) it would push
 * the whole page wide and produce a page-level horizontal scrollbar. Scrolling
 * it internally is what the design system asks for (§9: "таблицата скролира
 * вътрешно"), and matches .mmt-vtable-scroll in the variation table snippet.
 * min-width:0 is required because this is a flex item of .mmt-q-list-wrap -
 * without it the item is sized to its content and overflows instead of
 * scrolling. Empty (and therefore invisible) while the table is hidden. */
.mmt-q-table-scroll {
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mmt-q-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.4;
}

.mmt-q-table th {
	background: var( --mmt-head, #eef1f6 );
	font-size: var( --mmt-fs-base, 1rem );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	padding: var( --mmt-sp-3, 12px );
}

.mmt-q-table td {
	padding: var( --mmt-sp-4, 16px ) var( --mmt-sp-3, 12px );
	border-bottom: var( --mmt-border, 1px solid #d9dde5 );
	vertical-align: top;
}

/* The first header cell is intentionally empty, so an auto-layout table may
 * otherwise collapse this column below the thumbnail width. Bricks also puts
 * max-width:100% on images, which then squeezes a 64px thumbnail into that
 * collapsed column. Reserve the image plus the cell's horizontal padding. */
.mmt-q-table__img,
.mmt-q-row__img {
	width: 88px;
	min-width: 88px;
}

.mmt-q-row__img img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
	object-fit: contain;
	background: #fff;
	border: var( --mmt-border, 1px solid #d9dde5 );
	border-radius: var( --mmt-radius-sm, 3px );
}

.mmt-q-row__name {
	font-weight: 600;
}

/* A catalogue variation has 1-3 attributes here; a configured article has
 * 15-20. min-width:0 + overflow-wrap let the longest single value wrap instead
 * of setting the cell's min-content width and forcing the table (and the page)
 * wider than the viewport - the same failure the mobile card layout already
 * had to fix for SKUs. */
.mmt-q-row__spec {
	font-family: var( --mmt-font-mono, monospace );
	font-size: var( --mmt-fs-base, 1rem );
	color: var( --mmt-muted, #5b6472 );
	margin-top: var( --mmt-sp-2, 8px );
	min-width: 0;
	overflow-wrap: anywhere;
	line-height: 1.5;
}

.mmt-q-row__edit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var( --mmt-sp-1, 4px );
	margin-right: var( --mmt-sp-3, 12px );
	color: var( --mmt-blue-dark, #1559b0 );
	font-size: var( --mmt-fs-base, 1rem );
}

.mmt-q-negotiable-note {
	margin: var( --mmt-sp-2, 8px ) 0 0;
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.6;
}

.mmt-q-row__note-toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var( --mmt-sp-1, 4px );
	background: none;
	border: none;
	color: var( --mmt-blue-dark, #1559b0 );
	font-size: var( --mmt-fs-base, 1rem );
	font-weight: 600;
	cursor: pointer;
}

.mmt-q-row__note-toggle:focus-visible,
.mmt-q-row__remove button:focus-visible {
	outline: none;
	box-shadow: var( --mmt-focus, 0 0 0 3px rgba( 30, 111, 216, 0.45 ) );
	border-radius: var( --mmt-radius-sm, 3px );
}

.mmt-q-row__note-input {
	margin-top: var( --mmt-sp-2, 8px );
	max-width: 320px;
}

.mmt-q-row__note-status {
	display: block;
	margin-top: var( --mmt-sp-1, 4px );
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-base, 1rem );
}

.mmt-q-row__remove button {
	min-width: 48px;
	min-height: 48px;
	background: none;
	border: none;
	color: var( --mmt-danger, #b3261e );
	font-size: 24px;
	cursor: pointer;
}

.mmt-q-row__unit {
	display: block;
	font-size: var( --mmt-fs-base, 1rem );
	color: var( --mmt-muted, #5b6472 );
	text-align: center;
	margin-top: var( --mmt-sp-2, 8px );
}

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

.mmt-q-totals {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: var( --mmt-sp-2, 8px );
	font-size: var( --mmt-fs-lg, 1.2rem );
}

.mmt-q-totals strong {
	font-size: var( --mmt-fs-h3, 1.375rem );
}

.mmt-q-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --mmt-sp-5, 24px );
}

/* ---------------------------------------------------------- Form */

.mmt-q-form {
	border-top: var( --mmt-border, 1px solid #d9dde5 );
	padding-top: var( --mmt-sp-6, 32px );
}

.mmt-q-form__required-note {
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-base, 1rem );
	margin-bottom: var( --mmt-sp-5, 24px );
}

.mmt-q-form__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0 var( --mmt-sp-5, 24px );
}

.mmt-field-wrap {
	margin-bottom: var( --mmt-sp-5, 24px );
}

.mmt-field-wrap label {
	display: block;
	margin-bottom: var( --mmt-sp-2, 8px );
	font-size: var( --mmt-fs-base, 1rem );
	font-weight: 600;
}

.mmt-q-form__toggle label {
	display: inline-flex;
	align-items: center;
	gap: var( --mmt-sp-2, 8px );
	font-size: var( --mmt-fs-base, 1rem );
	font-weight: 600;
	cursor: pointer;
}

.mmt-q-form__toggle input[ type='checkbox' ] {
	width: 22px;
	height: 22px;
}

.mmt-q-form__invoice-fields {
	border: var( --mmt-border, 1px solid #d9dde5 );
	border-radius: var( --mmt-radius-md, 6px );
	padding: var( --mmt-sp-5, 24px );
	margin: 0 0 var( --mmt-sp-5, 24px );
}

.mmt-q-form__invoice-fields legend {
	font-family: var( --mmt-font-display, inherit );
	font-size: var( --mmt-fs-h3, 1.375rem );
	font-weight: 500;
	color: var( --mmt-ink, #14161a );
	padding: 0 var( --mmt-sp-2, 8px );
}

.mmt-field-wrap input[ type='checkbox' ] {
	width: 22px;
	height: 22px;
	margin-right: var( --mmt-sp-2, 8px );
	vertical-align: middle;
}

.mmt-field-wrap label a {
	color: var( --mmt-blue-dark, #1559b0 );
	text-decoration: underline;
}

.mmt-q-attach-list {
	list-style: none;
	margin: var( --mmt-sp-3, 12px ) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --mmt-sp-2, 8px );
}

.mmt-q-attach-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --mmt-sp-3, 12px );
	padding: var( --mmt-sp-2, 8px ) var( --mmt-sp-3, 12px );
	border: var( --mmt-border, 1px solid #d9dde5 );
	border-radius: var( --mmt-radius-sm, 3px );
	font-size: var( --mmt-fs-base, 1rem );
}

.mmt-q-attach-item__name {
	overflow-wrap: anywhere;
}

.mmt-q-attach-item__remove {
	flex-shrink: 0;
	min-width: 48px;
	min-height: 48px;
	background: none;
	border: none;
	color: var( --mmt-danger, #b3261e );
	font-size: 24px;
	cursor: pointer;
}

.mmt-q-attach-error {
	color: var( --mmt-danger, #b3261e );
	font-weight: 600;
	margin-top: var( --mmt-sp-2, 8px );
}

.mmt-q-attach-summary {
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-base, 1rem );
	margin-top: var( --mmt-sp-2, 8px );
}

.mmt-q-form__errors {
	font-size: var( --mmt-fs-base, 1rem );
	font-weight: 600;
}

.mmt-q-form__errors:not( :empty ) {
	background: rgba( 179, 38, 30, 0.08 );
	border-left: 4px solid var( --mmt-danger, #b3261e );
	color: var( --mmt-danger, #b3261e );
	padding: var( --mmt-sp-3, 12px ) var( --mmt-sp-4, 16px );
	margin-bottom: var( --mmt-sp-4, 16px );
	border-radius: var( --mmt-radius-sm, 3px );
}

.mmt-q-form__actions {
	margin-top: var( --mmt-sp-6, 32px );
}

.mmt-q-success {
	background: rgba( 20, 122, 69, 0.08 );
	border-left: 4px solid var( --mmt-success, #147a45 );
	border-radius: var( --mmt-radius-sm, 3px );
	padding: var( --mmt-sp-5, 24px );
	color: var( --mmt-success, #147a45 );
	font-size: var( --mmt-fs-lg, 1.2rem );
	line-height: 1.6;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* ---------------------------------------------------------- Mobile cards */

@media ( max-width: 640px ) {
	.mmt-q-table thead {
		display: none;
	}

	.mmt-q-table,
	.mmt-q-table tbody,
	.mmt-q-table tr,
	.mmt-q-table td {
		display: block;
		width: 100%;
	}

	.mmt-q-table tr {
		border: var( --mmt-border, 1px solid #d9dde5 );
		border-radius: var( --mmt-radius-md, 6px );
		margin-bottom: var( --mmt-sp-4, 16px );
		padding: var( --mmt-sp-4, 16px );
	}

	.mmt-q-table td {
		border: none;
		padding: var( --mmt-sp-2, 8px ) 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var( --mmt-sp-3, 12px );
		min-width: 0; /* flex items default to min-width:auto, which refuses to
			shrink below content size and forces the row (and the page) wider
			than the viewport instead of wrapping - this is what clipped SKU/
			price text and forced horizontal scrolling on narrow screens. */
		flex-wrap: wrap; /* min-width:0 only helps cells whose width comes from
			text. The qty cell's does not: .mmt-qty's width is the sum of its
			children's FIXED widths (44+56+44px + 4px borders = 148px), which
			no amount of min-width:0 can shrink. Label (~110px at 0.95rem
			uppercase, and flex-shrink:0 below) + gap + 148px stepper + gap +
			unit overflows a 360px phone once the card's 32px padding and the
			theme's page gutter are counted. Wrapping is the only safety valve
			that works for a cell with genuinely non-shrinkable contents. */
	}

	.mmt-q-table td > * {
		min-width: 0;
	}

	.mmt-q-table td[ data-label ]::before {
		content: attr( data-label );
		flex-shrink: 0;
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var( --mmt-muted, #5b6472 );
	}

	.mmt-q-row__sku,
	.mmt-q-row__price,
	.mmt-q-row__total {
		overflow-wrap: anywhere; /* SKUs/prices are single unbroken tokens with
			nowhere else to break - without this they force the row wider
			instead of wrapping onto a second line. */
	}

	/* The "Продукт" cell holds several stacked pieces (name, spec, note
	 * toggle/input/status), not one label->value pair - flexing them all
	 * into a single space-between row (like every other mobile card cell)
	 * scatters them across the row instead of stacking them, and pushed
	 * "+ Бележка" off to its own orphaned line. Stack it as a block instead,
	 * with the label as its own heading line above the content. */
	.mmt-q-table td.mmt-q-row__product {
		display: block;
	}

	.mmt-q-table td.mmt-q-row__product[ data-label ]::before {
		display: block;
		margin-bottom: var( --mmt-sp-2, 8px );
	}

	.mmt-q-table td.mmt-q-row__product .mmt-q-row__note-toggle {
		margin-top: var( --mmt-sp-2, 8px );
	}

	.mmt-q-form__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------- Configuration form
 *
 * The made-to-order product form ([mmt_quote_config]). Every control here is a
 * shared design-system component (.mmt-field, .mmt-qty, .mmt-btn) - this block
 * only lays them out and must not restyle them. Audience is 50+ maintenance and
 * procurement staff: nothing here shrinks type or tap targets.
 */

.mmt-q-config {
	display: flex;
	flex-direction: column;
	gap: var( --mmt-sp-4, 16px );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.6;
}

.mmt-q-config__intro {
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.6;
	color: var( --mmt-muted, #5b6472 );
}

.mmt-q-config__intro p {
	margin: 0 0 var( --mmt-sp-2, 8px );
}

.mmt-q-config__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --mmt-sp-5, 24px );
	align-items: start;
}

/* Drawing beside the fields (img="auto"). minmax(0, …) on the first column
 * because a grid item's default min-width:auto refuses to shrink below its
 * content, which is what lets a long option label push the whole page wide. */
.mmt-q-config--img-side .mmt-q-config__body {
	grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr );
}

.mmt-q-config__fields {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --mmt-sp-3, 12px ) var( --mmt-sp-4, 16px );
	min-width: 0;
}

.mmt-q-config__field {
	margin: 0;
	min-width: 0;
}

/* Labels are always visible above their control; a placeholder never replaces
 * one. A label that disappears on focus is a label the customer cannot check
 * their answer against. */
.mmt-q-config__field label {
	display: block;
	margin-bottom: var( --mmt-sp-1, 4px );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.4;
}

.mmt-q-config__field .mmt-field {
	width: 100%;
	max-width: 100%;
}

.mmt-q-config__field textarea.mmt-field {
	resize: vertical;
}

.mmt-q-config__error {
	display: block;
	margin-top: var( --mmt-sp-1, 4px );
	color: var( --mmt-danger, #b3261e );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.4;
}

.mmt-q-config__field [ aria-invalid='true' ] {
	border-color: var( --mmt-danger, #b3261e );
}

/* Constrain the drawing's HEIGHT, not its width: a width-constrained portrait
 * drawing inflates the grid row and leaves dead space next to short intro copy,
 * while a height cap makes portrait and landscape drawings occupy the same
 * vertical band regardless of aspect ratio. */
.mmt-q-config__drawing {
	margin: 0;
	min-width: 0;
	--mmt-q-drawing-height: 300px;
}

.mmt-q-config__drawing img {
	display: block;
	max-height: var( --mmt-q-drawing-height, 300px );
	width: auto;
	max-width: 100%;
	height: auto;
}

.mmt-q-config__drawing figcaption {
	margin-top: var( --mmt-sp-2, 8px );
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.5;
}

.mmt-q-config__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --mmt-sp-3, 12px );
}

.mmt-q-config__status {
	margin: 0;
	min-height: 1.6em;
	color: var( --mmt-muted, #5b6472 );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.6;
}

.mmt-q-config__status:empty {
	min-height: 0;
}

.mmt-q-config__admin-notice {
	padding: var( --mmt-sp-3, 12px );
	border-left: 4px solid var( --mmt-danger, #b3261e );
	background: var( --mmt-head, #eef1f6 );
	font-size: var( --mmt-fs-base, 1rem );
}

@media ( max-width: 640px ) {
	/* Stack the drawing under the fields rather than squeezing two columns
	 * into a phone. The variation table stays a table on phones because it
	 * exists for side-by-side comparison; this form has no such constraint. */
	.mmt-q-config--img-side .mmt-q-config__body {
		grid-template-columns: minmax( 0, 1fr );
	}

	.mmt-q-config__fields {
		grid-template-columns: minmax( 0, 1fr );
	}

	.mmt-q-config__actions {
		align-items: stretch;
	}
}

/* ---------------------------------------------------------- Configuration dialog
 *
 * The variation path (§12): one panel per page, opened by a table row's
 * [data-mmtq-config] button.
 *
 * `display` is scoped to [open] on purpose. The browser hides a closed
 * <dialog> with its own `dialog:not([open]){display:none}` rule, and an
 * author-origin `display` declaration beats a user-agent one regardless of
 * specificity - so an unscoped `.mmt-q-config-dialog{display:flex}` would
 * leave the panel permanently visible, sitting open on the page. That is the
 * same trap the [hidden] reset at the top of this file exists for; here the
 * fix is the selector, since a <dialog> has no `hidden` attribute to reset.
 */

.mmt-q-config-dialog[ open ] {
	display: flex;
	flex-direction: column;
	gap: var( --mmt-sp-4, 16px );
}

.mmt-q-config-dialog {
	width: min( 900px, calc( 100vw - 2 * var( --mmt-sp-4, 16px ) ) );
	max-height: calc( 100vh - 2 * var( --mmt-sp-5, 24px ) );
	overflow-y: auto;
	padding: var( --mmt-sp-5, 24px );
	border: var( --mmt-border, 1px solid #d9dde5 );
	border-radius: var( --mmt-radius-md, 6px );
	background: #fff;
	color: var( --mmt-ink, #14161a );
	font-size: var( --mmt-fs-base, 1rem );
	line-height: 1.6;
}

.mmt-q-config-dialog::backdrop {
	background: rgba( 10, 30, 94, 0.45 );
}

.mmt-q-config-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --mmt-sp-3, 12px );
}

.mmt-q-config-dialog__title {
	margin: 0;
	font-size: var( --mmt-fs-lg, 1.2rem );
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* 48px, not a 24px "×": the audience is 50+ maintenance and procurement
 * staff, often on a phone, and this is the control they reach for first when
 * they opened the wrong row. */
.mmt-q-config-dialog__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0;
	border: var( --mmt-border, 1px solid #d9dde5 );
	border-radius: var( --mmt-radius-sm, 3px );
	background: transparent;
	color: var( --mmt-ink, #14161a );
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.mmt-q-config-dialog__close:focus-visible {
	outline: none;
	box-shadow: var( --mmt-focus, 0 0 0 3px rgba( 30, 111, 216, 0.45 ) );
}

/* ---------------------------------------------------------- Readability floor
 *
 * Bricks sets the root to 10px, while the design scale describes
 * --mmt-fs-base as normal readable copy. Keep a moderate pixel floor local to
 * customer-facing quote content so a missing/stale global token cannot shrink
 * it back to 10-11px. Dense metadata and table labels use a slightly smaller
 * 14px step, while the header counter stays compact at 13px.
 */
.mmt-q-clear-confirm__label,
.mmt-q-add-error,
.mmt-q-price-hidden,
.mmt-q-disclaimer,
.mmt-q-price-bgn,
.mmt-q-price-table__tiers,
.mmt-q-list-wrap,
.mmt-q-table,
.mmt-q-row__edit,
.mmt-q-negotiable-note,
.mmt-q-row__note-toggle,
.mmt-q-row__unit,
.mmt-q-form__required-note,
.mmt-field-wrap label,
.mmt-q-form__toggle label,
.mmt-q-attach-item,
.mmt-q-form__errors,
.mmt-q-config,
.mmt-q-config__intro,
.mmt-q-config__field label,
.mmt-q-config__error,
.mmt-q-config__drawing figcaption,
.mmt-q-config__status,
.mmt-q-config__admin-notice,
.mmt-q-config-dialog {
	font-size: 15px;
}

.mmt-q-price-table__tiers th,
.mmt-q-table th,
.mmt-q-row__spec,
.mmt-q-row__note-status,
.mmt-q-attach-summary {
	font-size: 14px;
}

/* Shared controls normally receive their type size from the Bricks global
 * design system. Scope the same floor to Quote UI so an old compiled Bricks
 * stylesheet cannot make controls substantially smaller than nearby copy. */
.mmt-q-list-wrap .mmt-btn,
.mmt-q-list-wrap .mmt-field,
.mmt-q-list-wrap .mmt-qty-input,
.mmt-q-config .mmt-btn,
.mmt-q-config .mmt-field,
.mmt-q-config .mmt-qty-input,
.mmt-q-config-dialog .mmt-btn,
.mmt-q-config-dialog .mmt-field,
.mmt-q-config-dialog .mmt-qty-input {
	font-size: 15px;
}

/* The actions sit below the table, where the shared 48px/24px-padding button
 * treatment is visually too heavy. Keep this compact treatment local: form,
 * configuration, and quantity controls retain their normal dimensions. */
.mmt-q-actions {
	gap: var( --mmt-sp-4, 16px );
}

.mmt-q-actions .mmt-btn {
	min-height: 40px;
	padding-right: 14px;
	padding-left: 14px;
	font-size: 14px;
}

.mmt-q-actions .mmt-q-clear-confirm {
	gap: var( --mmt-sp-2, 8px );
}

.mmt-q-list-wrap .mmt-qty-btn,
.mmt-q-config .mmt-qty-btn,
.mmt-q-config-dialog .mmt-qty-btn {
	font-size: 18px;
}

.mmt-q-loading,
.mmt-q-empty,
.mmt-q-totals,
.mmt-q-success,
.mmt-q-config-dialog__title {
	font-size: 17px;
}

.mmt-q-totals strong,
.mmt-q-form__invoice-fields legend {
	font-size: 18px;
}

@media ( max-width: 640px ) {
	.mmt-q-table td[ data-label ]::before {
		font-size: 14px;
	}
}

@media ( max-width: 640px ) {
	.mmt-q-config-dialog {
		width: 100vw;
		max-width: 100vw;
		max-height: 100vh;
		margin: 0;
		border-radius: 0;
		padding: var( --mmt-sp-4, 16px );
	}
}

/* Branch <-> pickup auto-fill cue (MMTQuote.ui.createBranchSync). Outline and
   shadow only - neither takes up layout space, so nothing shifts under the
   customer's pointer. The live region carries the meaning; this is the
   "where did it change" pointer for sighted users. */
.mmt-field.mmt-q-autofilled {
	/* --mmt-focus is a whole box-shadow value, the same ring focus uses. */
	outline: 2px solid var( --mmt-blue-dark, #1559b0 );
	outline-offset: 2px;
	box-shadow: var( --mmt-focus, 0 0 0 3px rgba( 30, 111, 216, 0.45 ) );
	transition: box-shadow 0.4s ease-out, outline-color 0.4s ease-out;
}

@media ( prefers-reduced-motion: reduce ) {
	.mmt-field.mmt-q-autofilled {
		transition: none;
	}
}