/* UltimateCase Designer Pro — Frontend */
:root {
  --ucd-bg:      #0f172a;
  --ucd-card:    #1e293b;
  --ucd-card2:   #273548;
  --ucd-border:  #334155;
  --ucd-bl:      #475569;
  --ucd-text:    #f1f5f9;
  --ucd-muted:   #94a3b8;
  --ucd-gold:    #f59e0b;
  --ucd-gold2:   #fbbf24;
  --ucd-green:   #22c55e;
  --ucd-red:     #ef4444;
  --ucd-r:       12px;
  --ucd-font:    'Segoe UI',system-ui,-apple-system,sans-serif;
}

.ucd-app { font-family: var(--ucd-font); background: var(--ucd-bg); border-radius: 18px; padding: 32px; color: var(--ucd-text); max-width: 1080px; margin: 0 auto; box-shadow: 0 24px 64px rgba(0,0,0,.5); }

/* ── Stepbar ─────────────────────────────────────────────────────────────── */
.ucd-stepbar { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; gap: 0; }
.ucd-step { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .3; transition: opacity .3s; min-width: 80px; }
.ucd-step.active,.ucd-step.done { opacity: 1; }
.ucd-snum { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ucd-bl); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--ucd-card); transition: all .3s; }
.ucd-step.active .ucd-snum { background: var(--ucd-gold); border-color: var(--ucd-gold); color: #0f172a; box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
.ucd-step.done .ucd-snum { background: var(--ucd-green); border-color: var(--ucd-green); color: #fff; font-size: 0; }
.ucd-step.done .ucd-snum::after { content: '✓'; font-size: 14px; }
.ucd-slabel { font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--ucd-muted); white-space: nowrap; }
.ucd-step.active .ucd-slabel { color: var(--ucd-gold); }
.ucd-step.done  .ucd-slabel { color: var(--ucd-green); }
.ucd-stepbar-line { flex: 1; height: 2px; background: var(--ucd-border); max-width: 72px; margin-bottom: 22px; }

/* ── Main layout ─────────────────────────────────────────────────────────── */
.ucd-main { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
@media(max-width:840px){ .ucd-main { grid-template-columns: 1fr; } }

/* ── Controls panel ──────────────────────────────────────────────────────── */
.ucd-controls { background: var(--ucd-card); border: 1px solid var(--ucd-border); border-radius: var(--ucd-r); padding: 26px; }
.ucd-ptitle { margin: 0 0 18px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }

/* ── Search ──────────────────────────────────────────────────────────────── */
.ucd-searchbox-wrap { position: relative; margin-bottom: 6px; }
.ucd-sico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; color: var(--ucd-muted); pointer-events: none; }
.ucd-model-q { width: 100%; padding: 10px 34px 10px 36px; background: var(--ucd-card2); border: 1.5px solid var(--ucd-border); border-radius: 8px; color: var(--ucd-text); font-size: 13.5px; font-family: var(--ucd-font); outline: none; transition: border-color .2s, box-shadow .2s; box-sizing: border-box; }
.ucd-model-q::placeholder { color: var(--ucd-muted); }
.ucd-model-q:focus { border-color: var(--ucd-gold); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.ucd-q-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--ucd-muted); cursor: pointer; font-size: 12px; padding: 4px; line-height: 1; }
.ucd-q-clear:hover { color: var(--ucd-text); }

/* ── Dropdown ────────────────────────────────────────────────────────────── */
.ucd-dropdown { display: none; max-height: 240px; overflow-y: auto; background: var(--ucd-card2); border: 1.5px solid var(--ucd-border); border-top: none; border-radius: 0 0 8px 8px; margin-bottom: 14px; }
.ucd-dropdown.open { display: block; }
.ucd-dropdown::-webkit-scrollbar { width: 4px; }
.ucd-dropdown::-webkit-scrollbar-thumb { background: var(--ucd-bl); border-radius: 4px; }
.ucd-dd-group-label { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--ucd-muted); padding: 8px 13px 3px; }
.ucd-dd-item { padding: 9px 13px; font-size: 13.5px; cursor: pointer; color: var(--ucd-text); transition: background .12s; }
.ucd-dd-item:hover,.ucd-dd-item.hl { background: rgba(245,158,11,.12); color: var(--ucd-gold); }
.ucd-dd-item.sel { color: var(--ucd-green); }
.ucd-dd-empty { padding: 18px 13px; font-size: 13px; color: var(--ucd-muted); text-align: center; }

