/**
 * UNOSKREATIVOS — ORDER ITEMS UI
 * Archivo: /modules/order/order-items-ui.css
 * Versión: 1.0.0
 */

/* =========================================================
   01. MINIATURAS
========================================================= */

.order-item-ui__thumb{
    position:relative;
    flex:0 0 auto;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:#101010;
}

.order-item-ui__thumb--cart{
    width:64px;
    height:64px;
}

.order-item-ui__thumb--review{
    width:70px;
    height:70px;
}

.order-item-ui__thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================================================
   02. PASO 1 — TU PEDIDO
========================================================= */

.multi-item.order-item-ui__cart-item{
    display:grid;
    grid-template-columns:64px minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    padding:14px;
}

.order-item-ui__info{
    min-width:0;
}

.order-item-ui__name{
    display:block;
    margin:0 0 4px;
    color:#fff;
    font-size:13px;
    line-height:1.28;
    font-weight:850;
    overflow-wrap:anywhere;
}

.order-item-ui__service{
    margin:0;
    color:#747474;
    font-size:9px;
    line-height:1.35;
}

.order-item-ui__meta{
    margin:5px 0 0;
    color:#a4a4a4;
    font-size:9px;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.order-item-ui__price{
    display:inline-block;
    margin-top:6px;
    color:var(--accent,#ccff00);
    font-size:10px;
    font-weight:900;
}

.order-item-ui__controls{
    flex:0 0 auto;
}

.order-item-ui__remove{
    color:#f2f2f2;
    border-color:rgba(255,255,255,.14);
}

.order-item-ui__remove:hover,
.order-item-ui__remove:focus-visible{
    color:#050505;
    background:#ff5a5a;
    border-color:#ff5a5a;
}

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

.multi-review-item.order-item-ui__review-item{
    display:grid;
    grid-template-columns:34px 70px minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    padding:14px 16px;
}

.order-item-ui__review-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

.order-item-ui__review-qty{
    white-space:nowrap;
}

.order-item-ui__review-remove{
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.15);
    border-radius:8px;
    background:#0c0c0c;
    color:#fff;
    font:inherit;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.order-item-ui__review-remove:hover,
.order-item-ui__review-remove:focus-visible{
    border-color:#ff5a5a;
    background:#ff5a5a;
    color:#050505;
    outline:none;
    box-shadow:0 0 0 3px rgba(255,90,90,.14);
}

/* =========================================================
   04. TABLET
========================================================= */

@media(max-width:860px){
    .multi-item.order-item-ui__cart-item{
        grid-template-columns:58px minmax(0,1fr);
    }

    .order-item-ui__thumb--cart{
        width:58px;
        height:58px;
    }

    .order-item-ui__controls{
        grid-column:1 / -1;
        justify-self:end;
    }

    .multi-review-item.order-item-ui__review-item{
        grid-template-columns:32px 62px minmax(0,1fr) auto;
        gap:10px;
    }

    .order-item-ui__thumb--review{
        width:62px;
        height:62px;
    }
}

/* =========================================================
   05. MOBILE
========================================================= */

@media(max-width:640px){
    .multi-item.order-item-ui__cart-item{
        grid-template-columns:58px minmax(0,1fr);
        align-items:start;
        gap:11px;
        padding:12px;
    }

    .order-item-ui__controls{
        grid-column:1 / -1;
        width:100%;
        display:grid;
        grid-template-columns:40px 1fr 40px 40px;
        justify-self:stretch;
    }

    .order-item-ui__qty{
        display:grid;
        place-items:center;
    }

    .multi-review-item.order-item-ui__review-item{
        grid-template-columns:28px 58px minmax(0,1fr) 38px;
        gap:9px;
        padding:12px 10px;
    }

    .order-item-ui__thumb--review{
        width:58px;
        height:58px;
    }

    .order-item-ui__review-actions{
        display:grid;
        grid-template-columns:1fr;
        justify-items:end;
        gap:7px;
    }

    .order-item-ui__review-qty{
        grid-column:1 / -1;
        font-size:9px;
        text-align:right;
    }

    .order-item-ui__review-remove{
        width:36px;
        height:36px;
    }

    .order-item-ui__name{
        font-size:11px;
    }

    .order-item-ui__service,
    .order-item-ui__meta{
        font-size:8px;
    }
}

@media(max-width:430px){
    .multi-review-item.order-item-ui__review-item{
        grid-template-columns:24px 52px minmax(0,1fr) 34px;
        gap:7px;
    }

    .order-item-ui__thumb--review{
        width:52px;
        height:52px;
    }

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

@media(prefers-reduced-motion:reduce){
    .order-item-ui__review-remove,
    .order-item-ui__remove{
        transition-duration:.001ms !important;
    }
}