/* ============================================================
   psm.css — Van Westendorp Price Sensitivity Meter (4 inputs)
   ============================================================ */

.psm-wrap {
  width: 100%; display: flex; flex-direction: column;
  gap: 12px; user-select: none;
}

.psm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.psm-label {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9);
  line-height: 1.3;
}

.psm-input-wrap {
  display: flex; align-items: center; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 8px; background: rgba(18,20,28,0.6);
  overflow: hidden; transition: border-color 0.13s ease;
}
.psm-input-wrap:focus-within { border-color: #00c9b1; }
.psm-currency {
  padding: 0 6px 0 10px;
  font-size: 14px; color: rgba(255,255,255,0.55);
}
.psm-input {
  width: 96px; padding: 8px 10px 8px 2px;
  border: none; outline: none; background: transparent;
  color: #fff; font-size: 15px; font-weight: 600;
  -moz-appearance: textfield;
}
.psm-input::-webkit-outer-spin-button,
.psm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.psm-msg {
  min-height: 0; font-size: 12px; color: #f39c12;
  opacity: 0; transition: opacity 0.15s ease; text-align: center;
}
.psm-msg.show { opacity: 1; }

@media (max-width: 600px) {
  .psm-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .psm-label { font-size: 13px; }
  .psm-input-wrap { align-self: flex-start; }
  .psm-input { width: 120px; }
}