/*
 * SavvyVault — frontend styles.
 *
 * Owned scope: the [savvy_vault_buy] button and (eventually) any inline status
 * affordances around it. Everything else stays in the theme's hands.
 *
 * Theming
 * -------
 * Every visual is driven by CSS custom properties scoped to .savvy-vault-buy-btn.
 * Themes override by re-declaring any of them at a higher specificity, e.g.:
 *
 *   .savvy-vault-buy-btn {
 *       --savvy-vault-btn-bg: #0b6e4f;
 *       --savvy-vault-btn-bg-hover: #094f39;
 *       --savvy-vault-btn-radius: 2px;
 *   }
 *
 * Or per instance via the css_class attribute:
 *
 *   [savvy_vault_buy product="your-product" css_class="brand-accent"]
 *
 *   .savvy-vault-buy-btn.brand-accent {
 *       --savvy-vault-btn-bg: #c0392b;
 *   }
 *
 * Properties are declared on the button itself rather than :root so the
 * defaults don't pollute the global cascade, and theme overrides at a more
 * specific selector still cascade in normally.
 *
 * Accessibility
 * -------------
 * - 44px minimum tap target (WCAG 2.5.5 Target Size, Apple HIG).
 * - Visible :focus-visible ring via outline + outline-offset so it survives
 *   Windows High Contrast / forced-colors mode where box-shadow rings vanish.
 * - prefers-reduced-motion disables the hover transition.
 * - type="button" on the markup side prevents accidental form submits.
 */

