/**
 * iPASTORE dark layer
 * ---------------------------------------------------------------------------
 * Sits on top of Avada Global Options, which already carry the palette. This
 * file only does what those options cannot express:
 *   1. self-hosted Inter
 *   2. glass surfaces / ambient blobs (the install-app look)
 *   3. the mono "machine voice" for UDIDs, price, expiry
 *   4. WooCommerce surfaces Avada does not theme -- notices, the order-review
 *      table, and the select2 country dropdown, which all ship light-on-light
 *      and would otherwise be unreadable at checkout
 *
 * Colour values come from iPASTORE-DESIGN-TOKENS.md, read out of the compiled
 * CSS of install.ipastore.me. Note this is Tailwind v4's rebased palette:
 * indigo-500 is #625fff, NOT the v3 #6366f1.
 */

/* --------------------------------------------------------------------------
   1. Inter, self-hosted (no Google Fonts -- EU customers are in scope)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;      /* variable axis */
	font-display: swap;
	src: url('fonts/inter-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
	--ips-bg: #0f172a;
	--ips-surface: #16233c;
	--ips-raised: #1e2d49;
	--ips-border: #2a3a57;

	--ips-indigo: #625fff;
	--ips-indigo-hover: #4f39f6;
	--ips-indigo-soft: #7d87ff;
	--ips-indigo-light: #a4b3ff;

	--ips-emerald: #00bb7f;
	--ips-emerald-soft: #00d294;
	--ips-red: #ff6568;
	--ips-amber: #fcbb00;
	/* Sampled from the iOS app itself (Install button, Options header, active
	   tab tint). Indigo carries the site chrome; coral carries the CTAs, so the
	   buy button matches the product being bought. */
	--ips-coral: #ff705c;
	--ips-coral-hover: #e85a47;

	--ips-text: #e2e8f0;
	--ips-body: #90a1b9;   /* 6.79:1 on bg */

	/* The install app uses slate-500/600 here, but at the small sizes we set
	   (0.75rem eyebrows, tier terms, placeholders) those measure 3.75:1 and
	   2.35:1 -- below the 4.5:1 AA floor for body-size text. Lifted to the
	   dimmest values that still pass on both bg and surface. */
	--ips-muted: #7a8ca6;  /* 5.21:1 on bg, 4.57:1 on surface */

	/* Decorative only -- bullets, idle step dots. Never text: 3.75:1 clears the
	   3:1 bar for non-text UI, but not the 4.5:1 bar for type. */
	--ips-faint: #62748e;

	/* glass */
	--ips-glass-bg: rgba(255, 255, 255, 0.05);
	--ips-glass-border: rgba(255, 255, 255, 0.10);
	--ips-glass-hover: rgba(255, 255, 255, 0.08);

	--ips-radius-card: 1rem;
	--ips-radius-btn: 0.75rem;
	--ips-radius-chip: 0.5rem;

	--ips-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   3. Ambient blobs
   The dark page reads flat without these; they are the single atmospheric
   device carried over from the install app. Fixed, not scroll-linked, and
   pointer-events:none so they never intercept clicks.
   -------------------------------------------------------------------------- */
body.ips-dark::before,
body.ips-dark::after {
	content: "";
	position: fixed;
	width: 20rem;
	height: 20rem;
	border-radius: 50%;
	filter: blur(48px);
	pointer-events: none;
	z-index: 0;
}

body.ips-dark::before {
	top: 20%;
	left: 28%;
	background: rgba(98, 95, 255, 0.10);
}

body.ips-dark::after {
	bottom: 28%;
	right: 20%;
	background: rgba(172, 75, 255, 0.08);
}

/* keep real content above the blobs */
body.ips-dark #wrapper,
body.ips-dark #main {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Glass + mono helpers (used by the landing page)
   -------------------------------------------------------------------------- */
.ips-glass {
	background: var(--ips-glass-bg);
	border: 1px solid var(--ips-glass-border);
	border-radius: var(--ips-radius-card);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.ips-mono {
	font-family: var(--ips-mono);
	font-variant-ligatures: none;
}

/* eyebrow: the machine voice, used above headlines */
.ips-eyebrow {
	font-family: var(--ips-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ips-muted);
}

/* --------------------------------------------------------------------------
   5. WooCommerce dark corrections
   Avada themes inputs via form_* options, but WooCommerce ships its own
   notice/table/dropdown chrome with light backgrounds baked in. Without these
   rules the checkout is unreadable -- light grey text on near-white panels.
   -------------------------------------------------------------------------- */

/* notices: info / success / error */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	background-color: var(--ips-surface) !important;
	color: var(--ips-text) !important;
	border-top-color: var(--ips-indigo) !important;
}

.woocommerce-error {
	border-top-color: var(--ips-red) !important;
}

.woocommerce-message {
	border-top-color: var(--ips-emerald) !important;
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
	color: var(--ips-indigo-light) !important;
}

/* order review + cart tables */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
	background-color: transparent;
	border-color: var(--ips-border) !important;
	color: var(--ips-text);
}

