/* Premium redesign for NW Wallet */
:root{
--nw-primary:#111827;
--nw-primary-hover:#1f2937;
--nw-bg:#f5f7fb;
--nw-card:#fff;
--nw-border:#e7eaf0;
--nw-text:#111827;
--nw-muted:#6b7280;
--nw-success:#16a34a;
--nw-danger:#dc2626;
--nw-radius:20px;
--nw-shadow:0 2px 8px rgba(15,23,42,.05),0 18px 40px rgba(15,23,42,.06);
--nw-shadow-hover:0 12px 40px rgba(15,23,42,.12);
--nw-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--nw-radius-md: 16px;
--nw-radius-sm: 8px;
--nw-shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
--nw-shadow-md: 0 8px 24px rgba(0,0,0,0.06);
--nw-shadow-lg: 0 15px 35px rgba(15, 23, 42, 0.12);

}
* {
	box-sizing: border-box;
	outline: none !important;
}

.nw-app-container {
	max-width: 920px;
	margin: auto;
	padding: 24px;
	direction: rtl;
	color: var(--nw-text);
	font-family: 'yekanbakh';
}

.nw-balance-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg,#111827,#25324a);
	border-radius: 28px;
	padding: 34px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	box-shadow: 0 25px 60px rgba(17,24,39,.25);
	margin-bottom: 30px;
}

.nw-balance-card:before,.nw-balance-card:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.05);
}

.nw-balance-card:before {
	width: 320px;
	height: 320px;
	left: -140px;
	top: -140px;
}

.nw-balance-card:after {
	width: 220px;
	height: 220px;
	right: -80px;
	bottom: -80px;
}

.nw-balance-label {
	display: block;
	color: #cbd5e1;
	font-size: 14px;
	margin-bottom: 10px;
}

.nw-balance-amount {
	margin: 0;
	font-size: 44px;
	font-weight: 800;
	color: #fff;
}

.nw-balance-amount small {
	font-size: 16px;
	color: #dbe4f0;
}

.nw-btn {
	height: 48px;
	padding: 0 24px;
	border: none;
	font-weight: 700;
	cursor: pointer;
	
	/* ۱. ترنزیشن را فقط به ویژگی‌هایی که در هاور تغییر می‌کنند محدود کردیم */
	/* استفاده از cubic-bezier برای یک افکت حرکتی نرم‌تر و پریمیوم‌تر */
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
	            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
	            background-color 0.3s ease, 
	            color 0.3s ease,
	            border-color 0.3s ease;
	            
	/* ۲. انتقال پردازش افکت‌های سنگین به کارت گرافیک (GPU) */
	will-change: transform, box-shadow, background-color;
	
	/* ۳. جلوگیری از پرش و لرزش پیکسلی در مرورگرهای مبتنی بر وب‌کیت */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.nw-btn-primary {
	background: #fff;
	color: #111827;
	border-radius: 8px;
}

.nw-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(255,255,255,.25);
	background: #d4e8f9;
	color: #151515;
}

.nw-btn-secondary {
	background: #111827;
	color: #fff;
}


/* ===== دکمه‌ها ===== */



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

.nw-btn-secondary:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.nw-btn-primary-tab {
	background: #f76c6c !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 10px 30px !important;
}




/* ===== تب‌های ناوبری (سبک کپسولی مدرن) ===== */
.nw-tabs-wrapper {
    display: flex;
    gap: 8px;
    background: var(--nw-bg);
    padding: 6px;
    border-radius: var(--nw-radius-md);
    margin-bottom: 32px;
    border: 1px solid var(--nw-border);
}

.nw-tab-btn {
    background: transparent;
    border: none;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nw-text-muted);
    cursor: pointer;
    position: relative;
    transition: all var(--nw-transition);
    border-radius: 8px;
    flex: 1;
    text-align: center;
    font-family: inherit;
}

.nw-tab-btn:hover {
    color: #1e293b;
	background: #f1e0e9c2;
}

.nw-tab-btn.active {
    color: var(--nw-primary);
    background: var(--nw-card);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* ===== محتوای تب‌ها ===== */
.nw-tab-content {
    display: none;
    animation: nwSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nw-tab-content.active {
    display: block;
}

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

/* ===== فرم درخواست تبلیغات ===== */
.nw-ad-form-wrapper {
    background: var(--nw-card);
    padding: 32px;
    border-radius: var(--nw-radius-md);
    border: 1px solid var(--nw-border);
    box-shadow: var(--nw-shadow-sm);
}

.nw-ad-form-wrapper h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--nw-primary);
    margin-bottom: 24px;
}

.nw-ad-form-wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--nw-text-muted);
}

