/* ===== Compact Modern Wallet 2026 ===== */
*{ margin:0; padding:0; box-sizing:border-box; }

:root{
	--primary:#8B0E0E;
	--primary-dark:#5f0b0b;
	--bg:#f7f8fa;
	--card:#ffffff;
	--text:#1a1a1a;
	--text-light:#6b7280;
	--border:#e5e7eb;
	--success:#10b981;
	--danger:#ef4444;
	--radius:14px;
	--shadow:0 2px 8px rgba(0,0,0,0.08);
	--shadow-lg:0 8px 24px rgba(0,0,0,0.12);
}

body{
	background:var(--bg);
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

.wallet-container{
	max-width:900px;
	margin:0 auto;
	padding:20px 16px;
	direction:rtl;
}

/* بطاقة الرصيد - تصميم مسطح مصغر */
.balance-hero{
	background:linear-gradient(135deg,#8B0E0E 0%,#5f0b0b 100%);
	border-radius:var(--radius);
	padding:24px 20px;
	margin-bottom:16px;
	box-shadow:var(--shadow);
	position:relative;
	overflow:hidden;
}

.balance-hero::after{
	content:'';
	position:absolute;
	width:120px;
	height:120px;
	background:radial-gradient(circle,rgba(255,255,255,0.06) 0%,transparent 70%);
	bottom:-40px;
	left:-40px;
	border-radius:50%;
}

.balance-content{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

.balance-info{
	flex:1;
	min-width:0;
}

.balance-label{
	color:rgba(255,255,255,0.8);
	font-size:11px;
	font-weight:600;
	margin-bottom:6px;
	text-transform:uppercase;
	letter-spacing:0.5px;
}

.balance-amount{
	color:#ffffff;
	font-size:32px;
	font-weight:800;
	line-height:1;
	letter-spacing:-1px;
	margin-bottom:12px;
}
	
	.balance-amount,
.balance-amount .woocommerce-Price-amount,
.balance-amount .amount,
.balance-amount bdi,
.balance-amount .woocommerce-Price-currencySymbol{
	font-size:32px !important;
	line-height:1 !important;
	font-weight:800 !important;
	color:#fff !important;
}


/* رقم الحساب - تصميم مدمج */
.account-number-inline{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:rgba(255,255,255,0.12);
	border:1px solid rgba(255,255,255,0.18);
	border-radius:8px;
	padding:6px 12px;
}

.account-label-small{
	font-size:9px;
	color:rgba(255,255,255,0.7);
	font-weight:600;
	text-transform:uppercase;
}

.account-number{
	font-size:13px;
	color:#fff;
	font-weight:800;
	font-family:'Courier New',monospace;
	direction:ltr;
	unicode-bidi:plaintext;
}

.copy-btn-small{
	width:24px;
	height:24px;
	background:rgba(255,255,255,0.15);
	border:1px solid rgba(255,255,255,0.2);
	border-radius:6px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:all 0.2s;
	flex-shrink:0;
}

.copy-btn-small:hover{
	background:rgba(255,255,255,0.25);
	transform:scale(1.08);
}

.copy-btn-small svg{
	width:13px;
	height:13px;
	color:#fff;
}

/* أيقونة المحفظة - مصغرة */
.wallet-icon-compact{
	width:44px;
	height:44px;
	background:rgba(255,255,255,0.12);
	backdrop-filter:blur(8px);
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid rgba(255,255,255,0.15);
	flex-shrink:0;
}

.wallet-icon-compact svg{
	width:22px;
	height:22px;
	color:#fff;
}

/* الأزرار - 3 بالصف مدمجة */
.quick-actions{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:10px;
	margin-bottom:16px;
}

.action-card{
	background:var(--card);
	border:1.5px solid var(--border);
	border-radius:12px;
	padding:14px 10px;
	text-align:center;
	text-decoration:none;
	color:var(--text);
	transition:all 0.25s;
	position:relative;
}

.action-card:hover{
	border-color:var(--primary);
	transform:translateY(-2px);
	box-shadow:var(--shadow);
}

.action-card.active{
	background:var(--primary);
	border-color:var(--primary);
	color:#fff;
}

.action-icon{
	width:36px;
	height:36px;
	margin:0 auto 8px;
	background:rgba(139,14,14,0.08);
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.action-card.active .action-icon{
	background:rgba(255,255,255,0.2);
}

.action-icon svg{
	width:18px;
	height:18px;
	color:var(--primary);
}

.action-card.active .action-icon svg{
	color:#fff;
}

.action-text{
	font-size:13px;
	font-weight:700;
}

/* قسم المعاملات - مدمج */
	.transactions-section{
		
	
	background:var(--card);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	overflow:hidden;
}

.section-header{
	padding:16px 18px;
	border-bottom:1px solid var(--border);
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.section-title{
	font-size:15px;
	font-weight:800;
	color:var(--text);
}

.section-subtitle{
	font-size:12px;
	color:var(--text-light);
	font-weight:600;
}

.transactions-list{
	padding:12px;
}

.transaction-item{
	background:#fafafa;
	border:1.5px solid var(--border);
	border-radius:12px;
	padding:12px;
	margin-bottom:8px;
	display:flex;
	align-items:center;
	gap:12px;
	transition:all 0.25s;
	cursor:pointer;
}

.transaction-item:hover{
	background:#fff;
	border-color:var(--primary);
	box-shadow:var(--shadow);
}

.transaction-icon{
	width:40px;
	height:40px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}

.transaction-icon.credit{
	background:rgba(16,185,129,0.12);
	border:2px solid rgba(16,185,129,0.25);
}

.transaction-icon.debit{
	background:rgba(239,68,68,0.12);
	border:2px solid rgba(239,68,68,0.25);
}

.transaction-icon svg{
	width:20px;
	height:20px;
}

.transaction-icon.credit svg{ color:var(--success); }
.transaction-icon.debit svg{ color:var(--danger); }

.transaction-details{
	flex:1;
	min-width:0;
}

.transaction-title{
	font-size:13px;
	font-weight:700;
	color:var(--text);
	margin-bottom:3px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.transaction-date{
	font-size:11px;
	color:var(--text-light);
	font-weight:600;
}

.transaction-amount{
	text-align:left;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:4px;
}

.amount-value{
	font-size:14px;
	font-weight:800;
	font-family:'Courier New',monospace;
}

.amount-value.credit{ color:var(--success); }
.amount-value.debit{ color:var(--danger); }

.transaction-badge{
	font-size:9px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:0.4px;
	padding:3px 8px;
	border-radius:5px;
}

.transaction-badge.credit{
	background:rgba(16,185,129,0.12);
	color:var(--success);
}

.empty-state{
	padding:40px 20px;
	text-align:center;
}

.empty-icon{
	width:60px;
	height:60px;
	margin:0 auto 16px;
	background:rgba(139,14,14,0.06);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.empty-icon svg{
	width:30px;
	height:30px;
	color:var(--text-light);
	opacity:0.5;
}

.empty-text{
	font-size:14px;
	color:var(--text-light);
	font-weight:600;
}

/* Modal - مدمج */
.modal-overlay{
	display:none;
	position:fixed;
	inset:0;
	background:rgba(0,0,0,0.5);
	backdrop-filter:blur(4px);
	z-index:99999;
	align-items:center;
	justify-content:center;
	padding:20px;
}

.modal-overlay.active{
	display:flex;
	animation:fadeIn 0.25s;
}

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.modal-content{
	background:var(--card);
	border-radius:var(--radius);
	width:100%;
	max-width:400px;
	box-shadow:var(--shadow-lg);
	overflow:hidden;
	animation:slideUp 0.3s;
}

@keyframes slideUp{ from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }

.modal-header{
	background:var(--primary);
	color:#fff;
	padding:16px 20px;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.modal-title{
	font-size:16px;
	font-weight:800;
}

.modal-close{
	width:32px;
	height:32px;
	background:rgba(255,255,255,0.15);
	border:none;
	border-radius:8px;
	color:#fff;
	font-size:20px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all 0.2s;
}

.modal-close:hover{
	background:rgba(255,255,255,0.25);
}

.modal-body{ padding:20px; }

.form-group{ margin-bottom:16px; }

.form-label{
	display:block;
	font-size:13px;
	font-weight:700;
	color:var(--text);
	margin-bottom:8px;
}

.form-input{
	width:100%;
	padding:12px 14px;
	border:2px solid var(--border);
	border-radius:10px;
	font-size:14px;
	font-weight:600;
	transition:all 0.25s;
	font-family:inherit;
}

.form-input:focus{
	outline:none;
	border-color:var(--primary);
	box-shadow:0 0 0 3px rgba(139,14,14,0.1);
}

.modal-actions{
	display:flex;
	gap:10px;
	margin-top:20px;
}

.btn{
	flex:1;
	padding:12px 20px;
	border-radius:10px;
	font-size:14px;
	font-weight:800;
	cursor:pointer;
	transition:all 0.25s;
	border:none;
	font-family:inherit;
}

.btn-secondary{
	background:var(--bg);
	color:var(--text);
	border:2px solid var(--border);
}

.btn-secondary:hover{
	background:var(--border);
}

.btn-primary{
	background:var(--primary);
	color:#fff;
	box-shadow:0 4px 12px rgba(139,14,14,0.3);
}

.btn-primary:hover{
	transform:translateY(-2px);
	box-shadow:0 6px 16px rgba(139,14,14,0.4);
}

/* Toast */
.toast{
	position:fixed;
	bottom:20px;
	left:20px;
	background:#1a1a1a;
	color:#fff;
	padding:12px 18px;
	border-radius:10px;
	font-weight:700;
	font-size:13px;
	box-shadow:var(--shadow-lg);
	z-index:999999;
	opacity:0;
	transform:translateY(10px);
	transition:all 0.3s;
}

.toast.show{
	opacity:1;
	transform:translateY(0);
}

/* Responsive */
@media (max-width:600px){
	.wallet-container{ padding:16px 12px; }
	.balance-hero{ padding:20px 16px; }
	.balance-amount{ font-size:28px; }
	.wallet-icon-compact{ width:40px; height:40px; }
	.wallet-icon-compact svg{ width:20px; height:20px; }
	.quick-actions{ gap:8px; }
	.action-card{ padding:12px 8px; }
	.action-icon{ width:32px; height:32px; }
	.action-text{ font-size:12px; }
	.transaction-item{ padding:10px; gap:10px; }
}