/* ============================================================
   Wallet Transfer Pro v2 — Frontend Styles
   ============================================================ */

.wtp-wrap {
	max-width: 820px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #1a1a2e;
}

/* ── Login Notice ── */
.wtp-login-notice {
	text-align: center;
	padding: 40px;
	background: #f8f9ff;
	border-radius: 12px;
	font-size: 16px;
}

/* ── Balance Card ── */
.wtp-balance-card {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	color: #fff;
	border-radius: 20px;
	padding: 32px 28px 24px;
	margin-bottom: 20px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(15,52,96,0.3);
}
.wtp-balance-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	opacity: 0.7;
	margin-bottom: 8px;
}
.wtp-balance-amount {
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1.1;
}
.wtp-balance-sub {
	font-size: 14px;
	opacity: 0.6;
	margin-top: 4px;
	margin-bottom: 16px;
}
.wtp-currency-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	opacity: 0.85;
}
.wtp-cur-btn {
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
	border-radius: 20px;
	padding: 4px 14px;
	cursor: pointer;
	font-size: 13px;
	transition: all 0.2s;
}
.wtp-cur-btn.active {
	background: #e94560;
	border-color: #e94560;
}
.wtp-cur-btn:hover { opacity: 0.85; }
.wtp-rate-info {
	font-size: 11px;
	opacity: 0.5;
	margin-top: 10px;
}

/* ── Tab Nav ── */
.wtp-action-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.wtp-tab-btn {
	flex: 1;
	min-width: 80px;
	background: #f0f4ff;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 10px 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: #555;
	transition: all 0.2s;
	text-align: center;
}
.wtp-tab-btn:hover { background: #e0e8ff; color: #1a1a2e; }
.wtp-tab-btn.active {
	background: #1a1a2e;
	color: #fff;
	border-color: #1a1a2e;
}

/* ── Tab Content ── */
.wtp-tab-content { display: none; }
.wtp-tab-content.active { display: block; }

.wtp-section-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 18px 0;
	color: #1a1a2e;
	border-bottom: 2px solid #e8ecf0;
	padding-bottom: 10px;
}
.wtp-subsection {
	font-size: 15px;
	font-weight: 600;
	margin: 24px 0 12px;
	color: #333;
}

