/* ==========================================================================
   استایل‌های اختصاصی برگه نرخ آنلاین طلا، سکه، ارز و رمزارز
   FILE: assets/css/market-style.css
   ========================================================================== */

.market-page-main { 
    background-color: #f8fafc; 
    padding-bottom: 50px; 
}

/* هدر و کارت‌های شاخص */
.market-hero-section { 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 24px; 
    margin-bottom: 25px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); 
}

.market-header-title { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    flex-wrap: wrap; 
    gap: 15px; 
}

.market-header-title h1 { 
    font-size: 1.4rem; 
    font-weight: 900; 
    color: #0f172a; 
    margin-bottom: 5px; 
}

.market-subtitle { 
    font-size: 0.85rem; 
    color: #64748b; 
    margin: 0; 
}

.btn-refresh-market { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background-color: #f1f5f9; 
    color: #334155; 
    border: 1px solid #cbd5e1; 
    padding: 8px 18px; 
    border-radius: 6px; 
    font-family: inherit; 
    font-size: 0.82rem; 
    font-weight: 700; 
    cursor: pointer; 
    transition: all 0.25s ease; 
    text-decoration: none; 
}

.btn-refresh-market:hover { 
    background-color: #a00501; 
    color: #ffffff; 
    border-color: #a00501; 
}

.market-highlights-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 16px; 
}

.highlight-card { 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 10px; 
    padding: 16px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    transition: transform 0.2s, box-shadow 0.2s; 
}

.highlight-card:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); 
}

.card-icon { 
    width: 44px; 
    height: 44px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.2rem; 
    flex-shrink: 0; 
}

.gold-bg { background-color: #fef3c7; color: #d97706; }
.coin-bg { background-color: #fef9c3; color: #ca8a04; }
.currency-bg { background-color: #dcfce7; color: #15803d; }
.crypto-bg { background-color: #e0f2fe; color: #0369a1; }

.card-info { flex: 1; }
.card-title { font-size: 0.78rem; color: #64748b; display: block; margin-bottom: 4px; }
.card-price-row { display: flex; align-items: baseline; gap: 4px; }
.price-num { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.price-unit { font-size: 0.72rem; color: #64748b; }

.card-badge { 
    padding: 4px 8px; 
    border-radius: 20px; 
    font-size: 0.72rem; 
    font-weight: 800; 
    display: inline-flex; 
    align-items: center; 
    gap: 4px; 
}

.card-badge.up { background-color: #d1fae5; color: #047857; }
.card-badge.down { background-color: #fee2e2; color: #b91c1c; }

/* جدول‌ها و تب‌ها */
.market-main-container { 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 20px; 
    margin-bottom: 30px; 
}

.market-controls-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    gap: 15px; 
    flex-wrap: wrap; 
    border-bottom: 1px solid #e2e8f0; 
    padding-bottom: 15px; 
}

.market-tabs { display: flex; gap: 8px; }

.tab-btn { 
    background: #f1f5f9; 
    border: none; 
    padding: 10px 18px; 
    border-radius: 8px; 
    font-family: inherit; 
    font-weight: 700; 
    font-size: 0.85rem; 
    color: #475569; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

.tab-btn.active { 
    background-color: #a00501; 
    color: #ffffff; 
}

.market-search-box { position: relative; min-width: 240px; }
.market-search-box i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.market-search-box input { width: 100%; padding: 9px 36px 9px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; font-size: 0.82rem; outline: none; }

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

.table-responsive { overflow-x: auto; }
.market-table { width: 100%; border-collapse: collapse; text-align: right; }
.market-table th { background-color: #f8fafc; color: #475569; font-size: 0.8rem; font-weight: 700; padding: 12px 16px; border-bottom: 2px solid #e2e8f0; }
.market-table td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; font-size: 0.88rem; color: #1e293b; }

.item-name strong { display: block; font-size: 0.9rem; }
.item-symbol { font-size: 0.72rem; color: #94a3b8; }
.item-price .val { font-weight: 800; }
.item-price .unit { font-size: 0.75rem; color: #64748b; margin-right: 3px; }

.item-change-val.positive { color: #16a34a; font-weight: 700; direction: ltr; text-align: right; }
.item-change-val.negative { color: #dc2626; font-weight: 700; direction: ltr; text-align: right; }

.status-pill { padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 700; display: inline-block; }
.status-pill.positive { background-color: #d1fae5; color: #047857; }
.status-pill.negative { background-color: #fee2e2; color: #b91c1c; }

.item-time { font-size: 0.78rem; color: #64748b; }

.crypto-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.crypto-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.crypto-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.crypto-card-header h3 { font-size: 0.98rem; font-weight: 800; margin: 0; }
.symbol-badge { font-size: 0.72rem; color: #64748b; font-weight: 600; }
.crypto-price { font-size: 1.1rem; font-weight: 900; color: #0f172a; margin-bottom: 8px; }
.crypto-price .label { font-size: 0.78rem; color: #64748b; font-weight: 400; margin-left: 6px; }
.crypto-desc { font-size: 0.78rem; color: #64748b; line-height: 1.6; margin: 0; }

/* آکاردئون تمیز (حذف خطوط قرمز کادر) */
/* ==========================================================================
   آکاردئون صددرصد پایداری و بدون باگ FAQ
   ========================================================================== */
.market-faq-section {
    margin-top: 35px;
    margin-bottom: 25px;
}

.faq-accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.faq-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item.active {
    border-color: var(--bg-nav-bar, #a00501);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.faq-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: right;
    outline: none;
    font-family: var(--font-main);
}

/* حل مشکل عدم ثبت کلیک روی آیکون یا متن داخل دکمه */
.faq-toggle * {
    pointer-events: none;
}

.faq-toggle i {
    font-size: 0.8rem;
    color: #64748b;
    transition: transform 0.3s ease, color 0.3s ease;
    margin-right: 10px;
}

.faq-item.active .faq-toggle {
    color: var(--bg-nav-bar, #a00501);
}

.faq-item.active .faq-toggle i {
    transform: rotate(180deg);
    color: var(--bg-nav-bar, #a00501);
}

/* بخش پاسخ‌ها */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.3s ease;
    padding: 0 20px;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.95;
}

.faq-item.active .faq-content {
    max-height: 1000px; /* اجازه رشد روان پاسخ */
    padding: 12px 20px 18px 20px;
    border-top: 1px dashed #f1f5f9;
}

.faq-content p {
    margin: 0;
}

@media (max-width: 768px) { 
    .market-header-title { flex-direction: column; align-items: flex-start; } 
    .btn-refresh-market { width: 100%; justify-content: center; } 
    .market-controls-bar { flex-direction: column; align-items: stretch; } 
    .market-tabs { overflow-x: auto; padding-bottom: 5px; } 
    .tab-btn { flex-shrink: 0; } 
}