/**
 * Phase 7 Task 4 — UX Polish & Accessibility
 * Isolated CSS for smooth scrolling, CLS prevention, reduced motion, and jank reduction.
 * Safe to remove without affecting core functionality.
 */

/* =============================================
   1. SMOOTH SCROLLING
   ============================================= */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* =============================================
   2. JANK REDUCTION — Layout Containment
   ============================================= */
.listing-card-grid,
.ll-home__grid,
.ll-home__grid--discovery {
    contain: layout style;
}

/* Prevent overscroll bounce on scroll containers */
.custom-scrollbar,
#slots,
#thumbnailGallery {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* =============================================
   3. HOVER GUARD — Prevent sticky hover on touch
   ============================================= */
@media (hover: none) {

    .listing-card:hover,
    .listing-card:focus-within {
        transform: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    }

    .listing-card:hover::before {
        opacity: 0 !important;
    }

    .listing-card:hover .listing-photo {
        transform: none !important;
    }

    .listing-card:hover .photo-nav {
        opacity: 1 !important;
    }

    .ll-home__card:hover,
    .listing-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .review-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .profile-avatar-large:hover {
        transform: none !important;
    }

    .action-btn:hover {
        transform: none !important;
    }
}

/* =============================================
   4. CLS PREVENTION — Reserve space for content
   ============================================= */

/* Listing card images — STRICT portrait aspect ratio (3:4) */
.listing-photos {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    min-height: unset !important;
}

/* Home discovery grids — minimum height to prevent collapse */
.ll-home__grid--discovery {
    min-height: 280px;
}

@media (max-width: 600px) {
    .ll-home__grid--discovery {
        min-height: 320px;
    }
}

/* Merchant profile skeleton — responsive widths */
.profile-content-wrapper .skeleton {
    max-width: 100%;
}

/* =============================================
   5. MOBILE TAP TARGETS — Minimum 44px
   ============================================= */
@media (max-width: 768px) {

    /* Filter toggle */
    .ll-filter-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* Search submit button */
    .ll-search__form .ll-button {
        min-height: 44px;
    }

    /* Form inputs */
    .ll-search__input,
    .ll-search__select,
    .ll-select {
        min-height: 44px;
    }

    /* Category pill buttons */
    .pill {
        min-height: 36px;
        padding: 0.4rem 0.75rem;
    }

    /* Load More Reviews button */
    #loadMoreReviews button {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
    }
}

/* =============================================
   6. REDUCED MOTION — Global catch-all
   ============================================= */
@media (prefers-reduced-motion: reduce) {

    /* Suppress any remaining animations */
    .merchant-badge {
        animation: none !important;
    }

    .skeleton-loader {
        animation: none !important;
        background: rgba(148, 163, 184, 0.15) !important;
    }

    .dark .skeleton-loader,
    [data-theme="dark"] .skeleton-loader {
        background: rgba(71, 85, 105, 0.25) !important;
    }

    /* Card transitions */
    .listing-card,
    .ll-home__card,
    .booking-card,
    .thread {
        animation: none !important;
        transition: none !important;
    }

    /* Photo gallery transitions */
    .listing-photos-container {
        transition: none !important;
    }

    .listing-photo {
        transition: none !important;
    }

    /* Toast notification animations */
    .toast-notification {
        animation: none !important;
    }
}

/* =============================================
   7. DARK THEME CONTRAST FIXES
   ============================================= */

/* Listing card meta — use theme-aware colors */
.listing-meta {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.listing-description {
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
}

/* Merchant profile — light theme legibility */
[data-theme="light"] .profile-bio {
    color: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .profile-name {
    background: linear-gradient(135deg, #111 0%, #333 50%, #666 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .profile-meta-row {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .profile-badge {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

[data-theme="light"] .services-header h2 {
    background: linear-gradient(90deg, #111, #555);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .services-count {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .listing-card__desc {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .ll-home__card-category {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .profile-hero-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .profile-hero-section::before {
    background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.08), transparent 70%);
}

/* Modal dark theme contrast fix */
[data-theme="dark"] .modal-body p {
    color: var(--text-secondary, #aaa);
}

/* =============================================
   8. LISTING DETAIL PAGE — Skeleton states
   ============================================= */

/* Skeleton pulse for "Loading..." text placeholders */
.listing-skeleton-text {
    background: linear-gradient(90deg,
            rgba(148, 163, 184, 0.1) 25%,
            rgba(148, 163, 184, 0.2) 50%,
            rgba(148, 163, 184, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
    color: transparent !important;
    user-select: none;
}

[data-theme="dark"] .listing-skeleton-text,
.dark .listing-skeleton-text {
    background: linear-gradient(90deg,
            rgba(71, 85, 105, 0.2) 25%,
            rgba(71, 85, 105, 0.3) 50%,
            rgba(71, 85, 105, 0.2) 75%);
    background-size: 200% 100%;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .listing-skeleton-text {
        animation: none !important;
        background: rgba(148, 163, 184, 0.15) !important;
    }
}