/* v3.8.0 styles (inherits layout; buttons flex-wrap neatly on mobile) */
.retech-badge-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#fff; background:#78d64b; padding:32px; border-radius:16px; }
.retech-badge-wrap h1 { text-align:center; font-size:44px; margin:0 0 24px; font-weight:800; }
.retech-steps { max-width:900px; margin:0 auto 24px; }
.retech-steps h2 { font-size:36px; margin:0 0 8px; }
.retech-controls { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:flex-start; grid-template-areas:"right left"; }
.retech-left  { grid-area: left; }
.retech-right { grid-area: right; }
.retech-left .retech-copy { background:rgba(255,255,255,.08); padding:20px; border-radius:12px; }
.retech-copy h2 { margin:0 0 8px; font-size:32px; }
.retech-copy textarea { width:100%; border-radius:12px; border:none; padding:12px; color:#1f2937; }
.retech-actions { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.retech-btn { background:#fff; color:#1f2937; padding:10px 16px; border-radius:999px; font-weight:700; border:none; text-decoration:none; display:inline-block; cursor:pointer; min-height:44px; }
.retech-btn.alt { background:rgba(255,255,255,.16); color:#fff; }
.retech-url { margin-top:8px; font-weight:700; display:inline-block; }
.retech-right { background:rgba(255,255,255,.08); padding:20px; border-radius:12px; }
.retech-badge-preview { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; position:relative; }
#retech-canvas { width:100%; height:auto; background:#e5e5e5; border-radius:12px; display:block; touch-action: none; z-index:0; }
.retech-upload { position: relative; display:inline-block; order:0; }
.retech-upload-label { display:inline-block; padding:12px 14px; background:#fff; color:#1f2937; border-radius:999px; font-weight:700; }
#retech-upload-input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; z-index:2; }
.retech-fields, .retech-upload, .retech-actions, .retech-toggle { position:relative; z-index:1; }
.retech-fields { display:grid; grid-template-columns: 1fr; gap:8px; width:100%; }
.retech-fields input[type="text"] { width:100%; padding:6px 10px; border-radius:10px; border:none; font-size:16px; background:#fff; color:#111; }
.retech-color, .retech-zoom, .retech-export { display:flex; align-items:center; gap:8px; font-weight:700; width:100%; }
.retech-zoom input[type="range"]{ width: 70%; }
.retech-toggle { display:flex; gap:12px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.retech-hint { opacity:.85; }

/* Download button yellow style */
.retech-actions a[data-action="download"],
.retech-actions .retech-btn[data-action="download"] { background:#f0c711; color:#111; border:2px solid #b49300; }
.retech-actions a[data-action="download"]:hover,
.retech-actions .retech-btn[data-action="download"]:hover { background:#e0bb0f; }

/* Mobile stacking order: right then left */
@media (max-width: 900px) {
  .retech-controls { grid-template-columns: 1fr; grid-template-areas: "right" "left"; }
  .retech-badge-wrap { padding: 16px; border-radius: 12px; }
  .retech-badge-wrap h1 { font-size: 28px; }
  .retech-steps h2 { font-size: 22px; }
  .retech-left .retech-copy, .retech-right { padding: 14px; }
  .retech-copy textarea { min-height: 140px; }
  .retech-actions { flex-direction: column; gap: 10px; }
  .retech-actions .retech-btn, .retech-toggle .retech-btn { width: 100%; padding: 14px; }
  #retech-canvas { border-radius: 10px; }
}

/* Modal for iOS long-press saving */
.retech-modal[hidden]{ display:none !important; }
.retech-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px; }
.retech-modal__inner{ position:relative; background:#fff; color:#111; max-width:92vw; border-radius:12px; padding:16px; }
.retech-modal__close{ position:absolute; top:10px; right:14px; background:#111; color:#fff; border:none; border-radius:999px; width:32px; height:32px; font-weight:bold; cursor:pointer; }
.retech-modal__tip{ margin:0 0 10px; font-weight:700; }
.retech-modal__inner img{ max-width:86vw; height:auto; display:block; }

/* Info Box styling */
.retech-infobox{margin-top:12px;padding:12px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.retech-infobox img{max-width:100%;height:auto;border-radius:8px}

/* v4.2.1: match email field style to other inputs */
.retech-fields input[type="email"]{
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
  color: #111;
  box-sizing: border-box;
}

/* Subtle click/tap feedback */
.retech-btn{
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.retech-btn:active, .retech-btn.is-active {
  transform: translateY(1px) scale(0.995);
  filter: brightness(0.98);
  box-shadow: 0 1px 1px rgba(0,0,0,.08) inset;
}