/* The Matters — Logo Mat Studio : frontend styles
 * A premium, self-contained design system. No external fonts or frameworks. */

:root,
.tm-lm-calc,
.tm-lm-quote-page,
.tm-lm-quote,
.tm-lm-modal-backdrop,
.tm-lm-modal {
	--tm-accent: #0f7a5a;
	--tm-accent-dark: #0b5d45;
	--tm-accent-soft: #e8f4ef;
	--tm-ink: #0f1720;
	--tm-text: #26313c;
	--tm-muted: #6b7280;
	--tm-border: #e3e8e6;
	--tm-border-strong: #cfd8d4;
	--tm-surface: #ffffff;
	--tm-soft: #f7faf9;
	--tm-shell: #0f1720;
	--tm-radius: 16px;
	--tm-radius-sm: 10px;
	--tm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--tm-shadow: 0 6px 24px -8px rgba(16, 24, 40, 0.16);
	--tm-shadow-lg: 0 24px 60px -24px rgba(16, 24, 40, 0.28);
}

.tm-lm-calc,
.tm-lm-quote-page,
.tm-lm-quote {

	max-width: 1160px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--tm-text);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.tm-lm-calc *,
.tm-lm-calc *::before,
.tm-lm-calc *::after {
	box-sizing: border-box;
}

.tm-lm-calc__title {
	margin: 0 0 22px;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tm-ink);
}

.tm-lm-calc__loading,
.tm-lm-error {
	color: var(--tm-muted);
	padding: 28px;
	text-align: center;
}

.tm-lm-skeleton {
	display: block;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, #eef2f1 25%, #f7faf9 37%, #eef2f1 63%);
	background-size: 400% 100%;
	animation: tm-lm-shimmer 1.3s ease-in-out infinite;
	margin: 0 auto;
}

@keyframes tm-lm-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* --------------------------------------------------------------------- */
/* Layout                                                                */
/* --------------------------------------------------------------------- */
.tm-lm-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 28px;
	align-items: start;
}

@media (max-width: 900px) {
	.tm-lm-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

.tm-lm-col {
	min-width: 0;
}

/* --------------------------------------------------------------------- */
/* Preview stage                                                         */
/* --------------------------------------------------------------------- */
.tm-lm-stage {
	position: relative;
	background:
		radial-gradient(120% 100% at 50% 0%, #ffffff 0%, var(--tm-soft) 55%, #eef3f1 100%);
	border: 1px solid var(--tm-border);
	border-radius: 20px;
	padding: 14px;
	box-shadow: var(--tm-shadow-sm);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tm-lm-stage.is-drag {
	border-color: var(--tm-accent);
	box-shadow: 0 0 0 3px rgba(15, 122, 90, 0.16), var(--tm-shadow);
}

.tm-lm-stage__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 6px 12px;
}

.tm-lm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tm-lm-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--tm-border);
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--tm-text);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.tm-lm-chip--colour {
	padding-left: 6px;
}

.tm-lm-chip__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #c9c9c9;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.tm-lm-stage__badge {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tm-muted);
	font-weight: 700;
}

.tm-lm-canvas-wrap {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.04);
}

.tm-lm-canvas {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;
	cursor: grab;
	outline: none;
}

.tm-lm-canvas.is-busy {
	cursor: grabbing;
}

.tm-lm-canvas:focus-visible {
	box-shadow: 0 0 0 3px rgba(15, 122, 90, 0.35);
}

.tm-lm-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 4px 0;
	font-size: 0.8rem;
	color: var(--tm-muted);
}

.tm-lm-hint svg {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------- */
/* Logo tools                                                            */
/* --------------------------------------------------------------------- */
.tm-lm-tools {
	margin-top: 14px;
	background: var(--tm-surface);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	padding: 14px 16px;
	box-shadow: var(--tm-shadow-sm);
}

.tm-lm-tools__row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.tm-lm-tools__row + .tm-lm-tools__row {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--tm-border);
}

.tm-lm-file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.tm-lm-filename {
	font-size: 0.82rem;
	color: var(--tm-muted);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 120px;
}

.tm-lm-filename.is-error {
	color: #c0392b;
	font-weight: 600;
}

/* Accepted formats + size limit, always wrapped onto its own line. */
.tm-lm-uploadhint {
	flex: 1 1 100%;
	font-size: 0.74rem;
	line-height: 1.4;
	color: var(--tm-muted);
}

/* Remove the uploaded logo — only shown while a logo is actually set. */
.tm-lm-remove {
	color: #b3261e;
	border-color: #f2c9c5;
}

.tm-lm-calc .tm-lm-remove:hover {
	background: #fdf1f0;
	border-color: #b3261e;
	color: #8f1d17;
}

.tm-lm-remove.is-hidden {
	display: none;
}

.tm-lm-zoom {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 180px;
	min-width: 160px;
}

.tm-lm-zoom__label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--tm-muted);
	white-space: nowrap;
}

.tm-lm-zoom input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tm-accent) 0%, var(--tm-accent) var(--tm-zoom, 50%), var(--tm-border) var(--tm-zoom, 50%), var(--tm-border) 100%);
	outline: none;
}

.tm-lm-zoom input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--tm-accent);
	box-shadow: 0 1px 4px rgba(16, 24, 40, 0.25);
	cursor: pointer;
}

.tm-lm-zoom input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--tm-accent);
	cursor: pointer;
}

.tm-lm-zoom input[type="range"]:disabled {
	opacity: 0.5;
}

/* --------------------------------------------------------------------- */
/* Cards                                                                 */
/* --------------------------------------------------------------------- */
.tm-lm-card {
	background: var(--tm-surface);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	padding: 18px;
	box-shadow: var(--tm-shadow-sm);
}

.tm-lm-card + .tm-lm-card {
	margin-top: 16px;
}

/* Consistent vertical rhythm between the stacked panels of the form column:
   step card → step card → price panel → quote / order card. The price panel
   and the lead card are not `.tm-lm-card`, so they need their own rule. */
.tm-lm-col--form > * + * {
	margin-top: 16px;
}

.tm-lm-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 0.94rem;
	font-weight: 700;
	color: var(--tm-ink);
	letter-spacing: -0.01em;
}

.tm-lm-card__title span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tm-accent-soft);
	color: var(--tm-accent-dark);
	font-size: 0.72rem;
	font-weight: 700;
}

.tm-lm-note {
	margin: 12px 0 0;
	font-size: 0.78rem;
	color: var(--tm-muted);
}

/* --------------------------------------------------------------------- */
/* Fields                                                                */
/* --------------------------------------------------------------------- */
.tm-lm-field {
	margin-bottom: 14px;
}

.tm-lm-field:last-child {
	margin-bottom: 0;
}

.tm-lm-dims {
	display: flex;
	gap: 12px;
}

