/*
 * My Account (inc/account.php, woocommerce/myaccount/): white cards on the
 * site's gold, the theme's blue for links and current items, the shop's
 * indigo for primary buttons. Loaded on the account pages only, after
 * Betheme's and WooCommerce's stylesheets.
 *
 * Rules start with #Content (Betheme's content wrapper) so they win over
 * Betheme's and WooCommerce's class rules — `.woocommerce form .form-row
 * .input-text`, `.the_content_wrapper ul`, `dl > dt`, the buttons' slide
 * animation — without !important. The changelog dialog sits in the footer,
 * outside #Content: its rules start with .ma-dialog.
 *
 * Ratios measured (text 4.5:1, edges 3:1):
 *   ink #1f2227 on white 16:1, on gold #eac961 9.9:1
 *   muted #5b6270 on white 6.1:1, on light #f6f7f9 5.7:1
 *   #4b4636 on gold 5.9:1 (the lines under the head)
 *   blue as text #2d6383 on white 6.5:1, on soft blue #e8f1f6 5.7:1
 *   white on indigo #312951 13.4:1, on #4c506d 7.9:1, on blue #2d6383 6.5:1
 *   pills: green 5.7:1, gold 5.9:1, red 5.6:1
 *   a field's edge #848b96 on white 3.3:1
 */

#Content .ma-account,
#Content .ma-signed-out,
#Content .ma-received,
.ma-dialog {
	--ma-ink: #1f2227;
	--ma-body: #3a3f47;
	--ma-muted: #5b6270;
	--ma-on-gold: #4b4636;
	--ma-line: #e3e6ea;
	--ma-light: #f6f7f9;
	--ma-field: #848b96;
	--ma-blue: #3a7a9d;
	--ma-blue-text: #2d6383;
	--ma-blue-hover: #224c64;
	--ma-blue-soft: #e8f1f6;
	--ma-blue-soft-hover: #d6e6ef;
	--ma-gold: #eac961;
	--ma-gold-soft: #fbf3d6;
	--ma-indigo: #312951;
	--ma-indigo-hover: #4c506d;
	--ma-good: #1d6b3c;
	--ma-good-bg: #e3f3e8;
	--ma-wait: #7a5600;
	--ma-wait-bg: #fbf0cf;
	--ma-stop: #b02a37;
	--ma-stop-bg: #fbe9eb;
	--ma-radius: 8px;
	--ma-radius-lg: 14px;
	--ma-shadow: 0 1px 2px rgba(60, 48, 10, .08), 0 12px 30px rgba(60, 48, 10, .12);
	--ma-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	color: var(--ma-body);
	font-size: 15px;
	line-height: 1.55;
}

#Content .ma-account *,
#Content .ma-signed-out *,
#Content .ma-received *,
.ma-dialog * {
	box-sizing: border-box;
}

#Content .ma-account [hidden],
#Content .ma-signed-out [hidden],
#Content .ma-received [hidden] {
	display: none !important;
}

/* Headings keep Betheme's heading face (Patua One); sizes are ours. */
#Content .ma-account h2,
#Content .ma-account h3,
#Content .ma-signed-out h2,
#Content .ma-received h2,
#Content .ma-signed-out h3,
#Content .ma-received h3 {
	color: var(--ma-ink);
	letter-spacing: 0;
}

#Content .ma-account p,
#Content .ma-signed-out p,
#Content .ma-received p {
	margin: 0;
}

#Content .ma-account ul,
#Content .ma-account ol,
#Content .ma-signed-out ul,
#Content .ma-received ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#Content .ma-account li,
#Content .ma-signed-out li,
#Content .ma-received li {
	margin: 0;
}

#Content .ma-account a:not(.ma-btn),
#Content .ma-signed-out a:not(.ma-btn),
#Content .ma-received a:not(.ma-btn) {
	color: var(--ma-blue-text);
}

#Content .ma-account a:not(.ma-btn):hover,
#Content .ma-signed-out a:not(.ma-btn):hover,
#Content .ma-received a:not(.ma-btn):hover {
	color: var(--ma-blue-hover);
	text-decoration: underline;
}

#Content .ma-account a:focus-visible,
#Content .ma-account button:focus-visible,
#Content .ma-account summary:focus-visible,
#Content .ma-signed-out a:focus-visible,
#Content .ma-received a:focus-visible,
#Content .ma-signed-out button:focus-visible,
#Content .ma-received button:focus-visible,
.ma-dialog button:focus-visible {
	outline: 3px solid var(--ma-blue-text);
	outline-offset: 2px;
}

#Content .ma-account .ma-icon,
#Content .ma-signed-out .ma-icon,
#Content .ma-received .ma-icon,
.ma-dialog .ma-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* The frame: head, menu beside the page                               */
/* ------------------------------------------------------------------ */

#Content .ma-account {
	display: grid;
	gap: 22px;
	padding: 6px 0 56px;
}

