/* ================================================================
   getecart UX kit — shared animations & components for account pages
   (same look as my-orders.html). Use with js/ux.js. Prefix: ux-
   ================================================================ */
:root{--ux-ease:cubic-bezier(.2,.8,.2,1);--ux-fast:.18s;--ux-med:.32s;--ux-r:20px;
  --ux-blue:#3b82f6;--ux-violet:#7c3aed;--ux-amber:#f59e0b;--ux-rose:#e11d48;--ux-teal:#0d9488}
.ux-wrap{max-width:1040px}
.fc-dash-main{min-width:0}

/* entrance */
.ux-in{opacity:0;transform:translateY(14px);animation:uxIn .5s var(--ux-ease) forwards}
@keyframes uxIn{to{opacity:1;transform:none}}

/* hero */
.ux-hero{position:relative;overflow:hidden;border-radius:24px;padding:26px 26px 22px;background:linear-gradient(120deg,#ecfdf5,#eff6ff 55%,#f5f3ff);border:1px solid #e3eaf5}
.ux-hero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.18),transparent 65%);pointer-events:none}
.ux-hero h1{font-family:"Sora",sans-serif;font-weight:800;font-size:clamp(1.45rem,3vw,1.9rem);letter-spacing:-.02em;margin:0 0 4px;color:var(--ink)}
.ux-hero p{margin:0;color:var(--muted);font-size:.98rem;position:relative;z-index:1}
.ux-hero.warm{background:linear-gradient(120deg,#fff7ed,#fef2f2 55%,#f5f3ff)}
.ux-hero.cool{background:linear-gradient(120deg,#eff6ff,#f5f3ff 55%,#ecfeff)}
.ux-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;position:relative;z-index:1}
.ux-kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ux-kpi{background:rgba(255,255,255,.85);border:1px solid #e6ecf5;border-radius:16px;padding:12px 14px;display:flex;gap:11px;align-items:center;min-width:0;transition:transform var(--ux-fast) var(--ux-ease),box-shadow var(--ux-fast)}
.ux-kpi:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.08)}
.ux-kpi .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;font-size:1.05rem}
.ux-kpi b{display:block;font-family:"Sora",sans-serif;font-size:1.2rem;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.ux-kpi small{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.g-green{background:var(--grad-green)}.g-blue{background:linear-gradient(120deg,#2563eb,#60a5fa)}.g-violet{background:linear-gradient(120deg,#7c3aed,#a78bfa)}.g-amber{background:linear-gradient(120deg,#f59e0b,#f97316)}.g-rose{background:linear-gradient(120deg,#e11d48,#fb7185)}.g-teal{background:linear-gradient(120deg,#0d9488,#2dd4bf)}

/* panels / sections */
.ux-panel{background:#fff;border:1px solid var(--line);border-radius:var(--ux-r);padding:20px;transition:box-shadow var(--ux-med),border-color var(--ux-med)}
.ux-panel:hover{border-color:#dbe3ee}
.ux-panel h2{font-family:"Sora",sans-serif;font-size:1.08rem;font-weight:700;margin:0 0 4px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.ux-panel h2 .bi{color:var(--green)}
.ux-panel .lead{color:var(--muted);font-size:.88rem;margin:0 0 16px}
.ux-stack{display:grid;gap:14px;margin-top:14px}
.ux-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ux-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

/* toolbar: search + dropdown */
.ux-bar{display:flex;gap:10px;align-items:center;margin:20px 0 12px;flex-wrap:wrap}
.ux-search{flex:1 1 240px;display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;transition:border-color var(--ux-fast),box-shadow var(--ux-fast)}
.ux-search:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.ux-search i{color:var(--muted)}
.ux-search input{border:0;outline:0;flex:1;min-width:0;font-size:.95rem;background:none}
.ux-dd{position:relative}
.ux-dd>button{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;font-weight:600;font-size:.9rem;color:var(--ink-2);transition:border-color var(--ux-fast)}
.ux-dd>button:hover{border-color:#c7d2e0}
.ux-dd>button .bi-chevron-down{transition:transform var(--ux-med) var(--ux-ease)}
.ux-dd.open>button .bi-chevron-down{transform:rotate(180deg)}
.ux-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 18px 40px rgba(15,23,42,.14);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity var(--ux-fast),transform var(--ux-med) var(--ux-ease)}
.ux-dd.open .ux-menu{opacity:1;transform:none;pointer-events:auto}
.ux-menu button{display:flex;width:100%;align-items:center;gap:9px;border:0;background:none;border-radius:10px;padding:9px 11px;font-size:.9rem;color:var(--ink-2);text-align:left;transition:background var(--ux-fast)}
.ux-menu button:hover{background:#f5f7fb}
.ux-menu button .bi-check2{margin-left:auto;color:var(--green);opacity:0}
.ux-menu button.on{color:var(--ink);font-weight:600}.ux-menu button.on .bi-check2{opacity:1}

/* tabs with sliding indicator */
.ux-tabs{position:relative;display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:5px;overflow-x:auto;scrollbar-width:none}
.ux-tabs::-webkit-scrollbar{display:none}
.ux-tabs button{position:relative;z-index:1;flex:none;border:0;background:none;border-radius:12px;padding:9px 14px;font-weight:600;font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:7px;transition:color var(--ux-med)}
.ux-tabs button:hover{color:var(--ink)}
.ux-tabs button.on{color:#fff}
.ux-tabs .n{font-size:.72rem;background:#f1f5f9;color:var(--ink-2);border-radius:999px;padding:1px 7px;transition:background var(--ux-med),color var(--ux-med)}
.ux-tabs button.on .n{background:rgba(255,255,255,.25);color:#fff}
.ux-ind{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:12px;background:var(--grad-green);box-shadow:0 6px 16px rgba(5,150,105,.3);transition:transform var(--ux-med) var(--ux-ease),width var(--ux-med) var(--ux-ease)}

/* cards */
.ux-list{display:grid;gap:14px;margin-top:14px;transition:opacity var(--ux-fast)}
.ux-list.fade{opacity:0}
.ux-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--ux-r);overflow:hidden;transition:transform var(--ux-fast) var(--ux-ease),box-shadow var(--ux-med),border-color var(--ux-med)}
.ux-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,23,42,.08);border-color:#dbe3ee}
.ux-card.hl{animation:uxHl 1.6s var(--ux-ease)}
@keyframes uxHl{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}100%{box-shadow:0 0 0 14px rgba(16,185,129,0)}}
.ux-card.out{animation:uxOut .35s var(--ux-ease) forwards}
@keyframes uxOut{to{opacity:0;transform:scale(.96) translateY(-6px)}}
.ux-pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--p-bg,#f1f5f9);color:var(--p-ink,#334155);white-space:nowrap}
.ux-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.ux-pill.live .dot{animation:uxPulse 1.6s infinite}
@keyframes uxPulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.p-green{--p-bg:#ecfdf5;--p-ink:#047857}.p-blue{--p-bg:#eff6ff;--p-ink:#1d4ed8}.p-rose{--p-bg:#fff1f2;--p-ink:#be123c}.p-amber{--p-bg:#fffbeb;--p-ink:#b45309}.p-violet{--p-bg:#f5f3ff;--p-ink:#6d28d9}.p-gray{--p-bg:#f1f5f9;--p-ink:#475569}

/* steps / progress */
.ux-steps{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:4px}
.ux-steps::before,.ux-steps .fill{content:"";position:absolute;top:13px;left:calc(50%/var(--n,5));height:4px;border-radius:4px}
.ux-steps::before{right:calc(50%/var(--n,5));background:#eef2f7}
.ux-steps .fill{width:0;background:linear-gradient(90deg,#10b981,#3b82f6);transition:width 1s var(--ux-ease) .15s}
.ux-step{position:relative;z-index:1;text-align:center;font-size:.72rem;color:var(--muted);font-weight:600}
.ux-step i{width:30px;height:30px;margin:0 auto 5px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #e2e8f0;color:#94a3b8;font-size:.85rem;transition:all var(--ux-med) var(--ux-ease)}
.ux-step.done i{background:var(--green);border-color:var(--green);color:#fff}
.ux-step.now i{border-color:var(--ux-blue);color:var(--ux-blue);box-shadow:0 0 0 5px rgba(59,130,246,.15)}
.ux-step.done,.ux-step.now{color:var(--ink-2)}
.ux-bar-p{height:8px;border-radius:8px;background:#eef2f7;overflow:hidden}
.ux-bar-p>i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#10b981,#3b82f6);transition:width .9s var(--ux-ease)}

/* expand / collapse */
.ux-exp{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ux-med) var(--ux-ease)}
.open>.ux-exp,.ux-exp.open{grid-template-rows:1fr}
.ux-exp>div{overflow:hidden;min-height:0}
.ux-chev{transition:transform var(--ux-med) var(--ux-ease)}
.open .ux-chev{transform:rotate(180deg)}

/* buttons */
.ux-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;padding:10px 16px;font-weight:600;font-size:.88rem;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);text-decoration:none;cursor:pointer;transition:transform var(--ux-fast) var(--ux-ease),border-color var(--ux-fast),background var(--ux-fast),color var(--ux-fast),box-shadow var(--ux-fast)}
.ux-btn:hover{border-color:#c7d2e0;color:var(--ink);transform:translateY(-1px)}
.ux-btn:active{transform:scale(.97)}
.ux-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.ux-btn.pri{background:var(--grad-green);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(5,150,105,.25)}
.ux-btn.pri:hover{color:#fff;box-shadow:0 10px 22px rgba(5,150,105,.32)}
.ux-btn.dng{color:var(--ux-rose)}
.ux-btn.dng:hover{border-color:#fecdd3;background:#fff1f2}
.ux-btn.dng-solid{background:linear-gradient(120deg,#e11d48,#fb7185);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(225,29,72,.25)}
.ux-btn.ok{background:var(--green-050);border-color:var(--green);color:var(--green-700)}
.ux-btn.sm{padding:7px 12px;font-size:.8rem;border-radius:10px}
.ux-btn.block{width:100%}
.ux-btn .rip{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:uxRip .55s ease-out forwards;pointer-events:none}
@keyframes uxRip{to{transform:scale(4);opacity:0}}
.ux-spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:uxSpin .7s linear infinite;flex:none}
@keyframes uxSpin{to{transform:rotate(360deg)}}
.ux-acts{display:flex;gap:8px;flex-wrap:wrap}

/* forms */
.ux-field{display:grid;gap:6px;margin-bottom:14px}
.ux-field>label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.ux-input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;font-size:.95rem;background:#fff;color:var(--ink);outline:0;transition:border-color var(--ux-fast),box-shadow var(--ux-fast)}
.ux-input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.ux-input.bad{border-color:var(--ux-rose);box-shadow:0 0 0 4px rgba(225,29,72,.1)}
.ux-hint{font-size:.78rem;color:var(--muted)}
.ux-err{color:var(--ux-rose);font-size:.8rem;min-height:1.1em}
.ux-pwd{position:relative}
.ux-pwd .ux-input{padding-right:46px}
.ux-pwd button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;width:36px;height:36px;border-radius:10px;color:var(--muted)}
.ux-pwd button:hover{background:#f5f7fb;color:var(--ink)}
.ux-chips{display:flex;gap:8px;flex-wrap:wrap}
.ux-chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:.86rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all var(--ux-fast) var(--ux-ease)}
.ux-chip:hover{border-color:#c7d2e0}
.ux-chip.on,.ux-chip[aria-pressed="true"]{background:var(--green-050);border-color:var(--green);color:var(--green-700)}
.ux-opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font-size:.9rem;cursor:pointer;transition:border-color var(--ux-fast),background var(--ux-fast)}
.ux-opt:hover{border-color:#c7d2e0}
.ux-opt input{accent-color:var(--green)}
.ux-opt:has(input:checked){border-color:var(--green);background:var(--green-050)}
.ux-switch{position:relative;width:46px;height:26px;flex:none}
.ux-switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.ux-switch span{position:absolute;inset:0;border-radius:999px;background:#cbd5e1;transition:background var(--ux-med)}
.ux-switch span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.2);transition:transform var(--ux-med) var(--ux-ease)}
.ux-switch input:checked+span{background:var(--green)}
.ux-switch input:checked+span::after{transform:translateX(20px)}
.ux-switch input:focus-visible+span{outline:3px solid rgba(16,185,129,.4);outline-offset:2px}
.shake{animation:uxShake .4s}
@keyframes uxShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* skeleton */
.ux-sk{background:#fff;border:1px solid var(--line);border-radius:var(--ux-r);padding:16px 18px;display:grid;grid-template-columns:52px minmax(0,1fr) 90px;gap:14px;align-items:center}
.sk{border-radius:10px;background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 45%,#eef2f7 65%);background-size:300% 100%;animation:uxShim 1.2s linear infinite}
@keyframes uxShim{from{background-position:100% 0}to{background-position:0 0}}

/* empty */
.ux-empty{text-align:center;padding:44px 20px;background:#fff;border:1.5px dashed #dbe3ee;border-radius:var(--ux-r)}
.ux-empty .ic{width:74px;height:74px;margin:0 auto 12px;border-radius:24px;display:grid;place-items:center;font-size:2rem;color:var(--green-700);background:var(--green-050);animation:uxFloat 3s ease-in-out infinite}
@keyframes uxFloat{50%{transform:translateY(-6px)}}
.ux-empty h3{font-family:"Sora",sans-serif;font-size:1.1rem;margin:0 0 6px}
.ux-empty p{color:var(--muted);margin:0 0 14px}

/* modal */
.ux-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity var(--ux-med)}
.ux-modal.open{opacity:1;pointer-events:auto}
.ux-dlg{width:min(100%,460px);max-height:calc(100vh - 36px);overflow:auto;background:#fff;border-radius:24px;padding:22px;box-shadow:0 30px 70px rgba(15,23,42,.3);transform:translateY(18px) scale(.97);transition:transform var(--ux-med) var(--ux-ease)}
.ux-modal.open .ux-dlg{transform:none}
.ux-dlg h3{font-family:"Sora",sans-serif;font-size:1.15rem;margin:0 0 4px}
.ux-dlg>p{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.ux-dlg-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.ux-done{text-align:center;padding:10px 0 4px}
.ux-done p{color:var(--muted);margin:0 0 14px}
.ux-check{width:74px;height:74px;margin:0 auto 12px;display:block}
.ux-check circle{stroke:var(--green);stroke-width:4;fill:none;stroke-dasharray:220;stroke-dashoffset:220;animation:uxDraw .6s var(--ux-ease) forwards}
.ux-check path{stroke:var(--green);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:uxDraw .4s var(--ux-ease) .45s forwards}
@keyframes uxDraw{to{stroke-dashoffset:0}}

/* toasts */
.ux-toasts{position:fixed;z-index:400;right:18px;bottom:18px;display:grid;gap:10px;width:min(360px,calc(100% - 36px))}
.ux-toast{position:relative;overflow:hidden;display:flex;gap:10px;align-items:center;background:#0f172a;color:#fff;border-radius:14px;padding:12px 14px;font-size:.9rem;box-shadow:0 14px 30px rgba(15,23,42,.3);transform:translateY(16px);opacity:0;transition:transform var(--ux-med) var(--ux-ease),opacity var(--ux-med)}
.ux-toast.show{transform:none;opacity:1}
.ux-toast .bi{font-size:1.15rem;color:#34d399;flex:none}
.ux-toast.err .bi{color:#fb7185}
.ux-toast .bar{position:absolute;left:0;bottom:0;height:3px;background:#34d399;animation:uxBar 3s linear forwards}
.ux-toast.err .bar{background:#fb7185}
.ux-toast button{margin-left:auto;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:4px 10px;font-weight:600;font-size:.8rem}
@keyframes uxBar{from{width:100%}to{width:0}}

@media (max-width:768px){
  .ux-kpis,.ux-kpis.k3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ux-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ux-toasts{bottom:84px}
}
@media (max-width:560px){
  .ux-hero{padding:20px 16px 16px;border-radius:20px}
  .ux-panel{padding:16px}
  .ux-grid2,.ux-grid3{grid-template-columns:minmax(0,1fr)}
  .ux-dlg{padding:18px;border-radius:22px}
  .ux-modal{align-items:flex-end;padding:0}
  .ux-modal .ux-dlg{width:100%;border-radius:24px 24px 0 0;max-height:88vh;transform:translateY(40px)}
  .ux-modal.open .ux-dlg{transform:none}
  .ux-step{font-size:.75rem}
  .ux-step i{width:26px;height:26px;font-size:.75rem}
  .ux-steps::before,.ux-steps .fill{top:11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ux-in{opacity:1;transform:none}
}

/* keep entered elements visible when another animation (highlight) replaces uxIn */
.ux-in.hl,.ux-in.shake{opacity:1;transform:none}

.ux-search{min-width:0;max-width:100%}