.tm-lm-field--half {
	flex: 1;
	margin-bottom: 0;
	min-width: 0;
}

.tm-lm-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--tm-text);
	letter-spacing: 0.01em;
}

.tm-lm-input,
.tm-lm-select {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--tm-border-strong);
	border-radius: var(--tm-radius-sm);
	font-size: 0.92rem;
	font-family: inherit;
	background: #fff;
	color: var(--tm-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-lm-select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'  stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 18px 18px;
	padding-right: 34px;
}

.tm-lm-input:focus,
.tm-lm-select:focus {
	outline: none;
	border-color: var(--tm-accent);
	box-shadow: 0 0 0 3px rgba(15, 122, 90, 0.16);
}

.tm-lm-input--error {
	border-color: #d33;
}

/*
 * Form controls, restated at a specificity of (0,3,0).
 *
 * The active theme and WooCommerce declare bare `input[type="text"] …`
 * selectors (0,2,1) that beat `.tm-lm-input` (0,1,0), so every field in the
 * calculator was being flattened to the theme's square 0–2px box: no radius,
 * and its own padding / border / colour instead of the design system's. The
 * controls are always inside `.tm-lm-field`, which is what buys us the extra
 * specificity — and it does so without a single `!important`.
 */
.tm-lm-calc .tm-lm-field .tm-lm-input,
.tm-lm-calc .tm-lm-field .tm-lm-select {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--tm-border-strong);
	border-radius: var(--tm-radius-sm);
	font-size: 0.92rem;
	font-family: inherit;
	line-height: 1.45;
	background: #fff;
	color: var(--tm-ink);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-lm-calc .tm-lm-field .tm-lm-input:focus,
.tm-lm-calc .tm-lm-field .tm-lm-select:focus {
	outline: none;
	border-color: var(--tm-accent);
	box-shadow: 0 0 0 3px rgba(15, 122, 90, 0.16);
}

.tm-lm-calc .tm-lm-field .tm-lm-input--error {
	border-color: #d33;
}

/* Segmented control */
.tm-lm-toggle {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	border-radius: 999px;
	background: var(--tm-soft);
	border: 1px solid var(--tm-border);
}

.tm-lm-toggle__btn {
	border: 0;
	background: transparent;
	padding: 7px 16px;
	cursor: pointer;
	font-size: 0.85rem;
	font-family: inherit;
	font-weight: 600;
	color: var(--tm-muted);
	border-radius: 999px;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tm-lm-calc .tm-lm-toggle__btn:hover {
	background: transparent;
	color: var(--tm-text);
}

/* Keep the selected pill legible when hovered. */
.tm-lm-calc .tm-lm-toggle__btn.is-active:hover {
	background: #fff;
	color: var(--tm-accent-dark);
}

.tm-lm-toggle__btn.is-active {
	background: #fff;
	color: var(--tm-accent-dark);
	box-shadow: var(--tm-shadow-sm);
}

/* --------------------------------------------------------------------- */
/* Colour swatches                                                       */
/* --------------------------------------------------------------------- */
.tm-lm-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	max-height: 148px;
	overflow-y: auto;
	padding: 2px;
	margin: -2px;
}

.tm-lm-swatch {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--tm-border-strong);
	cursor: pointer;
	padding: 0;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	background-size: cover;
	background-position: center;
}

.tm-lm-swatch:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px var(--tm-accent), 0 6px 12px -6px rgba(16, 24, 40, 0.4);
}

.tm-lm-swatch.is-active {
	box-shadow: 0 0 0 2px var(--tm-accent);
}

.tm-lm-swatch.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 7px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.tm-lm-swatch__label {
	display: block;
	margin-top: 6px;
	font-size: 0.68rem;
	color: var(--tm-muted);
	text-align: center;
}

/* --------------------------------------------------------------------- */
/* Mini selects                                                          */
/* --------------------------------------------------------------------- */
.tm-lm-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.tm-lm-mini {
	min-width: 0;
}

.tm-lm-mini__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--tm-muted);
	margin-bottom: 5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------- */
/* Price panel                                                           */
/* --------------------------------------------------------------------- */
.tm-lm-price {
	background: linear-gradient(160deg, #10231c 0%, #0f1720 100%);
	border: 0;
	color: #e8efec;
	border-radius: var(--tm-radius);
	padding: 20px;
	box-shadow: var(--tm-shadow-lg);
}

.tm-lm-price__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	font-size: 0.9rem;
	color: rgba(232, 239, 236, 0.78);
}

.tm-lm-price__row strong {
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.tm-lm-price__row--total,
.tm-lm-price__row--grand {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 8px;
	padding-top: 12px;
	font-size: 1rem;
	color: rgba(232, 239, 236, 0.9);
}

.tm-lm-price__row--grand strong {
	color: #7ee2b8;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

.tm-lm-price__row--muted {
	color: rgba(232, 239, 236, 0.6);
	font-size: 0.82rem;
}

.tm-lm-price__note {
	margin: 12px 0 0;
	font-size: 0.76rem;
	color: rgba(232, 239, 236, 0.55);
}

.tm-lm-price__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tm-lm-price__head span:first-child {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: rgba(232, 239, 236, 0.6);
}

.tm-lm-price__tier {
	font-size: 0.74rem;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(126, 226, 184, 0.16);
	color: #7ee2b8;
}

.tm-lm-price__val.is-loading {
	opacity: 0.55;
}

/* --------------------------------------------------------------------- */
/* Lead form                                                             */
/* --------------------------------------------------------------------- */
.tm-lm-lead__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
}

/*
 * A field that owns a whole row of its own: the name and the message.
 *
 * This used to be written as `.tm-lm-lead textarea`, which sets grid-column on
 * the textarea itself — but the grid item is its `.tm-lm-field` wrapper, so the
 * declaration never applied. The message box therefore sat in the left column
 * and left the whole right half of the card empty.
 */
.tm-lm-lead__fields .tm-lm-field--full {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------------- */
/* Quote card (the final step)                                          */
/* --------------------------------------------------------------------- */
/*
 * Same card system as the steps above it, but marked as the destination so it
 * reads as a deliberate call to action rather than one more panel in the stack.
 */
.tm-lm-lead {
	border-top: 3px solid var(--tm-accent);
	background:
		radial-gradient(1100px 260px at 100% -10%, rgba(15, 122, 90, 0.08), transparent 62%),
		var(--tm-surface);
}

.tm-lm-lead .tm-lm-card__title {
	margin-bottom: 6px;
}

/* Supporting copy under the heading, in the same caption voice as .tm-lm-note. */
.tm-lm-lead__intro {
	margin: 0 0 16px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--tm-muted);
}

/* A message box should look like a message box, not a third line of input. */
.tm-lm-lead textarea.tm-lm-input {
	min-height: 92px;
	resize: vertical;
}

/* Both actions belong to the card, so they run the full width like a pair. */
.tm-lm-lead .tm-lm-btn {
	width: 100%;
}

/* --------------------------------------------------------------------- */
/* Buttons                                                               */
/* --------------------------------------------------------------------- */
.tm-lm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--tm-radius-sm);
	font-size: 0.92rem;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	border: 1px solid transparent;
	transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease, border-color 0.16s ease;
	text-decoration: none;
}

