/*
 * Motif commerce front end: pricing cards, checkout buttons, account page, affiliate dashboard.
 * Brand tokens from assets/core/tokens.css (CONTRACT §2); every value has a fallback so the file also works alone.
 * Buttons are text only; controls radius 8, cards 13, tags 5. No fonts bundled.
 */

.motif-pricing,
.motif-account,
.motif-affiliate {
	--_ink: var(--motif-ink, #0b0c0e);
	--_soft: var(--motif-ink-soft, #4a4d52);
	--_quiet: var(--motif-ink-quiet, #62666d);
	--_line: var(--motif-line, #e3e6df);
	--_mist: var(--motif-mist, #f3f5f0);
	--_paper: var(--motif-paper, #ffffff);
	--_forest: var(--motif-forest, #0e3b33);
	--_forest-hover: var(--motif-forest-hover, #0a2e28);
	--_lime: var(--motif-lime, #d4f55b);
	--_lime-soft: var(--motif-lime-soft, #edfbba);
	--_ease: var(--motif-transition, 200ms cubic-bezier(0.2, 0.7, 0.2, 1));
	--_body: var(--motif-font-body, inherit);
	--_display: var(--motif-font-display, inherit);
	--_mono: var(--motif-font-mono, inherit);
	color: var(--_ink);
	font-family: var(--_body);
	line-height: var(--motif-line-height, 1.6);
}

.motif-pricing *,
.motif-account *,
.motif-affiliate * {
	box-sizing: border-box;
}

/* Buttons ---------------------------------------------------------------- */

.motif-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 21px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: var(--_body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--_ease), border-color var(--_ease), color var(--_ease);
}

.motif-btn:focus-visible {
	outline: 2px solid var(--_forest);
	outline-offset: 2px;
}

.motif-btn--primary {
	background: var(--_forest);
	color: #fff;
}

.motif-btn--primary:hover {
	background: var(--_forest-hover);
	color: #fff;
}

.motif-btn--secondary {
	border-color: var(--_line);
	background: var(--_paper);
	color: var(--_ink);
}

.motif-btn--secondary:hover {
	border-color: var(--_quiet);
	color: var(--_ink);
}

.motif-btn--tertiary {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--_forest);
	font-weight: 500;
}

.motif-btn--tertiary:hover {
	text-decoration: underline;
}

.motif-btn--small {
	min-height: 34px;
	padding: 0 13px;
	font-size: 14px;
}

.motif-btn[disabled],
.motif-btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.motif-link {
	color: var(--_forest);
	text-decoration: none;
}

.motif-link:hover {
	text-decoration: underline;
}

/* Fields ----------------------------------------------------------------- */

.motif-field__label {
	display: block;
	margin: 0 0 5px;
	color: var(--_quiet);
	font-family: var(--_mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--motif-label-tracking, 0.08em);
	text-transform: uppercase;
}

.motif-select,
.motif-input {
	width: 100%;
	min-height: 44px;
	padding: 0 13px;
	border: 1px solid var(--_line);
	border-radius: 8px;
	background: var(--_paper);
	color: var(--_ink);
	font-family: var(--_body);
	font-size: 15px;
}

.motif-select:focus,
.motif-input:focus {
	border-color: var(--_forest);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--_forest);
}

.motif-tag {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 5px;
	background: var(--_mist);
	color: var(--_soft);
	font-family: var(--_mono);
	font-size: 11px;
	letter-spacing: var(--motif-label-tracking, 0.08em);
	text-transform: uppercase;
	vertical-align: middle;
}

.motif-notice {
	margin: 0 0 21px;
	padding: 13px 21px;
	border-radius: 13px;
	background: var(--_mist);
	color: var(--_ink);
}

.motif-notice p {
	margin: 0;
}

.motif-notice--success {
	background: var(--_lime-soft);
}

.motif-notice--error {
	background: #ffe3d1;
}

/* Checkout form ---------------------------------------------------------- */

.motif-checkout-form {
	display: grid;
	gap: 8px;
	margin: 0;
}

.motif-checkout-form .motif-btn {
	width: 100%;
}

.motif-checkout-form--inline {
	display: inline-grid;
}

.motif-checkout-form--inline .motif-btn {
	width: auto;
}

.motif-checkout-form__error {
	margin: 0;
	color: #9b2c1b;
	font-size: 14px;
}

/* Pricing ---------------------------------------------------------------- */

.motif-pricing__title {
	margin: 0 0 34px;
	font-family: var(--_display);
	font-weight: 600;
	text-align: center;
}

.motif-pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 21px;
	align-items: stretch;
}

.motif-plan {
	display: flex;
	flex-direction: column;
	padding: 34px 21px 21px;
	border: 1px solid var(--_line);
	border-radius: 13px;
	background: var(--_paper);
}

.motif-plan.is-highlighted {
	border: 2px solid var(--_forest);
	padding: 33px 20px 20px;
	background: var(--_paper);
	box-shadow: 0 13px 34px -21px rgba(14, 59, 51, 0.45);
}

.motif-plan__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 24px;
	margin: 0 0 13px;
}

.motif-plan__name,
.motif-plan__kicker {
	margin: 0;
	color: var(--_soft);
	font-family: var(--_mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--motif-label-tracking, 0.08em);
	text-transform: uppercase;
}

.motif-plan__badge {
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--_lime);
	color: var(--_ink);
	font-family: var(--_body);
	font-size: 12px;
	font-weight: 500;
}

.motif-plan__price {
	margin: 0;
	color: var(--_ink);
	font-family: var(--_body);
}

.motif-plan__amount {
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.motif-plan__period {
	color: var(--_quiet);
	font-size: 14px;
}

.motif-plan__hint {
	min-height: 1.6em;
	margin: 5px 0 13px;
	color: var(--_quiet);
	font-size: 14px;
}

.motif-plan__description {
	margin: 0 0 21px;
	color: var(--_soft);
	font-size: 15px;
}

.motif-plan__features {
	flex: 1 1 auto;
	margin: 0 0 21px;
	padding: 21px 0 0;
	border-top: 1px solid var(--_line);
	list-style: none;
}

.motif-plan__features li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 21px;
	font-size: 15px;
}

.motif-plan__features li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 2px;
	width: 9px;
	height: 5px;
	border-bottom: 2px solid var(--_forest);
	border-left: 2px solid var(--_forest);
	transform: rotate(-45deg);
}

.motif-plan__action .motif-btn {
	width: 100%;
}

.motif-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 21px;
	margin: 21px 0 0;
	padding: 21px 34px;
	border-radius: 13px;
	background: var(--_lime-soft);
}

.motif-offer__title {
	margin: 5px 0;
	font-family: var(--_display);
	font-size: 22px;
	font-weight: 600;
}

.motif-offer__description {
	margin: 0;
	color: var(--_soft);
}

.motif-offer__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 21px;
}

.motif-offer__action .motif-plan__amount {
	font-size: 28px;
}

.motif-offer .motif-checkout-form .motif-btn {
	width: auto;
}

.motif-pricing__note {
	margin: 21px 0 0;
	color: var(--_quiet);
	font-size: 14px;
	text-align: center;
}

/* Account ---------------------------------------------------------------- */

.motif-account__section {
	margin: 0 0 34px;
}

.motif-account__title {
	margin: 0 0 13px;
	font-family: var(--_display);
	font-size: 22px;
	font-weight: 600;
}

.motif-account__intro,
.motif-account__empty,
.motif-account__meta {
	margin: 0 0 13px;
	color: var(--_quiet);
	font-size: 14px;
}

.motif-account__plans,
.motif-account__downloads,
.motif-seats__list,
.motif-license__sites {
	margin: 0 0 13px;
	padding: 0;
	border: 1px solid var(--_line);
	border-radius: 13px;
	list-style: none;
}

.motif-account__plans li,
.motif-account__downloads li,
.motif-seats__list li,
.motif-license__site {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 13px 21px;
	border-top: 1px solid var(--_line);
}

.motif-account__plans li:first-child,
.motif-account__downloads li:first-child,
.motif-seats__list li:first-child,
.motif-license__site:first-child {
	border-top: 0;
}

.motif-seats__list:empty {
	display: none;
}

.motif-account__plan-name {
	font-weight: 500;
}

.motif-account__plans .motif-account__meta,
.motif-seats__list .motif-account__meta {
	margin: 0;
}

.motif-license {
	margin: 0 0 21px;
	padding: 21px;
	border: 1px solid var(--_line);
	border-radius: 13px;
	background: var(--_paper);
}

.motif-license.is-inactive {
	background: var(--_mist);
}

.motif-license__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 13px;
}

