/* WC Custom Upload — Lumina cream/teal aesthetic */
.wccu { box-sizing: border-box; font-family: 'Inter', -apple-system, sans-serif; }
.wccu *, .wccu *::before, .wccu *::after { box-sizing: border-box; }
.wccu__loading { padding: 60px; text-align: center; color: #7a7368; }
.wccu__layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; padding: 16px 0; }
@media (max-width: 960px) { .wccu__layout { grid-template-columns: 1fr; } }

.wccu__stage {
  position: relative; background: #efe7d8; border-radius: 16px;
  min-height: 380px; display: flex; align-items: center; justify-content: center;
  padding: 40px; border: 1px dashed rgba(12,107,134,0.35);
}
.wccu__stage.has-image { padding: 0; border-style: solid; border-color: transparent; background: #0f0f0f; }
.wccu__stage img { max-width: 100%; max-height: 520px; border-radius: 6px; display: block; }

.wccu__stage-empty { text-align: center; color: #5a5248; }
.wccu__stage-empty strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 600; margin-bottom: 8px; color: #0f0f0f; }

.wccu__panel { background: #fff; border-radius: 16px; padding: 24px; border: 1px solid rgba(0,0,0,0.06); }
.wccu__eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #0c6b86; font-weight: 600; margin: 0 0 18px; }

.wccu__group { margin-bottom: 22px; }
.wccu__group:last-child { margin-bottom: 0; }
.wccu__label { display: block; font-size: 12px; color: #5a5248; font-weight: 500; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.wccu__opt-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.wccu__opt-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.wccu__opt-row--stack > button { width: 100%; }

.wccu__opt {
  padding: 10px 8px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 13px; color: #0f0f0f; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.wccu__opt small { display: block; font-size: 10px; color: #7a7368; margin-top: 2px; letter-spacing: 0.5px; }
.wccu__opt:hover { border-color: #0c6b86; }
.wccu__opt.is-active { border-color: #0c6b86; background: rgba(12,107,134,0.06); }

.wccu__dropzone {
  border: 2px dashed rgba(12,107,134,0.35); border-radius: 10px;
  padding: 28px 14px; text-align: center; cursor: pointer;
  background: rgba(12,107,134,0.04); color: #5a5248; font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.wccu__dropzone:hover, .wccu__dropzone.is-drag { background: rgba(12,107,134,0.1); border-color: #0c6b86; }
.wccu__dropzone input { display: none; }
.wccu__dropzone small { display:block; color:#7a7368; margin-top:4px; font-size:11px; }

.wccu__summary {
  background: #0f0f0f; color: #cfc9bc; padding: 20px 18px; border-radius: 12px;
  font-size: 13px; line-height: 1.6; margin: 18px 0;
}
.wccu__summary-row { display: flex; justify-content: space-between; padding: 4px 0; }
.wccu__summary-row strong { color: #fff; }
.wccu__price {
  font-family: 'Playfair Display', Georgia, serif; font-size: 28px;
  color: #fff; font-weight: 700; margin: 10px 0 0;
}
.wccu__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 20px; border-radius: 999px; font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid #0f0f0f; background: #0f0f0f;
  color: #fff; font-family: inherit; width: 100%;
}
.wccu__btn:hover { background: #0c6b86; border-color: #0c6b86; }
.wccu__btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.wccu__note { font-size: 11px; color: #7a7368; margin-top: 8px; text-align: center; min-height: 16px; }
.wccu__progress { height: 4px; background: rgba(12,107,134,0.15); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.wccu__progress > span { display: block; height: 100%; background: #0c6b86; width: 0%; transition: width 0.2s; }

/* Layout split preview (3-panel / 5-panel) */
.wccu__split { position: absolute; inset: 0; display: flex; gap: 6px; padding: 12px; pointer-events: none; }
.wccu__split > span { flex: 1; background: rgba(245,240,232,0.1); border: 1px solid rgba(245,240,232,0.3); border-radius: 2px; }