/* Główna sekcja */
#canvas-tcm-wrapper {
  max-width: 1097px;
  margin: auto;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background-color: #fff;
}

/* Panel kontrolny */
#tcm-controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  font-family: "Montserrat", sans-serif;
}


/* Obszar roboczy (canvas) */
#canvas-wrapper {
    width: 1150px;
    height: 250px;
    border: 0px solid #ccc;
    overflow: hidden;
    position: relative;
    background: url('/wp-content/uploads/2025/07/canvas_wrapper-1.png') no-repeat left center;
    background-position: -10px -10px;
    
}

#canvas-tcm {
  width: 1097px;
  height: 185px;
  border: 1px solid #dedede;
  position: relative;
  background-color: #fff;  
  background-size: contain;
  overflow: hidden;

}
/* Elementy przeciągane (tekst/obraz) */
.canvas-element {
  position: absolute;
  cursor: move;
  display: inline-block;
  z-index: 1;
   transform-origin: center center;
    will-change: transform;
    user-select: none;
}


.canvas-element.selected {
  outline: 1px dashed #dedede;
  z-index: 10;
}

/* Styl tekstu w canvasie */
.canvas-element span {
  display: inline-block;
  min-width: 30px;
  min-height: 30px;
  padding: 4px;
  word-break: break-word;
  font-family: "Montserrat", sans-serif;
  color: #333;
}

/* Styl obrazków */
.canvas-element img {
  display: block;
  pointer-events: none;
  background-color: transparent;

    transition: transform 0.2s ease-in-out;



}
/* Kontener na toolbary - sztywno nad canvasem */
#toolbars-fixed {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 0;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 1000;
  font-family: "Montserrat", sans-serif;


}

/* Wspólna klasa dla toolbarów */


.toolbar {
  display: block !important;
}
.toolbar {
  background: #fdfdfd;
  border: 1px solid #dedede;
  padding: 10px;
  display: none;
  
  border-radius: 0px;
  gap: 10px;
  align-items: center;
  position: static;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #333;
width: 1160px;
}

/* Styl dla inputów i selectów */
.toolbar input[type="number"],
.toolbar input[type="color"],
.toolbar input[type="range"],
.toolbar select {
  margin-left: 5px;
  margin-right: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  background-color: #f9f9f9;
  color: #333;
  border: 1px solid #ddd;
}

.toolbar select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='14' viewBox='0 0 20 20' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Styl dla przycisków w toolbarze */
.toolbar button {
  padding: 4px 8px;
  font-size: 13px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #E31E24;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.toolbar button:hover {
  background-color: #c2181d;
}

/* Przycisk usuń */
#delete-text,
#delete-image {
  background-color: #2A2A2A !important;
  color: #fff !important;
  border: 1px solid #2A2A2A !important;
}

#delete-text:hover,
#delete-image:hover {
  background-color: #1c1c1c !important;
}

/* Styl etykiet */
.toolbar label {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #333;
margin-left: 10px;
}

/* Linie pomocnicze */
#guide-x,
#guide-y {
  position: absolute;
  background: red;
  z-index: 999;
  display: none;
  pointer-events: none;
}
#guide-x {
  width: 1px;
}
#guide-y {
  height: 1px;
}

input[type="file"] {
  background-color: #fff !important;
  color: #2A2A2A !important;
  border: 0px solid #dedede !important;
  padding: 0px 0px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  border-radius: 0px;
  cursor: pointer;
  display: inline-block;
}

input[type="file"]::-webkit-file-upload-button {
  background-color: #2A2A2A !important;
  color: #fff !important;
  border: 1px solid #dedede !important;
  padding: 10px 10px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  background-color: #2A2A2A !important;
  color: #fff !important;
  border: 1px solid #2A2A2A !important;
  padding: 10px 14px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
  background-color: #1c1c1c !important;
  border-color: #1c1c1c !important;
}

#canvas-tcm-wrapper h6 {
  font-family: "Montserrat", sans-serif;
  color: #333;
  font-size: 14px;
font-weight: 600;
margin-bottom: -20px;
margin-top: -20px;
}
#add-text {
  background-color: #2A2A2A !important;
  color: #fff !important;
  border: 1px solid #2A2A2A !important;
  padding: 10px 14px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
}

#tcm-add-to-cart {

 background-color: #2A2A2A !important;
  color: #fff !important;
  border: 1px solid #2A2A2A !important;
  padding: 10px 14px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
}