/* Universal multi-step checkout — all OS & screens */
.mp-ck-step {
  display: none !important;
}
.mp-ck-step.is-active {
  display: block !important;
  animation: mpCkIn .28s ease;
}
@keyframes mpCkIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.mp-ck {
  padding: 20px 0 120px !important;
  background: #fff !important;
  min-height: 100vh !important;
}
.mp-ck-inner {
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px) {
  .mp-ck-inner { max-width: 640px !important; padding: 0 24px !important; }
  .mp-ck { padding-top: 32px !important; }
}
@media (min-width: 1100px) {
  .mp-ck-inner { max-width: 680px !important; }
}

.mp-ck-progress {
  background: #f6f6f6 !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
}
.mp-ck-steps-dots {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}
.mp-ck-steps-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ddd;
  display: inline-block;
  transition: .2s ease;
}
.mp-ck-steps-dots span.is-done {
  background: #888;
}
.mp-ck-steps-dots span.is-on {
  background: #111;
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}

.mp-ck-card {
  border-radius: 20px !important;
  padding: 18px !important;
  border: 1px solid #e8e8e8 !important;
  background: #fff !important;
}
@media (min-width: 768px) {
  .mp-ck-card { padding: 28px !important; }
}

.mp-ck-nav {
  display: flex !important;
  gap: 10px !important;
  margin-top: 22px !important;
  flex-wrap: wrap !important;
}
.mp-ck-next, .mp-ck-back, .mp-ck-pay-btn {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  flex: 1 1 auto !important;
}
.mp-ck-next { flex: 2 1 auto !important; }
.mp-ck-back { flex: 0 1 auto !important; min-width: 100px !important; }

/* Sticky pay — ALL screens on final step */
.mp-ck-mobile-bar {
  position: fixed !important;
  z-index: 200 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  background: #0a0a0a !important;
  padding: 12px 16px !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.25) !important;
}
.mp-ck-mobile-bar:not([hidden]) {
  display: block !important;
}
body.mp-ck-on-final .mp-ck {
  padding-bottom: 110px !important;
}
/* On desktop also show sticky; hide duplicate desk totals when sticky visible */
@media (min-width: 861px) {
  body.mp-ck-on-final .mp-ck-totals-desk .mp-ck-pay-btn {
    display: none !important; /* pay is in sticky bar */
  }
  .mp-ck-mobile-bar .mp-ck-mobile-pay {
    min-width: 180px;
  }
}

.mp-ck-field input,
.mp-ck-field select,
.mp-ck-field textarea {
  min-height: 48px !important;
  font-size: 16px !important; /* prevents iOS zoom */
  border-radius: 14px !important;
}
.mp-ck-row2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width: 520px) {
  .mp-ck-row2 { grid-template-columns: 1fr !important; }
}

/* Hide chrome already; ensure full width on tablet */
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .site-footer,
body.woocommerce-checkout .mobile-bottom-nav {
  display: none !important;
}