/* ─────────────────────────────────────────────────────────────────────────
   Shared skeleton-loader primitives.

   A skeleton screen is built from `.pt-skel` boxes that carry a left→right
   shimmer sweep, arranged to mirror the real component's layout. The page-
   specific skeleton structures (order cards, store rows, address cards) live
   in each page's own stylesheet — account-orders.css, stores.css, cart.css —
   and compose these primitives. Shown *after* the page loader (#ptLoader),
   while the page's own data fetch is in flight, instead of a spinner or a
   blank container.

   Linked from _MenuLayout.cshtml and _StoresLayout.cshtml.
   ───────────────────────────────────────────────────────────────────────── */

/* A fixed-width light band swept across the box. Using a px band (not a %
   gradient) keeps the sweep speed consistent regardless of the box width. */
@keyframes pt-shimmer {
    0%   { background-position: -220px 0; }
    100% { background-position: calc(220px + 100%) 0; }
}

.pt-skel {
    display: block;
    background-color: #e7e9ee;
    background-image: linear-gradient(90deg, #e7e9ee 0%, #f4f5f8 50%, #e7e9ee 100%);
    background-size: 220px 100%;
    background-repeat: no-repeat;
    animation: pt-shimmer 1.3s ease-in-out infinite;
    border-radius: 6px;
}

/* ── Common shapes ───────────────────────────────────────────────────────── */
.pt-skel-line   { height: 12px; width: 100%; border-radius: 6px; }
.pt-skel-line.is-sm { height: 10px; }
.pt-skel-line.is-lg { height: 16px; }
.pt-skel-pill   { height: 24px; width: 64px; border-radius: 999px; }
.pt-skel-circle { border-radius: 50%; }
.pt-skel-rect   { border-radius: 10px; }

/* ── Width helpers for text lines ────────────────────────────────────────── */
.pt-skel-w-25 { width: 25%; }
.pt-skel-w-30 { width: 30%; }
.pt-skel-w-40 { width: 40%; }
.pt-skel-w-50 { width: 50%; }
.pt-skel-w-60 { width: 60%; }
.pt-skel-w-70 { width: 70%; }
.pt-skel-w-85 { width: 85%; }

/* ── Accessibility: drop the moving sweep for users who ask for less motion;
   keep a gentle opacity pulse so the placeholder still reads as "loading". ── */
@media (prefers-reduced-motion: reduce) {
    .pt-skel {
        animation: pt-skel-pulse 1.6s ease-in-out infinite;
        background-image: none;
    }
}
@keyframes pt-skel-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Logo-first page loading flow + full-page skeletons (Home / Offers / Menu)
   ════════════════════════════════════════════════════════════════════════════
   Sequence, driven by the data-pt-load attribute on .menu-page (the orchestrator
   in _MenuLayout.cshtml moves it through the states):

     "logo"     → #ptLoader (z 9999) covers everything. Content + skeleton hidden.
     "skeleton" → #ptLoader faded out; the real (server-rendered) header is visible;
                  the .pt-page-skel overlay shows below the header. Content hidden.
     "content"  → skeleton fades out, content fades in. No layout shift: the skeleton
                  is position:fixed (out of flow) and the content root always reserves
                  its space (it is merely opacity:0), so revealing it is opacity-only.

   Scoped entirely to [data-pt-load], so the OTHER _MenuLayout pages (Cart, TopTen,
   Account/Orders, …) are completely unaffected and keep their existing behavior. */

/* The content root stays invisible during the logo + skeleton phases, then
   fades in for the content phase. (Direct-child `>` so the skeleton overlay's
   OWN reused .store-home/.menu-shell — a grandchild — is not matched.) */
.menu-page[data-pt-load] > .store-home,
.menu-page[data-pt-load] > .offers-main,
.menu-page[data-pt-load] > .menu-shell {
    opacity: 0;
    /* visibility:hidden also removes the not-yet-ready content from the a11y tree +
       tab order, so keyboard / screen-reader users can't focus or activate the
       invisible buttons (pointer-events:none alone does NOT block Enter/Space). */
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease;
}
.menu-page[data-pt-load="content"] > .store-home,
.menu-page[data-pt-load="content"] > .offers-main,
.menu-page[data-pt-load="content"] > .menu-shell {
    opacity: 1;
    visibility: visible;    /* flips instantly (not transitioned) so the opacity fade-in is visible */
    pointer-events: auto;
}

/* Full-page skeleton overlay — fixed, sitting BELOW the sticky 72px header
   (header z-index is 30, so it stays visible above this). */
.pt-page-skel {
    position: fixed;
    top: var(--header-h, 72px);
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 20;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   /* purely decorative — never intercept clicks (esp. while fading out) */
    /* Delay the visibility flip to the end of the fade-out so it cross-fades cleanly. */
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.menu-page[data-pt-load="skeleton"] .pt-page-skel {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease;
}
.pt-page-skel[hidden] { display: none; }

/* Skeleton items reuse the real card / grid classes so the layout matches the
   page exactly; these rules just neutralise interactivity and fill the image
   areas with shimmer. (skeleton.css loads after menu.css, so these win.) */
.pt-page-skel .menu-card,
.pt-page-skel .offer-card,
.pt-page-skel .store-cat,
.pt-page-skel .menu-cat,
.pt-page-skel .store-banner {
    pointer-events: none;
    cursor: default;
}
/* Fills a fixed- or aspect-sized parent (card image, category thumb, banner). */
.pt-skel-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}
/* The 16/9 banner + offer-image boxes have no explicit height — some engines won't
   resolve a child's height:100% against an aspect-ratio-derived height. Pin the fill
   with inset:0 instead so it fills regardless of how the parent's height is computed. */
.pt-page-skel .store-banner,
.pt-page-skel .offer-card-image { position: relative; }
.pt-page-skel .store-banner > .pt-skel-fill,
.pt-page-skel .offer-card-image > .pt-skel-fill {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
}
/* Consistent body spacing inside skeleton cards. */
.pt-page-skel .menu-card-body,
.pt-page-skel .offer-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}
.pt-page-skel .menu-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.pt-skel-btn-sm { height: 32px; border-radius: 8px; flex: 1; }
/* Section-heading placeholder line (Explore / Recommended / offer section h2). */
.pt-skel-head { display: block; height: 18px; width: 180px; margin-bottom: 14px; }

/* On phones the real Menu hides the per-section title (menu.css), so hide the
   skeleton's section-head placeholder there too. */
@media (max-width: 720px) {
    .pt-page-skel--menu .menu-cat-section-head { display: none; }
}