/* ===== VEEUXE Affiliate — لوحة المسوّق ===== */
.vxaf-wrap {
	--vxaf-primary: #6d28d9;
	--vxaf-primary-dark: #4c1d95;
	--vxaf-primary-light: #ede9fe;
	--vxaf-ink: #1e1b2e;
	--vxaf-muted: #6b7280;
	--vxaf-line: #eceaf3;
	--vxaf-bg: #faf9fd;
	--vxaf-success: #18743a;
	--vxaf-success-bg: #e9f8ee;
	--vxaf-warning: #92400e;
	--vxaf-warning-bg: #fffbeb;
	--vxaf-warning-line: #fde68a;
	--vxaf-danger: #dc2626;
	--vxaf-danger-bg: #fef2f2;
	--vxaf-radius: 18px;
	--vxaf-shadow: 0 6px 24px -12px rgba(30, 27, 46, .12);
	color: var(--vxaf-ink);
	font-family: inherit;
	max-width: 1120px;
	margin: 28px auto;
	line-height: 1.8;
}

.vxaf-wrap *, .vxaf-wrap *::before, .vxaf-wrap *::after { box-sizing: border-box; }
.vxaf-wrap a { color: var(--vxaf-primary); text-decoration: underline; text-underline-offset: 3px; }
.vxaf-wrap a:hover { color: var(--vxaf-primary-dark); }

/* ===== Hero ===== */
.vxaf-hero {
	background: linear-gradient(135deg, var(--vxaf-primary) 0%, var(--vxaf-primary-dark) 100%);
	border-radius: 24px;
	padding: 46px 38px;
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
	box-shadow: 0 20px 50px -18px rgba(109, 40, 217, .45);
	margin-bottom: 22px;
}
.vxaf-hero::before {
	content: "";
	position: absolute;
	width: 320px; height: 320px;
	background: rgba(255, 255, 255, .08);
	border-radius: 50%;
	top: -150px; left: -90px;
}
.vxaf-hero::after {
	content: "";
	position: absolute;
	width: 210px; height: 210px;
	background: rgba(255, 255, 255, .06);
	border-radius: 50%;
	bottom: -105px; right: -55px;
}
.vxaf-hero-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .3);
	padding: 6px 18px; border-radius: 99px;
	font-size: 13px; font-weight: 500;
	margin-bottom: 18px;
	position: relative; z-index: 1;
}
.vxaf-hero h2 {
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 800;
	color: #fff;
	margin: 0 0 10px;
	position: relative; z-index: 1;
}
.vxaf-hero p {
	font-size: clamp(14px, 2vw, 17px);
	opacity: .92;
	max-width: 620px;
	margin: 0 auto;
	position: relative; z-index: 1;
}
.vxaf-hero-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; flex-wrap: wrap;
	position: relative; z-index: 1;
	text-align: right;
}
.vxaf-hero-row h2 { margin-bottom: 4px; }
.vxaf-hero-code { margin: 0; }
.vxaf-hero-code strong {
	background: rgba(255, 255, 255, .16);
	border: 1px dashed rgba(255, 255, 255, .45);
	border-radius: 10px;
	padding: 2px 14px;
	letter-spacing: 1px;
	font-family: inherit;
	direction: ltr;
	display: inline-block;
}
.vxaf-hero-dashboard { text-align: initial; }
.vxaf-hero-dashboard .vxaf-hero-badge { display: inline-flex; }
.vxaf-hero-dashboard .vxaf-status {
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	font-weight: 700;
	padding: 7px 18px;
}

