/**
 * Front-end claim form.
 *
 * Every value is a token scoped to .pc-wrap. The Appearance tab in wp-admin
 * writes those tokens as an inline style block (see PC_Appearance::inline_css),
 * so this file never changes when the operator restyles the form, and a theme
 * can still override any single token without fighting a selector.
 *
 * The fallbacks below are what renders if the inline block is ever missing.
 * They match the plugin defaults, so the form is never unstyled.
 */

/* Most themes set border-box globally and the form silently relied on that.
   Where a theme does not, `width: 100%` plus padding and a border makes every
   field wider than the form that contains it, and the Appearance preview shows
   it every time because an isolated iframe has no theme reset at all. Scoped to
   the plugin's own subtree, so it changes nothing outside it. */
.pc-wrap,
.pc-wrap *,
.pc-wrap *::before,
.pc-wrap *::after {
	box-sizing: border-box;
}

.pc-wrap {
	/* Layout */
	--pc-form-width: 544px;
	--pc-font-size: 16px;
	--pc-radius: 6px;
	--pc-pad-y: 12px;
	--pc-pad-x: 14px;
	--pc-gap: 18px;
	--pc-border-w: 1px;
	--pc-field-gap: .35rem;
	--pc-label-weight: 600;

	/* Colour, replaced wholesale by the chosen scheme */
	--pc-text: #16181d;
	--pc-muted: #5a6068;
	--pc-field-bg: #ffffff;
	--pc-field-border: #c9cdd4;
	--pc-placeholder: #8b909b;
	--pc-error: #8a1c1c;
	--pc-ok: #14532d;

	--pc-brand: #9a3f12;
	--pc-on-brand: #ffffff;
	--pc-btn-width: auto;

	/* Brand text on a page background, as opposed to --pc-on-brand, which is
	   text on top of the brand colour itself.

	   A brand chosen to look right as a solid button is regularly unreadable as
	   text: this default is a dark rust that vanishes into a dark theme's page.
	   Bending it toward the scheme's own text colour keeps the brand recognisable
	   while guaranteeing it stays legible in both schemes, and it re-derives on
	   its own whenever the operator changes either one. */
	--pc-brand-ink: color-mix(in srgb, var(--pc-brand) 62%, var(--pc-text));

	max-width: var(--pc-form-width);
	font-size: var(--pc-font-size);
	color: var(--pc-text);
}

.pc-field {
	display: flex;
	flex-direction: column;
	gap: var(--pc-field-gap);
	margin: 0 0 var(--pc-gap);
}

.pc-field label {
	font-weight: var(--pc-label-weight);
	font-size: .95em;
	color: var(--pc-text);
}

.pc-field input[type="text"],
.pc-field input[type="email"],
.pc-field input[type="file"] {
	width: 100%;
	padding: var(--pc-pad-y) var(--pc-pad-x);
	border: var(--pc-border-w) solid var(--pc-field-border);
	border-radius: var(--pc-radius);
	background: var(--pc-field-bg);
	color: var(--pc-text);
	font: inherit;
	font-size: 1em;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pc-field input[type="file"] {
	padding: calc(var(--pc-pad-y) * .75) var(--pc-pad-x);
	color: var(--pc-muted);
}

/* The placeholder is the first casualty of a dark theme; give it its own token
   rather than relying on a browser default that assumes a light field. */
.pc-field input::placeholder {
	color: var(--pc-placeholder);
	opacity: 1;
}

.pc-field input:focus {
	outline: none;
	border-color: var(--pc-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-brand) 28%, transparent);
}

.pc-field input:focus-visible {
	outline: 2px solid var(--pc-brand);
	outline-offset: 2px;
}

.pc-hint {
	font-size: .85em;
	color: var(--pc-muted);
}

.pc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pc-notice {
	padding: var(--pc-pad-y) var(--pc-pad-x);
	border-left: 3px solid currentColor;
	border-radius: var(--pc-radius);
	margin: 0 0 calc(var(--pc-gap) * 1.2);
	font-size: .95em;
}

.pc-notice--error {
	color: var(--pc-error);
	background: color-mix(in srgb, var(--pc-error) 10%, transparent);
}

/* There is no success notice. A claim that goes through is answered by the
   success box below, which replaces the form outright. */

.pc-notice--closed {
	color: var(--pc-muted);
	background: color-mix(in srgb, var(--pc-muted) 10%, transparent);
}

.pc-actions {
	margin: 0;
}

