/* ========== CUSTOM FONTS ========== */

/* Zwart & Wit & … (Baby Names) */
@font-face {
  font-family: 'Baby Names';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BabyNames-Regular.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BabyNames-Regular.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BabyNames-Regular.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BabyNames-Regular.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BabyNames-Regular.ttf') format('truetype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BabyNames-Regular.svg#BabyNames') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Baskerville Old Face */
@font-face {
  font-family: 'Baskerville Old Face';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BaskOldFace.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BaskOldFace.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BaskOldFace.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BaskOldFace.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BaskOldFace.ttf') format('truetype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/BaskOldFace.svg#BaskOldFace') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Baquet Script */
@font-face {
  font-family: 'Baquet Script';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Baquette-Regular.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Baquette-Regular.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Baquette-Regular.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Baquette-Regular.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Baquette-Regular.ttf') format('truetype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Baquette-Regular.svg#Baquette') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Cavolini */
@font-face {
  font-family: 'Cavolini';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Cavolini-Regular.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Cavolini-Regular.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Cavolini-Regular.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Cavolini-Regular.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Cavolini-Regular.ttf') format('truetype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Cavolini-Regular.svg#Cavolini') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Dreaming Outloud Pro */
@font-face {
  font-family: 'Dreaming Outloud Pro';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/DO-Sans-RegularPRO.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/DO-Sans-RegularPRO.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/DO-Sans-RegularPRO.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/DO-Sans-RegularPRO.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/DO-Sans-RegularPRO.ttf') format('truetype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/DO-Sans-RegularPRO.svg#DOSansPRO') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Modern No. 20 */
@font-face {
  font-family: 'Modern No. 20';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Modern-Regular.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Modern-Regular.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Modern-Regular.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Modern-Regular.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Modern-Regular.ttf') format('truetype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Modern-Regular.svg#Modern20') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Vani */
@font-face {
  font-family: 'Vani';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Vani.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Vani.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Vani.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Vani.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Vani.ttf') format('truetype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/Vani.svg#Vani') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Laughing and Smiling */
@font-face {
  font-family: 'Laughing and Smiling';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/LaughingandSmiling.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/LaughingandSmiling.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/LaughingandSmiling.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/LaughingandSmiling.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/LaughingandSmiling.ttf') format('truetype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/05/LaughingandSmiling.svg#LaughingandSmiling') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Saturday Regular */
@font-face {
  font-family: 'Saturday Regular';
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/06/SaturdayRegular.eot');
  src: url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/06/SaturdayRegular.eot?#iefix') format('embedded-opentype'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/06/SaturdayRegular.woff2') format('woff2'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/06/SaturdayRegular.woff') format('woff'),
       url('https://mdbbedrukkingen.nl/wp-content/uploads/2025/06/SaturdayRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ========== MODAL LAYOUT ========== */

#dpc-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

body.dpc-modal-open {
  overflow: hidden;
  height: 100vh;
}

.dpc-modal-content {
  background: #fff;
  padding: 20px;
  margin: 50px auto;
  width: 100%;
  max-width: 1000px;
  display: flex;
  gap: 20px;
  position: relative;
  flex-direction: column;
  height: 120vh;
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

#dpc-close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  color: #000;
  font-size: 42px;
  border: none;
  cursor: pointer;
  z-index: 9999;
}

#dpc-customize-btn {
	width: 100%;
}

@media (min-width: 768px) {
  .dpc-modal-content {
    flex-direction: row !important;
	  height: calc(100svh - 100px);
  }
  #dpc-controls {
    border-right: 1px solid hotpink;
    padding-right: 20px;
  }
}

/* ========== CONTROLS PANEL ========== */

#dpc-controls {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #ffffff;
  padding: 10px;
}

#dpc-controls button,
#dpc-controls select,
#dpc-controls input[type='text'],
#dpc-controls input[type='range'],
#dpc-controls input[type='color'] {
  padding: 6px;
  font-size: 14px;
}

#dpc-text-controls input[type="text"] {
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
}

#dpc-text-controls #dpc-add-text {
  margin-bottom: 15px;
}

/* ========== PREVIEW AREA ========== */

#dpc-preview {
  flex: 1;
  position: relative;
  padding-left: 20px;
/*   overflow-x: hidden; */
}

#dpc-preview img {
  width: 100%;
}

#dpc-variation-info {
  margin-bottom: 10px;
  font-size: 14px;
  color: #444;
}

/* ========== TEXT STYLING ========== */

.dpc-text {
  position: absolute;
  font-size: 24px;
  color: #000;
  cursor: move;
  z-index: 11000 !important;
  width: max-content;
}

.dpc-text.dpc-active {
  outline: 2px dashed #0073aa;
  outline-offset: 2px;
}

.dpc-text.dpc-vertical.dpc-active {
  outline: 2px dashed #0073aa;
  outline-offset: 4px;
}

/* ========== IMAGE STYLING ========== */

.dpc-uploaded-image {
  z-index: 10000 !important;
  position: absolute;
}

/* ========== DELETE BUTTONS ========== */

.dpc-delete-text:hover,
.dpc-delete-image:hover,
.dpc-delete-image:focus {
  background: none !important;
  box-shadow: none !important;
}

/* ========== COLOR SWATCHES ========== */

.dpc-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ccc;
  position: relative;
  z-index: 9999;
}