#Content .ma-account__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
}

#Content .ma-account__title {
	margin: 0 0 2px;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.2;
}

#Content .ma-account__lead {
	color: var(--ma-on-gold);
	font-size: 16px;
}

#Content .ma-account__who {
	color: var(--ma-on-gold);
	font-size: 14px;
}

#Content .ma-account__who strong {
	color: var(--ma-ink);
	font-weight: 600;
	overflow-wrap: anywhere;
}

#Content .ma-account__who a:not(.ma-btn) {
	color: var(--ma-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#Content .ma-account__who a:not(.ma-btn):hover {
	color: #000;
}

#Content .ma-account__who a:focus-visible {
	outline-color: var(--ma-ink);
}

#Content .ma-account__body {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: start;
	gap: 28px;
}

#Content .ma-nav {
	position: sticky;
	top: 110px;
	float: none;
	width: auto;
	margin: 0;
	padding: 10px;
	border-radius: var(--ma-radius-lg);
	background: #fff;
	box-shadow: var(--ma-shadow);
}

#Content .ma-nav .ma-nav__list {
	display: grid;
	gap: 2px;
}

#Content .ma-nav li {
	margin: 0;
	padding: 0;
	border: 0;
}

#Content .ma-nav a,
#Content .ma-nav a:not(.ma-btn) {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 11px 14px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ma-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	/* No colour transition: the current item's colours swap at the phone
	   breakpoint, and a fade there showed half-way in full-page captures. */
	transition: none;
}

/* Betheme's own icon font on these links, and the child theme's
   Subscriptions icon: the menu has its own icons. */
#Content .ma-nav a::before,
#Content .ma-nav a::after {
	content: none;
	display: none;
}

#Content .ma-nav a .ma-icon {
	color: var(--ma-muted);
}

#Content .ma-nav a:hover {
	background: var(--ma-light);
	color: var(--ma-ink);
	text-decoration: none;
}

#Content .ma-nav a[aria-current="page"] {
	background: var(--ma-blue-soft);
	color: var(--ma-blue-text);
	font-weight: 600;
}

#Content .ma-nav a[aria-current="page"] .ma-icon {
	color: var(--ma-blue-text);
}

#Content .ma-nav .ma-nav__out {
	margin: 8px 4px 0;
	padding-top: 8px;
	border-top: 1px solid var(--ma-line);
}

#Content .ma-nav .ma-nav__out a {
	color: var(--ma-muted);
}

#Content .ma-account__content,
#Content .woocommerce-account .ma-account__content {
	display: grid;
	gap: 18px;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#Content .ma-account__content > .woocommerce-notices-wrapper:empty {
	display: none;
}

#Content .ma-account__content > .woocommerce-notices-wrapper > *,
#Content .ma-account__content > .alert,
#Content .ma-account__content > .woocommerce-message,
#Content .ma-account__content > .woocommerce-info,
#Content .ma-account__content > .woocommerce-error {
	margin: 0;
	border-radius: var(--ma-radius-lg);
}

@media (max-width: 991px) {
	#Content .ma-account__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	#Content .ma-nav {
		position: static;
		padding: 2px 2px 8px;
		background: transparent;
		box-shadow: none;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#Content .ma-nav .ma-nav__list {
		display: flex;
		gap: 8px;
	}

	#Content .ma-nav li {
		flex: 0 0 auto;
	}

	#Content .ma-nav a,
	#Content .ma-nav a:not(.ma-btn) {
		min-height: 44px;
		padding: 8px 16px;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(60, 48, 10, .12);
		white-space: nowrap;
	}

	#Content .ma-nav a[aria-current="page"] {
		background: var(--ma-blue-text);
		color: #fff;
	}

	#Content .ma-nav a[aria-current="page"] .ma-icon {
		color: #fff;
	}

	#Content .ma-nav .ma-nav__out {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Shared pieces: cards, sections, pills, buttons, facts, keys         */
/* ------------------------------------------------------------------ */

#Content .ma-card {
	padding: 22px 24px;
	border-radius: var(--ma-radius-lg);
	background: #fff;
	box-shadow: var(--ma-shadow);
}

#Content .ma-card--soft {
	background: var(--ma-gold-soft);
}

#Content .ma-card__title {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.3;
}

#Content .ma-card__lead,
#Content .ma-muted {
	color: var(--ma-muted);
}

#Content .ma-section {
	display: grid;
	gap: 14px;
	min-width: 0;
}

#Content .ma-section__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
}

#Content .ma-section__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.3;
}

#Content .ma-section__note {
	color: var(--ma-on-gold);
	font-size: 14px;
}

#Content .ma-card .ma-section__note {
	color: var(--ma-muted);
}

#Content .ma-account-note {
	color: var(--ma-on-gold);
	font-size: 14px;
}

#Content .ma-account-note a:not(.ma-btn) {
	color: var(--ma-ink);
	font-weight: 600;
	text-decoration: underline;
}