.savvy-vault-buy-btn {
	/* Palette */
	--savvy-vault-btn-bg: #1a2332;
	--savvy-vault-btn-bg-hover: #0f1620;
	--savvy-vault-btn-bg-active: #050a13;
	--savvy-vault-btn-bg-disabled: #6b7585;
	--savvy-vault-btn-color: var(--savvy-color-text-on-primary, #ffffff);

	/* Focus ring */
	--savvy-vault-btn-focus-ring-color: #4d8eff;
	--savvy-vault-btn-focus-ring-width: 3px;
	--savvy-vault-btn-focus-ring-offset: 2px;

	/* Shape & spacing */
	--savvy-vault-btn-padding-y: 0.75rem;
	--savvy-vault-btn-padding-x: 1.5rem;
	--savvy-vault-btn-radius: var(--savvy-radius-md, 6px);
	--savvy-vault-btn-border: 1px solid transparent;
	--savvy-vault-btn-min-height: 44px; /* WCAG tap target */

	/* Typography */
	--savvy-vault-btn-font-size: 1rem;
	--savvy-vault-btn-font-weight: 600;
	--savvy-vault-btn-letter-spacing: 0;
	--savvy-vault-btn-line-height: 1.2;

	/* Motion */
	--savvy-vault-btn-transition: background-color 120ms ease, transform 80ms ease;

	/* Applied styles */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	min-height: var(--savvy-vault-btn-min-height);
	padding: var(--savvy-vault-btn-padding-y) var(--savvy-vault-btn-padding-x);

	background-color: var(--savvy-vault-btn-bg);
	color: var(--savvy-vault-btn-color);

	border: var(--savvy-vault-btn-border);
	border-radius: var(--savvy-vault-btn-radius);

	font-family: inherit;
	font-size: var(--savvy-vault-btn-font-size);
	font-weight: var(--savvy-vault-btn-font-weight);
	letter-spacing: var(--savvy-vault-btn-letter-spacing);
	line-height: var(--savvy-vault-btn-line-height);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;
	user-select: none;
	touch-action: manipulation; /* removes 300ms tap delay on mobile */

	transition: var(--savvy-vault-btn-transition);
	-webkit-appearance: none;
	appearance: none;
}

.savvy-vault-buy-btn:hover {
	background-color: var(--savvy-vault-btn-bg-hover);
	color: var(--savvy-vault-btn-color);
}

.savvy-vault-buy-btn:active {
	background-color: var(--savvy-vault-btn-bg-active);
	transform: translateY(1px);
}

/*
 * :focus-visible isolates the keyboard-focus case from the mouse-click case,
 * so the ring only appears when it's actually helpful. The plain :focus rule
 * below is a safety net for the long tail of browsers without :focus-visible
 * support; it gets overridden by the :focus-visible rule on modern engines.
 */
.savvy-vault-buy-btn:focus {
	outline: var(--savvy-vault-btn-focus-ring-width) solid var(--savvy-vault-btn-focus-ring-color);
	outline-offset: var(--savvy-vault-btn-focus-ring-offset);
}

.savvy-vault-buy-btn:focus:not(:focus-visible) {
	outline: none;
}

.savvy-vault-buy-btn:focus-visible {
	outline: var(--savvy-vault-btn-focus-ring-width) solid var(--savvy-vault-btn-focus-ring-color);
	outline-offset: var(--savvy-vault-btn-focus-ring-offset);
}

.savvy-vault-buy-btn:disabled,
.savvy-vault-buy-btn[aria-disabled="true"] {
	background-color: var(--savvy-vault-btn-bg-disabled);
	cursor: not-allowed;
	opacity: 0.85;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.savvy-vault-buy-btn {
		transition: none;
	}

	.savvy-vault-buy-btn:active {
		transform: none;
	}
}

/* =============================================================================
 * Thank-you page  [savvy_vault_thank_you]  (Phase 4 / 0.10.0)
 * Scoped under .savvy-vault-thank-you; inherits the theme's font + colours and
 * only adds layout, spacing, and one accent. Responsive: file rows stack and
 * buttons go full-width on narrow screens.
 * ========================================================================== */

.savvy-vault-thank-you {
	--savvy-vault-ty-accent: var(--savvy-vault-btn-bg, #1a5276);
	--savvy-vault-ty-border: rgba(0, 0, 0, 0.1);
	--savvy-vault-ty-muted: rgba(0, 0, 0, 0.6);
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.55;
}

.savvy-vault-ty-head { margin-bottom: var(--savvy-space-6, 1.5rem); }
.savvy-vault-ty-title { margin: 0 0 0.25rem; }
.savvy-vault-ty-subtitle { margin: 0; font-size: 1.1rem; color: var(--savvy-vault-ty-muted); }
.savvy-vault-ty-h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }

.savvy-vault-ty-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem 1.5rem;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--savvy-vault-ty-border);
	border-radius: var(--savvy-radius-lg, 8px);
}
.savvy-vault-ty-detail dt {
	margin: 0; font-size: 0.8rem; text-transform: uppercase;
	letter-spacing: 0.04em; color: var(--savvy-vault-ty-muted);
}
.savvy-vault-ty-detail dd { margin: 0.15rem 0 0; font-weight: 600; }

.savvy-vault-ty-downloads,
.savvy-vault-ty-next,
.savvy-vault-ty-portal { margin: 0 0 1.75rem; }

.savvy-vault-ty-files { list-style: none; margin: 0; padding: 0; }
.savvy-vault-ty-file {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--savvy-space-4, 1rem); flex-wrap: wrap;
	padding: 0.85rem 0; border-bottom: 1px solid var(--savvy-vault-ty-border);
}
.savvy-vault-ty-file:last-child { border-bottom: 0; }
.savvy-vault-ty-file-name { font-weight: 600; }
.savvy-vault-ty-ver { font-weight: 400; font-size: 0.85em; color: var(--savvy-vault-ty-muted); }

