/* ==========================================================================
   EzC Copos — Painel de personalização
   Modal no desktop, tela cheia no mobile. Ver assets/js/personalize.js
   para o comportamento (upload, mover, redimensionar).
   ========================================================================== */

.ezc-personalize-trigger { margin-top: 4px; }
.ezc-personalize-note {
  font-size: 12px;
  color: var(--ezc-text-soft);
  margin-top: 6px;
}

.ezc-personalize-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.ezc-personalize-backdrop.is-open { display: flex; }

.ezc-personalize-modal {
  background: var(--ezc-surface);
  border-radius: var(--ezc-radius-lg);
  display: flex;
  max-width: 940px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

/* Área do copo (esquerda no desktop, topo no mobile) */
.ezc-personalize-canvas {
  position: relative;
  width: 480px;
  height: 480px;
  flex-shrink: 0;
  background: var(--ezc-field-bg);
  border-top-left-radius: var(--ezc-radius-lg);
  border-bottom-left-radius: var(--ezc-radius-lg);
  overflow: hidden;
  touch-action: none;
}
.ezc-personalize-canvas__mockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.ezc-personalize-canvas__print-area {
  position: absolute;
  border: 1px dashed var(--ezc-border-strong);
  pointer-events: none;
}
.ezc-personalize-canvas__upload {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--ezc-text-soft);
  font-size: 13px;
  cursor: pointer;
}
.ezc-personalize-canvas__art {
  position: absolute;
  cursor: grab;
  touch-action: none;
  border: 1.5px solid var(--ezc-accent);
  background-size: cover;
  background-position: center;
}
.ezc-personalize-canvas__art:active { cursor: grabbing; }
.ezc-personalize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: var(--ezc-surface);
  border: 1.5px solid var(--ezc-accent);
  touch-action: none;
}
.ezc-personalize-handle--nw { top: 0; left: 0; cursor: nwse-resize; }
.ezc-personalize-handle--ne { top: 0; left: 100%; cursor: nesw-resize; }
.ezc-personalize-handle--sw { top: 100%; left: 0; cursor: nesw-resize; }
.ezc-personalize-handle--se { top: 100%; left: 100%; cursor: nwse-resize; }

/* Coluna de controles (direita no desktop, sheet inferior no mobile) */
.ezc-personalize-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ezc-space-md);
  padding: var(--ezc-space-xl);
  overflow-y: auto;
}
.ezc-personalize-controls h2 { font-size: 20px; font-weight: 600; margin: 0; color: var(--ezc-text); }
.ezc-personalize-controls p { font-size: 13px; color: var(--ezc-text-muted); margin: 0; }
.ezc-personalize-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.ezc-personalize-warning { display: none; align-items: center; gap: 8px; }
.ezc-personalize-warning.is-visible { display: flex; }
.ezc-personalize-warning p { font-size: 12px; }
.ezc-personalize-spacer { flex: 1; }
.ezc-personalize-actions { display: flex; flex-direction: column; gap: 10px; }
.ezc-personalize-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--ezc-text);
  cursor: pointer;
}
.ezc-personalize-close:hover { background: var(--ezc-field-bg); }

/* Mobile: tela cheia, sheet inferior fixo */
@media (max-width: 720px) {
  .ezc-personalize-backdrop { padding: 0; }
  .ezc-personalize-modal {
    flex-direction: column;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .ezc-personalize-canvas {
    width: 100%;
    height: 42vh;
    border-radius: 0;
  }
  .ezc-personalize-controls { padding: var(--ezc-space-lg); }
  .ezc-personalize-toolbar { justify-content: space-between; }
  .ezc-personalize-toolbar .ezc-btn { flex: 1 1 30%; }
}