/**
 * UNOSKREATIVOS — ORDER FEEDBACK
 * Archivo: /modules/order/order-feedback.css
 * Versión: 1.1.0
 *
 * Responsabilidad:
 * - Confirmación visual al agregar un producto al pedido.
 * - CTA "Seguir comprando".
 * - CTA "Ver pedido".
 * - Resumen breve de producto, variante y cantidad.
 * - Badge flotante con total de unidades.
 * - Responsive desktop / mobile.
 *
 * IMPORTANTE:
 * Este archivo NO crea un carrito independiente.
 * Solo representa visualmente el estado del pedido existente.
 */

/* =========================================================
   01. ROOT
========================================================= */

.order-feedback{
    --of-bg:#0a0a0a;
    --of-panel:#101010;
    --of-line:rgba(255,255,255,.10);
    --of-text:#f4f4f4;
    --of-muted:#969696;
    --of-accent:var(--accent,#ccff00);
    --of-accent-2:var(--accent2,#b3e600);
    --of-green:var(--green,#25d366);
    --of-shadow:0 28px 80px rgba(0,0,0,.50);
    --of-focus:0 0 0 3px rgba(204,255,0,.22);

    position:fixed;
    inset:auto 22px 22px auto;
    z-index:9980;
    width:min(410px,calc(100vw - 44px));
    pointer-events:none;
    opacity:0;
    transform:translateY(18px) scale(.985);
    transition:
        opacity .22s ease,
        transform .22s cubic-bezier(.2,.7,.2,1);
}

.order-feedback.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.order-feedback[hidden]{
    display:none !important;
}

.order-feedback *,
.order-feedback *::before,
.order-feedback *::after{
    box-sizing:border-box;
}

/* =========================================================
   02. CARD
========================================================= */

.order-feedback__card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(204,255,0,.24);
    border-radius:18px;
    background:
        radial-gradient(circle at 100% 0%,rgba(204,255,0,.07),transparent 34%),
        linear-gradient(145deg,rgba(255,255,255,.025),transparent 44%),
        var(--of-bg);
    color:var(--of-text);
    box-shadow:var(--of-shadow);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.order-feedback__card::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--of-accent),
        transparent
    );
}

/* =========================================================
   03. HEADER
========================================================= */

.order-feedback__header{
    display:flex;
    align-items:center;
    gap:11px;
    padding:16px 52px 13px 16px;
    border-bottom:1px solid var(--of-line);
}

.order-feedback__check{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--of-accent);
    color:#050505;
    box-shadow:0 8px 24px rgba(204,255,0,.12);
}

.order-feedback__check svg{
    width:18px;
    height:18px;
}

.order-feedback__heading{
    min-width:0;
}

.order-feedback__eyebrow{
    display:block;
    margin-bottom:2px;
    color:var(--of-accent);
    font-size:8px;
    font-weight:950;
    letter-spacing:1.35px;
    text-transform:uppercase;
}

.order-feedback__title{
    margin:0;
    color:#fff;
    font-size:14px;
    line-height:1.2;
    font-weight:900;
}

.order-feedback__close{
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    background:#0c0c0c;
    color:#aaa;
    cursor:pointer;
    transition:.2s ease;
}

.order-feedback__close:hover,
.order-feedback__close:focus-visible{
    color:#050505;
    border-color:var(--of-accent);
    background:var(--of-accent);
    outline:none;
    box-shadow:var(--of-focus);
}

.order-feedback__close svg{
    width:16px;
    height:16px;
}

/* =========================================================
   04. PRODUCT SUMMARY
========================================================= */

.order-feedback__product{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:13px;
    padding:14px 16px;
}

.order-feedback__image{
    width:72px;
    height:72px;
    overflow:hidden;
    border:1px solid var(--of-line);
    border-radius:11px;
    background:#141414;
}

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

.order-feedback__info{
    min-width:0;
    align-self:center;
}

.order-feedback__name{
    margin:0 0 6px;
    color:#fff;
    font-size:13px;
    line-height:1.25;
    font-weight:850;
}

.order-feedback__meta{
    display:flex;
    flex-wrap:wrap;
    gap:5px 8px;
    color:var(--of-muted);
    font-size:9px;
    line-height:1.35;
}

.order-feedback__meta span{
    display:inline-flex;
    align-items:center;
}

.order-feedback__price{
    margin-top:7px;
    color:var(--of-accent);
    font-size:13px;
    line-height:1;
    font-weight:950;
}

/* =========================================================
   05. ORDER SUMMARY
========================================================= */

.order-feedback__summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    padding:0 16px 14px;
}

.order-feedback__metric{
    padding:10px 11px;
    border:1px solid var(--of-line);
    border-radius:10px;
    background:#0c0c0c;
}

.order-feedback__metric span{
    display:block;
    margin-bottom:4px;
    color:#737373;
    font-size:7px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.order-feedback__metric strong{
    color:#fff;
    font-size:13px;
}

.order-feedback__metric--total{
    border-color:rgba(204,255,0,.22);
    background:rgba(204,255,0,.035);
}

.order-feedback__metric--total strong{
    color:var(--of-accent);
}

/* =========================================================
   06. ACTIONS
========================================================= */

.order-feedback__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    padding:14px 16px 16px;
    border-top:1px solid var(--of-line);
}

.order-feedback__button{
    min-height:44px;
    padding:0 13px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font:inherit;
    font-size:9px;
    font-weight:950;
    letter-spacing:.65px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.2s ease;
}

