/* =====================================================================
   Livasta — Native Navigation Feedback & Shimmer Content Loaders
   Smooth page changes, top glowing progress bar, and skeleton loaders.
   ===================================================================== */

/* Glowing top progress bar */
#liv-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #007A7A 0%, #0E9C95 35%, #D9A35A 70%, #EB6F4A 100%);
  box-shadow: 0 0 14px rgba(0, 122, 122, 0.9), 0 0 8px rgba(217, 163, 90, 0.7);
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 999px 999px 0;
  transition: width 0.24s cubic-bezier(0.12, 0.88, 0.24, 1), opacity 0.2s ease;
  will-change: width, opacity;
}
#liv-page-loader.active {
  opacity: 1;
}
#liv-page-loader.done {
  width: 100% !important;
  opacity: 0;
  transition: width 0.16s ease, opacity 0.24s ease 0.06s;
}

/* Smooth page entrance animation */
main, .fade-panel {
  animation: livPageIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}
@keyframes livPageIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  main, .fade-panel { animation: none !important; }
  #liv-page-loader { transition: none !important; }
}

/* =====================================================================
   Skeleton & Shimmer Content Loaders
   Smooth placeholders while asynchronous page data is loading.
   ===================================================================== */
.liv-shimmer {
  position: relative;
  overflow: hidden;
  background: #E8EFEF !important;
}
.liv-shimmer::after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: livShimmer 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  content: '';
}
@keyframes livShimmer {
  100% { transform: translateX(100%); }
}

/* Stay Card Skeleton */
.liv-skeleton-card {
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid #E1ECEA;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 18px -4px rgba(30, 45, 52, 0.05);
}
.liv-skeleton-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
}
.liv-skeleton-line {
  height: 14px;
  border-radius: 8px;
}
.liv-skeleton-line.short { width: 45%; }
.liv-skeleton-line.med { width: 70%; }
.liv-skeleton-line.long { width: 90%; }
.liv-skeleton-line.h-lg { height: 18px; }

/* Trip / Message Item Skeleton */
.liv-skeleton-row {
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid #E1ECEA;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.liv-skeleton-thumb {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  flex-shrink: 0;
}

/* =====================================================================
   Bottom-nav tap feedback (guest mobile) — instant, native-app-like press
   response so switching sections feels responsive even before the next page
   paints. Purely visual; pairs with the .active toggle pwa.js applies on tap.
   ===================================================================== */
@media (max-width: 767px) {
  .gbn-item {
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .gbn-item:active { transform: scale(0.9); }
  .gbn-item.active { animation: livNavPop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes livNavPop {
  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gbn-item, .gbn-item.active { animation: none !important; transition: none !important; }
}

/* Mobile ambient performance */
@media (max-width: 767px) {
  #aurora i { animation: none !important; }
}