/* Wallet page styles - Clean Modern Design */

.wallet-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* Section Base */
.wallet-section {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

/* ============================================
   BALANCE OVERVIEW - Top Card
   ============================================ */
.wallet-overview {
	background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(217, 119, 6, 0.05) 100%);
	border-color: var(--primary);
	text-align: center;
	padding: var(--space-md);
}

.balance-overview {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.balance-total {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.balance-total-label {
	font-size: var(--font-xs);
	color: var(--text-secondary);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.balance-total-amount {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
}

.balance-total-value {
	font-size: 38px;
	font-weight: 800;
	color: var(--gold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.balance-total-token {
	font-size: var(--font-md);
	font-weight: 700;
	color: var(--gold);
	margin-left: 4px;
}

.balance-total-icon {
	width: var(--font-md);
	height: var(--font-md);
	object-fit: contain;
	margin-left: -2px;
}

.balance-breakdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--border);
}

.balance-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--space-xs) var(--space-sm);
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
}

.balance-item-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.balance-item-label {
	font-size: var(--font-xs);
	color: var(--text-secondary);
	font-weight: 500;
}

.balance-item-value {
	font-size: var(--font-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.balance-item-fresh {
	border: 1px solid rgba(34, 197, 94, 0.3);
}

.balance-item-fresh .balance-item-value {
	color: var(--success);
}

.balance-item-frozen {
	border: 1px solid rgba(99, 179, 237, 0.3);
}

.balance-item-frozen .balance-item-value {
	color: #63B3ED;
}

.balance-divider {
	width: 1px;
	height: 20px;
	background: var(--border);
}

/* ============================================
   ACTION BUTTONS - TON & Gift
   ============================================ */
.wallet-action-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}

.wallet-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--space-md);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.wallet-action-btn:active {
	transform: scale(0.98);
}

.wallet-action-ton {
	background: #0098EA;
}

.wallet-action-ton:hover {
	background: #00AAFF;
}

.wallet-action-gift {
	background: #EF4444;
}

.wallet-action-gift:hover {
	background: #F87171;
}

/* Success state for connected */
.wallet-action-btn.btn-success {
	background: #22c55e !important;
	cursor: default;
}

/* TON Connected Bar */
.ton-connected-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	background: rgba(0, 152, 234, 0.1);
	border: 1px solid #0098EA;
	border-radius: var(--radius-md);
}

.ton-connected-bar .ton-connected-info {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.ton-connected-bar .ton-wallet-address {
	font-size: var(--font-sm);
	font-weight: 600;
	color: #0098EA;
	font-family: monospace;
}

.ton-connected-bar .ton-disconnect-btn {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text-secondary);
	font-size: 12px;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.ton-connected-bar .ton-disconnect-btn:hover {
	background: var(--error);
	border-color: var(--error);
	color: white;
}

/* Main Slogan */
.section-slogan {
	font-size: var(--font-md);
	font-weight: 700;
	color: var(--primary-light);
	text-align: center;
	margin: 0 0 var(--space-md);
}

/* Section Footer Text */
.section-footer-text {
	font-size: var(--font-xs);
	color: var(--muted);
	text-align: center;
	margin: var(--space-sm) 0 0;
}

.section-footer-text strong {
	color: var(--text);
}

.section-footer-text .text-highlight {
	color: var(--text);
}

/* Section Description */
.section-desc {
	font-size: var(--font-xs);
	color: var(--text-secondary);
	text-align: center;
	margin: 0 0 24px;
	line-height: 1.4;
}

/* Coming Soon Placeholder */
.wallet-coming-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-xl) var(--space-md);
	background: var(--bg-tertiary);
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
}

.coming-soon-icon {
	font-size: 32px;
}

.coming-soon-text {
	font-size: var(--font-sm);
	color: var(--muted);
	font-weight: 500;
}

/* Product Cards Container */
.wallet-products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	width: 100%;
	min-width: 0;
}

/* Product Card Base - Compact Square */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-md) var(--space-xs);
	background: var(--bg-tertiary);
	border: 1.5px solid var(--primary);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-fast);
	aspect-ratio: 1 / 1.5;
	gap: var(--space-xs);
	min-width: 0;
	overflow: visible;
}

.product-card:hover {
	border-color: var(--border-light);
	background: var(--surface-hover);
}

.product-card:active {
	transform: scale(0.98);
}

/* Aspect ratio for taller cards */
.product-card {
	aspect-ratio: 1 / 1.6;
}

