body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
}

/* Prevent the page from scrolling while editor is active; let .canvas-holder handle scrolling */
html, body, .default-container {
  height: 100%;
  overflow: hidden;
}

.grp-handler-cp-c {
  margin-left: -20px;
}

.default-container {
  width: 100%;
  background-color: rgba(239, 239, 239, 1);
  /* display: flex; */
}

.toolbar {
  line-height: 0;
  height: 82px;
  background-color: #E32929;
  box-shadow: 0 0 3px 0 rgba(50, 50, 50, .25);
  display: flex;
 justify-content: space-between;
}
.logo{
      width: 132px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toolbar .extended-buttons{
    display: flex;
    align-items: center;
    justify-content: center;

}
.toolbar button {
  width: 64px;
  height: 54px;
  opacity: 1;
  clear: both;
  border: 0;
  border-radius: unset;
  outline: none;
  

}

.main-buttons {
  width:90px !important ;
  height: 100vh !important;
  line-height: 0 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 3px 0 rgba(50, 50, 50, .25) !important;
  display: inline-flex !important;
  flex-direction: column;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-items: center !important;
  transition: width 0.35s ease;
  gap: 15px !important;
}
.main-buttons .tool-btn#table {
  /* margin-bottom: 30px; */
}
.main-buttons button {
  width: 70px !important;
  clear: both !important;
  border: 0 !important;
 border-radius: 8px;
  outline: none !important;
  background-color: white !important;
}


.main-buttons button.active {
  box-shadow: inset 5px 0 10px 0 rgba(50, 50, 50, .1);
  background-color: #E32929 !important;
  border-radius: 8px;
}

.main-buttons button.active svg path,
.main-buttons button.active svg g path {
  stroke: white !important;
  fill: white !important;
}

/* Outline-only icons: the rule above also fills every path white, which
   turns these outlines into solid white blobs. Recolour the stroke only.
   (Ids outrank the .dark active rule too, so this holds in both themes.) */
.main-buttons #eraser.active svg path,
.main-buttons #upload.active svg path,
.main-buttons #background.active svg path {
  fill: none !important;
  stroke: white !important;
}

/* The table icon is drawn with <rect>/<line>, which the path rule misses,
   so it stayed black on the red active background. */
.main-buttons #table.active svg rect,
.main-buttons #table.active svg line {
  stroke: white !important;
}

.main-buttons button.active .label {
  color: white !important;
}


.main-buttons button img,
.main-buttons button svg {
  width: 22px;
  height: 22px;
  color: white !important;
}
.main-buttons.expanded {
  width: 132px !important;       
  border: 1px solid #F3F4F6;
  box-shadow: 0px 1px 4px 0px #0000001A;
   display: inline-flex !important;
  flex-direction: column;
   align-items: center;
}
.main-buttons.expanded .tool-btn {
  width: 112px !important;
  transition: width 0.35s ease;
}
#product-panel.toolpanel-expanded-width {
left: -110px !important;
}
.tool-btn {
     width: 112px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px !important;
}
.tool-btn .label {
  white-space: nowrap;
  font-size: 13px;
}

/* The canvas-settings button is the only one with a two-word label, and the
   sidebar is sized for single words like "layers"/"product". Allowing just
   this one to wrap keeps it readable instead of clipping or forcing the
   whole rail wider. Scoped by id so no other tool button is affected. */
#background .label {
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}

.expand-btn svg {
  transition: transform 0.2s ease;
}

.expand-btn.expanded svg {
  transform: rotate(180deg);
}

.main-panel {
  height: calc(100% - 54px);
  display: flex;
  position: absolute;
    top: 43px;
    left: 245px;
}

.floating-zoom-level-container {
  position: fixed;
  z-index: 10000;
  background: white;
  padding: 10px 20px;
  bottom: 50px;
  right: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 10px;
  align-items: center;
}

.floating-zoom-level-container label {
  font-weight: 600;
  color: #333;
  margin: 0;
}

.floating-zoom-level-container select {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.canvas-holder {
  margin: 0;
  /* use left/right offsets instead of fixed width so we can reserve space
     for the right-side panels (toolpanel) and avoid overlap */
  left: 90px;
  right: 290px; /* reserve toolpanel width so it doesn't cover the canvas */
  height: calc(100vh - 82px - 40px);
  overflow: auto;
  /* block layout: padding-based centering is applied by JS so overflow scrolling
     always exposes the full canvas (flex centering clips top/left on overflow) */
  display: block;
  background: #eaeaea;
  position: fixed;
  top: 82px;
  transition: left 0.3s ease, right 0.3s ease;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

.canvas-holder::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.canvas-holder::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.canvas-holder::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

.canvas-holder::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Adjust when main buttons are expanded */
.main-buttons.expanded ~ .main-panel .canvas-holder {
  left: 132px;
  right: 290px;
  height: calc(100vh - 82px - 40px);
}

/* .canvas-holder .content is a plain block; JS (applyZoom) sets its margin
   to centre it inside the holder using padding on the holder itself. */
.canvas-holder .content {
  position: relative;
  display: block;
  box-sizing: border-box;
  max-width: none;
  /* Prevent scripts from pushing it outside the holder */
  left: auto !important;
  right: auto !important;
  margin: 0;
}

.canvas-container {
  background-image: url('../images/canvas-image.png');
  background-size: 30px 30px;
  border: 1px solid #ccc;
  margin: auto;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: block;
  position: relative !important; */
}
.upper-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.toolpanel {
  background-color: #FFFFFF;
  width: 290px;
  min-height: 200px;
  /* allow vertical scrolling when content exceeds viewport */
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #ddd;
  transition: all .4s;
  box-sizing: border-box;
  text-align: left;
  font-size: 13px;
  color: #777;
  display: none;
  position: absolute;
  top: 42px;
  left: -109px;
  z-index: 9999;
  border-radius: 8px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);

  
}
.toolpanel::-webkit-scrollbar {
width: 1px;
}
.toolpanel.closed {
  left: -300px;
}

.toolpanel.visible {
  display: initial;
  width: ;
}

/* Always render SweetAlert2 above all custom dialogs/toolpanels. */
.swal2-container {
  z-index: 2147483000 !important;
}

.swal2-popup {
  z-index: 2147483001 !important;
}

/* Render only the product panel as a modal dialog. */
#product-panel.toolpanel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: min(560px, 92vw);
  max-height: 80vh !important;
  min-height: 0;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  z-index: 12000;
  overflow: hidden;
  left: 50% !important;
}

#product-panel.toolpanel.visible {
  display: block;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 0 100vmax rgba(15, 23, 42, 0.42);
}

#product-panel.toolpanel .content {
  max-height: 80vh;
  overflow-y: auto;
  padding: 18px;
}

.toolpanel .content {
  padding: 10px;
  position: relative;
  /* make inner content scroll independently and ensure bottom area is reachable */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 36px; /* ensure last controls aren't flush against edge */
}

.toolpanel .title {
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding:10px 0px  10px 10px;
  font-family: Outfit;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 18px;
  leading-trim: NONE;
  line-height: 24px;
  letter-spacing: 0px;
  color: #364153;
}

.toolpanel .content .hide-show-handler {
  position: absolute;
  top: calc(50% - 40px);
  right: -42px;
  width: 40px;
  height: 80px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  cursor: pointer;

  background-image: url('/lib/caret-left.svg');
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center center;
}

.toolpanel.closed .content .hide-show-handler {
  background-image: url('/lib/caret-right.svg');
}

.spectrum.with-add-on {
  width: 40px;
}
.layer-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0px;
  margin: 5px 0px;
  cursor: grab;
  border: 1px solid rgba(224, 224, 224, 1);
  border-radius: 16px;
  height:60px;

}
.layer-row:hover{
background: #E7000B1A;
border: 1px solid #E7000B
}
.layer-row button{
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
}

.layer-content {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 5px;
  cursor: pointer;
  min-width: 0;
}

