/* T-Shirt Customizer styles */
.cz-preview{ position: relative; width:520px; height:600px; margin: 0 auto 10px; background:#f0f2f5; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.08);} 
.cz-preview.cz-dual{ display:flex; width:auto; max-width:700px; height:auto; background:transparent; box-shadow:none; gap:16px; justify-content:center; align-items:flex-start; margin-left:auto; margin-right:auto; }
.cz-preview.cz-dual .cz-side{ position:relative; flex:0 0 320px; width:320px; height:440px; background:#f0f2f5; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.cz-caption{ position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:12px; color:#666; }
.cz-shirt{ display:none; }
#czCanvas, #czCanvasFront, #czCanvasBack{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.cz-hint{ font-size:12px; color:#666; margin-top:8px; }
.cz-actions .btn{ min-width:140px; margin-right:8px; }
.cz-price{ font-size:16px; margin:12px 0; }
.panel{ box-shadow:0 2px 8px rgba(0,0,0,.06); }

.cz-upload { background:#f7f9fc; border:1px solid #e6ecf5; border-radius:12px; padding:14px; }
.cz-upload .btn-upload { display:inline-flex; align-items:center; gap:10px; border:none; border-radius:10px; padding:10px 14px; background:linear-gradient(135deg,#4f46e5,#06b6d4); color:#fff; font-weight:600; box-shadow:0 6px 16px rgba(79,70,229,.25); cursor:pointer; transition:transform .08s ease, box-shadow .2s ease; }
.cz-upload .btn-upload:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(79,70,229,.32); }
.cz-upload .btn-upload i { font-size:16px; }
.cz-upload .cz-upload-meta { margin-top:10px; color:#6b7280; display:flex; align-items:center; gap:8px; font-size:13px; }
.cz-upload .cz-upload-meta .filename { font-weight:600; color:#374151; }

/* Ghost variant */
.cz-upload .btn-upload.ghost { background:transparent; color:#374151; border:1.5px solid #d1d5db; box-shadow:none; border-radius:999px; padding:10px 18px; }
/* Brand tint on hover (using #4f46e5 indigo) */
.cz-upload .btn-upload.ghost:hover { background:rgba(79,70,229,0.08); border-color:#4f46e5; box-shadow:none; }
.cz-upload .btn-upload.ghost:active { background:rgba(79,70,229,0.16); transform:translateY(0); }

/* Icon-only on small screens */
@media (max-width: 480px){
  .cz-upload .btn-upload span{ display:none; }
  .cz-upload .btn-upload{ padding:10px; border-radius:999px; }
  .cz-upload .btn-upload i{ font-size:18px; }
}

/* Ensure per-side text inputs are clearly visible */
#textInputFront,
#textInputBack{
  color:#222;
  background:#fff;
  border:1px solid #ccc;
  font-size:14px;
  z-index:1;
}

@media (max-width: 1200px){
  .cz-preview.cz-dual{ flex-wrap:wrap; max-width: 100%; }
}