/**
 * Customer wallet dashboard visual layer.
 * Loaded only on the My Account wallet endpoint.
 */

.pww-wallet-dashboard {
	--pww-dash-primary: #5746d7;
	--pww-dash-primary-dark: #382c9d;
	--pww-dash-success: #07865f;
	--pww-dash-danger: #d34053;
	--pww-dash-warning: #c7780b;
	--pww-dash-ink: #182033;
	--pww-dash-muted: #6c7487;
	--pww-dash-border: #e4e7ef;
	--pww-dash-surface: #fff;
	--pww-dash-soft: #f7f8fc;
	width: 100%;
	color: var(--pww-dash-ink);
	font-family: inherit;
}

.pww-wallet-dashboard .pww-wallet-hero {
	min-height: 250px;
	margin-bottom: 20px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 25px;
	background:
		radial-gradient(circle at 8% 0, rgba(255,255,255,.18), transparent 28%),
		radial-gradient(circle at 85% 115%, rgba(155,139,255,.36), transparent 36%),
		linear-gradient(132deg, #211a62 0%, #4839ba 50%, #715fe4 100%);
	box-shadow: 0 24px 58px rgba(49, 38, 137, .23);
}

.pww-wallet-dashboard .pww-hero-content { padding: 34px 38px; }
.pww-wallet-dashboard .pww-hero-topline { margin-bottom: 29px; font-size: 13px; }
.pww-wallet-dashboard .pww-status { padding: 5px 11px; font-weight: 700; }
.pww-wallet-dashboard .pww-balance-label { font-size: 13px; }
.pww-wallet-dashboard .pww-balance-value { margin-top: 3px; font-size: clamp(32px, 5vw, 48px); }
.pww-wallet-dashboard .pww-primary-action {
	min-height: 42px;
	padding: 0 18px;
	border-radius: 12px;
	font-size: 12px;
	box-shadow: 0 8px 18px rgba(20, 14, 78, .18);
}

.pww-wallet-dashboard .pww-hero-visual {
	width: 275px;
	margin: 29px 31px;
	border-radius: 24px;
	box-shadow: inset 0 1px rgba(255,255,255,.22), 0 18px 38px rgba(19,13,67,.16);
}

.pww-wallet-dashboard .pww-overview-box,
.pww-wallet-dashboard .pww-dashboard-box {
	margin: 0 0 20px;
	border: 1px solid var(--pww-dash-border);
	border-radius: 20px;
	background: var(--pww-dash-surface);
	box-shadow: 0 10px 34px rgba(20, 30, 55, .055);
}

.pww-wallet-dashboard .pww-overview-box { padding: 22px; }
.pww-wallet-dashboard .pww-overview-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 17px;
	padding: 0 2px;
}

.pww-wallet-dashboard .pww-overview-heading span {
	display: block;
	margin-bottom: 3px;
	color: var(--pww-dash-primary);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .4px;
}

.pww-wallet-dashboard .pww-overview-heading h2 {
	margin: 0;
	color: var(--pww-dash-ink);
	font-size: 18px;
	line-height: 1.7;
}

