/**
 * YITH Affiliate Addons — Modern Dashboard Skin
 * Re-skins the YITH WooCommerce Affiliates front-end dashboard (nav tabs,
 * stat boxes, tables, forms, pagination, modal) without touching core
 * plugin templates. Every rule is scoped under body.wt3-wap-modern-dashboard
 * so nothing else on the site is affected.
 */

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

/* -----------------------------------------------------------------------
 * 1. Design tokens
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard {
	--wap-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--wap-ink: #14181f;
	--wap-ink-soft: #6b7280;
	--wap-ink-faint: #9aa1ac;
	--wap-bg: #f4f6f9;
	--wap-card: #ffffff;
	--wap-border: #e7eaf0;
	--wap-accent: #0f9d8f;
	--wap-accent-dark: #0b7d72;
	--wap-accent-soft: #e6f6f4;
	--wap-danger: #e0433f;
	--wap-danger-soft: #fdecec;
	--wap-warning: #b6790a;
	--wap-warning-soft: #fdf3e2;
	--wap-success: #1a9c62;
	--wap-success-soft: #e7f8ef;
	--wap-radius-lg: 16px;
	--wap-radius-md: 12px;
	--wap-radius-sm: 8px;
	--wap-shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 10px 24px -12px rgba(20, 24, 31, 0.12);
	font-family: var(--wap-font);
	background: var(--wap-bg);
	color: var(--wap-ink);
}

/* -----------------------------------------------------------------------
 * 2. Layout shell
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard .entry-content,
body.wt3-wap-modern-dashboard #primary,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard"] {
	font-family: var(--wap-font);
}

/* Center the whole dashboard in the page instead of hugging the left edge.
   `margin: auto` alone isn't enough when the theme renders this page inside
   a narrower, left-anchored column (e.g. a leftover two-column/sidebar
   layout where the sidebar itself is empty) — auto-centering only centers
   *inside* that narrow column, not on the actual page. To fix this
   regardless of the theme's layout, we break the wrapper out to the full
   viewport width using vw units (which are always relative to the browser
   viewport, not the parent element) and then re-create the max-width
   column inside that, so it always ends up centered on the real page. */
body.wt3-wap-modern-dashboard {
	overflow-x: hidden;
}

/* Remove the theme's decorative background shape/gradient on this page only.
   This isn't something our plugin adds — it comes from the theme's page
   wrapper (background-image or a ::before/::after pseudo-element). We blank
   out the most common places themes put this kind of decoration, scoped
   strictly to the dashboard page so nothing else on the site is affected. */
body.wt3-wap-modern-dashboard,
body.wt3-wap-modern-dashboard html,
body.wt3-wap-modern-dashboard #content,
body.wt3-wap-modern-dashboard .site-main,
body.wt3-wap-modern-dashboard .page-header,
body.wt3-wap-modern-dashboard .page-content {
	background-image: none !important;
}

body.wt3-wap-modern-dashboard::before,
body.wt3-wap-modern-dashboard::after,
body.wt3-wap-modern-dashboard #content::before,
body.wt3-wap-modern-dashboard #content::after,
body.wt3-wap-modern-dashboard .site-main::before,
body.wt3-wap-modern-dashboard .site-main::after,
body.wt3-wap-modern-dashboard .page-header::before,
body.wt3-wap-modern-dashboard .page-header::after,
body.wt3-wap-modern-dashboard .page-content::before,
body.wt3-wap-modern-dashboard .page-content::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

body.wt3-wap-modern-dashboard .entry-content,
body.wt3-wap-modern-dashboard .site-content .entry-content,
body.wt3-wap-modern-dashboard .page-content,
body.wt3-wap-modern-dashboard .entry-title {
	position: relative;
	left: 50vw;
	right: 50vw;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
	padding-left: max(16px, calc(50vw - 590px));
	padding-right: max(16px, calc(50vw - 590px));
}

/* The shortcode's own wrapper (.yith-wcaf-dashboard) lives INSIDE
   .page-content / .entry-content, which is already broken out and
   re-centered above. Do NOT break this one out too (that would double
   the shift and push everything off-screen) — just let it fill the
   now-centered space normally. */
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard"]:not(li):not(a):not(span) {
	position: static;
	left: auto;
	right: auto;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

@media (max-width: 782px) {
	body.wt3-wap-modern-dashboard .entry-content,
	body.wt3-wap-modern-dashboard .page-content,
	body.wt3-wap-modern-dashboard .entry-title {
		padding-left: 12px;
		padding-right: 12px;
	}
}

