/* Custom CSS for the Accumulators template */

/* ── SmartCharts font-size baseline fix ────────────────────────────────────
   SmartCharts' entire CSS was authored against Deriv's platform which sets
   html { font-size: 62.5% } (1rem = 1em = 10px globally).
   Our app uses the browser default (1rem = 1em = 16px), so every em-based
   dimension renders 60% larger than intended.

   Setting font-size: 62.5% on the SmartChart root element re-anchors ALL
   `em` units back to 10px in a single rule.                                */
#accumulator-chart {
  font-size: 62.5%; /* 62.5% × 16px = 10px → matches Deriv's platform baseline */
}

/* ── rem-based overrides ────────────────────────────────────────────────────
   `rem` always resolves against the HTML root (16px here, 10px on dtrader),
   so the fix above does not help them. Each value below is (original × 10px). */

/* Symbol-select button info block: 4.2rem→42px, 15rem→150px */
.cq-chart-title .cq-symbol-select-btn .cq-symbol-info {
  min-height: 42px;
  min-width: 150px;
}

/* Symbol name right-padding: 1rem→10px */
.cq-chart-title .cq-symbol-select-btn .cq-symbol {
  padding-right: 10px;
}

/* Symbol-search input inside the market-change dropdown: 1.4rem→14px */
.sc-search-input > input {
  font-size: 14px;
}

/* Drawing tools mobile dialog category header: 1rem→10px */
.smartcharts-mobile .sc-dialog--tabular .sc-dtools__category__head {
  padding-left: 10px;
}

/* Drawing/deletion toast notifications (position:fixed, outside #accumulator-chart):
   min-height: 3rem→30px; padding: .5rem .5rem .5rem 1rem → 5px 5px 5px 10px */
.sc-drawing-toast,
.sc-deletion-snackbar {
  min-height: 30px;
  padding: 5px 5px 5px 10px;
  gap: 5px;
  border-radius: 5px;
}

/* Move navigation widget closer to the bottom of the chart. */
.sc-navigation-widget {
  bottom: 30px;
}

/* Fix icon alignment within navigation widget buttons. */
.sc-navigation-widget__item .ic-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Basket/composite symbol icons: the library relies on text-align:center to
   center the SVG inside .ic-icon, but SVG renders as a block element so
   text-align has no effect. Use flex centering to fix the alignment. */
.ic-wld > span:last-child,
.ic-frx > span:last-child,
.ic-otc > span:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
}

.barrier .shade {
  z-index: 0;
}

/* No-code "Hide chart": the chart is fully unmounted and replaced by a
   standalone <SymbolSelector> (a plain Quill Select), so no SmartCharts-specific
   styling is needed for the hidden state. */

/* Mobile: move the SmartCharts toolbar widget to the bottom of the chart.
   The library hard-codes top: 102px which lands mid-chart on short viewports.
   !important IS required here: the library rule `.sc-toolbar-widget` has the same
   (0,1,0) specificity as ours, and SmartCharts injects its stylesheet at runtime
   (after this static custom.css), so on source order alone the library would win. */
@media (max-width: 1023px) {
  .sc-toolbar-widget {
    top: auto !important;
    bottom: 8px !important;
  }

  /* Remove horizontal padding on the chart canvas so it uses full width on small screens. */
  .smartcharts-mobile .ciq-chart {
    padding: 0;
  }
}

/* No-code build mode: briefly flash the draggable blocks (3× over 1.5s) when the
   layout is unlocked, so it's clear the components can be dragged to reorder. */
@keyframes nocode-drag-hint {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(var(--primary) / 0);
    border-color: rgb(var(--border));
  }
  50% {
    box-shadow: 0 0 0 3px rgb(var(--primary) / 0.35);
    border-color: rgb(var(--primary));
  }
}
.nocode-drag-hint {
  animation: nocode-drag-hint 1s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
  .nocode-drag-hint {
    animation: none;
  }
}