/* =====================================================================
   KEPT PORTRAITS — LIVE WIRING (additive only)

   The design in index.html is untouched. This file adds ONLY what a real
   order needs and the mock did not have: the contact fields, the price,
   and the submit/error states. Everything below inherits the design's own
   tokens, so it reads as part of the original sheet.
   ===================================================================== */

/* ---------- Contact fields (step 4) ---------- */
.kp-fields{ display:grid; gap:14px; margin:26px 0 4px; }
@media(min-width:620px){ .kp-fields{ grid-template-columns:1fr 1fr; } }
.kp-field{ display:flex; flex-direction:column; gap:7px; }
.kp-field label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.kp-field input{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 14px; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.kp-field input::placeholder{ color:#b3aa98; }
.kp-field input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
.kp-field input[aria-invalid="true"]{ border-color:#B4432F; }
.kp-consent{ font-size:13px; color:var(--muted); line-height:1.5; margin-top:12px; }
.kp-consent a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Price line ---------- */
.kp-price{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0; margin-top:24px;
}
.kp-price .kp-price-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.kp-price .kp-price-value{ font-family:var(--serif); font-size:30px; color:var(--ink); }
.kp-price .kp-price-note{ font-size:13px; color:var(--muted); }

/* ---------- Submit state ---------- */
.kp-error{
  display:none; margin-top:16px; padding:13px 15px;
  background:#FBEDE9; border:1px solid #E4BFB4; border-radius:var(--radius);
  color:#8C3520; font-size:14px; line-height:1.5;
}
.kp-error.show{ display:block; }
.kp-busy{ pointer-events:none; opacity:.62; }
.kp-spin{
  width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; display:inline-block; animation:kp-spin .7s linear infinite;
}
@keyframes kp-spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .kp-spin{ animation-duration:2s; } }

/* ---------- Order reference on the success step ---------- */
.kp-ref{
  margin:22px auto 0; max-width:340px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); padding:16px 18px; text-align:center;
}
.kp-ref .kp-ref-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.kp-ref .kp-ref-value{
  font-family:var(--serif); font-size:26px; letter-spacing:.06em; color:var(--ink); margin-top:5px;
}