#Content p.ma-eyebrow {
	margin: 0 0 4px;
	color: var(--ma-blue-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ma-pill,
#Content .ma-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.ma-pill--good {
	background: #e3f3e8;
	color: #1d6b3c;
}

.ma-pill--wait {
	background: #fbf0cf;
	color: #7a5600;
}

.ma-pill--stop {
	background: #fbe9eb;
	color: #b02a37;
}

.ma-pill--info {
	background: #e8f1f6;
	color: #2d6383;
}

/* Buttons. Betheme draws a sliding layer in ::before on every button and
   .button on hover; ours have none. */
#Content .ma-btn,
.ma-dialog .ma-btn {
	position: relative;
	display: inline-flex;
	float: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--ma-radius);
	background: var(--ma-blue-soft);
	color: var(--ma-blue-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	overflow: visible;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#Content .ma-btn::before,
#Content .ma-btn::after,
.ma-dialog .ma-btn::before,
.ma-dialog .ma-btn::after {
	content: none;
	display: none;
}

#Content .ma-btn:hover,
.ma-dialog .ma-btn:hover {
	background: var(--ma-blue-soft-hover);
	color: var(--ma-blue-hover);
	text-decoration: none;
}

#Content .ma-btn--primary,
.ma-dialog .ma-btn--primary {
	border-color: var(--ma-indigo);
	background: var(--ma-indigo);
	color: #fff;
	box-shadow: 0 4px 10px rgba(49, 41, 81, .22);
}

#Content .ma-btn--primary:hover,
.ma-dialog .ma-btn--primary:hover {
	border-color: var(--ma-indigo-hover);
	background: var(--ma-indigo-hover);
	color: #fff;
}

#Content .ma-btn--outline {
	border-color: var(--ma-field);
	background: #fff;
	color: var(--ma-ink);
}

#Content .ma-btn--outline:hover {
	border-color: var(--ma-blue-text);
	background: #fff;
	color: var(--ma-blue-text);
}

#Content .ma-btn--danger {
	border-color: var(--ma-stop);
	background: var(--ma-stop);
	color: #fff;
}

#Content .ma-btn--danger:hover {
	border-color: #8f1f2b;
	background: #8f1f2b;
	color: #fff;
}

#Content .ma-btn--block {
	display: flex;
	width: 100%;
}

#Content .ma-link,
#Content a.ma-link:not(.ma-btn) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ma-blue-text);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

#Content a.ma-link:not(.ma-btn):hover {
	color: var(--ma-blue-hover);
	text-decoration: underline;
}

#Content .ma-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

#Content .ma-account .ma-back-line a.ma-back {
	color: var(--ma-ink);
}

/* Facts: label over value, as many across as fit. */
#Content .ma-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px 20px;
	margin: 18px 0;
	padding: 14px 0;
	border-top: 1px solid var(--ma-line);
	border-bottom: 1px solid var(--ma-line);
}

#Content .ma-facts > div {
	min-width: 0;
}

#Content .ma-facts dt,
#Content .ma-facts dd {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

#Content .ma-facts dt {
	color: var(--ma-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#Content .ma-facts dd {
	margin-top: 2px;
	color: var(--ma-ink);
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

#Content .ma-facts dd::after {
	content: none;
}

/* A licence key with Copy. */
#Content p.ma-key__label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	color: var(--ma-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#Content .ma-key__label .ma-icon {
	color: var(--ma-blue-text);
}

#Content .ma-key__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#Content .ma-key__value {
	display: flex;
	flex: 1 1 260px;
	align-items: center;
	min-width: 0;
	min-height: 46px;
	margin: 0;
	padding: 10px 14px;
	border: 1px dashed var(--ma-field);
	border-radius: var(--ma-radius);
	background: var(--ma-light);
	color: var(--ma-ink);
	font-family: var(--ma-mono) !important; /* Betheme pins code to Consolas with !important */
	font-size: 15px;
	letter-spacing: .03em;
	white-space: normal;
	overflow-wrap: anywhere;
	user-select: all;
}

#Content .ma-key__copy {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	min-height: 46px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--ma-radius);
	background: var(--ma-blue-soft);
	color: var(--ma-blue-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

#Content .ma-key__copy::before,
#Content .ma-key__copy::after {
	content: none;
	display: none;
}

#Content .ma-key__copy:hover {
	background: var(--ma-blue-soft-hover);
	color: var(--ma-blue-hover);
}

#Content .ma-key__copy-label,
#Content .ma-key__copied {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#Content .ma-key__copied,
#Content .ma-key__copy.is-copied .ma-key__copy-label {
	display: none;
}

#Content .ma-key__copy.is-copied {
	background: var(--ma-good-bg);
	color: var(--ma-good);
}

#Content .ma-key__copy.is-copied .ma-key__copied {
	display: inline-flex;
}

