/*
 * T-Box Design Studio — UI tokens aliniate la Brand Identity Manual (t.box):
 * Striking Red #D81F12, Intense Black #1A1818, Sauvignon #FFFAF8, Super Tanblue #FFE6D9,
 * Argent Gray #BFBFBF; tipografie: Montserrat (UI / body), Fredoka (titluri).
 */
.tbox-ds {
  --tbox-brand-red: #d81f12;
  --tbox-brand-red-dark: #16010c;
  --tbox-brand-red-light: #ff946d;
  --tbox-brand-black: #1a1818;
  --tbox-brand-gray: #bfbfbf;
  --tbox-brand-peach: #ffe6d9;
  --tbox-brand-cream: #fffaf8;
  --tbox-brand-blue: #00c1ff;
  --tbox-brand-blue-deep: #008bfa;
  --tbox-brand-pink: #e7006c;
  --tbox-brand-green: #55b700;
  --tbox-brand-purple: #c237bd;

  --tbox-bg: var(--tbox-brand-cream);
  --tbox-panel: #ffffff;
  --tbox-white: #ffffff;
  --tbox-text: var(--tbox-brand-black);
  --tbox-muted: #5c5858;
  --tbox-border: #e6e1de;
  --tbox-orange: var(--tbox-brand-red);
  --tbox-orange-hover: #b8170f;
  --tbox-link: var(--tbox-brand-blue-deep);
  --tbox-link-soft: rgba(0, 139, 250, 0.38);
  --tbox-star: #d81f12;
  --tbox-warn: #b45309;
  --tbox-gradient-cta: linear-gradient(135deg, var(--tbox-brand-red) 0%, var(--tbox-brand-red-light) 100%);
  --tbox-radius: 10px;
  --tbox-shadow: 0 4px 24px rgba(26, 24, 24, 0.07);
  font-family:
    "Montserrat",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tbox-text);
  background: var(--tbox-bg);
  border-radius: var(--tbox-radius);
  box-shadow: var(--tbox-shadow);
  margin: 1.5rem 0;
  overflow: hidden;
  position: relative;
}

/* Selecturi vedere / zonă print: păstrate pentru logică JS, ascunse vizual */
.tbox-ds__view-print-sync {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tbox-ds *,
.tbox-ds *::before,
.tbox-ds *::after {
  box-sizing: border-box;
}

.tbox-ds__grid {
  display: grid;
  /* Col. 1 produs: ~30% mai îngustă față de minmax(240px, 300px) → 70% ≈ 168–210px */
  grid-template-columns: minmax(168px, 210px) minmax(280px, 1fr) minmax(240px, 300px);
  gap: 0;
  min-height: 620px;
  position: relative;
  isolation: isolate;
}

/* Backdrop: întunecă studio-ul; click închide panoul (ca „Înapoi”). */
.tbox-ds__backdrop {
  position: absolute;
  inset: 0;
  z-index: 15;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: rgba(28, 28, 30, 0.48);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tbox-ds--details-open .tbox-ds__backdrop,
.tbox-ds--picker-open .tbox-ds__backdrop,
.tbox-ds--sizes-open .tbox-ds__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.tbox-ds__panel--product {
  grid-column: 1;
  grid-row: 1;
}

.tbox-ds__panel--tools {
  grid-column: 3;
  grid-row: 1;
}

.tbox-ds__details {
  display: none;
  grid-column: 2 / span 2;
  grid-row: 1;
  z-index: 5;
  align-self: stretch;
  background: var(--tbox-white);
  border-left: 1px solid var(--tbox-border);
  padding: 1.25rem 1.5rem 2rem;
  overflow-y: auto;
  max-height: min(85vh, 900px);
  text-align: left;
}

.tbox-ds--details-open .tbox-ds__details {
  display: block;
}

.tbox-ds__picker {
  display: none;
  grid-column: 2 / span 2;
  grid-row: 1;
  z-index: 6;
  align-self: stretch;
  background: var(--tbox-white);
  border-left: 1px solid var(--tbox-border);
  padding: 1.25rem 1.5rem 2rem;
  overflow-y: auto;
  max-height: min(85vh, 900px);
  text-align: left;
}

.tbox-ds--picker-open .tbox-ds__picker {
  display: block;
}

.tbox-ds__sizes {
  display: none;
  grid-column: 2 / span 2;
  grid-row: 1;
  z-index: 7;
  align-self: stretch;
  background: var(--tbox-white);
  border-left: 1px solid var(--tbox-border);
  padding: 1.25rem 1.5rem 2rem;
  overflow-y: auto;
  max-height: min(85vh, 900px);
  text-align: left;
}

.tbox-ds--sizes-open .tbox-ds__sizes {
  display: block;
}

/* Panou dreapta peste tot studio-ul; backdrop-ul din ::after blochează interacțiunea. */
.tbox-ds--details-open .tbox-ds__details,
.tbox-ds--picker-open .tbox-ds__picker,
.tbox-ds--sizes-open .tbox-ds__sizes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(440px, 100%);
  max-height: none;
  z-index: 16;
  align-self: stretch;
  grid-column: auto;
  grid-row: auto;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.14);
}

.tbox-ds--picker-open .tbox-ds__picker {
  width: min(520px, 100%);
}

.tbox-ds__sizes-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--tbox-muted);
  cursor: pointer;
}

.tbox-ds__sizes-back:hover {
  color: var(--tbox-text);
  text-decoration: underline;
}

.tbox-ds__sizes-title {
  font-size: 0.89rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.tbox-ds__sizes-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.tbox-ds__size-row {
  display: grid;
  grid-template-columns: minmax(72px, 100px) 1fr auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.65rem 0.75rem;
  background: var(--tbox-panel);
  border-radius: 8px;
  border: 1px solid var(--tbox-border);
}

.tbox-ds__size-row.is-disabled {
  opacity: 0.55;
}

.tbox-ds__size-label {
  font-weight: 600;
  font-size: 0.81rem;
}

.tbox-ds__size-price {
  font-size: 0.75rem;
  color: var(--tbox-text);
}

.tbox-ds__size-qty {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tbox-ds__size-qty-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--tbox-border);
  border-radius: 6px;
  background: var(--tbox-white);
  font-size: 0.94rem;
  line-height: 1;
  cursor: pointer;
  color: var(--tbox-text);
}

.tbox-ds__size-qty-btn--plus {
  color: var(--tbox-link);
  border-color: var(--tbox-link-soft);
}

.tbox-ds__size-qty-btn:hover:not(:disabled) {
  background: #f3f4f6;
}

.tbox-ds__size-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tbox-ds__size-qty-val {
  min-width: 1.75rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.81rem;
}

.tbox-ds__sizes-msg {
  color: var(--tbox-warn);
  font-size: 0.77rem;
  margin: 0 0 1rem;
}

.tbox-ds__sizes-summary {
  padding: 1rem 0;
  border-top: 1px solid var(--tbox-border);
  margin-bottom: 1rem;
}

.tbox-ds__sizes-count {
  display: block;
  font-size: 0.77rem;
  color: var(--tbox-muted);
  margin-bottom: 0.35rem;
}

.tbox-ds__sizes-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.tbox-ds__sizes-total {
  font-size: 0.98rem;
}

.tbox-ds__sizes-order {
  width: 100%;
  padding: 0.9rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--tbox-gradient-cta);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter 0.15s ease;
  box-shadow: 0 2px 12px rgba(216, 31, 18, 0.22);
}

.tbox-ds__sizes-order:hover:not(:disabled) {
  filter: brightness(0.96);
}

.tbox-ds__sizes-order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tbox-ds__picker-back.tbox-ds__cta {
  display: flex;
  margin: 0 0 1.25rem;
  width: 100%;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 600;
}

.tbox-ds__picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 480px) {
  .tbox-ds__picker-grid {
    grid-template-columns: 1fr;
  }
}