.order-feedback__button svg{
    width:16px;
    height:16px;
}

.order-feedback__button:focus-visible{
    outline:none;
    box-shadow:var(--of-focus);
}

.order-feedback__button--continue{
    border:1px solid rgba(255,255,255,.14);
    background:#0d0d0d;
    color:#e3e3e3;
}

.order-feedback__button--continue:hover{
    border-color:rgba(204,255,0,.35);
    color:var(--of-accent);
}

.order-feedback__button--order{
    border:1px solid var(--of-accent);
    background:var(--of-accent);
    color:#050505;
}

.order-feedback__button--order:hover{
    border-color:var(--of-accent-2);
    background:var(--of-accent-2);
}

/* =========================================================
   07. FLOATING ORDER BADGE
========================================================= */

.order-floating-cart{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:9970;
    min-width:56px;
    height:56px;
    padding:0 15px;
    border:1px solid rgba(204,255,0,.34);
    border-radius:999px;
    background:#0a0a0a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    box-shadow:0 18px 50px rgba(0,0,0,.38);
    cursor:pointer;
    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.order-floating-cart:hover,
.order-floating-cart:focus-visible{
    transform:translateY(-2px);
    color:#050505;
    border-color:var(--of-accent);
    background:var(--of-accent);
    outline:none;
    box-shadow:var(--of-focus),0 18px 50px rgba(0,0,0,.38);
}

.order-floating-cart[hidden]{
    display:none !important;
}

.order-floating-cart svg{
    width:20px;
    height:20px;
}

.order-floating-cart__count{
    min-width:22px;
    height:22px;
    padding:0 6px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:var(--of-accent);
    color:#050505;
    font-size:10px;
    font-weight:950;
}

.order-floating-cart:hover .order-floating-cart__count,
.order-floating-cart:focus-visible .order-floating-cart__count{
    background:#050505;
    color:var(--of-accent);
}

.order-floating-cart__label{
    font-size:9px;
    font-weight:950;
    letter-spacing:.6px;
    text-transform:uppercase;
}

/* When feedback is visible, place the floating badge above it. */
body.order-feedback-visible .order-floating-cart{
    bottom:318px;
}

/* =========================================================
   08. LIVE REGION
========================================================= */

.order-feedback__live{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

/* =========================================================
   09. TABLET
========================================================= */

@media (max-width:820px){
    .order-feedback{
        right:16px;
        bottom:16px;
        width:min(390px,calc(100vw - 32px));
    }

    .order-floating-cart{
        right:16px;
        bottom:16px;
    }

    body.order-feedback-visible .order-floating-cart{
        bottom:306px;
    }
}

/* =========================================================
   10. MOBILE — BOTTOM CONFIRMATION
========================================================= */

@media (max-width:640px){
    .order-feedback{
        inset:auto 0 0;
        width:100%;
        transform:translateY(100%);
        opacity:1;
    }

    .order-feedback.is-visible{
        transform:translateY(0);
    }

    .order-feedback__card{
        border-radius:22px 22px 0 0;
        border-inline:1px solid rgba(255,255,255,.11);
        border-bottom:0;
        padding-bottom:env(safe-area-inset-bottom,0px);
        box-shadow:0 -22px 70px rgba(0,0,0,.48);
    }

    .order-feedback__card::after{
        content:"";
        position:absolute;
        top:8px;
        left:50%;
        width:44px;
        height:4px;
        transform:translateX(-50%);
        border-radius:999px;
        background:#484848;
    }

    .order-feedback__header{
        padding-top:22px;
    }

    .order-feedback__product{
        grid-template-columns:64px minmax(0,1fr);
    }

    .order-feedback__image{
        width:64px;
        height:64px;
    }

    .order-feedback__actions{
        grid-template-columns:1fr;
    }

    .order-feedback__button{
        min-height:48px;
    }

    .order-floating-cart{
        right:14px;
        bottom:calc(14px + env(safe-area-inset-bottom,0px));
        min-width:54px;
        height:54px;
        padding-inline:14px;
    }

    body.order-feedback-visible .order-floating-cart{
        bottom:calc(360px + env(safe-area-inset-bottom,0px));
    }

    .order-floating-cart__label{
        display:none;
    }
}

/* =========================================================
   11. SMALL MOBILE
========================================================= */

@media (max-width:390px){
    .order-feedback__header{
        padding-inline:13px 50px;
    }

    .order-feedback__product,
    .order-feedback__summary,
    .order-feedback__actions{
        padding-inline:13px;
    }

    .order-feedback__name{
        font-size:12px;
    }

    .order-feedback__summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .order-feedback__metric--total{
        grid-column:1 / -1;
    }

    .order-feedback__metric{
        padding:9px;
    }

    body.order-feedback-visible .order-floating-cart{
        bottom:calc(372px + env(safe-area-inset-bottom,0px));
    }
}

/* =========================================================
   12. ACCESSIBILITY / USER PREFERENCES
========================================================= */

@media (prefers-reduced-motion:reduce){
    .order-feedback,
    .order-feedback *,
    .order-floating-cart{
        transition-duration:.001ms !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
    }
}

@media (prefers-contrast:more){
    .order-feedback__card,
    .order-feedback__metric,
    .order-feedback__button--continue,
    .order-floating-cart{
        border-color:#5c5c5c;
    }

    .order-feedback__button--order{
        border-color:var(--of-accent);
    }
}