/* ==================================================================
   AI API Gateway — Wallet Tab (wallet.php). All colors reuse the
   --aiapi-* tokens declared in panel.css, so this file stays correct
   in both light and dark mode automatically.
   ================================================================== */

.aiapi-wallet-grid {
	display: grid;
	grid-template-columns: 1fr 21rem;
	gap: 16px;
	margin-top: 16px;
	align-items: start;
}
@media (max-width: 900px) {
	.aiapi-wallet-grid { grid-template-columns: 1fr; }
}

.aiapi-wallet-main { display: flex; flex-direction: column; gap: 16px; }
.aiapi-wallet-side { display: flex; flex-direction: column; gap: 16px; }

/* ---- Add funds card ---- */
.aiapi-wallet-addfunds { padding: 20px; }

.aiapi-wallet-topup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.aiapi-wallet-topup-head > span {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--aiapi-muted-foreground);
}

.aiapi-wallet-currency-toggle {
	display: inline-flex;
	gap: 2px;
	background: var(--aiapi-muted);
	border-radius: var(--aiapi-radius-xs);
	padding: 2px;
}
.aiapi-wallet-currency-toggle button {
	border: none;
	background: none;
	cursor: pointer;
	padding: 5px 12px;
	border-radius: calc(var(--aiapi-radius-xs) - 2px);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aiapi-muted-foreground);
}
.aiapi-wallet-currency-toggle button.is-active {
	background: var(--aiapi-card);
	color: var(--aiapi-foreground);
	box-shadow: var(--aiapi-shadow-xs);
}

.aiapi-wallet-amount-display {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 16px;
	border-radius: var(--aiapi-radius-sm);
	background-color: var(--aiapi-card-accent-bg, var(--aiapi-card));
	background-image: linear-gradient(135deg, var(--aiapi-card-accent-bg, transparent), transparent);
	padding: 14px 16px;
}
.aiapi-wallet-amount-display input {
	flex: 1;
	border: none;
	background: none;
	font-size: 28px;
	font-weight: 700;
	color: var(--aiapi-foreground);
	font-family: ui-monospace, monospace;
	padding: 0;
	min-width: 0;
}
.aiapi-wallet-amount-display input::-webkit-outer-spin-button,
.aiapi-wallet-amount-display input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aiapi-wallet-amount-display input { -moz-appearance: textfield; }
.aiapi-wallet-amount-display input:focus { outline: none; }
.aiapi-wallet-amount-display .aiapi-wallet-unit {
	font-size: 15px;
	font-weight: 600;
	color: var(--aiapi-muted-foreground);
	flex-shrink: 0;
}

.aiapi-wallet-presets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 18px;
}
/* Without this, the plain ".aiapi-wallet-presets { display: grid }" rule
   above beats the browser's built-in "[hidden] { display: none }" rule —
   same specificity, but this stylesheet loads after the UA one — so the
   IRT/USD group that wallet-tab.js hides via the `hidden` attribute (see
   setCurrency()) stayed visually on screen and both currencies showed at
   once. This rule has one more attribute selector than the bare class, so
   it always wins regardless of source order. */
.aiapi-wallet-presets[hidden] {
	display: none;
}
@media (max-width: 640px) {
	.aiapi-wallet-presets { grid-template-columns: repeat(2, 1fr); }
}

.aiapi-wallet-chip {
	position: relative;
	text-align: start;
	cursor: pointer;
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius-sm);
	background: var(--aiapi-card);
	padding: 10px;
	transition: border-color .15s ease, background-color .15s ease;
}
.aiapi-wallet-chip:hover { border-color: var(--aiapi-card-border-strong); }
.aiapi-wallet-chip.is-active { border-color: var(--aiapi-primary); background: var(--aiapi-primary-soft); }

.aiapi-wallet-chip-badge {
	position: absolute;
	top: -7px;
	inset-inline-end: -7px;
	background: var(--aiapi-success);
	color: var(--aiapi-success-foreground);
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
}
.aiapi-wallet-chip-main { font-size: 13.5px; font-weight: 700; color: var(--aiapi-foreground); }
.aiapi-wallet-chip-pay { font-size: 11px; color: var(--aiapi-muted-foreground); margin-top: 4px; }
.aiapi-wallet-chip-save { font-size: 10.5px; color: var(--aiapi-success); font-weight: 600; margin-top: 1px; }

/* ---- Payment method selector ---- */
.aiapi-wallet-method-head {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--aiapi-muted-foreground);
	margin-bottom: 8px;
}
.aiapi-wallet-methods { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.aiapi-wallet-method {
	flex: 1;
	min-width: 140px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius-sm);
	background: var(--aiapi-card);
	padding: 10px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aiapi-foreground);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.aiapi-wallet-method.is-active {
	border-color: var(--aiapi-primary);
	box-shadow: 0 0 0 1px var(--aiapi-primary) inset;
}
.aiapi-wallet-method-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--aiapi-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--aiapi-primary);
}

.aiapi-wallet-method-panel[hidden] { display: none; }