.tbox-ds__picker-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0.85rem;
  border: 1px solid var(--tbox-border);
  border-radius: 10px;
  background: var(--tbox-panel);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tbox-ds__picker-card:hover {
  border-color: var(--tbox-orange);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.tbox-ds__picker-card-img-wrap {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 0.65rem;
}

.tbox-ds__picker-card-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.tbox-ds__picker-card-title {
  font-size: 0.81rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.tbox-ds__picker-card-price {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--tbox-text);
  margin-bottom: 0.5rem;
}

.tbox-ds__picker-card-price .woocommerce-Price-amount {
  font-weight: 700;
}

.tbox-ds__picker-card-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tbox-muted);
  margin-top: 0.35rem;
  margin-bottom: 0.25rem;
}

.tbox-ds__picker-card-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tbox-ds__picker-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--d, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.tbox-ds__picker-card-sizes {
  font-size: 0.68rem;
  color: var(--tbox-muted);
  line-height: 1.35;
}

.tbox-ds__details-back.tbox-ds__cta {
  display: flex;
  margin: 0 0 1rem;
  width: 100%;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 600;
}

.tbox-ds__details-head {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tbox-border);
}

.tbox-ds__details-title {
  font-size: 0.94rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.tbox-ds__details-delivery {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.77rem;
  color: var(--tbox-muted);
}

.tbox-ds__details-content {
  font-size: 0.81rem;
  line-height: 1.55;
}

.tbox-ds__details-content .tbox-ds__desc-short {
  margin-bottom: 1rem;
}

.tbox-ds__details-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.77rem;
}

.tbox-ds__details-content table th,
.tbox-ds__details-content table td {
  border: 1px solid var(--tbox-border);
  padding: 0.45rem 0.6rem;
  text-align: left;
}

.tbox-ds__details-content img {
  max-width: 100%;
  height: auto;
}

.tbox-ds__details-empty {
  color: var(--tbox-muted);
  margin: 0;
}

@media (max-width: 1100px) {
  .tbox-ds__grid {
    grid-template-columns: 1fr;
  }
  .tbox-ds__panel--product,
  .tbox-ds__preview,
  .tbox-ds__panel--tools,
  .tbox-ds__details,
  .tbox-ds__picker,
  .tbox-ds__sizes {
    grid-column: 1;
    grid-row: auto;
  }
  .tbox-ds__preview {
    order: -1;
  }
  .tbox-ds__details,
  .tbox-ds__picker,
  .tbox-ds__sizes {
    max-height: none;
  }

  .tbox-ds--details-open .tbox-ds__details,
  .tbox-ds--picker-open .tbox-ds__picker,
  .tbox-ds--sizes-open .tbox-ds__sizes {
    width: 100%;
    left: 0;
    right: 0;
  }
}

.tbox-ds__panel {
  padding: 1.5rem 1.25rem;
  background: var(--tbox-panel);
  border-right: 1px solid var(--tbox-border);
}

.tbox-ds__panel--tools {
  background: var(--tbox-white);
  border-right: none;
  border-left: 1px solid var(--tbox-border);
}

@media (max-width: 1100px) {
  .tbox-ds__panel,
  .tbox-ds__panel--tools {
    border: none;
    border-bottom: 1px solid var(--tbox-border);
  }
}

.tbox-ds__title {
  font-family: "Fredoka", "Montserrat", system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.tbox-ds__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.tbox-ds__stars {
  color: var(--tbox-star);
  letter-spacing: -0.05em;
  font-size: 0.81rem;
}

.tbox-ds__rating-text {
  font-size: 0.72rem;
  color: var(--tbox-muted);
}

.tbox-ds__delivery {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.77rem;
  color: var(--tbox-muted);
}

.tbox-ds__panel--product > .tbox-ds__delivery {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--tbox-border);
}

.tbox-ds__delivery-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235c5858'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.tbox-ds__links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.tbox-ds__links.tbox-ds__links--below-title {
  margin-bottom: 0.75rem;
}

.tbox-ds__link {
  color: var(--tbox-muted);
  text-decoration: none;
  font-size: 0.77rem;
}

.tbox-ds__link:hover {
  color: var(--tbox-text);
  text-decoration: underline;
}

.tbox-ds__link--btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.tbox-ds__link-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.tbox-ds__link-icon--info {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235c5858'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.tbox-ds__link-icon--shirt {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235c5858'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 7a4 4 0 10-8 0v1H5l-2 4v9a1 1 0 001 1h16a1 1 0 001-1v-9l-2-4h-3V7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.tbox-ds__link-icon--bag {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235c5858'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.tbox-ds__field {
  margin-bottom: 1rem;
}

.tbox-ds__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tbox-muted);
  margin-bottom: 0.35rem;
}

.tbox-ds__label--inline {
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  vertical-align: middle;
}

.tbox-ds__select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--tbox-border);
  border-radius: 6px;
  background: var(--tbox-white);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.tbox-ds__colors {
  margin-bottom: 1.25rem;
}

.tbox-ds__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.tbox-ds__swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch, #ccc);
  cursor: pointer;
  padding: 0;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tbox-ds__swatch:hover {
  transform: scale(1.05);
}

.tbox-ds__swatch.is-selected {
  border-color: var(--tbox-orange);
}

.tbox-ds__swatch-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.tbox-ds__swatch.is-selected .tbox-ds__swatch-check {
  opacity: 1;
}

.tbox-ds__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--tbox-gradient-cta);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 2px 12px rgba(216, 31, 18, 0.25);
}

.tbox-ds__cta:hover {
  filter: brightness(0.96);
  color: #fff !important;
}

.tbox-ds__cta--btn {
  font: inherit;
  text-align: center;
}