.woocommerce table.shop_table thead th,
.woocommerce table.shop_table tfoot td {
	background-color: var(--ips-surface) !important;
	color: var(--ips-text) !important;
}

/* payment box (the little arrow panel under the gateway radio) */
.woocommerce #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background-color: var(--ips-raised) !important;
	color: var(--ips-body) !important;
}

.woocommerce #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--ips-raised) !important;
}

.woocommerce #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
	border-color: var(--ips-border) !important;
}

.woocommerce #payment,
.woocommerce-checkout #payment {
	background-color: transparent !important;
}

/* inputs: Avada covers most of this, these catch the stragglers */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	background-color: var(--ips-surface);
	color: var(--ips-text);
	border-color: var(--ips-border);
}

/* placeholders are text, so they take the muted token, not faint */
::placeholder {
	color: var(--ips-muted);
	opacity: 1;
}

/* required-field asterisk and validation states */
.woocommerce form .form-row .required {
	color: var(--ips-red);
	text-decoration: none;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--ips-red);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--ips-emerald);
}

/* select2 (the country / state dropdown) ships fully light */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-dropdown,
.select2-container--default .select2-results__option {
	background-color: var(--ips-surface) !important;
	color: var(--ips-text) !important;
	border-color: var(--ips-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ips-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--ips-indigo) !important;
	color: #fff !important;
}

/* the UDID field is the one field unique to this store -- give it the mono
   treatment so it reads as an identifier rather than free text */
#billing_udid,
#billing_udid_field input {
	font-family: var(--ips-mono);
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   6. Landing page components
   These are plain classes used from Fusion Builder text elements, so every
   section stays editable in wp-admin -- no custom Fusion element required.
   -------------------------------------------------------------------------- */

/* ---- the pipeline card: a still of what the install app shows after purchase
   ---- */
.ips-pipe {
	max-width: 28rem;          /* matches the install app's max-w-md exactly */
	margin: 2.5rem auto 0;
	padding: 1.5rem;
	text-align: left;
}

.ips-pipe-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
}

.ips-pipe-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-size: 0.8rem;
	line-height: 1;
}

.ips-pipe-dot--done {
	background: rgba(0, 187, 127, 0.20);
	color: var(--ips-emerald-soft);
}

.ips-pipe-dot--idle {
	background: rgba(255, 255, 255, 0.05);
	color: var(--ips-faint);
}

.ips-pipe-label {
	font-size: 0.875rem;
	color: var(--ips-emerald-soft);
}

.ips-pipe-label--idle {
	color: var(--ips-muted);
}

.ips-pipe-foot {
	margin: 0.75rem 0 0;
	font-family: var(--ips-mono);
	font-size: 0.75rem;
	color: var(--ips-muted);
}

/* ---- numbered steps ---- */
.ips-step {
	padding: 1.5rem;
	height: 100%;
}