.layer-thumbnail {
  width: 90px;
  height: 55px;
  object-fit: contain;
  /* border-radius: 8px; */
  /* background: #f5f5f5; */
  /* border: 1px solid #e0e0e0; */
  flex-shrink: 0;
  padding-left: 20px;
}

.layer-name {
  font-size: 14px;
  color: #333;
  flex: 1;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* inline table cell editor overlay */
.tbl-overlay-editor {
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  background: #fffbe6;
  padding: 6px 10px;
  min-width: 40px;
  max-width: 800px;
  overflow: visible;
  outline: none;
  word-break: break-word;
  white-space: pre-wrap;
}

#shapes-panel .button {
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
  padding: 10px;
  width: 46px;
  height: 46px;
  display: inline-block;
  margin: 9px;
  border: 1px solid rgba(224, 224, 224, 1);
  border-radius: 16px;
  gap: 10px;
  scrollbar-color: red !important;
}

.canvas-size-setting {
  font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #fff;
}
#background-panel .canvas-size-setting input {
  width: 60px;
  background-color: #fff;
  border-radius: 6px;
  border: 2px solid #e4e4e4;
  padding: 4px 10px;
  line-height: 18px;
  font-size: 13px;
}

/* Background image section */
#background-panel .bg-image-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
#background-panel .bg-image-settings p {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #333;
}
.dark #background-panel .bg-image-settings p {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #fff;
}
.btn-set-bg-image,
.btn-remove-bg-image {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s, opacity .18s;
}
.btn-set-bg-image {
  background: #d93636;
  color: #fff;
}
.btn-set-bg-image:hover { background: #d93636; }
.btn-remove-bg-image {
  background: #ff4f4f1a;
  color: #d93636;
  border: 1px solid #ff4f4f33;
}
.btn-remove-bg-image:hover { background: #ff4f4f30; }

/* Canvas Orientation */
#background-panel .canvas-orientation-setting {
  padding: 12px 0 4px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
#background-panel .canvas-orientation-setting > p {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #333;
}
.dark #background-panel .canvas-orientation-setting > p {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}
.orientation-buttons {
  display: flex;
  gap: 8px;
}
.orientation-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 2px solid #e4e4e4;
  border-radius: 8px;
  /* background: #fff; */
  cursor: pointer;
  font-size: 12px;
  color: #555;
  transition: border-color .15s, background .15s, color .15s;
  line-height: 1.2;
}
.dark .orientation-btn {
  color: white;
}
.orientation-btn:hover {
  border-color: red;
  color: red;
}
.orientation-btn.active {
  border-color: red;
  color: red;
}
.orientation-btn.active svg rect {
  stroke: red;
}

/* Upload label hover effect */
#bg-upload-label:hover { border-color: red; color: red; }
#replace-upload-label:hover { border-color: red; color: red; }

/* Replace Image button – only visible when image is selected */
#select-panel .object-options #replace-image {
  display: none;
}
#select-panel .object-options #replace-image svg {
  stroke: currentColor;
}
/* `.object-options button { display: inline-flex !important }` beats both the
   rule above and jQuery's .hide(), so the panel toggles this class instead. */
#select-panel .object-options #replace-image.is-hidden {
  display: none !important;
}

#select-panel {
  position: fixed !important;
  right: 0px !important;
  left: unset;
  top: 82px;
  border-radius: unset;

  /* use viewport-based max height so the panel never extends past the window */
  max-height: calc(100vh - 82px - 20px);
}

#layers-panel{
    position: fixed !important;
    right: 0px !important;
    left: unset;
    top: 82px;
    border-radius: unset;
    height: 100%;
    max-height: unset;

}

#layers-panel .layer-row.active,
.toolpanel#select-panel .layers-section .layers-list .layer-row.active {
  border-color: #e7000b !important;
  box-shadow: 0 0 0 1px rgba(231, 0, 11, 0.2);
  background-color: #fff5f5;
}

.toolpanel#select-panel .layers-section .toggle-layers svg{
  transition: transform 0.2s ease;
}
.toolpanel#select-panel .layers-section .toggle-layers.expanded svg{
  transform: rotate(180deg);
}
#background-panel{
    position: fixed !important;
    right: 0px !important;
    left: unset;
    top: 82px;
    border-radius: unset;
    height: 100%;
    max-height: unset;

}

.shape-properties-section h4{
  font-family: Outfit !important;
font-weight: 600 !important;
font-style: SemiBold !important;
font-size: 18px !important;
line-height: 24px !important;
letter-spacing: 0px !important;
color: #364153 !important;
  margin-bottom: 10px !important;
}
.alignment-section h4{
  font-family: Outfit !important;
font-weight: 600 !important;
font-style: SemiBold !important;
font-size: 18px !important;
line-height: 24px !important;
letter-spacing: 0px !important;
color: #364153 !important;
  margin-bottom: 10px !important;
}
.dimensions-section h4{
  font-family: Outfit !important;
font-weight: 600 !important;
font-style: SemiBold !important;
font-size: 18px !important;
line-height: 24px !important;
letter-spacing: 0px !important;
color: #364153 !important;
  margin-bottom: 10px !important;
}
.layers-section h4{
  font-family: Outfit !important;
font-weight: 600 !important;
font-style: SemiBold !important;
font-size: 18px !important;
line-height: 24px !important;
letter-spacing: 0px !important;
color: #364153 !important;
  margin-bottom: 10px !important;
}

/* Corner type buttons (Square / Round) */
.toolpanel .border-section .corner-buttons{
  display: flex;
  gap: 10px;
}
.toolpanel .border-section .corner-buttons .corner-btn{
  width: 124px;
  height: 44px;
  padding: 10px 15px;
  border-radius: 16px;
  background: white;
 border: 1px solid rgba(229, 231, 235, 1);
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #364153;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toolpanel .border-section .corner-buttons .corner-btn:focus{
  outline: 2px solid rgba(231,0,11,0.2);
}
.toolpanel .border-section .corner-buttons .corner-btn.active{
  color: rgba(231, 0, 11, 1);
  /* subtle emphasis on active background */
  background: rgba(231, 0, 11, 0.14);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.04);
}
.alignment-section button{
margin-right: 15px !important;
margin-bottom: 10px !important;
}
.object-options h4, .effect-section h4 {
  font-family: Outfit !important;
font-weight: 600 !important;
font-style: SemiBold !important;
font-size: 18px !important;
line-height: 24px !important;
letter-spacing: 0px !important;
color: #364153 !important;
  margin-bottom: 10px !important;
}
.object-options button{
  margin-right: 13px !important;
  margin-bottom: 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.text-section h4{
  font-family: Outfit !important;
font-weight: 600 !important;
font-style: SemiBold !important;
font-size: 18px !important;
line-height: 24px !important;
letter-spacing: 0px !important;
color: #364153 !important;
  margin-bottom: 10px !important;
}
#select-panel .text-section .style button,
#select-panel .alignment-section button,
#select-panel .object-options button,
#table-panel .text-section .style button,
#table-panel .alignment-section button,
#table-panel .object-options button {
  padding: 0px 10px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #E5E7EB;
  text-align: center;
  outline: none;
}

#select-panel .object-options button svg,
#table-panel .object-options button svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  opacity: .7;
  vertical-align: middle;
  display: block;
}
#select-panel .text-section .style button:hover,
#select-panel .alignment-section button:hover,
#select-panel .object-options button:hover,
#table-panel .text-section .style button:hover,
#table-panel .alignment-section button:hover,
#table-panel .object-options button:hover{
  color: #E7000B  !important;
  background: #E7000B1A !important;

}

/* Active state for text-section buttons */

#select-panel button.active,
#table-panel button.active {
  fill: #E7000B !important;
  background: #E7000B1A !important;
}
.object-options button.active {
  fill: #E7000B !important;
  background: #E7000B1A !important;
}