/* ---- Card-to-card ---- */
.aiapi-wallet-card-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--aiapi-muted);
	border: 1px solid var(--aiapi-card-border);
	border-radius: var(--aiapi-radius-sm);
	padding: 14px;
	margin-bottom: 14px;
}
.aiapi-wallet-card-info-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.aiapi-wallet-card-info-row > span:first-child { color: var(--aiapi-muted-foreground); }
.aiapi-wallet-card-info-row code { font-size: 13px; font-weight: 700; color: var(--aiapi-foreground); font-family: ui-monospace, monospace; }

.aiapi-wallet-card-form label {
	display: block;
	margin: 10px 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--aiapi-foreground);
}
.aiapi-wallet-card-form label:first-of-type { margin-top: 0; }
.aiapi-wallet-card-form input[type="text"],
.aiapi-wallet-card-form textarea {
	width: 100%;
	border-radius: var(--aiapi-radius-xs);
	border: 1px solid var(--aiapi-card-border);
	background: var(--aiapi-input-bg);
	color: var(--aiapi-foreground);
	padding: 8px 10px;
	font-size: 13px;
}
.aiapi-wallet-card-form input:focus,
.aiapi-wallet-card-form textarea:focus {
	outline: none;
	border-color: var(--aiapi-primary);
	box-shadow: var(--aiapi-focus-ring);
}
.aiapi-wallet-card-form textarea { resize: vertical; min-height: 56px; }

/* ---- Redeem code ---- */
.aiapi-wallet-redeem { padding: 16px 20px; }
.aiapi-wallet-redeem-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 8px; }
.aiapi-wallet-redeem-row input {
	border-radius: var(--aiapi-radius-xs);
	border: 1px solid var(--aiapi-card-border);
	background: var(--aiapi-input-bg);
	color: var(--aiapi-foreground);
	padding: 8px 10px;
	font-size: 13px;
}

/* ---- Referral card ---- */
.aiapi-wallet-referral { overflow: hidden; }
.aiapi-wallet-referral-banner {
	padding: 16px 20px;
	background-color: var(--aiapi-card-accent, var(--aiapi-primary));
	background-image: linear-gradient(135deg, var(--aiapi-card-accent, var(--aiapi-primary)), var(--aiapi-primary));
	color: #fff;
}
.aiapi-wallet-referral-banner h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.aiapi-wallet-referral-banner p { margin: 0; font-size: 12px; opacity: .9; line-height: 1.5; }

.aiapi-wallet-referral-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.aiapi-wallet-referral-stats { display: flex; justify-content: space-around; text-align: center; gap: 8px; }
.aiapi-wallet-referral-stats > div { display: flex; flex-direction: column; gap: 2px; }
.aiapi-wallet-referral-stats strong { font-size: 18px; font-weight: 700; color: var(--aiapi-foreground); font-family: ui-monospace, monospace; }
.aiapi-wallet-referral-stats span { font-size: 10.5px; color: var(--aiapi-muted-foreground); }

.aiapi-wallet-referral-link { display: flex; gap: 6px; align-items: center; }
.aiapi-wallet-referral-link input {
	flex: 1;
	min-width: 0;
	border-radius: var(--aiapi-radius-xs);
	border: 1px solid var(--aiapi-card-border);
	background: var(--aiapi-muted);
	color: var(--aiapi-foreground);
	padding: 7px 9px;
	font-size: 11.5px;
	font-family: ui-monospace, monospace;
}

.aiapi-wallet-referral-rules { list-style: none; margin: 0; padding: 0; font-size: 11.5px; color: var(--aiapi-muted-foreground); display: flex; flex-direction: column; gap: 5px; }
.aiapi-wallet-referral-rules li { display: flex; gap: 6px; }
.aiapi-wallet-referral-rules li .aiapi-icon { flex-shrink: 0; margin-top: 1px; color: var(--aiapi-success); }

/* ---- VIP card ---- */
.aiapi-wallet-vip {
	padding: 16px 20px;
	background-color: var(--aiapi-card-accent-bg, var(--aiapi-card));
	background-image: linear-gradient(135deg, var(--aiapi-card-accent-bg, transparent), transparent);
}
.aiapi-wallet-vip h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--aiapi-foreground); }
.aiapi-wallet-vip h3 .aiapi-icon { color: var(--aiapi-warning); }
.aiapi-wallet-vip-row { margin-bottom: 12px; }
.aiapi-wallet-vip-row:last-of-type { margin-bottom: 0; }
.aiapi-wallet-vip-label { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--aiapi-muted-foreground); margin-bottom: 5px; }
.aiapi-wallet-vip-label span:last-child { font-family: ui-monospace, monospace; color: var(--aiapi-foreground); }
.aiapi-wallet-vip-bar { height: 6px; border-radius: 999px; background: var(--aiapi-muted); overflow: hidden; }
.aiapi-wallet-vip-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--aiapi-primary), var(--aiapi-warning)); transition: width .5s ease; }
.aiapi-wallet-vip-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--aiapi-warning); margin-top: 10px; }