/* Product pictures. */
#Content .ma-thumb {
	display: block;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 12px;
	background: var(--ma-light);
	object-fit: cover;
}

#Content .ma-thumb--none {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ma-blue-soft);
	color: var(--ma-blue-text);
}

/* Nothing yet. */
#Content .ma-empty {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

#Content .ma-empty p {
	margin: 0 0 12px;
	color: var(--ma-muted);
}

#Content .ma-empty .ma-empty__title {
	margin-bottom: 4px;
	color: var(--ma-ink);
	font-size: 17px;
	font-weight: 600;
}

#Content .ma-empty__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ma-blue-soft);
	color: var(--ma-blue-text);
}

#Content .ma-empty--slim {
	padding-top: 16px;
	padding-bottom: 16px;
}

#Content .ma-empty--slim p {
	margin: 0;
}

/* Notes inside a card. */
#Content .ma-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--ma-wait-bg);
	color: var(--ma-ink);
}

/* ------------------------------------------------------------------ */
/* The dashboard: licences, recent orders, help                        */
/* ------------------------------------------------------------------ */

#Content .ma-licences {
	display: grid;
	gap: 16px;
}

#Content .ma-licence__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#Content .ma-licence__who {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

#Content .ma-licence__names {
	min-width: 0;
}

#Content .ma-licence__name {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

#Content p.ma-licence__sub {
	margin-top: 2px;
	color: var(--ma-muted);
	font-size: 14px;
}

#Content p.ma-licence__wait {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--ma-light);
	color: var(--ma-body);
}

#Content .ma-licence__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ma-line);
}

#Content .ma-licence.is-ended .ma-key__value {
	color: var(--ma-muted);
}

/* A release: version, What's new, Download. */
#Content .ma-release {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--ma-light);
}

#Content .ma-release__version {
	color: var(--ma-body);
	font-size: 15px;
}

#Content .ma-release__version strong {
	color: var(--ma-ink);
}

#Content .ma-release__text {
	flex: 1 1 260px;
	min-width: 0;
}

/* Why Download can't be used yet (pending, a renewal unpaid, expired,
   blocked): gold-brown 6.2:1 / red 6.1:1 on the row's grey, more on white. */
#Content p.ma-release__hint {
	margin-top: 4px;
	color: var(--ma-wait);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

#Content p.ma-release__hint--stop {
	color: var(--ma-stop);
}

#Content .ma-release__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

#Content .ma-release .ma-btn--soft {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--ma-blue-soft-hover);
}

#Content .ma-release .ma-btn--soft:hover {
	background: var(--ma-blue-soft);
}

/* Ended licences, folded. */
#Content .ma-ended {
	margin-top: 4px;
}

#Content .ma-ended > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	color: var(--ma-ink);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

#Content .ma-ended > summary::-webkit-details-marker {
	display: none;
}

#Content .ma-ended > summary::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

#Content .ma-ended[open] > summary::before {
	transform: rotate(45deg);
}

/* Recent orders and help, side by side. */
#Content .ma-more {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}

#Content .ma-more > .ma-card {
	flex: 1 1 260px;
	min-width: 0;
}

#Content .ma-more > .ma-recent {
	flex: 1.6 1 340px;
}

#Content .ma-recent .ma-section__row {
	margin-bottom: 6px;
}

#Content .ma-recent__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 12px 0;
	border-top: 1px solid var(--ma-line);
	color: var(--ma-muted);
	font-size: 14.5px;
}

#Content .ma-recent__what {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	min-width: 0;
}

#Content .ma-recent__what a:not(.ma-btn) {
	color: var(--ma-ink);
	font-size: 15.5px;
	font-weight: 700;
}

#Content .ma-recent__when {
	white-space: nowrap;
}

#Content .ma-recent__when strong {
	color: var(--ma-ink);
}

#Content .ma-help {
	position: relative;
}

#Content .ma-help p {
	margin-bottom: 10px;
	color: var(--ma-body);
}

#Content .ma-help__icon {
	display: inline-flex;
	margin-bottom: 6px;
	color: var(--ma-wait);
}

/* ------------------------------------------------------------------ */
/* Orders and an order                                                 */
/* ------------------------------------------------------------------ */

#Content .ma-order-rows {
	padding: 0;
	overflow: hidden;
}

#Content .ma-order-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	padding: 18px 22px;
}

#Content .ma-order-row + .ma-order-row {
	border-top: 1px solid var(--ma-line);
}

#Content .ma-order-row__what {
	flex: 1 1 220px;
	min-width: 0;
}

#Content .ma-order-row__number a:not(.ma-btn) {
	color: var(--ma-ink);
	font-size: 16.5px;
	font-weight: 700;
}

#Content p.ma-order-row__items {
	margin-top: 2px;
	color: var(--ma-muted);
	font-size: 14px;
}

#Content .ma-order-row__date {
	color: var(--ma-muted);
	font-size: 14.5px;
	white-space: nowrap;
}