/* Dark mode: make active property-panel buttons solid red with white icons */
.dark #select-panel .text-section .style button.active,
.dark #select-panel .alignment-section button.active,
.dark #select-panel .object-options button.active,
.dark #table-panel .text-section .style button.active,
.dark #table-panel .alignment-section button.active,
.dark #table-panel .object-options button.active {
  background-color: #E32929 !important;
  color: #ffffff !important;
  border-color: #E32929 !important;
  box-shadow: none !important;
}
.dark #select-panel .text-section .style button.active svg path,
.dark #select-panel .alignment-section button.active svg path,
.dark #select-panel .object-options button.active svg path,
.dark #select-panel .text-section .style button.active svg g path,
.dark #select-panel .alignment-section button.active svg g path,
.dark #select-panel .object-options button.active svg g path,
.dark #table-panel .text-section .style button.active svg path,
.dark #table-panel .alignment-section button.active svg path,
.dark #table-panel .object-options button.active svg path,
.dark #table-panel .text-section .style button.active svg g path,
.dark #table-panel .alignment-section button.active svg g path,
.dark #table-panel .object-options button.active svg g path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Active state for group/ungroup buttons - make SVG strokes and fills red */
#group.active svg path{
  stroke: #E7000B !important;
  fill: #E7000B !important;
}

#ungroup svg  path {
  stroke: black !important;
}
#ungroup.active svg path {
  stroke: #E7000B !important;
  fill: #E7000B !important;
}

#select-panel button svg {
  opacity: .7;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
.toggle-vis svg {
  width: 16px !important;
  height: 16px !important;
}
.lock svg {
  width: 16px !important;
  height: 16px !important;
}
.delete svg {
  width: 16px !important;
  height: 16px !important;
}

#select-panel .text-section .style,
#select-panel .text-section .family,
#select-panel .text-section .sizes,
#select-panel .text-section .align,
#select-panel .text-section .color {
  margin-bottom: 20px;
}


#select-panel .text-section .sizes input {
  width: 50px;
}

.toolpanel#select-panel .text-section,
.toolpanel#select-panel .effect-section {
  display: none;
}

.border-section h4{
  font-family: Outfit !important;
font-weight: 600 !important;
font-style: SemiBold !important;
font-size: 18px !important;
line-height: 24px !important;
letter-spacing: 0px !important;
color: #364153 !important;
  margin-bottom: 10px !important;
}
.toolpanel#select-panel.type-group .border-section {
  display: none;
}

.toolpanel#select-panel.type-group .fill-section {
  display: none;
}

.toolpanel#select-panel.type-textbox .text-section {
  display: block;
}

.toolpanel#select-panel.type-textbox .fill-section {
  display: none;
}

.toolpanel#select-panel.type-image .effect-section {
  display: block;
}

.toolpanel#select-panel.type-image .fill-section {
  display: none;
}

.toolpanel#shapes-panel, .toolpanel#eraser-panel, .toolpanel#draw-panel, .toolpanel#table-panel {
  position: fixed !important;
    right: 0px !important;
    left: unset;
    top: 82px;
    border-radius: unset;
    max-height: calc(100vh - 82px - 20px);
    z-index: 50;
}

/* Product Dialog Styles */
.product-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.product-dialog-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.product-dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 400px;
  max-width: 90%;
  z-index: 10001;
}

.product-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5e5;
}

.product-dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.product-dialog-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.product-dialog-close:hover {
  background: #f0f0f0;
  color: #333;
}

.product-dialog-body {
  padding: 24px;
}



.custom-modal-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #3333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-modal-content {
  width: 552px !important;
  height:678px; ;
  border-radius: 16px !important;
  background: white;
  width: max-content;
  padding:100px 20px 100px 20px;
      display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.custom-modal-content .button-download {
  width: 236px !important;
  height: 220px !important;
  display: flex !important;
  flex-direction: column !important;

  gap:10px !important;
  border: 1px solid #ccc;
  border-radius: 16px !important;
  box-shadow: 0px 1px 4px 0px #00000040;
  padding: 25px;
  cursor: pointer;
  margin: 5px;
  border-radius: 3px;
}
.downoload-text1{
font-family: Outfit;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 20px;
letter-spacing: 0px;
color: #155DFC;

}
.downoload-text2{
font-family: Outfit;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 20px;
letter-spacing: 0px;
color: #9810FA;

}
.downoload-text3{
font-family: Outfit;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 20px;
letter-spacing: 0px;
color: #009966;

}
.downoload-text4{
font-family: Outfit;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 20px;
letter-spacing: 0px;
color: #F54900;

}
.custom-modal-content .button-download:hover {
  background: #ccc;
  transition: 0.3s;
}

.toolpanel .input-container {
  display: flex;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  gap: 10px;
  color:black;
}

.generic-label {
  /* width: 50%; */
  font-family: Outfit;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0px;
color: #6C757D;
  margin-right: 10px;
}

.toolpanel .input-container select {
    width: 256px;
    height: 44px;
    border: 1px solid rgba(224, 224, 224, 1);
    border-radius: 16px;
    outline: none;
    padding-left: 20px;
}


.toolpanel .input-container .sp-replacer {
  width: 55px;
  height: 44px;
}
.sp-dd{
  display: none !important;
}

.toolpanel .input-container .custom-number-input {
  display: flex;
  align-items: center;
  padding: 1px;
  width: 158px !important;
  height: 44px;
  background-color: #F9FAFB;
  border-radius: 16px;
  text-align: center;
  border: 1px solid #E5E7EB
}

/* Ensure controls inside the rounded number input stay contained */
.toolpanel .input-container .custom-number-input {
  box-sizing: border-box;
  position: relative;
  overflow: visible; /* allow +/- buttons to render outside */
}

.toolpanel .input-container .custom-number-input button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid #E5E7EB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -44px; /* base position for the first button */
}

.toolpanel .input-container .custom-number-input button.decrease {
  right: -88px; /* second button sits further right */
}

.toolpanel .input-container button {
  width: 39px ;
  height: 44px;
  background-color: #ffffff;
  background-clip: padding-box;
  border-radius: 16px;
  color: #333;
  border: 1px solid #E5E7EB;
  font-size: 16px;
  cursor: pointer;
  outline: none;
}
.toolpanel .input-container .input-brush-width{
width: 158px;
height: 44px;
border-radius: 16px;
border: 1px solid #E5E7EB;
padding:18px;
}
.toolpanel .input-container .custom-number-input input {
  height: 30px !important;
  width: 60px !important;
  background: transparent !important;
  border: none;
  outline: none;
  text-align: center;
  box-sizing: border-box;
}


.toolpanel .input-container .custom-number-input input::-webkit-outer-spin-button,
.toolpanel .input-container .custom-number-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.toolpanel .input-container .custom-number-input input[type=number] {
  -moz-appearance: textfield;
}

.tab-container .tabs {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.tab-container .tabs .tab-label {
  font-family: Outfit !important;
  font-weight: 500 !important;
  font-style: Medium !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  width: 124px !important;
  height: 44px !important;
  border-radius: 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

}

.tab-container .tabs .tab-label.active {
  color: #E7000B;
  background-color: #E7000B1A;
}
.dark .tab-container .tabs .tab-label.active {
  color: white;
  background-color:red;
}
.gradient-orientation-container {
  padding-top: 40px;
}
.upload-image-panel{
  width: 500px !important;
    height: 247px;
    border-radius: 16px !important;
    background: white;
    width: max-content;
    padding: 20px 30px ;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.upload-image-panel svg{
  cursor: pointer;
}
.upload-image-panel h1{
  font-family: Outfit;
font-weight: 600;
font-style: SemiBold;
font-size: 20px;
leading-trim: NONE;
line-height: 36px;
letter-spacing: 0px;
vertical-align: middle;
color: #364153;
}
.upload-image-panel h2{
font-family: Outfit;
font-weight: 600;
font-style: SemiBold;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0px;
text-align: center;
color: #364153;
}
.drag-drop-input {
      background-color: #fff;
    width: 440px;
    height: 144px;
    box-sizing: border-box;
    border: 1px solid #D1D5DC;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-content: center;

    flex-direction: column;
    justify-content: center;
}
.drag-drop-input p {
font-family: Outfit;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 20px;
letter-spacing: 0px;
text-align: center;
color: #6C757D;
}
.drag-drop-input.dragging {
  border-color: #4368a9;
}

#tip-container {
  position: fixed;
  bottom: 0;
  left: 90px;
  right: 290px;
  padding: 10px;
  text-align: center;
  touch-action: none;
  cursor: default;
  color: #666;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
  z-index: 9999;
  font-size: 13px;
  transition: left 0.3s ease, right 0.3s ease;
}

/* Make tip span full viewport width when desired */
#tip-container.fullwidth {
  /* left: 0 !important; */
  right: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  max-width: none !important;
}

