<?php
/*
	Withdraw page
	-------------
	$methods now arrives from the controller already grouped:
	$methods = [
		'games'  => [ 'freefire' => [id => [...method...], ...], 'pubg' => [...] ],
		'crypto' => [ '_none' => [id => [...method...], ...] ],   // shown as direct cards
		'cash'   => [ 'visa' => [...], 'paypal' => [...], '_none' => [...] ],
	]
	$method_groups = [
		'games' => [ 'freefire' => ['label' => 'Free Fire Diamonds', 'image' => '...'],
		             'pubg'     => ['label' => 'PUBG Mobile UC',     'image' => '...'] ],
		'cash'  => [ 'visa'     => ['label' => 'Visa',               'image' => '...'],
		             'paypal'   => ['label' => 'PayPal',             'image' => '...'] ],
	]
	(see application/config/withdraw_methods.php to add/edit/remove methods —
	no admin panel needed anymore. Give every id its own 'image' path there
	and it will automatically show up on its own card below — nothing to
	change in this file when you add a package or swap a photo.)

	$today_withdraw_amount (USD) comes from the controller for the daily
	limit progress bar below.

	--------------------------------------------------------------------
	CHANGELOG (restyle pass)
	--------------------------------------------------------------------
	- Full visual refresh: softer/rounder shapes, a consistent easing
	  curve, fluid type & spacing via clamp(), a real tablet breakpoint
	  (previously it jumped straight from desktop to phone), glass-style
	  panels, nicer card hover/press states, and an accessible focus
	  ring throughout.
	- Modal rebuilt into a proper rounded "sheet": consistent radius on
	  every breakpoint (not just desktop), a spring-like entrance
	  animation, drag handle, sticky footer action button, backdrop
	  blur, combined cost/affordability panel, "Max" quick-fill, and
	  Escape-to-close — all preserved from before, just restyled.
	- Added prefers-reduced-motion handling and :focus-visible rings
	  site-wide (quality floor, not just desktop polish).

	CHANGELOG (pass 2 — colors + mobile scroll fix)
	--------------------------------------------------------------------
	- .wd-subgrid-wrap (the panel a group tile reveals) no longer looks
	  like a separate boxed container — no background/border, it now
	  sits flush inside the category section.
	- ROOT-CAUSE FIX for "horizontal scroll doesn't work on phones":
	  the panel used to toggle display:none -> display:block. That
	  exact toggle is a known WebKit/Android WebView trap — a swipe
	  gesture on a row that just became display:block often never
	  arms. The panel is now ALWAYS in normal layout (never
	  display:none) and opens/closes via max-height + opacity instead,
	  so its horizontal card scroller is live from the first frame.
	  Added scroll-snap-type: x proximity to the card/tile rows too,
	  so the swipe feels intentional and confirms it's working.
	- New color system: introduced a dedicated --wd-primary (indigo →
	  blue) accent for CTAs, active tabs, and selection states, kept
	  separate from --wd-gold (still used only for the Cash category
	  and warning states) so the two no longer visually collide.
	  Background/surface tones cooled slightly for a more modern feel.
	- No PHP data flow or form fields were changed — still a
	  style/markup-behavior pass only (one JS accordion tweak to
	  match the new always-in-layout panel).

	CHANGELOG (pass 3 — coin display formatting)
	--------------------------------------------------------------------
	- Coin amounts (fixed-package cost, minimum-withdrawal hints,
	  balance-availability messages, MAX-fill, crypto "you will
	  receive" preview) used raw .toFixed(6)/.toFixed(8), which showed
	  ugly trailing zeros like "1000.000000". Added a formatNum()
	  helper that rounds to N decimals and strips trailing zeros, so
	  a 100-Diamond / 60-UC / $1-of-crypto package (all worth 1000
	  coins under the site's 1000 coins = $1 rate) now simply shows
	  "1000". No coin/USD math changed — display formatting only.
*/

$categoryLabels = [
	'games'  => 'Games',
	'crypto' => 'Crypto',
	'cash'   => 'Cash',
];
$categoryIcons = [
	'games'  => 'fa-gamepad',
	'crypto' => 'fa-coins',
	'cash'   => 'fa-money-bill-wave',
];
$categoryAccent = [
	'games'  => 'violet',
	'crypto' => 'teal',
	'cash'   => 'gold',
];
$categoryBlurb = [
	'games'  => 'Redeem straight into your game account.',
	'crypto' => 'Send coins to your own wallet address.',
	'cash'   => 'Cash out to a card or account.',
];
// Wallet/ID field label shown in the modal, per category.
$walletLabels = [
	'games'  => 'Player ID / UID',
	'crypto' => 'Wallet Address',
	'cash'   => 'Account / Email',
];

// count every method (grouped + ungrouped) in a category, for the section badge
function wd_category_count($catMethods)
{
	$count = 0;
	foreach ((array) $catMethods as $group) {
		$count += count($group);
	}
	return $count;
}

$userBalanceUsd = (float) $user['balance'];

// ---- daily withdraw limit progress ----
$withdrawLimit = (float) ($settings['withdraw_limit'] ?? 0);
$todayUsed = (float) ($today_withdraw_amount ?? 0);
$limitPct = $withdrawLimit > 0 ? min(100, ($todayUsed / $withdrawLimit) * 100) : 0;
$limitState = $limitPct >= 100 ? 'full' : ($limitPct >= 70 ? 'warn' : 'ok');
$limitRemaining = max(0, $withdrawLimit - $todayUsed);
?>
<!--<?php if ($user['verified'] == 0) { ?>-->
<!--	<div class="wd-alert wd-alert-warning">-->
<!--		<i class="far fa-envelope"></i>-->
<!--		<span>Please confirm your email address to be able to withdraw.-->
<!--			<a href="<?= site_url('dashboard/resend') ?>">Resend email</a></span>-->
<!--		<button type="button" class="wd-alert-close" onclick="this.parentElement.remove()" aria-label="Close">&times;</button>-->
<!--	</div>-->
<!--<?php } ?>-->
<!--<?php if ($user['status'] == "banned") { ?>-->
<!--	<div class="wd-alert wd-alert-danger">-->
<!--		<i class="fa fa-ban"></i>-->
<!--		<span>Sorry, your account has been banned. <a href="<?= site_url('dashboard/support') ?>">Contact support</a></span>-->
<!--	</div>-->
<!--<?php } ?>-->

