/* ============================================
   FLATERO - Skeleton Loading Components
   Shimmer animation for async-loaded content
   Used in admin panel, customer portal, and main site
   ============================================ */

/* Base skeleton element */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--gray-100, #f1f5f9);
    border-radius: var(--radius, 8px);
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--white-50) 50%, transparent 100%);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========  TEXT LINE VARIANTS  ========== */
.skeleton-text {
    height: 14px;
    margin-bottom: var(--space-2, 8px);
    border-radius: var(--radius-sm, 4px);
}

.skeleton-text.wide   { width: 80%; }
.skeleton-text.medium { width: 60%; }
.skeleton-text.short  { width: 40%; }

/* ==========  BLOCK VARIANTS  ========== */
.skeleton-card   { height: 200px; border-radius: var(--radius-lg, 12px); }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }

/* ==========  REDUCED MOTION  ========== */
/* Disable shimmer animation, show static grey placeholder */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after,
    .skeleton-shimmer::after {
        animation: none;
    }
}

/* ==========  GENERIC SHIMMER UTILITY  ========== */
/* Apply to any element to give it a shimmer effect */
.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background: var(--gray-100, #f1f5f9);
    border-radius: var(--radius-sm, 4px);
}

.skeleton-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ==========  CALCULATOR RESULT SKELETON  ========== */
.calc-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-6, 24px) 0;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.calc-skeleton__heading {
    width: 60%;
    height: 22px;
    border-radius: var(--radius-sm, 4px);
}

.calc-skeleton__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2, 8px);
    margin: var(--space-3, 12px) 0;
    width: 100%;
}

.calc-skeleton__price-prefix {
    width: 36px;
    height: 16px;
}

.calc-skeleton__price-amount {
    width: 160px;
    height: 44px;
    border-radius: var(--radius, 8px);
}

.calc-skeleton__price-suffix {
    width: 90px;
    height: 16px;
}

.calc-skeleton__line {
    width: 90%;
    height: 12px;
    border-radius: var(--radius-sm, 4px);
}

.calc-skeleton__line--short {
    width: 60%;
}

.calc-skeleton__buttons {
    display: flex;
    gap: var(--space-3, 12px);
    margin-top: var(--space-4, 16px);
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.calc-skeleton__btn {
    width: 180px;
    height: 48px;
    border-radius: var(--radius, 8px);
    background: rgba(30, 41, 59, 0.10);
}

.calc-skeleton__btn--secondary {
    background: var(--gray-100, #f1f5f9);
    width: 140px;
}

.calc-skeleton__status {
    margin-top: var(--space-3, 12px);
    color: var(--gray-500, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
}