.pc-submit {
	width: var(--pc-btn-width);
	padding: var(--pc-pad-y) calc(var(--pc-pad-x) * 1.8);
	border: 0;
	border-radius: var(--pc-radius);
	background: var(--pc-brand);
	color: var(--pc-on-brand);
	font: inherit;
	font-size: 1em;
	font-weight: var(--pc-label-weight);
	cursor: pointer;
	transition: filter .15s ease;
}

.pc-submit:hover {
	filter: brightness(1.08);
}

.pc-submit:active {
	filter: brightness(.95);
}

.pc-submit:focus-visible {
	outline: 2px solid var(--pc-brand);
	outline-offset: 2px;
}

.cf-turnstile {
	margin: 0 0 var(--pc-gap);
}

/* ---------------------------------------------------------------------------
   Confirm dialog

   Shown between the submit click and the submission itself, because that click
   issues a coupon and sends an email that are both locked to the address in the
   field. It reads the form's tokens, so it is the site's dialog rather than the
   browser's.

   Fixed positioning takes it out of .pc-wrap's max-width, but custom properties
   still inherit, which is what keeps it on palette.
   --------------------------------------------------------------------------- */

.pc-dialog {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

/* The utility [hidden] rule loses to the class above without this. */
.pc-dialog[hidden] {
	display: none;
}

/* The one place a literal colour is right. A scrim's job is to dim the page
   behind it, so deriving it from --pc-text would invert it on the dark scheme
   and wash the page out instead of dimming it. */
.pc-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(9, 10, 12, .62);
}

.pc-dialog__panel {
	position: relative;
	width: 100%;
	max-width: 27rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: calc(var(--pc-gap) * 1.35) calc(var(--pc-pad-x) * 1.6);
	border-radius: calc(var(--pc-radius) * 1.5);
	background: var(--pc-field-bg);
	color: var(--pc-text);
	font-size: var(--pc-font-size);
	box-shadow: 0 24px 60px -12px rgba(9, 10, 12, .45);
}

.pc-dialog__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pc-brand) 16%, transparent);
	color: var(--pc-brand-ink);
}

.pc-dialog__title {
	margin: calc(var(--pc-gap) * .7) 0 0;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.pc-dialog__text {
	margin: .5em 0 0;
	font-size: .92em;
	line-height: 1.6;
	color: var(--pc-muted);
}

/* The address itself, big enough to actually proofread. */
.pc-dialog__value {
	margin: var(--pc-gap) 0 0;
	padding: var(--pc-pad-y) var(--pc-pad-x);
	border: var(--pc-border-w) solid color-mix(in srgb, var(--pc-brand) 40%, var(--pc-field-border));
	border-radius: var(--pc-radius);
	background: color-mix(in srgb, var(--pc-brand) 7%, transparent);
	color: var(--pc-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: anywhere;
}

.pc-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: var(--pc-gap);
}

.pc-dialog__cancel,
.pc-dialog__confirm {
	flex: 1 1 10rem;
	padding: var(--pc-pad-y) calc(var(--pc-pad-x) * 1.2);
	border-radius: var(--pc-radius);
	font: inherit;
	font-size: .95em;
	font-weight: var(--pc-label-weight);
	line-height: 1.3;
	cursor: pointer;
	transition: filter .15s ease, background-color .15s ease;
}

.pc-dialog__cancel {
	border: var(--pc-border-w) solid var(--pc-field-border);
	background: transparent;
	color: var(--pc-muted);
}

.pc-dialog__cancel:hover {
	color: var(--pc-text);
	background: color-mix(in srgb, var(--pc-field-border) 24%, transparent);
}

.pc-dialog__confirm {
	border: var(--pc-border-w) solid var(--pc-brand);
	background: var(--pc-brand);
	color: var(--pc-on-brand);
}

.pc-dialog__confirm:hover {
	filter: brightness(1.08);
}

.pc-dialog__cancel:focus-visible,
.pc-dialog__confirm:focus-visible {
	outline: 2px solid var(--pc-brand);
	outline-offset: 2px;
}

.pc-submit:disabled {
	opacity: .6;
	cursor: progress;
}

/* ---------------------------------------------------------------------------
   Success

   Shown in place of the form once a claim goes through. It reads the same
   tokens the form does, so restyling the form restyles this with it and the two
   can never end up looking like they came from different plugins.

   Every colour here is either a token or a mix of two tokens. Nothing is
   hardcoded, which is what keeps the box legible on a dark theme.
   --------------------------------------------------------------------------- */

.pc-success {
	position: relative;
	overflow: hidden;
	padding: calc(var(--pc-gap) * 1.15) calc(var(--pc-pad-x) * 1.5);
	padding-left: calc(var(--pc-pad-x) * 1.5 + 4px);
	border: var(--pc-border-w) solid var(--pc-field-border);
	border-color: color-mix(in srgb, var(--pc-brand) 30%, var(--pc-field-border));
	border-radius: calc(var(--pc-radius) * 1.5);
	background: var(--pc-field-bg);
	background: color-mix(in srgb, var(--pc-brand) 6%, var(--pc-field-bg));
	color: var(--pc-text);
}

.pc-success:focus {
	outline: none;
}

/* A brand rule down the leading edge, picking up where the submit button left off. */
.pc-success::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--pc-brand);
}