/* Adjust when main buttons are expanded */
.main-buttons.expanded ~ .main-panel .canvas-holder #tip-container {
  left: 132px;
  right: 290px;
}
.main-buttons #expand {  
  border-bottom: 1px solid rgba(224, 224, 224, 1) !important;
  border-radius: 0px !important;
}
.toolpanel .content button{
  /* width: 39px;
  height: 44px ;
  border: 1px solid rgba(224, 224, 224, 1);
  border-radius: 16px !important; */

}


.main-buttons #expand.active {
  opacity: 1;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  box-shadow: inset 5px 0 10px 0 rgba(50, 50, 50, .1);
  background-color: transparent !important;
  border-radius: 8px;
}
.input-brush-type{
  width: 130px !important;
  height: 40px !important;
  border: 1px solid #E0E0E0 !important;
  border-radius: 16px !important;
  background-color: #FFFFFF !important;
  cursor: pointer;
}

.brush-type-container{
    width: 100% !important;
    display: flex !important;
    align-items: unset !important;
    flex-wrap: wrap;
    gap: 5px !important;
   
}
.brush-type-container button.active
{
  background: #E7000B !important;
  color:#FFFFFF !important;
  fill: #FFFFFF;
   /* border-color: #E7000B; */
}

.brush-type-container button.active svg path,
.brush-type-container button.active svg g path {
  stroke: white !important;
  fill: white !important;
}

.brush-type-container button.active span {
  color: #FFFFFF !important;
}


.brush-type-container svg{
  vertical-align: middle;
}
.brush-type-container span{
  color: #9F9F9F;
}
#product-panel .content .form-group input{
  width: 100% !important;
  height: 54px !important;
  border: 1px solid #E0E0E0 !important;
  border-radius: 16px !important;
  background-color: #FFFFFF !important;
  padding-left: 10px !important;
}

/* Product source choice (AppyFeed / MyEPOS). The rule above sizes and paints
   EVERY input in the panel, radios included, so the radios undo it here.
   Tailwind forms fills a checked radio with its background colour (+ a dot
   image) and colours it with `color`, so both are set alongside accent-color. */
#product-panel .content .product-source-options {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

#product-panel .content .product-source-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
  background-color: #FFFFFF;
  color: #364153;
  font-weight: 600;
  cursor: pointer;
}

#product-panel .content .product-source-option:has(input:checked) {
  border-color: #E7000B;
  background-color: rgba(231, 0, 11, 0.06);
}

#product-panel .content .form-group .product-source-option input[type="radio"] {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  margin: 0;
  padding: 0 !important;
  border: 1px solid #9CA3AF !important;
  border-radius: 50% !important;
  color: #E7000B;
  accent-color: #E7000B;
  cursor: pointer;
}

#product-panel .content .form-group .product-source-option input[type="radio"]:checked {
  background-color: #E7000B !important;
  border-color: #E7000B !important;
}

.product-search-btn{
  width: 100% !important;
  height: 44px !important;
  background-color: #E7000B !important;
  color: #FFFFFF;
}

/* Focus in the product panel: red on white controls, a white ring on the
   red button (edged red so it shows on the white panel). */
#product-panel .content .form-group .product-source-option input[type="radio"]:focus,
#product-panel .content .form-group .product-source-option input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(231, 0, 11, 0.45) !important;
}

#product-panel .content .product-source-option:has(input:focus-visible) {
  border-color: #E7000B;
}

#product-panel .content input[type="text"]:focus {
  border-color: #E7000B !important;
  box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.15) !important;
  outline: none;
}

.product-search-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #E7000B;
}
.downloads-header{
  width: 492px !important;
  height: 52px !important;
  margin-top: -82px;
    margin-left: 10px !important;
    border-bottom: 1px solid #E0E0E0;
    gap: 2px;
    display: flex;
    justify-content: space-between;
}
.downloads-subheader1{
font-family: Outfit;
font-weight: 500;
font-style: Medium;
font-size: 20px;
leading-trim: NONE;
line-height: 30px;
letter-spacing: 0px;
color: #364153;
margin: 0px;
}
.downloads-subheader2{
  font-family: Outfit;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 20px;
letter-spacing: 0px;
color: #6C757D;
margin: 0px;

}
.downloads-footer{
  border: 1px solid #155DFC;
  background: #155DFC1A;
  border-radius: 16px;
  width: 492px !important;
  height: 52px !important;
   margin-left: 10px !important;
}
.downloads-footer-text{
  font-family: Outfit;
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0px;
text-align: center;
color: #155DFC;
padding-top: 12px;
}
.close-button{
  display:flex; 
  align-items:center; 
  cursor:pointer;
}
.upload-image-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--Stroke-Color, #E5E7EB);
}
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%);
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
}
@keyframes rotation {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg)}
} 


.design-input {
  background: transparent !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 8px !important;
  width: 172px;
  height: 42px;
  color: #FFFFFF !important;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 15px;
}
.design-input:focus {
  outline: none;
  border: 2px solid #FFFFFF;
}
/* Placeholder styling */
.design-input::placeholder {
  color: #FFFFFF;
  opacity: 1; /* Important for Firefox */
}

/* Color Picker Button */
#color-picker {
  width: 50px !important;
  height: 44px !important;
  border: 1px solid #E0E0E0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  background-color: #000000 !important;
}

#color-picker:hover {
  opacity: 0.8;
}

/* Border Style Custom Dropdown */
.border-style-dropdown {
  position: relative;
}

.border-style-dropdown .custom-dropdown {
  position: relative;
  width: 100%;
}

.border-style-dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.border-style-dropdown .dropdown-toggle:hover {
  border-color: #C0C0C0;
  background: #FAFAFA;
}

.border-style-dropdown .dropdown-toggle svg {
  color: #666;
  flex-shrink: 0;
}

.border-style-dropdown .selected-value {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.border-style-dropdown .selected-value span {
  font-size: 14px;
  color: #364153;
  font-weight: 400;
}

.border-style-dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.border-style-dropdown .dropdown-menu::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.border-style-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.border-style-dropdown .dropdown-item:hover {
   background-color: rgba(231, 0, 11, 0.1);
;
}

.border-style-dropdown .dropdown-item span {
  font-size: 14px;
  color: #364153;
  font-weight: 400;
}

/* Time Interval Dropdown Styles */
.time-interval-dropdown {
  position: relative;
  min-width: 120px;
}

.time-interval-dropdown .custom-dropdown {
  position: relative;
  width: 100%;
}

.time-interval-dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  background: transparent;
  color: white;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 8px;
}


.time-interval-dropdown .dropdown-toggle:hover {
  border-color: #C0C0C0;

}

.time-interval-dropdown .selected-value {
  display: flex;
  align-items: center;
  flex: 1;
}

.time-interval-dropdown .selected-value span {
  font-size: 13px;
  color: white;
  font-weight: 500;
  white-space: nowrap;
}

.time-interval-dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-width: 100%;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}

.time-interval-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.time-interval-dropdown .dropdown-item:hover {
  background-color: rgba(231, 0, 11, 0.1);
}

