/**
 * Download & Purchase Notifications — default styles
 *
 * All visual values are exposed as --ddpn-* custom properties, first
 * pulling from the active theme's Global Styles (theme.json preset
 * variables), then falling back to sensible defaults. This means the
 * popup automatically matches most block themes without any extra
 * configuration, while still being fully overridable via the plugin's
 * "Custom CSS" field (loaded after this file) or a child theme.
 */

.ddpn-container {
	position: fixed;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(360px, calc(100vw - 32px));
	pointer-events: none; /* re-enabled per-card so the empty container never blocks clicks */
}

.ddpn-container.ddpn-position-bottom-left   { left: 16px; bottom: 16px; align-items: flex-start; }
.ddpn-container.ddpn-position-bottom-right  { right: 16px; bottom: 16px; align-items: flex-end; }
.ddpn-container.ddpn-position-top-left      { left: 16px; top: 16px; align-items: flex-start; }
.ddpn-container.ddpn-position-top-right     { right: 16px; top: 16px; align-items: flex-end; }

.ddpn-notification {
	--ddpn-bg: var(--wp--preset--color--base, #ffffff);
	--ddpn-text: var(--wp--preset--color--contrast, #1e1e1e);
	--ddpn-muted: var(--wp--preset--color--contrast, #1e1e1e);
	--ddpn-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #111111));
	--ddpn-accent-text: var(--wp--preset--color--base, #ffffff);
	--ddpn-radius: var(--wp--custom--border--radius, 10px);
	--ddpn-font: var(--wp--preset--font-family--body, inherit);
	--ddpn-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);

	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	background: var(--ddpn-bg);
	color: var(--ddpn-text);
	font-family: var(--ddpn-font);
	border-radius: var(--ddpn-radius);
	box-shadow: var(--ddpn-shadow);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.ddpn-notification.ddpn-visible {
	opacity: 1;
	transform: translateY(0);
}

.ddpn-image {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: calc(var(--ddpn-radius) * 0.6);
	object-fit: cover;
	background: rgba(0, 0, 0, 0.06);
	color: var(--ddpn-accent);
}

.ddpn-body {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * .ddpn-message is rendered as an actual <h6> element (see the JS),
 * specifically so the active theme's own `h6 { ... }` global-styles
 * rule (font, weight, color) cascades onto it for free -- that's the
 * most reliable way to "inherit the theme's H6 style", since it works
 * on block themes (theme.json) and classic themes alike, unlike trying
 * to guess theme.json custom properties by name.
 *
 * The declarations below are wrapped in :where() so they contribute
 * ZERO specificity -- they only apply as a fallback when the theme
 * doesn't style h6 at all, and are always overridden by the theme's
 * real h6 rule (or by the Custom CSS field) regardless of load order.
 */
:where(.ddpn-message) {
	font-size: 0.92em;
	line-height: 1.3;
	font-weight: 600;
	margin: 0;
}

.ddpn-message {
	/* Layout-only rules stay at normal specificity: these are our
	   widget's own truncation behaviour, not visual theming, so a
	   theme's h6 rule should never need to (and generally won't) touch
	   them. */
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/*
 * .ddpn-cta also carries WordPress core's .wp-element-button class
 * (see the JS) so it inherits the theme's real button styling
 * (background, color, radius, padding, font) wherever theme.json
 * defines button element styles. As with the message above, our own
 * visual defaults are wrapped in :where() so they're always the
 * lowest-priority fallback -- the theme's .wp-element-button rule (or
 * Custom CSS) wins whenever one exists.
 */
:where(.ddpn-cta) {
	color: var(--ddpn-accent-text);
	background: var(--ddpn-accent);
	border-radius: calc(var(--ddpn-radius) * 0.5);
	padding: 4px 10px;
	font-weight: 600;
}

.ddpn-cta {
	display: inline-block;
	font-size: 0.82em;
	text-decoration: none;
	line-height: 1.6;
}

.ddpn-cta:hover,
.ddpn-cta:focus {
	opacity: 0.88;
}

.ddpn-close {
	flex: 0 0 auto;
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--ddpn-muted);
	opacity: 0.5;
	padding: 4px;
}

.ddpn-close:hover,
.ddpn-close:focus {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ddpn-notification {
		transition: opacity 0.2s linear;
		transform: none;
	}
}

@media (max-width: 480px) {
	.ddpn-container {
		left: 8px !important;
		right: 8px !important;
		max-width: calc(100vw - 16px);
	}
}