/* Advanced Peptides Verification — front-end styling.
   Brand: Inter + teal accent. White, minimal, clinical. Colour used sparingly. */

.apu-verify {
	/* Brand tokens — used sparingly */
	--apu-primary: #009CA6;   /* teal — the single accent */
	--apu-secondary: #003C4A; /* dark teal */
	--apu-ink: #1E293B;       /* text */
	--apu-ink-soft: #586577;
	--apu-ink-faint: #94a3b8;
	--apu-surface: #FFFFFF;
	--apu-subtle: #F8FAFC;    /* white light — faint input fill */
	--apu-line: #E2E8F0;      /* gray border */
	--apu-line-strong: #cdd6e0;

	/* Status dot colours only */
	--apu-dot-active: #009CA6;
	--apu-dot-expired: #C77F0A;
	--apu-dot-recalled: #C0392B;
	--apu-dot-disabled: #94a3b8;

	--apu-radius: 12px;
	--apu-shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 6px 22px rgba(16, 24, 32, .05);

	max-width: 600px;
	margin: 1.5rem 0;
	color: var(--apu-ink);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.apu-verify *,
.apu-verify *::before,
.apu-verify *::after { box-sizing: border-box; }

/* ---------- Form ---------- */
.apu-verify__form {
	background: var(--apu-surface);
	border: 1px solid var(--apu-line);
	border-radius: var(--apu-radius);
	padding: 1.4rem;
	box-shadow: var(--apu-shadow);
}

.apu-verify__label {
	display: block;
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: 0.6rem;
	color: var(--apu-ink);
}

.apu-verify__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.apu-verify__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--apu-line-strong);
	border-radius: 9px;
	font: inherit;
	font-size: 16px;
	color: var(--apu-ink);
	background: var(--apu-subtle);
	letter-spacing: 0.03em;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.apu-verify__input::placeholder { color: var(--apu-ink-faint); }

.apu-verify__input:focus {
	outline: none;
	background: #fff;
	border-color: var(--apu-primary);
	box-shadow: 0 0 0 3px rgba(0, 156, 166, 0.15);
}

.apu-verify__button {
	flex: 0 0 auto;
	padding: 10px;
	border: none !important;
	border-radius: 10px !important;
	background: var(--apu-primary) !important;
	color: #fff !important;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .05s ease, opacity .15s ease;
}

.apu-verify__button:hover { background: var(--apu-secondary) !important; color: #fff !important; }
.apu-verify__button:active { transform: translateY(1px); }
.apu-verify__button:focus-visible { outline: 2px solid var(--apu-primary); outline-offset: 2px; }
.apu-verify__button:disabled { opacity: 0.65; cursor: progress; }

/* High-specificity override — beats aggressive theme rules like button[type="submit"] !important. */
.apu-verify form.apu-verify__form button.apu-verify__button,
.apu-verify form.apu-verify__form button.apu-verify__button[type="submit"] {
	border: none !important;
	border-radius: 10px !important;
	background: var(--apu-primary) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.apu-verify form.apu-verify__form button.apu-verify__button:hover,
.apu-verify form.apu-verify__form button.apu-verify__button[type="submit"]:hover {
	background: var(--apu-secondary) !important;
	color: #fff !important;
}

.apu-verify__disclaimer {
	margin-top: 1rem;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--apu-ink-faint);
}

/* ---------- Result ---------- */
.apu-verify__result { margin-top: 1.25rem; }
.apu-verify__result:empty { margin-top: 0; }

/* Neutral white card. No colour fills — the only state cue is a small dot in the badge. */
.apu-record {
	border: 1px solid var(--apu-line);
	border-radius: var(--apu-radius);
	padding: 1.15rem 1.3rem;
	background: var(--apu-surface);
	box-shadow: var(--apu-shadow);
	animation: apuFadeUp .4s cubic-bezier(.16, .84, .44, 1) both;
}

@keyframes apuFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.apu-record__heading {
	margin: 0 0 1.25rem;
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--apu-ink);
}

.apu-record__list { margin: 0; }

.apu-record__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.85rem;
	padding: 0.95rem 0;
	border-top: 1px solid var(--apu-line);
}
.apu-record__item:first-child { border-top: none; padding-top: 0.4rem; }

.apu-record__item dt {
	flex: 0 0 160px;
	font-weight: 600;
	font-size: .9rem;
	color: var(--apu-ink-soft);
	margin: 0;
}

.apu-record__item dd {
	flex: 1 1 220px;
	margin: 0;
	color: var(--apu-ink);
	word-break: break-word;
}

.apu-record__item a {
	color: var(--apu-primary);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid rgba(0, 156, 166, .35);
}
.apu-record__item a:hover { color: var(--apu-secondary); border-bottom-color: var(--apu-secondary); }

/* ---------- PDF actions (view in browser / download) ---------- */
.apu-record__pdf {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	align-items: center;
}
.apu-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px;
	border: none;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.apu-pdf-link--view {
	background: var(--apu-primary);
	color: #fff !important;
	border-bottom-color: transparent !important;
}
.apu-pdf-link--view:hover { background: var(--apu-secondary); color: #fff !important; }
.apu-pdf-link--download {
	background: transparent;
	color: var(--apu-primary) !important;
	border-bottom-color: transparent !important;
}
.apu-pdf-link--download:hover { background: var(--apu-secondary); color: #fff !important; }

.apu-record__checks {
	margin: 0.85rem 0 0;
	font-size: 12.5px;
	color: var(--apu-ink-faint);
}

/* ---------- Status badge: neutral chip + a single small status dot ---------- */
.apu-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0.14rem 0.6rem;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--apu-ink);
	background: var(--apu-subtle);
	border: 1px solid var(--apu-line);
}
.apu-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--apu-dot-disabled);
}
.apu-badge--active::before   { background: var(--apu-dot-active); }
.apu-badge--expired::before  { background: var(--apu-dot-expired); }
.apu-badge--recalled::before { background: var(--apu-dot-recalled); }
.apu-badge--disabled::before { background: var(--apu-dot-disabled); }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.apu-verify { font-size: 15px; }
	.apu-verify__form { padding: 1.1rem; }
	.apu-record { padding: 1rem 1.05rem; }
}

@media (max-width: 480px) {
	.apu-verify__button { flex: 1 1 100%; }
	/* Stack each field label above its value on small screens. */
	.apu-record__item { flex-direction: column; gap: 0.15rem; }
	.apu-record__item dt { flex: 1 1 100%; }
	.apu-record__item dd { flex: 1 1 100%; }
	/* Full-width, easy-to-tap PDF buttons. */
	.apu-record__pdf { flex-direction: column; align-items: stretch; }
	.apu-pdf-link { justify-content: center; padding: 0.6rem 1rem; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	.apu-record { animation: none; }
	.apu-verify__input,
	.apu-verify__button { transition: none; }
}