.tm-lm-btn:active {
	transform: translateY(1px);
}

.tm-lm-btn--primary {
	background: linear-gradient(180deg, var(--tm-accent) 0%, var(--tm-accent-dark) 100%);
	color: #fff;
	width: 100%;
	margin-top: 10px;
	box-shadow: 0 8px 20px -10px rgba(15, 122, 90, 0.9);
}

/*
 * Hover/focus states are declared with the .tm-lm-calc prefix on purpose: the
 * active theme styles bare `button:hover` and was repainting our labels dark
 * (rgb(30,41,59)) on top of the green / black buttons — unreadable. Declaring
 * BOTH colour and background here, at a specificity the theme cannot beat, keeps
 * the label white.
 */
.tm-lm-calc .tm-lm-btn--primary:hover,
.tm-lm-calc .tm-lm-btn--primary:focus-visible {
	background: linear-gradient(180deg, var(--tm-accent-dark) 0%, var(--tm-accent-dark) 100%);
	color: #fff;
	box-shadow: 0 12px 26px -10px rgba(15, 122, 90, 0.95);
}

.tm-lm-btn--primary:disabled {
	opacity: 0.6;
	cursor: default;
	box-shadow: none;
}

.tm-lm-btn--order {
	background: #0f1720;
	color: #fff;
	width: 100%;
	margin-top: 8px;
}

.tm-lm-calc .tm-lm-btn--order:hover,
.tm-lm-calc .tm-lm-btn--order:focus-visible {
	background: #000;
	color: #fff;
}

.tm-lm-btn--order:disabled {
	opacity: 0.6;
	cursor: default;
}

.tm-lm-btn--ghost {
	background: #fff;
	border-color: var(--tm-border-strong);
	color: var(--tm-ink);
	box-shadow: var(--tm-shadow-sm);
}

.tm-lm-calc .tm-lm-btn--ghost:hover,
.tm-lm-calc .tm-lm-btn--ghost:focus-visible {
	background: #fff;
	border-color: var(--tm-accent);
	color: var(--tm-accent-dark);
}

.tm-lm-btn--small {
	padding: 8px 14px;
	font-size: 0.82rem;
}

.tm-lm-btn--icon {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: var(--tm-radius-sm);
}

.tm-lm-status {
	margin: 12px 0 0;
	font-size: 0.86rem;
	color: var(--tm-muted);
}

.tm-lm-status[data-status="success"] {
	color: var(--tm-accent-dark);
	font-weight: 600;
}

.tm-lm-status[data-status="error"] {
	color: #c0392b;
}

/* --------------------------------------------------------------------- */
/* Responsive: tablet & mobile                                           */
/* Keep these last so they win over the base rules above.                 */
/* --------------------------------------------------------------------- */
@media (max-width: 680px) {
	.tm-lm-calc {
		font-size: 14.5px;
	}

	.tm-lm-calc__title {
		margin-bottom: 16px;
	}

	.tm-lm-stage {
		padding: 10px;
		border-radius: 16px;
	}

	.tm-lm-stage__bar {
		padding: 2px 4px 10px;
	}

	.tm-lm-stage__badge {
		font-size: 0.68rem;
	}

	.tm-lm-tools {
		padding: 12px;
	}

	/* Sliders need the full row on narrow screens to stay usable. */
	.tm-lm-zoom {
		flex: 1 1 100%;
		min-width: 0;
	}

	.tm-lm-tools__row > .tm-lm-btn--small {
		flex: 1 1 auto;
		justify-content: center;
	}

	.tm-lm-options {
		grid-template-columns: 1fr;
	}

	.tm-lm-card {
		padding: 16px;
	}

	.tm-lm-price {
		padding: 17px;
	}

	.tm-lm-price__row--grand strong {
		font-size: 1.32rem;
	}

	.tm-lm-hint {
		font-size: 0.76rem;
	}
}

@media (max-width: 520px) {
	.tm-lm-calc__title {
		font-size: 1.28rem;
	}

	.tm-lm-lead__fields {
		grid-template-columns: 1fr;
	}

	/* Stack the custom width / length inputs instead of squeezing them. */
	.tm-lm-dims {
		flex-direction: column;
		gap: 0;
	}

	.tm-lm-dims .tm-lm-field--half {
		margin-bottom: 14px;
	}

	.tm-lm-dims .tm-lm-field--half:last-child {
		margin-bottom: 0;
	}

	.tm-lm-swatch {
		width: 28px;
		height: 28px;
	}

	.tm-lm-swatches {
		max-height: 130px;
	}

	.tm-lm-chip {
		font-size: 0.72rem;
	}

	.tm-lm-btn {
		padding: 12px 16px;
	}
}

/* --------------------------------------------------------------------- */
/* Sticky preview column                                                 */
/* The mat stays in view while the visitor scrolls down the option cards  */
/* and the quote form. Only meaningful on the two-column layout.          */
/* --------------------------------------------------------------------- */
/*
 * The preview column pins to the top; it is deliberately NOT its own scroll
 * container. Giving it `overflow-y: auto` + `overscroll-behavior: contain` made
 * it swallow the mouse wheel, so scrolling with the pointer over the preview
 * did nothing. The page always scrolls normally now.
 */
.tm-lm-col--preview {
	position: sticky;
	top: var(--tm-sticky-top, 24px);
	align-self: start;
}

/* The WordPress admin bar sits above the page when the visitor is logged in. */
body.admin-bar .tm-lm-calc {
	--tm-sticky-top: 56px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .tm-lm-calc {
		--tm-sticky-top: 70px;
	}
}

/*
 * Pin the column only when it actually fits:
 *  - on the single-column layout (≤ 900px) the preview already leads the form; and
 *  - on a viewport shorter than the column, pinning it would leave the upload and
 *    zoom tools below the fold with no way to reach them.
 * In both cases the column scrolls with the page instead of being pinned.
 */
@media (max-width: 900px), (max-height: 760px) {
	.tm-lm-col--preview {
		position: static;
	}
}

/* --------------------------------------------------------------------- */
/* Locked price panel                                                    */
/* --------------------------------------------------------------------- */
/*
 * Shown while the contact details are still missing. There is no amount in the
 * markup at all — the server has not sent one — so this only has to look like
 * a held-back price rather than a broken one.
 */
.tm-lm-price--locked {
	background: linear-gradient(160deg, #1b2530 0%, #0f1720 100%);
}

.tm-lm-price__val--locked {
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.5);
}