body.wt3-wap-modern-dashboard [class*="yith-wcaf"] h1,
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] h2,
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] h3 {
	font-family: var(--wap-font);
	color: var(--wap-ink);
	letter-spacing: -0.01em;
}

/* -----------------------------------------------------------------------
 * 3. Welcome banner (injected by WT3_WAP_Modern_UI)
 * --------------------------------------------------------------------- */
.wt3-wap-welcome-banner {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, #12252b 0%, #16332f 55%, #103a34 100%);
	color: #fff;
	border-radius: var(--wap-radius-lg);
	padding: 26px 28px;
	margin: 0 0 28px;
	box-shadow: var(--wap-shadow);
}

.wt3-wap-welcome-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.wt3-wap-welcome-avatar-img {
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
}

.wt3-wap-welcome-copy {
	flex: 1 1 auto;
	min-width: 180px;
}

.wt3-wap-welcome-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 4px;
}

.wt3-wap-welcome-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

.wt3-wap-banner-stat {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--wap-radius-md);
	padding: 12px 20px;
	text-align: right;
}

.wt3-wap-banner-stat-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 2px;
}

.wt3-wap-banner-stat-value {
	display: block;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

/* -----------------------------------------------------------------------
 * 4. Tab navigation (Dashboard / Commissions / Visits / Payments / …)
 *    Wildcard selectors so this applies regardless of the exact class
 *    YITH ships in a given version.
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-nav"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf-tabs"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf-navigation"],
body.wt3-wap-modern-dashboard nav[class*="yith-wcaf"] {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var(--wap-card);
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-md);
	padding: 6px;
	margin: 0 0 24px;
	list-style: none;
	box-shadow: var(--wap-shadow);
}

body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-nav"] li,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-tabs"] li,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-navigation"] li {
	list-style: none;
	margin: 0;
}

body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-nav"] a,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-tabs"] a,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-navigation"] a,
body.wt3-wap-modern-dashboard nav[class*="yith-wcaf"] a {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: var(--wap-radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--wap-ink-soft);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-nav"] a:hover,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-tabs"] a:hover,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-navigation"] a:hover {
	background: var(--wap-accent-soft);
	color: var(--wap-accent-dark);
}

body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-nav"] a.active,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-nav"] a.current,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-nav"] li.active a,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-nav"] li.current a,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-tabs"] a.active,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-tabs"] li.active a,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-navigation"] .active a,
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] a[aria-current="page"] {
	background: var(--wap-accent);
	color: #fff !important;
}

/* Fallback: a plain top-of-page link row (no wrapper class match) directly
   preceding the dashboard content — keeps the underline style but tidies
   spacing and weight. */
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard"] > p:first-child a,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard"] > div:first-child a {
	font-weight: 600;
}

/* -----------------------------------------------------------------------
 * 5. Stat / summary boxes (Referrals, Visits, Conversion Rate, Earnings…)
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-box"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf-box"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf-summary"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf-stat"] {
	background: var(--wap-card);
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-md);
	padding: 18px 20px;
	box-shadow: var(--wap-shadow);
}

body.wt3-wap-modern-dashboard [class*="yith-wcaf-dashboard-boxes"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf-boxes"] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 0 0 24px;
}

/* -----------------------------------------------------------------------
 * 6. Withdraw summary box (this plugin's own markup)
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard .wt3-wap-withdraw-box {
	background: var(--wap-card);
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-lg);
	box-shadow: var(--wap-shadow);
	padding: 22px 24px;
}

body.wt3-wap-modern-dashboard .wt3-wap-withdraw-summary .wt3-wap-label {
	color: var(--wap-ink-faint);
	font-weight: 600;
}

body.wt3-wap-modern-dashboard .wt3-wap-withdraw-summary .wt3-wap-value {
	color: var(--wap-ink);
	font-size: 22px;
}

body.wt3-wap-modern-dashboard .wt3-wap-notice p {
	background: var(--wap-danger-soft);
	color: var(--wap-danger);
	padding: 10px 14px;
	border-radius: var(--wap-radius-sm);
}

/* -----------------------------------------------------------------------
 * 7. Tables (Commissions, Visits, Payments, Referrals…)
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wap-card);
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-md);
	overflow: hidden;
	box-shadow: var(--wap-shadow);
	margin: 0 0 24px;
}

body.wt3-wap-modern-dashboard table thead th {
	background: #fafbfc;
	color: var(--wap-ink-faint);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--wap-border);
}

body.wt3-wap-modern-dashboard table thead th a {
	color: inherit;
	text-decoration: none;
}

body.wt3-wap-modern-dashboard table tbody td {
	padding: 14px 16px;
	font-size: 14px;
	color: var(--wap-ink);
	border-bottom: 1px solid var(--wap-border);
	vertical-align: middle;
}

body.wt3-wap-modern-dashboard table tbody tr:last-child td {
	border-bottom: none;
}

body.wt3-wap-modern-dashboard table tbody tr:hover td {
	background: #fafcfd;
}

body.wt3-wap-modern-dashboard table tbody tr.no-items td,
body.wt3-wap-modern-dashboard table td[colspan] {
	text-align: center;
	color: var(--wap-ink-faint);
	padding: 32px 16px;
}

/* Status-like labels (Paid / Unpaid / Pending / Refused …) — matched
   generically since the exact class differs across YITH versions. */
