/**
 * The buyer-facing exchange form.
 *
 * Styled with NovaKit's own design tokens, so the form belongs to the site
 * rather than sitting on top of it. This is the first thing somebody sees after
 * paying, and a form that looks bolted on reads as an afterthought.
 *
 * TWO KINDS OF TOKEN, AND THEY ARE NOT INTERCHANGEABLE
 *
 * Some NovaKit tokens hold a COMPLETE COLOUR and are used directly:
 *
 *     --nk-border-color: rgb(100 110 130 / 0.14)
 *     border-color: var( --nk-border-color, #84848426 );
 *
 * Others hold an RGB TRIPLET, so the theme can vary the alpha, and must be
 * wrapped:
 *
 *     --nk-accent: 213 28 47
 *     background: rgb( var( --nk-accent, 34 113 177 ) );
 *
 * Using a triplet directly produces `background: 213 28 47`, which is invalid —
 * so the browser discards the whole declaration with no error anywhere. That is
 * exactly how this form first shipped with an unstyled button and washed-out
 * labels. Check which kind a token is before reaching for it.
 *
 * Every fallback matches the token's own shape, so the form is presentable
 * under a theme that defines none of them.
 */

.novakey-exchange {
	margin: 0;
	color: rgb( var( --nk-body-text, 29 35 39 ) );
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	text-align: left;
}

/* ── Fields ───────────────────────────────────────────────────────────── */

.novakey-exchange__form p {
	margin: 0 0 1.25rem;
}

.novakey-exchange label {
	display: block;
	margin-bottom: 0.4rem;
	color: rgb( var( --nk-body-text, 29 35 39 ) );
	font-weight: 600;
	font-size: 0.95rem;
}

.novakey-exchange input[type="text"],
.novakey-exchange input[type="email"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var( --nk-border-color, #84848426 );
	border-radius: var( --nk-btn-radius, 0.5rem );
	background: rgb( var( --nk-surface, 255 255 255 ) );
	color: rgb( var( --nk-body-text, 29 35 39 ) );
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* A purchase code is 36 characters of hex. Monospace makes a mistyped one
   visible and stops the field looking like a name box. */
.novakey-exchange #novakey-code {
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.01em;
}

.novakey-exchange input:focus {
	outline: none;
	border-color: rgb( var( --nk-accent, 34 113 177 ) );
	box-shadow: 0 0 0 3px rgb( var( --nk-accent, 34 113 177 ) / 0.18 );
}

/* Hints, not descriptions. Quieter and tucked closer to the field they belong
   to, so they read as guidance while the eye is still on the input rather than
   as body copy competing with the label above it. */
.novakey-exchange__hint {
	display: block;
	margin-top: 0.35rem;
	color: rgb( var( --nk-body-text, 29 35 39 ) / 0.55 );
	font-size: 0.8rem;
	line-height: 1.45;
}

/* ── Consent ──────────────────────────────────────────────────────────── */

.novakey-exchange__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: rgb( var( --nk-body-text, 29 35 39 ) / 0.8 );
	font-weight: 400;
	font-size: 0.92rem;
	cursor: pointer;
}

.novakey-exchange__consent input {
	margin: 0.25rem 0 0;
	flex: 0 0 auto;
	accent-color: rgb( var( --nk-accent, 34 113 177 ) );
}

/* ── Button ───────────────────────────────────────────────────────────── */

/* The theme's own button tokens, so this looks like every other button on the
   site rather than an approximation of one. These hold complete colours. */
.novakey-exchange button[type="submit"] {
	display: inline-block;
	width: 100%;
	min-height: var( --nk-btn-height, auto );
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: var( --nk-btn-radius, 0.5rem );
	background: var( --nk-btn-primary-bg, #2271b1 );
	color: var( --nk-btn-primary-text, #fff );
	font-family: var( --nk-btn-font-family, inherit );
	font-size: var( --nk-btn-font-size, 1rem );
	font-weight: var( --nk-btn-font-weight, 600 );
	line-height: var( --nk-btn-line-height, 1.4 );
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.05s ease;
}

.novakey-exchange button[type="submit"]:hover { opacity: 0.9; }
.novakey-exchange button[type="submit"]:active { transform: translateY( 1px ); }

/* ── The result ───────────────────────────────────────────────────────── */

.novakey-exchange__result {
	padding: 2rem;
	border-top: 6px solid rgb(var(--nk-accent, 63 81 181));
	border-radius: 0 0 calc( var( --nk-btn-radius, 0.5rem ) * 1.5 ) calc( var( --nk-btn-radius, 0.5rem ) * 1.5 );
	background: rgb( var( --nk-muted-bg, 240 240 240 ) );
	text-align: center;
}

.novakey-exchange__lead {
    max-width: 24rem;
	margin: 0 auto 1.375rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

/* The key is why they are here, so it gets the weight. Monospace and generous
   tracking make it readable aloud and hard to mistype. */
.novakey-exchange__key {
	margin: 0 0 0.75rem;
}

.novakey-exchange__key code {
	display: block;
	padding: 1.25rem 0.875rem 1rem;
	border: 1px dashed var( --nk-border-color, #84848426 );
	border-radius: var( --nk-form-radius, 0.5rem );
	color: rgb( var( --nk-body-text, 29 35 39 ) );
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	word-break: break-all;
    text-align: center;
}

.novakey-exchange__copy {
	width: 100%;
	margin-bottom: 1.25rem;
	padding: 0.5rem 1rem;
	border: 1px solid var( --nk-border-color, #84848426 );
	border-radius: var( --nk-btn-radius, 0.5rem );
	background: transparent;
	color: rgb( var( --nk-body-text, 29 35 39 ) );
	font-family: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.novakey-exchange__copy:hover {
	border-color: rgb( var( --nk-accent, 34 113 177 ) );
}

.novakey-exchange__expiry {
	margin: 0 0 1rem;
	font-weight: 600;
}

/* An expired key is not an error — the buyer did nothing wrong and still has a
   usable key. Muted rather than red: this is a statement of fact, and the note
   underneath says what to do about it. */
.novakey-exchange__expiry.is-expired {
	color: #e18000;
	font-weight: 500;
}

.novakey-exchange__note,
.novakey-exchange__delivery {
	margin: 0 0 0.75rem;
	color: rgb( var( --nk-body-text, 29 35 39 ) / 0.7 );
	font-size: 0.92rem;
}

.novakey-exchange__delivery { margin-bottom: 0; }

/* ── Errors ───────────────────────────────────────────────────────────── */

.novakey-exchange__error {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid #d63638;
	background: rgba( 214, 54, 56, 0.07 );
	font-size: 0.95rem;
}

/* ── Support form ─────────────────────────────────────────────────────── */

.novakey-support textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var( --nk-border-color, #84848426 );
	color: rgb( var( --nk-body-text, 29 35 39 ) );
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.5;
	resize: vertical;
}

.novakey-support textarea:focus {
	outline: none;
	border-color: rgb( var( --nk-accent, 34 113 177 ) );
	box-shadow: 0 0 0 3px rgb( var( --nk-accent, 34 113 177 ) / 0.18 );
}