/* ==========================================================================
   Mrs Foster's Frosting — confirmation view and image preview
   ========================================================================== */

/* ------------------------------------------------------- image preview -- */

.preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  background: var(--pink-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* A fixed square crop, so a 4000px phone photo and a small screenshot
   display at exactly the same size. */
.preview img,
#inspiration-thumb {
  width: 88px;
  height: 88px;
  flex: none;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display: block;
}

.preview__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview__name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.preview__remove {
  align-self: flex-start;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--rose-deep);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.preview__remove:hover {
  border-color: var(--rose);
  background: var(--pink-soft);
}

/* ------------------------------------------- confirmation-only view ----- */

/* Once the order has been sent, the logo, tagline and page intro are hidden
   so the confirmation stands on its own. body.is-confirmed is set by
   order-form.js when the success panel is shown. */

body.is-confirmed #brand-head,
body.is-confirmed #form-intro {
  display: none;
}

/* The card keeps its shape but loses the generous top padding that was there
   to sit under the title. */
body.is-confirmed .card {
  padding-top: 44px;
}

@media (min-width: 640px) {
  body.is-confirmed .card { padding-top: 56px; }
}

/* The success panel's own heading needs a little more presence now that it's
   the first thing on the page. */
body.is-confirmed .success h2 {
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  margin-bottom: 14px;
}

body.is-confirmed .page {
  padding-top: 32px;
}