/* Popular Card */
.product-card.product-popular {
	border-color: var(--primary);
	background: linear-gradient(180deg, var(--bg-tertiary) 0%, rgba(217, 119, 6, 0.08) 100%);
}

/* Best Value Card */
.product-card.product-best {
	border-color: var(--primary);
	background: linear-gradient(180deg, var(--bg-tertiary) 0%, rgba(217, 119, 6, 0.08) 100%);
}

/* Product Badge - Top center */
.product-badge {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 8px;
	font-size: 9px;
	font-weight: 700;
	border-radius: var(--radius-full);
	white-space: nowrap;
	z-index: 100;
}

.product-popular .product-badge {
	background: #292524;
	color: #fff;
	border: 1px solid var(--primary);
}

.product-best .product-badge {
	background: #292524;
	color: #fff;
	border: 1px solid var(--primary);
}

/* Product Header */
.product-header {
	margin-bottom: auto;
}

.product-name {
	font-size: 10px;
	font-weight: 700;
	color: var(--primary-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Product Value - Main focus */
.product-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.product-amount {
	font-size: 26px;
	font-weight: 800;
	color: var(--text);
	line-height: 1;
}

.product-token {
	font-size: 12px;
	color: var(--gold);
	font-weight: 700;
}

/* Bonus - Green background, white text */
.product-bonus {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	margin-top: 4px;
	padding: 4px 10px;
	background: #22c55e;
	border-radius: var(--radius-full);
}

/* Product Price */
.product-price {
	font-size: var(--font-sm);
	color: var(--text-primary);
	font-weight: 700;
	margin-top: auto;
	padding-top: var(--space-xs);
	border-top: 1px solid var(--border);
	width: 100%;
	text-align: center;
}

.product-ton-estimate {
	font-size: var(--font-xs);
	color: var(--text-tertiary);
	text-align: center;
	margin-top: 2px;
}

.product-ton-estimate .ton-amount {
	color: var(--primary);
	font-weight: 600;
}

/* Message Area */
.wallet-msg {
	min-height: 18px;
	font-size: var(--font-xs);
	color: var(--text-secondary);
	text-align: center;
	margin-top: var(--space-sm);
}

.wallet-msg.ok { color: var(--success); font-weight: 600; }
.wallet-msg.error { color: var(--error); font-weight: 600; }

/* Smart Tip */
.smart-tip {
	font-size: var(--font-xs);
	color: var(--muted);
	text-align: center;
	margin: var(--space-sm) 0 0;
	line-height: 1.4;
}

.smart-tip strong {
	color: var(--gold);
}

.smart-tip a {
	color: var(--primary-light);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.smart-tip a:hover {
	color: var(--primary);
}

/* TON Connect Section */
.wallet-ton {
	padding: var(--space-md);
}

.ton-connect-container {
	width: 100%;
}

.ton-connect-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md);
	background: var(--bg-tertiary);
	border: 1px solid #0098EA;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.ton-connect-btn:hover {
	background: var(--surface-hover);
	border-color: #00B2FF;
}

.ton-connect-content {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.ton-icon {
	font-size: 24px;
}

.ton-connect-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ton-connect-title {
	font-size: var(--font-sm);
	font-weight: 600;
	color: #0098EA;
}

.ton-connect-desc {
	font-size: var(--font-xs);
	color: var(--text-secondary);
}

.ton-connect-arrow {
	font-size: var(--font-md);
	color: #0098EA;
}

/* TON Connected State */
.ton-connected {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md);
	background: rgba(0, 152, 234, 0.1);
	border: 1px solid #0098EA;
	border-radius: var(--radius-sm);
}

.ton-connected-info {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.ton-wallet-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ton-wallet-label {
	font-size: var(--font-xs);
	color: var(--text-secondary);
}

.ton-wallet-address {
	font-size: var(--font-sm);
	font-weight: 600;
	color: #0098EA;
	font-family: monospace;
}

.ton-disconnect-btn {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text-secondary);
	font-size: 14px;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.ton-disconnect-btn:hover {
	background: var(--error);
	border-color: var(--error);
	color: white;
}

/* Gift CTA Button */
.gift-cta {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md);
	background: var(--bg-tertiary);
	border: 1px solid var(--error);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.gift-cta:hover {
	background: var(--surface-hover);
}

.gift-cta-content {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.gift-cta-icons {
	font-size: 18px;
}

.gift-cta-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.gift-cta-title {
	font-size: var(--font-sm);
	font-weight: 600;
	color: var(--text);
}

.gift-cta-desc {
	font-size: var(--font-xs);
	color: var(--text-secondary);
}

.gift-cta-arrow {
	font-size: var(--font-md);
	color: var(--error);
}

/* Balance Cards */
.balance-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}

.balance-card {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
}

.balance-icon {
	font-size: 20px;
}

.balance-info {
	display: flex;
	flex-direction: column;
}

.balance-label {
	font-size: var(--font-xs);
	color: var(--text-secondary);
}

.balance-amount {
	font-size: var(--font-md);
	font-weight: 700;
}

/* Fresh Nuts - Green */
.balance-card.balance-fresh {
	border: 1px solid rgba(34, 197, 94, 0.2);
}

.balance-card.balance-fresh .balance-amount {
	color: var(--success);
}

/* Frozen Nuts - Blue */
.balance-card.balance-frozen {
	border: 1px solid rgba(99, 179, 237, 0.2);
}

.balance-card.balance-frozen .balance-amount {
	color: #63B3ED;
}

/* ============================================
   INCOMING HARVESTS (inside balance card)
   ============================================ */

/* Harvests Title & Desc */
.harvests-title {
	font-size: var(--font-md);
	font-weight: 700;
	color: #63B3ED;
	text-align: center;
	margin: 0 0 var(--space-xs);
}

.harvests-desc {
	font-size: var(--font-xs);
	text-align: center;
	margin: 0;
	line-height: 1.5;
	color: var(--text);
}

.harvests-desc + .harvests-desc {
	margin-bottom: var(--space-md);
}

/* Table Container with max height */
.harvests-table-container {
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-top: var(--space-md);
}

/* Table Header */
.harvests-table-header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border);
}

