/* Cart / checkout / order-status design - Multipalace brand colours
   (logo blue + navy, orange accent, cream background). Loaded on the cart,
   checkout, checkout/success and checkout/cancel pages only. */

:root {
  --mp-navy: #043167;
  --mp-blue: #0a4b8f;
  --mp-blue-dark: #06305f;
  --mp-orange: #f5a623;
  --mp-orange-dark: #d88900;
  --mp-cream: #f9f0e5;
  --mp-line: #e8dccb;
  --mp-line-soft: #f0e6d6;
  --mp-ink: #1d1712;
  --mp-muted: #6f6255;
}

/* ---------- Step banner (Winkelwagen > Afrekenen > Bestelling voltooid) ---------- */
body:has(.wd-checkout-steps) .wd-page-title.page-title {
  background: linear-gradient(120deg, var(--mp-blue-dark) 0%, var(--mp-blue) 100%) !important;
  border-bottom: 4px solid var(--mp-orange);
}
body:has(.wd-checkout-steps) .wd-checkout-steps li,
body:has(.wd-checkout-steps) .wd-checkout-steps li a {
  color: rgba(255, 255, 255, 0.62) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
body:has(.wd-checkout-steps) .wd-checkout-steps li.step-active,
body:has(.wd-checkout-steps) .wd-checkout-steps li.step-active a {
  color: #fff !important;
}
body:has(.wd-checkout-steps) .wd-checkout-steps li.step-active a,
body:has(.wd-checkout-steps) .wd-checkout-steps li.step-active > span {
  border-bottom: 3px solid var(--mp-orange);
  padding-bottom: 4px;
}

/* ---------- Shared card + button look ---------- */
.mpal-co-card {
  background: #fff;
  border: 1px solid var(--mp-line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(34, 23, 12, 0.07);
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--mp-ink);
}

/* ---------- Checkout ---------- */
.mpal-co { max-width: 1100px; margin: 0 auto; padding: 36px 0 60px; }
.mpal-co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.mpal-co-card { padding: 28px; box-sizing: border-box; }
.mpal-co-card h2 {
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--mp-navy);
}

.mpal-co-items { list-style: none; margin: 0; padding: 0; }
.mpal-co-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--mp-line-soft);
}
.mpal-co-item:first-child { padding-top: 0; }
.mpal-co-thumb {
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
  background: var(--mp-cream); display: flex; align-items: center; justify-content: center;
}
.mpal-co-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpal-co-thumb-ph { font-size: 22px; font-weight: 700; color: var(--mp-blue); }
.mpal-co-name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.mpal-co-name small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--mp-muted); }
.mpal-co-price { font-size: 16px; font-weight: 600; white-space: nowrap; }

.mpal-co-totals { margin: 18px 0 0; }
.mpal-co-totals div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 15px; color: var(--mp-muted); }
.mpal-co-totals dt, .mpal-co-totals dd { margin: 0; }
.mpal-co-totals .mpal-co-total {
  margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--mp-line);
  font-size: 19px; font-weight: 700; color: var(--mp-navy);
}
.mpal-co-back {
  display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600;
  color: var(--mp-blue); text-decoration: none;
}
.mpal-co-back:hover { color: var(--mp-orange-dark); }

