/**
 * TurnKey Directories - Modern Niche Static Styles
 * 
 * Extracted from public/templates/modern-niche.php
 * Phase 2-6: Pure CSS Extraction (no PHP dependencies)
 * 
 * This file contains only static CSS with no PHP dependencies.
 */

/* ============================================================
   V17 SCROLLBAR - OVERRIDE THEME SCROLLBAR HIDING
   TwentyTwentyFour theme may hide scrollbars globally
   (Originally Block 4 from modern-niche.php)
   ============================================================ */

/* RESET: Override any global scrollbar hiding from theme */
.tkd-listings-grid,
.tkd-listings-grid *,
.tkd-search-results-grid {
    scrollbar-width: auto !important;
}

.tkd-listings-grid::-webkit-scrollbar,
.tkd-search-results-grid::-webkit-scrollbar {
    display: block !important;
    visibility: visible !important;
    width: 12px !important;
    height: 12px !important;
    -webkit-appearance: scrollbar !important;
}

/* CRITICAL: Remove scroll from parent panel */
.tkd-results-panel {
    overflow: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Main grid styling */
.tkd-listings-grid,
.tkd-listings-grid.tkd-search-results-grid,
.tkd-results-panel .tkd-listings-grid,
.tkd-results-panel .tkd-results-list .tkd-listings-grid {
    max-height: 600px !important;
    height: 600px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    align-content: start !important;
    gap: 16px !important;
    padding: 20px !important;
    padding-right: 32px !important; /* Extra space for scrollbar */
    /* Firefox scrollbar - FORCE visible */
    scrollbar-width: auto !important;
    scrollbar-color: #888888 #e0e0e0 !important;
}

/* WebKit scrollbar - FORCE visible with high-contrast colors */
.tkd-listings-grid::-webkit-scrollbar,
.tkd-search-results-grid::-webkit-scrollbar,
div.tkd-listings-grid::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
    visibility: visible !important;
    background-color: #e0e0e0 !important;
}

.tkd-listings-grid::-webkit-scrollbar-track,
.tkd-search-results-grid::-webkit-scrollbar-track,
div.tkd-listings-grid::-webkit-scrollbar-track {
    background-color: #e0e0e0 !important;
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
}

.tkd-listings-grid::-webkit-scrollbar-thumb,
.tkd-search-results-grid::-webkit-scrollbar-thumb,
div.tkd-listings-grid::-webkit-scrollbar-thumb {
    background-color: #666666 !important;
    border-radius: 6px !important;
    border: 2px solid #e0e0e0 !important;
    min-height: 40px !important;
}

.tkd-listings-grid::-webkit-scrollbar-thumb:hover,
.tkd-search-results-grid::-webkit-scrollbar-thumb:hover,
div.tkd-listings-grid::-webkit-scrollbar-thumb:hover {
    background-color: #444444 !important;
}

/* PAGINATION: ALWAYS visible */
.tkd-modern-pagination {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    transform: none !important;
    clip: auto !important;
    position: relative !important;
}

/* ============================================================
   V25 BASE STYLES - Simplified overflow handling
   (Originally Block 7 from modern-niche.php)
   ============================================================ */

/* V25: Parents must allow content to overflow */
.tkd-results-panel,
.tkd-results-list {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* V25: Pagination always visible */
.tkd-modern-pagination {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    box-sizing: border-box !important;
}

.tkd-content-wrapper > .tkd-modern-pagination {
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}