/* Bui mascot UI: màn hình tải trang, thêm vào giỏ, trang 404. Dùng chung token với main.css. */
:root{--bui-red:var(--bag-red,#BC1823);--bui-cream:#FFFDFA;--bui-ink:var(--ink,#231F20)}

/* ---------- 1. Màn hình tải trang ---------- */
.bui-loader{position:fixed;inset:0;z-index:250;display:grid;place-items:center;background:var(--bui-cream);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s;pointer-events:none}
/* Chỉ hiện khi trang tải chậm hơn 0,6 giây, để trang nhanh không bị nháy */
.bui-loader.is-on{animation:bui-loader-in .25s ease .6s both}
@keyframes bui-loader-in{from{opacity:0;visibility:hidden;pointer-events:none}to{opacity:1;visibility:visible;pointer-events:auto}}
.bui-loader__lane{position:relative;width:min(420px,80vw);height:200px;overflow:hidden}
.bui-loader__rider{position:absolute;bottom:14px;left:-150px;width:140px;animation:bui-cross 2.8s linear infinite}
.bui-loader__rider img{display:block;width:100%;height:auto}
.bui-loader__road{position:absolute;left:0;right:0;bottom:10px;height:3px;opacity:.45;
  background:repeating-linear-gradient(90deg,var(--bui-red) 0 12px,transparent 12px 24px)}
.bui-loader__text{margin-top:14px;text-align:center;font-weight:700;font-size:14px;color:var(--bui-red)}
.bui-loader__text i{font-style:normal;animation:bui-blink 1.2s infinite}
.bui-loader__text i:nth-child(2){animation-delay:.2s}.bui-loader__text i:nth-child(3){animation-delay:.4s}
@keyframes bui-cross{to{left:calc(100% + 10px)}}
@keyframes bui-blink{0%,100%{opacity:.2}50%{opacity:1}}

/* Vùng tải nhỏ trong trang (danh sách sản phẩm, bộ lọc): thêm class .bui-loading vào khung */
.bui-loading{position:relative;min-height:160px}
.bui-loading::after{content:"";position:absolute;left:50%;top:50%;width:110px;height:126px;margin:-63px 0 0 -55px;
  background:url(../img/mascot/bui-mascot-goc-truot-van.svg) center/contain no-repeat;z-index:5}
.bui-loading>*{opacity:.35;transition:opacity .2s}

/* ---------- 2. Thêm vào giỏ ---------- */
.bui-bean{position:fixed;left:0;top:0;width:18px;height:24px;z-index:260;pointer-events:none;
  background:url(../img/mascot/bui-hat-ca-phe.svg) center/contain no-repeat;will-change:transform}
[data-cart-open].bui-bump{animation:bui-bump .45s ease}
@keyframes bui-bump{40%{transform:scale(1.22)}70%{transform:scale(.95)}}
/* Toast có sẵn của theme: chỉ gắn thêm mascot khi vừa thêm vào giỏ */
.toast.bui-toast-mascot{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;background:var(--bui-red)}
.toast.bui-toast-mascot::before{content:"";flex:none;width:58px;height:50px;border-radius:10px;
  background:var(--bui-cream) url(../img/mascot/bui-mascot-goc-ngoi.svg) center/88% no-repeat}

/* ---------- 3. Trang 404 (bọc ngoài là .sec có sẵn của theme) ---------- */
.bui-404__stage{position:relative;width:min(360px,80vw);margin:0 auto;aspect-ratio:1/1;overflow:hidden}
.bui-404__code{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:clamp(96px,20vw,160px);
  letter-spacing:-.04em;color:var(--bui-red);opacity:.12;line-height:1;user-select:none}
.bui-404__guy{position:absolute;left:50%;bottom:22%;width:52%;margin-left:-26%;transform-origin:50% 96%}
.bui-404__guy img{display:block;width:100%;height:auto}
.bui-404.is-falling .bui-404__guy{animation:bui-tumble 1.8s cubic-bezier(.5,0,.6,1) .5s forwards}
@keyframes bui-tumble{0%{transform:none}15%{transform:rotate(-7deg)}30%{transform:rotate(6deg)}
  60%{transform:translate(-20%,-2%) rotate(60deg)}82%{transform:translate(-62%,-6%) rotate(96deg)}100%{transform:translate(-58%,-4%) rotate(90deg)}}
.bui-404__replay{background:none;border:0;color:var(--bui-red);font:inherit;font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .bui-loader__rider{animation:none;left:calc(50% - 70px)}
  .bui-loader__text i{animation:none;opacity:1}
  .bui-404.is-falling .bui-404__guy{animation:none}
  [data-cart-open].bui-bump{animation:none}
}