/* Tablify Pro — guest "change booking" flow (uses the widget's tokens) */
.tablify .tf-modify-area {
	margin-top: 14px;
	text-align: center;
}

.tablify .tf-modify-banner {
	margin-bottom: 14px;
}

.tablify .tf-alert-success {
	background: color-mix(in srgb, var(--tf-success) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--tf-success) 25%, transparent);
	color: var(--tf-text);
}

.tablify .tf-modify-table {
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-r-sm);
	overflow: hidden;
}

.tablify .tf-modify-row {
	display: grid;
	grid-template-columns: minmax(70px, .7fr) 1fr 1fr;
	gap: 12px;
	padding: 11px 14px;
	border-top: 1px solid var(--tf-border);
	font-size: 14px;
	align-items: baseline;
}

.tablify .tf-modify-head {
	border-top: 0;
	background: var(--tf-primary-soft);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tf-muted);
}

.tablify .tf-modify-old {
	color: var(--tf-muted);
}

.tablify .tf-modify-row.is-changed .tf-modify-old {
	text-decoration: line-through;
}

.tablify .tf-modify-row.is-changed .tf-modify-new {
	color: var(--tf-primary);
	font-weight: 600;
}

@media (max-width: 520px) {
	.tablify .tf-modify-row {
		grid-template-columns: 1fr 1fr;
	}

	.tablify .tf-modify-row > :first-child {
		grid-column: 1 / -1;
	}

	.tablify .tf-modify-head > :first-child {
		display: none;
	}
}