/* ===================================================================
 * Zinn Ambassador Programme — frontend styles
 * Cream/gold theme, !important used to beat Botiga theme overrides
 * =================================================================== */

:root {
	--zap-cream: #fdfcf5;
	--zap-card: #ffffff;
	--zap-tag: #fef3d4;
	--zap-rule: #ecd9a0;
	--zap-gold: #d4a537;
	--zap-deep-gold: #b8860b;
	--zap-dark-label: #8a6410;
	--zap-body: #3d3d3d;
	--zap-secondary: #6a6a6a;
	--zap-ok: #2e7d32;
	--zap-not-ok: #c62828;
	--zap-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(184,134,11,0.06);
	--zap-shadow-lg: 0 4px 16px rgba(0,0,0,0.06), 0 12px 40px rgba(184,134,11,0.10);
	--zap-radius: 14px;
	--zap-radius-sm: 8px;
}

/* ===================================================================
 * Cards (used by dashboard widgets)
 * =================================================================== */

.zap-card {
	background: var(--zap-card);
	border: 1px solid var(--zap-rule);
	border-radius: var(--zap-radius);
	box-shadow: var(--zap-shadow);
	padding: 24px;
	margin-bottom: 20px;
	color: var(--zap-body);
	font-size: 15px;
	line-height: 1.55;
}

.zap-card h3 {
	margin: 0 0 12px;
	color: var(--zap-deep-gold);
	font-size: 18px;
	font-weight: 600;
}

