/* AthletiSync Storefront — My Account → Licenses.
   Brand tokens match the marketing site (navy #0B1B3F, blue #1349E4, volt #B4F32D; Barlow Condensed + Inter).
   Everything is scoped to .as-licenses so it can't leak into the rest of WooCommerce. */

.as-licenses {
	--as-navy: #0b1b3f;
	--as-blue: #1349e4;
	--as-blue-d: #0e37b8;
	--as-text: #26324f;
	--as-muted: #566280;
	--as-line: #e1e7f2;
	--as-line-strong: #c9d3e8;
	--as-tint: #f4f7fe;
	--as-volt: #b4f32d;
	--as-good-bg: #eaf8d2;
	--as-good-fg: #2f5000;
	--as-warn-bg: #fff3d6;
	--as-warn-fg: #7a4a00;
	--as-bad-bg: #fdeaea;
	--as-bad-fg: #9a1b1b;
	--as-neutral-bg: #eef1f7;
	--as-neutral-fg: #46526b;
	--as-r-card: 8px;   /* panels */
	--as-r: 6px;        /* buttons, inputs */
	--as-r-tag: 3px;    /* status tags */
	--as-shadow: none;  /* flat: hairlines, not drop shadows */
	display: grid;
	gap: 24px;
	margin: 0 0 32px;
	color: var(--as-text);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- card ---------- */
.as-licenses .as-license {
	background: #fff;
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-card);
	padding: 28px;
	box-shadow: var(--as-shadow);
}

.as-licenses .as-license__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 16px;
}

.as-licenses .as-license__eyebrow,
.as-licenses .as-license__label,
.as-licenses .as-fact dt {
	display: block;
	margin: 0;
	color: var(--as-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.as-licenses .as-license__tier {
	margin: 4px 0 0;
	color: var(--as-navy);
	font-family: "Barlow Condensed", Inter, sans-serif;
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
}

/* ---------- status badge (dot + text, never colour alone) ---------- */
.as-licenses .as-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 12px;
	border-radius: var(--as-r-tag);
	background: var(--as-neutral-bg);
	color: var(--as-neutral-fg);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.as-licenses .as-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.as-licenses .as-badge--good { background: var(--as-good-bg); color: var(--as-good-fg); }
.as-licenses .as-badge--good .as-badge__dot { box-shadow: 0 0 0 3px rgba(47, 80, 0, 0.16); }
.as-licenses .as-badge--warn { background: var(--as-warn-bg); color: var(--as-warn-fg); }
.as-licenses .as-badge--bad { background: var(--as-bad-bg); color: var(--as-bad-fg); }

/* ---------- license key ---------- */
.as-licenses .as-license__keyrow { margin-top: 24px; }
.as-licenses .as-license__label { margin-bottom: 8px; }

.as-licenses .as-keybox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 16px;
	background: var(--as-tint);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r);
}
.as-licenses .as-license__key {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0;
	background: none;
	color: var(--as-navy);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
}
.as-licenses .as-license__hint { display: block; margin-top: 8px; color: var(--as-muted); font-size: 13px; }
.as-licenses .as-keybox .as-license__form { margin: 0; }

.as-licenses .as-copy {
	appearance: none;
	min-width: 72px;
	min-height: 44px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--as-line-strong);
	border-radius: 8px;
	color: var(--as-navy);
	font: 600 14px/1 Inter, system-ui, sans-serif;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.as-licenses .as-copy:hover { border-color: var(--as-blue); color: var(--as-blue); }
.as-licenses .as-copy.is-copied { background: var(--as-good-bg); border-color: transparent; color: var(--as-good-fg); }

/* ---------- facts ---------- */
.as-licenses .as-license__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px 32px;
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--as-line);
}
.as-licenses .as-fact { margin: 0; }
.as-licenses .as-fact dd {
	margin: 4px 0 0;
	color: var(--as-navy);
	font-size: 16px;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.as-licenses .as-fact__sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--as-muted); }
.as-licenses .as-fact__sub--good { color: var(--as-good-fg); }
.as-licenses .as-fact__sub--warn { color: var(--as-warn-fg); }
.as-licenses .as-fact__sub--bad { color: var(--as-bad-fg); }
.as-licenses .as-fact__empty { color: var(--as-muted); font-weight: 500; }

/* ---------- buttons ---------- */
.as-licenses .as-license__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}
.as-licenses .as-license__form { margin: 0; }
.as-licenses .as-license__form--end { margin-left: auto; }

.as-licenses .as-license .button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	background: #fff;
	border: 1.5px solid var(--as-line-strong);
	border-radius: var(--as-r);
	box-shadow: none;
	color: var(--as-navy);
	font: 600 15px/1 Inter, system-ui, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}
