/* ============================================================
   STAND SMITHS — Live Plaque Customization Preview
   Shows the actual product photo with the customer's typed
   beveled text overlaid live on the plaque, in Copperplate.
   Supports up to 4 lines, fixed font size regardless of length.
   ============================================================ */

.plaque-visual-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 340px;
  margin-top: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card2);
  border: 1px solid rgba(255,215,0,0.25);
  display: none;
}
.plaque-visual-preview.open {
  display: block;
  animation: fadeIn 0.3s ease;
}
.plaque-visual-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 4-line text overlay — fixed size, never shrinks per length ─── */
.plaque-visual-preview__text {
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  pointer-events: none;
  container-type: inline-size;
}
.plaque-line {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Copperplate', 'Copperplate Gothic Bold', 'Copperplate Gothic Light', serif;
  font-weight: 700;
  color: var(--plaque-text-color, #000);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(5.6cqw * var(--plaque-font-scale, 1));
  line-height: 0.85;
  white-space: nowrap;
  text-shadow: var(--plaque-text-shadow, 0 0.5px 0 rgba(255,255,255,0.35));
  transform: scaleX(1.12);
  transform-origin: center;
}

.plaque-visual-preview__label {
  font-size: 0.72rem;
  color: var(--silver-dim);
  margin-top: 8px;
  text-align: center;
}

/* ── 4-line text input stack ──────────────────────────────────── */
.plaque-lines-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plaque-line-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  width: 100%;
  transition: border-color var(--transition);
}
.plaque-line-input::placeholder { color: var(--silver-dim); }
.plaque-line-input:focus { border-color: var(--yellow); }