/* Uses WordPress/theme default font */
.wcph-wrap { font-family: inherit; direction: rtl; color: var(--wcph-text); }
.wcph-wrap * { font-family: inherit; box-sizing: border-box; }

.wcph-wrap--main{
  background: var(--wcph-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px 14px 10px;
  overflow: hidden;
}

.wcph-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.wcph-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
.wcph-range{
  display:flex;
  gap:6px;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.wcph-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--wcph-text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor:pointer;
  transition: .15s ease;
}
.wcph-btn:hover,
.wcph-btn:focus{
  background: var(--wcph-range-hover-bg, rgba(255,255,255,.08));
  color: var(--wcph-range-hover-text, var(--wcph-text));
}
.wcph-btn.is-active{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}
.wcph-btn:disabled{ opacity:.5; cursor:not-allowed; }

.wcph-body{
  position: relative;
  background: var(--wcph-bg);
  border-radius: 12px;
  padding: 10px 10px 6px;
  overflow: hidden;
  min-height: 220px;
}

.wcph-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02), rgba(255,255,255,.05));
  color: var(--wcph-muted);
  font-size: 13px;
  z-index: 2;
}

.wcph-chart{ width: 100%; }

/*
  ApexCharts: keep the chart canvas LTR to avoid y-axis/x-axis label collisions
  inside RTL layouts. Legend/tooltip remain RTL for Persian text.
*/
.wcph-chart,
.wcph-mini-chart{ direction: ltr; }

.wcph-wrap .apexcharts-tooltip{ direction: rtl; }

/* Tooltip RTL: control spacing between colored marker (dot) and series text */
.wcph-wrap .apexcharts-tooltip-series-group{
  direction: rtl;
  text-align: right;
}
.wcph-wrap .apexcharts-tooltip-marker{
  margin-left: 6px !important; /* marker -> text gap */
  margin-right: 0 !important;
}

/* Mini tooltip: prevent some themes from stretching the tooltip to full width */
.wcph-wrap--mini .apexcharts-tooltip{
  width: auto !important;
  max-width: calc(100% - 12px);
  display: inline-block !important;
}
.wcph-wrap--mini .apexcharts-tooltip-series-group{
  width: auto !important;
}

/*
  Fix Persian (Jalali) x-axis date labels occasionally rendering with reversed token order
  (e.g. "دی ۱۴۰۴ ۷" instead of "۷ دی ۱۴۰۴") in SVG/RTL contexts.
  This complements the JS formatter which uses NBSP + RLM.
*/
.wcph-wrap .apexcharts-xaxis-texts-g text{
  direction: rtl;
  unicode-bidi: plaintext;
}

/* Right-align legend items + add 2-5px gap from marker */
.wcph-wrap .apexcharts-legend{ justify-content: flex-end !important; }
.wcph-wrap .apexcharts-legend-series{ margin: 0 10px 0 0 !important; }
.wcph-wrap .apexcharts-legend-marker{ margin-left: 4px !important; margin-right: 0 !important; }

.wcph-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 10px;
  color: var(--wcph-muted);
  font-size: 13px;
}

.wcph-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding: 6px 2px 0;
}
.wcph-note{
  color: var(--wcph-muted);
  font-size: 12px;
}

/* Mobile mini */
.wcph-wrap--mini{
  background: var(--wcph-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 10px 12px 12px;
  position: relative;
}

/* Mini min/max badge (top-right) */
.wcph-mini-minmax{
  display:none; /* shown when data loaded */
  font-size: 12px;
  line-height: 1.2;
  color: var(--wcph-muted);
  pointer-events: none; /* keep widget clickable */
  text-align: right;
  white-space: nowrap;
}
.wcph-mini-minmax .wcph-mm-sep{ opacity: .7; padding: 0 4px; }
.wcph-mini-minmax .wcph-mm-label{ opacity: .75; }
.wcph-mini-minmax .wcph-mm-max,
.wcph-mini-minmax .wcph-mm-min{ font-weight: 700; color: var(--wcph-text); }
.wcph-mini-head{
  display:block;
  margin-bottom: 8px;
  direction: rtl;
}
.wcph-mini-head-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap: wrap;
  width: 100%;
}
.wcph-mini-title{ font-weight: 700; font-size: 13px; }
.wcph-wrap--mini .wcph-mini-title::after{
  content: ':';
  opacity: .7;
  margin-inline-start: 0;
  margin-inline-end: 6px;
}
.wcph-mini-sep{ opacity:.55; padding: 0 2px; }
.wcph-mini-range{ font-size: 12px; color: var(--wcph-muted); }


.wcph-mini-minmax .wcph-mm-label{ opacity: .85; }
.wcph-mini-minmax .wcph-mm-max,
.wcph-mini-minmax .wcph-mm-min{ color: var(--wcph-text); font-weight: 600; }
.wcph-mini-minmax .wcph-mm-sep{ opacity: .55; padding: 0 4px; }
.wcph-mini-chart{
  width:100%;
  background: var(--wcph-bg);
  border-radius: 12px;
  padding: 8px 8px 6px;
  overflow:hidden;
}

/* Make apex elements not collide with surrounding columns */
.wcph-wrap svg { overflow: visible; }
.wcph-wrap .apexcharts-canvas { margin-inline: auto; }


/* RTL legend: place color marker on the RIGHT of text */
.wcph-wrap .apexcharts-legend {
  direction: rtl;
}
.wcph-wrap .apexcharts-legend-series {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  column-gap: 5px;
}
.wcph-wrap .apexcharts-legend-marker {
  margin: 0 !important;
}


/* Custom tooltip */
.wcph-tt{direction:rtl;text-align:right;font-size:12px;line-height:1.6;min-width:180px;padding:10px;}
.wcph-tt-date{font-weight:700;margin-bottom:2px;}
.wcph-tt-tether{font-size:11px;opacity:0.85;margin-bottom:6px;}
.wcph-tt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap;}
.wcph-tt-name{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.wcph-tt-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;}
.wcph-tt-val{font-weight:600;}
.wcph-tt-empty{font-size:11px;opacity:0.8;}