/* checkout.css — Modal de checkout */

.checkout-wrap{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.8);
  z-index:500; align-items:center; justify-content:center; padding:2rem;
}
.checkout-wrap.open{ display:flex }
.checkout-box{
  background:white; border-radius:20px; padding:0; max-width:520px; width:100%;
  max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
}
.checkout-head{
  padding:1.5rem 2rem; border-bottom:1px solid var(--g2);
  display:flex; align-items:center; justify-content:space-between;
}
.checkout-head h3{ font-size:16px; font-weight:700; color:var(--k) }
.checkout-close{
  background:var(--g1); border:none; border-radius:50%; width:30px; height:30px; cursor:pointer; font-size:16px; color:var(--g4);
}
.checkout-body{ padding:2rem; overflow-y:auto; flex:1 }
.checkout-summary{ background:var(--g1); border-radius:10px; padding:1rem; margin-bottom:1.5rem }
.cs-items{ display:flex; flex-direction:column; gap:8px; margin-bottom:.75rem }
.cs-item{ display:flex; justify-content:space-between; font-size:13px; color:var(--k2) }
.cs-divider{ height:1px; background:var(--g2); margin:.75rem 0 }
.cs-total-row{ display:flex; justify-content:space-between; font-size:15px; font-weight:700; color:var(--k) }

.checkout-form-title{
  font-size:14px; font-weight:700; color:var(--k); margin-bottom:1rem;
  text-transform:uppercase; letter-spacing:.5px;
}
.checkout-field{ margin-bottom:12px }
.checkout-field label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--g4); font-weight:600; margin-bottom:5px }
.checkout-field input,.checkout-field select{
  width:100%; padding:10px 14px; border:1px solid var(--g2); border-radius:var(--r);
  font-size:13px; color:var(--k); background:white; outline:none; font-family:inherit; transition:border .2s;
}
.checkout-field input:focus,.checkout-field select:focus{ border-color:var(--g3) }
.checkout-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

/* MP */
.mp-container{ margin-top:1rem }
.mp-placeholder{ background:var(--g1); border:2px dashed var(--g2); border-radius:10px; padding:2rem; text-align:center }
.mp-placeholder p{ font-size:13px; color:var(--g4); margin-bottom:.5rem }
.mp-placeholder small{ font-size:11px; color:var(--g4) }
.mp-key-note{ background:#fff3cd; border:1px solid #ffc107; border-radius:8px; padding:1rem; margin-top:1rem; font-size:12px; color:#856404 }
.mp-key-note b{ display:block; margin-bottom:.25rem }