.tm-lm-price__note--locked {
	margin: 10px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
	font-weight: 600;
}

/* --------------------------------------------------------------------- */
/* Quotation link handed to the customer after a successful submit        */
/* --------------------------------------------------------------------- */
.tm-lm-quote-link {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--tm-border-strong);
	text-align: center;
}

.tm-lm-quote-link__title {
	margin: 0 0 4px;
	font-weight: 700;
	color: var(--tm-ink);
}

.tm-lm-quote-link__meta,
.tm-lm-quote-link__hint {
	margin: 0 0 12px;
	font-size: 0.88rem;
	color: var(--tm-muted);
}

.tm-lm-quote-link__hint {
	margin: 12px 0 0;
}

.tm-lm-btn--wide {
	width: 100%;
	justify-content: center;
}

/* --------------------------------------------------------------------- */
/* Quotation page                                                        */
/* --------------------------------------------------------------------- */
.tm-lm-quote-page__inner {
	margin: 0 auto;
	padding: 34px 18px 72px;
}

.tm-lm-quote__head {
	margin-bottom: 24px;
}

.tm-lm-quote__title {
	margin: 0 0 6px;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tm-ink);
}

.tm-lm-quote__ref {
	margin: 0 0 10px;
	color: var(--tm-muted);
}

.tm-lm-quote__badge {
	display: inline-block;
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--tm-accent-soft);
	color: var(--tm-accent-dark);
	font-size: 0.85rem;
	font-weight: 600;
}

.tm-lm-quote__badge--expired {
	background: #fdecec;
	color: #98232a;
}

.tm-lm-quote__badge--paid {
	background: #e6f4ea;
	color: #155724;
}

.tm-lm-quote__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

.tm-lm-quote__media,
.tm-lm-quote__panel {
	background: var(--tm-surface);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	padding: 20px;
	box-shadow: var(--tm-shadow-sm);
}

.tm-lm-quote__preview {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tm-radius-sm);
	background: var(--tm-soft);
}

.tm-lm-quote__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--tm-border);
}

.tm-lm-quote__logo-label {
	font-size: 0.85rem;
	color: var(--tm-muted);
}

.tm-lm-quote__logo img {
	display: block;
	max-height: 54px;
	max-width: 160px;
	width: auto;
	height: auto;
}

.tm-lm-quote__subtitle {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tm-ink);
}

.tm-lm-quote__subtitle + .tm-lm-quote__price {
	margin-top: 4px;
}

.tm-lm-quote__specs {
	margin: 0 0 22px;
}

.tm-lm-quote__spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid var(--tm-border);
}

.tm-lm-quote__spec dt {
	color: var(--tm-muted);
	font-size: 0.9rem;
}

.tm-lm-quote__spec dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
	color: var(--tm-ink);
}

.tm-lm-quote__dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 7px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.18);
	vertical-align: -1px;
}

.tm-lm-quote__price {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 12px;
}

.tm-lm-quote__price td {
	padding: 7px 0;
	font-size: 0.95rem;
	color: var(--tm-text);
}

.tm-lm-quote__price td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.tm-lm-quote__price-total td {
	padding-top: 12px;
	border-top: 2px solid var(--tm-border-strong);
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--tm-ink);
}

.tm-lm-quote__note,
.tm-lm-quote__muted {
	margin: 0 0 12px;
	font-size: 0.88rem;
	color: var(--tm-muted);
}

.tm-lm-quote__breakdown {
	margin-bottom: 16px;
	font-size: 0.88rem;
	color: var(--tm-muted);
}

.tm-lm-quote__breakdown summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--tm-text);
}

.tm-lm-quote__breakdown ul {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.tm-lm-quote__breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	border-bottom: 1px solid var(--tm-border);
}

/*
 * Payment feedback.
 *
 * Distinct colour per outcome so a pending payment can never be mistaken for a
 * completed one, and a failure can never be mistaken for a charge.
 */
.tm-lm-quote__banner {
	margin: 0 0 22px;
	padding: 15px 18px;
	border-radius: var(--tm-radius);
	border: 1px solid var(--tm-border-strong);
	border-left-width: 5px;
	background: var(--tm-soft);
}

.tm-lm-quote__banner p {
	margin: 0;
}

.tm-lm-quote__banner p + p {
	margin-top: 12px;
}

.tm-lm-quote__banner--ok {
	background: #e9f6ef;
	border-color: #1a7f5a;
	color: #10583d;
}

.tm-lm-quote__banner--wait {
	background: #fdf6e3;
	border-color: #b58a1b;
	color: #6f5310;
}

.tm-lm-quote__banner--warn,
.tm-lm-quote__banner--error {
	background: #fdecec;
	border-color: #98232a;
	color: #7d1d22;
}

.tm-lm-quote__note--warn {
	color: #98232a;
	font-weight: 600;
}

.tm-lm-quote__cta {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--tm-border);
}

.tm-lm-quote__form {
	margin: 0;
}

@media (max-width: 860px) {
	.tm-lm-quote__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------- */
/* Modal Dialog: Show Preview & Quote (Ultra-Premium & Theme-Proof)      */
/* --------------------------------------------------------------------- */
.tm-lm-modal-backdrop {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 9999999 !important;
	background: rgba(15, 23, 42, 0.72) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-sizing: border-box !important;
}

.tm-lm-modal-backdrop.is-open {
	opacity: 1 !important;
	visibility: visible !important;
}

.tm-lm-modal {
	position: relative !important;
	width: 100% !important;
	max-width: 490px !important;
	max-height: 92vh !important;
	overflow-y: auto !important;
	background: #ffffff !important;
	border-radius: 22px !important;
	box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
	padding: 34px 30px 28px !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	transform: translateY(22px) scale(0.96) !important;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-sizing: border-box !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	color: #0f172a !important;
}

.tm-lm-modal-backdrop.is-open .tm-lm-modal {
	transform: translateY(0) scale(1) !important;
}

.tm-lm-modal__close {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	border: 1px solid #e2e8f0 !important;
	background: #f8fafc !important;
	color: #64748b !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	font-size: 22px !important;
	line-height: 1 !important;
	padding: 0 !important;
	transition: all 0.16s ease !important;
}

.tm-lm-modal__close:hover {
	background: #fee2e2 !important;
	color: #dc2626 !important;
	border-color: #fecaca !important;
	transform: rotate(90deg) !important;
}

.tm-lm-modal__close svg {
	width: 16px !important;
	height: 16px !important;
	stroke: currentColor !important;
	flex-shrink: 0 !important;
}

.tm-lm-modal__header {
	margin-bottom: 22px !important;
	padding-right: 28px !important;
}

.tm-lm-modal__badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 12px !important;
	background: #ecfdf5 !important;
	color: #047857 !important;
	border: 1px solid #a7f3d0 !important;
	font-size: 0.76rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border-radius: 999px !important;
	margin-bottom: 10px !important;
}

