.translatable-chart {
  container-type: inline-size;
  margin:0; padding:0;
}
.translatable-chart .chart-image-wrapper {
  position: relative;
  container-type: inline-size; 
}


.chart-overlay-controls is( .components-base-control, .components-tools-panel-item, .components-base-control__label)  { margin:0;}
.chart-overlay-controls {border:solid 1px #ccc; padding:0 8px;}
.components-grid.components-tools-panel {padding:12px 0;}

.translatable-chart img {
  width: 100%;
  height: auto;
  display: block;
}

.editor-styles-wrapper .overlay-text {
	outline: dotted 1px #6665;
}

.overlay-text {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  background: var(--bg, rgba(255,255,255,0.8));
  font-size: var(--fs, 2cqw); /* 🔹 default if not set */
  padding: 0.2cqw;
padding: var(--pad, 0.2cqw);
border-radius: var(--radius, 0.6cqw);
  display: flex;
  align-items: var(--valign, center);
  justify-content: var(--align, center);
  text-align: var(--align, center);
  box-sizing: border-box;
	font-family: 'Raleway', sans-serif;
	font-variant-numeric: lining-nums;
}

.overlay-text p , .editor-styles-wrapper .overlay-text p {
  margin: 0;
  line-height: var(--lh, 1.2);
  white-space: normal;
  word-break: break-word;
	cursor:text;
}

.overlay-text.is-active-overlay {
  outline: 2px solid var(--wp-admin-theme-color, #007cba);
  outline-offset: 0px;
  z-index: 10;
}

.components-panel__body.is-active-panel {
  border-left: 3px solid var(--wp-admin-theme-color, #007cbabb);
}
.components-base-control__label {margin-bottom:0px !important;}
.components-base-control {margin-bottom:4px !important;}



/* 🔹 Draggable + Resizable Overlay Enhancements */
/* Base handle (hidden by default) */
.overlay-text .resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: transparent;
  cursor: nwse-resize;
  opacity: 0;
  pointer-events: none; /* prevent accidental grab when not active */
  transition: opacity 0.2s ease;
}

/* 🔹 Only visible when overlay is active */
.overlay-text.is-active-overlay .resize-handle {
  opacity: 1;
  pointer-events: auto;
}

/* 🔹 Visual style: subtle diagonal grip lines */
.overlay-text .resize-handle {
  position: absolute;
  bottom:-8px;  right:-8px;
  width: 16px; height: 16px;
	border-radius:4px;
  background:
    var(--wp-admin-theme-color, #007cba)
    url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3345_195)"><path d="M-3.49691e-07 8L3.32 4.68L11.32 12.68L8 16L16 16L16 8L12.68 11.32L4.68 3.32L8 -3.49691e-07L-6.99382e-07 0L-3.49691e-07 8Z"  /></g></svg>')
    center / 60% no-repeat;
  opacity: 0;
  cursor: nwse-resize;
}

/* only visible when active */
.overlay-text.is-active-overlay .resize-handle {
  opacity: 0.8
}
.overlay-text.is-active-overlay .resize-handle:hover {
  opacity: 1;
}
.chart-overlay-controls-grid .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.chart-overlay-controls-grid label {
font-size: 12px;
text-transform: unset;
}
.transChartPnl .components-color-palette__custom-color-text-wrapper {padding:2px 6px;}
.transChartPnl .components-color-palette__custom-color-button { height:56px }
.components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
	margin-top:0;
}
.transChartPnl .components-circular-option-picker__clear {height: 36px;}