/**
 * PeptidePlugs card checkout.
 *
 * Brand: navy #0F1E30, action blue #1a56db, deep accent #185FA5.
 * Type: Bricolage Grotesque (panel title), Archivo (body), Spline Sans Mono
 * (micro labels and card digits, matching the COA house style).
 *
 * Signature: the mini card glyphs in the header sit muted until the typed
 * number identifies the brand, then the matching card lifts and colours while
 * the others fade.
 */

.pp-cc-fields {
	--pp-ink: #0F1E30;
	--pp-blue: #1a56db;
	--pp-accent: #185FA5;
	--pp-line: #E4EAF2;
	--pp-muted: #5B6B7F;
	--pp-wash: #F7F9FC;
	--pp-ok: #067647;
	--pp-amber-ink: #92400E;
	--pp-amber-bg: #FEF6E7;
	--pp-bad: #B91C1C;
	--pp-ring: rgba(26, 86, 219, 0.13);
	--pp-radius: 10px;

	font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	color: var(--pp-ink);
	font-size: 15px;
	line-height: 1.5;
	background: #fff;
	border: 1px solid var(--pp-line);
	border-radius: 14px;
	padding: 22px 22px 18px;
	box-shadow: 0 1px 2px rgba(15, 30, 48, 0.04), 0 8px 24px -18px rgba(15, 30, 48, 0.18);
}

/* -------------------------------------------------------------------------
   Header: title plus the mini card glyphs
   ---------------------------------------------------------------------- */

.pp-cc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 4px;
}

.pp-cc-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-accent);
}