.tm-lm-modal__badge svg {
	width: 13px !important;
	height: 13px !important;
	stroke: #047857 !important;
	fill: #047857 !important;
	flex-shrink: 0 !important;
}

.tm-lm-modal__title {
	margin: 0 0 8px !important;
	font-size: 1.45rem !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	line-height: 1.25 !important;
	letter-spacing: -0.025em !important;
}

.tm-lm-modal__desc {
	margin: 0 !important;
	font-size: 0.92rem !important;
	color: #64748b !important;
	line-height: 1.5 !important;
}

.tm-lm-modal__fields {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	margin-bottom: 20px !important;
}

.tm-lm-modal__fields .tm-lm-field {
	margin: 0 !important;
}

.tm-lm-modal .tm-lm-label {
	display: block !important;
	font-size: 0.83rem !important;
	font-weight: 700 !important;
	color: #334155 !important;
	margin-bottom: 6px !important;
	letter-spacing: 0.01em !important;
}

.tm-lm-modal input.tm-lm-input {
	width: 100% !important;
	height: 48px !important;
	padding: 10px 16px !important;
	background: #f8fafc !important;
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 12px !important;
	font-family: inherit !important;
	font-size: 0.96rem !important;
	color: #0f172a !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
	transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease !important;
}

.tm-lm-modal input.tm-lm-input:hover {
	border-color: #94a3b8 !important;
	background: #ffffff !important;
}

.tm-lm-modal input.tm-lm-input:focus {
	outline: none !important;
	border-color: #0f7a5a !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(15, 122, 90, 0.15) !important;
}

.tm-lm-modal input.tm-lm-input.tm-lm-input--error {
	border-color: #e11d48 !important;
	background: #fff1f2 !important;
	box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.12) !important;
}

.tm-lm-modal__error {
	display: none;
	padding: 11px 16px !important;
	background: #fff1f2 !important;
	border: 1px solid #fecdd3 !important;
	border-radius: 12px !important;
	color: #be123c !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	margin-bottom: 16px !important;
	line-height: 1.4 !important;
}

.tm-lm-modal__error.is-visible {
	display: block !important;
}