.time-interval-dropdown .dropdown-item span {
  font-size: 13px;
  color: #364153;
  font-weight: 400;
}

/* Line Preview Styles */
.line-preview {
  width: 60px;
  height: 3px;
  background: #000;
  flex-shrink: 0;
}

.line-preview.solid {
  background: #000;
}

.line-preview.dash-1 {
  background-image: linear-gradient(to right, #000 40%, transparent 40%);
  background-size: 8px 3px;
  background-repeat: repeat-x;
}

.line-preview.dash-2 {
  background-image: linear-gradient(to right, #000 40%, transparent 40%);
  background-size: 8px 3px;
  background-repeat: repeat-x;
}

.line-preview.dash-3 {
  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 12px 3px;
  background-repeat: repeat-x;
}

.line-preview.dash-4 {
  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 12px 3px;
  background-repeat: repeat-x;
}

.line-preview.dash-5 {
  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 16px 3px;
  background-repeat: repeat-x;
}

.line-preview.dash-6 {
  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-size: 16px 3px;
  background-repeat: repeat-x;
}

.line-preview.dash-7 {
  background-image: linear-gradient(to right, #000 15%, transparent 15%, transparent 40%, #000 40%, #000 65%, transparent 65%);
  background-size: 20px 3px;
  background-repeat: repeat-x;
}

.line-preview.dash-8 {
  background-image: linear-gradient(to right, #000 15%, transparent 15%, transparent 40%, #000 40%, #000 65%, transparent 65%);
  background-size: 20px 3px;
  background-repeat: repeat-x;
}
/* ═══════════════════════════════════════════════
   Table Element panel  (v3)
   ═══════════════════════════════════════════════ */

/* ── sections ── */
/* ── Table panel — aligned with the shared property-panel design language
   (Outfit typography, #F9FAFB fields, #E5E7EB borders, #E7000B accent) ── */
#table-panel .tbl-section {
  padding: 12px 0;
  border-bottom: 1px solid #E5E7EB;
}
#table-panel .tbl-section:last-child { border-bottom: none; }

/* section headings — match the .dimensions-section / .object-options h4 titles */
#table-panel .tbl-label {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: #364153;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.tbl-hint {
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  color: #6C757D;
  text-transform: none;
  letter-spacing: 0;
}

/* ── field rows ── */
#table-panel .tbl-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
/* field labels — match .generic-label */
#table-panel .tbl-flabel {
  flex: 0 0 90px;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #6C757D;
}

/* ── color inputs ── */
.tbl-color-input {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
  background: #F9FAFB;
}
.tbl-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* keep the table color pickers (Spectrum replacer) on-brand */
#table-panel .sp-replacer {
  height: 36px;
  min-width: 44px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #F9FAFB;
}
.tbl-clear {
  padding: 4px 10px;
  font-family: Outfit, sans-serif;
  font-size: 13px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #6C757D;
  line-height: 1.4;
  transition: background .12s, border-color .12s, color .12s;
}
.tbl-clear:hover { background: #E7000B1A; border-color: #E7000B; color: #E7000B; }

/* ── number inputs ── */
.tbl-num-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tbl-num-input {
  width: 60px;
  height: 36px;
  box-sizing: border-box;
  padding: 6px 10px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  background: #F9FAFB !important;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: #364153;
}
.tbl-unit { font-family: Outfit, sans-serif; font-size: 13px; color: #6C757D; }

/* ── text input ── */
.tbl-text-input {
  flex: 1;
  height: 36px;
  width:20px;
  box-sizing: border-box;
  padding: 6px 12px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  background: #F9FAFB !important;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: #364153 !important;
}
.tbl-text-input::placeholder { color: #9CA3AF; }

/* ── structure buttons ── */
#table-panel .tbl-btn-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  color: #364153;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tbl-btn svg { opacity: .7; }
.tbl-btn:hover { background: #E7000B1A; border-color: #E7000B; color: #E7000B; }
.tbl-btn:hover svg { opacity: 1; }
.tbl-btn-danger { color: #E7000B; }
.tbl-btn-danger:hover { background: #E7000B1A; border-color: #E7000B; color: #E7000B; }

/* ── align buttons ── */
.tbl-align-group {
  display: flex;
  gap: 8px;
}
.tbl-align-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  color: #364153;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  padding: 0;
}
.tbl-align-btn:hover { background: #E7000B1A; border-color: #E7000B; color: #E7000B; }
.tbl-align-btn.active { background: #E7000B1A; border-color: #E7000B; color: #E7000B; }
.tbl-align-btn:disabled,
.tbl-align-btn[disabled] { opacity: .4; cursor: default; pointer-events: none; }

/* ── cell section disabled state ── */
#tbl-cell-section.tbl-section-disabled .tbl-field:not(:first-child) { opacity: .45; pointer-events: none; }
#tbl-cell-section.tbl-section-disabled .tbl-text-input,
#tbl-cell-section.tbl-section-disabled .tbl-num-input,
#tbl-cell-section.tbl-section-disabled .tbl-color-input { background: #F3F4F6 !important; }





/* ── toggle switch ── */
.tbl-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.tbl-toggle input { display: none; }
.tbl-toggle-track {
  width: 40px; height: 22px;
  background: #E5E7EB;
  border-radius: 11px;
  position: relative;
  transition: background .2s;
}
.tbl-toggle-thumb {
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 3px; left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tbl-toggle input:checked ~ .tbl-toggle-track { background: #E7000B; }
.tbl-toggle input:checked ~ .tbl-toggle-track .tbl-toggle-thumb { transform: translateX(18px); }

/* ── stepper buttons — match the custom-number-input +/- buttons ── */
.tbl-num-row .tbl-stepper-btn {
  width: 36px;
  height: 36px;
  background-color: #ffffff;
  background-clip: padding-box;
  border-radius: 8px;
  color: #364153;
  border: 1px solid #E5E7EB;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
}
.tbl-num-row .tbl-stepper-btn:hover { background: #E7000B1A; border-color: #E7000B; color: #E7000B; }
.tbl-num-row .tbl-stepper-btn:disabled,
.tbl-num-row .tbl-stepper-btn[disabled] { opacity: .4; cursor: default; pointer-events: none; }
.dark .tbl-num-row .tbl-stepper-btn {
  width: 36px;
  height: 36px;
  color: white;
  background-color: transparent;
  background-clip: padding-box;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  font-size: 16px;
  cursor: pointer;
  outline: none;
}

/* ========================================
   DARK MODE STYLES - CHUNK 2: TOOLBAR
   ======================================== */
.dark .toolbar {
  background-color: #252d37;
}

.dark .toolbar .logo-text {
  color: #f3f4f6;
}

/* ========================================
   DARK MODE STYLES - CHUNK 3: SIDEBAR
   ======================================== */
.dark .main-buttons {
  background-color: #252d37 !important;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .5) !important;
}

.dark .main-buttons button {
  background-color: #252d37 !important;
}

.dark .main-buttons button.active {
  background-color: #E32929 !important;
}

.dark .main-buttons button svg path,
.dark .main-buttons button svg g path {
  stroke: #e5e7eb !important;
  fill: #e5e7eb !important;
}

/* Outline icons (svg fill="none", paths with no fill of their own - select,
   eraser, upload, canvas settings, product, the expand chevron...) must stay
   outlines: the rule above would fill them into solid shapes. Unselected
   only, so the selected look is unchanged. */
.dark .main-buttons button:not(.active) svg[fill="none"] path:not([fill]) {
  fill: none !important;
}

/* Table is drawn with <rect>/<line>: same colour as the other icons. */
.dark .main-buttons button:not(.active) svg rect[stroke],
.dark .main-buttons button:not(.active) svg line[stroke] {
  stroke: #e5e7eb !important;
}

.dark .main-buttons button.active svg path,
.dark .main-buttons button.active svg g path {
  stroke: white !important;
  fill: white !important;
}

.dark .main-buttons button .label {
  color: #e5e7eb !important;
}

.dark .main-buttons button.active .label {
  color: white !important;
}

.dark .main-buttons.expanded {
  border: 1px solid #3f4752;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .4);
}

/* ========================================
   DARK MODE STYLES - CHUNK 4: CANVAS
   ======================================== */
.dark .canvas-holder {
  background: #2a2a2a;
}

.dark .canvas-holder .content {
  background: #ffffff;
}

.dark .canvas-holder::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.dark .canvas-holder::-webkit-scrollbar-thumb {
  background: #555;
}

.dark .canvas-holder::-webkit-scrollbar-thumb:hover {
  background: #777;
}

.dark .canvas-container {
  border-color: #555;
}

/* ========================================
   DARK MODE STYLES - CHUNK 5: PANELS
   ======================================== */
.dark .toolpanel {
  background-color: #2a2a2a;
  border: 1px solid #3f4752;
  color: #e5e7eb;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .5);
}

.dark .toolpanel .title {
  color: #f3f4f6;
  border-bottom: 1px solid #3f4752;
}

.dark .toolpanel .content {
  color: #e5e7eb;
}

.dark .layer-row {
  border: 1px solid #3f4752;
  background: #2a2a2a;
}

.dark .layer-row:hover {
  background: rgba(231, 0, 11, 0.15);
  border: 1px solid #E7000B;
}

.dark .layer-row.active,
.dark #layers-panel .layer-row.active,
.dark .toolpanel#select-panel .layers-section .layers-list .layer-row.active {
  border-color: #e7000b !important;
  box-shadow: 0 0 0 1px rgba(231, 0, 11, 0.3);
  background-color: rgba(231, 0, 11, 0.15);
}

.dark .layer-name {
  color: #f3f4f6;
}

.dark .toolpanel::-webkit-scrollbar-thumb {
  background: #555;
}

.dark .toolpanel::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* Panel buttons - center SVG icons */

.dark .toolpanel .input-container button {
  background-color: transparent;
  color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark #select-panel .text-section .style button,
.dark #select-panel .alignment-section button,
.dark #select-panel .object-options button {
  background-color: transparent;
  padding: 0px 10px;
}
.dark #select-panel .text-section .style button:hover,
.dark #select-panel .alignment-section button:hover,
.dark #select-panel .object-options button:hover,
.dark .toolpanel .content .alignment-section button:hover {
  background-color: rgb(83, 80, 80) !important;
}
.dark .toolpanel .content .alignment-section button,
.dark .toolpanel .content .object-options button {
  background-color: transparent !important;
  padding: 0px 10px ;
}


/* .dark .toolpanel .border-section .corner-buttons .corner-btn.active {
  color: rgba(231, 0, 11, 1);
  background: rgba(231, 0, 11, 0.15);
}

.dark .toolpanel .border-section .corner-buttons .corner-btn svg {
  stroke: #f3f4f6;
}

.dark .toolpanel .border-section .corner-buttons .corner-btn.active svg {
  stroke: rgba(231, 0, 11, 1);
} */

/* Panel inputs and selects - transparent background */
.dark .toolpanel .input-container select {
  background-color: transparent;
  border: 1px solid #3f4752;
  color: #f3f4f6;
}
.dark .toolpanel .input-container select option {
color: white;
background-color:#2a2a2a;
}
.dark #zoom-percentage{
  background-color: transparent;
  border: 1px solid #3f4752;
  color: #f3f4f6;
}
.dark #zoom-percentage option{
  background-color: #2a2a2a;
  color: #f3f4f6;
}
.dark .toolpanel .input-container .dropdown-toggle {
  background-color: transparent;
  border: 1px solid #3f4752;
  color: #f3f4f6;
}
.dark .toolpanel .input-container .dropdown-toggle .selected-value span{
  color: #f3f4f6;
}

.dark .toolpanel .input-container input {
  background-color: transparent;
  border: 1px solid #3f4752;
  color: #f3f4f6;
}
.dark .toolpanel .input-container .custom-number-input {
  background-color: transparent;
  border: 1px solid #3f4752;
  color: #f3f4f6;
}

.dark .toolpanel .input-container .input-brush-width {
  background-color: transparent;
  border: 1px solid #3f4752;
  color: #f3f4f6;
}

/* Panel text labels - white color */
.dark .toolpanel .generic-label,
.dark .generic-label {
  color: #f3f4f6;
}

.dark .toolpanel .tbl-section .tbl-btn{
  background-color: transparent;
  border: 1px solid #3f4752;
  color: #f3f4f6;
}
.dark .toolpanel .tbl-section .tbl-field .tbl-num-input{
  color: white;
  background-color: transparent;
}
.dark .tbl-text-input {
  color: white !important;
  background-color: transparent !important;
  width: 50% !important;
}
.dark .toolpanel .tbl-section .tbl-label,
.dark .toolpanel .tbl-section .tbl-field .tbl-flabel,
.dark .layers-subtitle,
.dark .shape-properties-section h4,
.dark .alignment-section h4,
.dark .dimensions-section h4,
.dark .layers-section h4,
.dark .object-options h4,
.dark .text-section h4,
.dark .border-section h4,
.dark .fill-section h4,
.dark .effect-section h4 {
  color: #f3f4f6 !important;
}

/* ========================================
   DARK MODE STYLES - CHUNK 6: DROPDOWNS & FORMS
   ======================================== */
/* Border style dropdown */
.dark .border-style-dropdown .dropdown-menu {
  background: #2a2a2a;
  border: 1px solid #3f4752;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark .border-style-dropdown .dropdown-toggle {
  background-color: transparent;
  border: 1px solid #3f4752;
}

.dark .border-style-dropdown .dropdown-item {
  color: #f3f4f6;
}

.dark .border-style-dropdown .dropdown-item:hover {
  background-color: rgba(231, 0, 11, 0.15);
}

.dark .border-style-dropdown .dropdown-item span {
  color: #f3f4f6;
}

/* Time interval dropdown */
.dark .time-interval-dropdown .dropdown-menu {
  background: #2a2a2a;
  border: 1px solid #3f4752;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark .time-interval-dropdown .dropdown-toggle {
  border: 1px solid #f3f4f6;
  background: transparent;
}

.dark .time-interval-dropdown .dropdown-toggle:hover {
  border-color: #f3f4f6;
}

.dark .time-interval-dropdown .dropdown-menu .dropdown-item span {
  color: #f3f4f6;
}

.dark .time-interval-dropdown .dropdown-item:hover {
  background-color: rgba(231, 0, 11, 0.15);
}

.dark .time-interval-dropdown .dropdown-item span {
  color: #364153;
}

/* Color picker */
.dark .toolpanel .input-container .sp-replacer {
  background-color: transparent;
  border: 1px solid #3f4752;
}

/* Brush type container */
.dark .brush-type-container button {
  background-color: transparent !important;
  border: 1px solid #3f4752 !important;
}

.dark .brush-type-container button span {
  color: #f3f4f6;
}

.dark .brush-type-container button.active {
  background: #E7000B !important;
  border-color: #E7000B !important;
}

/* Dark mode active state for group/ungroup buttons - red SVG elements */
.dark #group.active svg path {
  stroke: #E7000B !important;
  fill: #E7000B !important;
}
.dark #ungroup{
  background-color: transparent !important;
}
.dark #ungroup svg path {
  stroke: white !important;
}
.dark #ungroup.active svg path {
  stroke: #E7000B !important;
  fill: #E7000B !important;
}


/* Input focus states - white border */
.dark .toolpanel .input-container input:focus,
.dark .toolpanel .input-container select:focus,
.dark .toolpanel .input-container .input-brush-width:focus,
.dark .tbl-text-input:focus,
.dark .tbl-num-input:focus {
  outline: none;
  border-color: #f3f4f6 !important;
  box-shadow: 0 0 0 2px rgba(243, 244, 246, 0.2);
}

.dark .toolpanel .input-container .custom-number-input:focus-within {
  border-color: #f3f4f6;
  box-shadow: 0 0 0 2px rgba(243, 244, 246, 0.2);
}

/* Light mode input focus states - dark border */
.toolpanel .input-container input:focus,
.toolpanel .input-container select:focus,
.toolpanel .input-container .input-brush-width:focus,
.tbl-num-input:focus,
.tbl-text-input:focus {
  outline: none;
  border-color: #364153 !important;
  box-shadow: 0 0 0 2px rgba(54, 65, 83, 0.2);
}

.toolpanel .input-container .custom-number-input:focus-within {
  border-color: #364153;
  box-shadow: 0 0 0 2px rgba(54, 65, 83, 0.2);
}

/* ========================================
   DARK MODE STYLES - CHUNK 7: MODALS & DIALOGS
   ======================================== */
/* Product dialog */
.dark .default-container{
  background-color: #2a2a2a;
}
.dark .product-dialog-content {
  background: #2a2a2a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.dark .product-dialog-header {
  border-bottom: 1px solid #3f4752;
}

.dark .product-dialog-header h3 {
  color: #f3f4f6;
}

.dark .product-dialog-close {
  color: #e5e7eb;
}

.dark .product-dialog-close:hover {
  background: #3f4752;
  color: #f3f4f6;
}

.dark .product-dialog-body {
  background: #252d37;
  color: #e5e7eb;
}

/* Product panel - all text white */


.dark #product-panel .content .form-group input {
  background-color: transparent !important;
  border: 1px solid #3f4752 !important;
  color: #f3f4f6 !important;
}

.dark #product-panel .content .form-group input::placeholder {
  color: #9ca3af;
}

.dark #product-panel .content .product-source-option {
  background-color: transparent;
  border-color: #3f4752;
  color: #f3f4f6;
}