#Content .ma-order-row__total {
	min-width: 80px;
	color: var(--ma-ink);
	font-size: 16px;
	font-weight: 700;
	text-align: right;
}

#Content .ma-order-row__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#Content .ma-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

#Content .ma-back-line {
	margin: 0;
}

#Content .ma-order-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ma-line);
}

#Content .ma-order-card__head p {
	color: var(--ma-muted);
}

#Content .ma-order-card__head strong {
	color: var(--ma-ink);
}

#Content .ma-order-card__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 18px 0 12px;
}

#Content .ma-order-card__what {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

#Content .ma-order-card__what .ma-thumb {
	width: 44px;
	height: 44px;
	border-radius: 10px;
}

#Content .ma-order-card__name,
#Content .ma-order-card__price {
	color: var(--ma-ink);
	font-size: 16.5px;
	font-weight: 700;
}

#Content .ma-order-card__name span {
	display: block;
	color: var(--ma-muted);
	font-size: 14px;
	font-weight: 400;
}

#Content .ma-order-licence {
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--ma-light);
}

#Content .ma-order-licence__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 4px;
}

#Content .ma-order-licence__title {
	margin: 0;
	font-size: 17px;
}

#Content .ma-order-licence .ma-facts {
	margin: 10px 0 16px;
	padding: 0;
	border: 0;
}

#Content .ma-order-licence .ma-key__value,
#Content .ma-order-licence .ma-release {
	background: #fff;
}

#Content p.ma-order-licence__wait {
	margin-top: 8px;
	color: var(--ma-body);
}

#Content p.ma-order-licence__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin-top: 14px;
	color: var(--ma-muted);
	font-size: 14px;
}

#Content .ma-totals {
	display: grid;
	gap: 6px;
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ma-line);
}

#Content .ma-totals > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

#Content .ma-totals dt,
#Content .ma-totals dd {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ma-body);
	font-weight: 400;
}

#Content .ma-totals dd {
	text-align: right;
}

#Content .ma-totals dd::after {
	content: none;
}

#Content .ma-totals .ma-totals__total dt,
#Content .ma-totals .ma-totals__total dd {
	color: var(--ma-ink);
	font-size: 18px;
	font-weight: 700;
}

#Content p.ma-order-card__pay {
	margin-top: 16px;
}

#Content .ma-address {
	margin: 0;
	color: var(--ma-body);
	font-style: normal;
	line-height: 1.7;
}

#Content .ma-order-notes li + li {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ma-line);
}

#Content p.ma-order-notes__when {
	margin-bottom: 4px;
	color: var(--ma-muted);
	font-size: 13px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Subscriptions                                                       */
/* ------------------------------------------------------------------ */

#Content .ma-subs {
	display: grid;
	gap: 16px;
}

#Content .ma-sub__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

#Content .ma-sub__plans {
	margin-top: 16px;
}

#Content .ma-sub__plans summary {
	display: inline-block;
	color: var(--ma-blue-text);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

#Content .ma-sub__plans p {
	margin-top: 10px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--ma-light);
}

#Content .ma-sub__confirm {
	margin-top: 16px;
	padding: 18px 20px;
	border: 1px solid var(--ma-stop);
	border-radius: 12px;
	background: var(--ma-stop-bg);
}

#Content .ma-sub__confirm h3 {
	margin: 0 0 6px;
	font-size: 18px;
}

#Content .ma-sub__confirm p {
	margin-bottom: 14px;
	color: var(--ma-ink);
}

#Content .ma-sub__confirm-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#Content .ma-sub__orders:empty {
	display: none;
}

#Content .ma-sub-orders {
	margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Forms: account details, billing address, sign in                    */
/* ------------------------------------------------------------------ */

#Content .ma-address-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
	max-width: 680px;
}

#Content .ma-address-form,
#Content .ma-account-form {
	max-width: 760px;
}

#Content .ma-account-form {
	display: grid;
	gap: 16px;
}

#Content .ma-account-form fieldset.ma-card {
	min-width: 0;
	margin: 0;
	border: 0;
}

/* Each card's title is a heading inside the fieldset's legend, so it
   takes the theme's heading face like every other card title. */
#Content .ma-account-form legend.ma-legend {
	float: left;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

#Content .ma-account-form legend.ma-legend .ma-card__title {
	margin: 0;
}

#Content .ma-account-form legend + * {
	clear: both;
}

#Content .ma-account-form .ma-card__lead {
	margin: -6px 0 14px;
	font-size: 14.5px;
}

#Content .ma-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

#Content .ma-fields > .form-row,
#Content .ma-form .form-row {
	float: none;
	width: auto;
	margin: 0 0 14px;
	padding: 0;
}

#Content .ma-fields > .form-row {
	grid-column: 1 / -1;
}

#Content .ma-fields > .form-row-first {
	grid-column: 1;
}

#Content .ma-fields > .form-row-last {
	grid-column: 2;
}