.tm-lm-modal__footer {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

/* Force high-visibility, ultra-premium button styling regardless of WP theme */
.tm-lm-modal-backdrop .tm-lm-modal__submit,
.tm-lm-modal-backdrop button.tm-lm-modal__submit,
.tm-lm-modal-backdrop button.tm-lm-btn--primary,
.tm-lm-modal .tm-lm-modal__submit,
.tm-lm-modal button[type="submit"],
.tm-lm-modal .tm-lm-btn--primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	padding: 14px 24px !important;
	background: linear-gradient(135deg, #0f7a5a 0%, #084c37 100%) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 14px !important;
	font-family: inherit !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.015em !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: 0 6px 20px -3px rgba(15, 122, 90, 0.45), 0 2px 6px -1px rgba(15, 122, 90, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.tm-lm-modal-backdrop .tm-lm-modal__submit svg,
.tm-lm-modal .tm-lm-modal__submit svg {
	display: inline-block !important;
	flex-shrink: 0 !important;
	color: #ffffff !important;
	stroke: #ffffff !important;
}

.tm-lm-modal-backdrop .tm-lm-modal__submit span,
.tm-lm-modal .tm-lm-modal__submit span {
	color: #ffffff !important;
	font-weight: 700 !important;
	display: inline-block !important;
}

.tm-lm-modal-backdrop .tm-lm-modal__submit:hover,
.tm-lm-modal-backdrop button.tm-lm-modal__submit:hover,
.tm-lm-modal-backdrop button.tm-lm-btn--primary:hover,
.tm-lm-modal .tm-lm-modal__submit:hover,
.tm-lm-modal button[type="submit"]:hover,
.tm-lm-modal .tm-lm-btn--primary:hover,
.tm-lm-modal-backdrop .tm-lm-modal__submit:focus-visible,
.tm-lm-modal-backdrop button.tm-lm-modal__submit:focus-visible,
.tm-lm-modal-backdrop button.tm-lm-btn--primary:focus-visible,
.tm-lm-modal .tm-lm-modal__submit:focus-visible,
.tm-lm-modal button[type="submit"]:focus-visible,
.tm-lm-modal .tm-lm-btn--primary:focus-visible {
	background: linear-gradient(135deg, #138f6b 0%, #0a5b42 100%) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 28px -4px rgba(15, 122, 90, 0.55), 0 4px 10px -2px rgba(15, 122, 90, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.tm-lm-modal-backdrop .tm-lm-modal__submit:active,
.tm-lm-modal-backdrop button.tm-lm-modal__submit:active,
.tm-lm-modal-backdrop button.tm-lm-btn--primary:active,
.tm-lm-modal .tm-lm-modal__submit:active,
.tm-lm-modal button[type="submit"]:active,
.tm-lm-modal .tm-lm-btn--primary:active {
	transform: translateY(0) !important;
	box-shadow: 0 3px 10px rgba(15, 122, 90, 0.35) !important;
}

.tm-lm-modal-backdrop .tm-lm-modal__submit:disabled,
.tm-lm-modal-backdrop button.tm-lm-modal__submit:disabled,
.tm-lm-modal-backdrop button.tm-lm-btn--primary:disabled,
.tm-lm-modal .tm-lm-modal__submit:disabled,
.tm-lm-modal button[type="submit"]:disabled,
.tm-lm-modal .tm-lm-btn--primary:disabled {
	opacity: 0.78 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

.tm-lm-modal__privacy {
	margin: 0 !important;
	font-size: 0.78rem !important;
	color: #64748b !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	line-height: 1.4 !important;
}

.tm-lm-modal__privacy svg {
	color: #0f7a5a !important;
	stroke: #0f7a5a !important;
	flex-shrink: 0 !important;
}

@keyframes tm-lm-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.tm-lm-spinner {
	animation: tm-lm-spin 0.9s linear infinite !important;
	flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------- */
/* Preview Gate Card                                                     */
/* --------------------------------------------------------------------- */
.tm-lm-preview-gate {
	background: linear-gradient(135deg, #ffffff 0%, var(--tm-soft) 100%);
	border: 2px dashed var(--tm-accent);
	border-radius: var(--tm-radius);
	padding: 24px;
	text-align: center;
	box-shadow: var(--tm-shadow-sm);
}

.tm-lm-preview-gate__title {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--tm-ink);
}

.tm-lm-preview-gate__desc {
	margin: 0 0 18px;
	font-size: 0.92rem;
	color: var(--tm-muted);
	line-height: 1.5;
}

.tm-lm-btn--show-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 22px;
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 14px rgba(15, 122, 90, 0.32);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	cursor: pointer;
}

.tm-lm-btn--show-preview:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(15, 122, 90, 0.42);
}

/* --------------------------------------------------------------------- */
/* Results Panel: Final Preview & Price Results                          */
/* --------------------------------------------------------------------- */
.tm-lm-results {
	background: #ffffff;
	border: 1px solid var(--tm-border-strong);
	border-radius: var(--tm-radius);
	box-shadow: var(--tm-shadow);
	overflow: hidden;
	margin-top: 14px;
	animation: tm-lm-fade-in 0.3s ease-out;
}

@keyframes tm-lm-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.tm-lm-results__head {
	background: var(--tm-accent-soft);
	border-bottom: 1px solid rgba(15, 122, 90, 0.18);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.tm-lm-results__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--tm-accent-dark);
	display: flex;
	align-items: center;
	gap: 8px;
}

.tm-lm-results__ref {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--tm-accent);
	background: #ffffff;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid rgba(15, 122, 90, 0.25);
}

.tm-lm-results__body {
	padding: 26px 26px 24px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

.tm-lm-results__proof {
	display: flex !important;
	gap: 18px !important;
	align-items: center !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 16px 18px !important;
}

.tm-lm-results__preview-img {
	width: 140px !important;
	height: auto !important;
	max-height: 100px !important;
	object-fit: contain !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

.tm-lm-results__logo-box {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	font-size: 0.82rem !important;
	color: #64748b !important;
}

.tm-lm-results__logo-thumb {
	width: 52px !important;
	height: 52px !important;
	object-fit: contain !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	padding: 5px !important;
}

/* Spacious, elegant, theme-proof results specification table */
.tm-lm-results__table,
.tm-lm-configurator .tm-lm-results__table,
.tm-lm-results table.tm-lm-results__table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	margin: 10px 0 16px 0 !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.tm-lm-results__table tr,
.tm-lm-configurator .tm-lm-results__table tr,
.tm-lm-results table.tm-lm-results__table tr {
	border: none !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	background: transparent !important;
	transition: background-color 0.15s ease !important;
}

.tm-lm-results__table tr:hover,
.tm-lm-configurator .tm-lm-results__table tr:hover {
	background-color: #f8fafc !important;
}

.tm-lm-results__table td,
.tm-lm-configurator .tm-lm-results__table td,
.tm-lm-results table.tm-lm-results__table td,
.tm-lm-results table.tm-lm-results__table tbody tr td {
	padding: 16px 24px !important;
	font-size: 0.96rem !important;
	color: #334155 !important;
	border: none !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: 1px solid #f1f5f9 !important;
	line-height: 1.5 !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
}

.tm-lm-results__table td:first-child,
.tm-lm-configurator .tm-lm-results__table td:first-child,
.tm-lm-results table.tm-lm-results__table td:first-child {
	text-align: left !important;
	color: #475569 !important;
	font-weight: 500 !important;
	padding-left: 24px !important;
}

.tm-lm-results__table td:last-child,
.tm-lm-configurator .tm-lm-results__table td:last-child,
.tm-lm-results table.tm-lm-results__table td:last-child {
	text-align: right !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	padding-right: 24px !important;
	font-variant-numeric: tabular-nums !important;
}

.tm-lm-results__table tr:last-child td,
.tm-lm-configurator .tm-lm-results__table tr:last-child td,
.tm-lm-results table.tm-lm-results__table tr:last-child td {
	border-bottom: none !important;
}

.tm-lm-results__table .tm-lm-results__row--total,
.tm-lm-configurator .tm-lm-results__table tr.tm-lm-results__row--total,
.tm-lm-results table.tm-lm-results__table tr.tm-lm-results__row--total {
	background: #ecfdf5 !important;
}

.tm-lm-results__table .tm-lm-results__row--total:hover,
.tm-lm-configurator .tm-lm-results__table tr.tm-lm-results__row--total:hover {
	background: #e6fcf1 !important;
}

.tm-lm-results__table .tm-lm-results__row--total td,
.tm-lm-configurator .tm-lm-results__table tr.tm-lm-results__row--total td,
.tm-lm-results table.tm-lm-results__table tr.tm-lm-results__row--total td {
	padding: 18px 24px !important;
	border-top: 2px solid #a7f3d0 !important;
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
	font-size: 1.12rem !important;
	font-weight: 800 !important;
	color: #065f46 !important;
	background: #ecfdf5 !important;
}

.tm-lm-results__table .tm-lm-results__row--total td:last-child,
.tm-lm-configurator .tm-lm-results__table tr.tm-lm-results__row--total td:last-child,
.tm-lm-results table.tm-lm-results__table tr.tm-lm-results__row--total td:last-child {
	color: #047857 !important;
	font-size: 1.34rem !important;
	font-weight: 800 !important;
}

.tm-lm-results__actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin-top: 6px !important;
}

.tm-lm-btn--order {
	background: linear-gradient(135deg, #0f7a5a 0%, #084c37 100%) !important;
	color: #ffffff !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	padding: 16px 24px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	cursor: pointer !important;
	box-shadow: 0 6px 20px -3px rgba(15, 122, 90, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	text-align: center !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-height: 52px !important;
	box-sizing: border-box !important;
}

.tm-lm-btn--order:hover {
	background: linear-gradient(135deg, #138f6b 0%, #0a5b42 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 28px -4px rgba(15, 122, 90, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
	color: #ffffff !important;
}

.tm-lm-btn--order:active {
	transform: translateY(0) !important;
	box-shadow: 0 3px 10px rgba(15, 122, 90, 0.35) !important;
}

.tm-lm-results__note {
	margin: 0 !important;
	font-size: 0.84rem !important;
	color: #64748b !important;
	text-align: center !important;
	line-height: 1.45 !important;
}




/* Added for 66 colours & Background Removal */
.tm-lm-swatches--grid {
	max-height: 240px;
	gap: 6px;
}
.tm-lm-swatch__badge {
	display: none !important;
}
.tm-lm-swatch {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.15);
	cursor: pointer;
	padding: 0;
	transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease;
	background-size: cover;
	background-position: center;
}
.tm-lm-swatch:hover {
	transform: translateY(-2px) scale(1.12);
	box-shadow: 0 6px 14px -2px rgba(16, 24, 40, 0.3), 0 0 0 2px var(--tm-accent);
	z-index: 5;
}
.tm-lm-swatch.is-active {
	transform: scale(1.06);
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--tm-accent), 0 4px 10px rgba(15, 122, 90, 0.35);
	z-index: 2;
}
.tm-lm-btn--bg-remove {
	border: 1px solid #d0d5dd;
	color: #344054;
	transition: all 0.2s ease;
}
.tm-lm-btn--bg-remove:hover {
	border-color: #0f7a5a;
	color: #0f7a5a;
}
.tm-lm-btn--bg-remove.is-active {
	background: #ecfdf3 !important;
	border-color: #039855 !important;
	color: #027a48 !important;
	font-weight: 600;
}


/* ==========================================================================
   Samenwerkingen & Gutenberg Block Styling
   ========================================================================== */
.page-header, .entry-header {
	display: none !important;
}
.site-main, .entry-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.partner-logo-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 24px 16px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
	height: 100% !important;
	box-sizing: border-box !important;
}
.partner-logo-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08) !important;
	border-color: #0f7a5a !important;
}
.partner-logo-card figure.wp-block-image {
	margin: 0 auto 12px auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important;
}
.partner-logo-card figure.wp-block-image img {
	max-height: 40px !important;
	width: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
}
.partner-dash-card {
	background: #f8fafc !important;
	border: 2px dashed #0f7a5a !important;
	border-radius: 14px !important;
	padding: 24px 16px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	height: 100% !important;
	box-sizing: border-box !important;
}
.partner-dash-card:hover {
	transform: translateY(-4px) !important;
	background-color: #f0fdf4 !important;
	box-shadow: 0 12px 24px -4px rgba(15, 122, 90, 0.15) !important;
}
.usp-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 32px 24px !important;
	box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
	height: 100% !important;
	box-sizing: border-box !important;
}
.partner-form-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 18px !important;
	padding: 40px 32px !important;
	box-shadow: 0 12px 30px -6px rgba(15, 23, 42, 0.08) !important;
}
.partner-form-input {
	width: 100% !important;
	padding: 13px 16px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
	box-sizing: border-box !important;
}
.partner-form-input:focus {
	outline: none !important;
	border-color: #0f7a5a !important;
	box-shadow: 0 0 0 3px rgba(15, 122, 90, 0.15) !important;
}