.tbox-ds__cta-icon {
  width: 1.25rem;
  height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Rembg toggle active state */
.tbox-ds__remove-bg-btn-zoom.is-rembg-active {
  background: var(--tbox-panel) !important;
  color: var(--tbox-text) !important;
  border-color: var(--tbox-border) !important;
}

.tbox-ds__toggle-switch {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 16px;
  background-color: #d1d1d6;
  border-radius: 8px;
  transition: background-color 0.25s ease;
  flex-shrink: 0;
  vertical-align: middle;
}

.tbox-ds__toggle-switch-handle {
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tbox-ds__remove-bg-btn-zoom.is-rembg-active .tbox-ds__toggle-switch {
  background-color: #34c759; /* Modern active green */
}

.tbox-ds__remove-bg-btn-zoom.is-rembg-active .tbox-ds__toggle-switch-handle {
  transform: translateX(12px);
}

.tbox-ds__remove-bg-btn-zoom:disabled .tbox-ds__toggle-switch {
  background-color: #e5e5ea;
  opacity: 0.65;
}

/* Sidebar action buttons (Salvează / Design nou) */
.tbox-ds__sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.tbox-ds__sidebar-actions--tools {
    margin-top: 0;
    margin-bottom: 1rem;
}

.tbox-ds__panel--tools .tbox-ds__ai-source-panels[hidden] {
    display: none !important;
}

.tbox-ds__ai-box--show-ai .tbox-ds__ai-source-panels,
.tbox-ds__ai-box--show-ai .tbox-ds__ai-source-panels[hidden] {
    display: block !important;
}
.tbox-ds__btn--sidebar-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    border: none;
}
.tbox-ds__btn--sidebar-action.tbox-ds__btn--secondary {
    background: linear-gradient(135deg, #111 0%, #333 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.tbox-ds__btn--sidebar-action.tbox-ds__btn--secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.tbox-ds__btn--sidebar-action.tbox-ds__btn--secondary:disabled {
    background: #f0f0f0;
    color: #bbb;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}
.tbox-ds__btn--sidebar-action.tbox-ds__btn--ghost:disabled {
    background: transparent;
    color: #bbb;
    border-color: #ececec !important;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    opacity: 0.55;
}
.tbox-ds__btn--ghost {
    background: transparent;
    color: #666;
    border: 1.5px solid #e0e0e0 !important;
}
.tbox-ds__btn--ghost:hover:not(:disabled) {
    background: #f5f5f5;
    color: #111;
    border-color: #ccc !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.tbox-ds__btn--ghost:active:not(:disabled) {
    transform: scale(0.98);
}


.tbox-ds__variants {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem 0.75rem;
  background: var(--tbox-bg);
  border: 1px solid var(--tbox-border);
  border-radius: 8px;
}

.tbox-ds__variants-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tbox-muted);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.tbox-ds__variants-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.tbox-ds__variant-thumb {
  display: block;
  margin: 0;
  padding: 0;
  border: 2px solid var(--tbox-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--tbox-white);
  aspect-ratio: 1;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tbox-ds__variant-thumb:hover {
  border-color: var(--tbox-orange);
  box-shadow: 0 2px 10px rgba(216, 31, 18, 0.28);
}

.tbox-ds__variant-thumb:focus {
  outline: 2px solid var(--tbox-orange);
  outline-offset: 2px;
}

.tbox-ds__variant-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Previzualizare centru */
.tbox-ds__preview {
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(
    180deg,
    var(--tbox-brand-cream) 0%,
    var(--tbox-brand-peach) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 50px 0;
  position: relative;
}

.tbox-ds__preview-cta {
  width: calc(100% - 2rem);
  max-width: 500px;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.tbox-ds__preview-price {
  width: calc(100% - 2rem);
  max-width: 500px;
  margin: -0.35rem auto 0;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tbox-text);
}

.tbox-ds__mockup-wrap {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.tbox-ds__view-rail {
  display: none;
}

.tbox-ds__mockup-main {
  position: relative;
  width: 100%;
  overflow: visible;
}

/* Top / left print-area rulers (cm) — visible while design is selected or moved */
.tbox-ds__print-rulers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

.tbox-ds__print-rulers[hidden] {
  display: none !important;
}

.tbox-ds__print-ruler {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 5px;
  min-width: 2.5rem;
  pointer-events: none;
}

.tbox-ds__print-ruler[hidden] {
  display: none !important;
}

.tbox-ds__print-ruler-label {
  align-self: center;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(0, 100, 200, 0.95);
  white-space: nowrap;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(255, 255, 255, 0.85);
}

.tbox-ds__print-ruler-line {
  flex: 0 0 auto;
  width: 0;
  align-self: stretch;
  min-height: 4px;
  border-left: 1px dotted rgba(0, 139, 250, 0.88);
  position: relative;
}

.tbox-ds__print-ruler-line::before,
.tbox-ds__print-ruler-line::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 6px;
  border-top: 1px solid rgba(0, 139, 250, 0.88);
}

.tbox-ds__print-ruler-line::before {
  top: 0;
}

.tbox-ds__print-ruler-line::after {
  bottom: 0;
}

/* Riglă stânga: distanță orizontală până la marginea stângă a imaginii */
.tbox-ds__print-ruler--left {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  min-height: 2.5rem;
  transform: translateY(-50%);
}

.tbox-ds__print-ruler--left .tbox-ds__print-ruler-label {
  align-self: center;
  margin-bottom: 3px;
}

.tbox-ds__print-ruler-line--horizontal {
  width: 100%;
  flex: 0 0 auto;
  min-width: 4px;
  min-height: 0;
  height: 0;
  align-self: stretch;
  border-left: none;
  border-top: 1px dotted rgba(0, 139, 250, 0.88);
}

.tbox-ds__print-ruler-line--horizontal::before,
.tbox-ds__print-ruler-line--horizontal::after {
  top: -3px;
  bottom: auto;
  left: auto;
  width: 0;
  height: 6px;
  border-top: none;
  border-left: 1px solid rgba(0, 139, 250, 0.88);
}

.tbox-ds__print-ruler-line--horizontal::before {
  left: 0;
}

.tbox-ds__print-ruler-line--horizontal::after {
  right: 0;
  left: auto;
}

.tbox-ds__view-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  margin: 0;
  padding: 0.22rem;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--tbox-border);
  border-radius: 9px;
  background: rgba(255, 250, 248, 0.96);
  box-shadow: 0 2px 10px rgba(26, 24, 24, 0.08);
  cursor: pointer;
  color: var(--tbox-text);
  font: inherit;
  line-height: 1;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.tbox-ds__view-thumb:hover:not(:disabled) {
  border-color: var(--tbox-brand-blue-deep);
  box-shadow: 0 4px 14px rgba(0, 139, 250, 0.18);
}

.tbox-ds__view-thumb:focus {
  outline: 2px solid var(--tbox-brand-blue-deep);
  outline-offset: 2px;
}

.tbox-ds__view-thumb.is-selected {
  border-color: var(--tbox-brand-blue-deep);
  box-shadow: 0 4px 16px rgba(0, 139, 250, 0.22);
}

.tbox-ds__view-thumb:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tbox-ds__view-thumb-frame {
  width: 100%;
  aspect-ratio: 68 / 82;
  border-radius: 5px;
  overflow: hidden;
  background: var(--tbox-white);
}

.tbox-ds__view-thumb-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tbox-ds__view-thumb-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 1101px) {
  .tbox-ds__mockup-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.65rem;
    max-width: calc(500px + 4.5rem);
    box-sizing: border-box;
  }

  .tbox-ds__view-rail {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex-shrink: 0;
    width: 4.25rem;
    padding-top: 0.15rem;
  }

  .tbox-ds__mockup-main {
    flex: 1 1 auto;
    max-width: 500px;
    min-width: 0;
  }

  .tbox-ds__rotate-view {
    display: none !important;
  }
}

.tbox-ds__mockup-stage {
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tbox-ds__rotate-view {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.4rem 0.45rem 0.32rem;
  min-width: 44px;
  border: 2px solid var(--tbox-border);
  border-radius: 12px;
  background: rgba(255, 250, 248, 0.96);
  box-shadow: 0 4px 18px rgba(26, 24, 24, 0.12);
  cursor: pointer;
  color: var(--tbox-text);
  font: inherit;
  line-height: 1;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.tbox-ds__rotate-view-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.tbox-ds__rotate-view-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--tbox-text);
  white-space: nowrap;
}

.tbox-ds__rotate-view:hover:not(:disabled) {
  border-color: var(--tbox-brand-blue-deep);
  box-shadow: 0 6px 22px rgba(0, 139, 250, 0.22);
}

.tbox-ds__rotate-view:focus {
  outline: 2px solid var(--tbox-brand-blue-deep);
  outline-offset: 2px;
}

.tbox-ds__rotate-view:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tbox-ds__rotate-view-icon {
  display: flex;
  color: var(--tbox-brand-blue-deep);
  line-height: 0;
  flex-shrink: 0;
}

.tbox-ds__mockup-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.12));
}

.tbox-ds__print-zone {
  position: absolute;
  transform: translateX(-50%);
  border: 2px dashed rgba(0, 139, 250, 0.85);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.tbox-ds__print-inner {
  position: relative;
  width: 88%;
  height: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: auto;
}

.tbox-ds__print-stack {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: auto;
}

/* Chenarul folosește max. din admin; presetul mai mic e scalat + tras pe stack în interior. */
.tbox-ds__print-content {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-sizing: border-box;
}



.tbox-ds__print-inner--pan-ready .tbox-ds__print-stack {
  cursor: grab;
  touch-action: none;
}

.tbox-ds__print-stack.is-panning {
  cursor: grabbing;
}

.tbox-ds__design-inset-wrap {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  transform: scale(var(--tbox-design-artboard-zoom, 1));
  transform-origin: center center;
}

.tbox-ds__design-inset-wrap .tbox-ds__design-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 0;
  pointer-events: none;
  transform: none;
  transform-origin: center center;
  -webkit-user-drag: none;
  user-select: none;
  /*
   * Previzualizare mockup: designul se amestecă cu tricoul (ca un print pe țesătură).
   * Nu modifică fișierul / exportul — doar stratul vizual din browser.
   * Pe tricouri foarte închise la culoare, multiply poate întuneca mult; ajustează blend-ul aici.
   */
  mix-blend-mode: multiply;
  filter: contrast(1.06) saturate(0.98) brightness(1.03);
}

/* Ușoară „țesătură” peste design în preview (deasupra imaginii, fără a bloca textul din overlay). */
.tbox-ds__design-inset-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(
    -12deg,
    transparent 0,
    transparent 3px,
    rgba(40, 38, 35, 0.09) 3px,
    rgba(40, 38, 35, 0.09) 4px
  );
}

