@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Reset ─────────────────────────────────────────────────────────────────── */
.sppro-wrap *, .sppro-wrap *::before, .sppro-wrap *::after { box-sizing: border-box; }

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.sppro-wrap {
	--blue:     #1a56ff;
	--blue-dk:  #1040d4;
	--surface:  #ffffff;
	--bg:       #f9fafb;
	--border:   #e5e7eb;
	--muted:    #6b7280;
	--text:     #111827;
	--ok:       #059669;
	--err:      #dc2626;
	--radius:   14px;
	--shadow:   0 0 0 1px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08), 0 24px 64px -12px rgba(26,86,255,.13);
	--t:        .18s ease;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	display: flex;
	justify-content: center;
	padding: 36px 16px;
}

/* ── Card ───────────────────────────────────────────────────────────────────── */
.sppro-card {
	width: 100%;
	max-width: 440px;
	background: var(--surface);
	border-radius: 22px;
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.sppro-header {
	background: linear-gradient(140deg, #0f3fcc 0%, #1a56ff 45%, #06b6d4 100%);
	padding: 26px 28px 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.sppro-header::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.08) 0%, transparent 60%);
}
.sppro-logo {
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	border: 1.5px solid rgba(255,255,255,.35);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 10px;
	position: relative; z-index: 1;
}
.sppro-title {
	margin: 0 0 4px;
	font-size: 1.15rem; font-weight: 600;
	color: #fff; letter-spacing: -.025em;
	position: relative; z-index: 1;
}
.sppro-sub {
	margin: 0;
	font-size: .73rem; color: rgba(255,255,255,.7);
	display: flex; align-items: center; justify-content: center; gap: 8px;
	position: relative; z-index: 1;
}
.sppro-sandbox-badge {
	background: rgba(251,191,36,.25);
	border: 1px solid rgba(251,191,36,.5);
	color: #fef3c7;
	font-size: .65rem; font-weight: 700;
	padding: 2px 7px; border-radius: 20px;
	letter-spacing: .05em;
}

