/*
 * TopOpti Affiliates: frontend styles.
 *
 * Everything hangs off CSS variables so a theme can restyle without overriding
 * selectors. Set these on :root or .toaff in your theme.
 */
.toaff {
	--toaff-primary: var(--e-global-color-accent, var(--ast-global-color-0, #1a1a1a));
	--toaff-primary-contrast: #ffffff;
	--toaff-surface: #ffffff;
	--toaff-surface-alt: var(--ast-global-color-5, #f5f6f8);
	--toaff-border: var(--ast-global-color-7, #e2e5ea);
	--toaff-text: inherit;
	--toaff-muted: #6b7280;
	--toaff-radius: 12px;
	--toaff-radius-sm: 8px;
	--toaff-gap: 20px;
	--toaff-success-bg: #e8f7ee; --toaff-success-fg: #146c3a;
	--toaff-warning-bg: #fff6df; --toaff-warning-fg: #8a5a00;
	--toaff-error-bg: #fdecec;   --toaff-error-fg: #a11a1a;
	--toaff-info-bg: #eaf1fb;    --toaff-info-fg: #1f4e8c;
	color: var(--toaff-text);
	line-height: 1.5;
	box-sizing: border-box;
}
.toaff *, .toaff *::before, .toaff *::after { box-sizing: inherit; }

.toaff-card {
	background: var(--toaff-surface);
	border: 1px solid var(--toaff-border);
	border-radius: var(--toaff-radius);
	padding: 24px;
	margin: 0 0 var(--toaff-gap);
}
.toaff-card--center { text-align: center; }
.toaff-card__title {
	font-size: 1.15em;
	font-weight: 600;
	margin: 0 0 12px;
	line-height: 1.3;
}
.toaff-muted { color: var(--toaff-muted); }
.toaff-help { display: block; font-size: .875em; color: var(--toaff-muted); margin: 6px 0 0; }
.toaff-label { display: block; font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--toaff-muted); margin: 0 0 6px; }
.toaff-required { color: var(--toaff-error-fg); margin-left: 2px; }

/* Buttons */
.toaff-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--toaff-primary); color: var(--toaff-primary-contrast);
	border: 1px solid var(--toaff-primary); border-radius: 999px;
	padding: 11px 22px; font-weight: 600; font-size: .95em; line-height: 1;
	cursor: pointer; text-decoration: none; transition: filter .15s, background .15s;
}
.toaff-btn:hover, .toaff-btn:focus { filter: brightness(1.1); color: var(--toaff-primary-contrast); text-decoration: none; }
.toaff-btn--secondary { background: transparent; color: var(--toaff-primary); }
.toaff-btn--secondary:hover, .toaff-btn--secondary:focus { background: var(--toaff-surface-alt); color: var(--toaff-primary); filter: none; }

/* Copy rows */
.toaff-copy-row { margin: 16px 0 0; }
.toaff-copy { display: flex; gap: 8px; flex-wrap: wrap; }
.toaff-copy__input {
	flex: 1 1 220px; min-width: 0; padding: 11px 14px;
	border: 1px solid var(--toaff-border); border-radius: var(--toaff-radius-sm);
	background: var(--toaff-surface-alt); font-size: .95em; color: var(--toaff-text);
}
.toaff-copy__input--code { font-weight: 700; letter-spacing: .08em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.toaff-copy__btn { flex: 0 0 auto; }
.toaff-copy__btn.is-copied { background: var(--toaff-success-bg); color: var(--toaff-success-fg); border-color: transparent; }

/* Stats */
.toaff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 var(--toaff-gap); }
.toaff-stat {
	background: var(--toaff-surface-alt); border-radius: var(--toaff-radius);
	padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.toaff-stat--primary { background: var(--toaff-primary); color: var(--toaff-primary-contrast); }
.toaff-stat--primary .toaff-stat__label, .toaff-stat--primary .toaff-stat__hint { color: inherit; opacity: .8; }
.toaff-stat__label { font-size: .75em; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--toaff-muted); }
.toaff-stat__value { font-size: 1.7em; font-weight: 700; line-height: 1.1; }
.toaff-stat__value .woocommerce-Price-amount { font-size: inherit; }
.toaff-stat__hint { font-size: .8em; color: var(--toaff-muted); }

/* Tables */
.toaff-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.toaff-table { width: 100%; border-collapse: collapse; font-size: .92em; margin: 0; }
.toaff-table th, .toaff-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--toaff-border); vertical-align: middle; }
.toaff-table th { font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--toaff-muted); font-weight: 600; background: transparent; }
.toaff-table tr:last-child td { border-bottom: 0; }
.toaff-table .toaff-num { text-align: right; white-space: nowrap; }

