/**
 * Zikabrims Talent Ambassador Program — front-end styles.
 * Scoped to .zkref-* so it never affects the rest of the theme.
 * Inherits the theme's brand colours when available.
 */

.zkref-wrap {
	--zkref-primary: var(--pd-primary, #0967D2);
	--zkref-deep: var(--pd-deep, #040A33);
	--zkref-line: var(--pd-line, #e5e9f0);
	--zkref-muted: var(--pd-muted, #64748b);
	--zkref-soft: #f6f8fc;
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 0 40px;
	color: var(--pd-ink, #1e293b);
	font: inherit;
}

/* ---------- Hero ---------- */
.zkref-hero { text-align: center; margin-bottom: 28px; }
.zkref-kicker {
	display: inline-block; letter-spacing: .28em; text-transform: uppercase;
	font-size: .74rem; font-weight: 800; color: var(--zkref-primary); margin-bottom: 10px;
}
.zkref-hero h1 { margin: 0 0 8px; }
.zkref-hero p { margin: 0; color: var(--zkref-muted); }
.zkref-level {
	display: inline-block; padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem;
	background: rgba(9, 103, 210, .1); color: var(--zkref-primary);
}
.zkref-level.is-senior { background: #fff4d6; color: #8a5b00; }

/* ---------- Layout: dashboard + explanation side by side ---------- */
.zkref-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}
.zkref-main { min-width: 0; }
.zkref-side { min-width: 0; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px; }

/* ---------- Cards ---------- */
.zkref-card {
	background: #fff; border: 1px solid var(--zkref-line); border-radius: 16px;
	padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(4, 10, 51, .06);
}
.zkref-side .zkref-card { margin-bottom: 0; }
.zkref-card--center { text-align: center; }
.zkref-card h2 { margin: 0 0 8px; font-size: 1.3rem; }
.zkref-card h3 { margin: 0 0 10px; font-size: 1.08rem; }
.zkref-card h4 { margin: 16px 0 8px; font-size: .95rem; }
.zkref-muted { color: var(--zkref-muted); font-size: .92rem; }
.zkref-fineprint { font-size: .84rem; margin-top: 12px; }

/* ---------- Buttons + copy field ---------- */
.zkref-btn {
	display: inline-block; background: var(--zkref-primary); color: #fff !important;
	border: 0; border-radius: 10px; padding: 12px 20px; font-weight: 700; font-size: .94rem;
	cursor: pointer; text-decoration: none !important; transition: filter .2s ease, transform .2s ease;
}
.zkref-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.zkref-copy { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; }
.zkref-copy input {
	flex: 1 1 240px; min-width: 0; padding: 12px 14px;
	border: 1px solid var(--zkref-line); border-radius: 10px; font: inherit; background: var(--zkref-soft);
}

/* ---------- Stats ---------- */
.zkref-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.zkref-stat {
	background: #fff; border: 1px solid var(--zkref-line); border-radius: 14px;
	padding: 16px; text-align: center;
}
.zkref-stat strong { display: block; font-size: 1.45rem; font-weight: 800; color: var(--zkref-deep); line-height: 1.2; }
.zkref-stat span { display: block; font-size: .78rem; color: var(--zkref-muted); margin-top: 4px; }
.zkref-stat--accent { background: var(--zkref-primary); border-color: var(--zkref-primary); }
.zkref-stat--accent strong, .zkref-stat--accent span { color: #fff; }

/* ---------- Tables ---------- */
.zkref-tablewrap { overflow-x: auto; }
.zkref-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.zkref-table th, .zkref-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--zkref-line); vertical-align: top; }
.zkref-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--zkref-muted); }

.zkref-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: #eef0f5; color: #475569; }
.zkref-pill--placed, .zkref-pill--paid { background: #e8f6ec; color: #1A7F26; }
.zkref-pill--onboarded { background: #e6f0fb; color: #0967D2; }
.zkref-pill--approved, .zkref-pill--requested { background: #fef3da; color: #b45309; }
.zkref-pill--rejected { background: #fee2e2; color: #b91c1c; }

/* ---------- Notices ---------- */
.zkref-notice { padding: 12px 16px; border-radius: 10px; font-weight: 600; margin-bottom: 18px; font-size: .92rem; }
.zkref-notice--ok { background: #e8f6ec; color: #1A7F26; }
.zkref-notice--err { background: #fee2e2; color: #b91c1c; }
.zkref-notice--info { background: #e6f0fb; color: #0b4f9e; }

/* ---------- Forms (payout details / request) ---------- */
.zkref-form label { display: block; margin-bottom: 12px; font-weight: 600; font-size: .9rem; }
.zkref-form input[type="text"], .zkref-form input[type="email"], .zkref-form select, .zkref-form textarea {
	width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--zkref-line);
	border-radius: 10px; font: inherit; font-weight: 400; background: var(--zkref-soft);
}
.zkref-form input:focus, .zkref-form select:focus, .zkref-form textarea:focus {
	outline: none; border-color: var(--zkref-primary); box-shadow: 0 0 0 3px rgba(9, 103, 210, .12);
}
.zkref-radios { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.zkref-radios label { display: flex; align-items: center; gap: 8px; margin: 0; }
.zkref-radios input { width: auto; margin: 0; }

/* ---------- Explanation panel ---------- */
.zkref-stage {
	display: flex; flex-direction: column; gap: 2px;
	border: 1px solid var(--zkref-line); border-left: 4px solid var(--zkref-primary);
	border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; background: var(--zkref-soft);
}
.zkref-stage--alt { border-left-color: #1A7F26; }
.zkref-stage__tag { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--zkref-muted); }
.zkref-stage strong { font-size: 1.6rem; font-weight: 800; color: var(--zkref-deep); line-height: 1.1; }
.zkref-stage__label { font-size: .85rem; color: var(--zkref-muted); }

.zkref-journey { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--zkref-muted); }
.zkref-journey span { background: var(--zkref-soft); border-radius: 8px; padding: 4px 10px; }

.zkref-steps { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.6; }
.zkref-steps li { margin-bottom: 6px; }
.zkref-steps--sm { font-size: .82rem; }
.zkref-ticks { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.zkref-ticks li { position: relative; padding-left: 24px; margin-bottom: 6px; }
.zkref-ticks li::before { content: "✓"; position: absolute; left: 0; color: #1A7F26; font-weight: 800; }

.zkref-progress { height: 10px; background: var(--zkref-line); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.zkref-progress__bar { height: 100%; background: var(--zkref-primary); border-radius: 999px; transition: width .4s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.zkref-layout { grid-template-columns: 1fr; }
	.zkref-side { position: static; }
}