/* ── Selected chip ───────────────────────────────────────────────────────── */
.ucd-selected-chip { display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ucd-green); margin-bottom: 16px; }
.ucd-chip-change { background: none; border: none; color: var(--ucd-gold); font-size: 12px; cursor: pointer; text-decoration: underline; margin-left: auto; padding: 0; font-family: var(--ucd-font); }

/* ── Drop zone ───────────────────────────────────────────────────────────── */
.ucd-dz { border: 2px dashed var(--ucd-bl); border-radius: var(--ucd-r); padding: 32px 20px; text-align: center; cursor: pointer; transition: all .22s; margin-bottom: 16px; position: relative; overflow: hidden; }
.ucd-dz:hover,.ucd-dz.dragover { border-color: var(--ucd-gold); background: rgba(245,158,11,.06); }
.ucd-dz-idle p { margin: 8px 0; font-size: 13px; color: var(--ucd-muted); }
.ucd-dz-uploading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ucd-card2); gap: 12px; font-size: 13px; color: var(--ucd-muted); }

/* ── Crop section ────────────────────────────────────────────────────────── */
.ucd-crop-section { background: var(--ucd-card2); border: 1px solid var(--ucd-border); border-radius: var(--ucd-r); padding: 14px; margin-bottom: 16px; }
.ucd-crop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ucd-crop-title { font-size: 12px; font-weight: 600; color: var(--ucd-muted); }
.ucd-crop-btns { display: flex; gap: 6px; }
.ucd-ico-btn { background: var(--ucd-card); border: 1px solid var(--ucd-border); color: var(--ucd-muted); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; line-height: 1; transition: all .15s; }
.ucd-ico-btn:hover { background: var(--ucd-bl); color: var(--ucd-text); }
.ucd-crop-container { height: 210px; overflow: hidden; border-radius: 6px; background: #000; margin-bottom: 10px; position: relative; }
.ucd-crop-container img { display: block; max-width: 100%; }

/* Safe zone overlay (shown inside crop) */
.ucd-safe-overlay { position: absolute; inset: 0; pointer-events: none; }
.ucd-safe-inner { position: absolute; border: 2px solid rgba(34,197,94,.6); background: rgba(34,197,94,.04); }
.ucd-safe-label { position: absolute; top: 3px; left: 6px; font-size: 9px; font-weight: 700; color: rgba(34,197,94,.8); letter-spacing: .5px; text-transform: uppercase; }
.ucd-bleed-ring { position: absolute; border: 2px dashed rgba(245,158,11,.5); pointer-events: none; }

.ucd-crop-foot { display: flex; align-items: center; gap: 12px; }

/* ── Hint ────────────────────────────────────────────────────────────────── */
.ucd-hint { font-size: 11.5px; color: var(--ucd-muted); margin: 0; }

/* ── Summary ─────────────────────────────────────────────────────────────── */
.ucd-summary-box { background: var(--ucd-card2); border: 1px solid var(--ucd-border); border-radius: var(--ucd-r); margin-bottom: 16px; }
.ucd-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--ucd-border); }
.ucd-summary-row:last-child { border-bottom: none; }
.ucd-summary-row span { color: var(--ucd-muted); }
.ucd-summary-row strong { font-weight: 600; }
.ucd-quality-ok  { color: var(--ucd-green); }
.ucd-quality-med { color: var(--ucd-gold); }
.ucd-quality-bad { color: var(--ucd-red); }