#Content .ma-form label {
	display: block;
	margin: 0 0 6px;
	color: var(--ma-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

#Content .ma-form .required {
	color: var(--ma-stop);
	text-decoration: none;
	border: 0;
}

#Content .ma-form .form-row .input-text,
#Content .ma-form .form-row input[type="text"],
#Content .ma-form .form-row input[type="email"],
#Content .ma-form .form-row input[type="password"],
#Content .ma-form .form-row input[type="tel"],
#Content .ma-form .form-row select,
#Content .ma-form .form-row textarea {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--ma-field);
	border-radius: var(--ma-radius);
	background: #fff;
	color: var(--ma-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
}

#Content .ma-form .form-row .input-text:focus,
#Content .ma-form .form-row input:focus,
#Content .ma-form .form-row select:focus,
#Content .ma-form .form-row textarea:focus {
	border-color: var(--ma-blue-text);
	outline: 3px solid rgba(58, 122, 157, .3);
	outline-offset: 0;
	background: #fff;
	color: var(--ma-ink);
}

/* WooCommerce's show-password eye, inside the field. */
#Content .ma-form .password-input {
	position: relative;
	display: block;
}

#Content .ma-form .password-input .input-text {
	padding-right: 48px;
}

#Content .ma-form .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ma-radius);
	background: transparent;
	color: var(--ma-blue-text);
	box-shadow: none;
	transform: none; /* WooCommerce centres it with top: 50% and this */
}

/* WooCommerce draws the eye in ::before; Betheme paints every button's
   ::before with its hover colour (a grey square behind the eye). */
#Content .ma-form .show-password-input::before {
	position: static;
	background-color: transparent;
	opacity: .8;
}

#Content .ma-form .show-password-input:hover::before {
	opacity: 1;
}

/* Country and state (selectWoo). */
#Content .ma-form .select2-container .select2-selection--single {
	height: 46px;
	border: 1px solid var(--ma-field);
	border-radius: var(--ma-radius);
	background: #fff;
}

#Content .ma-form .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	color: var(--ma-ink);
	font-size: 16px;
	line-height: 44px;
}

#Content .ma-form .select2-container .select2-selection--single .select2-selection__arrow {
	top: 1px;
	right: 6px;
	height: 44px;
}

#Content .ma-form .select2-container--focus .select2-selection--single,
#Content .ma-form .select2-container--open .select2-selection--single {
	border-color: var(--ma-blue-text);
	outline: 3px solid rgba(58, 122, 157, .3);
}

#Content .ma-help-text {
	display: block;
	margin-top: 6px;
	color: var(--ma-muted);
	font-size: 13.5px;
	font-style: normal;
}

#Content .ma-form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	accent-color: var(--ma-blue-text);
}

#Content .ma-form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	color: var(--ma-body);
	font-weight: 400;
	cursor: pointer;
}

#Content .ma-form__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 6px 0 0;
}

#Content .ma-account-form .ma-form__buttons {
	margin: 0;
}

/* Cloudflare Turnstile's widget (and its trailing <br>) inside our forms. */
#Content .ma-form .cf-turnstile,
#Content .ma-form div[class*="turnstile"] {
	margin: 0 0 14px;
}

#Content .ma-form .cf-turnstile + br,
#Content .ma-form div[class*="turnstile"] + br {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Signed out: sign in, register, lost password                        */
/* ------------------------------------------------------------------ */

#Content .ma-signed-out {
	display: grid;
	gap: 22px;
	max-width: 1060px;
	margin: 0 auto;
	padding: 6px 0 56px;
}

#Content .ma-signin {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: stretch;
	gap: 22px;
}

#Content .ma-signin__card,
#Content .ma-signed-out__card {
	padding: 30px 32px;
}

/* WooCommerce's sign-in and register forms arrive as a centred flex box
   with a border (Betheme, WooCommerce): ours are plain blocks in a card. */
#Content .ma-signed-out .ma-form {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
}

/* Betheme centres every line of these forms that isn't a field, and the
   lost-password form's labels. */
#Content .ma-signed-out .ma-form p,
#Content .ma-signed-out .ma-form label {
	text-align: left;
}

#Content .ma-signed-out__card {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
}

/* Above Betheme's ".woocommerce #customer_login h2" (25px, 15px on a
   phone): the sign-in block keeps WooCommerce's #customer_login id. */
#Content .ma-signed-out h2.ma-signin__title {
	margin: 0 0 6px;
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.2;
}

#Content p.ma-signin__lead {
	margin: 0 0 20px;
	color: var(--ma-muted);
	font-size: 15.5px;
}

#Content .ma-label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
	margin-bottom: 6px;
}

#Content .ma-label-row label {
	margin: 0;
}

#Content .ma-label-row a:not(.ma-btn) {
	font-size: 14px;
	font-weight: 600;
}

#Content .ma-remember {
	margin-bottom: 16px;
}