.dpc-swatch.active {
  border: 2px solid #333;
}

/* ========== COLOR SWATCHES CONTAINER ========== */
#dpc-color-swatches {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

/* Zwart */  
.dpc-swatch[data-color="#000000"] { background-color: #000000; }

/* Wit */  
.dpc-swatch[data-color="#FFFFFF"] { background-color: #FFFFFF; }

/* Marine blauw (Navy) */  
.dpc-swatch[data-color="#000080"] { background-color: #000080; }

/* Midden blauw (MediumBlue) */  
.dpc-swatch[data-color="#0000CD"] { background-color: #0000CD; }

/* Licht blauw (LightBlue) */  
.dpc-swatch[data-color="#ADD8E6"] { background-color: #ADD8E6; }

/* Mint groen */  
.dpc-swatch[data-color="#98FF98"] { background-color: #98FF98; }

/* Mos groen */  
.dpc-swatch[data-color="#8A9A5B"] { background-color: #8A9A5B; }

/* Oranje */  
.dpc-swatch[data-color="#FFA500"] { background-color: #FFA500; }

/* Licht Oranje */  
.dpc-swatch[data-color="#FFD580"] { background-color: #FFD580; }

/* Rood */  
.dpc-swatch[data-color="#FF0000"] { background-color: #FF0000; }

/* Magenta */  
.dpc-swatch[data-color="#FF00FF"] { background-color: #FF00FF; }

/* Geel */  
.dpc-swatch[data-color="#FFFF00"] { background-color: #FFFF00; }

/* Grijs */  
.dpc-swatch[data-color="#808080"] { background-color: #808080; }


/* ========== TABS ========== */

#dpc-tab-bar {
  display: flex;
  border-bottom: 2px solid #ccc;
  margin-bottom: 10px;
  gap: 4px;
}

#dpc-tab-bar .dpc-btn,
#dpc-tab-bar button {
  flex: 1;
  padding: 8px 10px;
  border: 2px solid #ccc;
  border-bottom: none;
  background: #f9f9f9;
  cursor: pointer;
  font-weight: bold;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  transition: background 0.2s ease;
  color: black;
}

#dpc-tab-bar .dpc-btn:hover,
#dpc-tab-bar button:hover {
  background: #eaeaea;
}

#dpc-tab-bar .dpc-btn.active,
#dpc-tab-bar button.active {
  background: #fff;
  border-bottom: 2px solid #fff;
  position: relative;
  z-index: 2;
}

#dpc-tab-content {
  border: 2px solid #ccc;
  border-top: none;
  padding-top: 10px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* ========== GENERAL BUTTONS ========== */

.dpc-btn {
  background-color: #0073aa;
  color: white;
  padding: 10px 10px;
  border: none;
  cursor: pointer;
}


/* ======================================================
   1) Remove ALL padding/border from the controls wrapper
   ====================================================== */
#dpc-controls {
  padding: 0 !important;
  border: none !important;
}

/* ======================================================
   2) Flush the tabs and content borders together
   ====================================================== */
/* Tabs sit directly on top of the content box */
#dpc-tab-bar {
  margin-bottom: 0 !important;
  border-bottom: 2px solid #ccc;
}

/* Content box hugs the tabs */
#dpc-tab-content {
  margin-top: -2px !important;
  border: 2px solid #ccc !important;
  border-top: none !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  padding: 20px !important;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────
   1) Let the controls panel stretch to 100% of the modal
   ───────────────────────────────────────────────────── */
#dpc-controls {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────────────────
   2) Make the tab–content area a column flex, too
   so we can push buttons to the bottom
   ───────────────────────────────────────────────────── */
#dpc-tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────────────────
   3) Stack & size all three action buttons
   and push them down via margin-top: auto on the first
   ───────────────────────────────────────────────────── */
#dpc-save-config,
#dpc-reset-config,
#dpc-add-to-cart {
  width: 100%;
  margin: 4px 0;
}

/* push the Save button (and its siblings) to the bottom */
#dpc-save-config {
  margin-top: auto;
}

/* ─────────────────────────────────────────────────────
   1) Give the modal‐content a true “100% minus its top/bottom margins” height
   ───────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────
   2) Now #dpc-controls can truly fill its parent
   ───────────────────────────────────────────────────── */
#dpc-controls {
  height: 100%;
}


/* ─────────────────────────────────────────────────────
   Align the “Grootte:” label and its slider on one line
   ───────────────────────────────────────────────────── */
#dpc-controls label,
#dpc-controls input[type="range"] {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

#dpc-controls label + input[type="range"] {
  /* make slider take the remaining width; tweak the 80px to taste */
  width: calc(100% - 80px);
  margin-left: 8px;
}