<style>
	:root{
		--wd-bg: #0d0f18;
		--wd-surface: #151926;
		--wd-surface-2: #1b2032;
		--wd-surface-3: #212840;
		--wd-border: #2a3149;
		--wd-text: #eef0f8;
		--wd-text-muted: #8c93ac;
		/* brand accent — used for CTAs, active/selected states. Kept
		   separate from --wd-gold so "selected/primary" never visually
		   collides with the Cash category color. */
		--wd-primary: #7c6cf6;
		--wd-primary-2: #4f8bff;
		--wd-primary-glow: rgba(124,108,246,.28);
		/* category colors */
		--wd-gold: #f2b807;
		--wd-gold-dim: #4a3a1c;
		--wd-teal: #2dd4e8;
		--wd-violet: #b192f7;
		--wd-green: #33d999;
		--wd-red: #fb6f7f;
		/* rounder, more "app-like" shapes than the old 18/12/8 scale */
		--wd-radius-xl: 26px;
		--wd-radius-lg: 22px;
		--wd-radius-md: 16px;
		--wd-radius-sm: 11px;
		/* one shared easing curve so every hover/press/reveal feels
		   like the same product instead of a grab-bag of transitions */
		--wd-ease: cubic-bezier(.22, 1, .36, 1);
		--wd-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
		--wd-shadow-sm: 0 2px 8px rgba(4,5,10,.25);
		--wd-shadow-md: 0 10px 28px rgba(4,5,10,.38);
		--wd-shadow-lg: 0 24px 60px rgba(4,5,10,.55);
	}

	.wd-wrap{
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		color: var(--wd-text);
		box-sizing: border-box;
		max-width: 100%;
		overflow-x: hidden;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}
	.wd-wrap *, .wd-wrap *::before, .wd-wrap *::after{ box-sizing: border-box; }

	/* accessible focus ring, everywhere — quality floor, not decoration */
	.wd-wrap :focus-visible{
		outline: 2px solid var(--wd-teal);
		outline-offset: 2px;
		border-radius: 6px;
	}

	@media (prefers-reduced-motion: reduce){
		.wd-wrap *, .wd-wrap *::before, .wd-wrap *::after{
			animation-duration: .001ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: .001ms !important;
			scroll-behavior: auto !important;
		}
	}

	.wd-alert{
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 16px;
		border-radius: var(--wd-radius-md);
		margin-bottom: 16px;
		font-size: 14px;
		border: 1px solid transparent;
	}
	.wd-alert-warning{ background: #3a2f12; border-color: #5c4a1c; color: #f5d88a; }
	.wd-alert-warning a{ color: var(--wd-gold); font-weight: 600; text-decoration: underline; }
	.wd-alert-danger{ background: #3a1717; border-color: #5c1c1c; color: #f5a3a3; }
	.wd-alert-danger a{ color: #ffb3b3; font-weight: 600; text-decoration: underline; }
	.wd-alert-close{ margin-left: auto; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; line-height: 1; }

	.wd-grid-layout{
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: clamp(14px, 2.2vw, 22px);
		align-items: start;
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
	}
	@media (max-width: 991px){
		.wd-grid-layout{ grid-template-columns: 1fr; }
	}

	.wd-panel{
		background: linear-gradient(180deg, var(--wd-surface), var(--wd-surface) 60%, var(--wd-surface-2));
		border: 1px solid var(--wd-border);
		border-radius: var(--wd-radius-xl);
		padding: clamp(16px, 2.6vw, 24px);
		margin-bottom: 20px;
		min-width: 0;
		box-shadow: var(--wd-shadow-sm);
	}
	.wd-panel-flat{
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
	}
	@media (max-width: 640px){
		.wd-panel-flat{ padding: 0 2px; }
	}
	.wd-panel-title{
		font-family: 'Sora', 'Inter', sans-serif;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .02em;
		color: var(--wd-text);
		margin: 0 0 6px;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.wd-panel-sub{
		color: var(--wd-text-muted);
		font-size: 13px;
		margin: 0 0 18px;
	}

	/* ---------- Daily limit progress bar ---------- */
	.wd-limit-card{
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px 18px;
		background: linear-gradient(180deg, var(--wd-surface-2), var(--wd-surface-3));
		border: 1px solid var(--wd-border);
		border-radius: var(--wd-radius-lg);
		margin-bottom: 20px;
		transition: border-color .25s var(--wd-ease), background .25s var(--wd-ease);
	}
	.wd-limit-head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.wd-limit-head-label{
		display: flex;
		align-items: center;
		gap: 7px;
		font-size: 12.5px;
		color: var(--wd-text-muted);
		font-weight: 600;
	}
	.wd-limit-head-label i{ font-size: 12px; opacity: .8; }
	.wd-limit-head-value{
		font-family: 'Sora', 'Inter', sans-serif;
		font-size: 14px;
		font-weight: 700;
		color: var(--wd-text);
		white-space: nowrap;
	}
	.wd-limit-head-value small{
		font-weight: 500;
		color: var(--wd-text-muted);
		font-size: 12px;
	}
	.wd-limit-track{
		position: relative;
		width: 100%;
		height: 8px;
		border-radius: 999px;
		background: rgba(255,255,255,.07);
		overflow: hidden;
	}
	.wd-limit-fill{
		position: relative;
		height: 100%;
		min-width: 8px;
		border-radius: 999px;
		background: linear-gradient(90deg, var(--wd-teal), var(--wd-green));
		transition: width .35s ease-out;
	}
	.wd-limit-fill::after{
		content: '';
		position: absolute;
		top: 0; right: 0;
		width: 10px; height: 100%;
		background: rgba(255,255,255,.35);
		filter: blur(2px);
	}
	.wd-limit-card.warn .wd-limit-fill{ background: linear-gradient(90deg, var(--wd-gold), #d99a2b); }
	.wd-limit-card.full .wd-limit-fill{ background: linear-gradient(90deg, var(--wd-red), #c94b4b); }
	.wd-limit-card.full .wd-limit-head-value{ color: var(--wd-red); }
	.wd-limit-foot{
		font-size: 11.5px;
		color: var(--wd-text-muted);
	}
	.wd-limit-card.full .wd-limit-foot{ color: var(--wd-red); }

	/* ---------- Category tabs ---------- */
	.wd-tabs{
		display: flex;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		margin-bottom: 22px;
		scrollbar-width: thin;
		position: sticky;
		top: 0;
		z-index: 5;
	}
	.wd-tabs::-webkit-scrollbar{ height: 4px; }
	.wd-tabs::-webkit-scrollbar-thumb{ background: var(--wd-border); border-radius: 4px; }
	.wd-tab{
		position: relative;
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 88px;
		height: 78px;
		padding: 10px 6px;
		border-radius: var(--wd-radius-md);
		background: var(--wd-surface-2);
		border: 1px solid var(--wd-border);
		color: var(--wd-text-muted);
		font-size: 11.5px;
		font-weight: 700;
		cursor: pointer;
		white-space: nowrap;
		text-align: center;
		transition: background .2s var(--wd-ease), color .2s var(--wd-ease), border-color .2s var(--wd-ease), transform .15s var(--wd-ease), box-shadow .2s var(--wd-ease);
		user-select: none;
	}
	.wd-tab:hover{ border-color: rgba(124,108,246,.4); color: var(--wd-text); }
	.wd-tab:active{ transform: scale(.95); }
	.wd-tab i{
		font-size: 19px;
		display: block;
		transition: transform .2s var(--wd-ease);
	}
	.wd-tab.active{
		background: linear-gradient(155deg, var(--wd-primary), var(--wd-primary-2));
		border-color: transparent;
		color: #fff;
		box-shadow: 0 8px 20px var(--wd-primary-glow);
		transform: translateY(-1px);
	}
	.wd-tab-count{
		position: absolute;
		top: 6px;
		right: 6px;
		background: rgba(255,255,255,.12);
		border-radius: 999px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		font-size: 10px;
		line-height: 16px;
	}
	.wd-tab.active .wd-tab-count{ background: rgba(0,0,0,.18); }
	@media (max-width: 768px){
		.wd-tab{ width: 80px; height: 72px; font-size: 11px; }
	}
	@media (max-width: 480px){
		.wd-tab{ width: 74px; height: 66px; font-size: 10.5px; }
		.wd-tab i{ font-size: 16px; }
	}

	/* ---------- Category sections ----------
	   NOTE: no content-visibility/contain here on purpose — see changelog.
	   These sections are cheap enough to render normally and it avoids a
	   real cross-browser scroll bug inside the collapsible sub-grids. */
	.wd-category-section{
		border-top: 1px solid var(--wd-border);
		padding-top: 22px;
		margin-top: 22px;
		scroll-margin-top: 74px;
	}
	.wd-category-section:first-of-type{
		border-top: 0;
		padding-top: 0;
		margin-top: 0;
	}
	.wd-section-head{
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 16px;
	}
	.wd-section-icon{
		width: 38px; height: 38px;
		border-radius: 10px;
		display: flex; align-items: center; justify-content: center;
		font-size: 16px;
		flex: 0 0 auto;
	}
	.wd-section-icon.violet{ background: rgba(167,139,250,.14); color: var(--wd-violet); }
	.wd-section-icon.teal{ background: rgba(34,211,238,.14); color: var(--wd-teal); }
	.wd-section-icon.gold{ background: rgba(242,184,7,.14); color: var(--wd-gold); }
	.wd-section-head-text h5{
		margin: 0;
		font-family: 'Sora', 'Inter', sans-serif;
		font-size: 15.5px;
		font-weight: 700;
	}
	.wd-section-head-text span{
		font-size: 12.5px;
		color: var(--wd-text-muted);
	}
	.wd-section-count{
		margin-left: auto;
		font-size: 11px;
		color: var(--wd-text-muted);
		background: var(--wd-surface-2);
		border: 1px solid var(--wd-border);
		border-radius: 999px;
		padding: 4px 10px;
		white-space: nowrap;
	}

	/* ---------- Product group tiles (Free Fire / PUBG / Visa / PayPal) ----------
	   Redesigned as an icon + label chip instead of a full-bleed photo
	   background. Full-bleed "cover" was cropping/zooming square icon
	   art; a contained icon box always shows the whole image cleanly
	   no matter what shape the source photo is. */
	.wd-group-row{
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-left: 2px;
		padding: 2px 2px 12px;
		margin: 0 -2px 6px;
		scrollbar-width: thin;
		/* Force LTR for this scroll track specifically. Under dir="rtl"
		   (this site), flexbox horizontal scroll computes scrollLeft
		   differently per browser engine and is a common cause of
		   "carousel won't swipe" bugs on mobile. Card contents (names,
		   numbers) read fine either way, so isolating direction here
		   is safe and fixes the gesture reliably. */
		direction: ltr;
	}
	.wd-group-row::-webkit-scrollbar{ height: 5px; }
	.wd-group-row::-webkit-scrollbar-thumb{ background: var(--wd-border); border-radius: 4px; }
	.wd-group-tile{
		position: relative;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 10px;
		width: 178px;
		padding: 10px 12px 10px 10px;
		border-radius: var(--wd-radius-lg);
		cursor: pointer;
		background: var(--wd-surface-2);
		border: 2px solid var(--wd-border);
		box-shadow: var(--wd-shadow-sm);
		scroll-snap-align: start;
		transition: border-color .2s var(--wd-ease), transform .2s var(--wd-ease), box-shadow .2s var(--wd-ease), background .2s var(--wd-ease);
	}
	@media (hover: hover) and (pointer: fine){
		.wd-group-tile:hover{
			transform: translateY(-3px);
			border-color: rgba(124,108,246,.5);
			box-shadow: var(--wd-shadow-md);
		}
	}
	.wd-group-tile:active{ transform: scale(.97); }
	.wd-group-tile.open{
		border-color: var(--wd-primary);
		background: var(--wd-surface-3);
		box-shadow: 0 0 0 3px var(--wd-primary-glow), var(--wd-shadow-md);
	}
	.wd-group-tile-icon{
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		border-radius: 13px;
		background: var(--wd-surface-3);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px;
		overflow: hidden;
	}
	.wd-group-tile-icon img{
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
	}
	.wd-group-tile-info{
		min-width: 0;
		flex: 1 1 auto;
	}
	.wd-group-tile-name{
		display: block;
		font-family: 'Sora', 'Inter', sans-serif;
		font-size: 12.5px;
		font-weight: 700;
		color: var(--wd-text);
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.wd-group-tile-count{
		display: block;
		font-size: 10.5px;
		font-weight: 500;
		color: var(--wd-text-muted);
		margin-top: 2px;
	}
	.wd-group-tile i.wd-chevron{
		flex: 0 0 auto;
		color: var(--wd-text-muted);
		font-size: 12px;
		transition: transform .2s ease, color .2s ease;
	}
	.wd-group-tile.open i.wd-chevron{ transform: rotate(180deg); color: var(--wd-primary); }
	@media (max-width: 480px){
		.wd-group-tile{ width: 156px; padding: 8px 10px 8px 8px; gap: 8px; }
		.wd-group-tile-icon{ width: 38px; height: 38px; border-radius: 9px; }
	}

	/* ---------- Tier / method sub-grid (revealed under a group tile) ----------
	   No boxed "container" look anymore — this sits flush inside the
	   category section instead of reading as a separate panel.
	   It is also NEVER display:none -> display:block. That toggle is
	   exactly what breaks horizontal touch-scroll on WebKit/Android
	   WebView: a swipe gesture that "wakes up" on a panel which just
	   became display:block often never arms. Instead the row stays in
	   normal layout at all times and collapses via max-height + opacity,
	   so its horizontal scroller is live from the very first frame. */
	.wd-subgrid-wrap{
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		margin: 0;
		padding: 0;
		pointer-events: none;
		transition: max-height .38s var(--wd-ease), opacity .22s var(--wd-ease), margin .38s var(--wd-ease);
	}
	.wd-subgrid-wrap.open{
		max-height: 900px;
		opacity: 1;
		margin: 2px 0 20px;
		pointer-events: auto;
	}
	.wd-subgrid-title{
		font-size: 12px;
		color: var(--wd-text-muted);
		margin: 0 0 10px;
		padding-top: 12px;
		border-top: 1px dashed var(--wd-border);
		display: flex;
		align-items: center;
		gap: 6px;
	}

	/* ---------- Card grid (tiers, or direct crypto methods) ---------- */
	.wd-method-section{
		margin-bottom: 22px;
	}
	.wd-method-section:last-child{ margin-bottom: 0; }

	.wd-card-grid{
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 4px 2px 10px;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-left: 2px;
		scrollbar-width: thin;
		direction: ltr; /* see .wd-group-row comment above */
	}
	.wd-card-grid::-webkit-scrollbar{ height: 5px; }
	.wd-card-grid::-webkit-scrollbar-thumb{ background: var(--wd-border); border-radius: 4px; }

	/* ---------- Method card ----------
	   Redesigned: contained icon box on top (never crops/zooms the
	   source image) + a solid text panel below, instead of a full-bleed
	   "poster" card with a cover-fit background photo. */
	.wd-card{
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 0 0 140px;
		width: 140px;
		border-radius: var(--wd-radius-lg);
		overflow: hidden;
		cursor: pointer;
		background: var(--wd-surface-2);
		border: 2px solid var(--wd-border);
		box-shadow: var(--wd-shadow-sm);
		scroll-snap-align: start;
		transition: transform .18s var(--wd-ease), border-color .18s var(--wd-ease), box-shadow .18s var(--wd-ease);
		/* isolate layout/paint per card so hovering/selecting one card
		   doesn't force the browser to re-check its many siblings —
		   this is the main PC lag fix. It does NOT include size
		   containment, so it can't cause the mobile scroll-width bug. */
		contain: content;
	}
	@media (max-width: 768px){
		.wd-card{ flex: 0 0 128px; width: 128px; }
	}
	@media (max-width: 480px){
		.wd-card{ flex: 0 0 116px; width: 116px; }
		.wd-card-grid{ gap: 9px; }
	}
	@media (max-width: 360px){
		.wd-card{ flex: 0 0 104px; width: 104px; }
	}
	@media (hover: hover) and (pointer: fine){
		.wd-card:hover{
			transform: translateY(-4px);
			border-color: rgba(124,108,246,.5);
			box-shadow: var(--wd-shadow-md);
		}
	}
	.wd-card:active{ transform: scale(.96); }
	.wd-card input[type="radio"]{
		position: absolute;
		opacity: 0;
		width: 0; height: 0;
		pointer-events: none;
	}
	.wd-card-cat-bar{
		position: absolute;
		top: 0; left: 0; right: 0;
		height: 4px;
		z-index: 3;
	}
	.wd-card-cat-bar.games{ background: var(--wd-violet); }
	.wd-card-cat-bar.crypto{ background: var(--wd-teal); }
	.wd-card-cat-bar.cash{ background: var(--wd-gold); }

	.wd-card-icon{
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1;
		background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.06), transparent 70%), var(--wd-surface-3);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
	}
	.wd-card-icon img{
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
	}
	@media (max-width: 480px){
		.wd-card-icon{ padding: 12px; }
	}

	.wd-card-body{
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 9px 9px 10px;
	}
	.wd-card-name{
		display: block;
		font-family: 'Sora', 'Inter', sans-serif;
		font-size: 12.5px;
		font-weight: 700;
		color: var(--wd-text);
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.wd-card-code{
		display: block;
		font-size: 11px;
		font-weight: 600;
		color: var(--wd-text-muted);
	}

	/* per-card "you can afford" progress bar */
	.wd-card-afford{
		position: relative;
		margin-top: auto;
		height: 5px;
		border-radius: 999px;
		background: rgba(255,255,255,.09);
		overflow: hidden;
	}
	.wd-card-afford-fill{
		position: relative;
		height: 100%;
		min-width: 5px;
		border-radius: 999px;
		background: linear-gradient(90deg, var(--wd-teal), var(--wd-green));
	}
	.wd-card-afford-fill.full{ background: linear-gradient(90deg, var(--wd-green), #2fae7d); }
	.wd-card-afford-fill.low{ background: linear-gradient(90deg, #565d78, #6b7290); }

	.wd-card.selected{
		border-color: var(--wd-primary);
		transform: translateY(-4px);
		box-shadow: 0 0 0 3px var(--wd-primary-glow), var(--wd-shadow-lg);
	}
	.wd-card.selected::after{
		content: '\f00c';
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		position: absolute;
		top: 8px;
		right: 8px;
		width: 20px; height: 20px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-2));
		color: #fff;
		font-size: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 4;
	}
	.wd-card-empty{
		flex: 1 1 100%;
		text-align: center;
		color: var(--wd-text-muted);
		font-size: 13px;
		padding: 30px 10px;
	}

	.wd-btn{
		font-family: 'Sora', 'Inter', sans-serif;
		font-weight: 700;
		font-size: 13.5px;
		border-radius: var(--wd-radius-sm);
		padding: 12px 22px;
		border: none;
		cursor: pointer;
		transition: filter .2s var(--wd-ease), opacity .2s var(--wd-ease), transform .12s var(--wd-ease);
	}
	.wd-btn:active:not(:disabled){ transform: scale(.98); }
	.wd-btn:disabled{ opacity: .45; cursor: not-allowed; }
	.wd-btn-primary{
		background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-2));
		color: #fff;
		box-shadow: 0 8px 20px var(--wd-primary-glow);
	}
	.wd-btn-primary:hover:not(:disabled){ filter: brightness(1.08); }
	.wd-btn-ghost{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 13px;
		margin-top: 16px;
		border-radius: var(--wd-radius-md);
		background: transparent;
		border: 1px dashed var(--wd-border);
		color: var(--wd-text-muted);
		font-family: 'Sora', 'Inter', sans-serif;
		font-size: 13px;
		font-weight: 700;
		text-decoration: none;
		transition: border-color .2s var(--wd-ease), color .2s var(--wd-ease), background .2s var(--wd-ease), transform .15s var(--wd-ease);
	}
	.wd-btn-ghost:active{ transform: scale(.98); }
	.wd-btn-ghost i{
		font-size: 12.5px;
		color: var(--wd-teal);
	}
	.wd-btn-ghost:hover{
		color: var(--wd-text);
		border-color: var(--wd-teal);
		border-style: solid;
		background: rgba(34,211,238,.06);
	}

	/* ================= MODAL (redesigned v2) =================
	   Single vertical flow instead of stacked nested boxes: icon+title,
	   one "what you get" hero line, one compact balance meter, the
	   input(s), the wallet field, done. Numbers use tabular-nums and
	   clamp() sizing so long decimals never clip on narrow phones. */
	.wd-modal-overlay{
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(6,7,12,.72);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		z-index: 1050;
		align-items: flex-end;
		justify-content: center;
		padding: 0;
		animation: wd-overlay-in .2s var(--wd-ease);
	}
	.wd-modal-overlay.open{ display: flex; }
	@keyframes wd-overlay-in{
		from{ opacity: 0; }
		to{ opacity: 1; }
	}
	@media (min-width: 576px){
		.wd-modal-overlay{ align-items: center; padding: 20px; }
	}
	.wd-modal{
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, var(--wd-surface-2), var(--wd-surface) 18%);
		border: 1px solid var(--wd-border);
		width: 100%;
		max-width: 440px;
		max-height: 90vh;
		/* rounded sheet on every breakpoint, not just desktop — the
		   bottom corners used to go square on mobile */
		border-radius: var(--wd-radius-xl) var(--wd-radius-xl) 18px 18px;
		overflow: hidden;
		box-shadow: var(--wd-shadow-lg);
		animation: wd-modal-in .32s var(--wd-ease-spring);
	}
	@keyframes wd-modal-in{
		from{ opacity: 0; transform: translateY(28px) scale(.97); }
		to{ opacity: 1; transform: translateY(0) scale(1); }
	}
	@media (min-width: 576px){
		.wd-modal{ border-radius: var(--wd-radius-xl); max-height: 86vh; }
		@keyframes wd-modal-in{
			from{ opacity: 0; transform: translateY(12px) scale(.96); }
			to{ opacity: 1; transform: translateY(0) scale(1); }
		}
	}
	.wd-modal-handle{
		display: block;
		width: 40px;
		height: 4px;
		border-radius: 999px;
		background: var(--wd-border);
		margin: 10px auto 0;
		flex: 0 0 auto;
	}
	@media (min-width: 576px){ .wd-modal-handle{ display: none; } }

	.wd-modal-scroll{
		overflow-y: auto;
		padding: 14px 20px 4px;
		flex: 1 1 auto;
		min-height: 0;
	}

	.wd-modal-head{
		display: flex;
		align-items: center;
		gap: 12px;
		padding-bottom: 14px;
		margin-bottom: 14px;
		border-bottom: 1px solid var(--wd-border);
	}
	.wd-modal-icon{
		width: 44px; height: 44px;
		border-radius: 14px;
		overflow: hidden;
		flex: 0 0 auto;
		background: var(--wd-surface-3);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px;
	}
	.wd-modal-icon img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
	.wd-modal-head-text{ flex: 1; min-width: 0; }
	.wd-modal-head-text h5{
		margin: 0;
		font-family: 'Sora', 'Inter', sans-serif;
		font-size: 15.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.wd-modal-head-text span{ font-size: 12px; color: var(--wd-text-muted); }
	.wd-modal-close{
		background: transparent;
		border: 1px solid var(--wd-border);
		color: var(--wd-text-muted);
		width: 32px; height: 32px;
		border-radius: 50%;
		font-size: 15px;
		cursor: pointer;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		transition: color .18s var(--wd-ease), border-color .18s var(--wd-ease), background .18s var(--wd-ease), transform .15s var(--wd-ease);
	}
	.wd-modal-close:hover{ color: var(--wd-text); border-color: var(--wd-teal); background: rgba(34,211,238,.08); }
	.wd-modal-close:active{ transform: scale(.92); }

	/* "what you get" hero line — fixed packages only */
	.wd-modal-hero{
		display: none;
		align-items: center;
		gap: 12px;
		padding: 14px 14px;
		background: var(--wd-surface-3);
		border: 1px solid var(--wd-border);
		border-radius: var(--wd-radius-lg);
		margin-bottom: 14px;
	}
	.wd-modal-hero-col{ flex: 1 1 0; min-width: 0; text-align: center; }
	.wd-modal-hero-col span{
		display: block;
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--wd-text-muted);
		margin-bottom: 4px;
	}
	.wd-modal-hero-col strong{
		display: block;
		font-family: 'Sora', 'Inter', sans-serif;
		font-variant-numeric: tabular-nums;
		font-size: clamp(13px, 4.2vw, 15px);
		color: var(--wd-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.wd-modal-hero-arrow{ flex: 0 0 auto; color: var(--wd-primary); font-size: 14px; }

	/* balance meter — always visible, single compact line */
	.wd-modal-meter{ margin-bottom: 16px; }
	.wd-modal-meter-head{
		display: flex; justify-content: space-between; align-items: baseline;
		font-size: 11.5px; color: var(--wd-text-muted); margin-bottom: 7px;
	}
	.wd-modal-meter-head span:last-child{
		font-family: 'Sora', 'Inter', sans-serif;
		font-weight: 700;
		font-size: 12.5px;
		color: var(--wd-text);
	}
	.wd-modal-meter-track{
		position: relative;
		height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden;
	}
	.wd-modal-meter-fill{
		height: 100%; min-width: 7px; border-radius: 999px;
		background: linear-gradient(90deg, var(--wd-teal), var(--wd-green));
		transition: width .3s ease-out;
	}
	.wd-modal-meter-fill.full{ background: linear-gradient(90deg, var(--wd-green), #2fae7d); }

	.wd-field{ margin-bottom: 14px; }
	.wd-field:last-child{ margin-bottom: 0; }
	.wd-field label{
		display: block;
		font-size: 12.5px;
		color: var(--wd-text-muted);
		margin-bottom: 6px;
		font-weight: 600;
	}
	.wd-input-group{
		display: flex;
		align-items: stretch;
		border: 1px solid var(--wd-border);
		border-radius: var(--wd-radius-md);
		overflow: hidden;
		background: var(--wd-surface-2);
		transition: border-color .18s var(--wd-ease), box-shadow .18s var(--wd-ease);
	}
	.wd-input-group:focus-within{
		border-color: var(--wd-primary);
		box-shadow: 0 0 0 3px var(--wd-primary-glow);
	}
	.wd-input-addon{
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 0 12px;
		font-size: 12.5px;
		color: var(--wd-text-muted);
		white-space: nowrap;
		background: rgba(255,255,255,.03);
		border-right: 1px solid var(--wd-border);
		flex: 0 0 auto;
	}
	.wd-input-group input{
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		border: none;
		background: transparent;
		color: var(--wd-text);
		padding: 12px;
		font-size: 14px;
		font-variant-numeric: tabular-nums;
		outline: none;
	}
	.wd-input-group input:disabled{ color: var(--wd-text-muted); }
	.wd-input-max{
		flex: 0 0 auto;
		align-self: center;
		margin-right: 8px;
		padding: 5px 10px;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .03em;
		color: var(--wd-teal);
		background: rgba(34,211,238,.1);
		border: 1px solid rgba(34,211,238,.3);
		border-radius: 999px;
		cursor: pointer;
		white-space: nowrap;
	}
	.wd-input-max:hover{ background: rgba(34,211,238,.18); }
	.wd-field-row{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	@media (max-width: 400px){
		.wd-field-row{ grid-template-columns: 1fr; }
	}
	.wd-hint{ font-size: 12px; color: var(--wd-text-muted); margin-top: 6px; display: block; }
	.wd-hint.warn{ color: var(--wd-gold); }

	.wd-modal-footer{
		flex: 0 0 auto;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--wd-border);
		background: var(--wd-surface);
	}
	.wd-modal-submit{ width: 100%; padding: 14px; font-size: 14px; }
	.wd-modal-submit-hint{ display: block; text-align: center; margin-top: 8px; }

	/* ---------- History table ---------- */
	.wd-history-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
	.wd-history-table th{
		text-align: left;
		color: var(--wd-text-muted);
		font-weight: 600;
		font-size: 11.5px;
		text-transform: uppercase;
		letter-spacing: .04em;
		padding: 8px 6px;
		border-bottom: 1px solid var(--wd-border);
	}
	.wd-history-table td{
		padding: 10px 6px;
		border-bottom: 1px solid var(--wd-border);
		color: var(--wd-text);
	}
	.wd-badge{
		display: inline-block;
		padding: 4px 10px;
		border-radius: 999px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .01em;
	}
	.wd-badge-pending{ background: #2a3550; color: #7fb2ff; }
	.wd-badge-approved{ background: #1c3a30; color: var(--wd-green); }
	.wd-badge-denied{ background: #3a1c1c; color: var(--wd-red); }
	.wd-history-empty{ text-align: center; color: var(--wd-text-muted); padding: 24px 10px; font-size: 13px; }

	/* ---------- Instructions ---------- */
	.wd-instructions p{
		font-size: 13.5px;
		color: var(--wd-text-muted);
		margin: 0 0 12px;
		line-height: 1.5;
		padding-left: 4px;
	}
	.wd-instructions a{ color: var(--wd-teal); font-weight: 600; }
	.wd-instructions strong{ color: var(--wd-text); }

	.wd-ads{ margin-bottom: 18px; }

	/* ---------- Tablet tuning (was missing — desktop jumped straight
	   to the 480px phone rules before) ---------- */
	@media (max-width: 768px){
		.wd-panel{ border-radius: var(--wd-radius-lg); }
		.wd-limit-card{ padding: 14px 16px; }
		.wd-section-icon{ width: 34px; height: 34px; font-size: 15px; }
		.wd-section-head-text h5{ font-size: 15px; }
		.wd-modal{ max-width: 480px; }
	}

	/* ---------- Small-phone tuning ---------- */
	@media (max-width: 480px){
		.wd-limit-card{ padding: 13px 14px; margin-bottom: 16px; border-radius: var(--wd-radius-sm); gap: 10px; }
		.wd-limit-head-value{ font-size: 13px; }
		.wd-tabs{ margin-bottom: 16px; }
		.wd-category-section{ padding-top: 16px; margin-top: 16px; scroll-margin-top: 60px; }
		.wd-section-head{ gap: 9px; margin-bottom: 12px; }
		.wd-section-icon{ width: 32px; height: 32px; font-size: 14px; }
		.wd-section-head-text h5{ font-size: 14px; }
		.wd-section-head-text span{ font-size: 11.5px; }
		.wd-section-count{ font-size: 10px; padding: 3px 8px; }
		.wd-group-row{ gap: 9px; }
		.wd-modal-scroll{ padding: 14px 16px 16px; }
		.wd-modal-footer{ padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
	}
</style>

<div class="wd-wrap">

	<div class="wd-ads">
		<div class="desktop"><?= $settings['dashboard_header_ad'] ?></div>
	</div>

	<div class="wd-grid-layout">

		<!-- LEFT: methods + form -->
		<div class="wd-main-col">
			<div class="wd-panel wd-panel-flat">
				<h4 class="wd-panel-title"><i class="fa fa-wallet"></i> Withdraw</h4>
				<p class="wd-panel-sub">Use your coins earned on <?= isset($settings['name']) ? $settings['name'] : 'Two2Cash' ?> for in-game top-ups, crypto, or cash.</p>

				<?php if (isset($_SESSION['withdraw_message'])) { echo $_SESSION['withdraw_message']; } ?>

				<!-- daily limit progress -->

				<form action="<?= site_url('withdraw/withdraw') ?>" method="POST" autocomplete="off" id="wdForm">
					<input type="hidden" name="<?= $csrf_name ?>" value="<?= $csrf_hash ?>">
					<input type="hidden" name="method" id="wdSelectedMethod" required>

					<!-- top-level category quick-nav -->
					<div class="wd-tabs" id="wdCategoryTabs">
						<?php foreach ($categoryLabels as $catKey => $label) {
							$catCount = isset($methods[$catKey]) ? wd_category_count($methods[$catKey]) : 0;
							if ($catCount === 0) continue;
						?>
						<div class="wd-tab" data-category-tab="<?= $catKey ?>">
							<i class="fa <?= $categoryIcons[$catKey] ?>"></i>
							<?= $label ?>
							<span class="wd-tab-count"><?= $catCount ?></span>
						</div>
						<?php } ?>
					</div>

					<?php foreach ($categoryLabels as $catKey => $label) {
						$catCount = isset($methods[$catKey]) ? wd_category_count($methods[$catKey]) : 0;
						if ($catCount === 0) continue;
						$catGroups = $methods[$catKey];
						$ungrouped = $catGroups['_none'] ?? [];
					?>
						<div class="wd-category-section" id="wd-section-<?= $catKey ?>" data-category-panel="<?= $catKey ?>">

							<div class="wd-section-head">
								<span class="wd-section-icon <?= $categoryAccent[$catKey] ?>"><i class="fa <?= $categoryIcons[$catKey] ?>"></i></span>
								<div class="wd-section-head-text">
									<h5><?= $label ?></h5>
									<span><?= $categoryBlurb[$catKey] ?? '' ?></span>
								</div>
								<span class="wd-section-count"><?= $catCount ?> option<?= $catCount === 1 ? '' : 's' ?></span>
							</div>

							<?php
							// ---- product group tiles (e.g. Free Fire, PUBG, Visa, PayPal) ----
							$hasGroups = false;
							foreach ($catGroups as $gKey => $items) {
								if ($gKey === '_none') continue;
								$hasGroups = true;
							}
							if ($hasGroups) { ?>
								<div class="wd-group-row">
									<?php foreach ($catGroups as $gKey => $items) {
										if ($gKey === '_none' || empty($items)) continue;
										$meta = $method_groups[$catKey][$gKey] ?? ['label' => ucfirst($gKey), 'image' => ''];
									?>
										<div class="wd-group-tile" data-group-tile="<?= $catKey ?>:<?= $gKey ?>">
											<span class="wd-group-tile-icon">
												<img src="<?= site_url($meta['image']) ?>" alt="<?= htmlspecialchars($meta['label']) ?>"
													 loading="lazy" decoding="async"
													 onerror="this.onerror=null;this.src='<?= site_url('img/photoswithdraw/photo.png') ?>'">
											</span>
											<span class="wd-group-tile-info">
												<span class="wd-group-tile-name"><?= htmlspecialchars($meta['label']) ?></span>
												<span class="wd-group-tile-count"><?= count($items) ?> package<?= count($items) === 1 ? '' : 's' ?></span>
											</span>
											<i class="fa fa-chevron-down wd-chevron"></i>
										</div>
									<?php } ?>
								</div>

								<?php foreach ($catGroups as $gKey => $items) {
									if ($gKey === '_none' || empty($items)) continue;
									$meta = $method_groups[$catKey][$gKey] ?? ['label' => ucfirst($gKey)];
								?>
									<div class="wd-subgrid-wrap" data-group-panel="<?= $catKey ?>:<?= $gKey ?>">
										<p class="wd-subgrid-title"><i class="fa fa-layer-group"></i> Choose a <?= htmlspecialchars($meta['label']) ?> package</p>
										<div class="wd-card-grid">
											<?php foreach ($items as $method) {
												$affordPct = $method['minimum_withdrawal'] > 0
													? min(100, ($userBalanceUsd / $method['minimum_withdrawal']) * 100)
													: 0;
												$affordClass = $affordPct >= 100 ? 'full' : ($affordPct <= 0 ? 'low' : '');
											?>
												<label class="wd-card" data-method-id="<?= $method['id'] ?>">
													<input type="radio" name="method_radio" value="<?= $method['id'] ?>" class="wd-card-input">
													<span class="wd-card-cat-bar <?= $catKey ?>"></span>
													<span class="wd-card-icon">
														<img src="<?= site_url($method['image']) ?>"
															 alt="<?= htmlspecialchars($method['name']) ?>"
															 loading="lazy" decoding="async"
															 onerror="this.onerror=null;this.src='<?= site_url('img/photoswithdraw/photo.png') ?>'">
													</span>
													<span class="wd-card-body">
														<span class="wd-card-name"><?= htmlspecialchars($method['name']) ?></span>
														<span class="wd-card-code"><?= htmlspecialchars(currency($method['minimum_withdrawal'], $settings['currency_rate'])) ?></span>
														<span class="wd-card-afford" title="<?= number_format($affordPct, 0) ?>% of the cost covered by your balance">
															<span class="wd-card-afford-fill <?= $affordClass ?>" style="width: <?= number_format($affordPct, 1) ?>%;"></span>
														</span>
													</span>
												</label>
											<?php } ?>
										</div>
									</div>
								<?php } ?>
							<?php } ?>

							<?php
							// ---- ungrouped methods for this category (e.g. Crypto coins) ----
							if (!empty($ungrouped)) { ?>
								<div class="wd-method-section">
									<div class="wd-card-grid">
										<?php foreach ($ungrouped as $method) { ?>
											<label class="wd-card" data-method-id="<?= $method['id'] ?>">
												<input type="radio" name="method_radio" value="<?= $method['id'] ?>" class="wd-card-input">
												<span class="wd-card-cat-bar <?= $catKey ?>"></span>
												<span class="wd-card-icon">
													<img src="<?= site_url($method['image']) ?>"
														 alt="<?= htmlspecialchars($method['name']) ?>"
														 loading="lazy" decoding="async"
														 onerror="this.onerror=null;this.src='<?= site_url('img/photoswithdraw/photo.png') ?>'">
												</span>
												<span class="wd-card-body">
													<span class="wd-card-name"><?= htmlspecialchars($method['name']) ?></span>
													<span class="wd-card-code"><?= htmlspecialchars($method['code']) ?></span>
												</span>
											</label>
										<?php } ?>
									</div>
								</div>
							<?php } ?>

						</div>
					<?php } ?>
				</form>

				<a href="/history#withdrawals" class="wd-btn-ghost">
					<i class="fa fa-clock"></i> History
				</a>
			</div>

			<div class="wd-ads">
				<?= $settings['dashboard_bottom_ad'] ?>
			</div>
		</div>

		<!-- RIGHT: history + instructions -->
		<div class="wd-side-col">
			<div class="wd-panel">
				<h4 class="wd-panel-title"><i class="fa fa-list"></i> Withdrawals</h4>
				<?php if (isset($_SESSION['message'])) { echo $_SESSION['message']; } ?>

				<?php if (empty($withdrawals_history)) { ?>
					<div class="wd-history-empty">No withdrawals yet — your first one will show up here.</div>
				<?php } else { ?>
					<div style="overflow-x:auto;">
						<table class="wd-history-table">
							<thead>
								<tr>
									<th>#</th>
									<th>Status</th>
									<th>Amount</th>
									<th>Time</th>
								</tr>
							</thead>
							<tbody>
								<?php foreach ($withdrawals_history as $value) {
									switch ($value['type']) {
										case 0:
											$badge = '<span class="wd-badge wd-badge-pending">Pending</span>';
											break;
										case 1:
											$badge = '<span class="wd-badge wd-badge-approved">Approved</span>';
											break;
										case 2:
											$badge = '<span class="wd-badge wd-badge-denied">Denied</span>';
											break;
										default:
											$badge = '';
									}
									echo '<tr><td>' . $value["id"] . '</td><td>' . $badge . '</td><td>' . format_money($value["amount"]) . '</td><td>' . timespan($value["claim_time"], time(), 2) . ' ago</td></tr>';
								} ?>
							</tbody>
						</table>
					</div>
				<?php } ?>
			</div>

		</div>

	</div>
</div>

<!-- ================= WITHDRAW MODAL ================= -->
<div class="wd-modal-overlay" id="wdModalOverlay">
	<div class="wd-modal" role="dialog" aria-modal="true" aria-labelledby="wdModalName">
		<span class="wd-modal-handle"></span>

		<div class="wd-modal-scroll">
			<div class="wd-modal-head">
				<span class="wd-modal-icon"><img id="wdModalIcon" src="" alt=""></span>
				<div class="wd-modal-head-text">
					<h5 id="wdModalName">Withdraw</h5>
					<span id="wdModalCode"></span>
				</div>
				<button type="button" class="wd-modal-close" id="wdModalClose" aria-label="Close">&times;</button>
			</div>

			<?php if ($user['status'] == "banned") { ?>
				<p class="wd-hint warn"><i class="fa fa-info-circle"></i> Sorry, you can't withdraw while your account is banned.</p>
			<?php } else { ?>

			<!-- Fixed-package hero line: "Cost -> You receive" -->
			<div class="wd-modal-hero" id="wdModalHero">
				<div class="wd-modal-hero-col">
					<span>Cost</span>
					<strong id="wdFixedCost">—</strong>
				</div>
				<i class="fa fa-arrow-right wd-modal-hero-arrow"></i>
				<div class="wd-modal-hero-col">
					<span>You receive</span>
					<strong id="wdFixedReceive">—</strong>
				</div>
			</div>

			<!-- Variable-amount fields (Crypto / "Other Amount") -->
			<div id="wdVariableFields">
				<div class="wd-field-row">
					<div class="wd-field">
						<label>Amount</label>
						<div class="wd-input-group">
							<span class="wd-input-addon"><img src="/img/coin2.png" width="14" draggable="false">&nbsp;Coins</span>
							<input type="number" id="wdAmount" min="0.000001" step="0.000001" placeholder="0.00">
							<span class="wd-input-max" id="wdAmountMax">MAX</span>
						</div>
					</div>
					<div class="wd-field">
						<label>You will receive</label>
						<div class="wd-input-group">
							<input type="text" id="wdConverted" disabled placeholder="0.00">
							<span class="wd-input-addon" id="wdTargetCurrency" style="border-right:0;border-left:1px solid var(--wd-border);">—</span>
						</div>
					</div>
				</div>
				<span class="wd-hint" id="wdMinHint"></span>
			</div>

			<!-- balance meter -->
			<div class="wd-modal-meter">
				<div class="wd-modal-meter-head">
					<span>Your balance covers</span>
					<span id="wdModalAffordPct">0%</span>
				</div>
				<div class="wd-modal-meter-track">
					<div class="wd-modal-meter-fill" id="wdModalAffordFill" style="width:0%;"></div>
				</div>
			</div>

			<div class="wd-field">
				<label id="wdWalletLabel">Wallet / account address</label>
				<div class="wd-input-group">
					<input type="text" id="wdWalletDisplay" value="<?= htmlspecialchars($user['wallet']) ?>" placeholder="Enter your address">
				</div>
			</div>
			<?php } ?>
		</div>

		<?php if ($user['status'] != "banned") { ?>
		<div class="wd-modal-footer">
			<button type="button" class="wd-btn wd-btn-primary wd-modal-submit" id="wdSubmitBtn" disabled>Withdraw</button>
			<span class="wd-hint wd-modal-submit-hint" id="wdSubmitHint"></span>
		</div>
		<?php } ?>
	</div>
</div>

<script>
(function () {
	// ---- data passed from PHP (manual methods config) ----
	var currencyRate = <?= json_encode((float) $settings['currency_rate']) ?>;
	var userBalanceCoins = <?= json_encode((float) $user['balance'] / max($settings['currency_rate'], 0.00000001)) ?>;
	var walletLabels = <?= json_encode($walletLabels) ?>;
	var methods = {};
	<?php foreach ($methods as $catKey => $catGroups) { foreach ($catGroups as $gKey => $items) { foreach ($items as $method) { ?>
		methods[<?= json_encode((string) $method['id']) ?>] = {
			id: <?= json_encode((string) $method['id']) ?>,
			name: <?= json_encode($method['name']) ?>,
			code: <?= json_encode($method['code']) ?>,
			category: <?= json_encode($catKey) ?>,
			price: <?= json_encode((float) $method['price']) ?>,
			minimumWithdrawal: <?= json_encode((float) $method['minimum_withdrawal']) ?>,
			image: <?= json_encode(site_url($method['image'])) ?>,
			fixed: <?= json_encode(!empty($method['fixed'])) ?>,
			fixedQty: <?= json_encode($method['fixed_qty'] ?? null) ?>,
			fixedUnitLabel: <?= json_encode($method['fixed_unit_label'] ?? null) ?>
		};
	<?php } } } ?>

	// ---------------- category quick-nav ----------------
	var categoryTabs = document.querySelectorAll('#wdCategoryTabs .wd-tab');
	var categorySections = document.querySelectorAll('.wd-category-section');

	categoryTabs.forEach(function (tab) {
		tab.addEventListener('click', function () {
			var cat = tab.getAttribute('data-category-tab');
			var section = document.getElementById('wd-section-' + cat);
			if (section) section.scrollIntoView({ behavior: 'smooth', block: 'start' });
		});
	});

	if ('IntersectionObserver' in window && categorySections.length) {
		var observer = new IntersectionObserver(function (entries) {
			entries.forEach(function (entry) {
				if (!entry.isIntersecting) return;
				var cat = entry.target.getAttribute('data-category-panel');
				categoryTabs.forEach(function (t) {
					t.classList.toggle('active', t.getAttribute('data-category-tab') === cat);
				});
			});
		}, { rootMargin: '-45% 0px -50% 0px', threshold: 0 });
		categorySections.forEach(function (section) { observer.observe(section); });
	} else if (categoryTabs.length) {
		categoryTabs[0].classList.add('active');
	}

	// ---------------- product group tiles (accordion, per category section) ----------------
	document.querySelectorAll('.wd-group-tile').forEach(function (tile) {
		tile.addEventListener('click', function () {
			var key = tile.getAttribute('data-group-tile');
			var panel = document.querySelector('.wd-subgrid-wrap[data-group-panel="' + key + '"]');
			var isOpen = tile.classList.contains('open');

			var catSection = tile.closest('.wd-category-section');
			catSection.querySelectorAll('.wd-group-tile').forEach(function (t) { t.classList.remove('open'); });
			catSection.querySelectorAll('.wd-subgrid-wrap').forEach(function (p) { p.classList.remove('open'); });

			if (!isOpen) {
				tile.classList.add('open');
				if (panel) {
					panel.classList.add('open');
					// The panel is always in normal layout (never display:none),
					// only its height/opacity animate — so its horizontal
					// scroller is already "live" and doesn't need a frame to
					// wake up. Wait for the collapse transition to finish
					// before scrolling to it, so we don't fight the animation.
					panel.addEventListener('transitionend', function scrollWhenOpen(e) {
						if (e.propertyName !== 'max-height') return;
						panel.removeEventListener('transitionend', scrollWhenOpen);
						panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
					});
				}
			}
		});
	});

	// ---------------- modal ----------------
	var overlay = document.getElementById('wdModalOverlay');
	var closeBtn = document.getElementById('wdModalClose');
	var selectedMethodInput = document.getElementById('wdSelectedMethod');
	var currentMethod = null;

	var modalHero = document.getElementById('wdModalHero');
	var fixedCost = document.getElementById('wdFixedCost');
	var fixedReceive = document.getElementById('wdFixedReceive');
	var variableFields = document.getElementById('wdVariableFields');

	var amountInput = document.getElementById('wdAmount');
	var amountMaxBtn = document.getElementById('wdAmountMax');
	var convertedInput = document.getElementById('wdConverted');
	var targetCurrencyLabel = document.getElementById('wdTargetCurrency');
	var minHint = document.getElementById('wdMinHint');
	var submitBtn = document.getElementById('wdSubmitBtn');
	var submitHint = document.getElementById('wdSubmitHint');
	var walletDisplay = document.getElementById('wdWalletDisplay');
	var walletLabelEl = document.getElementById('wdWalletLabel');
	var wdForm = document.getElementById('wdForm');

	var modalAffordFill = document.getElementById('wdModalAffordFill');
	var modalAffordPct = document.getElementById('wdModalAffordPct');

	var EPS = 1e-9;

	// Formats a number with up to `maxDecimals` places but strips
	// trailing zeros (and a trailing "." if nothing follows it), so
	// "1000.000000" -> "1000" and "12.340000" -> "12.34". Every coin
	// amount shown to the user goes through this — the underlying
	// coin/USD math (currencyRate, e.g. 1000 coins = $1) is unchanged,
	// this only cleans up how the number is printed.
	function formatNum(num, maxDecimals) {
		if (!isFinite(num)) return '0';
		var factor = Math.pow(10, maxDecimals);
		var rounded = Math.round(num * factor) / factor;
		return rounded.toString();
	}

	function fixedCoins(method) {
		return currencyRate > 0 ? (method.minimumWithdrawal / currencyRate) : 0;
	}

	function updateAffordBar(costCoins) {
		if (!modalAffordFill) return;
		var pct = costCoins > 0 ? Math.min(100, (userBalanceCoins / costCoins) * 100) : 0;
		modalAffordFill.style.width = pct.toFixed(1) + '%';
		modalAffordFill.classList.toggle('full', pct >= 100);
		modalAffordPct.textContent = Math.round(pct) + '%';
	}

	function openModal(methodId) {
		currentMethod = methods[methodId];
		if (!currentMethod) return;

		document.getElementById('wdModalIcon').src = currentMethod.image;
		document.getElementById('wdModalIcon').onerror = function () {
			this.onerror = null;
			this.src = '<?= site_url('img/photoswithdraw/photo.png') ?>';
		};
		document.getElementById('wdModalName').textContent = currentMethod.name;
		document.getElementById('wdModalCode').textContent = currentMethod.code;
		if (targetCurrencyLabel) targetCurrencyLabel.textContent = currentMethod.code;
		if (walletLabelEl) walletLabelEl.textContent = walletLabels[currentMethod.category] || 'Wallet / account address';

		if (currentMethod.fixed) {
			variableFields.style.display = 'none';
			modalHero.style.display = 'flex';

			var coins = fixedCoins(currentMethod);
			fixedCost.textContent = formatNum(coins, 6) + ' coins ($' + currentMethod.minimumWithdrawal.toFixed(2) + ')';
			fixedReceive.textContent = currentMethod.fixedUnitLabel
				? (currentMethod.fixedQty + ' ' + currentMethod.fixedUnitLabel)
				: currentMethod.name;

			if (amountInput) amountInput.value = coins;
			if (convertedInput) convertedInput.value = currentMethod.fixedUnitLabel ? currentMethod.fixedQty : currentMethod.minimumWithdrawal;
			updateAffordBar(coins);
		} else {
			variableFields.style.display = 'block';
			modalHero.style.display = 'none';
			if (amountInput) {
				amountInput.value = '';
				amountInput.max = userBalanceCoins;
			}
			if (convertedInput) convertedInput.value = '';
			var minCoinsForBar = currencyRate > 0 ? (currentMethod.minimumWithdrawal / currencyRate) : 0;
			updateAffordBar(minCoinsForBar);
		}

		updateMinHint();
		updateSubmitState();
		overlay.classList.add('open');
		document.body.style.overflow = 'hidden';
	}

	function closeModal() {
		overlay.classList.remove('open');
		document.body.style.overflow = '';
	}

	document.querySelectorAll('.wd-card').forEach(function (card) {
		card.addEventListener('click', function () {
			document.querySelectorAll('.wd-card').forEach(function (c) { c.classList.remove('selected'); });
			card.classList.add('selected');
			var id = card.getAttribute('data-method-id');
			selectedMethodInput.value = id;
			openModal(id);
		});
	});

	closeBtn && closeBtn.addEventListener('click', closeModal);
	overlay.addEventListener('click', function (e) {
		if (e.target === overlay) closeModal();
	});
	document.addEventListener('keydown', function (e) {
		if (e.key === 'Escape' && overlay.classList.contains('open')) closeModal();
	});

	function updateMinHint() {
		if (!currentMethod || !minHint) return;
		if (currentMethod.fixed) { minHint.textContent = ''; return; }
		var minCoins = currencyRate > 0 ? (currentMethod.minimumWithdrawal / currencyRate) : 0;
		minHint.textContent = 'Minimum withdrawal: ' + formatNum(minCoins, 6) + ' coins (' + currentMethod.minimumWithdrawal.toFixed(2) + ' USD)';
	}

	function updateSubmitState() {
		if (!submitBtn || !currentMethod) return;
		var wallet = walletDisplay.value.trim();
		var reason = '';

		if (currentMethod.fixed) {
			var coins = fixedCoins(currentMethod);
			if (coins > userBalanceCoins + EPS) {
				reason = 'Not enough balance for this package (' + formatNum(userBalanceCoins, 6) + ' coins available).';
			} else if (wallet.length === 0) {
				reason = 'Enter your ' + (walletLabels[currentMethod.category] || 'account') + ' above.';
			}
		} else {
			var amt = parseFloat(amountInput.value);
			if (!(amt > 0)) {
				reason = 'Enter an amount to withdraw.';
			} else if (amt > userBalanceCoins + EPS) {
				reason = 'That\'s more than your balance (' + formatNum(userBalanceCoins, 6) + ' coins available).';
			} else if (wallet.length === 0) {
				reason = 'Enter your ' + (walletLabels[currentMethod.category] || 'account') + ' above.';
			} else {
				var usdAmount = amt * currencyRate;
				if (usdAmount + EPS < currentMethod.minimumWithdrawal) {
					var minCoins = currencyRate > 0 ? (currentMethod.minimumWithdrawal / currencyRate) : 0;
					reason = 'Minimum for ' + currentMethod.name + ' is ' + formatNum(minCoins, 6) + ' coins.';
				}
			}
		}

		submitBtn.disabled = reason !== '';
		if (submitHint) submitHint.textContent = reason;
	}

	function recalcVariable() {
		if (!currentMethod || currentMethod.fixed) return;
		var amt = parseFloat(amountInput.value) || 0;
		var usdAmount = amt * currencyRate;
		var received = currentMethod.price > 0 ? (usdAmount / currentMethod.price) : 0;
		convertedInput.value = received > 0 ? formatNum(received, 8) : '';
		updateAffordBar(amt || (currencyRate > 0 ? currentMethod.minimumWithdrawal / currencyRate : 0));
		updateSubmitState();
	}

	amountInput && amountInput.addEventListener('input', recalcVariable);

	amountMaxBtn && amountMaxBtn.addEventListener('click', function () {
		if (!currentMethod || currentMethod.fixed) return;
		amountInput.value = userBalanceCoins > 0 ? formatNum(userBalanceCoins, 6) : '';
		recalcVariable();
	});

	walletDisplay && walletDisplay.addEventListener('input', updateSubmitState);

	submitBtn && submitBtn.addEventListener('click', function () {
		if (submitBtn.disabled || !currentMethod) return;

		var amountValue = currentMethod.fixed ? fixedCoins(currentMethod) : amountInput.value;

		var amountField = document.createElement('input');
		amountField.type = 'hidden';
		amountField.name = 'amount';
		amountField.value = amountValue;
		wdForm.appendChild(amountField);

		var walletField = document.createElement('input');
		walletField.type = 'hidden';
		walletField.name = 'wallet';
		walletField.value = walletDisplay.value.trim();
		wdForm.appendChild(walletField);

		wdForm.submit();
	});
})();
</script>