/* T-Shirt Logo Uploader v5.1 */

.tlu-widget { font-family:'Segoe UI',system-ui,sans-serif !important; color:#fff !important; width:100%; box-sizing:border-box; }
.tlu-widget * { box-sizing:border-box; }
.tlu-widget *:focus, .tlu-widget *:focus-visible { outline:none !important; box-shadow:none !important; }

/* ── Layout ── */
.tlu-widget .tlu-layout { display:flex; gap:1.5rem; align-items:flex-start; }
.tlu-widget .tlu-shirt-col { flex:0 0 42%; display:flex; flex-direction:column; align-items:center; gap:.65rem; position:relative; }
.tlu-widget .tlu-controls-col { flex:1 1 0; display:flex; flex-direction:column; gap:.65rem; min-width:0; }

/* ── View Back button ── */
.tlu-widget .tlu-viewback-btn {
  align-self:flex-end;
  display:flex !important; align-items:center; gap:.35rem;
  background:transparent !important; border:1px solid #3a3a3a !important;
  color:#777 !important; font-size:.65rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.32rem .7rem; cursor:pointer; font-family:inherit;
  transition:border-color .15s, color .15s;
  border-radius:0 !important; box-shadow:none !important;
}
.tlu-widget .tlu-viewback-btn:hover { border-color:#F0BD29 !important; color:#F0BD29 !important; }

/* ── Shirt wrap ── */
.tlu-widget .tlu-shirt-wrap {
  position:relative; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.tlu-widget .tlu-shirt-svg { width:100%; max-width:340px; height:auto; display:block; }
.tlu-widget #tlu-path-front,
.tlu-widget #tlu-path-back { transition:fill .3s ease; }

/* ── Logo overlays ── */
.tlu-widget .tlu-overlay {
  position:absolute; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  transition:top .2s, left .2s, width .2s, height .2s;
}
.tlu-widget .tlu-overlay img {
  max-width:100%; max-height:100%; object-fit:contain;
  opacity:0; transition:opacity .3s, transform .25s; transform:scale(.85);
}
.tlu-widget .tlu-overlay.has-logo img { opacity:1; transform:scale(1); }

/* Front positions — left-chest default (small) */
.tlu-widget .tlu-overlay#tlu-overlay-front { top:27%; left:30%; width:18%; height:14%; }

/* Front: left-chest sizes */
.tlu-widget[data-pos="left-chest"][data-lsize="small"]  .tlu-overlay#tlu-overlay-front { top:27%; left:32%; width:14%; height:11%; }
.tlu-widget[data-pos="left-chest"][data-lsize="medium"] .tlu-overlay#tlu-overlay-front { top:25%; left:33%; width:20%; height:16%; }
.tlu-widget[data-pos="left-chest"][data-lsize="large"]  .tlu-overlay#tlu-overlay-front { top:23%; left:34%; width:26%; height:20%; }

/* Front: right-chest sizes */
.tlu-widget[data-pos="right-chest"][data-lsize="small"]  .tlu-overlay#tlu-overlay-front { top:27%; left:54%; width:14%; height:11%; }
.tlu-widget[data-pos="right-chest"][data-lsize="medium"] .tlu-overlay#tlu-overlay-front { top:25%; left:47%; width:20%; height:16%; }
.tlu-widget[data-pos="right-chest"][data-lsize="large"]  .tlu-overlay#tlu-overlay-front { top:23%; left:40%; width:26%; height:20%; }

/* Front: centre sizes */
.tlu-widget[data-pos="centre"][data-lsize="small"]  .tlu-overlay#tlu-overlay-front { top:32%; left:33%; width:34%; height:24%; }
.tlu-widget[data-pos="centre"][data-lsize="medium"] .tlu-overlay#tlu-overlay-front { top:29%; left:28%; width:44%; height:30%; }
.tlu-widget[data-pos="centre"][data-lsize="large"]  .tlu-overlay#tlu-overlay-front { top:26%; left:24%; width:52%; height:36%; }

/* Front: full-front sizes */
.tlu-widget[data-pos="full-front"][data-lsize="small"]  .tlu-overlay#tlu-overlay-front { top:26%; left:24%; width:52%; height:38%; }
.tlu-widget[data-pos="full-front"][data-lsize="medium"] .tlu-overlay#tlu-overlay-front { top:23%; left:22%; width:56%; height:44%; }
.tlu-widget[data-pos="full-front"][data-lsize="large"]  .tlu-overlay#tlu-overlay-front { top:21%; left:21%; width:58%; height:50%; }

/* Front: none */
.tlu-widget[data-pos="none-front"] .tlu-overlay#tlu-overlay-front { opacity:0; }

/* Back: centre sizes */
.tlu-widget .tlu-overlay#tlu-overlay-back                                              { top:28%; left:28%; width:44%; height:30%; }
.tlu-widget[data-pos-back="centre-back"][data-lsize="small"]  .tlu-overlay#tlu-overlay-back { top:31%; left:31%; width:38%; height:26%; }
.tlu-widget[data-pos-back="centre-back"][data-lsize="medium"] .tlu-overlay#tlu-overlay-back { top:28%; left:28%; width:44%; height:30%; }
.tlu-widget[data-pos-back="centre-back"][data-lsize="large"]  .tlu-overlay#tlu-overlay-back { top:25%; left:25%; width:50%; height:36%; }

/* Back: full-back sizes */
.tlu-widget[data-pos-back="full-back"][data-lsize="small"]  .tlu-overlay#tlu-overlay-back { top:24%; left:24%; width:52%; height:40%; }
.tlu-widget[data-pos-back="full-back"][data-lsize="medium"] .tlu-overlay#tlu-overlay-back { top:22%; left:22%; width:56%; height:46%; }
.tlu-widget[data-pos-back="full-back"][data-lsize="large"]  .tlu-overlay#tlu-overlay-back { top:20%; left:21%; width:58%; height:52%; }

/* Back: none */
.tlu-widget[data-pos-back="none-back"] .tlu-overlay#tlu-overlay-back { opacity:0; }

/* Placeholder */
.tlu-widget .tlu-placeholder {
  position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  color:#444; font-size:.62rem; text-align:center; pointer-events:none;
  transition:opacity .25s;
}
.tlu-widget .tlu-placeholder.hidden { opacity:0; }

/* ── Disclaimer ── */
.tlu-widget .tlu-disclaimer {
  font-size:.63rem; color:#555; text-align:center; line-height:1.3;
  border:1px solid #2a2a2a; padding:.4rem .65rem; background:#191919; width:100%;
}

/* ── Info box ── */
.tlu-widget .tlu-infobox {
  display:flex; align-items:flex-start; gap:.5rem;
  border:1px solid #F0BD29; padding:.65rem .8rem;
  background:#191919; width:100%; font-size:.68rem; color:#888; line-height:1.45;
}
.tlu-widget .tlu-infobox strong { color:#F0BD29; display:block; margin-bottom:.1rem; font-size:.69rem; }

/* ── Blocks ── */
.tlu-widget .tlu-block { background:#1e1e1e; border:1px solid #2a2a2a; padding:.8rem .95rem; }
.tlu-widget .tlu-block-title {
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; padding-bottom:.4rem; border-bottom:2px solid #F0BD29;
  display:inline-block; margin-bottom:.6rem;
}
.tlu-widget .tlu-block-label { font-size:.64rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#888; margin-bottom:.5rem; }
.tlu-widget .tlu-hint { font-size:.68rem; color:#666; margin:-.3rem 0 .55rem; }
.tlu-widget .tlu-req { color:#F0BD29; }

/* Drop zone */
.tlu-widget .tlu-dropzone {
  border:1px dashed #333 !important; padding:.9rem; text-align:center; cursor:pointer;
  background:#191919 !important; font-size:.72rem; color:#666;
  transition:border-color .2s, background .2s; border-radius:0 !important;
}
.tlu-widget .tlu-dropzone:hover, .tlu-widget .tlu-dropzone.over { border-color:#F0BD29 !important; background:#1a1700 !important; }
.tlu-widget .tlu-link { color:#F0BD29 !important; font-weight:700; }

/* File bar */
.tlu-widget .tlu-filebar {
  display:flex; align-items:center; justify-content:space-between;
  background:#1a1a1a; border:1px solid #2a2a2a; border-top:none;
  padding:.4rem .7rem; font-size:.72rem; color:#ccc; gap:.5rem;
}
.tlu-widget .tlu-file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tlu-widget .tlu-remove-btn { color:#F0BD29 !important; background:none !important; border:none !important; cursor:pointer !important; font-size:.7rem !important; font-weight:700 !important; padding:0 !important; font-family:inherit !important; flex-shrink:0; }
.tlu-widget .tlu-remove-btn:hover { text-decoration:underline !important; }
.tlu-widget .tlu-status { font-size:.7rem; margin-top:.35rem; min-height:.9em; font-weight:600; }
.tlu-widget .tlu-status.ok   { color:#4ade80; }
.tlu-widget .tlu-status.err  { color:#f87171; }
.tlu-widget .tlu-status.wait { color:#888; }

/* Swatches */
.tlu-widget .tlu-swatches { display:flex; flex-wrap:wrap; gap:.4rem; }
.tlu-widget .tlu-swatch-item { display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.tlu-widget .tlu-swatch-item input { display:none; }
.tlu-widget .tlu-swatch { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:2px solid #333; cursor:pointer; transition:border-color .15s, transform .1s; border-radius:0 !important; }
.tlu-widget .tlu-swatch:hover { transform:scale(1.1); }
.tlu-widget .tlu-swatch-item input:checked + .tlu-swatch { border-color:#F0BD29 !important; }
.tlu-widget .tlu-tick { display:none; width:11px; height:11px; }
.tlu-widget .tlu-swatch-item input:checked + .tlu-swatch .tlu-tick { display:block; }
.tlu-widget .tlu-swatch-label { font-size:.48rem; font-weight:700; text-transform:uppercase; color:#555; text-align:center; letter-spacing:.04em; line-height:1; }
.tlu-widget .tlu-swatch-item input:checked ~ .tlu-swatch-label { color:#F0BD29 !important; }

/* Sizes */
.tlu-widget .tlu-sizes { display:flex; flex-wrap:wrap; gap:.3rem; }
.tlu-widget .tlu-size-opt input { display:none; }
.tlu-widget .tlu-size-opt span { display:inline-block; padding:.32rem .6rem; border:1px solid #333; font-size:.72rem; font-weight:700; color:#666; cursor:pointer; transition:all .15s; border-radius:0 !important; }
.tlu-widget .tlu-size-opt input:checked + span { color:#F0BD29 !important; border-color:#F0BD29 !important; }
.tlu-widget .tlu-size-opt span:hover { border-color:#F0BD29 !important; color:#F0BD29 !important; }

/* Qty */
.tlu-widget .tlu-qty { display:inline-flex; align-items:center; border:1px solid #333; }
.tlu-widget .tlu-qty-btn { width:38px; height:38px; background:#222 !important; border:none !important; color:#fff !important; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; font-family:inherit !important; border-radius:0 !important; }
.tlu-widget .tlu-qty-btn:hover { background:#F0BD29 !important; color:#111 !important; }
.tlu-widget .tlu-qty-input { width:46px; height:38px; text-align:center; border:none !important; border-left:1px solid #333 !important; border-right:1px solid #333 !important; background:#191919 !important; color:#fff !important; font-size:.88rem; font-weight:700; font-family:inherit !important; -moz-appearance:textfield; border-radius:0 !important; }
.tlu-widget .tlu-qty-input::-webkit-inner-spin-button,
.tlu-widget .tlu-qty-input::-webkit-outer-spin-button { -webkit-appearance:none; }

/* Placement */
.tlu-widget .tlu-placement { display:flex; flex-direction:column; gap:.45rem; }
.tlu-widget .tlu-placement-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tlu-widget .tlu-plbl { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#666; flex:0 0 38px; }
.tlu-widget .tlu-pills { display:flex; flex-wrap:wrap; gap:.25rem; }
.tlu-widget .tlu-pill input { display:none; }
.tlu-widget .tlu-pill span { display:inline-block; padding:.27rem .58rem; border:1px solid #333; font-size:.67rem; font-weight:600; color:#666; cursor:pointer; transition:all .15s; border-radius:0 !important; }
.tlu-widget .tlu-pill input:checked + span { background:#F0BD29 !important; color:#111 !important; border-color:#F0BD29 !important; }
.tlu-widget .tlu-pill span:hover { border-color:#F0BD29 !important; color:#F0BD29 !important; }

.tlu-widget .tlu-validation { font-size:.72rem; color:#f87171; font-weight:600; margin-top:.4rem; }

@media (max-width:620px) {
  .tlu-widget .tlu-layout { flex-direction:column; }
  .tlu-widget .tlu-shirt-col { width:100%; align-items:center; }
}