.pp-cc-blurb {
	margin: 0 0 18px;
	color: var(--pp-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

/* Mini physical cards. Muted until the typed number identifies the brand. */

.pp-cc-cardset {
	display: flex;
	gap: 6px;
}

.pp-cc-card {
	position: relative;
	width: 38px;
	height: 25px;
	border-radius: 4.5px;
	border: 1px solid var(--pp-line);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	filter: grayscale(1);
	opacity: 0.45;
	transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.pp-cc-card span {
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
}

.pp-cc-card-visa { background: #1A1F71; border-color: #1A1F71; }
.pp-cc-card-visa span { color: #fff; font-style: italic; font-size: 10px; letter-spacing: 0.02em; }

.pp-cc-card-amex { background: #016FD0; border-color: #016FD0; }
.pp-cc-card-amex span { color: #fff; }

.pp-cc-card-discover { background: #fff; border-color: #E4EAF2; }
.pp-cc-card-discover span { color: #0F1E30; font-size: 6px; letter-spacing: 0.03em; white-space: nowrap; }
.pp-cc-card-discover::after {
	content: "";
	position: absolute;
	right: -7px;
	bottom: -7px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #F68121;
}

/* No brand detected yet: show all three at half strength, no favourite. */
.pp-cc-cardset[data-brand=""] .pp-cc-card { filter: grayscale(0); opacity: 0.85; }

/* Brand detected: light the match, fade the rest. */
.pp-cc-cardset[data-brand="visa"] .pp-cc-card-visa,
.pp-cc-cardset[data-brand="amex"] .pp-cc-card-amex,
.pp-cc-cardset[data-brand="discover"] .pp-cc-card-discover {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px -3px rgba(15, 30, 48, 0.35);
}

.pp-cc-cardset[data-brand="visa"] .pp-cc-card:not(.pp-cc-card-visa),
.pp-cc-cardset[data-brand="amex"] .pp-cc-card:not(.pp-cc-card-amex),
.pp-cc-cardset[data-brand="discover"] .pp-cc-card:not(.pp-cc-card-discover) {
	opacity: 0.25;
}

/* Unsupported brand typed: everything fades, the warning does the talking. */
.pp-cc-cardset[data-brand="blocked"] .pp-cc-card { opacity: 0.2; }

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

.pp-cc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0 0 4px;
}

.pp-cc-field { margin: 0; }
.pp-cc-field-number { grid-column: 1 / -1; }

.pp-cc-field label,
.pp-cc-compliance .pp-cc-field label {
	display: block;
	margin: 0 0 6px;
	font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pp-muted);
}

.pp-cc-iframe,
.pp-cc-fields input[type="text"],
.pp-cc-fields input[type="email"],
.pp-cc-fields input[type="tel"],
.pp-cc-fields select {
	box-sizing: border-box;
	width: 100%;
	height: 54px;
	padding: 0 16px;
	background: #f5f8fc;
	border: 1px solid #e3eaf3;
	border-radius: 12px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	color: var(--pp-ink);
	transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

/* Card digits read best in the house mono. */
.pp-cc-fields input[inputmode="numeric"] {
	font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.04em;
}

.pp-cc-iframe { padding: 0 16px; display: flex; align-items: center; }
.pp-cc-iframe iframe { width: 100% !important; height: 100% !important; }

.pp-cc-fields input:focus,
.pp-cc-fields select:focus,
.pp-cc-iframe:focus-within {
	outline: none;
	background: #fff;
	border-color: var(--pp-blue);
	box-shadow: 0 0 0 4px var(--pp-ring);
}

.pp-cc-fields input::placeholder { color: #9AA8B8; }

/* -------------------------------------------------------------------------
   Brand warning
   ---------------------------------------------------------------------- */

.pp-cc-brand-warning {
	margin: 10px 0 0;
	padding: 10px 13px;
	background: #FDECEC;
	border: 1px solid #F5C6C6;
	border-radius: 8px;
	color: var(--pp-bad);
	font-size: 13.5px;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Saved cards
   ---------------------------------------------------------------------- */

.pp-cc-saved { margin: 0 0 16px; }

.pp-cc-label {
	margin: 0 0 8px;
	font-family: "Spline Sans Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pp-muted);
}

.pp-cc-saved-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 16px;
	margin: 0 0 10px;
	background: #f5f8fc;
	border: 1px solid transparent;
	border-left: 3px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	font-size: 14.5px;
	transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.pp-cc-saved-row:hover { background: #f1f6fc; }

.pp-cc-saved-row.pp-cc-saved-active {
	background: #fff;
	border-color: #e3eaf3;
	border-left: 3px solid var(--pp-accent);
	box-shadow: 0 6px 18px -12px rgba(15, 30, 48, 0.25);
}

.pp-cc-saved-row input[type="radio"] {
	margin: 0;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	accent-color: var(--pp-blue);
}

.pp-cc-saved-brand {
	font-family: "Spline Sans Mono", ui-monospace, monospace;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pp-accent);
}

.pp-cc-saved-digits {
	font-family: "Spline Sans Mono", ui-monospace, monospace;
	letter-spacing: 0.06em;
}

.pp-cc-saved-exp { margin-left: auto; color: var(--pp-muted); font-size: 13px; }

/* -------------------------------------------------------------------------
   Checkboxes: save card and the confirmations
   ---------------------------------------------------------------------- */

.pp-cc-save,
.pp-cc-compliance label.pp-cc-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 0;
	font-size: 14px;
	font-weight: 400;
	font-family: Archivo, system-ui, sans-serif;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.5;
	color: var(--pp-ink);
	cursor: pointer;
}

.pp-cc-save input[type="checkbox"],
.pp-cc-compliance input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	border: 1.5px solid #C4D0DE;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: border-color 130ms ease, background 130ms ease;
}

.pp-cc-save input[type="checkbox"]:hover,
.pp-cc-compliance input[type="checkbox"]:hover { border-color: var(--pp-blue); }

.pp-cc-save input[type="checkbox"]:focus-visible,
.pp-cc-compliance input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--pp-ring);
}

.pp-cc-save input[type="checkbox"]:checked,
.pp-cc-compliance input[type="checkbox"]:checked {
	background: var(--pp-blue);
	border-color: var(--pp-blue);
}

.pp-cc-save input[type="checkbox"]:checked::after,
.pp-cc-compliance input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2.5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.pp-cc-save-note {
	margin: 6px 0 0 30px;
	font-size: 12.5px;
	color: var(--pp-muted);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Confirmations block
   ---------------------------------------------------------------------- */

.pp-cc-compliance {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--pp-line);
}

.pp-cc-compliance::before {
	content: "Confirmations";
	display: block;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-accent);
}

.pp-cc-compliance .pp-cc-field { margin: 0 0 12px; }

.pp-cc-prior-ack {
	margin: 10px 0 0 30px;
	font-family: "Spline Sans Mono", ui-monospace, monospace;
	font-size: 11px;
	color: var(--pp-muted);
}

/* -------------------------------------------------------------------------
   Hold notice
   ---------------------------------------------------------------------- */

.pp-cc-hold-notice {
	margin: 16px 0 0;
	padding: 12px 14px;
	background: var(--pp-amber-bg);
	border: 1px solid #F3DFB8;
	border-left: 3px solid #D97706;
	border-radius: 8px;
	color: var(--pp-amber-ink);
	font-size: 13.5px;
	line-height: 1.55;
}

.pp-cc-hold-notice strong { display: block; margin: 0 0 2px; color: #7C3A0B; }

/* -------------------------------------------------------------------------
   Trust line
   ---------------------------------------------------------------------- */

.pp-cc-trust {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 8px;
	margin: 18px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--pp-line);
	font-family: "Spline Sans Mono", ui-monospace, monospace;
	font-size: 11px;
	line-height: 1.5;
	color: var(--pp-muted);
	text-align: center;
}

.pp-cc-trust li { margin: 0; padding: 0; display: inline; }

.pp-cc-trust li:first-child::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 12px;
	margin: 0 6px -1px 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 0a3.2 3.2 0 0 0-3.2 3.2V5H1.2A1.2 1.2 0 0 0 0 6.2v4.6A1.2 1.2 0 0 0 1.2 12h7.6A1.2 1.2 0 0 0 10 10.8V6.2A1.2 1.2 0 0 0 8.8 5H8.2V3.2A3.2 3.2 0 0 0 5 0Zm-1.7 3.2a1.7 1.7 0 1 1 3.4 0V5H3.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 0a3.2 3.2 0 0 0-3.2 3.2V5H1.2A1.2 1.2 0 0 0 0 6.2v4.6A1.2 1.2 0 0 0 1.2 12h7.6A1.2 1.2 0 0 0 10 10.8V6.2A1.2 1.2 0 0 0 8.8 5H8.2V3.2A3.2 3.2 0 0 0 5 0Zm-1.7 3.2a1.7 1.7 0 1 1 3.4 0V5H3.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pp-cc-trust li + li::before { content: "\00B7"; margin: 0 8px 0 0; color: #C4D0DE; }

/* -------------------------------------------------------------------------
   Simulator
   ---------------------------------------------------------------------- */

.pp-cc-sim-banner {
	margin: 0 0 14px;
	padding: 11px 14px;
	background: var(--pp-wash);
	border: 1px dashed #C9D6E6;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--pp-muted);
}

.pp-cc-sim-banner strong {
	display: inline-block;
	margin: 0 6px 0 0;
	padding: 1px 7px;
	background: var(--pp-ink);
	color: #fff;
	border-radius: 4px;
	font-family: "Spline Sans Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Manual fallback line
   ---------------------------------------------------------------------- */

.pp-cc-manual {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--pp-muted);
	text-align: center;
}

.pp-cc-manual a { color: var(--pp-blue); text-decoration: none; font-weight: 600; }
.pp-cc-manual a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Responsive and reduced motion
   ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	.pp-cc-fields { padding: 16px 14px 14px; border-radius: 12px; }
	.pp-cc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.pp-cc-title { font-size: 16.5px; }
	.pp-cc-card { width: 34px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-cc-fields *, .pp-cc-fields *::before, .pp-cc-fields *::after {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   Statement acknowledgement. The one confirmation drawn in red, because it is
   the one that stops a chargeback: the customer names the exact descriptor
   they will see and agrees to email before disputing.
   ---------------------------------------------------------------------- */

.pp-cc-statement {
	margin: 14px 0 0;
	padding: 13px 15px;
	background: #FEF2F2;
	border-left: 3px solid #DC2626;
	border-radius: 10px;
}

.pp-cc-statement label.pp-cc-check {
	margin: 0;
	color: #7F1D1D;
	font-size: 13.5px;
	line-height: 1.55;
}

.pp-cc-statement input[type="checkbox"] {
	border-color: #DC2626 !important;
}

.pp-cc-statement input[type="checkbox"]:checked {
	background: #DC2626 !important;
	border-color: #DC2626 !important;
}

/* Name on card. */
.pp-cc-name-field {
	margin: 0 0 14px;
}

.pp-cc-name-note {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--pp-muted);
	line-height: 1.5;
}