/*
 * The customer's key display.
 *
 * Deliberately unopinionated: this plugin must not redesign the shop. Nothing
 * here sets a font, a brand colour or a page width. It borrows `currentColor`
 * and neutral greys so it inherits whatever the active theme is doing, and it
 * styles only what has no sensible default — the monospace code block, the copy
 * button and the spacing between deliveries.
 */

.dgs-deliveries {
	margin: 2rem 0;
}

.dgs-deliveries__title {
	margin: 0 0 1rem;
	font-size: 1.15rem;
}

.dgs-delivery {
	border: 1px solid rgba(128, 128, 128, 0.28);
	border-radius: 6px;
	padding: 1rem 1.15rem;
	margin: 0 0 1rem;
}

.dgs-delivery__product {
	margin: 0 0 0.35rem;
	font-size: 1rem;
}

.dgs-delivery__meta,
.dgs-delivery__region {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	opacity: 0.75;
}

.dgs-delivery__notice {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.7rem;
	border-radius: 4px;
	font-size: 0.85rem;
	background: rgba(128, 128, 128, 0.12);
}

.dgs-delivery__notice--failed {
	background: rgba(200, 60, 60, 0.12);
}

.dgs-delivery__notice--mock {
	background: rgba(200, 140, 40, 0.16);
	font-weight: 600;
}

.dgs-delivery__key {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.dgs-delivery__code {
	flex: 1 1 16rem;
	/* `break-all`, not `nowrap`: a 25-character product key on a 360px phone
	   must wrap rather than scroll sideways, or half of it is unreadable and
	   unselectable. */
	word-break: break-all;
	padding: 0.6rem 0.75rem;
	border: 1px dashed rgba(128, 128, 128, 0.5);
	border-radius: 4px;
	background: rgba(128, 128, 128, 0.08);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}

.dgs-delivery__copy {
	flex: 0 0 auto;
	padding: 0.55rem 0.9rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.dgs-delivery__copy[data-dgs-copied] {
	opacity: 0.6;
	cursor: default;
}

.dgs-delivery__activation {
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.dgs-delivery__activation summary {
	cursor: pointer;
	font-weight: 600;
}

.dgs-delivery__activation p {
	margin: 0.4rem 0 0;
}

.dgs-delivery-empty {
	opacity: 0.75;
}