/**
 * Unified Skeleton Loader System
 * Single CSS file for all skeleton loading states
 * 
 * VERSION: 2.2.0
 * UPDATED: 2026-05-18
 * 
 * USAGE:
 * - Product filters AJAX loading
 * - Cart item updates
 * - Checkout page preload
 * - Archive/category pages preload
 * - Future: Post loops, product sliders
 * 
 * DESIGN PRINCIPLES:
 * - Consistent white block design (#e0e0e0)
 * - Universal shimmer animation (2s)
 * - Reusable .bde-skeleton base class
 * - Minimal, maintainable code
 */

/* ============================================================================
   BASE SKELETON SYSTEM
   ============================================================================ */

/**
 * Base skeleton element - ALL skeleton types extend this
 */
.bde-skeleton {
    background: #e0e0e0;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

/**
 * Universal shimmer animation - SINGLE animation for entire site
 */
.bde-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 100%
    );
    animation: bde-skeleton-shimmer 2s infinite;
}

@keyframes bde-skeleton-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/**
 * Skeleton wrapper - Container for skeleton overlays
 */
.bde-skeleton-wrapper {
    background: #ffffff;
    border-radius: 8px;
    padding: 0px;
    width: 100%;
    box-sizing: border-box;
}

/**
 * Loading state for containers
 */
.bde-skeleton-loading {
    position: relative;
    pointer-events: none;
}

/* ============================================================================
   SKELETON COMPONENT DIMENSIONS
   ============================================================================ */

/* Common elements */
.bde-skeleton-badge { 
    width: 60px; 
    height: 24px; 
    margin-bottom: 10px;
}

.bde-skeleton-thumbnail { 
    width: 80px; 
    height: 80px; 
    flex-shrink: 0;
    border-radius: 8px;
}

.bde-skeleton-image { 
    width: 100%; 
    aspect-ratio: 1/1;
    margin-bottom: 1rem;
}

.bde-skeleton-brand { 
    width: 80px; 
    height: 14px; 
    margin-bottom: 8px;
}

.bde-skeleton-title { 
    width: 80%; 
    height: 16px; 
    margin-bottom: 10px;
}

.bde-skeleton-price { 
    width: 60px; 
    height: 18px; 
    margin-bottom: 8px;
}

.bde-skeleton-quantity { 
    width: 80px; 
    height: 36px; 
}

.bde-skeleton-subtotal { 
    width: 80px; 
    height: 20px; 
}

.bde-skeleton-button { 
    width: 120px; 
    height: 40px; 
    margin-top: auto;
}

.bde-skeleton-remove { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%;
}

.bde-skeleton-attribute { 
    width: 60%; 
    height: 14px; 
    margin-bottom: 5px;
}

.bde-skeleton-sku { 
    width: 40%; 
    height: 12px; 
}

.bde-skeleton-spacer {
    flex-grow: 1;
    min-height: 1rem;
}

/* ============================================================================
   PRODUCT SKELETON (Enhanced v2.1 - Matches jbskin.lt product cards)
   ============================================================================ */

