/* DGG Tiered Pricing – Frontend */

.dgg-tiered-pricing-outer {
	margin: 16px 0;
}

.dgg-tiered-pricing-wrapper {
	background: var(--dgg-table-bg, #fff);
	border: 1px solid var(--dgg-table-border, #e2e2e2);
	border-radius: 6px;
	padding: 0;
	overflow: hidden;
}

/*
 * Sits outside .dgg-tiered-pricing-wrapper on purpose — the title is
 * not part of the styled table box, so a project's Table appearance
 * colors never apply to it.
 */
.dgg-table-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
}

.dgg-variation-placeholder {
	color: #777;
	font-style: italic;
	margin: 0;
	padding: 12px;
}

.dgg-tiered-pricing-table {
	width: 100%;
	border-collapse: collapse;
}

.dgg-tiered-pricing-table th,
.dgg-tiered-pricing-table td {
	text-align: left;
	font-size: 14px;
	border-bottom: 1px solid var(--dgg-table-border, #e2e2e2);
}

.dgg-tiered-pricing-table th {
	padding: 8px 10px !important;
}

.dgg-tiered-pricing-table tbody td {
	padding: 12px !important;
	vertical-align: top !important;
}

.dgg-tier-row {
	cursor: pointer;
}

.dgg-tier-row:focus,
.dgg-tier-row:focus-visible {
	outline: none;
}

/*
 * No border on the selected row for now — just the background
 * highlight. The "Selected row border color" admin setting still
 * exists but isn't applied here; if this reads well we'll remove that
 * setting from the admin UI too.
 */
.dgg-tier-row.dgg-tier-row-active {
	background: var(--dgg-row-bg, #f5f8ff);
	color: var(--dgg-row-text, inherit);
}

.dgg-tier-row.dgg-tier-row-active td del {
	color: var(--dgg-row-strike, #999);
}

.dgg-tiered-pricing-table td del {
	color: #999;
	margin-left: 6px;
	font-size: 0.9em;
}

.dgg-label-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 6px;
	margin-top: 6px;
	border: 1px solid transparent;
	white-space: nowrap;
}

.dgg-label-style-square {
	border-radius: 0;
}

.dgg-label-style-rounded {
	border-radius: 4px;
}

.dgg-label-style-pill {
	border-radius: 999px;
}

.dgg-label-style-outline {
	background: transparent !important;
	border-width: 1px;
	border-style: solid;
}

.dgg-label-style-dashed {
	background: transparent !important;
	border-width: 1px;
	border-style: dashed;
}

.dgg-show-more-quantities {
	display: block;
	margin: 0;
	padding: 10px 12px;
	background: none;
	border: none;
	color: var(--dgg-row-border, #3b82f6);
	cursor: pointer;
	text-decoration: underline;
	font-size: 13px;
	text-align: left;
}

/*
 * Sits outside .dgg-tiered-pricing-wrapper (below the table box, and
 * below "Content below table" if present) — it's a standalone summary,
 * not part of the Table appearance-styled box, so it uses its own
 * neutral divider color rather than the table's border color.
 */
.dgg-tiered-pricing-summary {
	margin-top: 16px;
}

.dgg-summary-heading {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 4px;
	padding-bottom: 8px;
}

.dgg-summary-row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid #e5e5e5;
	font-size: 14px;
}

.dgg-summary-label {
	flex: 0 0 90px;
	color: #666;
}

.dgg-summary-price {
	font-weight: 700;
}

.dgg-summary-original-price del {
	color: #999;
	margin-left: 6px;
	font-size: 0.9em;
}

/* Sits inside .dgg-tiered-pricing-wrapper, after the table — styled to read as the table's own closing row rather than a separate block. */
.dgg-content-below {
	margin: 0;
	padding: 12px;
	font-size: 14px;
}

form.cart .quantity.dgg-hidden {
	display: none !important;
}

/* Hide the "Price per unit" column on small screens to keep the table compact. */
@media (max-width: 480px) {
	.dgg-tiered-pricing-table th:nth-child(2),
	.dgg-tiered-pricing-table td:nth-child(2) {
		display: none;
	}
}