.nw-ad-form-wrapper input[type="text"],
.nw-ad-form-wrapper select,
.nw-ad-form-wrapper textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--nw-border);
    border-radius: var(--nw-radius-sm);
    background: var(--nw-bg);
    font-family: inherit;
    font-size: 14px;
    color: var(--nw-text-main);
    transition: all var(--nw-transition);
    outline: none;
    margin-bottom: 20px;
}

/* افکت فوکوس نرم برای اینپوت‌ها */
.nw-ad-form-wrapper input:focus,
.nw-ad-form-wrapper select:focus,
.nw-ad-form-wrapper textarea:focus {
    background: var(--nw-card);
    border-color: var(--nw-accent);
    box-shadow: 0 0 0 4px var(--nw-accent-light);
}

.nw-ad-form-wrapper input[type="file"] {
    width: 100%;
    padding: 14px;
    border: 1px dashed var(--nw-border);
    border-radius: var(--nw-radius-sm);
    background: var(--nw-bg);
    cursor: pointer;
    margin-bottom: 20px;
    transition: all var(--nw-transition);
}

.nw-ad-form-wrapper input[type="file"]:hover {
    border-color: var(--nw-accent);
    background: var(--nw-accent-light);
}

.nw-ad-form-wrapper input[type="file"]::file-selector-button {
    margin-left: 15px; /* فاصله دکمه از متن نام فایل (برای راست‌چین) */
    padding: 8px 16px;
    background: var(--nw-primary-dark, #101014);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ===== لیست تراکنش‌ها و تبلیغات (کارت مینی) ===== */
.nw-tx-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--nw-card);
    border: 1px solid var(--nw-border);
    border-radius: var(--nw-radius-sm);
    transition: all var(--nw-transition);
    margin-bottom: 12px;
}

.nw-tx-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--nw-shadow-md);
    border: 1px solid var(--nw-border);
}

.nw-tx-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nw-tx-desc {
    font-size: 14px;
    font-weight: 700;
    color: var(--nw-text-main);
}

.nw-tx-date {
    font-size: 12px;
    color: var(--nw-text-muted);
    direction: ltr;
    text-align: right;
}

.nw-tx-amount {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -0.5px;
}

.nw-tx-amount small {
    font-size: 12px;
    font-weight: 400;
    color: var(--nw-text-muted);
}

.nw-text-success { color: var(--nw-success); }
.nw-text-danger { color: var(--nw-danger); }

/* ===== استیت‌های خالی و لودینگ ===== */
.nw-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--nw-bg);
    border-radius: var(--nw-radius-md);
    color: var(--nw-text-muted);
    font-size: 14px;
}

.nw-loading {
    text-align: center;
    padding: 40px;
    color: var(--nw-text-muted);
    font-size: 14px;
}

/* ===== پیام موفقیت/خطا ===== */
.nw-alert {
    padding: 16px 20px;
    border-radius: var(--nw-radius-sm);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* ===== رسپانسیو موبایل ===== */
@media (max-width: 640px) {
.nw-app-container{padding:16px}
.nw-balance-card{flex-direction:column;align-items:flex-start;gap:20px;padding:24px}
.nw-balance-amount{font-size:34px}

    .nw-ad-form-wrapper {
        padding: 24px 20px;
    }

    .nw-tx-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .nw-tx-amount {
        align-self: flex-end;
    }
}

/* Alerts */
.nw-payment-alert {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.nw-payment-alert.nw-alert-success { background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.nw-payment-alert.nw-alert-error { background-color: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.nw-alert-icon { width: 24px; height: 24px; margin-left: 12px; flex-shrink: 0; }
.nw-alert-content strong { display: block; margin-bottom: 4px; font-size: 15px; }
.nw-alert-content p { margin: 0; font-size: 13px; opacity: 0.9; }

/* Modal Styles */
.nw-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; display: flex; align-items: center; justify-content: center;
}
.nw-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px);
}
.nw-modal-content {
    position: relative; background: #fff; width: 90%; max-width: 400px;
    border-radius: 16px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    animation: nwModalFadeIn 0.3s ease-out;
}
.nw-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid #eee; padding-bottom: 12px; }
.nw-modal-header h3 { margin: 0; font-size: 18px; color: #1a1a1a; }
.nw-modal-close { font-size: 24px; color: #888; cursor: pointer; transition: 0.2s; line-height: 1; }
.nw-modal-close:hover { color: #e74c3c; }
.nw-input-modern {
    width: 100%; padding: 12px; border: 1px solid #e0e0e0;
    border-radius: 8px; font-size: 16px; font-family: inherit; transition: 0.3s;
}
.nw-input-modern:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); }

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