.mpal-co-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.mpal-co-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.mpal-co-field { min-width: 0; }
.mpal-co-field--full { grid-column: 1 / -1; }
.mpal-co-field label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--mp-ink); }
.mpal-co-field label b { color: #b3261e; font-weight: 700; }
.mpal-co-field label i { font-style: normal; font-weight: 400; color: var(--mp-muted); }
.mpal-co-field input,
.mpal-co-field select {
  width: 100%; box-sizing: border-box; height: 50px; padding: 0 14px;
  border: 1px solid #e3d6c2; border-radius: 10px; background: #fff;
  font-family: Inter, Arial, Helvetica, sans-serif; font-size: 16px; color: var(--mp-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mpal-co-field select { appearance: auto; }
.mpal-co-field input::placeholder { color: #a89c8c; opacity: 1; }
.mpal-co-field input:focus,
.mpal-co-field select:focus { outline: none; border-color: var(--mp-orange); box-shadow: 0 0 0 3px rgba(245, 166, 35, .22); }
.mpal-co-field input:user-invalid,
.mpal-co-field select:user-invalid { border-color: #b3261e; }
.mpal-co-lead.mpal-co-lead--small { margin: 18px 0 0; font-size: 13px; line-height: 1.5; text-align: center; }
.mpal-co-pay .mpal-co-items { margin-bottom: 4px; }
.mpal-co-pay .mpal-co-btn { margin-top: 18px; }
.mpal-co-pay { position: sticky; top: 24px; }
.mpal-co-lead { margin: -6px 0 20px; font-size: 15px; line-height: 1.55; color: var(--mp-muted); }

.mpal-co-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 14px 20px; box-sizing: border-box;
  background: var(--mp-orange); color: #0b2030 !important;
  border: 0; border-radius: 12px; cursor: pointer;
  font-family: Inter, Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.2;
  text-decoration: none; text-transform: none; letter-spacing: 0;
  box-shadow: 0 6px 16px rgba(245, 166, 35, 0.35);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mpal-co-btn:hover:not(:disabled) { background: var(--mp-orange-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(216, 137, 0, 0.35); }
.mpal-co-btn:disabled { opacity: .75; cursor: progress; }
.mpal-co-btn svg { width: 20px; height: 20px; flex: none; }
.mpal-co-btn-amount { padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(11, 32, 48, 0.25); }

.mpal-co-pay .mpal-pay-error {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45;
  background: #fdecea; border: 1px solid #f3c1bb; color: #8a1f14;
}

.mpal-co-badges { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mpal-co-badges li { margin: 0; padding: 0; line-height: 0; }
.mpal-co-badges img { display: block; width: 48px; height: 36px; border-radius: 6px; box-shadow: 0 1px 3px rgba(11, 32, 48, .14); }

.mpal-co-points {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--mp-line);
  display: grid; gap: 10px;
}
.mpal-co-points li { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 14px; line-height: 1.45; color: #3b3329; }
.mpal-co-points svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--mp-orange); }
.mpal-co-points a { color: var(--mp-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(4, 49, 103, .3); }
.mpal-co-points a:hover { color: var(--mp-orange-dark); border-bottom-color: var(--mp-orange-dark); }

/* ---------- Cart page ---------- */
.mpal-ct {
  max-width: 1100px; margin: 0 auto; padding: 36px 0 60px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start;
}
.mpal-ct-list { list-style: none; margin: 0; padding: 0; }
.mpal-ct-item {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 18px; align-items: start;
  margin: 0; padding: 20px 0; border-bottom: 1px solid var(--mp-line-soft);
}
.mpal-ct-item:first-child { padding-top: 0; }
.mpal-ct-item:last-child { border-bottom: 0; padding-bottom: 0; }
.mpal-ct-thumb {
  width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: var(--mp-cream);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.mpal-ct-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpal-ct-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mpal-ct-name { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--mp-ink); text-decoration: none; }
.mpal-ct-name:hover { color: var(--mp-blue); }
.mpal-ct-unit { font-size: 14px; color: var(--mp-muted); }
.mpal-ct-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
.mpal-ct-qty { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--mp-muted); }
.mpal-ct-qty input.qty {
  width: 64px; height: 40px; padding: 0 8px; text-align: center; font-size: 15px; color: var(--mp-ink);
  border: 1px solid var(--mp-line); border-radius: 10px; background: #fff; box-shadow: none;
}
.mpal-ct-qty input.qty:focus { outline: 2px solid var(--mp-orange); outline-offset: 1px; }
.mpal-ct-remove {
  padding: 0; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--mp-blue); text-decoration: underline; text-underline-offset: 3px;
}
.mpal-ct-remove:hover { color: #b3261e; }
.mpal-ct-line { font-size: 17px; font-weight: 700; color: var(--mp-navy); white-space: nowrap; }
.mpal-ct-sum { position: sticky; top: 24px; }
.mpal-ct-sum .mpal-co-totals { margin-top: 0; }
.mpal-ct-sum .mpal-co-btn { margin-top: 20px; }
.mpal-ct-more { margin-top: 16px; display: inline-block; }
/* ---------- Order status (success / cancel) ---------- */
.mpal-os-wrap { max-width: 640px; margin: 0 auto; padding: 44px 0 70px; }
.mpal-os-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 36px 34px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--mp-line); border-radius: 18px;
  box-shadow: 0 12px 32px rgba(34, 23, 12, 0.08);
  font-family: Inter, Arial, Helvetica, sans-serif; color: var(--mp-ink);
}
.mpal-os-card #mpal-order-status { display: contents; }
.mpal-os-card #mpal-order-status > p { order: 3; margin: 0 0 6px; color: var(--mp-muted); }
.mpal-os-icon { order: 1; width: 68px; height: 68px; margin-bottom: 18px; color: var(--mp-blue); }
.mpal-os-icon svg { width: 100%; height: 100%; display: block; }
#mpal-order-status[data-kind="ok"] .mpal-os-icon { color: #1d8a4a; }
#mpal-order-status[data-kind="wait"] .mpal-os-icon { color: var(--mp-orange-dark); }
#mpal-order-status[data-kind="bad"] .mpal-os-icon { color: #b3261e; }
.mpal-os-title {
  order: 2; margin: 0 0 14px;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 36px; line-height: 1.1; font-weight: 700; color: var(--mp-navy);
}
.mpal-os-pill {
  order: 3; display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 700; background: #e8eef7; color: var(--mp-navy);
}
.mpal-os-pill.mpal-status-paid { background: #e3f4ea; color: #166a39; }
.mpal-os-pill.mpal-status-pending { background: #fff1d6; color: #8a5a00; }
.mpal-os-pill.mpal-status-failed, .mpal-os-pill.mpal-status-cancelled { background: #fdecea; color: #8a1f14; }
.mpal-os-meta {
  order: 4; width: 100%; margin: 22px 0 0; padding: 6px 18px; box-sizing: border-box;
  background: var(--mp-cream); border-radius: 12px; text-align: left;
}
.mpal-os-meta div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 15px; }
.mpal-os-meta div + div { border-top: 1px solid var(--mp-line); }
.mpal-os-meta dt { margin: 0; color: var(--mp-muted); }
.mpal-os-meta dd { margin: 0; font-weight: 600; word-break: break-all; text-align: right; }
.mpal-os-error { order: 3; margin: 0; color: #8a1f14; font-size: 15px; }
.mpal-os-extra { order: 5; margin: 12px 0 0; font-size: 14px; color: var(--mp-muted); }
.mpal-os-note { order: 6; margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: var(--mp-muted); }
.mpal-os-note a { color: var(--mp-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(4, 49, 103, .3); }
.mpal-os-actions { order: 7; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.mpal-os-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 26px;
  background: var(--mp-orange); color: #0b2030 !important; border-radius: 12px;
  font-size: 16px; font-weight: 700; text-decoration: none; text-transform: none;
  box-shadow: 0 6px 16px rgba(245, 166, 35, .32); transition: background .2s ease, transform .2s ease;
}
.mpal-os-btn:hover { background: var(--mp-orange-dark); transform: translateY(-1px); }
.mpal-os-btn-ghost { background: transparent; color: var(--mp-navy) !important; box-shadow: none; border: 1.5px solid var(--mp-line); }
.mpal-os-btn-ghost:hover { background: var(--mp-cream); }
@media (max-width: 560px) {
  .mpal-os-card { padding: 30px 20px 26px; }
  .mpal-os-title { font-size: 30px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .mpal-co-grid, .mpal-ct { grid-template-columns: minmax(0, 1fr); }
  .mpal-co-pay, .mpal-ct-sum { position: static; }
}
@media (max-width: 560px) {
  .mpal-co-fields { grid-template-columns: minmax(0, 1fr); }
  .mpal-co, .mpal-ct { padding: 22px 0 40px; }
  .mpal-co-card { padding: 20px; }
  .mpal-co-card h2 { font-size: 26px; }
  .mpal-co-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
  .mpal-co-thumb { width: 56px; height: 56px; }
  .mpal-co-btn { font-size: 16px; }
  .mpal-ct-item { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .mpal-ct-thumb { width: 72px; height: 72px; }
  .mpal-ct-line { grid-column: 2; justify-self: start; margin-top: -2px; }
}