.pww-wallet-dashboard .pww-overview-heading > small { color: var(--pww-dash-muted); font-size: 11px; }
.pww-wallet-dashboard .pww-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.pww-wallet-dashboard .pww-summary-card {
	min-height: 104px;
	padding: 17px;
	border: 1px solid #eaecf2;
	border-radius: 16px;
	background: linear-gradient(145deg, #fff, #fafbfe);
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pww-wallet-dashboard .pww-summary-card:hover { border-color: #d9d5fb; box-shadow: 0 10px 25px rgba(43, 34, 118, .07); transform: translateY(-2px); }
.pww-wallet-dashboard .pww-summary-card > i { flex-basis: 45px; width: 45px; height: 45px; border-radius: 14px; font-size: 19px; }
.pww-wallet-dashboard .pww-summary-card.is-count > i { color: #2563b8; background: #eaf3ff; }
.pww-wallet-dashboard .pww-summary-card span { font-size: 11px; }
.pww-wallet-dashboard .pww-summary-card strong { color: var(--pww-dash-ink); font-size: 15px; line-height: 1.7; }
.pww-wallet-dashboard .pww-summary-card small { font-size: 9px; }

.pww-wallet-dashboard .pww-expiry-banner,
.pww-wallet-dashboard .pww-disabled-banner {
	margin-bottom: 20px;
	padding: 16px 18px;
	border-radius: 16px;
	box-shadow: 0 7px 22px rgba(130, 82, 10, .05);
}

.pww-wallet-dashboard .pww-panel { padding: 24px; }
.pww-wallet-dashboard .pww-panel-heading {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 13px;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid #eceef4;
}

.pww-wallet-dashboard .pww-panel-heading h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.pww-wallet-dashboard .pww-panel-heading p { max-width: 720px; color: var(--pww-dash-muted); font-size: 11px; }
.pww-wallet-dashboard .pww-heading-icon { width: 44px; height: 44px; border-radius: 14px; }
.pww-wallet-dashboard .pww-panel-label,
.pww-wallet-dashboard .pww-panel-count {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 10px;
	border: 1px solid #dedaf8;
	border-radius: 999px;
	color: var(--pww-dash-primary-dark);
	font-size: 10px;
	font-weight: 800;
	white-space: nowrap;
	background: #f4f2ff;
}

.pww-wallet-dashboard .pww-topup-layout { grid-template-columns: minmax(0, 1.4fr) minmax(245px, .6fr); gap: 16px; }
.pww-wallet-dashboard .pww-topup-form,
.pww-wallet-dashboard .pww-payment-info {
	padding: 21px;
	border: 1px solid #e2dff8;
	border-radius: 16px;
	background: linear-gradient(145deg, #fbfaff, #f7f5ff);
}

.pww-wallet-dashboard .pww-payment-info { border-color: #e7e9ef; background: #fafbfc; }
.pww-wallet-dashboard .pww-amount-field input { height: 54px !important; border-radius: 13px !important; background: #fff !important; }
.pww-wallet-dashboard .pww-preset-list button { min-height: 32px; padding: 6px 11px; border-radius: 9px; font-size: 10px; }
.pww-wallet-dashboard .pww-submit { min-height: 49px !important; border-radius: 12px !important; font-size: 12px !important; }

.pww-wallet-dashboard .pww-data-table {
	border: 1px solid #e5e8ef;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 5px 18px rgba(24, 32, 51, .035);
}

.pww-wallet-dashboard .pww-table { min-width: 690px; border-spacing: 0; font-size: 12px; }
.pww-wallet-dashboard .pww-table th {
	padding: 13px 14px;
	border-bottom: 1px solid #e5e8ef !important;
	color: #596174;
	font-size: 10px;
	font-weight: 800;
	background: #f7f8fb;
}

.pww-wallet-dashboard .pww-table td { padding: 15px 14px !important; border-bottom-color: #eceef3 !important; }
.pww-wallet-dashboard .pww-table tbody tr:nth-child(even) { background: #fcfcfe; }
.pww-wallet-dashboard .pww-table tbody tr:last-child td { border-bottom: 0 !important; }
.pww-wallet-dashboard .pww-table tbody tr:hover { background: #f8f7ff; }
.pww-wallet-dashboard .pww-tx-id { padding: 5px 8px; border-radius: 8px; font-size: 10px; }
.pww-wallet-dashboard .pww-amount { font-size: 12px; }
.pww-wallet-dashboard .pww-orders-table { min-width: 790px; }
.pww-wallet-dashboard .pww-order-number { color: var(--pww-dash-primary); font-weight: 800; direction: ltr; }
.pww-wallet-dashboard .pww-order-total,
.pww-wallet-dashboard .pww-wallet-paid { font-weight: 800; white-space: nowrap; }
.pww-wallet-dashboard .pww-wallet-paid { color: var(--pww-dash-success); }
.pww-wallet-dashboard .pww-order-status {
	display: inline-flex;
	padding: 5px 9px;
	border-radius: 999px;
	color: #067250;
	font-size: 9px;
	font-weight: 800;
	white-space: nowrap;
	background: #e9f8f2;
}

.pww-wallet-dashboard .pww-view-order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 31px;
	padding: 5px 10px;
	border: 1px solid #dcd8f7;
	border-radius: 9px;
	color: var(--pww-dash-primary) !important;
	font-size: 9px;
	font-weight: 800;
	white-space: nowrap;
	background: #f7f5ff;
}

.pww-wallet-dashboard .pww-pagination .page-numbers { min-width: 36px; height: 36px; border-radius: 10px; }
.pww-wallet-dashboard .pww-empty { min-height: 145px; border-radius: 15px; background: #fafbfc; }

@media (max-width: 1100px) {
	.pww-wallet-dashboard .pww-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.pww-wallet-dashboard .pww-wallet-hero { min-height: 220px; border-radius: 20px; }
	.pww-wallet-dashboard .pww-hero-content { padding: 27px; }
	.pww-wallet-dashboard .pww-hero-visual { width: 190px; margin: 25px 18px; }
	.pww-wallet-dashboard .pww-overview-box,
	.pww-wallet-dashboard .pww-panel { padding: 18px; border-radius: 17px; }
	.pww-wallet-dashboard .pww-overview-heading { align-items: flex-start; flex-direction: column; }
	.pww-wallet-dashboard .pww-topup-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.pww-wallet-dashboard .pww-wallet-hero { min-height: 225px; }
	.pww-wallet-dashboard .pww-hero-visual { display: none; }
	.pww-wallet-dashboard .pww-hero-content { padding: 25px 22px; }
	.pww-wallet-dashboard .pww-balance-value { font-size: 30px; }
	.pww-wallet-dashboard .pww-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
	.pww-wallet-dashboard .pww-summary-card { align-items: flex-start; flex-direction: column; min-height: 126px; padding: 14px; }
	.pww-wallet-dashboard .pww-summary-card > i { flex-basis: 38px; width: 38px; height: 38px; margin: 0 0 9px; border-radius: 12px; }
	.pww-wallet-dashboard .pww-summary-card strong { font-size: 13px; }
	.pww-wallet-dashboard .pww-panel-heading { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
	.pww-wallet-dashboard .pww-panel-label,
	.pww-wallet-dashboard .pww-panel-count { grid-column: 2; justify-self: start; }
	.pww-wallet-dashboard .pww-topup-form,
	.pww-wallet-dashboard .pww-payment-info { padding: 15px; }
	.pww-wallet-dashboard .pww-data-table { overflow: visible; border: 0; background: transparent; box-shadow: none; }
	.pww-wallet-dashboard .pww-table { min-width: 0; }
	.pww-wallet-dashboard .pww-table,
	.pww-wallet-dashboard .pww-table tbody { display: block; width: 100%; }
	.pww-wallet-dashboard .pww-table tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 12px;
		margin-bottom: 12px;
		padding: 13px;
		border: 1px solid #e4e6ee;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 6px 18px rgba(24,32,51,.045);
	}

	.pww-wallet-dashboard .pww-table td {
		display: block !important;
		grid-column: auto !important;
		grid-row: auto !important;
		width: auto !important;
		padding: 8px 2px !important;
		border: 0 !important;
		text-align: right;
	}

	.pww-wallet-dashboard .pww-table td::before { margin-bottom: 4px; color: #858b99; font-size: 8px; font-weight: 700; }
	.pww-wallet-dashboard .pww-transactions-panel .pww-table td:nth-child(2) { grid-column: 1 / -1 !important; grid-row: auto; order: -2; }
	.pww-wallet-dashboard .pww-orders-table td:nth-child(1),
	.pww-wallet-dashboard .pww-orders-table td:nth-child(4) { order: -2; }
	.pww-wallet-dashboard .pww-orders-table td:nth-child(6) { grid-column: 1 / -1 !important; }
	.pww-wallet-dashboard .pww-view-order { width: 100%; }
}