/* ============================================================
   My Booking Flow: booking confirmation (step 6)
   Scoped under .mpf-wrap. Includes print styles.
   ============================================================ */

.mpf-wrap.mpf-wrap--confirmation { max-width: 48rem; }
.mpf-wrap .mpf-confirmation { padding: 1rem 0 2rem; font-size: 1rem; line-height: 1.5; text-align: left; color: #1f2937; }

/* Success header */
.mpf-wrap .mpf-confirmation .mpf-cf-hero { margin-bottom: 2.5rem; text-align: center; }
.mpf-wrap .mpf-confirmation .mpf-cf-hero__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; margin-bottom: 1.5rem; border-radius: 9999px; background: #d1fae5; color: #059669;
}
.mpf-wrap .mpf-confirmation .mpf-cf-hero__icon .mpf-icon { width: 2rem; height: 2rem; }
.mpf-wrap .mpf-confirmation .mpf-cf-title {
  margin: 0 0 1rem; font-family: inherit; font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: #111827;
}
@media (min-width: 768px) { .mpf-wrap .mpf-confirmation .mpf-cf-title { font-size: 2.25rem; line-height: 2.5rem; } }
.mpf-wrap .mpf-confirmation .mpf-cf-sub { margin: 0; font-size: 1.125rem; line-height: 1.75rem; color: #6b7280; }
.mpf-wrap .mpf-confirmation .mpf-cf-printhead { display: none; margin-bottom: 2.5rem; text-align: center; }

/* Card */
.mpf-wrap .mpf-confirmation .mpf-cf-card {
  margin-bottom: 2rem; overflow: hidden; background: #fff; border: 1px solid #f3f4f6; border-radius: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(229,231,235,.4), 0 8px 10px -6px rgba(229,231,235,.4);
}
.mpf-wrap .mpf-confirmation .mpf-cf-top { padding: 2rem 1.5rem; text-align: center; background: #f9fafb; border-bottom: 1px solid #f3f4f6; }
.mpf-wrap .mpf-confirmation .mpf-cf-eyebrow {
  margin: 0 0 .5rem; font-family: inherit; font-size: .875rem; line-height: 1.25rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #9ca3af;
}
.mpf-wrap .mpf-confirmation .mpf-cf-code {
  font-size: 1.875rem; line-height: 2.25rem; font-weight: 900; letter-spacing: -.025em; color: #111827;
  overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
@media (min-width: 768px) {
  .mpf-wrap .mpf-confirmation .mpf-cf-top  { padding: 2rem 2.5rem; }
  .mpf-wrap .mpf-confirmation .mpf-cf-code { font-size: 3rem; line-height: 1; }
}

.mpf-wrap .mpf-confirmation .mpf-cf-body { padding: 2rem 1.5rem; }
@media (min-width: 768px) { .mpf-wrap .mpf-confirmation .mpf-cf-body { padding: 2.5rem; } }
.mpf-wrap .mpf-confirmation .mpf-cf-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 768px) { .mpf-wrap .mpf-confirmation .mpf-cf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mpf-wrap .mpf-confirmation .mpf-cf-h3 {
  margin: 0 0 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid #f3f4f6;
  font-family: inherit; font-size: 1.125rem; line-height: 1.75rem; font-weight: 800; color: #111827;
}
.mpf-wrap .mpf-confirmation .mpf-cf-label {
  display: block; margin-bottom: .25rem; font-size: .75rem; line-height: 1rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #9ca3af;
}
.mpf-wrap .mpf-confirmation .mpf-cf-value { display: block; font-weight: 600; color: #1f2937; }
.mpf-wrap .mpf-confirmation .mpf-cf-small { display: block; font-size: .875rem; line-height: 1.25rem; color: #6b7280; }
.mpf-wrap .mpf-confirmation .mpf-cf-field { margin-bottom: 1rem; }
.mpf-wrap .mpf-confirmation .mpf-cf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.mpf-wrap .mpf-confirmation .mpf-cf-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mpf-wrap .mpf-confirmation .mpf-cf-list li { margin: 0; padding: 0; }
.mpf-wrap .mpf-confirmation .mpf-cf-ref {
  display: inline-block; padding: .25rem .5rem; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: .25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; line-height: 1.25rem;
  font-weight: 500; color: #1f2937; overflow-wrap: anywhere;
}
.mpf-wrap .mpf-confirmation .mpf-cf-pill {
  display: inline-flex; align-items: center; padding: .125rem .625rem; border-radius: 9999px;
  background: #f3f4f6; color: #1f2937; font-size: .75rem; line-height: 1rem; font-weight: 700;
}
.mpf-wrap .mpf-confirmation .mpf-cf-pill.is-confirmed { background: #d1fae5; color: #065f46; }

/* Print button */
.mpf-wrap .mpf-confirmation .mpf-cf-actions { display: flex; justify-content: center; margin-top: 2.5rem; }
.mpf-wrap .mpf-confirmation .mpf-cf-print {
  display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem;
  background: #111827; color: #fff; border-radius: .75rem; font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); transition: background-color .15s;
}
.mpf-wrap .mpf-confirmation .mpf-cf-print:hover { background: #1f2937; color: #fff; }
.mpf-wrap .mpf-confirmation .mpf-cf-print .mpf-icon { width: 1.25rem; height: 1.25rem; }

/* Print: only the confirmation, without the theme's header, footer or menus */
@media print {
  body.mpf-confirmation-page { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.mpf-confirmation-page header,
  body.mpf-confirmation-page footer,
  body.mpf-confirmation-page nav,
  body.mpf-confirmation-page #wpadminbar,
  body.mpf-confirmation-page .ast-breadcrumbs-wrapper { display: none !important; }

  .mpf-wrap.mpf-wrap--confirmation { max-width: none; margin: 0; padding: 0; }
  .mpf-wrap .mpf-confirmation { padding: 1rem 0; }
  .mpf-wrap .mpf-confirmation .mpf-no-print { display: none !important; }
  .mpf-wrap .mpf-confirmation .mpf-cf-printhead { display: block; }
  .mpf-wrap .mpf-confirmation .mpf-cf-printhead .mpf-cf-title { margin-bottom: .5rem; }
  .mpf-wrap .mpf-confirmation .mpf-cf-card { border-color: #d1d5db; border-radius: 0; box-shadow: none; }
  .mpf-wrap .mpf-confirmation .mpf-cf-top { background: #fff; border-bottom: 2px solid #e5e7eb; }
  .mpf-wrap .mpf-confirmation .mpf-cf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .mpf-wrap .mpf-confirmation .mpf-cf-ref { padding: 0; background: #fff; border: 0; }
  .mpf-wrap .mpf-confirmation .mpf-cf-pill { padding: 0; background: #fff; color: #000; font-size: .875rem; }
}