/*
    Daman product feed — the "two free pages, then ask" affordances.

    Plain CSS, loaded from the views that use the feed: the Flex base theme excludes page-level
    stylesheets from its SCSS compile, so this cannot live in _custom.scss without either being
    dropped or taking theme.css down with it.

    RTL: logical properties only. This is read right-to-left by most of its audience.
*/

.dfeed-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding-block: 1.5rem 2rem;
    text-align: center;
}

/* "Showing 72 of 480" — the honest replacement for the page numbers this feed removes. Hidden when
   the total is unknown rather than guessed at. */
.dfeed-status {
    font-size: .82rem;
    color: var(--body-secondary-color, #6c757d);
    font-variant-numeric: tabular-nums;
}

.dfeed-more {
    min-inline-size: 12rem;
    border-radius: 999px;
    font-weight: 600;
    padding-block: .6rem;
    /* 44px tall: this is the primary control at the bottom of a long phone scroll, and it is the only
       way forward once auto-loading stops. */
    min-block-size: 44px;
}

.dfeed-more:disabled {
    opacity: .55;
}

/* ---------- End of feed ----------
   A feed that simply stops leaves people scrolling a dead page wondering if it broke. */

.dfeed-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-size: .85rem;
    color: var(--body-secondary-color, #6c757d);
}

.dfeed-top {
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Skeletons ----------
   Placeholders rather than a spinner: the grid keeps its shape while a page is in flight, so the
   page does not jump under a thumb that is already reaching for something.

   These are appended INTO the grid, so they must sit in the same track as a real card. The card
   dimensions come from the grid itself — a fixed height here would fight every breakpoint. */

.dfeed-skel {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(128, 128, 128, .12);
    /* Roughly a product card: image square plus two text lines. Approximate on purpose — it is a hint
       that something is coming, not a promise about what. */
    aspect-ratio: 3 / 4;
    min-block-size: 180px;
}

.dfeed-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: dfeed-shimmer 1.2s infinite;
}

/* The sweep follows the reading direction: rightward in LTR, leftward in RTL. transform is physical
   and has no logical equivalent, so each direction needs its own keyframes — and BOTH ends must be
   declared in them. (Setting only the end state and leaving the start on the rule above is how you
   get an RTL shimmer that starts off-element and travels further away, never crossing it at all.) */
@keyframes dfeed-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

@keyframes dfeed-shimmer-rtl {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}

[dir="rtl"] .dfeed-skel::after {
    animation-name: dfeed-shimmer-rtl;
}

/* Respect a user who has asked the OS to stop moving things. The skeleton still communicates
   "loading" by existing; it does not need to shimmer to do that. */
@media (prefers-reduced-motion: reduce) {
    .dfeed-skel::after {
        animation: none;
    }
}