/* ---------------------------------------------------
   AirRooms — design summary page (post-configurator)
   --------------------------------------------------- */

.design-intro .section-intro { max-width: 620px; margin-bottom: 0; }

.design-empty { max-width: 520px; margin: 0 auto; text-align: center; }
.design-empty .btn { margin-top: 8px; }

/* ---------------- Summary: photo + written spec ---------------- */

.design-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.design-photo-wrap {
  /* Stays in view while the details column (which can run longer once the
     spec list, finishes row etc. add up) scrolls past it — scoped to just
     this summary block, since .design-photo-wrap and .design-details are
     both grid children here and nothing outside this section. The site
     header is itself sticky at 71px tall, so this sits just below it
     rather than touching it. */
  position: sticky;
  top: 90px;
}

.design-photo-wrap img {
  border-radius: var(--radius);
  width: 100%;
  box-shadow: 0 12px 28px rgba(31, 35, 31, 0.12);
}

.design-photo-caption {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-green);
}

.design-written p {
  margin: 0 0 12px;
}

/* Chosen finishes — small swatch row, right under the description and
   above the priced spec list. Hidden entirely when nothing picked has its
   own swatch image (see design-summary.js). */

.design-finishes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.design-finishes.is-empty {
  display: none;
}

.design-finish {
  width: 76px;
  text-align: left;
}

.design-finish-img {
  display: block;
  width: 100%;
  height: 58px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--color-line);
  box-shadow: 0 4px 10px rgba(31, 35, 31, 0.1);
}

.design-finish-label {
  display: block;
  font-size: 0.72rem;
  margin-top: 6px;
  color: var(--color-ink-soft);
  line-height: 1.25;
}

.design-spec-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.design-spec-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.92rem;
}

.design-spec-list .spec-label {
  flex: 0 0 110px;
  color: var(--color-ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.design-spec-list .spec-name {
  flex: 1;
  color: var(--color-ink);
  font-weight: 500;
}

.design-spec-list .spec-price {
  flex: 0 0 auto;
  color: var(--color-accent-dark);
  font-weight: 600;
  white-space: nowrap;
}

.design-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 18px;
}

.design-total-row span {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.design-total-row strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--color-green);
}

.design-change-row {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--color-line);
}

.design-change-row .btn { padding: 11px 22px; font-size: 0.88rem; }

@media (max-width: 760px) {
  .design-summary-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Single-column stack here — pinning the photo while a column of its
     own content scrolls beneath it doesn't apply once it's just one of
     several stacked blocks. */
  .design-photo-wrap { position: static; }
}

/* ---------------- Payment plan ---------------- */

.design-payment-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }

.payment-plan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.payment-stage {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}

.payment-stage-pct {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-accent);
  font-weight: 600;
}

.payment-stage-label {
  display: block;
  font-weight: 600;
  margin-top: 4px;
  color: var(--color-green);
}

.payment-stage-amt {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 6px;
  color: var(--color-ink);
}

.payment-stage p {
  margin: 10px 0 0;
  font-size: 0.86rem;
}

.design-payment-actions {
  justify-content: center;
  margin-top: 36px;
}

.design-btn-ghost-alt {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.design-btn-ghost-alt:hover {
  background: rgba(185, 117, 47, 0.1);
}

@media (max-width: 760px) {
  .payment-plan { grid-template-columns: 1fr; }
}

/* ---------------- Enquiry form ---------------- */

.design-form-container { max-width: 640px; }

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Needed because the unconditional `display: flex` above would otherwise
   override the browser's default [hidden] { display: none } once the form
   is hidden via the hidden attribute after a successful submission. */
.enquiry-form[hidden] {
  display: none;
}

.enquiry-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-green);
}

.enquiry-form label span {
  color: var(--color-accent);
}

.enquiry-form input,
.enquiry-form textarea {
  font-family: var(--font-body);
  font-size: 0.96rem;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--color-line);
  background: #fff;
  color: var(--color-ink);
  resize: vertical;
}

.enquiry-form input:focus,
.enquiry-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.enquiry-form button {
  align-self: flex-start;
  border: none;
  cursor: pointer;
  margin-top: 6px;
}

.enquiry-thanks {
  text-align: center;
  padding: 40px 20px;
  background: var(--color-cream);
  border-radius: var(--radius);
}

.enquiry-thanks h3 {
  font-family: var(--font-display);
  color: var(--color-green);
  margin: 0 0 10px;
}

.enquiry-thanks p { margin: 0; }