/* ── Fancy “Loading” text (Uiverse andrew-manzyk) — blocking waits only ── */
.bz-text-loader {
  --main-size: 2.6em;
  --text-color: #1f2937;
  --shine-color: rgba(31, 41, 55, 0.28);
  --shadow-color: #9ca3af;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
  position: relative;
  font-size: var(--main-size);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-color);
  width: 7.3em;
  height: 1em;
  margin: 0 auto;
  filter: drop-shadow(0 0 0.05em var(--shine-color));
}
.bz-text-loader--on-dark {
  --text-color: #ffffff;
  --shine-color: #ffffff40;
  --shadow-color: #aaaaaa;
}
.bz-text-loader--sm {
  --main-size: 2em;
}
.bz-text-loader--lg {
  --main-size: 3.2em;
}
.bz-text-loader__text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}
.bz-text-loader__text:nth-child(1) {
  clip-path: polygon(0% 0%, 11.11% 0%, 11.11% 100%, 0% 100%);
  font-size: calc(var(--main-size) / 20);
  margin-left: -2.1em;
  opacity: 0.6;
}
.bz-text-loader__text:nth-child(2) {
  clip-path: polygon(11.11% 0%, 22.22% 0%, 22.22% 100%, 11.11% 100%);
  font-size: calc(var(--main-size) / 16);
  margin-left: -0.98em;
  opacity: 0.7;
}
.bz-text-loader__text:nth-child(3) {
  clip-path: polygon(22.22% 0%, 33.33% 0%, 33.33% 100%, 22.22% 100%);
  font-size: calc(var(--main-size) / 13);
  margin-left: -0.33em;
  opacity: 0.8;
}
.bz-text-loader__text:nth-child(4) {
  clip-path: polygon(33.33% 0%, 44.44% 0%, 44.44% 100%, 33.33% 100%);
  font-size: calc(var(--main-size) / 11);
  margin-left: -0.05em;
  opacity: 0.9;
}
.bz-text-loader__text:nth-child(5) {
  clip-path: polygon(44.44% 0%, 55.55% 0%, 55.55% 100%, 44.44% 100%);
  font-size: calc(var(--main-size) / 10);
  margin-left: 0em;
  opacity: 1;
}
.bz-text-loader__text:nth-child(6) {
  clip-path: polygon(55.55% 0%, 66.66% 0%, 66.66% 100%, 55.55% 100%);
  font-size: calc(var(--main-size) / 11);
  margin-left: 0.05em;
  opacity: 0.9;
}
.bz-text-loader__text:nth-child(7) {
  clip-path: polygon(66.66% 0%, 77.77% 0%, 77.77% 100%, 66.66% 100%);
  font-size: calc(var(--main-size) / 13);
  margin-left: 0.33em;
  opacity: 0.8;
}
.bz-text-loader__text:nth-child(8) {
  clip-path: polygon(77.77% 0%, 88.88% 0%, 88.88% 100%, 77.77% 100%);
  font-size: calc(var(--main-size) / 16);
  margin-left: 0.98em;
  opacity: 0.7;
}
.bz-text-loader__text:nth-child(9) {
  clip-path: polygon(88.88% 0%, 100% 0%, 100% 100%, 88.88% 100%);
  font-size: calc(var(--main-size) / 20);
  margin-left: 2.1em;
  opacity: 0.6;
}
.bz-text-loader__text span {
  animation:
    bzLoaderScroll 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite,
    bzLoaderShadow 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite;
}
.bz-text-loader__text:nth-child(1) span {
  background: linear-gradient(to right, var(--text-color) 4%, var(--shadow-color) 7%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.bz-text-loader__text:nth-child(2) span {
  background: linear-gradient(to right, var(--text-color) 9%, var(--shadow-color) 13%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.bz-text-loader__text:nth-child(3) span {
  background: linear-gradient(to right, var(--text-color) 15%, var(--shadow-color) 18%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.bz-text-loader__text:nth-child(4) span {
  background: linear-gradient(to right, var(--text-color) 20%, var(--shadow-color) 23%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.bz-text-loader__text:nth-child(6) span {
  background: linear-gradient(to right, var(--shadow-color) 29%, var(--text-color) 32%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.bz-text-loader__text:nth-child(7) span {
  background: linear-gradient(to right, var(--shadow-color) 34%, var(--text-color) 37%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.bz-text-loader__text:nth-child(8) span {
  background: linear-gradient(to right, var(--shadow-color) 39%, var(--text-color) 42%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.bz-text-loader__text:nth-child(9) span {
  background: linear-gradient(to right, var(--shadow-color) 45%, var(--text-color) 48%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.bz-text-loader__line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 0.05em;
  width: calc(var(--main-size) / 2);
  margin-top: 0.9em;
  border-radius: 0.05em;
}
.bz-text-loader__line::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--text-color);
  opacity: 0.3;
}
.bz-text-loader__line::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--text-color);
  border-radius: 0.05em;
  transform: translateX(-90%);
  animation: bzLoaderWobble 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite;
}
@keyframes bzLoaderWobble {
  0% { transform: translateX(-90%); }
  50% { transform: translateX(90%); }
  100% { transform: translateX(-90%); }
}
@keyframes bzLoaderScroll {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes bzLoaderShadow {
  0% { background-position: -98% 0; }
  100% { background-position: 102% 0; }
}

.bz-text-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 8px 0;
}
.bz-text-loader-wrap__msg {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.4;
}
.bz-text-loader-wrap--on-dark .bz-text-loader-wrap__msg {
  color: rgba(255, 255, 255, 0.85);
}

/* ── Skeleton loaders (default for content waits) ── */
@keyframes bzSkelShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.bz-skel {
  display: block;
  background: linear-gradient(90deg, #f0f1f3 0%, #ffffff 42%, #f0f1f3 84%);
  background-size: 200% 100%;
  animation: bzSkelShimmer 1.15s ease-in-out infinite;
  border-radius: 10px;
}
.bz-skel--line {
  height: 12px;
  width: 100%;
  margin: 0 0 10px;
}
.bz-skel--line-sm { height: 10px; width: 72%; }
.bz-skel--line-xs { height: 10px; width: 48%; margin-bottom: 0; }
.bz-skel--title {
  height: 18px;
  width: 58%;
  margin: 0 0 12px;
  border-radius: 8px;
}
.bz-skel--circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bz-skel--btn {
  height: 44px;
  width: 100%;
  border-radius: 12px;
}
.bz-skel--slot {
  height: 38px;
  min-width: 72px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.bz-skel--hit {
  height: 56px;
  width: 100%;
  border-radius: 14px;
  margin: 0 0 8px;
}
.bz-skel--media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}
.bz-skel--media-sq { aspect-ratio: 1 / 1; }
.bz-skel--price {
  height: 18px;
  width: 42%;
  border-radius: 8px;
  margin: 0;
}
.bz-skel--add {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex-shrink: 0;
  margin: 0;
}

.bz-skel-card {
  background: var(--paper-glass);
  border-radius: 18px;
  overflow: hidden;
  border: 0;
  position: relative;
  isolation: isolate;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
}
.bz-skel-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bz-skel-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.bz-skel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 8px;
}
.bz-skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
.bz-skel-row__meta { flex: 1; min-width: 0; }
.bz-skel-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bz-skel-list { width: 100%; }

/* Image placeholders under real media (app-wide) */
.product-card__media,
.product-card__image-wrap,
.banner,
.hs-svc-card__media,
.category-item__icon,
.rv-detail__hero,
.vendor-card__media {
  background: linear-gradient(90deg, #f0f1f3 0%, #ffffff 42%, #f0f1f3 84%);
  background-size: 200% 100%;
  animation: bzSkelShimmer 1.15s ease-in-out infinite;
}
.product-card__media:has(img.bz-img-ready),
.product-card__media:has(.product-card__ph),
.product-card__image-wrap:has(img.bz-img-ready),
.banner:has(img.bz-img-ready),
.hs-svc-card__media:has(img.bz-img-ready),
.category-item__icon:has(img.bz-img-ready),
.rv-detail__hero:has(img.bz-img-ready),
.rv-detail__hero.is-ready,
.vendor-card__media:has(img.bz-img-ready),
.vendor-card__media.is-ready,
.product-card__media.is-ready,
.product-card__image-wrap.is-ready,
.banner.is-ready,
.hs-svc-card__media.is-ready,
.category-item__icon.is-ready {
  animation: none;
}
.product-card__media.is-ready,
.product-card__media:has(img.bz-img-ready),
.product-card__media:has(.product-card__ph) {
  background: #fff;
}
.product-card__media:has(.product-card__ph) {
  animation: none;
}
img.bz-img-fade {
  opacity: 0;
  transition: opacity 0.25s ease;
}
img.bz-img-fade.bz-img-ready {
  opacity: 1;
}

/* ── Full-page skeletons (fast nav) ── */
/* ── SPA stage: keep-alive page views inside the shell ── */
html.bz-spa .app-main.bz-app-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: 40vh;
}
html.bz-spa .bz-view {
  display: none;
  width: 100%;
  min-width: 0;
}
html.bz-spa .bz-view.is-active {
  display: block;
}
html.bz-spa .bz-view--skel.is-active {
  display: block;
  min-height: 60vh;
}
html.bz-spa .app-main.is-skel-loading {
  pointer-events: none;
}
html.bz-spa .bottom-nav__item {
  transition: color 0.15s ease, background 0.15s ease;
}
.bz-page-skel {
  padding: 0 0 24px;
  animation: bzPageSkelIn 0.22s ease both;
}
@keyframes bzPageSkelIn {
  from { opacity: 0.55; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.bz-page-skel__pad {
  padding: 0 16px;
}
.bz-page-skel__banner {
  margin: 8px 16px 14px;
  height: 140px;
  border-radius: 18px;
}
.bz-page-skel__cats {
  display: flex;
  gap: 12px;
  overflow: hidden;
  padding: 0 16px 16px;
}
.bz-page-skel__cat {
  flex: 0 0 auto;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bz-page-skel__cat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}
.bz-page-skel__cat-label {
  height: 10px;
  width: 44px;
  border-radius: 6px;
}
.bz-page-skel__section-title {
  height: 18px;
  width: 42%;
  margin: 4px 16px 12px;
  border-radius: 8px;
}
.bz-skel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  padding: 0 16px 8px;
}
.bz-skel-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 0;
  padding: 10px;
  box-shadow: none;
  box-sizing: border-box;
}
.bz-skel-card .bz-skel--media {
  border-radius: 12px;
  aspect-ratio: 1 / 1;
}
.bz-skel-card__body {
  padding: 10px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bz-skel-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.bz-skel--add {
  width: 72px;
  height: 32px;
  border-radius: 9px;
}

/* Categories layout skeleton */
.bz-page-skel--categories {
  display: flex;
  min-height: 70vh;
}
.bz-page-skel__side {
  width: 84px;
  flex-shrink: 0;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid rgba(17, 24, 39, 0.06);
  background: #fff;
}
.bz-page-skel__side-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}
.bz-page-skel__main {
  flex: 1;
  min-width: 0;
  padding: 12px 12px 20px;
}
.bz-page-skel__list-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 16px;
}
.bz-page-skel__thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  flex-shrink: 0;
}
.bz-page-skel__list-meta {
  flex: 1;
  min-width: 0;
}

/* Restaurant detail skeleton */
.bz-page-skel__hero {
  height: min(48vw, 240px);
  min-height: 200px;
  border-radius: 0;
  margin: 0;
}
.bz-page-skel__panel {
  margin: -28px 14px 16px;
  padding: 18px 16px;
  background: #fff;
  border-radius: 22px;
  position: relative;
  z-index: 1;
}
.bz-page-skel__ident {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.bz-page-skel__logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-top: -36px;
  flex-shrink: 0;
}

/* Cart / profile */
.bz-page-skel__cart-row {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  align-items: center;
}
.bz-page-skel__cart-thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  flex-shrink: 0;
}
.bz-page-skel__summary {
  margin: 16px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
}
.bz-page-skel__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 20px auto 16px;
}
.bz-page-skel__profile-rows {
  padding: 0 16px;
}

/* Vendors */
.bz-page-skel__vendor {
  margin: 0 16px 12px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  display: flex;
  gap: 12px;
}
.bz-page-skel__vendor-cover {
  width: 88px;
  height: 72px;
  border-radius: 12px;
  flex-shrink: 0;
}

.bottom-nav__item.is-nav-pending .bottom-nav__icon-wrap {
  background: rgba(129, 1, 0, 0.12);
  color: var(--brand, #810100);
}
.bottom-nav__item.is-nav-pending .bottom-nav__label {
  color: var(--brand, #810100);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .bz-text-loader__text span,
  .bz-text-loader__line::after,
  .bz-skel,
  .product-card__media,
  .product-card__image-wrap,
  .banner,
  .hs-svc-card__media,
  .category-item__icon,
  .bz-page-skel {
    animation: none !important;
  }
  img.bz-img-fade { opacity: 1; }
}