.motif-license__plan {
	margin: 0;
	font-family: var(--_body);
	font-size: 16px;
	font-weight: 500;
}

.motif-license__status {
	color: var(--_quiet);
	font-size: 14px;
}

.motif-license__key {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 13px;
	margin: 0 0 13px;
	padding: 8px 8px 8px 13px;
	border-radius: 8px;
	background: var(--_mist);
}

.motif-license__key code {
	flex: 1 1 auto;
	background: none;
	color: var(--_ink);
	font-family: var(--_mono), ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 16px;
	letter-spacing: 0.04em;
	word-break: break-all;
}

.motif-license__usage {
	margin: 0 0 8px;
	color: var(--_soft);
	font-size: 14px;
}

.motif-license__site-name {
	font-family: var(--_mono), ui-monospace, monospace;
	font-size: 14px;
}

.motif-seats__row {
	display: flex;
	gap: 8px;
}

.motif-seats__row .motif-input {
	flex: 1 1 auto;
}

.motif-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--_line);
	border-radius: 13px;
}

.motif-orders {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.motif-orders th,
.motif-orders td {
	padding: 13px 21px;
	border: 0;
	border-top: 1px solid var(--_line);
	text-align: left;
	white-space: nowrap;
}

.motif-orders thead th {
	border-top: 0;
	color: var(--_quiet);
	font-family: var(--_mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--motif-label-tracking, 0.08em);
	text-transform: uppercase;
}

.motif-account__login form p {
	margin: 0 0 13px;
}

.motif-account__login input[type="text"],
.motif-account__login input[type="password"] {
	width: 100%;
	max-width: 360px;
	min-height: 44px;
	padding: 0 13px;
	border: 1px solid var(--_line);
	border-radius: 8px;
}

.motif-account__login input[type="submit"] {
	min-height: 44px;
	padding: 0 21px;
	border: 0;
	border-radius: 8px;
	background: var(--_forest);
	color: #fff;
	font-weight: 500;
	cursor: pointer;
}

/* Affiliate dashboard ---------------------------------------------------- */

.motif-affiliate__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 13px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.motif-affiliate__stat {
	margin: 0;
	padding: 21px;
	border-radius: 13px;
	background: var(--_mist);
}

.motif-affiliate__stat-label {
	display: block;
	color: var(--_quiet);
	font-family: var(--_mono);
	font-size: 12px;
	letter-spacing: var(--motif-label-tracking, 0.08em);
	text-transform: uppercase;
}

.motif-affiliate__stat-value {
	display: block;
	margin-top: 5px;
	font-size: 26px;
	font-weight: 500;
}

.motif-affiliate__form {
	display: grid;
	gap: 13px;
	max-width: 480px;
}

.motif-affiliate__check {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
}

@media (max-width: 600px) {
	.motif-plan,
	.motif-plan.is-highlighted {
		padding: 21px 13px 13px;
	}

	.motif-offer {
		padding: 21px;
	}

	.motif-seats__row {
		flex-direction: column;
	}
}

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