/**
 * Dino Discounts — Product Page Pricing Display
 *
 * Deliberately minimal: inherits the theme's fonts, colours, and spacing.
 * Designers can override any `.dd-*` class in their child theme stylesheet,
 * or adjust the CSS custom properties below without touching templates.
 *
 * @since 4.5.0
 */

/* ── Custom properties (override in your theme) ────────────────── */

.dd-pricing-display,
.dd-deal-message {
	--dd-sf-spacing:       1em;
	--dd-sf-cell-padding:  0.5em 0.75em;
	--dd-sf-border-color:  currentColor;
	--dd-sf-hover-bg:      rgba(0, 0, 0, 0.02);
	--dd-sf-message-border: 3px solid currentColor;
}

/* ── Tier pricing table ──────────────────────────────────────────── */

.dd-pricing-display {
	margin: var(--dd-sf-spacing) 0;
}

.dd-tier-table {
	width: 100%;
	border-collapse: collapse;
	font-size: inherit;
	line-height: inherit;
}

.dd-tier-table th {
	padding: var(--dd-sf-cell-padding);
	text-align: start;
	font-weight: 600;
	border-bottom: 2px solid var(--dd-sf-border-color);
	opacity: 0.85;
}

.dd-tier-table td {
	padding: var(--dd-sf-cell-padding);
	text-align: start;
	border-bottom: 1px solid var(--dd-sf-border-color);
	opacity: 1;
}

.dd-tier-table tbody tr:last-child td {
	border-bottom: none;
}

.dd-tier-table tbody tr:hover {
	background: var(--dd-sf-hover-bg);
}

/* Active tier highlight (when JS adds .dd-tier-active) */
.dd-tier-table .dd-tier-active td {
	font-weight: 700;
	opacity: 1;
}

/* ── Promotional message ─────────────────────────────────────────── */

.dd-deal-message {
	margin: var(--dd-sf-spacing) 0;
	padding: 0.75em 1em;
	border-inline-start: var(--dd-sf-message-border);
	font-size: inherit;
	line-height: 1.5;
}

/* ── Accessibility ──────────────────────────────────────────────── */

/*
 * Local fallback for `.screen-reader-text` so captions/labels stay visually
 * hidden even on themes that don't define the WP convention class.
 */
.dd-pricing-display .screen-reader-text,
.dd-deal-message .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ── Responsive adjustments ──────────────────────────────────────── */

@media (max-width: 480px) {
	.dd-tier-table th,
	.dd-tier-table td {
		padding: 0.4em 0.5em;
		font-size: 0.9em;
	}
}