/* ─────────────────────────────────────────────────────
   Push Reset & the following button to the bottom
   ───────────────────────────────────────────────────── */
#dpc-tab-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#dpc-reset-config {
  /* tailwind’s “mt-auto” equivalent */
  margin-top: auto;
}

/* ─────────────────────────────────────────────────────
   Inline layout for font & formatting controls
   ───────────────────────────────────────────────────── */
#dpc-text-controls > div:nth-child(3) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#dpc-text-controls > div:nth-child(3) select,
#dpc-text-controls > div:nth-child(3) button {
  margin: 0;
}

/* Compact font + format row: font-select fills rest, buttons stay auto */
#dpc-text-controls > div:nth-child(3) {
  display: flex;
  align-items: center;
  gap: 0;
}

#dpc-text-controls > div:nth-child(3) select {
  flex: 1;
  min-width: 0;
  width: auto !important;
}

#dpc-text-controls > div:nth-child(3) button {
  flex: 0 0 auto;
}

/* Make the “Tekst toevoegen” button full width */
#dpc-add-text {
  width: 100%;
  box-sizing: border-box;  /* ensure padding doesn’t break the width */
}

/* 1) Remove the old outer border on the controls wrapper: */
#dpc-controls {
  border: none;               /* kill the gray box you had here */
  padding: 0;                 /* it was pushing the tabs in */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2) Flatten out the tab‐bar container (we’ll let the tab and content borders do the work): */
#dpc-tab-bar {
  display: flex;
  margin: 0;                  /* no extra gap */
}

/* 3) Style each tab button so they share a single combined border: */
#dpc-tab-bar button {
  flex: 1;
  padding: 8px 10px;
  border: 2px solid #ccc;
  border-bottom: none;        /* remove bottom edge so it welds to content */
  background: #f9f9f9;
  cursor: pointer;
  font-weight: bold;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  transition: background 0.2s ease;
  position: relative;         /* for z-index layering */
  z-index: 1;
}

/* 4) Active tab “hides” the content’s top border and raises itself: */
#dpc-tab-bar button.active {
  background: #fff;
  z-index: 2;                 /* sit above the content box */
  border-color: #ccc #ccc #fff #ccc;
  margin-bottom: -2px;        /* pull down to cover #dpc-tab-content’s top border */
}

/* 5) The content pane now carries the full box border: */
#dpc-tab-content {
  flex: 1;
  border: 2px solid #ccc;
  border-top: none;           /* weld up to the tab buttons */
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 10px;
  height: calc(100% - 40px);  /* account for tab‐height + padding */
  overflow-y: auto;
}

/* ========== “Font + Format” ROW ========== */
#dpc-format-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* force a uniform height on the select & buttons */
#dpc-format-controls select,
#dpc-format-controls button {
  height: 36px;          /* match your other controls */
  line-height: 36px;     /* vertically center the label */
  box-sizing: border-box;
}

/* make the select grow to fill leftover space */
#dpc-format-controls select {
  flex: 1;
  padding: 0 8px;
}

/* tighten up the format-buttons’ padding */
#dpc-format-controls button {
  padding: 0 12px;
}

/* ----------------– FORMAT CONTROLS TWEAKS ----------------– */
.dpc-format-controls button {
  height: auto !important;        /* let the browser size it */
  padding: 0.5em 0.75em;          /* comfortable default */
  line-height: normal !important; /* reset any forced line-height */
  vertical-align: middle;         /* align baseline with select */
}