.dark #product-panel .content .product-source-option:has(input:checked) {
  border-color: #E7000B;
  background-color: rgba(231, 0, 11, 0.12);
}

.dark #product-panel .content .form-group .product-source-option input[type="radio"]:not(:checked) {
  background-color: transparent !important;
}

/* Product dialog - all text white */
.dark .product-dialog-body label, 
.dark .product-dialog-body h1,
.dark .product-dialog-body > div:first-child p,
.dark .product-dialog-body > div:nth-child(2) > div:first-child h2,
.dark .product-dialog-body > div:nth-child(2) > div:first-child > div:first-child > p,
.dark .product-dialog-body > div:nth-child(2) > div:last-child > div:first-child h2,
.dark #dialog-selected-products > div.empty-state p {
  color: #f3f4f6;
}
.dark .product-dialog-body > div:nth-child(2) > div:nth-child(2) > div:first-child,
.dark .product-dialog-body > div:nth-child(2) > div:nth-child(2){
  background-color: #252d37;
}


/* Product display area dark background */
.dark #dialog-selected-products,
.dark .product-dialog-body > div {
  background: #252d37;
}

/* Empty state */
.dark #dialog-selected-products > div.empty-state {
  background: #252d37;
}

.dark .empty-state p {
  color: #e5e7eb !important;
}