/* Robust Auto-flow CSS Grid for Partners & USPs */
.partner-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
	gap: 20px !important;
	max-width: 1140px !important;
	margin: 0 auto 30px auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.partner-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 24px 18px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
	min-height: 160px !important;
	box-sizing: border-box !important;
}
.partner-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08) !important;
	border-color: #0f7a5a !important;
}
.partner-card figure.wp-block-image {
	margin: 0 auto 12px auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 44px !important;
}
.partner-card figure.wp-block-image img {
	max-height: 38px !important;
	max-width: 140px !important;
	width: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
}
.partner-dash-card {
	background: #f8fafc !important;
	border: 2px dashed #0f7a5a !important;
	border-radius: 14px !important;
	padding: 24px 18px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	min-height: 160px !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
}
.partner-dash-card:hover {
	transform: translateY(-4px) !important;
	background-color: #f0fdf4 !important;
	box-shadow: 0 12px 24px -4px rgba(15, 122, 90, 0.15) !important;
}
.usp-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: 24px !important;
	max-width: 1140px !important;
	margin: 0 auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   Luxury Quote Page Presentation Styling
   ========================================================================== */
.tm-lm-quote-page {
	background: #f8fafc !important;
	padding: 40px 16px 80px !important;
}
.tm-lm-quote {
	max-width: 1180px !important;
	margin: 0 auto !important;
}
.tm-lm-quote__head {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	padding: 32px 36px !important;
	margin-bottom: 28px !important;
	box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
}
.tm-lm-quote__head-info {
	flex: 1 !important;
	min-width: 280px !important;
}
.tm-lm-quote__pill {
	display: inline-block !important;
	padding: 5px 12px !important;
	background: #d1fae5 !important;
	color: #065f46 !important;
	border-radius: 20px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.8px !important;
	text-transform: uppercase !important;
	margin-bottom: 10px !important;
}
.tm-lm-quote__title {
	font-size: 32px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin: 0 0 6px !important;
	line-height: 1.2 !important;
}
.tm-lm-quote__ref {
	font-size: 14px !important;
	color: #64748b !important;
	margin: 0 !important;
}
.tm-lm-quote__badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 18px !important;
	background: #f1f5f9 !important;
	color: #334155 !important;
	border-radius: 30px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border: 1px solid #cbd5e1 !important;
}
.tm-lm-quote__badge--paid {
	background: #d1fae5 !important;
	color: #065f46 !important;
	border-color: #86efac !important;
}
.tm-lm-quote__grid {
	display: grid !important;
	grid-template-columns: 1.15fr 0.85fr !important;
	gap: 28px !important;
	align-items: start !important;
	margin-bottom: 28px !important;
}
@media (max-width: 900px) {
	.tm-lm-quote__grid {
		grid-template-columns: 1fr !important;
	}
}
.tm-lm-quote__media {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 18px !important;
	padding: 32px !important;
	box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.04) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}
.tm-lm-quote__media-badge {
	align-self: flex-start !important;
	display: inline-block !important;
	padding: 4px 10px !important;
	background: #f1f5f9 !important;
	color: #475569 !important;
	border-radius: 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-bottom: 20px !important;
}
.tm-lm-quote__preview {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 12px !important;
	filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.14)) !important;
	margin: 10px 0 24px !important;
	transition: transform 0.2s ease !important;
}
.tm-lm-quote__preview:hover {
	transform: scale(1.02) !important;
}
.tm-lm-quote__logo {
	width: 100% !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 14px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
.tm-lm-quote__logo img {
	max-height: 38px !important;
	max-width: 100px !important;
	object-fit: contain !important;
}
.tm-lm-quote__panel {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 18px !important;
	padding: 32px 28px !important;
	box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.04) !important;
}
.tm-lm-quote__subtitle {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin: 0 0 16px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.tm-lm-quote__specs {
	margin: 0 0 24px !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
.tm-lm-quote__spec {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	font-size: 14px !important;
	padding-bottom: 8px !important;
	border-bottom: 1px solid #f1f5f9 !important;
}
.tm-lm-quote__spec dt {
	color: #64748b !important;
	font-weight: 500 !important;
}
.tm-lm-quote__spec dd {
	color: #0f172a !important;
	font-weight: 700 !important;
	margin: 0 !important;
	text-align: right !important;
}
.tm-lm-quote__price {
	width: 100% !important;
	border-collapse: collapse !important;
	margin-bottom: 24px !important;
	background: #f8fafc !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	border: 1px solid #e2e8f0 !important;
}
.tm-lm-quote__price td {
	padding: 12px 16px !important;
	font-size: 14px !important;
	color: #475569 !important;
}
.tm-lm-quote__price td:last-child {
	text-align: right !important;
	font-weight: 600 !important;
	color: #0f172a !important;
}
.tm-lm-quote__price-total {
	background: #f0fdf4 !important;
	border-top: 2px solid #bbf7d0 !important;
}
.tm-lm-quote__price-total td {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #0f7a5a !important;
	padding: 16px !important;
}
.tm-lm-btn--large {
	width: 100% !important;
	display: block !important;
	text-align: center !important;
	padding: 16px 24px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	background: #0f7a5a !important;
	color: #ffffff !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(15, 122, 90, 0.25) !important;
	transition: all 0.15s ease !important;
	border: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}
.tm-lm-btn--large:hover {
	background: #0b5d45 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(15, 122, 90, 0.35) !important;
}
.tm-lm-quote__actions-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
	margin: 16px 0 20px !important;
}
.tm-lm-btn--outline {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 11px 16px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #334155 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
	text-align: center !important;
}
.tm-lm-btn--outline:hover {
	border-color: #0f7a5a !important;
	color: #0f7a5a !important;
	background: #f8fafc !important;
}
.tm-lm-quote__trust-strip {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding-top: 18px !important;
	border-top: 1px solid #f1f5f9 !important;
}
.tm-lm-quote__trust-item {
	font-size: 12.5px !important;
	color: #64748b !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.tm-lm-quote__support-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	padding: 28px 36px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px !important;
	box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
	margin-top: 24px !important;
}
.tm-lm-quote__support-title {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin: 0 0 6px !important;
}
.tm-lm-quote__support-text {
	font-size: 14px !important;
	color: #64748b !important;
	margin: 0 !important;
	max-width: 600px !important;
}
.tm-lm-quote__support-actions {
	display: flex !important;
	gap: 12px !important;
}
.tm-lm-btn--whatsapp {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 11px 20px !important;
	background: #25d366 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background 0.15s ease !important;
}
.tm-lm-btn--whatsapp:hover {
	background: #20bd5a !important;
}

/* ==========================================================================
   Luxury Quote Page Interactive & High-Conversion Enhancements (v2.2.8)
   ========================================================================== */
@keyframes tmPulse {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 122, 90, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(15, 122, 90, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 122, 90, 0); }
}

