/* =============================================================
   FERRETERÍA LAGO — Estilos del checkout (Bootstrap 5.3.3)
   Se carga DESPUÉS de bootstrap.min.css, tema-lago.css y
   carrito.css (de ahí se reutiliza el widget .resumen y .btn-texto).
   Índice:
     01. Layout del checkout
     02. Pasos de la compra
     03. Paneles del formulario
     04. Opciones (retiro, despacho, pago)
     05. Datos de la tarjeta
     06. Productos del pedido (resumen)
     07. Datos, ayudas y avisos
     08. Pedido confirmado
     09. Checkout sin productos
     10. Responsive
   ============================================================= */

/* ------------------------------------------------------------------
   01. LAYOUT DEL CHECKOUT
   El resumen se queda fijo al hacer scroll: la regla sticky vive en
   carrito.css (sección 01) porque es el mismo widget.
   ------------------------------------------------------------------ */
.checkout { padding-block: 32px 46px; }

.checkout__form { margin: 0; }

/* Cabecera del resumen: título + enlace "Editar carro" */
.resumen__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gris-200);
}
.resumen__cabecera .resumen__titulo {
  padding: 0;
  margin: 0;
  border: 0;
}

.resumen--checkout .resumen__cuotas { margin-bottom: 16px; }

/* ------------------------------------------------------------------
   02. PASOS DE LA COMPRA
   ------------------------------------------------------------------ */
.pasos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-suave);
}

.pasos__item {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Línea que une un paso con el anterior */
.pasos__item + .pasos__item::before {
  content: "";
  width: 24px;
  height: 2px;
  margin-right: 11px;
  background: var(--gris-300);
}
.pasos__item.is-listo::before,
.pasos__item.is-activo::before { background: var(--verde-600); }

.pasos__item a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}
.pasos__item a:hover { color: var(--verde-700); text-decoration: underline; }

.pasos__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--gris-300);
  border-radius: 50%;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.pasos__item.is-listo { color: var(--verde-700); }
.pasos__item.is-listo .pasos__num {
  border-color: var(--verde-600);
  background: var(--verde-600);
  color: #fff;
}
.pasos__item.is-activo { color: var(--verde-900); }
.pasos__item.is-activo .pasos__num {
  border-color: var(--amarillo);
  background: var(--amarillo);
  color: var(--texto);
}

/* ------------------------------------------------------------------
   03. PANELES DEL FORMULARIO
   ------------------------------------------------------------------ */
.co-panel {
  padding: 0;
  margin-bottom: 20px;
}

.co-panel__cabecera {
  padding: 16px 20px;
  background: var(--gris-50);
  border-bottom: 1px solid var(--gris-200);
}

.co-panel__titulo {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--verde-900);
}

.co-panel__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--verde-800);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.co-panel__nota {
  margin: 5px 0 0 39px;
  font-size: 13px;
  color: var(--texto-suave);
}

.co-panel__cuerpo { padding: 20px; }

/* ------------------------------------------------------------------
   04. OPCIONES (retiro / despacho / documento / pago)
   ------------------------------------------------------------------ */
.co-opciones { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }

.co-opcion {
  padding: 14px 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  transition: border-color var(--transicion), background var(--transicion);
}
.co-opcion:hover { border-color: var(--gris-300); }
.co-opcion:has(.form-check-input:checked) {
  border-color: var(--verde-600);
  background: #f6fbf8;
}
.co-opcion:has(.form-check-input:focus-visible) {
  border-color: var(--verde-700);
  box-shadow: 0 0 0 .2rem rgba(10, 75, 42, .12);
}

.co-opcion .form-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  min-height: 0;
}
.co-opcion .form-check-input { flex: none; margin: 2px 0 0; }
.co-opcion .form-check-input:checked {
  background-color: var(--verde-700);
  border-color: var(--verde-700);
}
.co-opcion .form-check-label {
  display: grid;
  gap: 3px;
  font-size: 14px;
  color: var(--texto);
}
.co-opcion .form-check-label strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.co-opcion .form-check-label .icono {
  width: 17px;
  height: 17px;
  color: var(--verde-700);
}
.co-opcion .form-check-label span { font-size: 13px; color: var(--texto-suave); }

/* Bloques que aparecen según la opción elegida */
.co-dir,
.co-factura,
.co-tarjeta-wrap,
[data-panel-pago] { margin-top: 18px; }

/* ------------------------------------------------------------------
   05. DATOS DE LA TARJETA
   ------------------------------------------------------------------ */
.co-tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 100px;
  gap: 14px;
}
.co-tarjeta__nombre { grid-column: 1 / 2; }
.co-tarjeta__cuotas { grid-column: 2 / 4; }