/* ── Step indicator ─────────────────────────────────────────────────────────── */
.sppro-steps { padding: 16px 24px 0; }
.sppro-track {
	display: flex; align-items: center;
	margin-bottom: 6px;
}
.sppro-dot {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: .72rem; font-weight: 600;
	flex-shrink: 0;
	transition: all var(--t);
	background: #f3f4f6; color: #9ca3af;
	border: 2px solid #e5e7eb;
}
.sppro-dot.sppro-active { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26,86,255,.14); }
.sppro-dot.sppro-done   { background: #dbeafe; color: var(--blue); border-color: #93c5fd; }
.sppro-line {
	flex: 1; height: 2px;
	margin: 0 8px;
	background: #e5e7eb; border-radius: 1px;
	transition: background var(--t);
}
.sppro-line.sppro-done { background: #93c5fd; }
.sppro-labels {
	display: flex; justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}
.sppro-lbl {
	flex: 1; text-align: center;
	font-size: .68rem; font-weight: 500;
	color: #9ca3af; letter-spacing: .01em;
	transition: color var(--t);
}
.sppro-lbl.sppro-active { color: var(--blue); }
.sppro-lbl.sppro-done   { color: #60a5fa; }

/* ── Body ───────────────────────────────────────────────────────────────────── */
.sppro-body { padding: 22px 24px 20px; }
.sppro-panel { display: none; }
.sppro-panel.sppro-active { display: block; }

/* ── Alert ──────────────────────────────────────────────────────────────────── */
.sppro-alert {
	padding: 12px 15px;
	border-radius: 10px;
	font-size: .83rem; font-weight: 500; line-height: 1.55;
	margin-bottom: 16px;
}
.sppro-alert.is-err { background: #fef2f2; color: var(--err); border: 1px solid #fecaca; }
.sppro-alert.is-ok  { background: #f0fdf4; color: var(--ok);  border: 1px solid #bbf7d0; }

/* ── Field ──────────────────────────────────────────────────────────────────── */
.sppro-field { margin-bottom: 14px; }
.sppro-field label {
	display: block;
	font-size: .72rem; font-weight: 600;
	color: var(--muted);
	text-transform: uppercase; letter-spacing: .07em;
	margin-bottom: 6px;
}
.sppro-field input,
.sppro-field select {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--border); border-radius: var(--radius);
	font-family: inherit; font-size: .9rem; color: var(--text);
	background: var(--bg);
	outline: none;
	transition: border-color var(--t), box-shadow var(--t), background var(--t);
	-webkit-appearance: none; appearance: none;
}
.sppro-field input:focus,
.sppro-field select:focus {
	border-color: var(--blue); background: #fff;
	box-shadow: 0 0 0 3px rgba(26,86,255,.1);
}
.sppro-field input::placeholder { color: #d1d5db; }
.sppro-mono { font-family: 'JetBrains Mono', monospace !important; letter-spacing: .06em; }
.sppro-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sppro-hint { font-size: .72rem; color: #9ca3af; margin: 4px 0 0; }
.sppro-avs-note { font-size: .68rem; font-weight: 400; color: #9ca3af; margin-left: 5px; text-transform: none; letter-spacing: 0; }
.sppro-tooltip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 14px; height: 14px; border-radius: 50%;
	background: #e5e7eb; color: #6b7280;
	font-size: .65rem; font-weight: 700;
	cursor: help; margin-left: 4px; vertical-align: middle;
	text-transform: none; letter-spacing: 0;
	position: relative;
}
.sppro-tooltip:hover::after {
	content: attr(data-tip);
	position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
	background: #111; color: #fff;
	font-size: .72rem; font-weight: 400;
	padding: 5px 9px; border-radius: 6px;
	white-space: nowrap; pointer-events: none;
	z-index: 9;
}

/* ── Icon input ─────────────────────────────────────────────────────────────── */
.sppro-input-icon { position: relative; }
.sppro-input-icon input { padding-left: 38px; }
.sppro-icon {
	position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
	width: 15px; height: 15px; color: #9ca3af; pointer-events: none;
}

/* ── Card number ────────────────────────────────────────────────────────────── */
.sppro-card-wrap { position: relative; }
.sppro-card-wrap input { padding-left: 38px; padding-right: 54px; }
.sppro-icon-card { left: 11px; }
.sppro-brand { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* ── Amount ─────────────────────────────────────────────────────────────────── */
.sppro-amount-fixed {
	display: flex; align-items: baseline; gap: 8px;
	padding: 11px 14px;
	background: #eff6ff; border: 1.5px solid #bfdbfe; border-radius: var(--radius);
}
.sppro-amount-wrap { position: relative; }
.sppro-amount-wrap .sppro-cur { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sppro-amount-wrap input { padding-left: 52px; font-family: 'JetBrains Mono', monospace !important; font-size: 1rem; font-weight: 500; }
.sppro-cur {
	font-size: .7rem; font-weight: 700;
	font-family: 'JetBrains Mono', monospace;
	color: var(--blue); background: #dbeafe;
	padding: 2px 7px; border-radius: 6px;
}
.sppro-amt { font-size: 1.55rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--text); }

/* ── Review summary ─────────────────────────────────────────────────────────── */
.sppro-review {
	background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius);
	padding: 14px 16px; margin-bottom: 14px;
}
.sppro-rrow {
	display: flex; justify-content: space-between; align-items: center;
	padding: 4px 0; font-size: .83rem;
}
.sppro-rrow span:first-child { color: var(--muted); }
.sppro-rrow span:last-child  { font-weight: 500; color: var(--text); }
.sppro-rrow.is-total {
	border-top: 1px solid var(--border);
	margin-top: 8px; padding-top: 10px;
	font-size: 1rem;
}
.sppro-rrow.is-total span { font-weight: 700; color: var(--blue); }

/* ── Trust note ─────────────────────────────────────────────────────────────── */
.sppro-trust {
	display: flex; align-items: flex-start; gap: 7px;
	font-size: .75rem; color: #9ca3af; line-height: 1.55;
	padding: 10px 12px; margin-bottom: 14px;
	background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.sppro-trust svg { flex-shrink: 0; margin-top: 1px; }

/* ── Navigation ─────────────────────────────────────────────────────────────── */
.sppro-nav { display: flex; gap: 10px; margin-top: 4px; }

.sppro-next, .sppro-pay {
	flex: 1; padding: 12px 18px;
	border: none; border-radius: var(--radius);
	background: var(--blue); color: #fff;
	font-family: inherit; font-size: .92rem; font-weight: 600;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 7px;
	transition: background var(--t), transform var(--t), box-shadow var(--t), opacity var(--t);
	box-shadow: 0 4px 12px rgba(26,86,255,.28);
	letter-spacing: -.01em;
}
.sppro-next svg, .sppro-pay svg { width: 14px; height: 14px; flex-shrink: 0; }
.sppro-next:hover, .sppro-pay:hover:not(:disabled) {
	background: var(--blue-dk); transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(26,86,255,.36);
}
.sppro-next:active, .sppro-pay:active:not(:disabled) { transform: translateY(0); }
.sppro-pay:disabled { opacity: .6; cursor: not-allowed; }

.sppro-back {
	flex: 0 0 auto; padding: 12px 15px;
	border: 1.5px solid var(--border); border-radius: var(--radius);
	background: var(--bg); color: var(--muted);
	font-family: inherit; font-size: .92rem; font-weight: 500;
	cursor: pointer;
	display: flex; align-items: center; gap: 6px;
	transition: background var(--t);
}
.sppro-back svg { width: 14px; height: 14px; }
.sppro-back:hover { background: #f3f4f6; }

.sppro-btn-text, .sppro-btn-load { display: flex; align-items: center; gap: 7px; }
@keyframes sppro-spin { to { transform: rotate(360deg); } }
.sppro-spin { animation: sppro-spin .72s linear infinite; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.sppro-header { padding: 20px 18px 16px; }
	.sppro-body   { padding: 16px 16px 14px; }
	.sppro-steps  { padding: 14px 16px 0; }
	.sppro-row    { grid-template-columns: 1fr; }
}

/* ── PCI badge (shown above card fields) ─────────────────────────────────── */
.sppro-pci-badge {
	display: flex; align-items: center; gap: 7px;
	font-size: .74rem; color: #065f46;
	background: #f0fdf4; border: 1px solid #bbf7d0;
	border-radius: 8px; padding: 9px 12px;
	margin-bottom: 16px; line-height: 1.5;
}
.sppro-pci-badge svg { flex-shrink: 0; color: #059669; }