/* ══════════════════════════════════════════════════════════════
   SNAP — "LIHAT JADINYA" panel under the estimator result (27 Okt 2026)
   Markup comes from js/estimasi-render.js. Slider styles: css/before-after.css.
   ══════════════════════════════════════════════════════════════ */

.est-render {
  margin-top: 32px;
  padding: 28px 28px 24px;
  background: var(--est-accent-soft, #FBF1EA);
  border: 1px solid rgba(166, 90, 57, 0.18);
  border-radius: 4px;
}
.est-render:empty { display: none; }

.er-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--est-accent, #A65A39);
}
.er-title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--est-ink, #1A2E1F);
}
.er-lead { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--est-muted, #5C5C5C); max-width: 560px; }

.er-form { margin-top: 22px; display: grid; gap: 22px; }
.er-field { min-width: 0; }
.er-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--est-muted, #5C5C5C);
}

.er-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.er-chip {
  min-height: 44px;
  padding: 0 16px;
  background: #fff;
  border: 1.5px solid var(--est-line, rgba(26, 46, 31, 0.14));
  border-radius: 999px;
  color: var(--est-ink, #1A2E1F);
  font: 500 14px var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) { .er-chip:hover { border-color: var(--est-accent, #A65A39); } }
.er-chip[aria-checked="true"] {
  border-color: var(--est-accent, #A65A39);
  color: var(--est-accent, #A65A39);
  box-shadow: inset 0 0 0 1px var(--est-accent, #A65A39);
}

.er-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 14px 18px;
  background: #fff;
  border: 1.5px dashed rgba(26, 46, 31, 0.3);
  border-radius: 4px;
  cursor: pointer;
  color: var(--est-ink, #1A2E1F);
}
@media (hover: hover) { .er-photo:hover { border-color: var(--est-accent, #A65A39); } }
.er-photo.has-photo { border-style: solid; }
.er-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.er-file:focus-visible + * { outline: 2px solid var(--est-accent, #A65A39); outline-offset: 4px; }
.er-photo-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #F1EBE3;
}
.er-thumb { flex-shrink: 0; width: 72px; height: 72px; object-fit: cover; border-radius: 2px; }
.er-photo-text { font-size: 15px; font-weight: 500; }

.er-code {
  width: 100%;
  max-width: 320px;
  height: 52px;
  padding: 0 16px;
  background: #fff;
  border: 1.5px solid var(--est-line, rgba(26, 46, 31, 0.14));
  border-radius: 4px;
  color: var(--est-ink, #1A2E1F);
  font: 600 18px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.er-code::placeholder { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: rgba(26, 46, 31, 0.4); }
.er-code:focus { outline: none; border-color: var(--est-accent, #A65A39); box-shadow: inset 0 0 0 1px var(--est-accent, #A65A39); }

.er-hint { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--est-muted, #5C5C5C); }
.er-hint a { color: var(--est-accent, #A65A39); text-underline-offset: 3px; font-weight: 500; }

.er-error {
  padding: 12px 14px;
  background: #FBE7E2;
  border-left: 3px solid #A33A2A;
  color: #7C2B1F;
  font-size: 14px;
  line-height: 1.5;
}
.er-error[hidden] { display: none; }

.er-go {
  justify-self: start;
  min-height: 54px;
  padding: 0 34px;
  background: var(--est-ink, #1A2E1F);
  color: #fff;
  border: 0;
  border-radius: 2px;
  font: 500 14px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.er-go:hover { background: var(--est-accent, #A65A39); }
.er-privacy { font-size: 12.5px; line-height: 1.5; color: var(--est-muted, #5C5C5C); }

/* Waiting */
.er-progress { text-align: center; }
.er-progress-photo {
  position: relative;
  max-height: 460px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  background: #E9E2D6;
}
.er-progress-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) brightness(0.92); }
.er-scan {
  position: absolute;
  left: 0; right: 0; top: -30%;
  height: 30%;
  background: linear-gradient(180deg, rgba(253, 250, 246, 0) 0%, rgba(253, 250, 246, 0.55) 70%, rgba(253, 250, 246, 0) 100%);
  animation: er-scan 2.2s ease-in-out infinite;
}
@keyframes er-scan { from { top: -30%; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .er-scan { animation: none; top: 35%; } }
.er-progress-msg {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--est-ink, #1A2E1F);
}
.er-progress-sub { margin-top: 6px; font-size: 14px; color: var(--est-muted, #5C5C5C); }

/* Result */
.er-ba { border-radius: 4px; overflow: hidden; }
.er-ba .ba-stage { min-height: 0; max-height: 72vh; }
.er-ba .ba-tag { top: 16px; }
.er-ba .er-tag-left { right: auto; left: 16px; }
.er-brief { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--est-ink, #1A2E1F); }
.er-brief strong { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--est-accent, #A65A39); }
.er-note { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--est-muted, #5C5C5C); }
.er-actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.er-again, .er-open {
  min-height: 44px;
  display: inline-flex; align-items: center;
  padding: 0;
  background: none; border: 0;
  font: 500 14px var(--font-body);
  color: var(--est-ink, #1A2E1F);
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.er-again:hover, .er-open:hover { color: var(--est-accent, #A65A39); }
.er-uses { margin-top: 6px; font-size: 12.5px; color: var(--est-muted, #5C5C5C); }

@media (max-width: 600px) {
  .est-render { margin-top: 26px; padding: 22px 16px 18px; }
  .er-go, .er-wa { width: 100%; }
  .er-code { max-width: none; }
  .er-progress-msg { font-size: 22px; }
}