/* v229 Native UX Polish + Offline Safety
   Customer-app-only polish. Uses Admin Branding variables where present. */
:root{
  --customer-safe-top: env(safe-area-inset-top, 0px);
  --customer-safe-right: env(safe-area-inset-right, 0px);
  --customer-safe-bottom: env(safe-area-inset-bottom, 0px);
  --customer-safe-left: env(safe-area-inset-left, 0px);
  --customer-focus-ring: color-mix(in srgb, var(--customer-theme-color, var(--brand, #f97316)) 42%, transparent);
}

html.customer-native-app-v224,
html.customer-native-app-v229 {
  min-height: 100%;
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
}

html.customer-native-app-v224 body,
html.customer-native-app-v229 body {
  min-height: 100%;
  padding-top: var(--customer-safe-top);
  padding-left: var(--customer-safe-left);
  padding-right: var(--customer-safe-right);
  padding-bottom: var(--customer-safe-bottom);
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

.customer-native-app-v229 .app-safe-bottom,
.customer-native-app-v224 .app-safe-bottom {
  padding-bottom: calc(16px + var(--customer-safe-bottom));
}

.customer-app-loader-v229 {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--customer-theme-color, #f97316) 15%, transparent), transparent 36%),
    var(--customer-bg, #fffaf4);
  color: var(--customer-text-color, #111827);
  padding: 24px;
}

.customer-app-loader-v229.is-visible { display: flex; }

.customer-app-loader-card-v229 {
  width: min(420px, 92vw);
  border-radius: var(--customer-radius, 28px);
  background: color-mix(in srgb, var(--customer-card-bg, #fff) 92%, transparent);
  box-shadow: 0 24px 70px rgba(15,23,42,.16);
  padding: 28px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--customer-theme-color, #f97316) 18%, transparent);
}

.customer-app-spinner-v229 {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 999px;
  border: 4px solid color-mix(in srgb, var(--customer-theme-color, #f97316) 18%, transparent);
  border-top-color: var(--customer-theme-color, #f97316);
  animation: customerSpinV229 .85s linear infinite;
}

@keyframes customerSpinV229 { to { transform: rotate(360deg); } }

.customer-network-banner-v229 {
  position: fixed;
  left: max(14px, var(--customer-safe-left));
  right: max(14px, var(--customer-safe-right));
  bottom: calc(14px + var(--customer-safe-bottom));
  z-index: 99997;
  transform: translateY(120%);
  transition: transform .22s ease, opacity .22s ease;
  opacity: 0;
  border-radius: 18px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--customer-card-bg, #fff) 92%, #111827 8%);
  color: var(--customer-text-color, #111827);
  box-shadow: 0 18px 44px rgba(15,23,42,.18);
  border: 1px solid color-mix(in srgb, var(--customer-theme-color, #f97316) 20%, transparent);
  font-weight: 700;
  font-size: 14px;
}

.customer-network-banner-v229.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.customer-native-app-v229 a,
.customer-native-app-v229 button,
.customer-native-app-v229 .menu-card,
.customer-native-app-v229 .premium-card,
.customer-native-app-v229 .add-button,
.customer-native-app-v229 [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

.customer-native-app-v229 button:active,
.customer-native-app-v229 a:active,
.customer-native-app-v229 [role="button"]:active {
  transform: translateY(1px) scale(.99);
}

.customer-native-app-v229 *:focus-visible {
  outline: 3px solid var(--customer-focus-ring);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .customer-app-spinner-v229 { animation: none; }
  .customer-network-banner-v229,
  .customer-native-app-v229 button,
  .customer-native-app-v229 a,
  .customer-native-app-v229 [role="button"] {
    transition: none !important;
    transform: none !important;
  }
}

/* Lightweight skeleton utility for slow native/PWA data states. */
.customer-skeleton-v229 {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--customer-card-bg, #fff) 78%, var(--customer-theme-color, #f97316) 8%);
}

.customer-skeleton-v229::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: customerShimmerV229 1.35s infinite;
}

@keyframes customerShimmerV229 { 100% { transform: translateX(100%); } }