/* Receipt only: three equal zones put the number on the section's true center.
   Keep the real form/result boxes (and result focus semantics), using subgrid
   to share the section tracks. Booking without a receipt is untouched. */
#contact[data-receipt-layout] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: center;
}
#contact[data-receipt-layout] .contact-intro {
  min-width: 0;
  text-align: center;
}
#contact[data-receipt-layout] .contact-intro > * { margin-inline: auto; }
#contact[data-receipt-layout] #request-form {
  grid-column: 2 / 4;
  max-width: none;
  min-width: 0;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 32px;
  align-items: center;
}
#contact[data-receipt-layout] .ticket-panel:not([hidden]),
#contact[data-receipt-layout] .ticket-result:not([hidden]) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 32px;
  align-items: center;
  margin: 0;
}
#contact[data-receipt-layout] .ticket-number-group,
#contact[data-receipt-layout] .ticket-detail-group {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  text-align: center;
}
#contact[data-receipt-layout] .ticket-number-group > *,
#contact[data-receipt-layout] .ticket-detail-group > * { margin: 0; }
#contact[data-receipt-layout] [data-ticket-code] { justify-self: center; }
#contact[data-receipt-layout] .ticket-detail-group [data-ticket-messenger-links].channel-links {
  justify-content: center;
  margin-inline: 0;
}
#contact[data-receipt-layout] [data-ticket-appointment]:empty,
#contact[data-receipt-layout] [data-ticket-messenger-links]:empty { display: none; }
#contact[data-receipt-layout] [data-booking-note]:not(:empty) {
  grid-column: 1 / -1;
  text-align: center;
}
/* At tablet and phone widths, preserve the reading/focus order: intro, number,
   status/date/sharing. No narrow middle track or sideways scrolling. */
@media (max-width: 1100px) {
  #contact[data-receipt-layout] { grid-template-columns: minmax(0, 1fr); }
  #contact[data-receipt-layout] #request-form { grid-column: 1; row-gap: 32px; }
  #contact[data-receipt-layout] .ticket-result:not([hidden]) { row-gap: 32px; }
}