/* ── Form Elements ── */
.wtp-form-group {
	margin-bottom: 16px;
}
.wtp-form-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #444;
	margin-bottom: 6px;
}
.wtp-form-group input[type="text"],
.wtp-form-group input[type="number"],
.wtp-form-group input[type="password"],
.wtp-form-group select {
	width: 100%;
	padding: 10px 14px;
	border: 2px solid #e0e6ef;
	border-radius: 10px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
	background: #fff;
}
.wtp-form-group input:focus,
.wtp-form-group select:focus {
	border-color: #0f3460;
}
.wtp-input-prefix {
	display: flex;
	align-items: center;
	border: 2px solid #e0e6ef;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.2s;
}
.wtp-input-prefix:focus-within { border-color: #0f3460; }
.wtp-input-prefix span {
	padding: 10px 14px;
	background: #f0f4ff;
	font-weight: 700;
	color: #444;
	border-right: 2px solid #e0e6ef;
	white-space: nowrap;
}
.wtp-input-prefix input {
	flex: 1;
	border: none !important;
	padding: 10px 14px !important;
	outline: none;
}

/* ── Buttons ── */
.wtp-btn {
	display: inline-block;
	padding: 11px 24px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: all 0.2s;
}
.wtp-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wtp-btn-primary { background: #0f3460; color: #fff; width: 100%; text-align: center; margin-top: 4px; }
.wtp-btn-primary:hover:not(:disabled) { background: #1a1a2e; }
.wtp-btn-green { background: #22c55e; color: #fff; }
.wtp-btn-green:hover { background: #16a34a; }
.wtp-btn-red { background: #ef4444; color: #fff; }
.wtp-btn-red:hover { background: #dc2626; }
.wtp-btn-sm { padding: 6px 14px; font-size: 12px; }

/* ── Method Buttons ── */
.wtp-method-btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.wtp-method-btn {
	flex: 1;
	min-width: 100px;
	padding: 12px 10px;
	border: 2px solid #e0e6ef;
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: all 0.2s;
	color: #333;
}
.wtp-method-btn:hover { border-color: #0f3460; color: #0f3460; }
.wtp-method-btn.active { border-color: #0f3460; background: #0f3460; color: #fff; }

/* ── Payment detail boxes ── */
.wtp-info-box {
	background: #f0f6ff;
	border: 1px solid #c8d8f0;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.6;
}
.wtp-info-box p { margin: 4px 0; }
.wtp-info-box strong { color: #1a1a2e; }
.wtp-qr-img {
	max-width: 180px;
	border-radius: 10px;
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	margin: 10px 0;
	display: block;
}
.wtp-mfs-item {
	padding: 6px 0;
	border-bottom: 1px solid #dde9f8;
}
.wtp-mfs-item:last-child { border-bottom: none; }
.wtp-note {
	font-size: 12px;
	color: #666;
	margin-top: 8px !important;
	font-style: italic;
}

/* ── Dropdown ── */
.wtp-dropdown {
	position: absolute;
	background: #fff;
	border: 2px solid #e0e6ef;
	border-radius: 10px;
	z-index: 999;
	max-height: 200px;
	overflow-y: auto;
	width: 100%;
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	display: none;
}
.wtp-form-group { position: relative; }
.wtp-dropdown-item {
	padding: 10px 14px;
	cursor: pointer;
	font-size: 14px;
	border-bottom: 1px solid #f0f0f0;
}
.wtp-dropdown-item:last-child { border-bottom: none; }
.wtp-dropdown-item:hover { background: #f0f6ff; }
.wtp-dropdown-item small { color: #888; margin-left: 6px; }
.wtp-selected-user {
	margin-top: 8px;
	font-size: 13px;
	color: #22c55e;
}

/* ── Messages ── */
.wtp-msg { margin-top: 10px; min-height: 20px; }
.wtp-msg-inner {
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
}
.wtp-msg-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.wtp-msg-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ── History Table ── */
.wtp-history-filters {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.wtp-filter-btn {
	padding: 5px 14px;
	border: 2px solid #e0e6ef;
	border-radius: 20px;
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	color: #555;
	transition: all 0.2s;
}
.wtp-filter-btn.active { background: #0f3460; color: #fff; border-color: #0f3460; }

.wtp-table-wrap {
	overflow-x: auto;
	border-radius: 12px;
	border: 1px solid #e0e6ef;
}
.wtp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.wtp-table th {
	background: #f8faff;
	padding: 10px 14px;
	text-align: left;
	font-weight: 700;
	color: #333;
	border-bottom: 2px solid #e0e6ef;
	white-space: nowrap;
}
.wtp-table td {
	padding: 10px 14px;
	border-bottom: 1px solid #f0f0f0;
	color: #444;
}
.wtp-table tr:last-child td { border-bottom: none; }
.wtp-table tr:hover td { background: #fafcff; }
.wtp-credit { color: #16a34a; font-weight: 700; }
.wtp-debit  { color: #dc2626; font-weight: 700; }
.wtp-empty  { text-align: center; padding: 24px; color: #aaa; }

/* ── Status Chips ── */
.wtp-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.wtp-chip.pending           { background: #fef3c7; color: #92400e; }
.wtp-chip.approved,
.wtp-chip.completed,
.wtp-chip.paid,
.wtp-chip.send,
.wtp-chip.withdrawal_done  { background: #dcfce7; color: #166534; }
.wtp-chip.rejected,
.wtp-chip.declined         { background: #fee2e2; color: #991b1b; }
.wtp-chip.admin_credit     { background: #dbeafe; color: #1e40af; }
.wtp-chip.admin_debit,
.wtp-chip.withdrawal_pending { background: #fde8d8; color: #9a3412; }

/* ── Request Cards ── */
.wtp-request-list { display: flex; flex-direction: column; gap: 10px; }
.wtp-request-card {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff8f0;
	border: 1px solid #fed7aa;
	border-radius: 12px;
	padding: 14px 16px;
	flex-wrap: wrap;
}
.wtp-req-info { flex: 1; font-size: 14px; }
.wtp-req-note { display: block; font-size: 12px; color: #888; margin-top: 2px; }
.wtp-req-pin  { width: 70px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 13px; }

/* ── Responsive ── */
@media (max-width: 600px) {
	.wtp-balance-amount { font-size: 30px; }
	.wtp-tab-btn { font-size: 11px; padding: 8px 4px; }
	.wtp-action-row { gap: 5px; }
	.wtp-table th, .wtp-table td { padding: 8px 10px; font-size: 12px; }
}