/* Namespaced Step 2 styles to avoid Step 1 collisions */
.mkep-step2 { margin-top: 10px; }
.mkep-step2__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}
@media (max-width: 900px){
  .mkep-step2__grid { grid-template-columns: 1fr; }
}

.mkep-step2__left .mkep-box {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 16px;
}
.mkep-step2__right h2 { margin: 0 0 12px; }

#mkep-edit-positions.button {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
}

/* Summary */
.mkep-s2-summary .top {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.mkep-s2-summary .top .image img {
  width: 70px; height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid #eee;
}
.mkep-s2-summary .item-info strong { display: block; }
.mkep-s2-summary .sku, .mkep-s2-summary .sub { color: #666; font-size: 13px; }
.mkep-s2-summary .breakdown { border-top: 1px dashed #ddd; margin-top: 10px; padding-top: 10px; }
.mkep-cost-row { display: flex; justify-content: space-between; padding: 6px 0; }
.mkep-cost-row.head { padding-top: 10px; color: #222; }
.mkep-cost-row .price { color: #0a7; font-weight: 600; }
.mkep-cost-row.total { border-top: 1px solid #eee; margin-top: 6px; padding-top: 10px; font-size: 15px; }
.mkep-cost-row.total .price { color: #000; }

/* Form */
.mkep-form .mkep-row { display: block; margin: 14px 0; }
.mkep-title { font-weight: 600; margin-bottom: 6px; }
.mkep-actions { }
.mkep-input, .mkep-textarea, .mkep-upload input[type="file"] {
  width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; font-size: 14px;
}
.mkep-textarea { resize: vertical; }

.mkep-toggle { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px; }
.mkep-toggle__opt {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; cursor: pointer;
  user-select: none; background: #fafafa;
}
.mkep-toggle__opt input[type="radio"] { transform: scale(1.1); }

.mkep-cards { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px; }
.mkep-card {
  position: relative; border: 1px solid #ddd; border-radius: 12px; background: #fff;
}
.mkep-card.is-selected { border-color: #0a7; box-shadow: 0 0 0 2px rgba(0,170,119,0.1); }
.mkep-card input[type="radio"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mkep-card__inner { display: block; padding: 14px; text-align: center; font-weight: 600; }

.mkep-radio-list { display: grid; gap: 8px; }
.mkep-radio { display: flex; align-items: center; gap: 8px; }
.mkep-radio input[type="radio"] { transform: scale(1.05); }

.mkep-upload { margin-top: 10px; }
.mkep-upload.is-hidden { display: none; }
.mkep-hint { font-size: 12px; color: #666; margin-top: 6px; }

.mkep-login-box {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px dashed #cfe; background: #f7fffb; padding: 10px 12px; border-radius: 10px; margin-bottom: 6px;
}
.mkep-btn { display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid #ddd; cursor:pointer; }
/* Disabled state */
.mkep-btn.disabled,
.mkep-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
    background: #f5f5f5;
    color: #999;
    border-color: #eee;
}
.mkep-btn--ghost { background: #fff; }

.mkep-step2__nav { display:flex; gap:10px; margin-top: 14px; }
#mkep-back.button, #mkep-next.button,
#mkep-back, #mkep-next {
  display:inline-block; text-decoration:none; padding:10px 14px; border-radius:8px;
}
#mkep-back { background:#fff; border:1px solid #ccc; color:#333; }
#mkep-next { background:#0a7; border:1px solid #0a7; color:#fff; }
/* === Compact header layout with preview on the right === */
.mkep-step2 .mkep-head-row {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 280px;
  gap: 24px;
  align-items: start;
}

.mkep-step2 .mkep-head-left .mkep-field-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* keep the segmented buttons from stretching full width */
.mkep-step2 .mkep-segcontrol,
.mkep-step2 .mkep-segcontrol + .mkep-segcontrol {
  max-width: 520px;
}

/* a light card around the preview */
.mkep-step2 .mkep-preview-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 12px;
}

.mkep-step2 .mkep-preview-card img,
.mkep-step2 .mkep-preview-card svg,
.mkep-step2 .mkep-preview-card canvas {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* fall back to stacked on small screens */
@media (max-width: 900px) {
  .mkep-step2 .mkep-head-row {
    grid-template-columns: 1fr;
  }
}