/* =====================================================================
   checkout.css · pago multipaso + resumen
   ===================================================================== */
.checkout__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .checkout__grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .checkout__summary { order: -1; } }

/* Stepper */
.steps { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1.8rem; }
.steps li { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: var(--mc-fs-sm); font-weight: 600; color: var(--mc-gray-400); }
.steps li .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mc-gray-100); color: var(--mc-gray-500); flex-shrink: 0; font-family: var(--mc-font-display); }
.steps li.is-active { color: var(--mc-ink); }
.steps li.is-active .n { background: var(--mc-lime); color: var(--mc-black); }
.steps li.is-done .n { background: var(--mc-ink); color: #fff; }
.steps li::after { content: ""; flex: 1; height: 2px; background: var(--mc-gray-200); }
.steps li:last-child::after { display: none; }
@media (max-width: 560px) { .steps li span.t { display: none; } }

/* Pasos */
.step h2 { font-size: var(--mc-fs-xl); margin-bottom: 1.2rem; }
.mc-input.is-invalid, .mc-select.is-invalid { border-color: var(--mc-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
/* Rejilla de 12 columnas: permite dar a cada campo el ancho que pide su
   contenido. La direccion se lleva las 12 porque una direccion colombiana
   completa ("Calle 123 #45-67 Apto 802 Torre 3") no cabe en media fila. */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.form-grid .col-1  { grid-column: span 1; }
.form-grid .col-2  { grid-column: span 2; }
.form-grid .col-3  { grid-column: span 3; }
.form-grid .col-4  { grid-column: span 4; }
.form-grid .col-5  { grid-column: span 5; }
.form-grid .col-6  { grid-column: span 6; }
.form-grid .col-7  { grid-column: span 7; }
.form-grid .col-8  { grid-column: span 8; }
.form-grid .col-9  { grid-column: span 9; }
.form-grid .col-10 { grid-column: span 10; }
.form-grid .col-11 { grid-column: span 11; }
.form-grid .col-12 { grid-column: 1 / -1; }
/* Sin clase, un campo ocupa media fila: es lo que hacian todos antes */
.form-grid > .mc-field:not([class*="col-"]) { grid-column: span 6; }
@media (max-width: 780px) { .form-grid > * { grid-column: 1 / -1 !important; } }
.step__actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }

/* Opciones (envío / pago) */
.opts { display: grid; gap: .8rem; }
.opt { display: flex; align-items: center; gap: .9rem; border: 1.5px solid var(--mc-gray-200); border-radius: var(--mc-radius); padding: 1rem 1.1rem; cursor: pointer; transition: var(--mc-t); }
.opt:hover { border-color: var(--mc-gray-400); }
.opt:has(input:checked) { border-color: var(--mc-ink); box-shadow: var(--mc-ring); }
.opt input { accent-color: var(--mc-ink); width: 18px; height: 18px; }
.opt__body { flex: 1; }
/* Logo de la transportadora en las opciones de envío (misma pieza que el modal
   de "calcular envío": .mc-carrier__logo) */
.opt__logo { flex: 0 0 auto; }
.opt__title { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.opt__desc { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }
.opt__price { font-family: var(--mc-font-display); font-weight: 700; }
.opt__tag { font-size: var(--mc-fs-xs); background: var(--mc-lime); color: var(--mc-black); padding: .15rem .5rem; border-radius: var(--mc-radius-sm); font-weight: 700; }

/* Imagen del medio de pago: NO es un logo suelto, es una tira que muestra los
   medios que acepta esa pasarela (tarjetas, bancos...). Por eso es mas ancha
   que alta y va en su propia linea, a lo ancho de la opcion, en vez de
   apretada en un rincon. Se administra en configuracion/medios_web. */
.opt:has(.pay-medios) { flex-wrap: wrap; }
.pay-medios { flex: 0 0 100%; margin-top: .55rem; line-height: 0; }
/* A tamano natural: estas tiras son muy apaisadas (la de Wompi es 500x27) y
   estirarlas al ancho de la opcion las dejaria borrosas. Solo se encogen. */
.pay-medios img { display: block; max-width: 100%; max-height: 40px; width: auto; height: auto; }
/* Nota del medio (datos de transferencia): cuelga de la opcion elegida */
.pay-note { margin-top: .8rem; padding: .9rem 1.1rem; border-radius: var(--mc-radius); background: var(--mc-gray-50); border: 1px solid var(--mc-gray-200); font-size: var(--mc-fs-sm); }
.pay-note p { margin: 0 0 .4rem; }
.pay-note p:last-child { margin-bottom: 0; }

/* Resumen */
.order-summary { border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-lg); padding: 1.4rem; position: sticky; top: calc(var(--mc-header-h) + 16px); display: grid; gap: 1rem; }
@media (max-width: 900px) { .order-summary { position: static; } }
.order-summary h3 { margin: 0; font-size: var(--mc-fs-lg); }
.order-mini { display: grid; gap: .8rem; max-height: 280px; overflow-y: auto; }
.order-line { display: grid; grid-template-columns: 48px 1fr auto; gap: .7rem; align-items: center; }
.order-line img { width: 48px; height: 48px; object-fit: contain; padding: 4px; background: var(--mc-gray-50); border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-sm); }
.order-line__name { font-size: var(--mc-fs-sm); font-weight: 600; line-height: 1.2; }
.order-line__meta { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }
.order-line__price { font-weight: 700; font-size: var(--mc-fs-sm); }
.cart-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--mc-fs-base); }
.cart-row--total { font-family: var(--mc-font-display); padding-top: .6rem; border-top: 1px solid var(--mc-gray-200); }
.cart-row--total b { font-size: var(--mc-fs-xl); }
.order-secure { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); display: flex; align-items: center; gap: .4rem; }

