/* หน้าประเมินราคาจากไฟล์ 3D — ใช้ token เดียวกับทั้งเว็บ ธีมมืด/สว่างตามมาเอง */

.up { display: flex; flex-direction: column; gap: var(--space-md); padding-block-end: var(--space-xl); }

.up__drop {
  display: grid; justify-items: center; gap: var(--space-3xs);
  padding: var(--space-lg) var(--space-md);
  border: 2px dashed var(--color-rule-strong);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  text-align: center; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.up__drop:hover, .up__drop.is-over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.up__drop:has(.up__file:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.up__file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.up__icon { width: 2rem; height: 2rem; fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.up__title { font-weight: 600; color: var(--color-ink); }
.up__sub { font-size: var(--text-sm); color: var(--color-ink-3); }
.up.is-ready .up__drop { padding-block: var(--space-sm); }
.up.is-ready .up__icon { display: none; }

.up__msg {
  margin: 0; padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm); font-size: var(--text-sm);
  background: var(--color-paper-2); color: var(--color-ink-2);
}
.up__msg--error { background: var(--color-alert-soft); color: var(--color-alert); }

.up__work { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.up__view { min-width: 0; }
@media (min-width: 52rem) {
  .up__work { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .up__view { position: sticky; top: var(--space-md); }
}

.up__stage {
  aspect-ratio: 4 / 3; width: 100%;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  position: relative; overflow: hidden; touch-action: none; cursor: grab;
}
.up__stage:active { cursor: grabbing; }
.up__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.up__stage-note { display: grid; place-items: center; height: 100%; padding: var(--space-sm); text-align: center; font-size: var(--text-sm); color: var(--color-ink-3); }
.up__facts { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.up__unit { margin-block-start: var(--space-xs); }
.up__select {
  width: 100%; padding: var(--space-2xs); margin-block-start: var(--space-3xs);
  border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-ink); font: inherit;
}

.up__panel { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
#up-opts { display: flex; flex-direction: column; gap: var(--space-sm); }
.up__qty { width: 6rem; }

.up__result {
  padding: var(--space-sm); border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  background: var(--color-paper-2);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.up__label { font-size: var(--text-sm); color: var(--color-ink-3); }
.up__price { font-size: var(--text-display-s); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.up__stats { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-sm); margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.up__notes { margin: 0; padding-inline-start: 1.1em; font-size: var(--text-sm); color: var(--color-ink-2); display: flex; flex-direction: column; gap: var(--space-3xs); }
.up__notes .is-warn { color: var(--color-warn-ink); }
.up__swatch { display: inline-block; width: .9em; height: .9em; margin-inline-end: .4em; border-radius: 50%; border: 1px solid var(--color-rule-strong); vertical-align: -.1em; }

/* ── ส่งไฟล์ให้ร้านตรวจ (ฟอร์มซ่อนจนกว่าตั้ง turnstileSiteKey) ── */
.upsend__form { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-xs); }
.upsend__input {
  font: inherit; font-size: var(--text-base); letter-spacing: normal; text-transform: none;
  color: var(--color-ink); background: var(--color-paper-2);
  border: var(--rule-strong) solid transparent; border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm); width: 100%; min-width: 0; min-height: var(--tap);
}
.upsend__input:focus-visible { border-color: var(--color-accent); background: var(--color-paper); outline: none; }
textarea.upsend__input { resize: vertical; }
.upsend__consent { display: flex; gap: var(--space-2xs); align-items: flex-start; font-size: var(--text-sm); }
.upsend__consent input { margin-top: .25em; flex: none; }
.upsend__captcha { min-height: 0; }

.up__slot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .35rem 0; font-size: .9rem; }
.up__slot select { width: auto; min-width: 8rem; }