/* ===== Stats ===== */
.vxaf-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}
.vxaf-stat {
	background: #fff;
	border: 1px solid var(--vxaf-line);
	border-radius: var(--vxaf-radius);
	padding: 22px;
	box-shadow: var(--vxaf-shadow);
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}
.vxaf-stat:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px -14px rgba(109, 40, 217, .25);
}
.vxaf-stat-icon {
	display: inline-flex;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: var(--vxaf-primary-light);
	border-radius: 13px;
	margin-bottom: 12px;
}
.vxaf-stat-icon::before {
	content: "";
	width: 20px; height: 20px;
	background: var(--vxaf-primary);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.vxaf-stat-icon-clicks::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9l5 12 1.8-5.2L21 14 9 9z'/%3E%3Cpath d='M7.2 2.2L8 5.1M5.1 8l-2.9-.8M14 4.1L12 6M6 12l-1.9 2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9l5 12 1.8-5.2L21 14 9 9z'/%3E%3Cpath d='M7.2 2.2L8 5.1M5.1 8l-2.9-.8M14 4.1L12 6M6 12l-1.9 2'/%3E%3C/svg%3E");
}
.vxaf-stat-icon-pending::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
.vxaf-stat-icon-balance::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
}
.vxaf-stat-label { color: var(--vxaf-muted); display: block; font-size: 14px; margin-bottom: 2px; }
.vxaf-stat strong {
	color: var(--vxaf-primary);
	font-size: 1.55em;
	font-weight: 800;
}
.vxaf-stat-balance {
	background: linear-gradient(135deg, var(--vxaf-primary-light) 0%, #fff 100%);
	border-color: #ddd3f7;
}

/* ===== Sections / cards ===== */
.vxaf-section, .vxaf-card {
	background: #fff;
	border: 1px solid var(--vxaf-line);
	border-radius: var(--vxaf-radius);
	padding: 26px 28px;
	margin-bottom: 20px;
	box-shadow: var(--vxaf-shadow);
}
.vxaf-section h3 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 800;
	color: var(--vxaf-ink);
}
.vxaf-section-hint { color: var(--vxaf-muted); margin: 0 0 16px; font-size: 14.5px; }
.vxaf-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vxaf-columns .vxaf-section { margin-bottom: 0; }

/* ===== Forms ===== */
.vxaf-form, .vxaf-link-builder { display: grid; gap: 16px; }
.vxaf-field { display: grid; gap: 7px; }
.vxaf-label { font-weight: 700; font-size: 14.5px; color: var(--vxaf-ink); }
.vxaf-form input, .vxaf-form textarea,
.vxaf-link-builder input, .vxaf-output input {
	width: 100%;
	border: 1.5px solid #dcd6ee;
	border-radius: 12px;
	padding: 12px 14px;
	font: inherit;
	color: var(--vxaf-ink);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.vxaf-form input:focus, .vxaf-form textarea:focus,
.vxaf-link-builder input:focus, .vxaf-output input:focus {
	outline: none;
	border-color: var(--vxaf-primary);
	box-shadow: 0 0 0 4px rgba(109, 40, 217, .12);
}
.vxaf-builder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* ===== Terms checkbox ===== */
.vxaf-terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--vxaf-primary-light);
	border: 1.5px solid #ddd3f7;
	border-radius: 12px;
	padding: 14px 16px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.7;
}
.vxaf-terms input[type="checkbox"] {
	flex-shrink: 0;
	width: 19px; height: 19px;
	margin: 4px 0 0;
	accent-color: var(--vxaf-primary);
	cursor: pointer;
}
.vxaf-terms a { font-weight: 800; }
.vxaf-terms-footer {
	text-align: center;
	color: var(--vxaf-muted);
	font-size: 14px;
	margin: 26px 0 8px;
}