/* Badges */
.toaff-badge {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-size: .75em; font-weight: 600; letter-spacing: .02em; line-height: 1.4; white-space: nowrap;
	background: var(--toaff-surface-alt); color: var(--toaff-muted);
}
.toaff-badge--pending { background: var(--toaff-warning-bg); color: var(--toaff-warning-fg); }
.toaff-badge--confirmed, .toaff-badge--active { background: var(--toaff-success-bg); color: var(--toaff-success-fg); }
.toaff-badge--paid { background: var(--toaff-info-bg); color: var(--toaff-info-fg); }
.toaff-badge--void, .toaff-badge--rejected, .toaff-badge--inactive { background: var(--toaff-error-bg); color: var(--toaff-error-fg); }
.toaff-badge--you { background: var(--toaff-primary); color: var(--toaff-primary-contrast); margin-left: 6px; }

/* Notices */
.toaff-notice { border-radius: var(--toaff-radius-sm); padding: 14px 18px; margin: 0 0 var(--toaff-gap); }
.toaff-notice--success { background: var(--toaff-success-bg); color: var(--toaff-success-fg); }
.toaff-notice--error { background: var(--toaff-error-bg); color: var(--toaff-error-fg); }
.toaff-notice--info { background: var(--toaff-info-bg); color: var(--toaff-info-fg); }
.toaff-notice p:last-child { margin-bottom: 0; }

/* Forms */
.toaff-form .toaff-field { margin: 0 0 16px; }
.toaff-form .toaff-input {
	width: 100%; padding: 11px 14px; border: 1px solid var(--toaff-border);
	border-radius: var(--toaff-radius-sm); background: var(--toaff-surface); font-size: 1em; color: var(--toaff-text);
}
.toaff-form .toaff-input:focus { outline: 2px solid var(--toaff-primary); outline-offset: 1px; border-color: var(--toaff-primary); }
.toaff-field--check label { display: flex; gap: 10px; align-items: flex-start; font-size: .95em; cursor: pointer; }
.toaff-field--check input { margin-top: 4px; flex: 0 0 auto; }
.toaff-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Leaderboard */
.toaff-leaderboard__list { list-style: none; margin: 0; padding: 0; }
.toaff-leaderboard__row {
	display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center;
	padding: 10px 0; border-bottom: 1px solid var(--toaff-border);
}
.toaff-leaderboard__row:last-child { border-bottom: 0; }
.toaff-leaderboard__row.is-you { background: var(--toaff-surface-alt); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--toaff-radius-sm); }
.toaff-leaderboard__rank {
	width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: var(--toaff-surface-alt); font-weight: 700; font-size: .85em;
}
.toaff-leaderboard__row:nth-child(1) .toaff-leaderboard__rank { background: var(--toaff-primary); color: var(--toaff-primary-contrast); }
.toaff-leaderboard__name { font-weight: 600; }
.toaff-leaderboard__orders, .toaff-leaderboard__earnings { font-size: .9em; color: var(--toaff-muted); white-space: nowrap; }
.toaff-leaderboard__period { font-size: .85em; margin: -6px 0 12px; }

@media (max-width: 600px) {
	.toaff-card { padding: 18px; }
	.toaff-leaderboard__row { grid-template-columns: 30px 1fr; }
	.toaff-leaderboard__orders, .toaff-leaderboard__earnings { grid-column: 2; }
}