.dpc-format-controls .dpc-font-select,
.dpc-format-controls .dpc-btn-inline {
 
  box-sizing: border-box;
}

/* let the font-picker grow to fill all leftover space */
.dpc-format-controls .dpc-font-select {
  flex: 1;
  padding: 0 8px;
}

.dpc-format-controls select {
  height: auto!important;          /* tweak this value until it lines up */
  line-height: 2em;     /* vertically center the label */
  padding: 0 0.5em;       /* left/right breathing room */
  box-sizing: border-box; /* include padding in that height */
  vertical-align: middle; /* align baseline with buttons */
}

/* ─────────────────────────────────────────────────────
   Custom button colors for “Customize”, “Tekst toevoegen”, and “Add to cart”
   ───────────────────────────────────────────────────── */
#dpc-customize-btn,
#dpc-add-text,
#dpc-add-to-cart,
#dpc-reset-config {
  color: #ffffff;            /* white text */
  background-color: #C6A793; /* warm neutral background */
}

#dpc-customize-btn:hover,
#dpc-add-text:hover,
#dpc-add-to-cart:hover,
#dpc-reset-config:hover {
  color: #000000;            /* black text on hover */
  background-color: #F2CBCB; /* pale rose hover background */
}

/* — hover‐tooltip — */
.dpc-swatch {
  position: relative;
}
.dpc-swatch:hover::after {
  content: attr(data-name);
  position: absolute;
  bottom: 100%;           /* above the swatch */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
}

/* — selected badge — */
.dpc-swatch.active::before {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  background: #0073aa;
  color: #fff;
  font-size: 10px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  z-index: 10001;
}

/* prevent the modal from scrolling when you touch a draggable item */
.dpc-text-wrapper,
.dpc-image-container {
  touch-action: none;    /* turns off the default pan/scroll on these elements */
}

/* ========== VERTICAL TEXT CENTERING ========== */

.dpc-text span {
  display: block;          /* each letter on its own line */
  margin: 0 auto;          /* auto L/R margin centers the span */
}

.dpc-text {
  white-space: pre-line;   /* honor newline characters */
  text-align: center;      /* center each line in the box */
  word-break: keep-all;
  overflow-wrap: normal;
}

/* ==== FORMAT CONTROLS (font + B I Verticaal) ==== */
.dpc-format-controls {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1rem;
}

.dpc-format-controls .dpc-font-select {
  flex: 1;           /* let the select fill all remaining space */
  min-width: 0;      /* prevent it from forcing a wrap */
}

/* ====== DISABLED TEXT CONTROLS ====== */
.dpc-format-controls button,
.dpc-format-controls select,
#dpc-size-range,
#dpc-vertical-toggle {
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}

.dpc-format-controls button:disabled,
.dpc-format-controls select:disabled,
#dpc-size-range:disabled,
#dpc-vertical-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dpc-color-swatches .dpc-swatch.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========= Slider Styles ========= */
.dpc-upload-image {
	margin-bottom: 2rem;
}

.dpc-image-controls {
	margin-bottom: 2rem;
}
@media (max-width: 768px) {
	.dpc-slider-group {
		margin-bottom: 1rem;
	}
  /* Enlarge the thumb on mobile/tablet, centered over the track */
  #dpc-image-width-slider::-webkit-slider-thumb,
  #dpc-image-height-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -12px; /* (thumb-height / 2) − (track-height / 2) → (28/2 − 4/2 = 14 − 2 = 12) */
    cursor: pointer;
  }
  #dpc-image-width-slider::-moz-range-thumb,
  #dpc-image-height-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    cursor: pointer;
  }
  #dpc-image-width-slider::-ms-thumb,
  #dpc-image-height-slider::-ms-thumb {
    width: 28px;
    height: 28px;
    cursor: pointer;
  }
}

/* Hide the image upload tab in the configurator */
.dpc-tab[data-tab="image-tab"],
#dpc-image-upload-section,
#dpc-tab-image{
  display: none !important;
}

#dpc-text-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#dpc-toolbar button.active {
  background-color: #000;
  color: #fff;
}

#dpc-bold-toggle.active,
#dpc-italic-toggle.active,
#dpc-vertical-toggle.active {
  background-color: #c69;  /* or your theme color */
  color: #fff;
  border-color: #c69;
}