/* What the account holds: the site's blue, gold marks (the header's
   colours). White on #2d6383 6.5:1. */
#Content .ma-signin__aside {
	padding: 30px 28px;
	border-radius: var(--ma-radius-lg);
	background: var(--ma-blue-text);
	color: #fff;
	box-shadow: var(--ma-shadow);
}

#Content .ma-signed-out h2.ma-signin__aside-title {
	margin: 0 0 18px;
	color: #fff;
	font-size: 22px;
}

#Content .ma-perks {
	display: grid;
	gap: 18px;
}

#Content .ma-perks li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

#Content .ma-perks__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--ma-gold);
	color: var(--ma-ink);
}

#Content .ma-signed-out .ma-perks h3 {
	margin: 0 0 2px;
	color: #fff;
	font-size: 17px;
	line-height: 1.3;
}

#Content .ma-perks p {
	color: #fff;
	font-size: 14.5px;
	opacity: .92;
}

#Content .ma-register {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: 8px 32px;
}

#Content .ma-register .ma-card__title {
	margin-bottom: 4px;
}

#Content .ma-register .form-row:last-of-type {
	margin-bottom: 0;
}

#Content .ma-register .ma-help-text {
	margin: 0 0 14px;
}

#Content p.ma-signed-out__back {
	margin-top: 18px;
}

#Content .ma-done-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--ma-good-bg);
	color: var(--ma-good);
}

/* ------------------------------------------------------------------ */
/* The changelog dialog (in the footer)                                */
/* ------------------------------------------------------------------ */

.ma-dialog {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--ma-radius-lg);
	background: #fff;
	box-shadow: 0 24px 60px rgba(31, 34, 39, .35);
}

.ma-dialog::backdrop {
	background: rgba(31, 34, 39, .55);
}

/* Closed, a dialog is hidden by the browser; said here too, for any
   engine that doesn't. */
.ma-dialog:not([open]) {
	display: none;
}

.ma-dialog__box {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 32px);
}

.ma-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 14px 24px;
	border-bottom: 1px solid var(--ma-line);
}

.ma-dialog .ma-dialog__eyebrow {
	margin: 0 0 2px;
	color: var(--ma-blue-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ma-dialog .ma-dialog__title {
	margin: 0;
	color: var(--ma-ink);
	font-size: 21px;
	line-height: 1.3;
}

.ma-dialog .ma-dialog__close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ma-radius);
	background: transparent;
	color: var(--ma-ink);
	box-shadow: none;
	cursor: pointer;
}

.ma-dialog .ma-dialog__close::before,
.ma-dialog .ma-dialog__close::after {
	content: none;
	display: none;
}

.ma-dialog .ma-dialog__close:hover {
	background: var(--ma-light);
}

.ma-dialog__body {
	padding: 18px 24px 24px;
	overflow-y: auto;
}

.ma-dialog .ma-changelog__entry + .ma-changelog__entry {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ma-line);
}

.ma-dialog .ma-changelog__version {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	margin: 0 0 10px;
	color: var(--ma-ink);
	font-size: 17px;
	line-height: 1.4;
}

.ma-dialog .ma-changelog__date {
	color: var(--ma-muted);
	font-family: inherit;
	font-size: 14px;
}

.ma-dialog .ma-changelog__lines {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-dialog .ma-changelog__lines li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--ma-body);
	line-height: 1.55;
}

.ma-dialog .ma-changelog__lines .ma-pill {
	flex: 0 0 auto;
	margin-top: 1px;
	padding: 1px 9px;
	font-size: 12px;
}

/* ------------------------------------------------------------------ */
/* A licence's activations (woocommerce/myaccount/activations.php)     */
/* ------------------------------------------------------------------ */

#Content .ma-act__licence .ma-key {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ma-line);
}

#Content .ma-act__what {
	display: flex;
	align-items: center;
	gap: 12px;
}

#Content .ma-act__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--ma-blue-soft);
	color: var(--ma-blue-text);
}

#Content p.ma-act__name {
	min-width: 0;
	color: var(--ma-ink);
	font-size: 16px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

#Content .ma-act__problem p + p {
	margin-top: 10px;
}

/* ------------------------------------------------------------------ */
/* The order received page (woocommerce/checkout/thankyou.php)         */
/* ------------------------------------------------------------------ */

#Content .ma-received {
	display: grid;
	gap: 22px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 6px 0 56px;
	text-align: left;
}

/* Where the order stands: an icon in its colour, the words, the facts. */
#Content .ma-result {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 28px 30px;
}

#Content .ma-result__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--ma-good-bg);
	color: var(--ma-good);
}

#Content .ma-result--issuing .ma-result__icon,
#Content .ma-result--awaiting .ma-result__icon,
#Content .ma-result--delayed .ma-result__icon {
	background: var(--ma-wait-bg);
	color: var(--ma-wait);
}

