/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); */


/* استایل کارت‌های اصلی */
.card {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    backdrop-filter: blur(12px);
    overflow: hidden;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    opacity: 0;
    transition: opacity 0.4s;
}

.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

.card:hover::before {
    opacity: 1;
}

/* کارت‌های مستطیلی برای نمادهای خاص */
.symbol-card {
    background: rgba(20, 25, 40, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 5px 10px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.bourse{
    background: #f7af3e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /**/
    background: linear-gradient(145deg, #ddca5a, #11d77f) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #9adfe3 !important;
    border-image: initial !important;
    box-shadow: 0 10px 10px rgb(3 3 3 / 50%);
}

.bourse small {
    font-size:10px;
}

.crypto {
    background: #f7af3e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, #F7931A, #B36B0F);
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #9adfe3 !important;
    border-image: initial !important;
    box-shadow: 0 10px 10px rgb(47 47 47 / 50%);
}

.crypto small {
    font-size:10px;
}

.crypto .card-title {
    color: rgb(64 64 64 / 95%);
    text-shadow: 0 2px 8px rgb(209 209 209);
}

.crypto .price-value-sm {
    color: #ffffff;
    text-shadow: 0 1px 5px rgb(187 187 187 / 42%);
}

.sekeIran{
    background: #f7af3e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /**/
    background: linear-gradient(145deg, #fff100, #ffd287) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #9adfe3 !important;
    border-image: initial !important;
    box-shadow: 0 10px 10px rgb(3 3 3 / 50%);
}

.sekeIran small {
    font-size:10px;
}

.goldIran{
    background: #f7af3e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /**/
    background: linear-gradient(145deg, #faff00, #ffae00) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #9adfe3 !important;
    border-image: initial !important;
    box-shadow: 0 10px 10px rgb(3 3 3 / 50%);
}

.goldIran small {
    font-size:10px;
}



.symbol-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.symbol-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.symbol-card:hover::after {
    opacity: 1;
}

.symbol-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
}

.symbol-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.symbol-name i {
    font-size: 1.8rem;
    transition: all 0.3s;
}

.symbol-name span {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

/* ========== وال‌گلد - طلای کلاسیک ========== */
.wallgold .symbol-name i {
    color: #D4AF37;  /* طلای کلاسیک */
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.wallgold .symbol-name span {
    color: #F1C40F;  /* طلای زنده‌تر برای خوانایی */
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.3);
    font-weight: 800;
}

.wallgold .symbol-price {
    color: #D4AF37;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.wallgold {
    background: linear-gradient(145deg, #4f482d, #3c2a00) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.wallgold:hover {
    background: linear-gradient(145deg, #35301E, #252118) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

/* ========== طلاسی - طلای مدرن ========== */
.talasea .symbol-name i {
    color: #B8860B;  /* طلای تیره */
    text-shadow: 0 0 10px rgba(184, 134, 11, 0.35);
}

.talasea .symbol-name span {
    color: #FFB347;  /* نارنجی طلایی */
    text-shadow: 0 0 8px rgba(255, 179, 71, 0.3);
    font-weight: 800;
}

.talasea .symbol-price {
    color: #B8860B;
    text-shadow: 0 0 10px rgba(184, 134, 11, 0.35);
}

.talasea {
    background: linear-gradient(145deg, #4f482d, #3c2a00) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.talasea:hover {
    background: linear-gradient(145deg, #332C1E, #221E16) !important;
    border-color: rgba(184, 134, 11, 0.4) !important;
}

/* ========== طلاین - طلای جوان ========== */
.tlyn .symbol-name i {
    color: #CDA64D;  /* طلای روشن */
    text-shadow: 0 0 10px rgba(205, 166, 77, 0.3);
}

.tlyn .symbol-name span {
    color: #F7DC6F;  /* طلای پاستلی */
    text-shadow: 0 0 10px rgba(247, 220, 111, 0.4);
    font-weight: 800;
}

.tlyn .symbol-price {
    color: #CDA64D;
    text-shadow: 0 0 10px rgba(205, 166, 77, 0.3);
}

.tlyn {
    background: linear-gradient(145deg, #4f482d, #3c2a00) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.tlyn:hover {
    background: linear-gradient(145deg, #332E22, #232018) !important;
    border-color: rgba(205, 166, 77, 0.4) !important;
}

/* ========== نقره سی - نقره‌ای خالص ========== */
.noghresea .symbol-name i {
    color: #C0C0C0;  /* نقره‌ای خالص */
    text-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}

.noghresea .symbol-name span {
    color: #E8E8E8;  /* سفید نقره‌ای */
    text-shadow: 0 0 10px rgba(232, 232, 232, 0.4);
    font-weight: 800;
}

.noghresea .symbol-price {
    color: #C0C0C0;
    text-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}

.noghresea {
    background: linear-gradient(145deg, #2A2A2A, #1A1A1A) !important;
    border: 1px solid rgba(192, 192, 192, 0.3) !important;
}

.noghresea:hover {
    background: linear-gradient(145deg, #353535, #222222) !important;
    border-color: rgba(192, 192, 192, 0.5) !important;
}

/* دیفالت برای قیمت */
.symbol-price {
    font-size: 1.9rem;
    font-weight: 800;
    direction: ltr;
    letter-spacing: 2px;
    margin: 3px 0 0px;
    font-family: 'Poppins', 'Vazir', sans-serif;
    transition: all 0.3s;
    text-align: center;
    line-height: 15px;
    z-index:999;
}

.symbol-card:hover .symbol-price {
    text-shadow: 0 0 20px currentColor;
}

.symbol-card:hover .symbol-name i {
    transform: scale(1.1);
}

/* دیفالت برای درصد اختلاف */
.diff-badge {
    padding: 6px 5px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(8px);
    border: 1px solid;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.3);
}

.diff-badge.positive {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.4);
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

.diff-badge.negative {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.4);
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

/* رنگ‌بندی کارت‌های اصلی */
.price-card.gold {
    background: linear-gradient(145deg, #c2b700, #ff9f00);
    position: relative;
    overflow: hidden;
}

.price-card.gold::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}

.price-card.gold:hover::after {
    opacity: 1;
}

.price-card.silver {
    background: linear-gradient(145deg, #a2a2a2, #3f3f3f);
}

.price-card.silver::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(192,192,192,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}

.usdt .price-value,
.usd .price-value{
    text-align:left;
}

.usdt .price-currency,
.usd .price-currency{
    text-align:right;
    line-height:30px;
}

.price-card.silver:hover::after {
    opacity: 1;
}

.price-card.btc {
    background: linear-gradient(145deg, #F7931A, #B36B0F);
}
.price-card.eth {
    background: linear-gradient(145deg, #F7931A, #B36B0F);
}

.price-card.oil {
    background: linear-gradient(145deg, #3e3e3e, #000000);
}

.price-card.bourse {
    background: linear-gradient(145deg, #ddca5a, #11d77f) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #9adfe3 !important;
    border-image: initial !important;
}

.price-card.btc::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(247,147,26,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}

.price-card.btc:hover::after {
    opacity: 1;
}

.price-card.eth::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(247,147,26,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}

.price-card.eth:hover::after {
    opacity: 1;
}

.price-card.usdt {
    background: linear-gradient(145deg, #26A17B, #1A6B51);
}

.price-card.usd {
    background: linear-gradient(145deg, #147c5c, #073728)
}

.price-card.copper {
    background: linear-gradient(145deg, rgb(255 131 0), rgb(255 139 0))
}

.price-card.usdt::after,
.price-card.usd::after{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(38,161,123,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}

.price-card.usdt:hover::after,
.price-card.usd:hover::after{
    opacity: 1;
}

.price-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    direction: ltr;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
    letter-spacing: 2px;
    font-family: 'Poppins', 'Vazir', sans-serif;
    position: relative;
    z-index: 1;
}

.price-value-sm {
    font-size: 1.9rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 15px rgba(0,0,0,0.5);
    font-family: 'Poppins', 'Vazir', sans-serif;
    position: relative;
    z-index: 1;
    direction: rtl;
}

.symbol-icon {
    font-size: 2.5rem;
    color: rgba(255,255,255,0.95);
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
    position: relative;
    z-index: 1;
}

.card-title {
    color: rgb(255 255 255 / 95%);
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 2px 8px rgb(0 0 0);
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.card-title i{
    margin-left:5px;
}

.price-change {
    color: #e1e1e1;
    text-shadow: 0px 0px 8px rgb(0 0 0);
    font-size: 0.7rem;
    padding: 0px 10px;
    border-radius: 30px;
    font-weight: 800;
    backdrop-filter: blur(80px);
    background: #4f4f4f38;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.price-change.positive {
    background: rgba(46, 204, 113, 0.15);
    color: #00ff6c;
    border-color: rgba(46, 204, 113, 0.3);
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

.price-change.negative {
    background: rgba(231, 76, 60, 0.15);
    color: #ff5745;
    border-color: rgba(231, 76, 60, 0.3);
    text-shadow: 1px 1px 2px rgb(25 0 0 / 58%);
}

.last-update {
    font-size: 10px;
    background: rgba(0,0,0,0.4);
    padding: 1px 5px;
    border-radius: 30px;
    display: inline-block;
    color: rgba(255,255,255,0.8);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
}

.text-gray {
    color: rgba(255,255,255,0.7);
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* وضعیت اتصال */
.connection-status {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 5px 5px 0px;
    border-radius: 50px;
    font-size: 0.9rem;
    background: rgba(15, 20, 30, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.connection-status:hover {
    background: rgba(25, 30, 45, 0.9);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.connection-status.connected {
    border-right: 4px solid #2ecc71;
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.2);
}
.connection-status.disconnected {
    border-right: 4px solid #e74c3c;
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.2);
}
.connection-status.checking {
    border-right: 4px solid #f39c12;
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.2);
}
.connection-status.cooldown {
    opacity: 0.7;
    cursor: not-allowed;
}

.countdown-timer {
    background: rgba(255,255,255,0.1);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    direction: ltr;
    min-width: 50px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    font-family: 'Poppins', 'Vazir', sans-serif;
}

.toast-notification {
    position: fixed;
    bottom: 100px;
    right: 25px;
    background: rgba(15, 20, 30, 0.95);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 0.95rem;
    backdrop-filter: blur(15px);
    border-right: 4px solid;
    z-index: 1001;
    animation: slideIn 0.3s ease;
    font-weight: 600;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

@keyframes slideIn {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

hr {
    border-color: rgba(255,255,255,0.1);
    margin: 30px 0;
    opacity: 0.5;
}

@keyframes pulseGlow {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

.symbol-card .symbol-name i {
    animation: pulseGlow 3s infinite;
}






/* استایل کانتینر نوار وضعیت */
.status-bars-container {
    display: flex;
    flex-direction: column; /* چیدمان عمودی برای قرارگیری باکس و متن */
    align-items: center;
    margin-top: 10px;
    gap: 4px; /* فاصله بین باکس‌ها و متن */
}

/* ردیف نگهدارنده ۵ باکس */
.bars-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 2px;
}

/* استایل عمومی هر باکس */
.status-box {
    width: 18%;
    height: 5px;
    border-radius: 2px;
    opacity: 0.1;
    transition: opacity 0.3s ease, transform 0.2s;
    position: relative;
}

/* کلاس برای حالت روشن (فعال) */
.status-box.active {
    opacity: 1; /* کاملاً شفاف */
    transform: scaleY(1.2); /* کمی بزرگتر برای تاکید */
    z-index: 2;
}

/* استایل متن زیر باکس‌ها */
.status-label {
    font-size: 9px;
    color: #777;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1px;
}

/* رنگ‌ها */
.bg-strong-red { background-color: #d32f2f; } /* قرمز پر رنگ */
.bg-light-red { background-color: #ef5350; }  /* قرمز کمرنگ */
.bg-yellow { background-color: #fbc02d; }     /* زرد */
.bg-light-green { background-color: #66bb6a; } /* سبز کمرنگ */
.bg-strong-green { background-color: #2e7d32; } /* سبز پر رنگ */




/* دکمه باز و بسته کردن طلا و سکه فیزیکی */
.toggle-gold-btn {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(255, 159, 0, 0.2));
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Vazir', 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.toggle-gold-btn:hover {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.3), rgba(255, 159, 0, 0.3));
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2);
}

.toggle-gold-btn.active {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.3), rgba(255, 159, 0, 0.3));
}

.toggle-gold-btn .toggle-icon {
    transition: transform 0.3s ease;
}

.toggle-gold-btn.active .toggle-icon {
    transform: rotate(180deg);
}

/* انیمیشن ظاهر شدن آیتم‌ها */
.gold-physical-item {
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* استایل کانتینر */
.collapsible-gold-section {
    position: relative;
}

/* دکمه باز و بسته کردن صندوق‌های بورس */
.toggle-bourse-btn {
    background: linear-gradient(145deg, rgba(17, 215, 127, 0.2), rgba(0, 200, 83, 0.2));
    border: 1px solid rgba(17, 215, 127, 0.3);
    color: #11d77f;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Vazir', 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.toggle-bourse-btn:hover {
    background: linear-gradient(145deg, rgba(17, 215, 127, 0.3), rgba(0, 200, 83, 0.3));
    border-color: rgba(17, 215, 127, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 215, 127, 0.2);
}

.toggle-bourse-btn.active {
    background: linear-gradient(145deg, rgba(17, 215, 127, 0.3), rgba(0, 200, 83, 0.3));
}

.toggle-bourse-btn .toggle-icon {
    transition: transform 0.3s ease;
}

.toggle-bourse-btn.active .toggle-icon {
    transform: rotate(180deg);
}

/* انیمیشن ظاهر شدن آیتم‌های بورس */
.hidden-bourse-items .symbol-card {
    animation: fadeInBourse 0.4s ease forwards;
}

@keyframes fadeInBourse {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* هماهنگ‌سازی با دکمه طلای فیزیکی */
.toggle-gold-btn {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(255, 159, 0, 0.2));
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Vazir', 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.toggle-gold-btn:hover {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.3), rgba(255, 159, 0, 0.3));
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2);
}

.toggle-gold-btn.active .toggle-icon,
.toggle-bourse-btn.active .toggle-icon {
    transform: rotate(180deg);
}

.gold-physical-item,
.hidden-bourse-items .symbol-card {
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* دکمه باز و بسته کردن ارزهای دیجیتال */
.toggle-crypto-btn {
    background: linear-gradient(145deg, rgba(226, 217, 0, 0.2), rgba(180, 160, 0, 0.2));
    border: 1px solid rgba(226, 217, 0, 0.3);
    color: #e2d900;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Vazir', 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.toggle-crypto-btn:hover {
    background: linear-gradient(145deg, rgba(226, 217, 0, 0.3), rgba(180, 160, 0, 0.3));
    border-color: rgba(226, 217, 0, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(226, 217, 0, 0.2);
}

.toggle-crypto-btn.active {
    background: linear-gradient(145deg, rgba(226, 217, 0, 0.3), rgba(180, 160, 0, 0.3));
}

.toggle-crypto-btn .toggle-icon {
    transition: transform 0.3s ease;
}

.toggle-crypto-btn.active .toggle-icon {
    transform: rotate(180deg);
}

/* انیمیشن ظاهر شدن آیتم‌های ارز دیجیتال */
.hidden-crypto-items .card {
    animation: fadeInCrypto 0.4s ease forwards;
}

@keyframes fadeInCrypto {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






/* استایل دارایی‌های پین شده - نسخه بهبود یافته */
.pinned-assets-section {
    background: linear-gradient(145deg, rgba(30, 35, 50, 0.95), rgba(20, 25, 40, 0.98));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.pinned-assets-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.6), transparent);
}

.pinned-assets-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.pinned-assets-section .section-header span:first-child {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #ffd700 !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.pinned-assets-section .section-header i {
    margin-left: 8px;
    font-size: 1.2rem;
    animation: pulseGlow 2s infinite;
}

.pinned-assets-section .badge {
    font-size: 0.8rem;
    padding: 6px 14px;
    background: linear-gradient(145deg, #ffd700, #ff9f00) !important;
    color: #1a1a2e !important;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.pinned-asset-card {
    background: linear-gradient(145deg, rgba(40, 45, 60, 0.8), rgba(30, 35, 50, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 10px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.pinned-asset-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.pinned-asset-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.15);
}

.pinned-asset-card:hover::after {
    opacity: 1;
}

.pinned-asset-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.pinned-asset-header .asset-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    height: 45px;
    overflow: hidden;
    margin: 0px auto;
}

.pinned-icon {
    color: #ffd700;
    font-size: 1.1rem;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    animation: pulseGlow 2s infinite;
}

.pinned-asset-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pinned-asset-body > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.pinned-asset-body .label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pinned-asset-body .value {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: 'Poppins', 'Vazir', sans-serif;
}

.pinned-asset-body .asset-total {
    background: rgba(46, 204, 113, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 5px;
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.pinned-asset-body .asset-total .label {
    color: rgba(46, 204, 113, 0.8) !important;
}

.pinned-asset-body .asset-total .total-value {
    color: #2ecc71 !important;
    font-weight: 800;
    font-size: 1rem;
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
    margin: 0px auto;
}

.pinned-asset-footer {
    margin-top: 12px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.pinned-asset-footer small {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.pinned-asset-footer i {
    font-size: 0.75rem;
}

/* انیمیشن pulse برای آیکون پین */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    }
    50% {
        opacity: 0.7;
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
    }
}

/* حالت خالی */
.pinned-empty {
    text-align: center;
    padding: 30px;
    color: rgba(255, 255, 255, 0.5);
}

.pinned-empty i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.3;
}

.pinned-empty p {
    font-size: 0.9rem;
}

/* وضعیت بازار */
.countdown-text{
    text-shadow: 1px 1px 8px black;
}

.market-status {
    font-size: 0.75rem;
    margin-left: auto;
    margin-right: auto;
}

.market-status .badge {
    padding: 4px 8px;
    font-size: 0.7rem;
    display: inline-flex;
}

.market-open-time {
    display: block;
    margin-top: 2px;
}

.text-warning {
    color: #ffc107 !important;
}

.fs-9 {
    font-size: 0.65rem;
}

.fs-10 {
    font-size: 0.75rem;
}

.fs-11 {
    font-size: 0.85rem;
}



/* استایل ریسک بج */
.risk-badge {
    /*display: inline-flex;*/
    display:none;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: bold;
    margin-top: 4px;
    margin-bottom: 2px;
    direction: ltr;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    letter-spacing: 0.3px;
}

/* رنگ‌بندی ریسک از 1 تا 10 */
.risk-badge.risk-1 { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.risk-badge.risk-2 { background: linear-gradient(135deg, #34d399, #10b981); color: white; }
.risk-badge.risk-3 { background: linear-gradient(135deg, #6ee7b7, #34d399); color: #064e3b; }
.risk-badge.risk-4 { background: linear-gradient(135deg, #a7f3d0, #6ee7b7); color: #065f46; }
.risk-badge.risk-5 { background: linear-gradient(135deg, #fef08a, #fde047); color: #854d0e; }
.risk-badge.risk-6 { background: linear-gradient(135deg, #fcd34d, #fbbf24); color: #92400e; }
.risk-badge.risk-7 { background: linear-gradient(135deg, #fb923c, #f97316); color: white; }
.risk-badge.risk-8 { background: linear-gradient(135deg, #f87171, #ef4444); color: white; }
.risk-badge.risk-9 { background: linear-gradient(135deg, #dc2626, #b91c1c); color: white; }
.risk-badge.risk-10 { background: linear-gradient(135deg, #991b1b, #7f1d1d); color: white; }
.risk-badge.risk-null { background: #6b7280; color: white; }

/* هور روی ریسک بج برای نمایش توضیحات */
.risk-badge {
    cursor: help;
    transition: transform 0.2s ease;
}

.risk-badge:hover {
    transform: scale(1.05);
}

/* ریسک بج برای کارت‌های کوچک */
.symbol-card .risk-badge,
.price-card .risk-badge {
    font-size: 8px;
    padding: 2px 6px;
}

.risk-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* برای بخش نام سمبل */
.symbol-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.symbol-name .risk-badge {
    margin-top: 3px;
}




/* ========== کارت فیات (ارز آزاد) ========== */
.price-card.fiat-card {
    background: linear-gradient(145deg, #2c3e50, #1a252f) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(52, 152, 219, 0.3) !important;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}

.price-card.fiat-card:hover {
    border-color: rgba(52, 152, 219, 0.6) !important;
    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.2);
}

/* ========== کارت خودرو ========== */
.price-card.car-card {
    background: linear-gradient(145deg, #8e44ad, #6c3483) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(142, 68, 173, 0.3) !important;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}

.price-card.car-card:hover {
    border-color: rgba(142, 68, 173, 0.6) !important;
    box-shadow: 0 15px 30px rgba(142, 68, 173, 0.2);
}

.price-card.car-card .card-title {
    font-size: 0.75rem !important;
}

/* ========== کارت فارکس ========== */
.price-card.forex-card {
    background: linear-gradient(145deg, #16a085, #0e6655) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(22, 160, 133, 0.3) !important;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}

.price-card.forex-card:hover {
    border-color: rgba(22, 160, 133, 0.6) !important;
    box-shadow: 0 15px 30px rgba(22, 160, 133, 0.2);
}

/* ========== کارت عناصر ========== */
.price-card.elements-card {
    background: linear-gradient(145deg, #d35400, #a04000) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(211, 84, 0, 0.3) !important;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}

.price-card.elements-card:hover {
    border-color: rgba(211, 84, 0, 0.6) !important;
    box-shadow: 0 15px 30px rgba(211, 84, 0, 0.2);
}





/* ==================== دسته‌بندی باکس‌ها ==================== */
.categories-section {
    background: rgba(30, 41, 59, 0.4);
    border-radius: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(148, 163, 184, 0.08);
    backdrop-filter: blur(10px);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

.section-header i {
    font-size: 16px;
    opacity: 0.8;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.category-box-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.category-box-link:hover {
    text-decoration: none;
}

.category-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.category-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.category-box:hover {
    transform: translateY(-2px);
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    background: rgba(30, 41, 59, 0.6);
}

.category-box:hover::before {
    opacity: 1;
}

.category-box:active {
    transform: translateY(0) scale(0.98);
}

.category-box-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.category-box:hover .category-box-icon {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.category-box-info {
    position: relative;
    z-index: 1;
}

.category-box-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
    transition: color 0.3s;
}

.category-box:hover .category-box-title {
    color: #f1f5f9;
}

.category-box-subtitle {
    display: block;
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
    transition: color 0.3s;
}

.category-box:hover .category-box-subtitle {
    color: #94a3b8;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .category-box {
        padding: 10px 8px;
    }

    .category-box-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .category-box-title {
        font-size: 11px;
    }

    .category-box-subtitle {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .categories-section {
        padding: 12px 14px;
    }
}

























/* استایل‌های جدول ETF بورس */
.etf-table-container {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-radius: 16px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.etf-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.etf-table thead th {
    background: linear-gradient(180deg, #1e293b, #0f172a);
    color: #94a3b8;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 10px;
    border-bottom: 2px solid #334155;
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
}

.etf-table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.etf-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.08);
    transform: scale(1.002);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.etf-table tbody td {
    padding: 12px 10px;
    color: #e2e8f0;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.etf-table .fund-name {
    text-align: right;
    font-weight: 600;
    color: #f1f5f9;
    font-size: 13px;
    min-width: 150px;
}

.etf-table .fund-symbol {
    font-size: 10px;
    color: #94a3b8;
    display: block;
    margin-top: 2px;
}

.etf-table .price-value {
    font-weight: 700;
    font-size: 14px;
}

.etf-table .price-positive {
    color: #10b981;
}

.etf-table .price-negative {
    color: #ef4444;
}

/* Progress Bar برای حباب */
.bubble-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.bubble-value {
    font-weight: 700;
    font-size: 13px;
    min-width: 45px;
    text-align: center;
}

.bubble-value.positive {
    color: #10b981;
}

.bubble-value.negative {
    color: #ef4444;
}

.bubble-value.neutral {
    color: #f59e0b;
}

.progress-bar-container {
    width: 80px;
    height: 6px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease, background 0.5s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.progress-bar-fill.positive {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.progress-bar-fill.negative {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.progress-bar-fill.neutral {
    background: #f59e0b;
}

/* بازدهی‌ها */
.return-cell {
    font-weight: 600;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.return-positive {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.return-negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.return-neutral {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .etf-table-container {
        padding: 10px;
        border-radius: 12px;
    }

    .etf-table thead th {
        font-size: 9px;
        padding: 8px 4px;
    }

    .etf-table tbody td {
        padding: 8px 4px;
        font-size: 11px;
    }

    .etf-table .fund-name {
        font-size: 11px;
        min-width: 100px;
    }

    .progress-bar-container {
        width: 50px;
    }
}

/* انیمیشن برای hover */
@keyframes pulse-row {
    0%, 100% { background: rgba(59, 130, 246, 0.08); }
    50% { background: rgba(59, 130, 246, 0.15); }
}

.etf-table tbody tr:hover {
    animation: pulse-row 1s ease infinite;
}
/* استایل ستون واحدهای صادر شده */
.etf-table .units-cell {
    font-weight: 600;
    font-size: 12px;
    color: #f59e0b;
}

/* بهبود نمایش در موبایل */
@media (max-width: 768px) {
    .etf-table .units-cell {
        font-size: 10px;
    }
}


/* دکمه باز/بسته کردن جدول ETF */
.etf-toggle-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15));
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    padding: 8px 24px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.etf-toggle-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.25));
    border-color: rgba(148, 163, 184, 0.4);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.etf-toggle-btn:active {
    transform: scale(0.97);
}

.etf-toggle-btn .toggle-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.etf-toggle-btn.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 768px) {
    .etf-toggle-btn {
        padding: 6px 16px;
        font-size: 11px;
        border-radius: 20px;
    }
}




/* ==================== چارت بک‌گراند ==================== */
.chart-container {
    position: relative !important;
    overflow: hidden !important;
}

.price-chart-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* اطمینان از اینکه محتوای کارت روی چارت نمایش داده بشه */
.chart-content,
.symbol-card > *:not(canvas),
.price-card > *:not(canvas) {
    position: relative !important;
    z-index: 1 !important;
}

/* برای کارت‌های symbol-card */
.symbol-card .symbol-header,
.symbol-card .symbol-price,
.symbol-card .diff-badge,
.symbol-card .price-change,
.symbol-card .market-status,
.symbol-card .status-bars-container,
.symbol-card .status-label {
    position: relative !important;
    z-index: 1 !important;
}

/* برای کارت‌های price-card */
.price-card .card-body,
.price-card .symbol-icon,
.price-card .card-title,
.price-card .price-value,
.price-card .price-value-sm,
.price-card .price-change,
.price-card .market-status,
.price-card .last-update,
.price-card .price-currency {
    position: relative !important;
    z-index: 1 !important;
}