/* Éxito */
.checkout-success { text-align: center; max-width: 520px; margin: 0 auto; padding: 3rem 1rem; display: grid; gap: 1rem; place-items: center; }
.checkout-success__icon { width: 80px; height: 80px; border-radius: 50%; background: var(--mc-lime); color: var(--mc-black); display: grid; place-items: center; font-size: 2.4rem; }
.checkout-success__num { font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-xl); }

/* --- Página de pago (/pago) --- */
.opt.is-selected { border-color: var(--mc-ink); box-shadow: var(--mc-ring); }
.pay-state { display: flex; gap: 1rem; align-items: center; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-lg); padding: 1.3rem 1.4rem; background: var(--mc-gray-50); }
.pay-state .bi { font-size: 2.2rem; line-height: 1; }
.pay-state h3 { margin: 0 0 .2rem; font-size: var(--mc-fs-lg); }
.pay-state p { margin: 0; }
.pay-state--ok .bi { color: #16a34a; }
.pay-state--bad { background: #fef2f2; border-color: #fecaca; }
.pay-state--bad .bi { color: #dc2626; }
/* Estado "en espera / recuperable": un pago rechazado no es un error del cliente,
   así que se comunica en ámbar (informativo) y no en rojo (alarma). */
.pay-state--wait { background: #fffbeb; border-color: #fde68a; align-items: flex-start; }
.pay-state--wait .bi { color: #d97706; }
.pay-state--wait h3 { color: var(--mc-gray-900); }
.pay-method { border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-lg); padding: 1.3rem 1.4rem; }
.pay-method h3 { font-size: var(--mc-fs-lg); }
.pay-note { background: var(--mc-gray-50); border: 1px dashed var(--mc-gray-300); border-radius: var(--mc-radius); padding: .9rem 1rem; margin-top: .9rem; font-size: var(--mc-fs-sm); }
.pay-note p { margin: 0 0 .4rem; }
.pay-note p:last-child { margin-bottom: 0; }

/* =====================================================================
   PAGAR CON PUNTOS
   Va antes de los medios: si los puntos cubren el pedido no hace falta
   ninguno, y si no, dejan claro cuánto queda por pagar.
   ===================================================================== */
.pay-puntos {
  border: 1.5px solid var(--mc-gray-200); border-radius: var(--mc-radius);
  padding: 1rem 1.1rem; margin-bottom: 1.2rem;
  background: linear-gradient(120deg, var(--mc-lime-soft), var(--mc-surface) 65%);
}
.pay-puntos__head { display: flex; align-items: center; gap: .8rem; }
.pay-puntos__logo { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.pay-puntos__head span { display: block; font-size: var(--mc-fs-sm); color: var(--mc-gray-600); }
.pay-puntos__slider { margin-top: .9rem; display: grid; gap: .5rem; }
.pay-puntos__slider input[type=range] { width: 100%; accent-color: var(--mc-ink); }
.pay-puntos__vals { display: flex; justify-content: space-between; font-size: var(--mc-fs-sm); color: var(--mc-gray-600); gap: 1rem; flex-wrap: wrap; }
.pay-puntos__ok { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 0; font-size: var(--mc-fs-sm); }
.pay-puntos__ok .bi { color: var(--mc-success); }
.pay-puntos__err { margin: .7rem 0 0; color: var(--mc-danger); font-weight: 600; font-size: var(--mc-fs-sm); }