#Content .ma-result--failed .ma-result__icon,
#Content .ma-result--closed .ma-result__icon {
	background: var(--ma-stop-bg);
	color: var(--ma-stop);
}

#Content .ma-result__text {
	flex: 1 1 auto;
	min-width: 0;
}

#Content .ma-received h2.ma-result__title {
	margin: 4px 0 6px;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.25;
}

#Content p.ma-result__lead {
	max-width: 70ch;
	color: var(--ma-body);
	font-size: 16px;
	line-height: 1.6;
}

#Content p.ma-result__small {
	margin-top: 10px;
	color: var(--ma-muted);
	font-size: 14.5px;
}

#Content .ma-result__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

#Content .ma-facts--overview {
	margin: 20px 0 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* WooCommerce's "Thank you…" line when the order can't be shown: ink, no
   Betheme icon (its theme blue on the gold read at 2.9:1). */
#Content .ma-received .woocommerce-thankyou-order-received {
	margin: 14px 0 0;
	color: var(--ma-ink);
	font-size: 17px;
	text-align: left;
}

#Content .ma-received .woocommerce-thankyou-order-received::before {
	content: none;
	display: none;
}

/* Paid, the licence being made: a turning ring (still where motion is
   reduced: it says "working"). */
#Content .ma-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid rgba(122, 86, 0, .25);
	border-top-color: var(--ma-wait);
	border-radius: 50%;
	animation: ma-spin 1s linear infinite;
}

@keyframes ma-spin {
	to {
		transform: rotate(360deg);
	}
}

#Content .ma-received__instructions {
	color: var(--ma-body);
}

#Content .ma-received__instructions h2,
#Content .ma-received__instructions h3 {
	margin: 0 0 8px;
	font-size: 19px;
}

#Content .ma-received__instructions p + p,
#Content .ma-received__instructions ul {
	margin-top: 10px;
}

/* Order details beside the account and the billing address. */
#Content .ma-more > .ma-received__details {
	flex: 1.6 1 420px;
}

#Content .ma-received__side {
	display: grid;
	flex: 1 1 280px;
	gap: 16px;
	min-width: 0;
}

#Content .ma-received__side .ma-card p {
	margin-bottom: 10px;
	color: var(--ma-body);
}

#Content .ma-lines__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ma-line);
}

#Content .ma-lines__what {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

#Content .ma-lines__what .ma-thumb {
	width: 44px;
	height: 44px;
	border-radius: 10px;
}

#Content p.ma-lines__name,
#Content p.ma-lines__price {
	color: var(--ma-ink);
	font-size: 16px;
	font-weight: 700;
}

#Content .ma-lines__name span {
	display: block;
	color: var(--ma-muted);
	font-size: 14px;
	font-weight: 400;
}

#Content .ma-purchase-note {
	margin-top: 14px;
	padding: 12px 14px;
	border-left: 3px solid var(--ma-blue);
	border-radius: 0 10px 10px 0;
	background: var(--ma-blue-soft);
	color: var(--ma-ink);
	font-size: 14.5px;
	line-height: 1.6;
}

#Content .ma-purchase-note p + p {
	margin-top: 8px;
}

#Content .ma-received .ma-totals {
	margin-top: 16px;
}

#Content p.ma-recurring {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--ma-light);
	color: var(--ma-body);
	font-size: 14.5px;
	line-height: 1.6;
}

#Content p.ma-recurring strong {
	color: var(--ma-ink);
}

@media (max-width: 600px) {
	#Content .ma-result {
		flex-direction: column;
		gap: 12px;
		padding: 20px 16px;
	}

	#Content .ma-result__icon {
		width: 52px;
		height: 52px;
	}

	#Content .ma-result__buttons .ma-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#Content .ma-spinner {
		animation-duration: 2.4s;
	}
}

/* ------------------------------------------------------------------ */
/* Phones                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
	#Content .ma-signin,
	#Content .ma-register {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	#Content .ma-card,
	#Content .ma-signin__card,
	#Content .ma-signed-out__card,
	#Content .ma-signin__aside {
		padding: 18px 16px;
	}

	#Content .ma-order-rows {
		padding: 0;
	}

	#Content .ma-order-row {
		padding: 16px;
	}

	#Content .ma-order-row__total {
		min-width: 0;
		text-align: left;
	}

	#Content .ma-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	#Content .ma-fields > .form-row-first,
	#Content .ma-fields > .form-row-last {
		grid-column: 1;
	}

	#Content .ma-key__copy {
		flex: 1 1 100%;
		justify-content: center;
	}

	#Content .ma-release__actions,
	#Content .ma-release__actions .ma-btn {
		width: 100%;
	}

	#Content .ma-thumb {
		width: 48px;
		height: 48px;
	}

	#Content .ma-empty {
		flex-direction: column;
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#Content .ma-btn,
	#Content .ma-nav a,
	#Content .ma-key__copy,
	#Content .ma-ended > summary::before {
		transition: none;
	}
}