body.wt3-wap-modern-dashboard [class*="status"],
body.wt3-wap-modern-dashboard [class*="label-"],
body.wt3-wap-modern-dashboard [class*="badge"] {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--wap-accent-soft);
	color: var(--wap-accent-dark);
}

body.wt3-wap-modern-dashboard [class*="status-paid"],
body.wt3-wap-modern-dashboard [class*="status-completed"],
body.wt3-wap-modern-dashboard [class*="status-approved"] {
	background: var(--wap-success-soft);
	color: var(--wap-success);
}

body.wt3-wap-modern-dashboard [class*="status-unpaid"],
body.wt3-wap-modern-dashboard [class*="status-pending"] {
	background: var(--wap-warning-soft);
	color: var(--wap-warning);
}

body.wt3-wap-modern-dashboard [class*="status-refused"],
body.wt3-wap-modern-dashboard [class*="status-cancelled"],
body.wt3-wap-modern-dashboard [class*="status-refunded"] {
	background: var(--wap-danger-soft);
	color: var(--wap-danger);
}

/* -----------------------------------------------------------------------
 * 8. Filters toolbar — matches YITH's actual markup:
 *    .yith-wcaf-table-top-bar > .table-filters + .table-options
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--wap-card);
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-md);
	padding: 14px 16px;
	margin: 0 0 18px;
	box-shadow: var(--wap-shadow);
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .table-filters,
body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .table-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .table-options {
	color: var(--wap-ink-soft);
	font-size: 13px;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .per-page {
	margin: 0;
	font-weight: 600;
	white-space: nowrap;
}

/* Plain (non-select2) inputs inside the bar: date pickers, per-page number */
body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar input[type="text"],
body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar input[type="number"] {
	height: 38px;
	min-width: 130px;
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-sm);
	padding: 0 12px;
	font-size: 14px;
	background: #fff;
	box-sizing: border-box;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .quantity-input {
	min-width: 64px;
	width: 64px;
	text-align: center;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar input:focus {
	outline: none;
	border-color: var(--wap-accent);
	box-shadow: 0 0 0 3px var(--wap-accent-soft);
}

/* Select2 (status + product search dropdowns) */
body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .select2-container {
	min-width: 160px;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .select2-container--default .select2-selection--single {
	height: 38px;
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-sm);
	background: #fff;
	display: flex;
	align-items: center;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 36px;
	padding-left: 12px;
	color: var(--wap-ink);
	font-size: 14px;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 36px;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .select2-container--default.select2-container--focus .select2-selection--single,
body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--wap-accent);
	box-shadow: 0 0 0 3px var(--wap-accent-soft);
}

/* "Filter" submit button */
body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .apply-filters {
	height: 38px;
	margin: 0;
	background: var(--wap-accent);
	color: #fff;
	border: none;
	border-radius: var(--wap-radius-sm);
	padding: 0 20px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .apply-filters:hover {
	background: var(--wap-accent-dark);
}

@media (max-width: 680px) {
	body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar form,
	body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .table-filters,
	body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .table-options {
		flex-direction: column;
		align-items: stretch;
	}

	body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .select2-container,
	body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar input[type="text"],
	body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar input[type="number"],
	body.wt3-wap-modern-dashboard .yith-wcaf-table-top-bar .apply-filters {
		width: 100%;
		min-width: 0;
	}
}

/* Generic fallback for other YITH versions that use different class names */
body.wt3-wap-modern-dashboard [class*="yith-wcaf-filter"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf-search"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	background: var(--wap-card);
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-md);
	padding: 14px 16px;
	margin: 0 0 16px;
	box-shadow: var(--wap-shadow);
}