/* ===== Buttons ===== */
.vxaf-wrap .button,
.vxaf-wrap button[type="submit"] {
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	border-radius: 12px;
	padding: 13px 22px;
	min-height: 48px;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.vxaf-wrap .vxaf-btn-primary,
.vxaf-wrap .button.alt {
	background: linear-gradient(135deg, var(--vxaf-primary) 0%, var(--vxaf-primary-dark) 100%);
	border: 0;
	color: #fff;
	box-shadow: 0 10px 24px -10px rgba(109, 40, 217, .55);
}
.vxaf-wrap .vxaf-btn-primary:hover,
.vxaf-wrap .button.alt:hover {
	background: linear-gradient(135deg, #5b21b6 0%, #3b1478 100%);
	color: #fff;
	transform: translateY(-1px);
}
.vxaf-wrap .vxaf-btn-primary:disabled,
.vxaf-wrap .button.alt:disabled {
	background: #c9c2dd;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}
.vxaf-wrap .vxaf-btn-secondary,
.vxaf-wrap .button:not(.alt):not(.vxaf-btn-copy) {
	background: #fff;
	border: 1.5px solid var(--vxaf-primary);
	color: var(--vxaf-primary);
}
.vxaf-wrap .vxaf-btn-secondary:hover,
.vxaf-wrap .button:not(.alt):not(.vxaf-btn-copy):hover {
	background: var(--vxaf-primary-light);
	color: var(--vxaf-primary-dark);
}
.vxaf-btn-block { width: 100%; }
.vxaf-btn-copy {
	background: var(--vxaf-ink);
	border: 0;
	color: #fff;
	white-space: nowrap;
}
.vxaf-btn-copy:hover { background: var(--vxaf-primary-dark); color: #fff; }

/* ===== Link builder output ===== */
.vxaf-output {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	background: var(--vxaf-bg);
	border: 1.5px dashed #cfc6e8;
	border-radius: 14px;
	padding: 12px;
}
.vxaf-output input {
	background: #fff;
	border-style: solid;
	text-align: left;
}

/* ===== Table ===== */
.vxaf-table-wrap { overflow-x: auto; border-radius: 12px; }
.vxaf-table { width: 100%; border-collapse: collapse; }
.vxaf-table th {
	background: var(--vxaf-primary-light);
	color: var(--vxaf-primary-dark);
	font-weight: 800;
	font-size: 13.5px;
}
.vxaf-table th, .vxaf-table td {
	border-bottom: 1px solid var(--vxaf-line);
	padding: 12px 10px;
	text-align: right;
	white-space: nowrap;
}
.vxaf-table tbody tr:hover { background: var(--vxaf-bg); }
.vxaf-table tbody tr:last-child td { border-bottom: 0; }
.vxaf-amount { font-weight: 700; color: var(--vxaf-primary-dark); }
.vxaf-empty { text-align: center; color: var(--vxaf-muted); padding: 26px 10px !important; }

/* ===== Status pills ===== */
.vxaf-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 700;
	background: #eef1f7;
	color: var(--vxaf-ink);
}
.vxaf-status::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.vxaf-status-approved, .vxaf-status-payable, .vxaf-status-paid { background: var(--vxaf-success-bg); color: var(--vxaf-success); }
.vxaf-status-pending, .vxaf-status-requested { background: var(--vxaf-warning-bg); color: var(--vxaf-warning); }
.vxaf-status-reversed, .vxaf-status-rejected, .vxaf-status-suspended { background: var(--vxaf-danger-bg); color: var(--vxaf-danger); }
.vxaf-hero-dashboard .vxaf-status::before { background: #4ade80; }

/* ===== Notices ===== */
.vxaf-message {
	padding: 14px 18px;
	margin: 0 0 18px;
	border-radius: 14px;
	font-weight: 700;
	border: 1.5px solid transparent;
}
.vxaf-message-success { background: var(--vxaf-success-bg); color: var(--vxaf-success); border-color: #bbe5c8; }
.vxaf-message-error { background: var(--vxaf-danger-bg); color: var(--vxaf-danger); border-color: #fecaca; }

/* ===== Payout ===== */
.vxaf-payout-balance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--vxaf-primary-light);
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 12px;
}
.vxaf-payout-balance span { color: var(--vxaf-primary-dark); font-weight: 700; }
.vxaf-payout-balance strong { color: var(--vxaf-primary-dark); font-size: 1.4em; font-weight: 800; }
.vxaf-muted { color: var(--vxaf-muted); font-size: 14px; margin: 0 0 14px; }
.vxaf-payout-list { list-style: none; margin: 16px 0 0; padding: 0; }
.vxaf-payout-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	border-top: 1px solid var(--vxaf-line);
	padding: 11px 0;
	font-size: 14.5px;
}

/* ===== Auth (login gate) ===== */
.vxaf-auth { max-width: 620px; }
.vxaf-auth-card {
	background: #fff;
	border: 1px solid var(--vxaf-line);
	border-radius: var(--vxaf-radius);
	padding: 30px;
	box-shadow: var(--vxaf-shadow);
}
.vxaf-login-form form { display: grid; gap: 16px; }
.vxaf-login-form p { margin: 0; }
.vxaf-login-form label { display: grid; gap: 7px; font-weight: 700; font-size: 14.5px; color: var(--vxaf-ink); }
.vxaf-login-form input[type="text"], .vxaf-login-form input[type="password"] {
	width: 100%;
	border: 1.5px solid #dcd6ee;
	border-radius: 12px;
	padding: 12px 14px;
	font: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.vxaf-login-form input[type="text"]:focus, .vxaf-login-form input[type="password"]:focus {
	outline: none;
	border-color: var(--vxaf-primary);
	box-shadow: 0 0 0 4px rgba(109, 40, 217, .12);
}
.vxaf-login-form .login-remember label {
	display: inline-flex;
	grid-auto-flow: column;
	align-items: center;
	justify-content: start;
	font-weight: 400;
	gap: 8px;
}
.vxaf-login-form .login-remember input { accent-color: var(--vxaf-primary); }
.vxaf-login-form .login-submit input {
	width: 100%;
	min-height: 50px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--vxaf-primary) 0%, var(--vxaf-primary-dark) 100%);
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 10px 24px -10px rgba(109, 40, 217, .55);
	transition: transform .2s ease;
}
.vxaf-login-form .login-submit input:hover { transform: translateY(-1px); }
.vxaf-auth-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
	font-size: 14.5px;
}
.vxaf-auth-links .vxaf-create-account {
	padding: 9px 16px;
	border: 1.5px solid var(--vxaf-primary);
	border-radius: 12px;
	text-decoration: none;
	font-weight: 700;
}
.vxaf-auth-links .vxaf-create-account:hover { background: var(--vxaf-primary-light); }

/* ===== Application status card ===== */
.vxaf-application-status { max-width: 680px; }
.vxaf-status-card {
	background: #fff;
	border: 1px solid var(--vxaf-line);
	border-radius: 22px;
	padding: 44px 34px;
	box-shadow: var(--vxaf-shadow);
	text-align: center;
}
.vxaf-status-card .vxaf-status { margin-bottom: 18px; padding: 7px 18px; font-size: 14px; }
.vxaf-status-card h2 { margin: 0 0 10px; color: var(--vxaf-ink); font-weight: 800; }
.vxaf-status-card > p { color: var(--vxaf-muted); margin: 0; line-height: 1.9; }
.vxaf-status-card-pending { border-top: 4px solid var(--vxaf-warning-line); }
.vxaf-status-card-approved { border-top: 4px solid #86efac; }
.vxaf-status-card-suspended, .vxaf-status-card-rejected { border-top: 4px solid #fecaca; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
	.vxaf-builder-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.vxaf-wrap { margin: 16px auto; }
	.vxaf-stats, .vxaf-columns { grid-template-columns: 1fr; }
	.vxaf-hero { padding: 34px 22px; border-radius: 18px; }
	.vxaf-hero-row { flex-direction: column; align-items: flex-start; }
	.vxaf-section, .vxaf-card, .vxaf-auth-card, .vxaf-status-card { padding: 20px; }
	.vxaf-output { grid-template-columns: 1fr; }
	.vxaf-auth-links { align-items: stretch; flex-direction: column; text-align: center; }
}