.ips-step-num {
	font-family: var(--ips-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	color: var(--ips-indigo-soft);
}

.ips-step h3 {
	margin: 0.5rem 0 0.5rem;
	font-size: 1.0625rem;
	color: var(--ips-text);
}

.ips-step p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ips-body);
	line-height: 1.6;
}

/* ---- tiers ---- */
/* Equal-height tier cards with their buttons on one baseline.
 *
 * Avada already stretches the columns (fusion-flex-align-items-stretch), but
 * the column wrapper packs its children to the top and .fusion-text does not
 * grow -- so each card kept its natural height and each button landed at a
 * different y. Scoped to #tiers so no other section is affected.
 */
/* Restricted to the 1/3 tier columns. The section's heading sits in a 1_1
   column whose text element is centred -- making that a flex container would
   shrink the eyebrow to its content width and left-align it. */
#tiers .fusion_builder_column_1_3 .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Only the text block holding the card may grow. The earlier rule targeted
   every .fusion-text in the column, so adding a note under the Pro button made
   that note flex too and squashed the Pro card while the others stretched. */
#tiers .fusion_builder_column_1_3 .fusion-text {
	flex: 0 0 auto;
}

/* Two rules, not one comma-separated selector: an unsupported :has() would
   invalidate the whole list and take the fallback down with it. */
#tiers .fusion_builder_column_1_3 .fusion-text:first-of-type {
	display: flex;
	flex: 1 1 auto;
}

#tiers .fusion_builder_column_1_3 .fusion-text:has(> .ips-tier) {
	display: flex;
	flex: 1 1 auto;
}

#tiers .fusion_builder_column_1_3 .fusion-text > .ips-tier {
	flex: 1 1 auto;
	width: 100%;
}

/* the button is a sibling of the card, so pin it below the stretched card */
#tiers .fusion_builder_column_1_3 .fusion-button-wrapper {
	margin-top: 0.75rem;
}

.ips-tier {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
}

/* bullets sit directly under the price block; the slack goes below them so
   shorter cards pad out at the bottom rather than stretching their content */
#tiers .ips-tier ul {
	margin-bottom: auto;
}

/* Pro is the only paid tier, so it carries the only solid border */
.ips-tier--featured {
	border-color: rgba(98, 95, 255, 0.55);
	background: rgba(98, 95, 255, 0.07);
}

.ips-tier-name {
	font-family: var(--ips-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ips-indigo-light);
}

.ips-tier--muted .ips-tier-name {
	color: var(--ips-muted);
}

.ips-tier-price {
	font-family: var(--ips-mono);
	font-size: 2rem;
	font-weight: 600;
	color: var(--ips-text);
	margin: 0.5rem 0 0.25rem;
}

.ips-tier-term {
	font-size: 0.8125rem;
	color: var(--ips-muted);
	margin: 0 0 1rem;
}

.ips-tier ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.ips-tier li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	color: var(--ips-body);
}

.ips-tier li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--ips-emerald);
}

.ips-tier--muted li::before {
	background: var(--ips-faint);
}

/* ---- trust strip ---- */
.ips-trust {
	padding: 1.25rem 1.5rem;
}

.ips-trust h3 {
	margin: 0 0 0.35rem;
	font-size: 0.9375rem;
	color: var(--ips-text);
}

.ips-trust p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ips-body);
}

/* --------------------------------------------------------------------------
   6b. Product showcase — real app screenshots
   -------------------------------------------------------------------------- */

/* Device bezel. The screenshots are raw 1206x2622 screen captures with no
   chrome, so the frame is drawn here rather than baked into the image -- that
   keeps the assets reusable and lets the bezel follow the theme. */
.ips-device {
	position: relative;
	max-width: 300px;
	margin: 0 auto;
	padding: 0.5rem;
	border-radius: 2.75rem;
	background: linear-gradient(155deg, #34343a 0%, #101013 55%, #232327 100%);
	box-shadow:
		0 30px 60px -22px rgba(0, 0, 0, 0.85),
		0 0 0 1px rgba(255, 255, 255, 0.07);
}

.ips-device img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2.3rem;
}

