/* =============================================================
   Narkhoon — Public Chart Styles
   Dark amber/gold theme  (نمودار تغییرات قیمت)
   ============================================================= */

.nkh-chart-wrap {
    background:    #1a1508;          /* very dark warm brown, matches reference */
    border:        1px solid #3a2e14;
    border-radius: 12px;
    padding:       22px 22px 14px;
    margin:        24px 0;
    font-family:   inherit;
    direction:     rtl;
}

/* ── Header ── */
.nkh-chart-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   18px;
    flex-wrap:       wrap;
    gap:             10px;
}

.nkh-chart-title {
    margin:      0;
    font-size:   1.05rem;
    font-weight: 700;
    color:       #e8c97a;            /* warm gold */
    letter-spacing: .02em;
}

/* ── Range selector — dropdown style matching reference ── */
.nkh-range-select-wrap {
    position: relative;
    display:  inline-block;
}

.nkh-range-select {
    appearance:       none;
    -webkit-appearance: none;
    background:       #2a1f08;
    border:           1px solid #5a4415;
    border-radius:    7px;
    color:            #d4a83a;
    font-size:        .82rem;
    font-weight:      600;
    padding:          6px 30px 6px 12px;
    cursor:           pointer;
    font-family:      inherit;
    direction:        rtl;
    outline:          none;
    transition:       border-color .2s, background .2s;
}
.nkh-range-select:hover,
.nkh-range-select:focus {
    border-color: #d4a83a;
    background:   #321f06;
}

/* custom chevron arrow */
.nkh-range-select-wrap::after {
    content:        '▾';
    position:       absolute;
    left:           10px;
    top:            50%;
    transform:      translateY(-50%);
    color:          #d4a83a;
    pointer-events: none;
    font-size:      .75rem;
}

/* ── OLD tab buttons — kept for backward-compat but hidden if select is used ── */
.nkh-range-tabs {
    display:       flex;
    gap:           4px;
    background:    rgba(255,255,255,.04);
    border-radius: 8px;
    padding:       3px;
}
.nkh-range-tab {
    background:  transparent;
    border:      none;
    color:       #7a6030;
    font-size:   .78rem;
    font-weight: 500;
    padding:     5px 11px;
    border-radius: 6px;
    cursor:      pointer;
    transition:  all .2s ease;
    font-family: inherit;
}
.nkh-range-tab:hover   { color: #d4a83a; background: rgba(212,168,58,.08); }
.nkh-range-tab.is-active { background: #d4a83a; color: #1a1508; }

/* ── Chart container ── */
.nkh-chart-container {
    position:   relative;
    min-height: 220px;
}

.nkh-chart-loading,
.nkh-chart-empty {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          180px;
    color:           #5a4415;
    font-size:       .875rem;
}

/* ── ApexCharts dark-gold overrides ── */
.nkh-chart-wrap .apexcharts-canvas {
    background: transparent !important;
}
.nkh-chart-wrap .apexcharts-tooltip {
    background:    #2a1f08 !important;
    border:        1px solid #5a4415 !important;
    box-shadow:    0 4px 20px rgba(0,0,0,.6) !important;
    border-radius: 8px !important;
    direction:     rtl;
    color:         #e8c97a !important;
}
.nkh-chart-wrap .apexcharts-tooltip-title {
    background:    #1a1508 !important;
    border-bottom: 1px solid #3a2e14 !important;
    color:         #9a7830 !important;
    font-size:     .72rem !important;
    padding:       5px 10px !important;
}
.nkh-chart-wrap .apexcharts-tooltip-text { color: #e8c97a !important; }
.nkh-chart-wrap .apexcharts-tooltip-text-y-value { color: #fff !important; font-weight: 600 !important; }

.nkh-chart-wrap .apexcharts-xaxistooltip {
    background:   #2a1f08 !important;
    border-color: #5a4415 !important;
    color:        #9a7830 !important;
}
.nkh-chart-wrap .apexcharts-xaxistooltip-bottom:after,
.nkh-chart-wrap .apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: #5a4415 !important;
}

/* grid lines */
.nkh-chart-wrap .apexcharts-gridline { stroke: #2e2106 !important; }

/* axis labels */
.nkh-chart-wrap .apexcharts-xaxis-label tspan,
.nkh-chart-wrap .apexcharts-yaxis-label tspan {
    fill: #6a5020 !important;
}