.tbox-ds__text-layers-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.tbox-ds__text-layers-overlay[hidden] {
  display: none !important;
}

.tbox-ds__text-layer-node {
  position: absolute;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 92%;
  overflow: visible;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.tbox-ds__text-layer-node:active {
  cursor: grabbing;
}

.tbox-ds__text-layer-node.is-selected {
  outline: none;
  box-shadow: 0 0 0 2px rgba(216, 31, 18, 0.45);
  border-radius: 2px;
}

.tbox-ds__text-layer-inner {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Casetă text — dreptunghi cu colțuri rotunjite, fără codiță (preview + export). */
.tbox-ds__text-card {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0.5em;
  --tbox-card-border: #1a1a1a;
  --tbox-card-fill: #fff;
}

.tbox-ds__text-card .tbox-ds__text-layer-inner {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: visible;
  background: var(--tbox-card-fill);
  border: 2px solid var(--tbox-card-border);
  border-radius: 0.65em;
  padding: 0.38em 0.52em;
  text-shadow: none;
  box-shadow: 0 0.06em 0.22em rgba(0, 0, 0, 0.08);
}

.tbox-ds__text-bubble {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  box-sizing: border-box;
  /* Spațiu în jurul corpului + codiță, ca vârful să nu atingă chenarul de selecție */
  padding: 0.75em;
  --tbox-bubble-border: #1a1a1a;
  --tbox-bubble-fill: #fff;
}

.tbox-ds__text-bubble .tbox-ds__text-layer-inner {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: visible;
  background: var(--tbox-bubble-fill);
  border: 2px solid var(--tbox-bubble-border);
  border-radius: 0.55em;
  padding: 0.38em 0.52em;
  text-shadow: none;
  box-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.1);
}

/* Codiță: contur ca la balon + poziție/direcție față de centrul printului (setate din JS). */
.tbox-ds__text-bubble .tbox-ds__text-layer-inner::before {
  content: "";
  position: absolute;
  width: 0.62em;
  height: 0.62em;
  background: var(--tbox-bubble-fill);
  border-style: solid;
  border-color: var(--tbox-bubble-border);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}

.tbox-ds__text-bubble .tbox-ds__text-layer-inner::after {
  display: none !important;
}

/* Jos — vârf spre centru (jos) */
.tbox-ds__text-bubble[data-tbox-tail="bottom"] .tbox-ds__text-layer-inner::before {
  left: 50%;
  bottom: -0.34em;
  top: auto;
  transform: translateX(calc(-50% + var(--tbox-tail-shift, 0px))) rotate(45deg);
  border-width: 0 2px 2px 0;
}

/* Sus */
.tbox-ds__text-bubble[data-tbox-tail="top"] .tbox-ds__text-layer-inner::before {
  left: 50%;
  top: -0.34em;
  bottom: auto;
  transform: translateX(calc(-50% + var(--tbox-tail-shift, 0px))) rotate(45deg);
  border-width: 2px 0 0 2px;
}

/* Dreapta — vârf spre centru (dreapta) */
.tbox-ds__text-bubble[data-tbox-tail="right"] .tbox-ds__text-layer-inner::before {
  top: 50%;
  right: -0.34em;
  left: auto;
  transform: translateY(calc(-50% + var(--tbox-tail-shift, 0px))) rotate(45deg);
  border-width: 2px 2px 0 0;
}

/* Stânga */
.tbox-ds__text-bubble[data-tbox-tail="left"] .tbox-ds__text-layer-inner::before {
  top: 50%;
  left: -0.34em;
  right: auto;
  transform: translateY(calc(-50% + var(--tbox-tail-shift, 0px))) rotate(45deg);
  border-width: 0 0 2px 2px;
}

.tbox-ds__text-editor-field--color {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.tbox-ds__text-color-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
}

.tbox-ds__text-color-input {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2rem;
  min-width: 2.75rem;
  padding: 0;
  border: 1px solid var(--tbox-border, #e0e0e0);
  border-radius: 6px;
  cursor: pointer;
  background: var(--tbox-panel, #fff);
  box-sizing: border-box;
}

.tbox-ds__text-color-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tbox-ds__text-color-reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: var(--tbox-orange);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.tbox-ds__text-color-reset:hover {
  background: var(--tbox-orange-hover);
}

.tbox-ds__mockup-zoom-row .tbox-ds__text-color-controls {
  flex: 0 0 auto;
}

.tbox-ds__mockup-zoom-row .tbox-ds__text-color-input {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: none;
}

.tbox-ds__mockup-zoom-row .tbox-ds__text-color-reset {
  width: 24px;
  height: 24px;
  font-size: 0.95rem;
}

.tbox-ds__text-color-reset[hidden] {
  display: none !important;
}
  display: none !important;
}

.tbox-ds__text-editor-field--frame {
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  text-align: left;
}

.tbox-ds__text-frame-group {
  width: 100%;
  min-width: 0;
}

.tbox-ds__text-layers-panel {
  margin-top: 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--tbox-border);
}

.tbox-ds__text-layers-hint {
  font-size: 0.68rem;
  color: var(--tbox-muted);
  margin: 0 0 0.45rem;
  line-height: 1.35;
}

.tbox-ds__text-layer-chips {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tbox-ds__text-layer-chips li {
  margin: 0;
}

.tbox-ds__text-chip-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  max-width: 100%;
}

.tbox-ds__text-chip {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--tbox-border);
  background: var(--tbox-panel, #f7f7f9);
  cursor: pointer;
  text-align: left;
}

.tbox-ds__text-chip.is-active {
  border-color: var(--tbox-orange);
  background: var(--tbox-brand-peach);
}

.tbox-ds__text-chip-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--tbox-border);
  border-radius: 4px;
  background: var(--tbox-panel, #f7f7f9);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--tbox-muted, #555);
  cursor: pointer;
}

.tbox-ds__text-chip-remove:hover {
  background: #ffecec;
  border-color: #c44;
  color: #a00;
}

.tbox-ds__rembg-before-text {
  margin: 0.5rem 0 0;
  padding: 0.35rem 0 0.45rem;
  border-top: 1px solid var(--tbox-border);
}

.tbox-ds__text-layer-editor {
  margin-top: 0.5rem;
}

.tbox-ds__design-inset-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.35rem;
  min-width: 0;
}

.tbox-ds__design-inset-slider {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.tbox-ds__design-inset-value {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--tbox-orange, #d81f12);
  min-width: 2.5rem;
  text-align: end;
}

.tbox-ds__design-inset-hint {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--tbox-muted, #555);
}

.tbox-ds__text-editor-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.45rem 0;
}

.tbox-ds__text-editor-row--2 {
  display: flex;
  gap: 0.65rem;
  align-items: flex-end;
  min-width: 0;
}

.tbox-ds__text-font-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 0.75rem;
}

.tbox-ds__text-slider-value {
  font-weight: 700;
  color: var(--tbox-orange, #d81f12);
  margin-inline-start: 0.2em;
}

.tbox-ds__text-size-input,
.tbox-ds__text-weight-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.tbox-ds__text-editor-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  min-width: 0;
}

.tbox-ds__text-editor-field > .tbox-ds__text-editor-field-label {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--tbox-muted);
  font-weight: 600;
}

.tbox-ds__text-editor-field > .tbox-ds__text-font-select,
.tbox-ds__text-editor-field > .tbox-ds__text-size-input,
.tbox-ds__text-editor-field > .tbox-ds__text-weight-input {
  flex: 1 1 auto;
  min-width: 0;
}

.tbox-ds__design-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.35rem;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 4px;
  pointer-events: none;
  text-align: center;
}

.tbox-ds__design-loading[hidden] {
  display: none !important;
}

.tbox-ds__design-loading .tbox-ds__spinner {
  width: 1.5rem;
  height: 1.5rem;
}

.tbox-ds__design-loading-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--tbox-muted, #555);
  line-height: 1.25;
  max-width: 100%;
}

.tbox-ds__design-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tbox-ds__design-img[data-style="line"] {
  filter: grayscale(1) contrast(1.2);
}

.tbox-ds__design-img[data-style="pop"] {
  filter: saturate(1.4) contrast(1.1);
}