/* ------------------------------------------------------------------
   06. PRODUCTOS DEL PEDIDO (lista compacta del resumen)
   ------------------------------------------------------------------ */
.co-items {
  display: grid;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gris-200);
}

.co-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.co-item__figura {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 4px;
  border: 1px solid var(--gris-200);
  border-radius: 6px;
  background: #fff;
}
.co-item__figura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.co-item__cantidad {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--verde-800);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

.co-item__datos { min-width: 0; }
.co-item__nombre {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texto);
}
.co-item__meta,
.co-item__unitario {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--texto-suave);
}
.co-item__subtotal {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--verde-900);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   07. DATOS, AYUDAS Y AVISOS
   ------------------------------------------------------------------ */
.co-ayuda {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.co-ayuda .icono {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--verde-700);
}

.co-opcional { font-weight: 400; color: var(--texto-suave); }

.co-datos {
  padding: 16px 18px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: var(--gris-50);
}
.co-datos__titulo {
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verde-800);
}
.co-datos__lista { display: grid; gap: 8px; font-size: 13.5px; }
.co-datos__lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.co-datos__lista span { color: var(--texto-suave); }
.co-datos__lista strong { color: var(--texto); text-align: right; }

.co-nota {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #f0e0b4;
  border-radius: 6px;
  background: #fffaf0;
  font-size: 12.5px;
  color: #7a5a00;
}

.co-terminos {
  padding: 16px 20px;
  margin-bottom: 20px;
}
.co-terminos .form-check { margin: 0; }
.co-terminos .form-check-label { font-size: 13.5px; color: var(--texto-suave); }
.co-terminos a { color: var(--verde-700); font-weight: 600; }

/* Botón de pago para móvil (el de desktop vive en el resumen) */
.co-acciones { margin-bottom: 8px; }

/* ------------------------------------------------------------------
   08. PEDIDO CONFIRMADO
   ------------------------------------------------------------------ */
.co-ok {
  align-items: center;          /* .card es flex: evita que el botón se estire */
  max-width: 720px;
  padding: 36px 26px;
  margin: 0 auto;
  text-align: center;
}
.co-ok__icono {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  color: var(--verde-600);
}
.co-ok__titulo {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 800;
  color: var(--verde-900);
}
.co-ok__texto {
  max-width: 54ch;
  margin: 0 auto 18px;
  font-size: 14px;
  color: var(--texto-suave);
}

.co-ok__pedido {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--gris-100);
  font-size: 13.5px;
  color: var(--texto-suave);
}
.co-ok__pedido strong { color: var(--verde-900); letter-spacing: .04em; }

.co-ok__datos {
  display: grid;
  gap: 9px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 20px;
  padding: 16px 18px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  text-align: left;
  font-size: 13.5px;
}
.co-ok__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
}
.co-ok__fila span { color: var(--texto-suave); }
.co-ok__fila strong { color: var(--texto); text-align: right; }

.co-ok__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ------------------------------------------------------------------
   09. CHECKOUT SIN PRODUCTOS
   ------------------------------------------------------------------ */
.co-vacio {
  align-items: center;
  max-width: 620px;
  padding: 44px 28px;
  margin: 0 auto;
  text-align: center;
}
.co-vacio__icono {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  color: var(--gris-300);
}
.co-vacio__titulo {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--verde-900);
}
.co-vacio__texto {
  max-width: 420px;
  margin: 0 auto 18px;
  font-size: 14px;
  color: var(--texto-suave);
}
.co-vacio__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ------------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .co-panel__cuerpo { padding: 18px 16px; }
  .co-panel__cabecera { padding: 14px 16px; }
  .co-panel__nota { margin-left: 0; }

  .co-terminos { padding: 16px; }

  .co-ok { padding: 28px 18px; }
  .co-ok__titulo { font-size: 21px; }
}

@media (max-width: 575.98px) {
  /* Tarjeta: número a todo el ancho, vencimiento y CVV en dos columnas */
  .co-tarjeta { grid-template-columns: 1fr 1fr; }
  .co-tarjeta__numero { grid-column: 1 / -1; }
  .co-tarjeta__nombre { grid-column: 1 / -1; }
  .co-tarjeta__cuotas { grid-column: 1 / -1; }

  .co-item { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
  .co-item__figura { width: 46px; height: 46px; }

  .pasos { gap: 6px 12px; font-size: 12.5px; }
  .pasos__item + .pasos__item::before { width: 14px; margin-right: 6px; }

  .co-ok__fila { flex-direction: column; gap: 2px; }
  .co-ok__fila strong { text-align: left; }
  .co-datos__lista li { flex-direction: column; gap: 2px; }
  .co-datos__lista strong { text-align: left; }
}