.bde-skeleton-product {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Link wrapper - mimics <a> structure with relative positioning */
.bde-skeleton-product .bde-skeleton-link-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

/* Badges Area (top-left, absolute positioning) */
.bde-skeleton-product .bde-skeleton-badges-wrapper {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bde-skeleton-product .bde-skeleton-badges-wrapper .bde-skeleton-badge {
    width: 70px;
    height: 24px;
    border-radius: 3px;
}

/* Product Image Wrapper */
.bde-skeleton-product .bde-skeleton-image-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.bde-skeleton-product .bde-skeleton-image {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 5px;
}

/* Icons Area (top-right, absolute positioning) */
.bde-skeleton-product .bde-skeleton-icons-wrapper {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bde-skeleton-product .bde-skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Brand Name */
.bde-skeleton-product .bde-skeleton-brand {
    width: 100px;
    height: 12px;
    margin-bottom: 8px;
    opacity: 0.7;
}

/* Product Title */
.bde-skeleton-product .bde-skeleton-title {
    width: 85%;
    height: 16px;
    margin-bottom: 10px;
}

/* Price */
.bde-skeleton-product .bde-skeleton-price {
    width: 80px;
    height: 20px;
    margin-bottom: 10px;
}

/* Footer (outside link, for button area) */
.bde-skeleton-product .bde-skeleton-footer {
    width: 100%;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bde-skeleton-product .bde-skeleton-footer .bde-skeleton-button {
    width: 100%;
    max-width: 200px;
    height: 45px;
    border-radius: 4px;
    margin: 0;
}

/* Product grid container */
.bde-skeleton-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    width: 100%;
}

/* ============================================================================
   CART ITEM SKELETON
   ============================================================================ */

.bde-skeleton-cart-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.bde-skeleton-cart-item .skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bde-skeleton-cart-item .skeleton-content {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.bde-skeleton-cart-item .skeleton-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bde-skeleton-cart-item .skeleton-footer {
    display: none;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

/* Responsive cart item */
@media screen and (min-width: 800px) {
    .bde-skeleton-cart-item .skeleton-content {
        align-items: center;
    }
    
    .bde-skeleton-cart-item .skeleton-footer {
        margin-left: 95px; /* Align with content after thumbnail */
    }
}

/* ============================================================================
   CHECKOUT ITEM SKELETON
   ============================================================================ */

.bde-skeleton-checkout-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.bde-skeleton-checkout-item .skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bde-skeleton-checkout-item .skeleton-content {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.bde-skeleton-checkout-item .skeleton-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bde-skeleton-checkout-item .skeleton-footer {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* ============================================================================
   CART SUMMARY SKELETON (zones)
   ============================================================================ */

.bde-skeleton-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.bde-skeleton-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.bde-skeleton-summary-line .bde-skeleton {
    height: 18px;
}

.bde-skeleton-summary-line .bde-skeleton:first-child {
    width: 40%;
}

.bde-skeleton-summary-line .bde-skeleton:last-child {
    width: 30%;
}

.bde-skeleton-summary-line.total .bde-skeleton {
    height: 24px;
}

/* ============================================================================
   POST SKELETON (for blog loops)
   ============================================================================ */

.bde-skeleton-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
}

.bde-skeleton-post .bde-skeleton-image {
    width: 100%;
    aspect-ratio: 16/9;
    margin-bottom: 10px;
}

.bde-skeleton-post .bde-skeleton-title {
    width: 90%;
    height: 20px;
    margin-bottom: 8px;
}

.bde-skeleton-post .bde-skeleton-meta {
    width: 60%;
    height: 14px;
    margin-bottom: 10px;
}

.bde-skeleton-post .bde-skeleton-text {
    width: 100%;
    height: 14px;
    margin-bottom: 5px;
}

.bde-skeleton-post .bde-skeleton-text:nth-child(2) {
    width: 90%;
}

.bde-skeleton-post .bde-skeleton-text:last-child {
    width: 70%;
}

/* ============================================================================
   TERM/CATEGORY SKELETON
   ============================================================================ */

.bde-skeleton-term {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.bde-skeleton-term .bde-skeleton-image {
    width: 100%;
    aspect-ratio: 1/1;
    margin-bottom: 10px;
}

.bde-skeleton-term .bde-skeleton-title {
    width: 70%;
    height: 18px;
    margin: 0 auto;
}

/* ============================================================================
   OVERLAY POSITIONING
   ============================================================================ */

/**
 * Absolute overlay skeleton - covers content during AJAX load
 */
.bde-skeleton-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: #ffffff;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100%;
}

/* Ensure skeleton content fills overlay completely */
.bde-skeleton-overlay > .bde-skeleton-cart-item,
.bde-skeleton-overlay > .bde-skeleton-checkout-item {
    width: 100%;
    height: 100%;
    margin: 0;
}

.bde-skeleton-overlay > .bde-skeleton-cart-summary,
.bde-skeleton-overlay > .bde-skeleton-post,
.bde-skeleton-overlay > .bde-skeleton-term {
    width: 100%;
    margin: 0;
}

.bde-skeleton-overlay.fade-out {
    animation: bde-skeleton-fade-out 0.3s ease forwards;
}

@keyframes bde-skeleton-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

/**
 * Dim content behind skeleton
 */
.bde-skeleton-loading > *:not(.bde-skeleton-wrapper):not(.bde-skeleton-overlay) {
    opacity: 0.3;
    pointer-events: none;
}

/**
 * Container relative positioning for overlay
 */
.bde-skeleton-loading {
    position: relative;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.bde-skeleton-hidden {
    display: none !important;
}

.bde-skeleton-visible {
    display: block !important;
}

/* Remove margin/padding from skeleton wrappers in compact contexts */
.bde-skeleton-compact .bde-skeleton-wrapper {
    padding: 10px;
}

.bde-skeleton-compact .bde-skeleton {
    margin-bottom: 5px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media screen and (max-width: 600px) {
    .bde-skeleton-cart-item .skeleton-content {
        flex-direction: column;
    }
    
    .bde-skeleton-cart-item .skeleton-footer {
        flex-wrap: wrap;
        margin-left: 0;
    }
    
    .bde-skeleton-checkout-item .skeleton-content {
        flex-direction: column;
    }
}

/* ============================================================================
   COMPATIBILITY WITH EXISTING SYSTEMS
   ============================================================================ */

/**
 * Backwards compatibility for product filters
 * (already uses .bde-skeleton classes)
 */
.product-skeleton-loader .bde-skeleton {
    /* Inherits from base .bde-skeleton */
}

/**
 * Migration layer for old cart skeleton classes
 * TODO: Remove after full migration
 */
.jbskin-item-skeleton {
    /* Will be replaced with .bde-skeleton-cart-item */
}

.checkout-preload-skeleton {
    /* Will be replaced with .bde-skeleton-checkout-item */
}

/* ============================================================================
   DEBUG MODE
   ============================================================================ */

body.skeleton-debug .bde-skeleton {
    outline: 2px dashed red;
}

body.skeleton-debug .bde-skeleton-wrapper {
    outline: 2px solid blue;
}

body.skeleton-debug .bde-skeleton-loading {
    outline: 3px solid green;
}