/* Decupare circulară simplă (preview mockup). */
.tbox-ds__design-img[data-style="radialfade"] {
  -webkit-clip-path: circle(closest-side at 50% 50%);
  clip-path: circle(closest-side at 50% 50%);
}

.tbox-ds__design-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.5rem;
  pointer-events: auto;
}

.tbox-ds__design-placeholder[hidden] {
  display: none !important;
  pointer-events: none;
}

.tbox-ds__mockup-mobile-price {
  display: none;
}

.tbox-ds__mockup-mobile-price:empty {
  display: none !important;
}

.tbox-ds__placeholder-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 168px;
}

.tbox-ds__placeholder-help-btn {
  margin-top: 4px;
  align-self: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #cbd5e1;
  color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 0.25rem 0.65rem;
  border-radius: 14px;
}

.tbox-ds__placeholder-help-btn:hover {
  background: #ffffff;
  border-color: var(--tbox-orange, #d81f12);
  color: var(--tbox-orange, #d81f12);
}

.tbox-ds__btn-svg {
  flex-shrink: 0;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.tbox-ds__placeholder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 0.45rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
  white-space: nowrap;
}

.tbox-ds__print-zone--empty {
  border-color: transparent !important;
  background: transparent;
}

/* Panou dreapta */
.tbox-ds__ai-box {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tbox-border);
}

/* Tab Contents (upload panel kept for ref sync; AI panel shown on demand) */
.tbox-ds__tab-content[data-tbox-tab-content="upload"] {
  display: none !important;
}

.tbox-ds__tab-content {
  display: none;
}

.tbox-ds__tab-content.is-active {
  display: block;
}

/* Upload Zone & Card */
.tbox-ds__upload-card {
  border: 2px dashed var(--tbox-border, #cbd5e0);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tbox-ds__upload-card:hover {
  border-color: var(--tbox-text, #1a1a1a);
  background: #fcfcfc;
}

.tbox-ds__upload-icon {
  color: #a0aec0;
  margin-bottom: 4px;
  transition: color 0.2s ease;
}

.tbox-ds__upload-card:hover .tbox-ds__upload-icon {
  color: var(--tbox-text, #1a1a1a);
}

.tbox-ds__upload-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0;
  color: var(--tbox-text, #1a1a1a);
}

.tbox-ds__upload-subtitle {
  font-size: 0.72rem;
  color: #718096;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

/* Upload Preview */
.tbox-ds__upload-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 1rem;
  border: 1px solid var(--tbox-border, #edf2f7);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.tbox-ds__upload-preview-img {
  max-height: 120px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid var(--tbox-border, #edf2f7);
}

.tbox-ds__upload-preview-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.tbox-ds__upload-preview-actions .tbox-ds__btn {
  flex: 1;
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
  height: auto;
  min-height: 0;
}

/* Options section — text & styles (visible once a design image exists) */
.tbox-ds__options-section[hidden] {
  display: none !important;
}

.tbox-ds__options-section {
  margin-bottom: 0.65rem;
  border: 1px solid var(--tbox-border, #e0e0e0);
  border-radius: 8px;
  background: var(--tbox-panel, #fafafa);
  overflow: hidden;
}

.tbox-ds__options-label {
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.55rem 0.65rem;
  color: var(--tbox-text, #1a1a1a);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tbox-ds__options-accordion-body {
  padding: 0 0.55rem 0.55rem;
  border-top: 1px solid var(--tbox-border, #e8e8e8);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tbox-ds__options-accordion-body > .tbox-ds__tool-row {
  margin-bottom: 0.2rem;
}

.tbox-ds__options-accordion-body > .tbox-ds__text-layers-panel {
  margin-bottom: 0.1rem;
}

.tbox-ds__options-accordion-body > .tbox-ds__styles {
  margin-top: 0.2rem;
  margin-bottom: 0;
}



.tbox-ds__ai-mode-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tbox-ds__ai-ref-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tbox-ds__ai-ref-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
}

.tbox-ds__ai-ref-name.is-filename {
  font-weight: 600;
}

.tbox-ds__ai-editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
}

.tbox-ds__ai-visual-style-group {
  margin: 0.4rem 0 0;
  width: 100%;
  min-width: 0;
}

.tbox-ds__ai-visual-style-options {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 3px;
  width: 100%;
  background: var(--tbox-panel-subtle, #f1f5f9);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--tbox-border, #e2e8f0);
}

.tbox-ds__ai-visual-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0.35rem 0.25rem;
  min-height: 2.0rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tbox-text-muted, #64748b);
  cursor: pointer;
  flex: 1 1 0px;
  min-width: 0;
  text-align: center;
  transition: all 0.15s ease;
  user-select: none;
}

.tbox-ds__ai-visual-radio:hover {
  color: var(--tbox-text, #1e293b);
  background: rgba(255, 255, 255, 0.5);
}

.tbox-ds__ai-visual-radio:has(.tbox-ds__ai-visual-radio-input:checked) {
  border-color: rgba(216, 31, 18, 0.25);
  background: #ffffff;
  color: var(--tbox-orange, #d81f12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tbox-ds__ai-visual-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.tbox-ds__ai-visual-radio-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  line-height: 1.25;
}

.tbox-ds__ai-editor-upload {
  flex: 1 1 8rem;
  min-width: 0;
  display: flex;
  position: relative;
  align-items: stretch;
}

.tbox-ds__ai-editor-upload.has-ref-image .tbox-ds__ai-editor-upload-btn {
  padding-right: 2.35rem;
}

.tbox-ds__ai-editor-upload .tbox-ds__ai-editor-upload-clear {
  position: absolute;
  right: 0.12rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  min-height: 1.4rem;
  margin: 0;
  padding: 0.15rem 0.3rem;
  line-height: 1;
  border: none;
  border-radius: 0.2rem;
  box-shadow: none;
  background: var(--tbox-orange);
  border-color: transparent;
  color: #fff;
}

.tbox-ds__ai-editor-upload .tbox-ds__ai-editor-upload-clear:hover {
  background: var(--tbox-orange-hover);
  border-color: transparent;
  color: #fff;
}

.tbox-ds__ai-editor-upload .tbox-ds__ai-editor-upload-clear:focus-visible {
  outline: 2px solid var(--tbox-orange);
  outline-offset: 2px;
}

.tbox-ds__ai-editor-upload-clear[hidden] {
  display: none !important;
}

.tbox-ds__ai-editor-upload-clear-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tbox-ds__ai-editor-upload-clear-icon svg {
  stroke: #fff;
}

.tbox-ds__ai-editor-upload-btn {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-start;
}

.tbox-ds__ai-mode-icon--inline {
  flex-shrink: 0;
}

.tbox-ds__ai-ta-stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.tbox-ds__ai-ta-stack .tbox-ds__ai-ta[hidden] {
  display: none !important;
}

.tbox-ds__ai-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.tbox-ds__input {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--tbox-border);
  border-radius: 6px;
  font: inherit;
}

.tbox-ds__textarea {
  min-height: 4.5rem;
  resize: vertical;
  line-height: 1.45;
  display: block;
}

.tbox-ds__ai-row .tbox-ds__btn--primary {
  align-self: stretch;
}

.tbox-ds__hint {
  font-size: 0.64rem;
  color: var(--tbox-muted);
  margin: 0.5rem 0 0;
}

.tbox-ds__tool-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.tbox-ds__tool-list li {
  margin-bottom: 0.35rem;
}

.tbox-ds__tool-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.tbox-ds__remove-bg-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
}

.tbox-ds__rembg-tool {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.25rem 0;
}

.tbox-ds__remove-bg-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    background: linear-gradient(135deg, #111 0%, #444 100%);
    color: #fff;
    border-radius: 10px;
    padding: 12px 20px;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.tbox-ds__remove-bg-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #000 0%, #222 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.tbox-ds__remove-bg-btn:active:not(:disabled) {
    transform: scale(0.98);
}
.tbox-ds__remove-bg-btn:disabled {
    background: #f0f0f0;
    color: #ccc;
    box-shadow: none;
    transform: none;
}

.tbox-ds__rembg-tool .tbox-ds__tool-loading {
  margin-left: 0.5rem;
}

.tbox-ds__save-design-row {
  margin-bottom: 0.35rem;
}

.tbox-ds__btn--save-design {
  width: 100%;
  justify-content: center;
}

.tbox-ds__tool-row .tbox-ds__tool {
  flex: 1 1 auto;
  min-width: 0;
}

.tbox-ds__tool-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.tbox-ds__tool-loading[hidden] {
  display: none !important;
}

.tbox-ds__spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--tbox-border, #ccc);
  border-top-color: var(--tbox-text, #333);
  border-radius: 50%;
  animation: tbox-ds-spin 0.7s linear infinite;
}

@keyframes tbox-ds-spin {
  to {
    transform: rotate(360deg);
  }
}

.tbox-ds__design-inset-tool-row {
  margin-bottom: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

/* Zoom toggle button */
.tbox-ds__zoom-toggle-row {
  margin-bottom: 0.3rem;
}
.tbox-ds__zoom-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}
.tbox-ds__zoom-toggle-btn.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Zoom container under mockup */
.tbox-ds__mockup-zoom-container {
  width: 100%;
  max-width: 320px;
  margin: 12px auto 4px;
  padding: 0 10px;
}

.tbox-ds__mockup-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--tbox-border, #e6e1de);
  border-radius: 30px;
  padding: 6px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tbox-ds__design-inset-slider {
  flex: 1;
  height: 6px;
  background: var(--tbox-border, #e6e1de);
  border-radius: 3px;
  outline: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tbox-ds__design-inset-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tbox-brand-red, #d81f12);
  cursor: pointer;
  transition: transform 0.1s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.tbox-ds__design-inset-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.tbox-ds__design-inset-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--tbox-brand-red, #d81f12);
  cursor: pointer;
  transition: transform 0.1s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.tbox-ds__design-inset-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
}

.tbox-ds__design-inset-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--tbox-text, #1a1818);
  min-width: 34px;
  text-align: right;
}

/* Legacy Zoom panel styles removed/cleaned up */
.tbox-ds__zoom-panel {
  display: none !important;
}


.tbox-ds__btn--sm {
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
}

.tbox-ds__tool {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--tbox-muted);
  cursor: not-allowed;
}

.tbox-ds__tool:not(:disabled) {
  color: var(--tbox-text);
  cursor: pointer;
}

.tbox-ds__tool:not(:disabled):hover {
  text-decoration: underline;
}

.tbox-ds__tool.is-active:not(:disabled) {
  font-weight: 600;
  text-decoration: none;
  color: var(--tbox-orange);
}

.tbox-ds__styles {
  margin-bottom: 1rem;
}

.tbox-ds__style-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tbox-ds__style-thumb {
  flex: 1;
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.tbox-ds__style-thumb.is-active {
  border-color: var(--tbox-orange);
}

.tbox-ds__footer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tbox-ds__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}

.tbox-ds__btn--primary {
  background: var(--tbox-gradient-cta);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(216, 31, 18, 0.22);
  transition: filter 0.15s ease;
}

.tbox-ds__btn--primary:hover:not(:disabled) {
  filter: brightness(0.96);
}

.tbox-ds__btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Încărcare AI: dungi „barber pole” orizontale (spiral pe diagonală, defilare stânga-dreapta), culori T-Box */
.tbox-ds__btn--primary.is-tbox-loading {
  position: relative;
  overflow: hidden;
  cursor: wait;
}

.tbox-ds__btn--primary.is-tbox-loading:disabled {
  opacity: 1;
  cursor: wait;
}

.tbox-ds__btn--primary.is-tbox-loading .tbox-ds__btn-label {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.tbox-ds__btn--primary.is-tbox-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    118deg,
    var(--tbox-orange) 0,
    var(--tbox-orange) 11px,
    #ffffff 11px,
    #ffffff 22px,
    var(--tbox-orange-hover) 22px,
    var(--tbox-orange-hover) 33px,
    #fffaf8 33px,
    #fffaf8 44px
  );
  background-size: 44px 44px;
  animation: tbox-barber-pole-x 0.55s linear infinite;
}

@keyframes tbox-barber-pole-x {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 44px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-ds__btn--primary.is-tbox-loading::before {
    animation: none;
    background-position: 0 0;
    opacity: 0.92;
  }
}

.tbox-ds__btn--secondary {
  background: var(--tbox-panel);
  color: var(--tbox-text);
  border-color: var(--tbox-border);
  width: 100%;
  cursor: pointer;
}

.tbox-ds__btn--ghost {
  background: transparent;
  border-color: var(--tbox-border);
  color: var(--tbox-text);
}

.tbox-ds__btn--danger {
  background: #fff;
  color: #c62828;
  border-color: #ffcdd2;
}

.tbox-ds__btn--danger:hover {
  background: #ffebee;
}

.tbox-ds-error {
  padding: 1rem;
  background: #ffebee;
  color: #b71c1c;
  border-radius: 8px;
}

.tbox-ds--view-back .tbox-ds__print-zone {
  /* Dynamic values handled in JS override these based on design_area settings */
}

/* ─── Mobile / Tablet responsive bottom‑sheet UI ─────────────────────────── */

/* Mobile elements — hidden on desktop */
.tbox-ds__mobile-tabs,
.tbox-ds__mobile-backdrop,
.tbox-ds__mobile-toolbar,
.tbox-ds__mobile-styles-bar,
.tbox-ds__mobile-modal,
.tbox-ds__mobile-product-selector {
  display: none !important;
}

@media (max-width: 1100px) {
  /* ── Full-screen mobile app container ── */
  .tbox-ds {
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    height: auto !important; /* Allow normal scrolling of the page */
    position: relative !important;
    background: var(--tbox-bg) !important;
  }

  /* ── Layout: collapse the grid to preview‑only ── */
  .tbox-ds__grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: unset !important;
  }

  /* Hide tools panel completely on mobile since elements are in modals/toolbar */
  .tbox-ds__panel--tools {
    display: none !important;
  }

  .tbox-ds__panel--product {
    order: 2 !important;
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: none !important;
    height: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: var(--tbox-panel, #ffffff) !important;
    /* normal bottom padding now that bottom tab bar is removed */
    padding: 1.5rem 1.25rem 1.5rem !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Reorder and adjust spacing of product panel elements on mobile */
  .tbox-ds__panel--product .tbox-ds__title {
    display: none !important;
  }

  .tbox-ds__mobile-product-selector {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 1.25rem !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .tbox-ds__mobile-product-arrow {
    background: transparent !important;
    border: none !important;
    color: var(--tbox-text, #1a1818) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    transition: opacity 0.2s, transform 0.1s !important;
  }

  .tbox-ds__mobile-product-arrow:disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
  }

  .tbox-ds__mobile-product-arrow:active:not(:disabled) {
    transform: scale(0.85) !important;
  }

  .tbox-ds__mobile-product-list {
    display: flex !important;
    gap: 1.5rem !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 10px !important;
    scrollbar-width: none !important; /* Firefox */
  }

  .tbox-ds__mobile-product-list::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }

  .tbox-ds__mobile-product-item {
    background: transparent !important;
    border: none !important;
    font-family: "Fredoka", "Montserrat", system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--tbox-muted, #888) !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    transition: color 0.2s, font-weight 0.2s !important;
  }

  .tbox-ds__mobile-product-item.is-selected {
    color: var(--tbox-text, #1a1818) !important;
    font-weight: 700 !important;
  }

  .tbox-ds__colors {
    order: 2 !important;
    margin-bottom: 1.25rem !important;
  }

  .tbox-ds__links--below-title {
    order: 3 !important;
    margin-bottom: 0.5rem !important;
  }

  .tbox-ds__links--favorites {
    order: 4 !important;
    margin-bottom: 0.5rem !important;
  }

  .tbox-ds__design-status {
    order: 5 !important;
    margin-bottom: 0.5rem !important;
  }

  .tbox-ds__delivery {
    display: none !important;
  }

  .tbox-ds__links--choose-product {
    display: none !important;
  }

  /* ── Preview — natural height on mobile ── */
  .tbox-ds__preview,
  .tbox-ds__mockup-wrap,
  .tbox-ds__mockup-main,
  .tbox-ds__mockup-stage {
    outline: none !important;
    border: none !important;
    box-shadow: none;
  }

  .tbox-ds__preview {
    order: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible !important;
  }

  .tbox-ds__mockup-wrap {
    min-height: 0;
    flex: 1 1 auto;
    pointer-events: none;
  }

  .tbox-ds__mockup-wrap .tbox-ds__mockup-main,
  .tbox-ds__mockup-wrap .tbox-ds__mockup-stage,
  .tbox-ds__mockup-wrap .tbox-ds__mockup-zoom-container,
  .tbox-ds__mockup-wrap .tbox-ds__mockup-mobile-price,
  .tbox-ds__mockup-wrap .tbox-ds__print-size-info,
  .tbox-ds__mockup-wrap button,
  .tbox-ds__mockup-wrap input,
  .tbox-ds__mockup-wrap select,
  .tbox-ds__mockup-wrap textarea,
  .tbox-ds__mockup-wrap .tbox-ds__text-layer-node,
  .tbox-ds__mockup-wrap .tbox-ds__design-placeholder,
  .tbox-ds__mockup-wrap .tbox-ds__design-placeholder * {
    pointer-events: auto;
  }

  .tbox-ds__mockup-main {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Show the preview CTA row integrated in layout */
  .tbox-ds__preview-cta {
    display: block;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  /* ── Mobile backdrop ── */
  .tbox-ds__mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1099;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
  }

  .tbox-ds__mobile-backdrop:not([hidden]) {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Mobile tab bar ── */
  .tbox-ds__mobile-tabs {
    display: none !important;
  }

  .tbox-ds__mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: var(--tbox-muted, #888);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 6px 4px;
    transition: color 0.18s, background 0.18s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    border-radius: 0;
  }

  .tbox-ds__mobile-tab:active {
    background: var(--tbox-panel, #f8f7f5);
  }

  .tbox-ds__mobile-tab.is-active,
  .tbox-ds__mobile-tab[aria-selected="true"] {
    color: var(--tbox-brand-red, #d81f12);
  }

  .tbox-ds__mobile-tab--cta {
    color: var(--tbox-white, #fff);
    background: var(--tbox-gradient-cta);
    box-shadow: 0 2px 10px rgba(216, 31, 18, 0.22);
  }

  .tbox-ds__mobile-tab--cta:active {
    background: var(--tbox-brand-red, #d81f12);
    filter: brightness(0.92);
  }

  .tbox-ds__mobile-tab-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform 0.18s;
  }

  .tbox-ds__mobile-tab.is-active .tbox-ds__mobile-tab-icon {
    transform: scale(1.12);
  }

  .tbox-ds__mobile-tab-label {
    line-height: 1;
  }

  /* ── Adjust spacing inside open panels on mobile ── */
  .tbox-ds__panel--product .tbox-ds__title,
  .tbox-ds__panel--tools .tbox-ds__ai-box {
    margin-top: 0;
  }

  /* Keep details/picker/sizes overlays above the backdrop */
  .tbox-ds__details,
  .tbox-ds__picker,
  .tbox-ds__sizes {
    z-index: 1150;
  }

  /* Grid row/column resets (no longer using grid) */
  .tbox-ds__details,
  .tbox-ds__picker,
  .tbox-ds__sizes {
    grid-column: unset;
    grid-row: unset;
  }

  /* Prevent top-margin on the print-size-info text from being pushed off-screen */
  .tbox-ds__print-size-info {
    font-size: 11px;
  }

  /* Show preview price on mobile below the CTA button */
  .tbox-ds__preview > .tbox-ds__preview-price {
    display: block !important;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* Hide mockup price on mobile — shown in the bottom tab bar */
  .tbox-ds__mockup-mobile-price {
    display: none !important;
  }

  .tbox-ds__mockup-mobile-price:empty {
    display: none !important;
  }

  /* Mobile vertical toolbar — fixed above mockup, below modals */
  .tbox-ds__mobile-toolbar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    right: 12px;
    top: 42%;
    transform: translateY(-50%);
    gap: 10px;
    z-index: 1250;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .tbox-ds--sizes-open .tbox-ds__mobile-toolbar,
  .tbox-ds--details-open .tbox-ds__mobile-toolbar,
  .tbox-ds--picker-open .tbox-ds__mobile-toolbar {
    display: none !important;
  }

  .tbox-ds:not(.tbox-ds--has-design-image) [data-tbox-mobile-tool="text"],
  .tbox-ds:not(.tbox-ds--has-design-image) [data-tbox-mobile-tool="style"] {
    display: none !important;
  }

  .tbox-ds__mobile-rotate-btn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    pointer-events: none;
  }

  .tbox-ds__mobile-rotate-btn-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 2px;
  }

  .tbox-ds__mobile-tool-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--tbox-white, #fff);
    border: 1px solid var(--tbox-border, #e6e1de);
    color: var(--tbox-text, #1a1818);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  }

  .tbox-ds__mobile-tool-btn:active:not(:disabled) {
    transform: scale(0.92);
    background: var(--tbox-panel, #f8f7f5);
  }

  .tbox-ds__mobile-tool-btn.is-active {
    background: var(--tbox-brand-red, #d81f12);
    color: var(--tbox-white, #fff);
    border-color: var(--tbox-brand-red, #d81f12);
  }

  .tbox-ds__mobile-tool-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  .tbox-ds__mobile-tool-btn--new:disabled {
    background: var(--tbox-white, #fff);
    color: var(--tbox-muted, #5c5858);
    border-color: var(--tbox-border, #e6e1de);
  }

  /* Mobile Modal Styles */
  .tbox-ds__mobile-modal:not([hidden]) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 1300; /* Above tab bar and everything else */
    padding: 16px;
    box-sizing: border-box;
  }

  .tbox-ds__mobile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .tbox-ds__mobile-modal-content {
    position: relative;
    background: var(--tbox-white, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
    z-index: 1301;
    padding: 24px 20px 20px;
    box-sizing: border-box;
    animation: tbox-ds-modal-scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes tbox-ds-modal-scale {
    from {
      transform: scale(0.9);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .tbox-ds__mobile-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tbox-panel, #f8f7f5);
    border: none;
    font-size: 20px;
    font-weight: 500;
    color: var(--tbox-muted, #888);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 10;
  }

  .tbox-ds__mobile-modal-close:active {
    background: var(--tbox-border, #e6e1de);
  }

  .tbox-ds__mobile-modal-body {
    width: 100%;
    box-sizing: border-box;
  }

  /* When elements are inside the modal, make sure they look great */
  .tbox-ds__mobile-modal-body .tbox-ds__ai-box,
  .tbox-ds__mobile-modal-body .tbox-ds__text-layers-panel,
  .tbox-ds__mobile-modal-body .tbox-ds__text-layer-editor {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    width: 100%;
  }

  .tbox-ds__mobile-modal-body .tbox-ds__text-layers-panel {
    border-top: none;
    padding-top: 0;
  }

  .tbox-ds__mobile-modal-body .tbox-ds__label {
    margin-top: 0;
  }

  .tbox-ds__mobile-modal-body .tbox-ds__sidebar-actions--tools {
    display: none !important;
  }

  .tbox-ds__mobile-modal-body .tbox-ds__ai-source-panels,
  .tbox-ds__mobile-modal-body .tbox-ds__ai-source-panels[hidden] {
    display: block !important;
  }

  .tbox-ds__placeholder-actions {
    max-width: 148px;
    gap: 7px;
  }

  .tbox-ds__placeholder-btn {
    min-height: 32px;
    font-size: 0.68rem;
    padding: 0.4rem 0.55rem;
  }

  /* Hide options section and variants inside the modal to keep it clean */
  .tbox-ds__mobile-modal-body .tbox-ds__options-section,
  .tbox-ds__mobile-modal-body .tbox-ds__variants {
    display: none !important;
  }

  /* Mobile styles horizontal bar at the bottom of the preview */
  .tbox-ds__mobile-styles-bar:not([hidden]) {
    display: flex !important;
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px); /* Stuck to the bottom */
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid var(--tbox-border, #e6e1de);
    padding: 10px;
    box-sizing: border-box;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    animation: tbox-ds-slide-up 0.25s ease;
  }

  @keyframes tbox-ds-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .tbox-ds__mobile-styles-bar .tbox-ds__styles {
    margin: 0;
    width: 100%;
  }

  .tbox-ds__mobile-styles-bar .tbox-ds__label {
    display: none; /* Hide the label "Stil" */
  }

  .tbox-ds__mobile-styles-bar .tbox-ds__style-thumbs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 10px;
    margin: 0;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }

  .tbox-ds__mobile-styles-bar .tbox-ds__style-thumb {
    flex: 0 0 56px; /* Fixed width for each filter thumb */
    height: 56px;
    min-height: 56px;
    border-radius: 50%; /* Make them round like WhatsApp filters! */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid transparent;
  }

  .tbox-ds__mobile-styles-bar .tbox-ds__style-thumb.is-active {
    border-color: var(--tbox-brand-red, #d81f12);
  }

  /* Price inside the mobile tab button */
  .tbox-ds__mobile-tab-price {
    display: inline;
    font-weight: 700;
    margin-left: 4px;
    color: inherit;
    opacity: 1;
  }

  .tbox-ds__mobile-tab--cta .tbox-ds__mobile-tab-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }

  /* Hide original rotate button on the mockup stage on mobile */
  .tbox-ds__mockup-main .tbox-ds__rotate-view {
    display: none !important;
  }

  /* Mobile rotate button styling */
  .tbox-ds__mobile-rotate-btn {
    border-color: var(--tbox-border, #e6e1de) !important;
    color: var(--tbox-text, #1a1818) !important;
    background: var(--tbox-white, #fff) !important;
  }

  .tbox-ds__mobile-rotate-btn:active {
    background: var(--tbox-panel, #f8f7f5) !important;
  }

  /* Mobile text apply button styling */
  .tbox-ds__mobile-text-apply-wrap {
    display: block !important;
    margin-top: 1.25rem;
    width: 100%;
  }

  .tbox-ds__mobile-text-apply-btn {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: var(--tbox-brand-red, #d81f12) !important;
    color: var(--tbox-white, #fff) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(216, 31, 18, 0.2);
    transition: background-color 0.15s ease, transform 0.1s ease;
  }

  .tbox-ds__mobile-text-apply-btn:active {
    background: #b5170d !important;
    transform: scale(0.98);
  }
}

/* Hide mobile text apply button on desktop */
.tbox-ds__mobile-text-apply-wrap {
  display: none;
}

/* Design saved status badge styling */
.tbox-ds__design-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  align-self: flex-start;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tbox-ds__design-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e67e22; /* Default orange */
  display: inline-block;
  box-shadow: 0 0 4px currentColor;
}

.tbox-ds__design-status-text {
  font-family: "Fredoka", "Montserrat", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tbox-text, #1a1818);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* Light styling for the status wrapper based on saved status */
.tbox-ds__design-status.is-saved {
  background: rgba(46, 204, 113, 0.08) !important;
}
.tbox-ds__design-status.is-saved .tbox-ds__design-status-text {
  color: #27ae60 !important;
}

.tbox-ds__design-status.is-unsaved {
  background: rgba(230, 126, 34, 0.08) !important;
}
.tbox-ds__design-status.is-unsaved .tbox-ds__design-status-text {
  color: #d35400 !important;
}

/* ── Edit Design Modal ── */
.tbox-ds__edit-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tbox-ds__edit-modal[hidden] { display: none; }

.tbox-ds__edit-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tbox-ds__edit-modal-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  animation: tbox-edit-modal-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tbox-edit-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tbox-ds__edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.tbox-ds__edit-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
}

.tbox-ds__edit-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  color: #64748b;
  transition: background 0.15s, color 0.15s;
}
.tbox-ds__edit-modal-close:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.tbox-ds__edit-modal-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tbox-ds__edit-modal-preview {
  width: 100%;
  max-height: 180px;
  overflow: hidden;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tbox-ds__edit-modal-preview img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.tbox-ds__edit-modal-prompt {
  resize: vertical;
  min-height: 70px;
}

.tbox-ds__edit-modal-submit {
  width: 100%;
}

/* ── Edit History Strip ── */
.tbox-ds__edit-history {
  padding: 0 20px 16px;
}
.tbox-ds__edit-history[hidden] { display: none; }

.tbox-ds__edit-history-title {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.tbox-ds__edit-history-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.tbox-ds__edit-history-item {
  flex-shrink: 0;
  width: 56px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #f8fafc;
}
.tbox-ds__edit-history-item:hover {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.tbox-ds__edit-history-item img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.tbox-ds__edit-history-item-prompt {
  font-size: 9px;
  color: #64748b;
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
}

/* AI Prompt Header & Help Badge Button */
.tbox-ds__ai-ta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.tbox-ds__ai-ta-header .tbox-ds__label {
  margin-bottom: 0;
}

.tbox-ds__ai-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--tbox-orange, #d81f12);
  background: rgba(216, 31, 18, 0.06);
  border: 1px solid rgba(216, 31, 18, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.tbox-ds__ai-help-btn:hover {
  background: rgba(216, 31, 18, 0.12);
  border-color: var(--tbox-orange, #d81f12);
  transform: translateY(-1px);
}

.tbox-ds__sidebar-help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  min-height: 2.25rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tbox-orange, #d81f12);
  background: rgba(216, 31, 18, 0.05);
  border: 1px dashed rgba(216, 31, 18, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 0.4rem;
}

.tbox-ds__sidebar-help-btn:hover {
  background: rgba(216, 31, 18, 0.1);
  border-color: var(--tbox-orange, #d81f12);
  border-style: solid;
  transform: translateY(-1px);
}

.tbox-ds__ai-help-btn svg {
  flex-shrink: 0;
}

/* AI & Design Studio Help Modal */
.tbox-ds__modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.tbox-ds__modal-backdrop[hidden] {
  display: none !important;
}

.tbox-ds__modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.tbox-ds__modal-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tboxModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  font-family: 'Montserrat', 'Roboto', 'Inter', system-ui, -apple-system, sans-serif;
}

@keyframes tboxModalPop {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.tbox-ds__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  background: #fafafa;
}

.tbox-ds__modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tbox-ds__modal-icon {
  font-size: 1.2rem;
}

.tbox-ds__modal-title,
.tbox-ds__help-step-title {
  margin: 0;
  font-family: 'Montserrat', 'Roboto', 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.tbox-ds__modal-close {
  background: transparent;
  border: none;
  padding: 0.35rem;
  margin: -0.35rem;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.tbox-ds__modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.tbox-ds__modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.tbox-ds__help-step {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tbox-ds__help-step-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
}

.tbox-ds__help-step-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}

.tbox-ds__help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

@media (max-width: 480px) {
  .tbox-ds__help-grid {
    grid-template-columns: 1fr;
  }
}

.tbox-ds__help-card {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.tbox-ds__help-card-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.tbox-ds__help-card-content strong {
  display: block;
  font-size: 0.72rem;
  color: #0f172a;
  margin-bottom: 0.15rem;
}

.tbox-ds__help-card-content p {
  margin: 0;
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.35;
}

.tbox-ds__help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tbox-ds__help-list li {
  font-size: 0.72rem;
  color: #475569;
  line-height: 1.4;
  padding-left: 0.2rem;
}

.tbox-ds__help-list li strong {
  color: #0f172a;
}

.tbox-ds__help-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 8px;
  margin-top: 0.2rem;
}

.tbox-ds__help-tip-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.tbox-ds__help-tip-box p {
  margin: 0;
  font-size: 0.7rem;
  color: #92400e;
  line-height: 1.45;
}

/* Mobile adjustments for edit modal */
@media (max-width: 768px) {
  .tbox-ds__edit-modal-content {
    max-width: 100%;
    border-radius: 14px 14px 0 0;
    max-height: 85vh;
  }
  .tbox-ds__edit-modal {
    align-items: flex-end;
    padding: 0;
  }
}