/* -----------------------------------------------------------------------
 * 9. Form fields, buttons, pagination — broad, safe coverage
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] input[type="text"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] input[type="email"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] input[type="number"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] input[type="tel"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] input[type="date"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] input[type="search"],
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] select,
body.wt3-wap-modern-dashboard .wt3-wap-modal input[type="text"],
body.wt3-wap-modern-dashboard .wt3-wap-modal select {
	font-family: var(--wap-font);
	border: 1px solid var(--wap-border);
	border-radius: var(--wap-radius-sm);
	padding: 9px 12px;
	font-size: 14px;
	color: var(--wap-ink);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.wt3-wap-modern-dashboard [class*="yith-wcaf"] input:focus,
body.wt3-wap-modern-dashboard [class*="yith-wcaf"] select:focus,
body.wt3-wap-modern-dashboard .wt3-wap-modal input:focus,
body.wt3-wap-modern-dashboard .wt3-wap-modal select:focus {
	outline: none;
	border-color: var(--wap-accent);
	box-shadow: 0 0 0 3px var(--wap-accent-soft);
}

body.wt3-wap-modern-dashboard .button,
body.wt3-wap-modern-dashboard button:not(.wt3-wap-modal-close),
body.wt3-wap-modern-dashboard input[type="submit"],
body.wt3-wap-modern-dashboard input[type="button"] {
	font-family: var(--wap-font);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wap-accent);
	color: #fff;
	border: none;
	border-radius: var(--wap-radius-sm);
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}

body.wt3-wap-modern-dashboard .button:hover,
body.wt3-wap-modern-dashboard button:not(.wt3-wap-modal-close):hover,
body.wt3-wap-modern-dashboard input[type="submit"]:hover,
body.wt3-wap-modern-dashboard input[type="button"]:hover {
	background: var(--wap-accent-dark);
}

body.wt3-wap-modern-dashboard .button:active,
body.wt3-wap-modern-dashboard button:not(.wt3-wap-modal-close):active {
	transform: translateY(1px);
}

/* Secondary / muted buttons (e.g. "Filter" next to selects with light bg intent) */
body.wt3-wap-modern-dashboard [class*="yith-wcaf-filter"] .button,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-table-filters"] .button {
	background: var(--wap-ink);
}

body.wt3-wap-modern-dashboard [class*="yith-wcaf-filter"] .button:hover,
body.wt3-wap-modern-dashboard [class*="yith-wcaf-table-filters"] .button:hover {
	background: #000;
}

/* Pagination */
body.wt3-wap-modern-dashboard [class*="pagination"] {
	display: flex;
	gap: 6px;
	margin: 4px 0 24px;
}

body.wt3-wap-modern-dashboard [class*="pagination"] a,
body.wt3-wap-modern-dashboard [class*="pagination"] span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: var(--wap-radius-sm);
	border: 1px solid var(--wap-border);
	background: var(--wap-card);
	color: var(--wap-ink-soft);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

body.wt3-wap-modern-dashboard [class*="pagination"] .current,
body.wt3-wap-modern-dashboard [class*="pagination"] a:hover {
	background: var(--wap-accent);
	border-color: var(--wap-accent);
	color: #fff;
}

/* -----------------------------------------------------------------------
 * 10. Withdraw request modal — align with the new palette
 * --------------------------------------------------------------------- */
body.wt3-wap-modern-dashboard .wt3-wap-modal {
	border-radius: var(--wap-radius-lg);
	font-family: var(--wap-font);
}

body.wt3-wap-modern-dashboard .wt3-wap-modal h3 {
	font-size: 20px;
	font-weight: 700;
}

body.wt3-wap-modern-dashboard .wt3-wap-modal-response.is-success {
	background: var(--wap-success-soft);
	color: var(--wap-success);
}

body.wt3-wap-modern-dashboard .wt3-wap-modal-response.is-error {
	background: var(--wap-danger-soft);
	color: var(--wap-danger);
}

/* -----------------------------------------------------------------------
 * 11. Responsive
 * --------------------------------------------------------------------- */
@media (max-width: 640px) {
	.wt3-wap-welcome-banner {
		padding: 20px;
	}

	.wt3-wap-banner-stat {
		text-align: left;
	}

	body.wt3-wap-modern-dashboard table thead {
		display: none;
	}

	body.wt3-wap-modern-dashboard table tbody tr {
		display: block;
		padding: 10px 0;
	}

	body.wt3-wap-modern-dashboard table tbody td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		border-bottom: none;
		padding: 6px 16px;
	}
}