.ips-device--sm {
	max-width: 232px;
}

/* alternating copy block beside a device */
.ips-kicker {
	font-family: var(--ips-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ips-coral);
}

.ips-showcase h2 {
	margin: 0.55rem 0 0.6rem;
	font-size: clamp(1.5rem, 3vw, 1.95rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ips-text);
}

.ips-showcase p {
	margin: 0 0 0.9rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ips-body);
}

.ips-showcase ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ips-showcase li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.45rem;
	font-size: 0.9375rem;
	color: var(--ips-body);
}

.ips-showcase li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--ips-emerald);
}

/* ---- spec strip ---- */
.ips-spec {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	margin: 0;
	font-family: var(--ips-mono);
	font-size: 0.8125rem;
	color: var(--ips-muted);
}

.ips-spec span {
	white-space: nowrap;
}

.ips-spec b {
	font-weight: 600;
	color: var(--ips-text);
}

/* ---- feature grid ---- */
.ips-feat {
	padding: 1.25rem;
	height: 100%;
}

.ips-feat h3 {
	margin: 0 0 0.35rem;
	font-size: 0.9375rem;
	color: var(--ips-text);
}

.ips-feat p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ips-body);
}

/* ---- expectation notice (Apple activation delays) ----
   Amber rather than red: this is information to set expectations before
   purchase, not an error state. */
/* The three "before you buy" cards are an objection, its answer, and a
   sweetener. The left rule colour is what tells them apart at a glance:
   amber = something to know, emerald = you are covered, coral = a bonus. */
.ips-notice {
	padding: 1.35rem 1.6rem;
	border-left: 3px solid var(--ips-amber);
	height: 100%;
}

.ips-notice--good {
	border-left-color: var(--ips-emerald);
}

.ips-notice--bonus {
	border-left-color: var(--ips-coral);
	background: rgba(255, 112, 92, 0.06);
}

/* same equal-height treatment as the tier cards */
#before .fusion_builder_column_1_3 .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#before .fusion_builder_column_1_3 .fusion-text {
	display: flex;
	flex: 1 1 auto;
}

#before .fusion_builder_column_1_3 .fusion-text > .ips-notice {
	flex: 1 1 auto;
	width: 100%;
}

.ips-notice h3 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--ips-text);
}

.ips-notice p,
.ips-notice li {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ips-body);
}

.ips-notice ul {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
}

/* ---- bonus callout (SpooferPro key) ---- */
.ips-bonus {
	padding: 1.75rem;
	border-color: rgba(255, 112, 92, 0.45);
	background: rgba(255, 112, 92, 0.08);
}

.ips-bonus h3 {
	margin: 0.5rem 0 0.5rem;
	font-size: 1.25rem;
	color: var(--ips-text);
}

.ips-bonus p {
	margin: 0;
	color: var(--ips-body);
	line-height: 1.65;
}

/* Pro tier picks up the CTA colour so the paid option reads as the action */
.ips-tier--featured {
	border-color: rgba(255, 112, 92, 0.5);
	background: rgba(255, 112, 92, 0.07);
}

.ips-tier--featured .ips-tier-name {
	color: var(--ips-coral);
}

