/*
 * Page loading (storefront and admin): a slim green→honey progress bar at the
 * top while the next page is coming, and a soft logo screen when a page takes
 * long. Fast pages never show the screen (it fades in only after a delay).
 * Uses the theme's colour tokens, with fallbacks for the admin panel.
 * @author ejafari
 */
.nav-progress{position:fixed;top:0;right:0;left:0;z-index:4000;height:3px;pointer-events:none;opacity:0;transition:opacity .25s}
.nav-progress::before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--v-honey,#d4932b),var(--v-brand,#2f5d3a));border-radius:0 3px 3px 0;box-shadow:0 0 10px rgba(212,147,43,.55)}
html.is-navigating .nav-progress{opacity:1}
html.is-navigating .nav-progress::before{animation:nav-progress 8s cubic-bezier(.08,.7,.2,1) forwards}
@keyframes nav-progress{0%{width:0}10%{width:35%}40%{width:70%}100%{width:94%}}

.page-loader{position:fixed;inset:0;z-index:3900;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:color-mix(in srgb,var(--v-bg,#fbf8f2) 86%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.js:not(.is-ready) .page-loader{display:flex;animation:page-loader-in .3s .45s both}
html.is-navigating.is-slow .page-loader{display:flex;animation:page-loader-in .3s both}
@keyframes page-loader-in{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
.page-loader-card{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 34px 22px;border-radius:24px;background:var(--v-surface,#fff);border:1px solid var(--v-line,#ebe4d6);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.page-loader-mark{position:relative;width:108px;height:108px;display:grid;place-items:center}
.page-loader-mark img{position:relative;z-index:1;width:62px;height:62px;object-fit:contain;animation:page-loader-breathe 1.6s ease-in-out infinite}
.page-loader-mark::before,.page-loader-mark::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid transparent}
.page-loader-mark::before{border-top-color:var(--v-honey,#d4932b);border-right-color:var(--v-honey,#d4932b);animation:page-loader-spin 1s linear infinite}
.page-loader-mark::after{inset:10px;border-bottom-color:var(--v-forest,#2f5d3a);border-left-color:var(--v-forest,#2f5d3a);animation:page-loader-spin 1.4s linear infinite reverse;opacity:.7}
.page-loader-text{display:flex;align-items:center;gap:6px;color:var(--v-forest-deep,#1f3d27);font:700 .92rem 'Vazirmatn',Tahoma,sans-serif}
.page-loader-text i{width:6px;height:6px;border-radius:50%;background:var(--v-honey,#d4932b);animation:page-loader-dot 1.2s ease-in-out infinite}
.page-loader-text i:nth-of-type(2){animation-delay:.15s}.page-loader-text i:nth-of-type(3){animation-delay:.3s}
@keyframes page-loader-spin{to{transform:rotate(360deg)}}
@keyframes page-loader-breathe{50%{transform:scale(.92)}}
@keyframes page-loader-dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .page-loader-mark::before,.page-loader-mark::after,.page-loader-mark img,.page-loader-text i{animation:none}
  html.is-navigating .nav-progress::before{animation:none;width:70%}
}
@media print{.nav-progress,.page-loader{display:none!important}}