/* ========================================================
   MODAL DE DETALLE DE PEDIDO — ver inc/pedido-modal.php / js/pedido-modal.js.
   A diferencia del formulario de recetas (que se pidió como swap DENTRO de
   la tarjeta, sin ventana), acá el usuario pidió explícitamente que sea una
   ventana/modal — mismo lenguaje visual de overlay que se usó antes para
   recetas, reaplicado acá.
   ======================================================== */
.mmc-pedido-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mmc-pedido-modal-caja {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mmc-pedido-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid #eee;
}
.mmc-pedido-modal-header h2 { margin: 0; font-size: 20px; color: #111; }
.mmc-pedido-modal-cuerpo {
    padding: 24px 28px;
    overflow-y: auto;
}

.mmc-pedido-resumen {
    font-size: 14px;
    color: #444;
    margin: 0 0 20px;
}

.mmc-pedido-subtitulo {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin: 24px 0 12px;
}
.mmc-pedido-subtitulo:first-of-type { margin-top: 0; }

.mmc-pedido-actualizaciones {
    list-style: none;
    counter-reset: mmc-actualizacion;
    padding: 0;
    margin: 0 0 8px;
}
.mmc-pedido-actualizaciones li {
    counter-increment: mmc-actualizacion;
    position: relative;
    padding-left: 26px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}
.mmc-pedido-actualizaciones li::before {
    content: counter(mmc-actualizacion) ".";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #111;
}
.mmc-pedido-actualizaciones li strong { color: #111; }

.mmc-pedido-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}
/* La tarjeta de producto en sí (imagen, título+precio, desglose, "Total parcial") reusa
   LITERALMENTE las clases .mmc-cart-item* de css/carrito-premium.css (ver mmc_render_item_pedido()
   en inc/pedido-modal.php) — nada propio acá para esa parte, a propósito, así el pedido se ve
   igual que el carrito sin mantener el mismo diseño en 2 lugares.

   Ese CSS tiene un breakpoint mobile (≤950px) que oculta el precio/detalle "de escritorio" y
   muestra en su lugar una versión colapsable pensada para la PÁGINA del carrito — acá, dentro del
   modal, nunca se imprime esa versión mobile alternativa (mmc_render_item_pedido() solo arma UNA),
   así que hay que forzar que la de escritorio se quede visible siempre, sin importar el ancho real
   de la ventana. */
#mmc-pedido-modal-overlay .mmc-cart-item-price,
#mmc-pedido-modal-overlay .mmc-cart-item-detalle-desktop {
    display: block !important;
}
#mmc-pedido-modal-overlay .mmc-cart-item-header {
    align-items: baseline !important;
}
#mmc-pedido-modal-overlay .mmc-cart-item {
    padding: 0 0 16px;
    border-bottom: 1px solid #f0f0f0;
}
#mmc-pedido-modal-overlay .mmc-cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Listado simple de respaldo (pedidos viejos, sin el detalle enriquecido tipo carrito) */
.mmc-pedido-item-meta-simple {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mmc-pedido-item-meta-fila { font-size: 12px; color: #777; }
.mmc-pedido-item-meta-fila span:first-child { font-weight: 600; color: #555; }

.mmc-pedido-totales {
    border-top: 1px solid #eee;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.mmc-pedido-fila-total {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
}
.mmc-pedido-fila-total-final {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

/* Cupón — el monto descontado en rojo, pedido explícito del usuario */
.mmc-pedido-fila-cupon span:last-child {
    color: #c0392b;
    font-weight: 600;
}

/* "Ahorras S/X" (ver mmc_render_precio_con_ahorro en inc/pedido-modal.php) — se usa tanto en cada
   tarjeta de producto (.mmc-cart-item-subtotal) como en el resumen general (.mmc-pedido-fila-total) */
.mmc-cart-item-subtotal del,
.mmc-pedido-fila-total del {
    color: #999;
    font-weight: 400;
    margin-right: 4px;
}
.mmc-pedido-ahorras {
    color: #1a7d3c;
    font-weight: 600;
    margin-right: 4px;
}

.mmc-pedido-direcciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mmc-pedido-direccion-caja {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
}
.mmc-pedido-direccion-caja h4 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #111;
}
.mmc-pedido-direccion-caja p {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .mmc-pedido-direcciones {
        grid-template-columns: 1fr;
    }
}