@media (max-width: 782px) {
	.ips-device {
		max-width: 260px;
		margin-bottom: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
   7. Accessibility floor
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.fusion-button:focus-visible {
	outline: 2px solid var(--ips-indigo-soft);
	outline-offset: 2px;
	border-radius: var(--ips-radius-chip);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Blobs are decorative; drop them where blur is expensive (mobile) */
@media (max-width: 640px) {
	body.ips-dark::before,
	body.ips-dark::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   8. "Three ways to install"
   The tiers answer which one; this answers what actually happens when you
   click it. Each column is a real screenshot of that install path.
   -------------------------------------------------------------------------- */
.ips-way {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ips-way .ips-device {
	max-width: 210px;
	margin: 0 auto 1.25rem;
}

.ips-way-kicker {
	font-family: var(--ips-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ips-indigo-light);
}

.ips-way--pro .ips-way-kicker {
	color: var(--ips-coral);
}

.ips-way h3 {
	margin: 0.45rem 0 0.5rem;
	font-size: 1.0625rem;
	color: var(--ips-text);
}

.ips-way p {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ips-body);
}

/* Uploading a private signing key is the biggest trust barrier BYOC has, so
   the deletion guarantee gets its own treatment rather than sitting in prose. */
.ips-way-assure {
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.9rem;
	border-radius: var(--ips-radius-chip);
	background: rgba(0, 187, 127, 0.10);
	border: 1px solid rgba(0, 187, 127, 0.28);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--ips-text);
}

/* The prerequisite line pins to the bottom so it lines up across columns.
   Needs an id in the selector: Avada's `.fusion-text p` is specificity 0,2,0
   and beats a bare class no matter which stylesheet loads last. */
#ways .ips-way-needs {
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px solid var(--ips-border);
	font-size: 0.8125rem;
	color: var(--ips-muted);
}

.ips-way-needs b {
	color: var(--ips-body);
	font-weight: 600;
}

/* equal heights, same approach as the tiers */
#ways .fusion_builder_column_1_3 .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#ways .fusion_builder_column_1_3 .fusion-text {
	flex: 0 0 auto;
}

#ways .fusion_builder_column_1_3 .fusion-text:first-of-type {
	display: flex;
	flex: 1 1 auto;
}

#ways .fusion_builder_column_1_3 .fusion-text:has(> .ips-way) {
	display: flex;
	flex: 1 1 auto;
}

#ways .fusion_builder_column_1_3 .fusion-text > .ips-way {
	flex: 1 1 auto;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Order-received activation panel
   --------------------------------------------------------------------------
   The one thing a buyer wants on this page is "where does my membership show
   up, and did the mail reach me". It sits above the order table because the
   order total is the least useful fact here.

   Selectors are prefixed with .woocommerce-order because Avada's
   `.fusion-text p` (0,2,0) outranks any bare class no matter the load order --
   the same trap that cost two rounds on the landing page.
   -------------------------------------------------------------------------- */
.woocommerce-order .ips-activation {
	background: var(--ips-glass-bg);
	border: 1px solid var(--ips-glass-border);
	border-left: 3px solid var(--ips-indigo);
	border-radius: 0 12px 12px 0;
	padding: 1.15rem 1.35rem;
	margin: 0 0 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.woocommerce-order .ips-activation p {
	margin: 0;
	color: var(--ips-muted);
	line-height: 1.6;
}

.woocommerce-order .ips-activation .ips-activation-head {
	color: var(--ips-text);
	font-weight: 600;
	font-size: 1.05rem;
}

.woocommerce-order .ips-activation .ips-activation-head--warn {
	color: var(--ips-coral, #ff705c);
}

/* The address is the fact being confirmed, so it gets the emphasis. Wrapped
   with break-word because long addresses otherwise push the panel wider than
   the phone it is being read on. */
.woocommerce-order .ips-activation .ips-activation-email {
	color: var(--ips-indigo-light);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.woocommerce-order .ips-activation a {
	color: var(--ips-indigo-light);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-order .ips-activation a:hover,
.woocommerce-order .ips-activation a:focus-visible {
	color: var(--ips-text);
}

/* Machine voice for the UDID -- it is a value to be compared character by
   character against what the device reports, not prose. Selectable, and set
   to wrap rather than overflow on narrow screens. */
.woocommerce-order .ips-activation .ips-activation-udid {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .6rem;
	margin-top: .15rem;
}

.woocommerce-order .ips-activation .ips-activation-udid span {
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ips-faint, #62748e);
}

.woocommerce-order .ips-activation .ips-activation-udid code {
	font-family: var(--ips-mono);
	font-size: .84rem;
	color: var(--ips-text);
	background: var(--ips-surface);
	border: 1px solid var(--ips-border);
	border-radius: 6px;
	padding: .2rem .5rem;
	overflow-wrap: anywhere;
	user-select: all;
}