.harvests-sort-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: var(--space-sm) var(--space-xs);
	background: none;
	border: none;
	border-right: 1px solid var(--border);
	cursor: pointer;
	font-size: var(--font-xs);
	color: var(--muted);
	font-weight: 500;
	transition: color var(--transition-fast);
}

.harvests-sort-btn:last-child {
	border-right: none;
}

.harvests-sort-btn:hover {
	color: var(--text-secondary);
}

.harvests-sort-btn.active {
	color: var(--text);
}

.sort-arrow {
	font-size: 10px;
	opacity: 0.8;
}

/* Table Body with scroll */
.harvests-table-body {
	max-height: 180px;
	overflow-y: auto;
}

/* Harvest Row */
.harvest-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	border-bottom: 1px solid var(--border);
}

.harvest-row:last-child {
	border-bottom: none;
}

.harvest-source {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm);
	border-right: 1px solid var(--border);
}

.harvest-label {
	font-size: var(--font-xs);
	color: var(--muted);
	font-weight: 500;
}

.harvest-amount {
	font-size: var(--font-xs);
	font-weight: 600;
	color: var(--success);
	text-align: center;
	padding: var(--space-sm);
	border-right: 1px solid var(--border);
}

.harvest-time {
	font-size: var(--font-xs);
	color: var(--muted);
	font-weight: 500;
	text-align: center;
	padding: var(--space-sm);
}

/* Harvest Empty State */
.harvest-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg) var(--space-md);
	color: var(--muted);
	font-size: var(--font-sm);
	font-style: italic;
}

/* ============================================
   RESPONSIVE - Product Cards
   ============================================ */

/* Small screens - tighter spacing */
@media (max-width: 360px) {
	.wallet-products {
		gap: 6px;
	}
	
	.product-card {
		padding: var(--space-sm) 4px;
		border-radius: var(--radius-sm);
	}
	
	.product-name {
		font-size: 8px;
	}
	
	.product-amount {
		font-size: var(--font-xl);
	}
	
	.product-token {
		font-size: 10px;
	}
	
	.product-bonus {
		font-size: 9px;
		padding: 3px 8px;
	}
	
	.product-price {
		font-size: var(--font-xs);
	}
	
	.product-ton-estimate {
		font-size: 10px;
	}
	
	.product-badge {
		font-size: 7px;
		padding: 1px 5px;
		top: -6px;
	}
	
	.section-slogan {
		font-size: var(--font-sm);
	}
	
	.section-desc {
		font-size: 10px;
	}
}

/* Very small screens */
@media (max-width: 300px) {
	.product-amount {
		font-size: var(--font-md);
	}
	
	.product-bonus {
		font-size: 8px;
		padding: 2px 6px;
	}
	
	.product-price {
		font-size: 10px;
	}
	
	.product-ton-estimate {
		font-size: 9px;
	}
}