/* =============================================
   SKELETON LOADING ANIMATIONS
   Premium loading states for all pages
   ============================================= */

/* Base skeleton shimmer animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: 8px;
}

body.dark-mode .skeleton {
    background: #2d2d2d;
    background-image: linear-gradient(90deg, #2d2d2d 25%, #3d3d3d 50%, #2d2d2d 75%);
    background-size: 200% 100%;
}

/* Full Page Skeleton Container */
.page-skeleton {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Hide skeleton when content loads */
.page-skeleton.hidden {
    display: none;
}

/* =============================================
   CATEGORY SKELETONS (For index.php)
   ============================================= */
.category-skeleton {
    height: 100px;
    border-radius: 16px;
    margin-bottom: 10px;
}

.mini-category-skeleton {
    display: flex;
    gap: 10px;
    overflow: hidden;
}

.mini-cat-item-skeleton {
    width: 100px;
    height: 80px;
    border-radius: 12px;
    flex-shrink: 0;
}

/* =============================================
   SERVICE CARD SKELETONS
   ============================================= */
.service-skeleton-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 16px;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
}

body.dark-mode .service-skeleton-card {
    background: var(--card-dark, #1f2937);
    border-color: var(--border-dark, #374151);
}

.service-skeleton-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-title {
    height: 22px;
    width: 70%;
    border-radius: 6px;
}

.skeleton-text {
    height: 14px;
    width: 90%;
    border-radius: 4px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-price {
    height: 18px;
    width: 40%;
    border-radius: 4px;
}

.skeleton-image {
    width: 150px;
    height: 150px;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .service-skeleton-card {
        grid-template-columns: 1fr 120px;
    }

    .skeleton-image {
        width: 120px;
        height: 120px;
    }
}

/* =============================================
   BOOKING CARD SKELETONS
   ============================================= */
.booking-skeleton-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #eee;
}

body.dark-mode .booking-skeleton-card {
    background: var(--card-dark, #1f2937);
    border-color: var(--border-dark, #374151);
}

.booking-skeleton-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.skeleton-badge {
    width: 80px;
    height: 24px;
    border-radius: 12px;
}

.skeleton-date {
    width: 100px;
    height: 16px;
    border-radius: 4px;
}

.booking-skeleton-body {
    display: flex;
    gap: 12px;
    align-items: center;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* =============================================
   PROFILE/SETTINGS SKELETONS
   ============================================= */
.profile-skeleton-header {
    height: 180px;
    border-radius: 0 0 24px 24px;
    margin-bottom: -40px;
}

.profile-skeleton-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 16px;
    position: relative;
    z-index: 10;
}

.profile-skeleton-stats {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin: 0 20px 20px;
    display: flex;
    justify-content: space-around;
}

body.dark-mode .profile-skeleton-stats {
    background: var(--card-dark, #1f2937);
}

.skeleton-stat {
    text-align: center;
}

.skeleton-stat-value {
    width: 40px;
    height: 24px;
    margin: 0 auto 8px;
    border-radius: 4px;
}

.skeleton-stat-label {
    width: 50px;
    height: 12px;
    margin: 0 auto;
    border-radius: 4px;
}

/* Menu item skeleton */
.menu-skeleton-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
}

body.dark-mode .menu-skeleton-item {
    border-color: var(--border-dark, #374151);
}

.skeleton-menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.skeleton-menu-text {
    flex: 1;
    height: 16px;
    border-radius: 4px;
}

/* =============================================
   VENDOR/ADMIN DASHBOARD SKELETONS
   ============================================= */
.stats-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-skeleton-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

body.dark-mode .stat-skeleton-card {
    background: var(--card-dark, #1f2937);
}

.skeleton-stat-big {
    width: 60px;
    height: 32px;
    margin: 0 auto 8px;
    border-radius: 6px;
}

.skeleton-stat-small {
    width: 80px;
    height: 14px;
    margin: 0 auto;
    border-radius: 4px;
}

/* Order list skeleton */
.order-skeleton-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

body.dark-mode .order-skeleton-card {
    background: var(--card-dark, #1f2937);
}

.skeleton-order-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    flex-shrink: 0;
}

.skeleton-order-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-order-title {
    height: 18px;
    width: 70%;
    border-radius: 4px;
}

.skeleton-order-detail {
    height: 14px;
    width: 50%;
    border-radius: 4px;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */
.skeleton-hidden {
    display: none !important;
}

.skeleton-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}