/* Shared skeleton-loading primitive. Any element tagged .skeleton-shape gets
   a shimmering gray placeholder. Page-specific shape definitions (sizes, grid
   placement, structural rules) live in the respective page CSS files (e.g.
   templates/corporate_new/assets/css/components/skeleton.css for the homepage
   lazy-loaded sections, css/user_area/my-orders.css for the orders list). */

.skeleton-shape {
    background-color: #ececec;
    background-image: linear-gradient(
        90deg,
        #ececec 0%,
        #f5f5f5 50%,
        #ececec 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-shape {
        animation: none;
    }
}