/* Zel Assist — loaders. Shared by every page (dashboard, store, discover, auth, billing).
   Two things live here:
   1) .tri  — the brand loader: three circles at the corners of a triangle, spinning.
   2) .skel — skeleton placeholders with a soft shimmer, used while real data loads. */

/* The `hidden` attribute must always win, even over classes that set `display`.
   (A class like .btn{display:inline-flex} otherwise overrides it and "hidden" buttons show.) */
[hidden]{display:none!important}

/* ---------- 1) triangle loader ---------- */
.tri{--tri-size:44px;--tri-dot:calc(var(--tri-size)*.34);--c1:var(--teal,#0E8074);--c2:var(--teal-bright,#14B8A6);--c3:var(--amber,#F2B544);
  position:relative;display:inline-block;width:var(--tri-size);height:var(--tri-size);flex-shrink:0;animation:tri-spin 1.5s cubic-bezier(.6,.1,.4,.9) infinite}
.tri i{position:absolute;width:var(--tri-dot);height:var(--tri-dot);border-radius:50%}
.tri i:nth-child(1){top:0;left:50%;margin-left:calc(var(--tri-dot)/-2);background:var(--c1)}
.tri i:nth-child(2){bottom:0;left:0;background:var(--c2)}
.tri i:nth-child(3){bottom:0;right:0;background:var(--c3)}
.tri.sm{--tri-size:20px}
.tri.xs{--tri-size:14px}
.tri.lg{--tri-size:64px}
.tri.on-dark{--c1:#fff;--c2:#7FE3D6;--c3:#F2B544}
@keyframes tri-spin{to{transform:rotate(360deg)}}

.loading-block{display:grid;place-items:center;gap:14px;padding:56px 16px;color:var(--ink-soft,#52615F);font-size:.95rem}
.page-loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg,#F4F6F5);transition:opacity .25s ease}
.page-loader.done{opacity:0;pointer-events:none}

/* button busy state: the same three-circle triangle, drawn with gradients, spinning over the label */
.is-busy{position:relative;color:transparent!important;pointer-events:none}
.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;animation:tri-spin 1s cubic-bezier(.6,.1,.4,.9) infinite;
  background:
    radial-gradient(circle 3.4px at 50% 14%,var(--busy-c,#fff) 96%,transparent 100%),
    radial-gradient(circle 3.4px at 14% 82%,var(--busy-c,#fff) 96%,transparent 100%),
    radial-gradient(circle 3.4px at 86% 82%,var(--busy-c,#fff) 96%,transparent 100%)}
.btn-secondary.is-busy,.btn:not(.primary).is-busy,.btn-danger.is-busy{--busy-c:var(--teal,#0E8074)}

/* ---------- 2) skeletons ---------- */
.skel{position:relative;overflow:hidden;background:#E6ECEA;border-radius:10px;color:transparent!important;user-select:none}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:skel-shimmer 1.35s ease-in-out infinite}
@keyframes skel-shimmer{to{transform:translateX(100%)}}
.skel-line{height:14px;margin:8px 0}
.skel-line.w30{width:30%}.skel-line.w50{width:50%}.skel-line.w70{width:70%}.skel-line.w90{width:90%}
.skel-title{height:24px;width:60%;margin:6px 0 12px}
.skel-circle{border-radius:50%}
.skel-card{background:var(--surface,#fff);border:1px solid var(--border,#E3E8E6);border-radius:var(--radius-md,18px);padding:16px;margin-bottom:12px}
.skel-hero{height:210px;border-radius:var(--radius-lg,24px);margin-bottom:14px}
.skel-row{display:flex;gap:12px;align-items:center}
.skel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:640px){.skel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.skel-sq{aspect-ratio:1/1;border-radius:14px}
.skel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.skel-kpis .skel{height:78px;border-radius:18px}

@media(prefers-reduced-motion:reduce){
  .tri{animation-duration:3s}
  .skel::after{animation:none;background:none}
  .is-busy::after{animation-duration:2.4s}
}

body.no-scroll{overflow:hidden}
.status-pill:empty{display:none}