/* Options table on the single product page.
   Colours come from custom properties so the theme can restyle without a fork. */

.sga-po-table-wrap {
	--sga-po-border: rgba(0, 0, 0, .1);
	--sga-po-head: rgba(0, 0, 0, .03);
	--sga-po-accent: #2aab95;
	--sga-po-accent-ink: #fff;
	--sga-po-muted: rgba(0, 0, 0, .55);
	--sga-po-save: #c0392b;

	margin: 24px 0;
	overflow-x: auto;
}

@media (prefers-color-scheme: dark) {
	.sga-po-table-wrap {
		--sga-po-border: rgba(255, 255, 255, .16);
		--sga-po-head: rgba(255, 255, 255, .05);
		--sga-po-muted: rgba(255, 255, 255, .6);
		--sga-po-save: #ff8a7a;
	}
}

.sga-po-heading {
	font-size: 1.05em;
	margin: 0 0 10px;
}

.sga-po-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	border: 1px solid var(--sga-po-border);
	font-size: 14px;
}

.sga-po-table th,
.sga-po-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--sga-po-border);
	text-align: left;
	vertical-align: middle;
}

.sga-po-table thead th {
	background: var(--sga-po-head);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sga-po-muted);
	font-weight: 600;
}

.sga-po-table tbody tr:last-child td {
	border-bottom: 0;
}

.sga-po-title {
	font-weight: 600;
}

.sga-po-expiry,
.sga-po-badge {
	display: block;
	font-size: 11.5px;
	color: var(--sga-po-muted);
	margin-top: 2px;
}

.sga-po-badge-expired {
	color: var(--sga-po-save);
	font-weight: 600;
}

.sga-po-row-expired .sga-po-title,
.sga-po-row-expired .sga-po-col-price {
	text-decoration: line-through;
	opacity: .65;
}

.sga-po-col-price,
.sga-po-col-save {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sga-po-price-old {
	color: var(--sga-po-muted);
	margin-right: 6px;
	font-size: 13px;
}

.sga-po-price-new {
	text-decoration: none;
	font-weight: 700;
}

.sga-po-save {
	display: inline-block;
	background: var(--sga-po-save);
	color: #fff;
	border-radius: 3px;
	padding: 1px 6px;
	font-size: 12px;
	font-weight: 700;
}

.sga-po-save-amount {
	display: block;
	font-size: 11.5px;
	color: var(--sga-po-muted);
	margin-top: 2px;
}

.sga-po-save-none {
	color: var(--sga-po-muted);
}

.sga-po-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	background: var(--sga-po-accent);
	color: var(--sga-po-accent-ink);
	transition: filter .15s ease;
}

.sga-po-btn:hover,
.sga-po-btn:focus-visible {
	filter: brightness(1.08);
	color: var(--sga-po-accent-ink);
}

.sga-po-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sga-po-btn-code {
	background: transparent;
	color: inherit;
	border: 1px dashed var(--sga-po-accent);
	padding: 0;
	overflow: hidden;
}

.sga-po-code-text {
	padding: 7px 10px;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	letter-spacing: .04em;
}

.sga-po-code-cta {
	padding: 7px 10px;
	background: var(--sga-po-accent);
	color: var(--sga-po-accent-ink);
	white-space: nowrap;
}

.sga-po-btn-code.is-copied .sga-po-code-cta {
	background: #1e8449;
}

.sga-po-btn-disabled {
	background: transparent;
	color: var(--sga-po-muted);
	border: 1px solid var(--sga-po-border);
	cursor: not-allowed;
}

@media (max-width: 600px) {
	.sga-po-table {
		min-width: 460px;
	}

	.sga-po-code-text {
		max-width: 90px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sga-po-btn {
		transition: none;
	}
}