.pc-success__head {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--pc-pad-x) * .9);
}

.pc-success__mark {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 999px;
	background: var(--pc-brand);
	color: var(--pc-on-brand);
}

.pc-success--pending .pc-success__mark {
	background: color-mix(in srgb, var(--pc-brand) 18%, transparent);
	color: var(--pc-brand-ink);
}

/* Icons come from the shared PC_Admin_UI::icon() helper, which always carries
   this class. Sizing it once here covers the mark, the copy button, and the
   call to action, and it scales with the operator's font size token. */
.pc-wrap .pc-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.pc-success__title {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--pc-text);
}

.pc-success__lead {
	margin: .45em 0 0;
	font-size: .95em;
	line-height: 1.55;
	color: var(--pc-muted);
}

/* Code + copy ------------------------------------------------------------- */

.pc-code {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .5rem;
	margin: var(--pc-gap) 0 0;
}

/* The basis is generous on purpose. This is an input, so a field too narrow for
   the code does not wrap it or shrink it, it silently clips it and the claimant
   copies or reads a partial code. Sized so the button drops to its own line
   before the code is ever cut, since a stacked button is a cosmetic compromise
   and a truncated code is a broken one. */
.pc-code__value {
	flex: 1 1 11rem;
	min-width: 0;
	padding: var(--pc-pad-y) var(--pc-pad-x);
	border: var(--pc-border-w) dashed var(--pc-field-border);
	border-color: color-mix(in srgb, var(--pc-brand) 45%, var(--pc-field-border));
	border-radius: var(--pc-radius);
	background: var(--pc-field-bg);
	color: var(--pc-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	cursor: pointer;
}

.pc-code__value:focus {
	outline: 2px solid var(--pc-brand);
	outline-offset: 2px;
}

.pc-code__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	flex: 0 1 auto;
	padding: var(--pc-pad-y) calc(var(--pc-pad-x) * 1.1);
	border: var(--pc-border-w) solid var(--pc-brand);
	border-radius: var(--pc-radius);
	background: transparent;
	color: var(--pc-brand-ink);
	font: inherit;
	font-size: .95em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.pc-code__button:hover {
	background: color-mix(in srgb, var(--pc-brand) 12%, transparent);
}

.pc-code__button:focus-visible {
	outline: 2px solid var(--pc-brand);
	outline-offset: 2px;
}

.pc-code__button.is-copied {
	background: var(--pc-brand);
	color: var(--pc-on-brand);
}

.pc-success__status {
	min-height: 1.4em;
	margin: .5em 0 0;
	font-size: .85em;
	font-weight: 600;
	color: var(--pc-brand-ink);
}

/* Call to action ---------------------------------------------------------- */

.pc-success__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	width: var(--pc-btn-width);
	margin: calc(var(--pc-gap) * .5) 0 0;
	padding: var(--pc-pad-y) calc(var(--pc-pad-x) * 1.6);
	border-radius: var(--pc-radius);
	background: var(--pc-brand);
	color: var(--pc-on-brand);
	font-size: 1em;
	font-weight: var(--pc-label-weight);
	line-height: 1.3;
	text-decoration: none;
	transition: filter .15s ease;
}

.pc-success__cta:hover {
	color: var(--pc-on-brand);
	filter: brightness(1.08);
}

.pc-success__cta:focus-visible {
	outline: 2px solid var(--pc-brand);
	outline-offset: 2px;
}

.pc-success__fine {
	margin: var(--pc-gap) 0 0;
	padding-top: calc(var(--pc-gap) * .6);
	border-top: 1px solid color-mix(in srgb, var(--pc-field-border) 60%, transparent);
	font-size: .82em;
	line-height: 1.55;
	color: var(--pc-muted);
}

@media (prefers-reduced-motion: reduce) {
	.pc-wrap * {
		transition-duration: .01ms !important;
	}
}