.savvy-vault-ty-dl-btn,
.savvy-vault-ty-portal-btn {
	display: inline-block; padding: 0.6rem 1.1rem; border-radius: var(--savvy-radius-md, 6px);
	text-decoration: none; font-weight: 600; line-height: 1.2;
}
.savvy-vault-ty-dl-btn { background: var(--savvy-vault-ty-accent); color: #fff; }
.savvy-vault-ty-portal-btn {
	background: transparent; color: var(--savvy-vault-ty-accent);
	border: 1px solid var(--savvy-vault-ty-accent);
}
.savvy-vault-ty-dl-btn:hover, .savvy-vault-ty-dl-btn:focus,
.savvy-vault-ty-portal-btn:hover, .savvy-vault-ty-portal-btn:focus { opacity: 0.9; }

.savvy-vault-ty-note { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--savvy-vault-ty-muted); }

.savvy-vault-ty-foot {
	margin-top: var(--savvy-space-8, 2rem); padding-top: var(--savvy-space-4, 1rem);
	border-top: 1px solid var(--savvy-vault-ty-border);
	font-size: 0.9rem; color: var(--savvy-vault-ty-muted);
}
.savvy-vault-ty-foot a { color: var(--savvy-vault-ty-accent); }

/* =========================================================================
 * CV-7a — Accessibility / visual conformance (WCAG 2.2 AA) for the public
 * thank-you page and buy buttons. Appended block. frontend.css already ships
 * reduced-motion + focus-visible; this adds print, real forced-colors, and a
 * 320px reflow safety.
 * ========================================================================= */

/* --- High contrast: keep the buy button and thank-you panel legible. --- */
@media (forced-colors: active) {
	.savvy-vault-buy-btn {
		border: 2px solid ButtonText;
	}
	.savvy-vault-buy-btn:focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}
	.savvy-vault-thank-you,
	.savvy-vault-ty-details,
	.savvy-vault-ty-file {
		border: 1px solid CanvasText;
	}
}

/* --- Reflow (SC 1.4.10): no horizontal scroll at 320px. --- */

/* --- Print: legible black-on-white thank-you page; drop action buttons. --- */
@media print {
	.savvy-vault-buy-btn,
	.savvy-vault-ty-portal-btn,
	.savvy-vault-ty-dl-btn {
		display: none !important;
	}
	.savvy-vault-thank-you {
		color: #000;
		background: #fff;
	}
}


/* ==========================================================================
 * Mobile-first responsive layout (Track C5, 2.123.19).
 *
 * The two former max-width blocks (600, 320) on the plugin-owned thank-you /
 * download page are inverted to mobile-first: the small-screen values below
 * are the base, and two min-width blocks (321, 601) restore the wider layouts.
 * Rendering is unchanged at every width (321 and 601 are the exact complements
 * of 320 and 600).
 *
 * 321px and 601px are kept as content-tuned component values, deliberately NOT
 * --savvy-bp-* tokens: 321 is a tiny-screen text-wrapping guard (snapping to
 * --savvy-bp-xs 375 would move it substantially); 601 is the thank-you file/
 * button stacking point.
 * ========================================================================== */

/* Mobile base (small screens). */
.savvy-vault-ty-file { flex-direction: column; align-items: stretch; }
.savvy-vault-ty-dl-btn, .savvy-vault-ty-portal-btn { text-align: center; width: 100%; }
.savvy-vault-thank-you,
.savvy-vault-thank-you * { max-width: 100%; }
.savvy-vault-ty-file-name,
.savvy-vault-thank-you code { overflow-wrap: anywhere; word-break: break-word; }

/* >= 321px: undo the tiny-screen text-wrapping / width guard. */
@media screen and (min-width: 321px) {
	.savvy-vault-thank-you { max-width: 640px; }
	.savvy-vault-thank-you * { max-width: none; }
	.savvy-vault-ty-file-name,
	.savvy-vault-thank-you code { overflow-wrap: normal; word-break: normal; }
}

/* >= 601px: restore the row layout for the file line and inline-width buttons. */
@media screen and (min-width: 601px) {
	.savvy-vault-ty-file { flex-direction: row; align-items: center; }
	.savvy-vault-ty-dl-btn, .savvy-vault-ty-portal-btn { width: auto; }
}