/* ==========================================================================
   wire:navigate loading skeletons
   -----------------------------------------------------------------------
   Shown inside #page-content while a wire:navigate visit is in flight, and
   over Livewire regions that are refetching (see .is-loading below), so the
   user sees the shape of what is about to change. Header/footer stay put.

   The templates reuse the real layout classes (.container, .pl-layout,
   .product-grid, .article-grid, .product-card ...). Only the *contents* are
   replaced by .sk blocks, so the skeleton can never drift away from the real
   grid. Do not add a parallel grid system here.

   Injected/removed by js/navigate-skeleton.js.
   ========================================================================== */

:root {
  --sk-base: #e9eef3;
  --sk-highlight: #f6f9fc;
  --sk-gap: 16px;
}

/* @persist wraps its region in a plain <div x-persist>. That wrapper would
   become the containing block for .main-header's position:sticky and the header
   would stop sticking, so take the wrapper out of the box tree entirely. */
[x-persist] {
  display: contents;
}

/* Hide the outgoing page content, keep only the skeleton in flow. The second
   selector covers a page that narrowed the swap to one of its own elements with
   data-skeleton-region, so everything outside that element stays on screen. */
#page-content.is-navigating > *:not(#navigate-skeleton),
[data-skeleton-region].is-navigating > *:not(#navigate-skeleton) {
  display: none !important;
}

#navigate-skeleton {
  animation: sk-fade-in .18s ease-out both;
}

@keyframes sk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Building blocks ---- */

.sk {
  background-color: var(--sk-base);
  background-image: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-highlight) 37%, var(--sk-base) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease infinite;
  border-radius: var(--tb-radius-sm, 10px);
  display: block;
}

@keyframes sk-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.sk-line {
  height: 12px;
  margin-bottom: 10px;
}

.sk-line:last-child { margin-bottom: 0; }

.sk-line.is-title  { height: 22px; }
.sk-line.is-lg     { height: 16px; }
.sk-line.is-sm     { height: 9px; }
.sk-w-25  { width: 25%; }
.sk-w-40  { width: 40%; }
.sk-w-50  { width: 50%; }
.sk-w-60  { width: 60%; }
.sk-w-75  { width: 75%; }
.sk-w-90  { width: 90%; }

.sk-box    { border-radius: var(--tb-radius, 16px); }
.sk-circle { border-radius: 50%; }

/* Livewire only ships a default `display:none` for single-modifier wire:loading
   attributes, so combined ones must be hidden here or they flash before boot. */
[wire\:loading\.grid\.delay\.short][wire\:loading\.grid\.delay\.short] {
  display: none;
}

/* ---- Neutralise the real components when they stand in as placeholders ---- */

.product-card.is-skeleton,
.article-card.is-skeleton {
  pointer-events: none;
}

.product-card.is-skeleton:hover,
.article-card.is-skeleton:hover {
  transform: none;
  box-shadow: none;
  border-color: #dfe7ee;
}

.article-card.is-skeleton .article-card-img {
  border-radius: 0;
}

/* ---- Filler layout, only for regions with no real class to borrow ---- */

.sk-pad {
  padding-top: 24px;
  padding-bottom: 40px;
}

.sk-flex {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sk-col   { flex: 1 1 320px; min-width: 0; }
.sk-aside { flex: 0 0 270px; }

.sk-card {
  background: #fff;
  border: 1px solid var(--tb-line, #DDE6EE);
  border-radius: var(--tb-radius, 16px);
  padding: 14px;
}

.sk-tiles {
  display: grid;
  gap: var(--sk-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sk-stack > * + * { margin-top: 12px; }

.sk-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sk-chip {
  height: 32px;
  width: 84px;
  border-radius: var(--tb-radius-pill, 999px);
}

/* Announced by screen readers, invisible to everyone else. */
.sk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Three-dot "still loading" hint ---- */

.sk-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 26px 0 10px;
}

.sk-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tb-primary, #0077C8);
  opacity: .35;
  animation: sk-dot 1.1s infinite ease-in-out both;
}

.sk-dots i:nth-child(1) { animation-delay: -.24s; }
.sk-dots i:nth-child(2) { animation-delay: -.12s; }

@keyframes sk-dot {
  0%, 80%, 100% { transform: scale(.7); opacity: .3; }
  40%           { transform: scale(1);  opacity: 1; }
}

/* ---- Slow / failed navigation fallback ---- */

.sk-stalled {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 0 10px;
  font-size: 13px;
  color: var(--tb-muted, #7A8A90);
}

.sk-stalled button {
  border: 1px solid var(--tb-primary, #0077C8);
  background: transparent;
  color: var(--tb-primary, #0077C8);
  border-radius: var(--tb-radius-sm, 10px);
  padding: 8px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ---- Responsive ---- */

@media (max-width: 991px) {
  .sk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-aside { display: none; }
}

@media (max-width: 575px) {
  :root     { --sk-gap: 10px; }
  .sk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-pad   { padding-top: 16px; padding-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk,
  .sk-dots i,
  #navigate-skeleton { animation: none; }
  .sk { background-image: none; }
}