.ucd-guarantee-strip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); border-radius: 8px; font-size: 12px; color: var(--ucd-green); font-weight: 600; margin-bottom: 18px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ucd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; font-family: var(--ucd-font); transition: all .2s; }
.ucd-btn:disabled { opacity: .38; cursor: not-allowed; }
.ucd-btn-gold { background: var(--ucd-gold); color: #0f172a; width: 100%; margin-top: 10px; }
.ucd-btn-gold:not(:disabled):hover { background: var(--ucd-gold2); box-shadow: 0 4px 20px rgba(245,158,11,.45); transform: translateY(-1px); }
.ucd-btn-ghost { background: transparent; border: 1px solid var(--ucd-border); color: var(--ucd-muted); padding: 9px 16px; font-size: 12.5px; }
.ucd-btn-ghost:hover { color: var(--ucd-text); border-color: var(--ucd-bl); }
.ucd-btn-outline { background: transparent; border: 1px solid var(--ucd-bl); color: var(--ucd-text); }
.ucd-btn-outline:hover { background: var(--ucd-card); }
.ucd-btn-cart { background: linear-gradient(135deg, var(--ucd-gold) 0%, #f97316 100%); color: #0f172a; width: 100%; font-size: 16px; padding: 14px; box-shadow: 0 4px 24px rgba(245,158,11,.3); }
.ucd-btn-cart:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245,158,11,.45); }
.ucd-btn-sm { padding: 7px 14px; font-size: 12.5px; }
.ucd-link-btn { background: none; border: none; color: var(--ucd-gold); cursor: pointer; text-decoration: underline; font-family: var(--ucd-font); font-size: 13px; }

.ucd-panel-foot { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

/* ── Cart message ────────────────────────────────────────────────────────── */
.ucd-cart-msg { padding: 12px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-align: center; margin-top: 12px; }
.ucd-cart-msg.ok { background: rgba(34,197,94,.12); color: var(--ucd-green); border: 1px solid rgba(34,197,94,.3); }
.ucd-cart-msg.err { background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.3); }

/* ── Preview column ──────────────────────────────────────────────────────── */
.ucd-preview-col { position: sticky; top: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
@media(max-width:840px) { .ucd-preview-col { position: static; } }
.ucd-preview-badge { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); color: var(--ucd-gold); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 14px; border-radius: 20px; }
/* mockup-box: no background/border — let the PNG float cleanly on dark bg */
.ucd-mockup-box { width: 100%; max-width: 320px; min-height: 480px; background: transparent; border: none; border-radius: var(--ucd-r); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; }
.ucd-preview-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ucd-muted); font-size: 13px; text-align: center; padding: 32px 20px; line-height: 1.7; background: var(--ucd-card); border: 1px solid var(--ucd-border); border-radius: var(--ucd-r); width: 100%; box-sizing: border-box; }
/* stack: relative container, same size as the mockup image */
.ucd-stack { position: relative; display: inline-flex; align-items: center; justify-content: center; }
/* canvas sits exactly over the phone image, behind the phone frame */
.ucd-canvas { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
/* mockup PNG on top — drop-shadow only, NO background */
.ucd-mockup-overlay { position: relative; z-index: 2; max-height: 480px; max-width: 300px; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 12px 32px rgba(0,0,0,.6)); }
.ucd-mockup-loader { position: absolute; inset: 0; background: rgba(15,23,42,.7); border-radius: var(--ucd-r); display: flex; align-items: center; justify-content: center; z-index: 10; }

/* ── Quality bar ─────────────────────────────────────────────────────────── */
.ucd-quality-bar { width: 100%; max-width: 300px; }
.ucd-quality-inner { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--ucd-card); border: 1px solid var(--ucd-border); border-radius: 8px; font-size: 12px; font-weight: 600; }

/* ── Trust badges ────────────────────────────────────────────────────────── */
.ucd-badges { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 300px; }
.ucd-badge { font-size: 10.5px; font-weight: 600; color: var(--ucd-muted); background: var(--ucd-card); border: 1px solid var(--ucd-border); padding: 4px 10px; border-radius: 20px; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.ucd-spin { width: 22px; height: 22px; border: 2.5px solid rgba(255,255,255,.12); border-top-color: var(--ucd-gold); border-radius: 50%; animation: ucdspin .7s linear infinite; }
.ucd-spin-lg { width: 38px; height: 38px; border-width: 3px; }
@keyframes ucdspin { to { transform: rotate(360deg); } }