/* Zarmad Gold Price Chart – all comments in English */

.zr-gold-chart-widget {
  direction: rtl;
  font-family: 'ZarmadFont', system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Naskh Arabic', Tahoma, sans-serif;
  background: #f9fafb;
  border-radius: 24px;
  padding: 20px 24px 22px;
  color: #111827;
}

.zr-gold-chart-inner {
  position: relative;
}

/* Header: tabs left, summary right */
.zr-gold-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

/* Tabs */
.zr-gold-chart-tabs {
  display: inline-flex;
  background: transparent;
  border-radius: 999px;
  padding: 3px;
  gap: 4px;
}

.zr-gold-chart-tab {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  color: #6b7280;
}

.zr-gold-chart-tab-active {
  background: #facc15;
  color: #111827;
  box-shadow: 0 8px 18px rgba(250,204,21,0.35);
}

/* Summary on the right */
.zr-gold-chart-summary {
  text-align: right;
}

.zr-gold-chart-title {
  font-size: .85rem;
  color: #9ca3af;
  margin-bottom: 2px;
}

.zr-gold-chart-line {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: .9rem;
}

.zr-gold-chart-price {
  font-weight: 800;
  color: #111827;
}

.zr-gold-chart-unit {
  color: #4b5563;
  font-size: .85rem;
}

.zr-gold-chart-change {
  color: #16a34a;
  font-size: .8rem;
}

/* Chart canvas area */
.zr-gold-chart-body {
  position: relative;
  margin-top: 8px;
  height: 260px; /* you can adjust */
}

.zr-gold-chart-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Responsive */
@media (max-width: 768px) {
  .zr-gold-chart-header {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
  }

  .zr-gold-chart-summary {
    text-align: right;
  }

  .zr-gold-chart-body {
    height: 220px;
  }
}