/* ============================================================
   My Booking Flow: checkout page (step 5)
   Loaded only on the checkout page. Scoped under .mpf-wrap.
   Form fields use four-class selectors on purpose, so they
   out-rank Astra and Elementor global form styles.
   ============================================================ */

.mpf-wrap.mpf-wrap--checkout { max-width: 72rem; }
.mpf-wrap .mpf-checkout { font-size: 1rem; line-height: 1.5; text-align: left; color: #111827; }

/* Header */
.mpf-wrap .mpf-checkout .mpf-c-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e5e7eb;
}
.mpf-wrap .mpf-checkout .mpf-c-title {
  margin: 0; font-family: var(--mpf-serif);
  font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #111827;
}
.mpf-wrap .mpf-checkout .mpf-c-back { font-size: .875rem; font-weight: 500; color: #6b7280; text-decoration: none; white-space: nowrap; }
.mpf-wrap .mpf-checkout .mpf-c-back:hover { color: #111827; text-decoration: none; }

/* Layout */
.mpf-wrap .mpf-checkout .mpf-c-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.mpf-wrap .mpf-checkout .mpf-c-main   { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.mpf-wrap .mpf-checkout .mpf-c-aside  { min-width: 0; }
@media (min-width: 1024px) {
  .mpf-wrap .mpf-checkout .mpf-c-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mpf-wrap .mpf-checkout .mpf-c-main   { grid-column: span 2 / span 2; }
  /* If Astra's header is sticky and covers the summary, raise this value */
  .mpf-wrap .mpf-checkout .mpf-c-aside  { position: sticky; top: 1.5rem; }
}

/* Cards */
.mpf-wrap .mpf-checkout .mpf-c-card {
  padding: 1.5rem; background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); scroll-margin-top: 6rem; transition: opacity .3s;
}
@media (min-width: 640px) { .mpf-wrap .mpf-checkout .mpf-c-card { padding: 2rem; } }
.mpf-wrap .mpf-checkout .mpf-c-card.is-locked { opacity: .5; pointer-events: none; }
.mpf-wrap .mpf-checkout .mpf-c-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mpf-wrap .mpf-checkout .mpf-c-h2 { margin: 0; font-family: inherit; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #111827; }
.mpf-wrap .mpf-checkout .mpf-c-badge {
  display: none; padding: .25rem .5rem; border-radius: .25rem;
  background: #ecfdf5; color: #059669; font-size: .75rem; line-height: 1rem; font-weight: 700;
}
.mpf-wrap .mpf-checkout .mpf-c-card.is-done .mpf-c-badge { display: inline-block; }
.mpf-wrap .mpf-checkout .mpf-c-note { margin: 1rem 0 0; font-size: .75rem; line-height: 1.25rem; color: #6b7280; }

/* Guest form */
.mpf-wrap .mpf-checkout .mpf-c-form { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; }
.mpf-wrap .mpf-checkout .mpf-c-card.is-done .mpf-c-form { display: none; }
.mpf-wrap .mpf-checkout .mpf-c-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .mpf-wrap .mpf-checkout .mpf-c-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mpf-wrap .mpf-checkout .mpf-c-field .mpf-c-label {
  display: block; margin: 0 0 .375rem;
  font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280;
}
.mpf-wrap .mpf-checkout .mpf-c-field .mpf-c-input {
  display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: .75rem;
  background: #fff; background-image: none; border: 1px solid #d1d5db; border-radius: .5rem; box-shadow: none;
  color: #111827; font: inherit; font-size: .875rem; line-height: 1.25rem; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s;
}
.mpf-wrap .mpf-checkout .mpf-c-field .mpf-c-input:focus {
  background: #fff; color: #111827; border-color: #111827; box-shadow: 0 0 0 2px #111827; outline: none;
}
.mpf-wrap .mpf-checkout .mpf-c-field .mpf-c-input.is-invalid { border-color: #ef4444; background: #fef2f2; }
.mpf-wrap .mpf-checkout .mpf-c-field .mpf-c-err { display: none; margin: .25rem 0 0; font-size: .75rem; line-height: 1rem; color: #ef4444; }
.mpf-wrap .mpf-checkout .mpf-c-field .mpf-c-err.is-open { display: block; }

.mpf-wrap .mpf-checkout .mpf-c-next {
  display: block; width: 100%; padding: .875rem 2rem; background: #111827; color: #fff; border-radius: .75rem;
  font-size: .875rem; line-height: 1.25rem; font-weight: 600; text-align: center;
  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-checkout .mpf-c-next:hover { background: #1f2937; color: #fff; }
@media (min-width: 640px) { .mpf-wrap .mpf-checkout .mpf-c-next { display: inline-block; width: auto; } }

/* Recap shown after step 1 is complete */
.mpf-wrap .mpf-checkout .mpf-c-recap { display: none; align-items: center; justify-content: space-between; gap: 1rem; font-size: .875rem; line-height: 1.25rem; color: #4b5563; }
.mpf-wrap .mpf-checkout .mpf-c-card.is-done .mpf-c-recap { display: flex; }
.mpf-wrap .mpf-checkout .mpf-c-recap__text { min-width: 0; overflow-wrap: anywhere; }
.mpf-wrap .mpf-checkout .mpf-c-link { flex-shrink: 0; color: #111827; font-size: .875rem; font-weight: 600; text-decoration: underline; }
.mpf-wrap .mpf-checkout .mpf-c-link:hover { color: #4b5563; }

/* Upsells */
.mpf-wrap .mpf-checkout .mpf-c-upsells { display: flex; flex-direction: column; gap: 1rem; }
.mpf-wrap .mpf-checkout .mpf-c-upsell {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem; border: 1px solid #f3f4f6; border-radius: .75rem;
}
@media (min-width: 640px) { .mpf-wrap .mpf-checkout .mpf-c-upsell { flex-direction: row; } }
.mpf-wrap .mpf-checkout .mpf-c-upsell__info { display: flex; align-items: center; gap: 1rem; width: 100%; }
@media (min-width: 640px) { .mpf-wrap .mpf-checkout .mpf-c-upsell__info { width: auto; } }
.mpf-wrap .mpf-checkout .mpf-c-upsell__img { display: block; flex-shrink: 0; width: 4rem; height: 4rem; max-width: none; object-fit: cover; border-radius: .5rem; }
.mpf-wrap .mpf-checkout .mpf-c-upsell__ph { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 4rem; height: 4rem; background: #f9fafb; border-radius: .5rem; }
.mpf-wrap .mpf-checkout .mpf-c-upsell__ph .mpf-icon { width: 1.5rem; height: 1.5rem; color: #9ca3af; }
.mpf-wrap .mpf-checkout .mpf-c-upsell__title { margin: 0; font-family: inherit; font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: #111827; }
.mpf-wrap .mpf-checkout .mpf-c-upsell__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 24rem; margin: .125rem 0 0; font-size: .75rem; line-height: 1rem; color: #6b7280;
}
.mpf-wrap .mpf-checkout .mpf-c-upsell__price { margin: .25rem 0 0; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: #059669; }
.mpf-wrap .mpf-checkout .mpf-c-upsell__btn {
  display: block; width: 100%; padding: .5rem 1.5rem; background: transparent; color: #059669;
  border: 1px solid #059669; border-radius: .5rem; font-size: .875rem; line-height: 1.25rem; font-weight: 700; text-align: center;
  transition: all .15s;
}
@media (min-width: 640px) { .mpf-wrap .mpf-checkout .mpf-c-upsell__btn { width: auto; } }
.mpf-wrap .mpf-checkout .mpf-c-upsell__btn:hover:not(:disabled) { background: #ecfdf5; color: #047857; }
.mpf-wrap .mpf-checkout .mpf-c-upsell__btn.is-added { background: #059669; color: #fff; }
.mpf-wrap .mpf-checkout .mpf-c-upsell__btn:disabled { opacity: .5; }

/* Payment box */
.mpf-wrap .mpf-checkout .mpf-c-tokenization { margin-bottom: 1rem; }
.mpf-wrap .mpf-checkout .mpf-c-paymsg {
  display: none; margin-bottom: 1rem; padding: .875rem; background: #fff1f2; color: #e11d48;
  border: 1px solid #ffe4e6; border-radius: .75rem; font-size: .75rem; line-height: 1rem; font-weight: 600;
}
.mpf-wrap .mpf-checkout .mpf-c-paymsg.is-open { display: block; }
.mpf-wrap .mpf-checkout .mpf-c-pay {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: 1rem 2rem; background: #059669; color: #fff; border-radius: .75rem;
  font-size: 1rem; line-height: 1.5rem; font-weight: 700; text-align: center;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); transition: background-color .15s;
}
.mpf-wrap .mpf-checkout .mpf-c-pay:hover:not(:disabled) { background: #047857; color: #fff; }
.mpf-wrap .mpf-checkout .mpf-c-pay:disabled { background: #9ca3af; box-shadow: none; }
.mpf-wrap .mpf-checkout .mpf-c-pay .mpf-icon { width: 1.25rem; height: 1.25rem; }

/* Order summary */
.mpf-wrap .mpf-checkout .mpf-c-summary {
  display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem;
  background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
.mpf-wrap .mpf-checkout .mpf-c-property { display: flex; gap: 1rem; }
.mpf-wrap .mpf-checkout .mpf-c-property__img { display: block; flex-shrink: 0; width: 6rem; height: 6rem; max-width: none; object-fit: cover; border-radius: .75rem; }
.mpf-wrap .mpf-checkout .mpf-c-property__img--blank { background: #e5e7eb; }
.mpf-wrap .mpf-checkout .mpf-c-type { margin: 0 0 .25rem; font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
.mpf-wrap .mpf-checkout .mpf-c-ptitle { margin: 0; font-family: inherit; font-size: .875rem; line-height: 1.25; font-weight: 700; color: #111827; }

.mpf-wrap .mpf-checkout .mpf-c-stay { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; }
.mpf-wrap .mpf-checkout .mpf-c-stay__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; line-height: 1.25rem; }
.mpf-wrap .mpf-checkout .mpf-c-stay__label { font-weight: 500; color: #6b7280; }
.mpf-wrap .mpf-checkout .mpf-c-stay__value { font-weight: 600; color: #111827; text-align: right; }

.mpf-wrap .mpf-checkout .mpf-c-h4 { margin: 0 0 .75rem; font-family: inherit; font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9ca3af; }
.mpf-wrap .mpf-checkout .mpf-c-lines { display: flex; flex-direction: column; gap: .75rem; }
.mpf-wrap .mpf-checkout .mpf-c-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; line-height: 1.25rem; color: #4b5563; }
.mpf-wrap .mpf-checkout .mpf-c-line__label { text-transform: capitalize; }
.mpf-wrap .mpf-checkout .mpf-c-total { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid #f3f4f6; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: #111827; }