.zap-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.zap-status-badge {
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.zap-status-green { background: #e8f5e9; color: var(--zap-ok); }
.zap-status-red { background: #ffebee; color: var(--zap-not-ok); }
.zap-status-amber { background: #fff8e1; color: #b8860b; }

.zap-tracks dt { font-weight: 600; color: var(--zap-dark-label); display: inline-block; min-width: 100px; }
.zap-tracks dd { display: inline-block; margin: 0 0 4px 0; }
.zap-tracks .zap-ok { color: var(--zap-ok); }
.zap-tracks .zap-not-ok { color: var(--zap-secondary); }

.zap-gates {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
}
.zap-gates li {
	padding: 10px 0;
	border-bottom: 1px solid var(--zap-tag);
}
.zap-gates li:last-child { border-bottom: 0; }
.zap-gates .zap-ok::before { content: "✓ "; color: var(--zap-ok); font-weight: 700; }
.zap-gates .zap-not-ok::before { content: "✕ "; color: var(--zap-not-ok); font-weight: 700; }

.zap-warnings { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }

.zap-warning {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 12px;
	align-items: start;
	background: var(--zap-tag);
	border-left: 4px solid var(--zap-gold);
	padding: 12px 16px;
	border-radius: var(--zap-radius-sm);
}
.zap-warning-icon {
	font-size: 18px;
	line-height: 1.2;
	padding-top: 1px;
}
.zap-warning-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zap-warning-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--zap-body, #3d3d3d);
}
.zap-warning-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.zap-warning-countdown {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 100px;
	background: rgba(255,255,255,0.55);
	color: var(--zap-dark-label, #8a6410);
	border: 1px solid rgba(184,134,11,0.25);
}
.zap-warning-cta {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--zap-deep-gold, #b8860b);
	text-decoration: none;
	padding: 5px 12px;
	border-radius: 6px;
	background: rgba(255,255,255,0.6);
	border: 1px solid var(--zap-rule, #ecd9a0);
	transition: all 0.2s ease;
}
.zap-warning-cta:hover {
	background: var(--zap-deep-gold, #b8860b);
	color: #fff !important;
	border-color: var(--zap-deep-gold, #b8860b);
}

/* Severity variants */
.zap-warning--info {
	background: rgba(184,134,11,0.05);
	border-left-color: rgba(184,134,11,0.5);
}
.zap-warning--warning {
	background: var(--zap-tag);
	border-left-color: var(--zap-gold);
}
.zap-warning--critical {
	background: #fff0f0;
	border-left-color: #c0392b;
}
.zap-warning--critical .zap-warning-countdown {
	background: #c0392b;
	color: #fff;
	border-color: #c0392b;
}
.zap-warning--critical .zap-warning-text {
	color: #8b1a0e;
	font-weight: 600;
}

.zap-earnings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
}
.zap-earnings-cell {
	padding: 14px;
	background: var(--zap-tag);
	border-radius: var(--zap-radius-sm);
	text-align: center;
}
.zap-earnings-label { font-size: 11px; color: var(--zap-dark-label); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.zap-earnings-value { font-size: 26px; font-weight: 700; color: var(--zap-body); margin-top: 4px; }
.zap-earnings-value.zap-highlight { color: var(--zap-deep-gold); }

.zap-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.zap-table th { text-align: left; color: var(--zap-dark-label); border-bottom: 2px solid var(--zap-rule); padding: 10px 4px; font-weight: 600; }
.zap-table td { padding: 10px 4px; border-bottom: 1px solid var(--zap-tag); }

.zap-leaderboard { list-style: none; padding: 0; counter-reset: rank; margin: 0; }
.zap-leaderboard li {
	display: grid;
	grid-template-columns: 60px 1fr 100px;
	padding: 12px 0;
	border-bottom: 1px solid var(--zap-tag);
	align-items: center;
}
.zap-leaderboard .zap-rank { color: var(--zap-deep-gold); font-weight: 700; }
.zap-leaderboard .zap-amount { text-align: right; font-weight: 600; color: var(--zap-deep-gold); }

.zap-notice {
	padding: 14px 16px;
	border-radius: var(--zap-radius-sm);
}
.zap-notice-info { background: var(--zap-tag); }


/* ===================================================================
 * Buttons (with Botiga override)
 * =================================================================== */

.zap-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 24px !important;
	border-radius: var(--zap-radius-sm) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
	cursor: pointer !important;
	line-height: 1.4 !important;
	border: 1px solid transparent !important;
	box-sizing: border-box !important;
	text-align: center !important;
}
.zap-btn:hover { opacity: 0.92 !important; text-decoration: none !important; transform: translateY(-1px); }
.zap-btn:active { transform: translateY(0); }

.zap-btn-primary {
	background: var(--zap-deep-gold) !important;
	color: #ffffff !important;
	border-color: var(--zap-deep-gold) !important;
	box-shadow: 0 2px 6px rgba(184,134,11,0.25);
}
.zap-btn-primary:hover { background: var(--zap-gold) !important; color: #ffffff !important; border-color: var(--zap-gold) !important; }

.zap-btn-secondary {
	background: #ffffff !important;
	color: var(--zap-deep-gold) !important;
	border-color: var(--zap-rule) !important;
}
.zap-btn-secondary:hover { background: var(--zap-tag) !important; color: var(--zap-deep-gold) !important; border-color: var(--zap-gold) !important; }

.zap-btn-large {
	padding: 14px 32px !important;
	font-size: 16px !important;
}


/* ===================================================================
 * Application gate (logged-out visitors)
 * =================================================================== */

.zap-application-gate {
	text-align: center;
	padding: 40px 28px !important;
	max-width: 600px;
	margin: 0 auto;
}
.zap-application-gate h3 {
	margin: 0 0 12px !important;
	font-size: 26px !important;
	color: var(--zap-deep-gold) !important;
}
.zap-application-gate > p {
	color: var(--zap-secondary) !important;
	margin: 0 0 28px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}
.zap-application-gate-buttons {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
	margin: 28px 0 !important;
}
.zap-application-gate-note {
	font-size: 13px !important;
	color: var(--zap-dark-label) !important;
	margin-top: 24px !important;
	padding-top: 20px;
	border-top: 1px solid var(--zap-tag);
}

@media (max-width: 480px) {
	.zap-application-gate-buttons { flex-direction: column !important; align-items: stretch !important; }
	.zap-application-gate-buttons .zap-btn { width: 100% !important; }
}


/* ===================================================================
 * Application form
 * =================================================================== */

.zap-application-form {
	max-width: 860px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.55;
	color: var(--zap-body);
}

.zap-app-intro {
	text-align: center;
	margin-bottom: 28px;
	padding: 0 8px;
}
.zap-app-intro h2 {
	color: var(--zap-deep-gold) !important;
	font-size: 30px !important;
	margin: 0 0 12px !important;
	font-weight: 700 !important;
}
.zap-app-intro p {
	color: var(--zap-secondary);
	font-size: 16px;
	max-width: 640px;
	margin: 0 auto;
}

.zap-form .zap-fieldset {
	background: var(--zap-card) !important;
	border: 1px solid var(--zap-rule) !important;
	border-radius: var(--zap-radius) !important;
	padding: 24px 24px 16px !important;
	margin: 0 0 20px !important;
	box-shadow: var(--zap-shadow);
}

.zap-form .zap-fieldset legend {
	font-weight: 700 !important;
	color: var(--zap-deep-gold) !important;
	padding: 0 10px !important;
	font-size: 16px !important;
	background: var(--zap-card);
	border-radius: var(--zap-radius-sm);
}

.zap-help-text {
	color: var(--zap-secondary);
	font-size: 14px;
	margin: 0 0 16px;
	line-height: 1.5;
}

/* Track selection cards */
.zap-track-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 8px;
}
@media (max-width: 720px) {
	.zap-track-cards { grid-template-columns: 1fr; }
}
.zap-track-card {
	display: block !important;
	cursor: pointer;
	background: var(--zap-cream) !important;
	border: 2px solid var(--zap-rule) !important;
	border-radius: var(--zap-radius) !important;
	padding: 20px !important;
	margin: 0 !important;
	transition: all 0.15s ease;
	position: relative;
}
.zap-track-card:hover {
	border-color: var(--zap-gold) !important;
	background: var(--zap-tag) !important;
}
.zap-track-card .zap-track-checkbox {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 22px;
	height: 22px;
	cursor: pointer;
	accent-color: var(--zap-deep-gold);
}
.zap-track-card.is-checked,
.zap-track-card:has(.zap-track-checkbox:checked) {
	border-color: var(--zap-deep-gold) !important;
	background: var(--zap-tag) !important;
	box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
}
.zap-track-card-body { padding-right: 36px; }
.zap-track-card-body h3 {
	color: var(--zap-deep-gold) !important;
	margin: 0 0 6px !important;
	font-size: 18px !important;
}
.zap-track-tagline {
	font-weight: 600;
	color: var(--zap-body);
	margin: 0 0 12px;
	font-size: 14px;
}
.zap-track-perks {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13.5px;
	color: var(--zap-secondary);
}
.zap-track-perks li {
	padding: 4px 0 4px 20px;
	position: relative;
	line-height: 1.5;
}
.zap-track-perks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--zap-deep-gold);
	font-weight: 700;
}

/* Form grid (2-column on desktop, 1 on mobile) */
.zap-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}
@media (max-width: 600px) {
	.zap-form-grid { grid-template-columns: 1fr; }
}
.zap-field { display: flex; flex-direction: column; min-width: 0; }
.zap-field-full { grid-column: 1 / -1; }

.zap-field label {
	display: block !important;
	font-weight: 600 !important;
	color: var(--zap-body) !important;
	margin: 0 0 6px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}

.zap-field small {
	color: var(--zap-secondary);
	font-size: 12.5px;
	margin-top: 6px;
	line-height: 1.4;
}

.zap-required { color: var(--zap-not-ok); font-weight: 700; }

/* Inputs (overriding theme styles) */
.zap-form input[type="text"],
.zap-form input[type="email"],
.zap-form input[type="url"],
.zap-form input[type="tel"],
.zap-form input[type="password"],
.zap-form input[type="file"],
.zap-form select,
.zap-form textarea {
	width: 100% !important;
	padding: 11px 13px !important;
	border: 1px solid var(--zap-rule) !important;
	border-radius: var(--zap-radius-sm) !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--zap-body) !important;
	background: #ffffff !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-height: auto !important;
	height: auto !important;
}
.zap-form input[type="file"] { padding: 8px !important; background: var(--zap-cream) !important; }
.zap-form textarea { min-height: 96px !important; resize: vertical !important; }

.zap-form input:focus,
.zap-form select:focus,
.zap-form textarea:focus {
	outline: none !important;
	border-color: var(--zap-deep-gold) !important;
	box-shadow: 0 0 0 3px rgba(184,134,11,0.12) !important;
}

.zap-form input::placeholder,
.zap-form textarea::placeholder { color: #aaa; opacity: 1; }

/* Terms checkbox */
.zap-terms-fieldset { padding: 18px 24px !important; }
.zap-checkbox-label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	font-size: 15px !important;
	color: var(--zap-body) !important;
	cursor: pointer;
	line-height: 1.5 !important;
	margin: 0 !important;
}
.zap-checkbox-label input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	margin-top: 1px !important;
	accent-color: var(--zap-deep-gold);
	cursor: pointer;
	flex-shrink: 0;
}
.zap-checkbox-label a { color: var(--zap-deep-gold); font-weight: 600; }

/* Submit row */
.zap-submit-row {
	margin: 24px 0 8px;
	text-align: center;
}
.zap-form-feedback {
	margin-top: 16px;
	min-height: 24px;
}

/* Application submission success notice */
.zap-success-notice {
	background: #e8f5e9;
	border: 1px solid #2e7d32;
	border-radius: var(--zap-radius);
	padding: 24px;
	margin: 16px 0;
}
.zap-success-notice h4 { margin: 0 0 12px; color: #1b5e20; font-size: 18px; }
.zap-success-notice p { margin: 0; color: var(--zap-body); font-size: 15px; line-height: 1.5; }
.zap-success-notice a { color: var(--zap-deep-gold); text-decoration: underline; font-weight: 600; }

/* ===================================================================
 * Leaderboard prize header
 * =================================================================== */
.zap-leaderboard-card { padding: 0 !important; overflow: hidden; }

/* v1.0.49 — inset non-header children of the leaderboard card so they
 * don't run flush to the outer card edges. The header section keeps
 * its own gradient banner (intentional edge-to-edge); the OL list and
 * the empty-state message get 24px horizontal padding matching the
 * header's left/right padding. Scaling-indicator banner + last-month
 * section already have matching margin set inline in leaderboard.php. */
.zap-leaderboard-card > .zap-leaderboard { padding: 0 24px 18px; }
.zap-leaderboard-card > .zap-leaderboard-empty { padding: 0 24px 24px; margin: 0; text-align: center; color: var(--zap-dark-label); }
.zap-leaderboard-header {
	background: linear-gradient(135deg, var(--zap-tag) 0%, var(--zap-cream) 100%);
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--zap-rule);
}
.zap-leaderboard-header h3 {
	margin: 0 0 12px !important;
	color: var(--zap-deep-gold) !important;
	font-size: 20px !important;
}
.zap-leaderboard-prize-pool {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin-top: 8px;
}
.zap-leaderboard-prize-pool-total {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.zap-leaderboard-prize-pool-label {
	font-size: 11px;
	color: var(--zap-dark-label);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.zap-leaderboard-prize-pool-amount {
	font-size: 26px;
	font-weight: 800;
	color: var(--zap-deep-gold);
	line-height: 1;
}
.zap-leaderboard-prize-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1;
}
.zap-leaderboard-prize-list li {
	background: #ffffff;
	border: 1px solid var(--zap-rule);
	border-radius: 100px;
	padding: 5px 12px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.zap-prize-rank { font-weight: 700; }
.zap-prize-amount { color: var(--zap-deep-gold); font-weight: 700; }

.zap-leaderboard-card .zap-leaderboard {
	margin: 0;
	padding: 0 24px;
}
.zap-leaderboard li {
	grid-template-columns: 60px 1fr 100px auto !important;
	gap: 12px;
}
.zap-projected-prize {
	background: var(--zap-tag);
	color: var(--zap-deep-gold);
	border-radius: 100px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	min-width: 56px;
}
.zap-leaderboard-empty {
	padding: 24px;
	text-align: center;
	color: var(--zap-secondary);
}

@media (max-width: 600px) {
	.zap-leaderboard-prize-pool { flex-direction: column; align-items: flex-start; }
	.zap-leaderboard li { grid-template-columns: 50px 1fr 90px !important; }
	.zap-leaderboard li .zap-projected-prize { display: none; }
}