.dark .empty-state svg path:first-child {
  fill: #3f4752;
}

.dark .empty-state svg path:not(:first-child) {
  stroke: #ffffff;
}

/* Business menu filter select */
.dark #dialog-business-menu-filter {
  background: #252d37 !important;
  border: 1px solid #3f4752 !important;
  color: #f3f4f6 !important;
}

.dark #dialog-business-menu-filter option {
  color: f3f4f6;
}

#dialog-business-menu-filter:focus {
  outline: none;
  border-color: #364153 !important;
  box-shadow: 0 0 0 2px rgba(54, 65, 83, 0.2);
}

.dark #dialog-business-menu-filter:focus {
  border-color: #f3f4f6 !important;
  box-shadow: 0 0 0 2px rgba(243, 244, 246, 0.2);
}

/* Floating zoom level container */
.dark .floating-zoom-level-container {
  background: #2a2a2a;
  border: 1px solid #3f4752;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dark .floating-zoom-level-container label {
  color: #f3f4f6;
}

.dark .floating-zoom-level-container select {
  background: transparent;
  border: 1px solid #3f4752;
  color: #f3f4f6;
}

.dark .floating-zoom-level-container select option {
  color: black;
}

/* Upload image panel */
.dark .upload-image-panel {
  background: #2a2a2a;
  border: 1px solid #3f4752;
}

.dark .upload-image-panel h1,
.dark .upload-image-panel h2 {
  color: #f3f4f6;
}

.dark .drag-drop-input {
  background-color: transparent;
  border: 1px solid #3f4752;
}

.dark .drag-drop-input p {
  color: #e5e7eb;
}

.dark .drag-drop-input.dragging {
  border-color: #f3f4f6;
}

/* Custom modal (download buttons) */
.dark .custom-modal-content {
  background: #2a2a2a;
}

.dark .custom-modal-content .button-download {
  background: #252d37;
  border: 1px solid #3f4752;
}

.dark .custom-modal-content .button-download:hover {
  background: #3f4752;
}

.dark .downoload-text1,
.dark .downoload-text2,
.dark .downoload-text3,
.dark .downoload-text4 {
  color: #f3f4f6;
}

/* Tip container */
.dark #tip-container {
  background: rgba(42, 42, 42, 0.95);
  border-top: 1px solid #3f4752;
  color: #e5e7eb;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
} 
.dark .logo{
  background-color: rgb(37, 45, 55);  
}
/* Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* ============================================================
   Left tool rail: make every tool reachable
   ------------------------------------------------------------
   .main-buttons sets height:100vh, but it starts 82px down (it
   sits under .toolbar) inside a container with overflow:hidden.
   Its bottom 82px therefore hung off-screen, in clipped space
   its own overflow-y:auto could not scroll to. At 1024x768 the
   rail scrolled only 31px of the 113px it needed, leaving the
   last tools (product, table) unreachable.

   Viewport minus the toolbar makes the scroll box match what is
   actually visible, so the rail's scrollbar covers all of it.
   ============================================================ */

.main-buttons {
  height: calc(100vh - 82px) !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c7c7c7 transparent;
}

.main-buttons::-webkit-scrollbar {
  width: 6px;
}

.main-buttons::-webkit-scrollbar-track {
  background: transparent;
}

.main-buttons::-webkit-scrollbar-thumb {
  background: #c7c7c7;
  border-radius: 3px;
}

.main-buttons::-webkit-scrollbar-thumb:hover {
  background: #9a9a9a;
}

/* ============================================================
   Header: three blocks that fit
   ------------------------------------------------------------
   Block 2 (design name + settings) was position:absolute at
   left:220px, so flexbox never measured it. Block 2 wants 705px
   and block 3 (action buttons) 627px, which with the 132px logo
   needs ~1480px - so below that the two blocks overlapped, by
   528px at 1024px. Block 2 is now a real flex child, and from
   1440px down the less-used controls move into the "more
   options" panel (see toolbar.js).

   Header keeps: design name, Save as Template, zoom, undo,
   redo, save. Panel takes: download, clear, dark mode, page
   refresh interval, enable auto-refresh.
   ============================================================ */

.toolbar {
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding-right: 8px;
}

.toolbar .logo {
  flex: 0 0 auto;
  height: 85px;
  transition: width 0.35s ease;
}

/* Rail collapsed: the logo block matches the rail's width and shows the
   icon instead of the full logo (same as the dashboard sidebar). */
.toolbar-logo-icon {
  display: none;
}
.toolbar.sidebar-collapsed .logo {
  width: 90px;
}
.toolbar.sidebar-collapsed #toolbar-logo {
  display: none;
}
.toolbar.sidebar-collapsed .toolbar-logo-icon {
  display: block;
}

/* padding-left keeps the design name starting at 220px, where the
   old absolute positioning put it. */