.as-licenses .as-license .button:hover { background: var(--as-tint); border-color: var(--as-blue); color: var(--as-blue); }
.as-licenses .as-license .button:active { transform: translateY(1px) scale(0.985); }
.as-licenses .as-license .button:focus-visible,
.as-licenses .as-copy:focus-visible {
	outline: 3px solid rgba(19, 73, 228, 0.4);
	outline-offset: 2px;
}

.as-licenses .as-license .as-license__renew,
.as-licenses .as-license .as-ar__btn--primary {
	background: var(--as-blue);
	border-color: var(--as-blue);
	color: #fff;
}
.as-licenses .as-license .as-license__renew:hover,
.as-licenses .as-license .as-ar__btn--primary:hover { background: var(--as-blue-d); border-color: var(--as-blue-d); color: #fff; }

/* Renewing by hand is the quiet option until the license is close to expiring (then it is the primary action). */
.as-licenses .as-license .as-license__renew.as-btn--soft { background: #fff; border-color: var(--as-line-strong); color: var(--as-navy); }
.as-licenses .as-license .as-license__renew.as-btn--soft:hover { background: var(--as-tint); border-color: var(--as-blue); color: var(--as-blue); }

.as-licenses .as-license .as-license__refresh,
.as-licenses .as-license .as-license__resend {
	background: transparent;
	border-color: transparent;
	color: var(--as-muted);
}
.as-licenses .as-license .as-license__refresh:hover,
.as-licenses .as-license .as-license__resend:hover { background: var(--as-neutral-bg); border-color: transparent; color: var(--as-navy); }

.as-licenses .as-license .as-ar__btn--danger { color: var(--as-bad-fg); border-color: #edc4c4; }
.as-licenses .as-license .as-ar__btn--danger:hover { background: var(--as-bad-bg); border-color: var(--as-bad-fg); color: var(--as-bad-fg); }

/* ---------- automatic renewal panel ---------- */
.as-licenses .as-license__autorenew {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 0 16px;
	margin-top: 24px;
	padding: 20px 22px;
	background: var(--as-tint);
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-card);
}
.as-licenses .as-ar--on { background: #f6fce8; border-color: #cfeb9a; }
.as-licenses .as-ar--pending { background: #eef3ff; border-color: #bfd0fa; }
.as-licenses .as-ar--past_due { background: #fff8e8; border-color: #f3d79a; }

.as-licenses .as-ar__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: #fff;
	border: 1px solid var(--as-line);
	border-radius: 50%;
	color: var(--as-blue);
}
.as-licenses .as-ar--on .as-ar__icon { background: var(--as-volt); border-color: transparent; color: var(--as-navy); }
.as-licenses .as-ar--past_due .as-ar__icon { color: var(--as-warn-fg); }
.as-licenses .as-ar__icon svg { width: 22px; height: 22px; }

.as-licenses .as-ar__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0;
	color: var(--as-navy);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}
.as-licenses .as-ar__state {
	padding: 3px 10px;
	border-radius: var(--as-r-tag);
	background: var(--as-neutral-bg);
	color: var(--as-neutral-fg);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.as-licenses .as-ar--on .as-ar__state { background: var(--as-good-bg); color: var(--as-good-fg); }
.as-licenses .as-ar--pending .as-ar__state { background: #dbe6ff; color: #0e37b8; }
.as-licenses .as-ar--past_due .as-ar__state { background: var(--as-warn-bg); color: var(--as-warn-fg); }

.as-licenses .as-ar__body { min-width: 0; }
.as-licenses .as-ar__text { margin: 4px 0 0; color: var(--as-text); font-size: 15px; }
.as-licenses .as-ar__terms {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(11, 27, 63, 0.08);
	color: var(--as-muted);
	font-size: 14px;
	line-height: 1.5;
}
.as-licenses .as-ar__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* empty state */
.as-licenses.as-licenses--empty { padding: 32px; background: #fff; border: 1px dashed var(--as-line-strong); border-radius: var(--as-r-card); text-align: center; }
.as-licenses--empty a { color: var(--as-blue); font-weight: 600; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
	.as-licenses .as-license { padding: 20px; border-radius: var(--as-r-card); }
	.as-licenses .as-license__tier { font-size: 38px; }
	.as-licenses .as-license__meta { grid-template-columns: 1fr; }
	.as-licenses .as-license__actions { flex-direction: column; align-items: stretch; }
	.as-licenses .as-license__form--end { margin-left: 0; }
	.as-licenses .as-license .button { width: 100%; }
	.as-licenses .as-keybox { flex-direction: column; align-items: stretch; padding: 12px; }
	.as-licenses .as-license__key { flex: 0 0 auto; }
	.as-licenses .as-copy { width: 100%; }
	.as-licenses .as-license__autorenew { grid-template-columns: 1fr; padding: 18px; }
	.as-licenses .as-ar__icon { margin-bottom: 12px; }
	.as-licenses .as-ar__actions { flex-direction: column; }
	.as-licenses .as-ar__actions .as-license__form { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.as-licenses * { transition: none !important; }
}