/**
 * UNOSKREATIVOS — ORDER WIZARD MOBILE
 * Archivo: /modules/order/order-mobile.css
 * Versión: 1.0.0
 *
 * Capa responsive aislada para el wizard multiproducto.
 * No modifica desktop/tablet ni la lógica del pedido.
 */

@media (max-width:640px){

    /* =====================================================
       01. CONTENEDOR GENERAL
    ===================================================== */

    #pedido-multiple{
        overflow-x:clip;
    }

    #pedido-multiple .container{
        width:100%;
        max-width:100%;
        padding-inline:12px;
    }

    #pedido-multiple .multi-process{
        padding-block:46px 64px;
    }

    #pedido-multiple .multi-shell{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden;
        border-radius:0;
    }

    #pedido-multiple .multi-body,
    #pedido-multiple .multi-page,
    #pedido-multiple .multi-grid,
    #pedido-multiple .multi-panel,
    #pedido-multiple .multi-review-list,
    #pedido-multiple .multi-review-item,
    #pedido-multiple .multi-ticket{
        min-width:0;
        max-width:100%;
    }

    #pedido-multiple .multi-body{
        padding:22px 14px 26px;
    }

    /* =====================================================
       02. STEPPER — 4 PASOS EN UNA SOLA FILA
    ===================================================== */

    #pedido-multiple .multi-steps{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:0;
        padding:9px 6px 8px;
        overflow:hidden;
    }

    #pedido-multiple .multi-step-pill{
        min-width:0;
        min-height:58px;
        padding:38px 2px 4px;
        text-align:center;
        font-size:7px;
        line-height:1.15;
        letter-spacing:.45px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    #pedido-multiple .multi-step-pill::before{
        left:50%;
        top:5px;
        width:27px;
        height:27px;
        transform:translateX(-50%);
        font-size:9px;
    }

    #pedido-multiple .multi-progress{
        height:3px;
    }

    /* =====================================================
       03. CABECERAS DE CADA PASO
    ===================================================== */

    #pedido-multiple .multi-head{
        display:block;
        margin-bottom:22px;
    }

    #pedido-multiple .multi-head .eyebrow{
        margin-bottom:12px;
        font-size:10px;
        letter-spacing:2px;
    }

    #pedido-multiple .multi-head h3{
        width:100%;
        max-width:100%;
        margin:0;
        font-size:clamp(2rem,9.2vw,2.55rem);
        line-height:.96;
        letter-spacing:-1.25px;
        text-wrap:balance;
        overflow-wrap:normal;
        word-break:normal;
    }

    #pedido-multiple .multi-head p{
        max-width:none;
        margin-top:18px;
        font-size:14px;
        line-height:1.65;
    }

    /* =====================================================
       04. PASO 1 — SELECCIÓN Y CARRITO
    ===================================================== */

    #pedido-multiple .multi-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    #pedido-multiple .multi-panel{
        padding:16px 14px;
    }

    #pedido-multiple .multi-panel-title{
        margin-bottom:16px;
    }

    #pedido-multiple .multi-panel-title strong{
        font-size:11px;
    }

    #pedido-multiple .grid-form{
        grid-template-columns:1fr;
        gap:13px;
    }

    #pedido-multiple .grid-form .field,
    #pedido-multiple .grid-form .field.full{
        grid-column:auto;
        min-width:0;
    }

    #pedido-multiple input,
    #pedido-multiple select,
    #pedido-multiple textarea{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    #pedido-multiple textarea{
        min-height:130px;
        resize:vertical;
    }

    #pedido-multiple .multi-qty{
        grid-template-columns:48px minmax(0,1fr) 48px;
        min-height:52px;
    }

    #pedido-multiple .multi-qty-center strong{
        font-size:19px;
    }

    #pedido-multiple .multi-add{
        min-height:54px;
        margin-top:14px;
    }

    #pedido-multiple .multi-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    #pedido-multiple .multi-sum{
        padding:11px 8px;
    }

    #pedido-multiple .multi-sum:last-child{
        grid-column:1 / -1;
    }

    /* Cart items enhanced by order-items-ui */
    #pedido-multiple .multi-item.order-item-ui__cart-item{
        grid-template-columns:58px minmax(0,1fr);
        align-items:start;
        gap:10px;
        padding:11px;
        overflow:hidden;
    }

    #pedido-multiple .order-item-ui__info{
        min-width:0;
        overflow:hidden;
    }

    #pedido-multiple .order-item-ui__name{
        font-size:12px;
        line-height:1.3;
        overflow-wrap:anywhere;
    }

    #pedido-multiple .order-item-ui__meta{
        font-size:8.5px;
        line-height:1.45;
        overflow-wrap:anywhere;
    }

    #pedido-multiple .order-item-ui__controls{
        grid-column:1 / -1;
        width:100%;
        display:grid;
        grid-template-columns:42px minmax(44px,1fr) 42px 42px;
        gap:6px;
    }

    #pedido-multiple .multi-mini{
        width:100%;
        height:40px;
    }

    /* =====================================================
       05. PASO 2 — REVISAR PEDIDO
    ===================================================== */

    #pedido-multiple .multi-review-list{
        gap:10px;
    }

    #pedido-multiple .multi-review-item.order-item-ui__review-item{
        position:relative;
        display:grid;
        grid-template-columns:64px minmax(0,1fr) 38px;
        grid-template-rows:auto auto;
        align-items:center;
        gap:6px 10px;
        padding:12px;
        overflow:hidden;
    }

    #pedido-multiple .multi-review-no{
        position:absolute;
        top:8px;
        left:8px;
        z-index:2;
        width:25px;
        height:25px;
        background:#080808;
        font-size:8px;
    }

    #pedido-multiple .order-item-ui__thumb--review{
        grid-column:1;
        grid-row:1 / span 2;
        width:64px;
        height:64px;
        border-radius:9px;
    }

    #pedido-multiple .multi-review-item .order-item-ui__info{
        grid-column:2;
        grid-row:1;
        min-width:0;
        align-self:start;
        overflow:hidden;
    }

    #pedido-multiple .multi-review-item .order-item-ui__name{
        margin:0 0 4px;
        font-size:12px;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    #pedido-multiple .multi-review-item .order-item-ui__service{
        font-size:8.5px;
        line-height:1.35;
    }

    #pedido-multiple .multi-review-item .order-item-ui__meta{
        margin-top:5px;
        font-size:8.5px;
        line-height:1.4;
        overflow-wrap:anywhere;
    }

    #pedido-multiple .multi-review-item .order-item-ui__price{
        margin-top:5px;
        font-size:10px;
    }

    /* Convert wrapper into transparent layout so qty/remove use card grid */
    #pedido-multiple .order-item-ui__review-actions{
        display:contents;
    }

    #pedido-multiple .order-item-ui__review-qty{
        grid-column:2;
        grid-row:2;
        align-self:end;
        justify-self:start;
        margin:0;
        color:var(--accent);
        font-size:10px;
        line-height:1.2;
        text-align:left;
        white-space:normal;
    }

    #pedido-multiple .order-item-ui__review-remove{
        grid-column:3;
        grid-row:1 / span 2;
        align-self:center;
        justify-self:end;
        width:38px;
        height:38px;
        border-radius:10px;
    }

    #pedido-multiple .multi-total{
        display:grid;
        grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
        align-items:center;
        gap:12px;
        margin-top:14px;
        padding:16px 14px;
    }

    #pedido-multiple .multi-total > span{
        min-width:0;
        font-size:13px;
        line-height:1.35;
    }

    #pedido-multiple #mwReviewTotal{
        min-width:0;
        max-width:100%;
        font-size:19px;
        line-height:1.22;
        text-align:right;
        overflow-wrap:anywhere;
    }

    /* =====================================================
       06. PASO 3 — DATOS
    ===================================================== */

    #pedido-multiple #mwCustomerForm .grid-form{
        grid-template-columns:1fr;
    }

    #pedido-multiple .multi-note{
        margin-top:14px;
        padding:11px 12px;
        font-size:10px;
        line-height:1.55;
    }

    /* =====================================================
       07. PASO 4 — TICKET
    ===================================================== */

    #pedido-multiple .multi-ticket{
        padding:16px 13px;
    }

    #pedido-multiple .multi-ticket-id{
        max-width:100%;
        font-size:clamp(1.2rem,6.2vw,1.55rem);
        line-height:1.15;
        overflow-wrap:anywhere;
    }

    #pedido-multiple .multi-ticket-grid{
        grid-template-columns:1fr;
        gap:8px;
    }

    #pedido-multiple .multi-ticket-cell strong{
        display:block;
        max-width:100%;
        overflow-wrap:anywhere;
    }

    #pedido-multiple .uk-ticket-product{
        grid-template-columns:24px 52px minmax(0,1fr) !important;
        gap:8px !important;
        padding:12px 0 !important;
    }

    #pedido-multiple .uk-ticket-product__thumb{
        width:52px;
        height:52px;
    }

    #pedido-multiple .uk-ticket-product__summary{
        grid-column:2 / -1;
        justify-content:flex-end;
        min-width:0;
        display:flex;
        flex-wrap:wrap;
        gap:7px 10px;
    }

    /* =====================================================
       08. ACCIONES
    ===================================================== */

    #pedido-multiple .multi-actions{
        margin-top:22px;
        padding-top:16px;
        flex-direction:column-reverse;
        align-items:stretch;
        gap:10px;
    }

    #pedido-multiple .multi-actions > span:empty{
        display:none;
    }

    #pedido-multiple .multi-btn{
        width:100%;
        min-height:52px;
        padding-inline:14px;
        font-size:10px;
    }

    /* =====================================================
       09. EVITAR DESBORDAMIENTOS
    ===================================================== */

    #pedido-multiple *,
    #pedido-multiple *::before,
    #pedido-multiple *::after{
        box-sizing:border-box;
    }

    #pedido-multiple strong,
    #pedido-multiple p,
    #pedido-multiple span{
        max-width:100%;
    }

    /* Floating cart: JS adds this class while wizard is visible */
    .order-floating-cart.is-context-hidden{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:translateY(10px) !important;
    }
}

@media (max-width:380px){

    #pedido-multiple .container{
        padding-inline:8px;
    }

    #pedido-multiple .multi-body{
        padding:18px 10px 22px;
    }

    #pedido-multiple .multi-step-pill{
        font-size:6.3px;
        letter-spacing:.2px;
    }

    #pedido-multiple .multi-head h3{
        font-size:clamp(1.8rem,9.4vw,2.1rem);
    }

    #pedido-multiple .multi-review-item.order-item-ui__review-item{
        grid-template-columns:56px minmax(0,1fr) 34px;
        gap:6px 8px;
        padding:10px;
    }

    #pedido-multiple .order-item-ui__thumb--review{
        width:56px;
        height:56px;
    }

    #pedido-multiple .order-item-ui__review-remove{
        width:34px;
        height:34px;
    }

    #pedido-multiple .multi-total{
        grid-template-columns:1fr;
        gap:6px;
    }

    #pedido-multiple #mwReviewTotal{
        text-align:left;
    }
}