.tm-lm-pulse-dot {
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: #0f7a5a !important;
	margin-right: 6px !important;
	vertical-align: middle !important;
	animation: tmPulse 2s infinite !important;
}

.tm-lm-quote__pill-wrap {
	margin-bottom: 8px !important;
}

.tm-lm-quote__customer-ref {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 10px 0 0 !important;
	padding: 6px 14px !important;
	background: #f1f5f9 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 20px !important;
	font-size: 13px !important;
	color: #334155 !important;
}

.tm-lm-quote__media-top {
	width: 100% !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 16px !important;
}

.tm-lm-quote__zoom-trigger {
	background: #f8fafc !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 20px !important;
	padding: 5px 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	transition: all 0.15s ease !important;
}

.tm-lm-quote__zoom-trigger:hover {
	background: #ffffff !important;
	color: #0f7a5a !important;
	border-color: #0f7a5a !important;
}

.tm-lm-quote__stage {
	width: 100% !important;
	background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%) !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 24px 16px 14px !important;
	text-align: center !important;
	cursor: zoom-in !important;
	box-sizing: border-box !important;
	margin-bottom: 20px !important;
	transition: border-color 0.2s ease !important;
}

.tm-lm-quote__stage:hover {
	border-color: #94a3b8 !important;
}

.tm-lm-quote__stage-hint {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #64748b !important;
	margin-top: 12px !important;
}

.tm-lm-quote__logo-text {
	display: flex !important;
	flex-direction: column !important;
}

.tm-lm-quote__logo-sub {
	font-size: 11px !important;
	color: #64748b !important;
}

.tm-lm-quote__logo-link {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-decoration: none !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: #0f7a5a !important;
	background: #ffffff !important;
	padding: 6px 12px !important;
	border-radius: 8px !important;
	border: 1px solid #e2e8f0 !important;
	transition: all 0.15s ease !important;
}

.tm-lm-quote__logo-link:hover {
	border-color: #0f7a5a !important;
	box-shadow: 0 2px 6px rgba(15, 122, 90, 0.12) !important;
}

.tm-lm-quote__payment-methods {
	margin: 18px 0 16px !important;
	padding: 14px 16px !important;
	background: #f8fafc !important;
	border-radius: 12px !important;
	border: 1px solid #f1f5f9 !important;
}

.tm-lm-quote__pm-label {
	display: block !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	color: #64748b !important;
	margin-bottom: 8px !important;
}

.tm-lm-quote__pm-list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
}

.tm-pm-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 6px 12px !important;
	border-radius: 6px !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.3px !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
}

.tm-pm-badge--ideal {
	color: #cc0066 !important;
	border-color: #fbcfe8 !important;
	background: #fdf2f8 !important;
}

.tm-pm-badge--bancontact {
	color: #0284c7 !important;
	border-color: #bae6fd !important;
	background: #f0f9ff !important;
}

.tm-pm-badge--cards {
	color: #334155 !important;
	border-color: #cbd5e1 !important;
	background: #ffffff !important;
}

.tm-pm-badge--invoice {
	color: #0f7a5a !important;
	border-color: #bbf7d0 !important;
	background: #f0fdf4 !important;
}

.tm-lm-trust-svg {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

.tm-lm-quote__trust-item {
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
	font-size: 13px !important;
	color: #1e293b !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid #f1f5f9 !important;
}

.tm-lm-quote__trust-item:last-child {
	border-bottom: none !important;
}

.tm-subtext {
	display: block !important;
	font-size: 11.5px !important;
	color: #64748b !important;
	font-weight: normal !important;
	margin-top: 1px !important;
}

.tm-lm-quote__support-badge {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	color: #15803d !important;
	margin-bottom: 6px !important;
}

/* Lightbox Modal */
.tm-lm-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(15, 23, 42, 0.85) !important;
	backdrop-filter: blur(8px) !important;
	z-index: 999999 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px !important;
	box-sizing: border-box !important;
}
.tm-lm-modal.tm-active {
	display: flex !important;
}

.tm-lm-modal__content {
	background: #ffffff !important;
	border-radius: 16px !important;
	padding: 24px !important;
	max-width: 950px !important;
	width: 100% !important;
	position: relative !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

.tm-lm-modal__header {
	margin-bottom: 14px !important;
	text-align: left !important;
}

.tm-lm-modal__header h3 {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
}

.tm-lm-modal__close {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: #f1f5f9 !important;
	border: 1px solid #e2e8f0 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	color: #475569 !important;
	transition: background 0.15s ease !important;
}

.tm-lm-modal__close:hover {
	background: #e2e8f0 !important;
	color: #0f172a !important;
}

.tm-lm-modal__img {
	max-width: 100% !important;
	max-height: 70vh !important;
	object-fit: contain !important;
	border-radius: 8px !important;
}

.tm-lm-modal__footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-top: 16px !important;
	padding-top: 14px !important;
	border-top: 1px solid #e2e8f0 !important;
	font-size: 13px !important;
	color: #64748b !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}