.toolbar-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 76px;
  line-height: normal;
}

.toolbar-center > * {
  flex: 0 0 auto;
}

.toolbar .extended-buttons {
  flex: 0 0 auto;
}

/* --- "More options" panel ------------------------------------
   Modelled on #profile-dropdown in partials/header.blade.php:
   white panel, rounded, shadowed, anchored top right, rows of
   icon + label with a light red hover.
   ------------------------------------------------------------ */

.toolbar-more {
  position: relative;
  flex: 0 0 auto;
  display: none;
  align-items: center;
}

.toolbar-more-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s ease;
}

.toolbar-more-toggle:hover {
  background: rgba(255, 255, 255, .18);
}

.toolbar-more-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 9999;
  width: 248px;
  padding: 8px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  line-height: normal;
}

.toolbar-more-panel.hidden {
  display: none;
}

.toolbar-more-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease;
}

.toolbar-more-row:hover {
  background: rgba(255, 0, 0, .1);
}

.toolbar-more-row > span {
  font-size: 14px;
  color: #000000;
  white-space: nowrap;
}

/* The controls are white-on-red in the header; inside the white
   panel they need the panel's dark ink. Only the copies sitting in
   the panel are affected - the header versions are untouched. */

.toolbar-more-row > button {
  width: 24px !important;
  height: 24px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  flex: 0 0 auto;
}

.toolbar-more-row > button svg {
  width: 20px;
  height: 20px;
}

/* #download and #clear draw with fill, not stroke. */
.toolbar-more-row > #download svg path,
.toolbar-more-row > #clear svg path {
  fill: #314158;
}

/* Dark mode is a Material icon carrying an inline color:white. */
.toolbar-more-row > #darkModeToggle .material-icons-outlined {
  color: #314158 !important;
  font-size: 22px !important;
}

/* Page refresh interval */
.toolbar-more-row > .time-interval-dropdown {
  width: 100%;
  min-width: 0;
}

.toolbar-more-row > .time-interval-dropdown .dropdown-toggle {
  padding: 8px 10px;
  border-color: #E5E7EB;
  color: #314158;
}

.toolbar-more-row > .time-interval-dropdown .selected-value span {
  color: #314158;
}

/* Enable Auto-Refresh: its label text carries an inline color:white. */
.toolbar-more-row > #auto-refresh-field {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.toolbar-more-row > #auto-refresh-field span:not([class]) {
  color: #000000 !important;
}

.toolbar-more-row > #auto-refresh-field .custom-checkbox {
  border-color: #D1D5DC !important;
}

/* Save as Template (in the panel below 900px): same as Auto-Refresh. */
.toolbar-more-row > #save-template-field {
  width: 100%;
}

.toolbar-more-row > #save-template-field span:not([class]) {
  color: #000000 !important;
}

.toolbar-more-row > #save-template-field .custom-checkbox-template {
  border-color: #D1D5DC !important;
}

/* --- 1440px and below ---------------------------------------- */

@media (max-width: 1440px) {
  .toolbar-more {
    display: flex;
  }

  .toolbar-center {
    padding-left: 16px;
    gap: 10px;
  }

  /* The zoom buttons carry a 36px inline left padding that stops
     fitting once space is tight, which clipped the icon. */
  .zoom-toolbar-group button {
    width: auto;
  }

  .zoom-toolbar-group #zoomOut {
    padding: 0 4px !important;
  }
}

/* --- Even spacing across the header --------------------------
   The action buttons carry ad-hoc inline margins and paddings
   (zoom group margin-right:8px, #zoomOut padding-left:36px,
   dark mode padding:0 8px + margin-right:8px) on top of a 64px
   button box, so the gaps between them were all different. One
   gap value and one button box makes them even.
   ------------------------------------------------------------ */

.toolbar,
.toolbar-center,
.toolbar .extended-buttons {
  gap: 12px;
}

.toolbar .extended-buttons > button,
.toolbar .extended-buttons > .toolbar-more-toggle {
  width: 44px;
  height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar .zoom-toolbar-group {
  gap: 12px;
  margin: 0 !important;
}

.toolbar .zoom-toolbar-group button {
  width: 44px !important;
  height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar .zoom-toolbar-group #zoom-percentage {
  margin: 0 !important;
}

.toolbar .toolbar-more {
  margin-left: 0;
}

/* --- Auto-save message ---------------------------------------
   Lives in the header next to the design name (canvas.js puts it
   there). It was position:fixed at left:80rem - a hard 1280px -
   so it was off-screen at 1024px and sat over the action buttons
   at 1440px. In flow it follows the design name at every width.
   .autosave-hidden collapses it so it reserves no space when
   there is no message.
   ------------------------------------------------------------ */

#autosave-indicator {
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.72);
  color: #FFFFFF;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  letter-spacing: 0.2px;
}

#autosave-indicator.autosave-hidden {
  display: none;
}

/* The design name gives up a little width rather than letting a long
   message push the action buttons off the edge. */
.toolbar-center .design-input {
  flex: 0 1 auto;
  min-width: 110px;
}

@media (max-width: 1024px) {
  #autosave-indicator {
    padding: 5px 12px;
    font-size: 12px;
  }
}

/* --- The design's menu ----------------------------------------
   designMenu.js: a pill after the design name saying which menu the
   products on the board come from (one design, one menu). A click
   opens Add Products on that menu. Editor only: it is not on the
   canvas, so never in an export or on a screen.
   ------------------------------------------------------------ */
.toolbar-center .design-menu-label {
  flex: 0 1 auto;
  /* It is a button: not the 64px of the toolbar's icon buttons. */
  width: auto;
  min-width: 34px;
  max-width: 260px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms;
}
.toolbar-center .design-menu-label:hover,
.toolbar-center .design-menu-label:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: none;
}
.toolbar-center .design-menu-label svg {
  flex-shrink: 0;
}
.design-menu-label .design-menu-label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toolbar-center .design-menu-label.is-empty,
.toolbar-center .design-menu-label.is-loading {
  font-weight: 500;
  border-style: dashed;
  opacity: 0.85;
}
/* Several menus (a design from before the rule): amber. */
.toolbar-center .design-menu-label.is-mixed {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}
/* Its menu is no longer connected, or is not in this account: red on white. */
.toolbar-center .design-menu-label.is-off {
  color: #b91c1c;
  background: #ffffff;
  border-color: #fecaca;
}
@media (max-width: 1280px) {
  .toolbar-center .design-menu-label {
    max-width: 160px;
  }
}
@media (max-width: 1024px) {
  .toolbar-center .design-menu-label {
    padding: 0 9px;
  }
  .toolbar-center .design-menu-label .design-menu-label-text {
    display: none;
  }
}

/* Products outside the board (boardOverflow.js): a bar over the top middle
   of the board's visible area, placed by the script. Under the dialogs. */
.board-overflow-bar {
  position: fixed;
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 8px 8px 8px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 13px;
  line-height: 18px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.board-overflow-bar > svg {
  flex-shrink: 0;
  color: #2563eb;
}
.board-overflow-bar .board-overflow-text {
  min-width: 0;
}
.board-overflow-bar .board-overflow-resize {
  flex-shrink: 0;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.board-overflow-bar .board-overflow-resize:hover {
  background: #1d4ed8;
}
.board-overflow-bar .board-overflow-close {
  flex-shrink: 0;
  display: inline-flex;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #1e3a8a;
  cursor: pointer;
}
.board-overflow-bar .board-overflow-close:hover {
  background: rgba(37, 99, 235, 0.12);
}
.board-overflow-bar button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.dark .board-overflow-bar {
  border-color: #1e3a8a;
  background: #172554;
  color: #dbeafe;
}
.dark .board-overflow-bar > svg,
.dark .board-overflow-bar .board-overflow-close {
  color: #93c5fd;
}
@media (max-width: 768px) {
  .board-overflow-bar {
    flex-wrap: wrap;
    width: auto;
  }
}