/**
 * TurnkeyDir Modern Niche / Search Page - Extracted Inline CSS
 *
 * Originally lived as four large <style> blocks inside
 * public/templates/modern-niche.php (~7,700 lines of CSS emitted on every
 * niche/search pageview, with 186 PHP echo replacements per response).
 * Extracted in v2.16.9 (Phase 4) so:
 *   - the bytes are browser-cacheable across niche pageviews;
 *   - the HTML response shrinks by ~125 KB per pageview;
 *   - PHP-emitted colour values are replaced with `var(--tkd-...)` refs to
 *     the central CSS-variable block defined by
 *     TURNKEYDIR_Public::generate_dynamic_color_css().
 *
 * Block boundaries from the source template are preserved as comments below
 * so a diff against the v2.16.8 modern-niche.php is readable.
 *
 * The original :root block at lines 422-434 of Block 1 defined eleven
 * variables (--tkd-primary, --tkd-primary-dark, --tkd-text-dark,
 * --tkd-text-gray, --tkd-text-light, --tkd-bg-white, --tkd-bg-glass,
 * --tkd-border, --tkd-border-light, --tkd-bg-light, --tkd-font-family).
 * All eleven are now resolved by generate_dynamic_color_css() (or, for
 * --tkd-font-family, by generate_typography_css_variables()).
 */

/* ============================================================
 * Block 1 (root vars + base layout + typography) (originally modern-niche.php lines 420-3896)
 * ============================================================ */
/* Dynamic CSS Variables from Dashboard Settings */
/* :root block (originally lines 422-434) hoisted to TURNKEYDIR_Public::generate_dynamic_color_css() in PR-26. */

/* ========================================
   CROSS-PLATFORM CRITICAL CSS OVERRIDES
   Following pattern from fixed city/state/country pages
   Using !important to ensure consistency across all themes
   ======================================== */

/* Typography - Force Inter font across all platforms */
.tkd-modern-niche-container,
.tkd-modern-niche-container *,
.tkd-search-widget,
.tkd-search-widget *,
.tkd-listings-grid,
.tkd-listings-grid * {
    font-family: var(--tkd-font-family) !important;
}

/* Font Awesome Solid Icons - CRITICAL: font-weight: 900 required for icons to render */
.fas,
.fa-solid,
[class*="fa-"]:not(.fab):not(.fa-brands) {
    font-family: "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Font Awesome Brands - font-weight: 400 for brand icons */
.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

/* ========================================
   CROSS-PLATFORM CARD CONSISTENCY V31
   Forces FIXED 420px HEIGHT on ALL cards
   Cards must be same size regardless of content
   ======================================== */

/* FIXED CARD HEIGHT - 420px compact wrapper */
/* V73: overflow: visible so inner element can move up on hover without clipping */
html body .tkd-listings-grid .glass-card-wrapper,
html body .glass-card-wrapper,
.tkd-listing-card.glass-card-wrapper,
.glass-card-wrapper {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Glass card top - MUST fill wrapper completely */
/* v2.14.31: bumped fixed height 420 → 460 to give the Call / View Details
   footer ≈40px of breathing room — at 420px the buttons were rendering flush
   against the card edge and getting visually clipped on cards with long
   business names or multi-line addresses. */
html body .glass-card-wrapper .glass-card-top,
.glass-card-wrapper .glass-card-top,
.glass-card-top {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* V54: Card border - BRAND COLOR FRAMING */
html body .tkd-listings-grid .tkd-listing-card .glass-card-top,
html body .tkd-results-panel .glass-card-top,
html body .glass-card-wrapper .glass-card-top,
.glass-card-wrapper:not(.banner-card) .glass-card-top,
.tkd-listing-card:not(.banner-card) .glass-card-top,
.glass-card-top:not(.banner-card *) {
    border: 1px solid rgba(var(--tkd-accent-rgb), 0.35) !important;
    /* V63: 20px border-radius - shadow follows this rounded shape */
    border-radius: 20px !important;
}

/* Glass card content - MUST fill and use flexbox for button positioning */
html body .glass-card-top .glass-card-content,
.glass-card-top .glass-card-content,
.glass-card-content {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* V50: Card header - FORCED block layout (NOT flex row) */
.tkd-card-header,
.glass-card-content .tkd-card-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important; /* NOT flex - children should stack vertically */
}

/* V50: Rating section with stars */
/* v2.14.31 → v2.14.32: the row is flex-direction: column (stars on one line,
   rating text on the line below) — so horizontal alignment is governed by
   align-items, NOT justify-content. Flipped align-items: center → flex-start
   so both lines hug the left edge of the card. */
.tkd-rating-info,
.glass-card-content .tkd-rating-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 8px 0 !important;
    width: 100% !important;
}

/* V50: Stars container */
.tkd-stars,
.glass-card-content .tkd-stars {
    display: flex !important;
    gap: 2px !important;
    align-items: center !important;
}

/* V50: Filled stars use ACCENT color */
.tkd-stars i.fas.fa-star.filled,
.tkd-stars i.fas.fa-star-half-alt.filled,
.tkd-stars .fa-star.filled,
.tkd-stars .fa-star-half-alt.filled,
html body .tkd-stars i.filled {
    color: var(--tkd-accent-color) !important;
    -webkit-text-fill-color: var(--tkd-accent-color) !important;
}

/* V50: Empty stars are light gray */
.tkd-stars i.far.fa-star,
.tkd-stars .far.fa-star,
html body .tkd-stars i.far {
    color: rgba(var(--tkd-text-rgb), 0.3) !important;
    -webkit-text-fill-color: rgba(var(--tkd-text-rgb), 0.3) !important;
}

/* V50: Rating text */
.tkd-rating-text,
.glass-card-content .tkd-rating-text {
    color: var(--tkd-text-color) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* V78: Street View badge - COMPLETE NUCLEAR CSS */
/* Target every possible element and pseudo-element */
.tkd-mapillary-badge,
html body .tkd-mapillary-badge,
.tkd-card-image .tkd-mapillary-badge,
div.tkd-mapillary-badge {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
/* All children including pseudo-elements */
.tkd-mapillary-badge *,
.tkd-mapillary-badge i,
.tkd-mapillary-badge span,
.tkd-mapillary-badge i::before,
.tkd-mapillary-badge i::after,
.tkd-mapillary-badge .fas::before,
.tkd-mapillary-badge .fa-street-view::before,
html body .tkd-mapillary-badge *,
html body .tkd-mapillary-badge i,
html body .tkd-mapillary-badge span,
html body .tkd-mapillary-badge i::before {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Business name - FORCED consistent styling.
   Clean 2-line clamp: the old `display: flow-root` here KILLED the cards'
   inline -webkit-box clamp (CSS !important beats inline styles), so long
   titles hard-clipped mid-glyph against a fixed 2.6em box and the call row
   below got crammed. -webkit-line-clamp guarantees <=2 lines with a clean
   ellipsis; height:auto (not a fixed 2.6em) lets one-line titles free the
   space and lets the Open/Closed badge's slightly-taller line render fully.
   The height overrides also defeat the JS-rendered card's legacy inline
   2.6em cage. */
.tkd-business-name,
.glass-card-content .tkd-business-name,
.tkd-card-header .tkd-business-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
    box-sizing: border-box !important;
}

/* Business name link */
.tkd-business-name a {
    display: inline !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Inline status badge - ensure it doesn't break layout */
.tkd-status-badge-inline {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}

/* Social badges container - ALWAYS takes minimum space */
.tkd-social-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
    min-height: 31px !important; /* Reserve space even if empty */
    align-items: flex-start !important;
}

/* Card layout - flex column with footer at bottom */
/* v2.14.31: padding-bottom 16px so the Call/View Details footer sits above
   the card edge instead of flush against it. */
.glass-card-content,
.tkd-listing-card .glass-card-content {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 16px !important;
}

/* Card body - takes all available space, pushes footer down. overflow is
   HIDDEN on purpose: the card box is fixed (420 wrapper / 460 card-top), so
   when content runs long the flexed body must truncate its own overflow —
   with overflow visible it painted address/phone rows over the footer's
   Call / View Details buttons (the mobile "crammed card" bug). */
html body .glass-card-content .tkd-card-body,
.tkd-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 60px !important;
}

/* Force description to use -webkit-box for line-clamp — ALL viewports.
   (The old mobile branch removed truncation and let cards "expand", but the
   fixed 420/460 card heights always won the cascade, so on phones the
   un-truncated content just clipped into the footer. Fixed-size cards need
   clamped text everywhere.) */
.tkd-card-body .tkd-business-description,
.glass-card-content .tkd-business-description,
.tkd-listing-card .tkd-business-description {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 39px !important; /* 13px font * 1.5 line-height * 2 lines */
    max-height: 39px !important;
    height: 39px !important;
}

/* Card footer with action buttons - ALWAYS at bottom */
html body .glass-card-content .tkd-card-footer,
.tkd-card-footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    padding-top: 8px !important;
}

/* Card actions (buttons) - consistent layout */
html body .glass-card-content .tkd-card-actions,
.tkd-card-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Card image - compact dimensions */
.tkd-card-image,
.glass-card-content .tkd-card-image {
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
}

/* Rating display - consistent styling */
/* v2.14.33: align-items: flex-start so stars + "5.0 (N reviews)" both hug the
   left edge of the card (column-flex direction means align-items controls
   horizontal alignment). Was align-items: center !important — the same bug
   that hit the v2.14.31/.32 versions of this rule below. */
.tkd-rating-info,
.glass-card-content .tkd-rating-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    min-height: 24px !important;
}

/* Override all hardcoded colors with dynamic ones */
body {
    background-color: var(--tkd-main-bg-color) !important;
    color: var(--tkd-text-color) !important;
    /* CROSS-PLATFORM V4: Prevent horizontal scrollbar */
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* CROSS-PLATFORM V4: Ensure no element causes horizontal overflow */
html {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* GLASS CARD SYSTEM - Copied from business listing template */
/* NOTE: min-height values are set in CROSS-PLATFORM CARD CONSISTENCY section above */
.glass-card-wrapper {
    position: relative;
    width: 100%;
    /* min-height: 420px - defined above with !important */
    margin: 0 auto;
    perspective: 1000px;
}

/* Glass card base removed - no longer needed */

/* V71: Glass Card Top - EXACT COPY from single-listing.php */
.glass-card-top {
    position: relative;
    width: 100%;
    height: auto !important;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.90) 0%, 
        rgba(255, 255, 255, 0.85) 100%) !important;
    border-radius: 16px !important;
    overflow: hidden;
    /* V71: EXACT shadow from single-listing.php line 2256 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    filter: none !important;
    z-index: 2;
    border: 1px solid rgba(var(--tkd-accent-rgb), 0.3) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Card Content */
.glass-card-content {
    position: relative;
    z-index: 5;
    padding: 12px;
    min-height: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    color: var(--tkd-text-color);
    box-sizing: border-box;
}

/* Business Cards - Force glass system override */
.tkd-listing-card,
.tkd-business-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* V57: Removed - was blocking hover animation. Now handled below with translateY(-6px) */

/* V57: Card hover animation - applied to OUTER wrapper to avoid backdrop-filter blur */
.tkd-listing-card,
.tkd-business-card,
.glass-card-wrapper {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.tkd-listing-card:hover,
.tkd-business-card:hover,
.glass-card-wrapper:hover {
    transform: translateY(-6px) !important;
    z-index: 10 !important;
}

/* V57: Inner glass-card-top - NO transform (causes blur), but shadow and border change */
.tkd-listing-card:hover .glass-card-top,
.tkd-business-card:hover .glass-card-top,
.glass-card-wrapper:hover .glass-card-top {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 20px 60px rgba(0, 0, 0, 0.12) !important;
    border: 2px solid rgba(var(--tkd-accent-rgb), 0.7) !important;
}

/* Business Card Text - Force override */
.tkd-listing-card .tkd-business-name,
.tkd-listing-card .tkd-business-name a,
.glass-card-content .tkd-business-name,
.glass-card-content .tkd-business-name a {
    color: var(--tkd-text-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.tkd-listing-card .tkd-business-name a:hover,
.glass-card-content .tkd-business-name a:hover {
    color: var(--tkd-accent-color) !important;
}

.tkd-listing-card .tkd-business-location,
.tkd-listing-card .tkd-business-phone,
.tkd-listing-card .tkd-business-description,
.tkd-listing-card .tkd-rating-text,
.glass-card-content .tkd-business-location,
.glass-card-content .tkd-business-phone,
.glass-card-content .tkd-business-description,
.glass-card-content .tkd-rating-text {
    color: rgba(var(--tkd-text-rgb), 0.8) !important;
}

/* View Details Buttons - Force Dynamic Colors */
.tkd-listing-card .tkd-view-details,
.tkd-listing-card .tkd-btn-primary,
.glass-card-content .tkd-view-details,
.glass-card-content .tkd-btn-primary {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: var(--tkd-accent-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.tkd-listing-card .tkd-view-details:hover,
.tkd-listing-card .tkd-btn-primary:hover,
.glass-card-content .tkd-view-details:hover,
.glass-card-content .tkd-btn-primary:hover {
    background: rgba(var(--tkd-accent-rgb), 0.8) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(var(--tkd-accent-rgb), 0.3) !important;
}

/* V32: Call Button - Outline style with accent color */
.tkd-listing-card .tkd-call-btn,
.glass-card-content .tkd-call-btn,
.tkd-card-footer .tkd-call-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: rgba(var(--tkd-accent-rgb), 0.15) !important;
    color: var(--tkd-accent-color) !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 1.5px solid var(--tkd-accent-color) !important;
}

.tkd-listing-card .tkd-call-btn:hover,
.glass-card-content .tkd-call-btn:hover,
.tkd-card-footer .tkd-call-btn:hover {
    background: var(--tkd-accent-color) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Visit Website Links */
.tkd-visit-website {
    color: rgba(var(--tkd-text-rgb), 0.7) !important;
}

.tkd-visit-website:hover {
    color: var(--tkd-accent-color) !important;
}

/* Page Background */
.tkd-modern-niche-container,
.tkd-content-section {
    background-color: var(--tkd-main-bg-color) !important;
}

/* Force card structure overrides */
.tkd-listing-card .tkd-card-header,
.glass-card-content .tkd-card-header {
    padding: 0 !important;
    margin-bottom: 6px !important;
}

.tkd-listing-card .tkd-card-body,
.glass-card-content .tkd-card-body {
    padding: 0 !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
}

.tkd-listing-card .tkd-card-footer,
.glass-card-content .tkd-card-footer {
    padding: 0 !important;
    border-top: none !important;
    margin-top: auto !important;
    display: flex !important;
    gap: 8px !important;
}

.tkd-listing-card .tkd-card-image,
.glass-card-content .tkd-card-image {
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

/* Filter and Search Elements */
.tkd-filter-tab.active,
.tkd-filter-chip.active,
.tkd-rating-btn.active {
    background: var(--tkd-accent-color) !important;
    color: white !important;
    border-color: var(--tkd-accent-color) !important;
}

.tkd-filter-tab:hover,
.tkd-filter-chip:hover,
.tkd-rating-btn:hover {
    border-color: var(--tkd-accent-color) !important;
    background: rgba(var(--tkd-accent-rgb), 0.1) !important;
}

/* Pagination */
.tkd-page-num.active {
    background: var(--tkd-accent-color) !important;
    color: white !important;
    border-color: var(--tkd-accent-color) !important;
}

.tkd-page-btn:hover,
.tkd-page-num:hover {
    border-color: rgba(var(--tkd-accent-rgb), 0.3) !important;
    background: rgba(var(--tkd-accent-rgb), 0.1) !important;
}

/* Apply Filters Button */
.tkd-apply-filters {
    background: var(--tkd-accent-color) !important;
    color: white !important;
}

.tkd-apply-filters:hover {
    background: rgba(var(--tkd-accent-rgb), 0.8) !important;
}

/* Active Filters Bar */
.tkd-active-filters-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(var(--tkd-accent-rgb), 0.05);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(var(--tkd-accent-rgb), 0.1);
}

.tkd-active-filters-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--tkd-text-dark);
    font-size: 14px;
}

.tkd-active-filters-label i {
    color: var(--tkd-primary);
}

.tkd-active-filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.tkd-active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--tkd-primary);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.tkd-active-filter-chip span {
    white-space: nowrap;
}

.tkd-remove-filter-chip {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    line-height: 1;
}

.tkd-remove-filter-chip:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.tkd-remove-filter-chip i {
    font-size: 10px;
}

.tkd-clear-all-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(var(--tkd-accent-rgb), 0.1);
    color: var(--tkd-text-dark);
    border: 1px solid rgba(var(--tkd-accent-rgb), 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.tkd-clear-all-filters:hover {
    background: rgba(var(--tkd-accent-rgb), 0.15);
    border-color: var(--tkd-primary);
    color: var(--tkd-primary);
}

.tkd-clear-all-filters i {
    font-size: 12px;
}

/* Clear Filters Button */
.tkd-clear-filters {
    border-color: rgba(var(--tkd-accent-rgb), 0.3) !important;
    color: rgba(var(--tkd-text-rgb), 0.7) !important;
}

.tkd-clear-filters:hover {
    background: rgba(var(--tkd-accent-rgb), 0.1) !important;
    border-color: rgba(var(--tkd-accent-rgb), 0.5) !important;
}

/* Badges are now rendered inline below the business name, not as image overlays */

/* No Results Section */
.tkd-no-results h3 {
    color: var(--tkd-text-color) !important;
}

.tkd-no-results p {
    color: rgba(var(--tkd-text-rgb), 0.7) !important;
}

/* CRITICAL OVERRIDE - Force glass design on all business cards */
.tkd-results-panel .tkd-listings-grid .tkd-listing-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
    display: block !important;
}

/* ==========================================================================
   V63: COMPREHENSIVE SHADOW FIX - ALL shadows on inner element only
   
   Problem: Multiple shadow sources on outer wrapper (no border-radius) 
            causing sharp edge flashes during hover transition.
   
   Solution: 
   1. REMOVE all shadows from outer wrappers (.tkd-listing-card, .glass-card-wrapper)
   2. PUT all shadows on inner .glass-card-top (has 20px border-radius)
   3. Use !important to override external CSS files
   ========================================================================== */

/* OUTER WRAPPER: No shadows ever - only transform and z-index */
.tkd-listing-card,
.glass-card-wrapper,
.tkd-results-panel .tkd-listings-grid .tkd-listing-card,
.tkd-listings-grid .glass-card-wrapper,
.tkd-business-card {
    box-shadow: none !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s !important;
}

/* OUTER WRAPPER HOVER: Still no shadow, just lift */
.tkd-listing-card:hover,
.glass-card-wrapper:hover,
.tkd-results-panel .tkd-listings-grid .tkd-listing-card:hover,
.tkd-listings-grid .glass-card-wrapper:hover,
.tkd-business-card:hover {
    transform: translateY(-8px) !important;
    z-index: 20 !important;
    box-shadow: none !important;
}

/* V74: INNER ELEMENT: NO SHADOW */
.tkd-listing-card .glass-card-top,
.glass-card-wrapper .glass-card-top,
.tkd-results-panel .tkd-listings-grid .tkd-listing-card .glass-card-top {
    box-shadow: none !important;
    filter: none !important;
    border-radius: 16px !important;
}

/* V74: INNER ELEMENT HOVER - NO SHADOW */
.tkd-listing-card:hover .glass-card-top,
.glass-card-wrapper:hover .glass-card-top,
.tkd-results-panel .tkd-listings-grid .tkd-listing-card:hover .glass-card-top {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: 1px solid rgba(var(--tkd-accent-rgb), 0.5) !important;
}

.tkd-results-panel .tkd-listings-grid .tkd-listing-card .tkd-business-name a:hover {
    color: var(--tkd-accent-color) !important;
}

.tkd-results-panel .tkd-listings-grid .tkd-listing-card .tkd-view-details:hover {
    background: rgba(var(--tkd-accent-rgb), 0.8) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.tkd-results-panel .tkd-listings-grid .tkd-listing-card .tkd-card-header,
.tkd-results-panel .tkd-listings-grid .tkd-listing-card .tkd-card-body,
.tkd-results-panel .tkd-listings-grid .tkd-listing-card .tkd-card-footer {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.tkd-results-panel .tkd-listings-grid .tkd-listing-card .tkd-view-details {
    background: var(--tkd-accent-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.tkd-results-panel .tkd-listings-grid .tkd-listing-card .tkd-view-details:hover {
    background: rgba(var(--tkd-accent-rgb), 0.8) !important;
    color: white !important;
}

/* Critical styles for modern niche page with dynamic colors */
.tkd-modern-niche-container {
    min-height: 100vh;
    background-color: var(--tkd-bg-white);
}

.tkd-hero-section {
    background: linear-gradient(180deg, var(--tkd-bg-light) 0%, var(--tkd-bg-white) 100%);
    padding: 48px 0 48px;
    border-bottom: 1px solid var(--tkd-border);
    margin-bottom: 0;
}

.tkd-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.tkd-hero-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--tkd-text-dark);
    margin: 0 0 8px;
    line-height: 1.2;
}

.tkd-hero-subtitle {
    font-size: 16px !important;
    color: var(--tkd-text-gray) !important;
    margin: 0 0 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

.tkd-search-widget {
    max-width: 900px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 10 !important;
}

.tkd-search-form {
    background: var(--tkd-bg-white);
    border-radius: 16px;
    box-shadow: 0 4px 16px var(--tkd-bg-glass);
    border: 1px solid var(--tkd-border);
    padding: 0;
    overflow: hidden;
    display: flex;
}

.tkd-search-inputs {
    display: flex;
    align-items: stretch;
    min-height: 48px;
    width: 100%;
    flex: 1;
}

.tkd-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.tkd-field-business {
    flex: 2;
    border-right: none;
    position: relative;
    padding: 8px 0 8px 16px;
}

.tkd-field-filters {
    flex: 1.2;
    border-right: 1px solid var(--tkd-border);
    position: relative;
    padding: 8px 0;
}

.tkd-field-location {
    flex: 1.5;
    border-right: 1px solid var(--tkd-border);
    padding: 8px 0;
}

.tkd-field-business input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--tkd-text-dark);
    background: transparent;
    padding: 0 50px 0 0;
    line-height: 20px;
    height: 100%;
}

.tkd-field-business input::placeholder {
    color: var(--tkd-text-light);
}

.tkd-reset-search {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    opacity: 0.8;
    box-shadow: none !important;
    outline: none;
}

.tkd-reset-search:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.09);
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
    box-shadow: none !important;
}

.tkd-reset-search:active {
    transform: translateY(-50%) scale(0.95);
    background: rgba(0, 0, 0, 0.12);
    box-shadow: none !important;
}

.tkd-reset-search:focus {
    outline: none;
    box-shadow: none !important;
}

.tkd-reset-search i {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
}

/* Location Selector - Desktop Only */
@media (min-width: 769px) {
    .tkd-location-selector {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        cursor: pointer;
        min-height: 48px;
        box-sizing: border-box;
    }

    .tkd-location-text {
        font-size: 16px;
        color: var(--tkd-text-dark);
        flex: 1;
    }

    .tkd-location-selector i {
        color: var(--tkd-text-light);
        font-size: 12px;
        transition: transform 0.2s;
    }

    .tkd-location-selector.active i {
        transform: rotate(180deg);
    }
}

/* Location Dropdown */
.tkd-location-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--tkd-border);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.10);
    z-index: 1000;
    margin-top: 8px;
    max-height: 90vh;
    width: 720px;
    max-width: 95vw;
    overflow: hidden;
    display: none;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop only - location dropdown active state */
@media (min-width: 769px) {
    .tkd-location-dropdown.active {
        display: block;
    }
}

.tkd-location-search {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--tkd-border-light);
}

.tkd-location-search input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--tkd-border);
    border-radius: 7px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    background: white;
    font-family: inherit;
}

.tkd-location-search input:focus {
    border-color: var(--tkd-text-dark);
}

.tkd-location-search input::placeholder {
    color: var(--tkd-text-gray);
}

/* Location Filter Tabs */
.tkd-location-filters {
    display: flex;
    border-bottom: 1px solid var(--tkd-border-light);
    background: #FAFAFA;
}

.tkd-filter-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 11px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    color: var(--tkd-text-gray);
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.tkd-filter-tab:hover {
    background: #F0F0F0;
    color: #222222;
}

.tkd-filter-tab.active {
    background: white;
    color: #222222;
    border-bottom-color: var(--tkd-accent-color);
}

.tkd-filter-tab i {
    font-size: 12px;
}

/* Location Content */
.tkd-location-content {
    background: white;
    min-height: 160px;
    max-height: 280px;
    overflow-y: auto;
}

.tkd-filter-content {
    display: none;
    padding: 14px 16px;
}

.tkd-filter-content.active {
    display: block;
}

/* Near Me Option */
.tkd-near-me-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 2px dashed rgba(var(--tkd-accent-rgb), 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #FAFAFA;
}

.tkd-near-me-option:hover {
    border-color: var(--tkd-accent-color);
    background: white;
}

.tkd-near-me-info h5 {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 3px;
}

.tkd-near-me-info p {
    font-size: 12px;
    color: var(--tkd-text-gray);
    margin: 0;
}

.tkd-near-me-option i {
    font-size: 16px;
    color: var(--tkd-accent-color);
}

/* Location Grid */
.tkd-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.tkd-location-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border: 1px solid #EBEBEB;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.tkd-location-item:hover {
    border-color: var(--tkd-accent-color);
    background: #FAFAFA;
}

.tkd-location-info {
    flex: 1;
    min-width: 0;
}

.tkd-location-name {
    font-size: 12.5px;
    font-weight: 500;
    color: #222222;
    line-height: 1.3;
    display: block;
}

.tkd-location-info small {
    font-size: 11px;
    color: var(--tkd-text-gray);
    line-height: 1.2;
}

.tkd-location-count {
    font-size: 11px;
    color: var(--tkd-text-gray);
    background: #F0F0F0;
    padding: 3px 7px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Filters Selector - Desktop Only */
@media (min-width: 769px) {
    .tkd-filters-selector {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        cursor: pointer;
        min-height: 48px;
        box-sizing: border-box;
    }

    .tkd-filters-text {
        font-size: 16px;
        color: #222222;
        flex: 1;
    }

    .tkd-filters-selector i {
        color: var(--tkd-text-gray);
        font-size: 14px;
        transition: transform 0.2s;
    }

    .tkd-filters-selector.active i {
        transform: rotate(180deg);
    }
}

/* Hide dropdown header on desktop - only show on mobile */
@media (min-width: 769px) {
    .tkd-dropdown-header {
        display: none;
    }
    
    /* Hide location actions on desktop - only show on mobile */
    .tkd-location-actions {
        display: none;
    }
}

/* Filters Dropdown - Ultra Wide Layout - Centered */
.tkd-filters-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--tkd-border);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.10);
    z-index: 1000;
    margin-top: 8px;
    width: 980px;
    max-width: 95vw;
    overflow: visible;
    display: none;
    animation: slideDown 0.3s ease-out;
}

.tkd-filters-dropdown.active {
    display: block;
}

/* Mobile override - must be after desktop rule */
@media (max-width: 768px) {
    /* CRITICAL: Ensure dropdown is hidden when NOT active */
    .tkd-filters-dropdown:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .tkd-filters-dropdown.active {
        display: flex !important;
    }
    
    /* CRITICAL FIX: Override desktop grid with maximum specificity */
    .tkd-filters-dropdown.active .tkd-filters-content,
    .tkd-filters-dropdown.active .tkd-filters-content[style],
    .tkd-filters-dropdown.active .tkd-filters-content[style*="grid"] {
        display: flex !important;
        flex-direction: column !important;
        grid: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 300px !important;
        height: auto !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        padding: 20px !important;
        max-height: calc(100vh - 180px) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force all filter sections to be visible */
    .tkd-filters-dropdown.active .tkd-filter-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 100px !important;
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

.tkd-filters-content {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 14px;
    border-bottom: 1px solid #F0F0F0;
    overflow: visible;
    /* CROSS-PLATFORM FIX: Align all columns to top to prevent gap */
    align-items: start !important;
}

/* Desktop: Keep grid layout */
@media (min-width: 769px) {
    .tkd-filters-content {
        display: grid !important;
        grid-template-columns: auto 1fr 1fr !important;
    }
    
    .tkd-filter-section {
        grid-column: auto;
        grid-row: auto;
    }
    
    .tkd-filter-section:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    
    .tkd-filter-section:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }
    
    .tkd-filter-section:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    }
    
    .tkd-filter-section:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }
}

.tkd-filter-section {
    text-align: left;
    /* CROSS-PLATFORM FIX V6: Ensure sections align to top */
    align-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* CROSS-PLATFORM V6: Force first row placement for first 3 sections */
    grid-row: auto !important;
}

/* CROSS-PLATFORM V6: Force first column to stay in first row */
.tkd-filter-section:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.tkd-filter-section:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.tkd-filter-section:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

/* 4th section (Availability) spans full width on row 2 */
.tkd-filter-section:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

.tkd-filter-section h4 {
    font-size: 11px;
    font-weight: 800;
    color: #222222;
    text-transform: uppercase;
    margin: 0 0 8px;
    letter-spacing: 0.8px;
    text-align: left;
}

/* Quick Filters */
.tkd-quick-filters {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tkd-filter-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    background: white;
    border: 1px solid #EBEBEB;
    border-radius: 7px;
    font-size: 12.5px;
    color: #222;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.tkd-filter-chip:hover {
    border-color: var(--tkd-accent-color);
    background: #FAFAFA;
}

.tkd-filter-chip.active {
    background: var(--tkd-accent-color);
    border-color: var(--tkd-accent-color);
    color: white;
}

.tkd-filter-chip i {
    font-size: 12px;
    width: 14px;
    text-align: center;
}

/* Rating Selector */
.tkd-rating-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.tkd-rating-btn {
    padding: 8px 10px;
    background: white;
    border: 1px solid #EBEBEB;
    border-radius: 7px;
    font-size: 12.5px;
    color: #222;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.tkd-rating-btn:hover {
    border-color: var(--tkd-accent-color);
    background: #FAFAFA;
}

.tkd-rating-btn.active {
    background: var(--tkd-accent-color);
    border-color: var(--tkd-accent-color);
    color: white;
}

/* PHASE 1: Availability Checkbox */
.tkd-availability-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tkd-checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid #EBEBEB;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    width: fit-content;
}

.tkd-checkbox-option:hover {
    border-color: var(--tkd-accent-color);
    background: #FAFAFA;
}

.tkd-checkbox-option input[type="checkbox"] {
    margin: 0;
    accent-color: var(--tkd-accent-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tkd-checkbox-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #222;
    cursor: pointer;
}

.tkd-checkbox-label i {
    color: var(--tkd-accent-color);
    width: 14px;
    font-size: 12px;
    text-align: center;
}

.tkd-checkbox-option input[type="checkbox"]:checked ~ .tkd-checkbox-label {
    color: var(--tkd-accent-color);
    font-weight: 500;
}

/* PHASE 1: Open/Closed Status Badge on Cards */
.tkd-status-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: middle;
}

.tkd-status-badge-inline i {
    font-size: 10px;
}

.tkd-status-badge-inline.tkd-status-open {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.25);
}

.tkd-status-badge-inline.tkd-status-closed {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.12) 0%, rgba(244, 67, 54, 0.06) 100%);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.2);
}

/* PHASE 1: Click-to-Call Phone Link - V32: Uses accent color */
.tkd-phone-link-inline {
    color: var(--tkd-accent-color);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.tkd-phone-link-inline:hover {
    color: var(--tkd-accent-color);
    text-decoration: underline;
}

/* PHASE 1: Hours Info - V32: Uses accent color for FULL text */
.tkd-hours-info-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tkd-accent-color);
    margin-bottom: 8px;
    font-weight: 500;
}

.tkd-hours-info-inline i {
    color: var(--tkd-accent-color);
    font-size: 12px;
}

/* Sort Options */
.tkd-sort-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tkd-sort-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.tkd-sort-option:hover {
    border-color: var(--tkd-accent-color);
    background: #FAFAFA;
}

.tkd-sort-option input[type="radio"] {
    margin: 0;
    accent-color: var(--tkd-accent-color);
}

.tkd-sort-option input[type="radio"]:checked + span {
    color: var(--tkd-accent-color);
    font-weight: 500;
}

.tkd-sort-option span {
    font-size: 14px;
    color: #222;
    transition: color 0.2s;
}

/* Filters Actions */
.tkd-filters-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #FAFAFA;
}

.tkd-clear-filters {
    background: none;
    border: 1px solid #DDD;
    color: #666;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tkd-clear-filters:hover {
    background: #F5F5F5;
    border-color: #CCC;
}

.tkd-apply-filters {
    background: var(--tkd-accent-color);
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.tkd-apply-filters:hover {
    background: rgba(var(--tkd-accent-rgb), 0.8);
}

/* Business Search Section */
.tkd-business-search {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tkd-business-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: border-color 0.2s;
}

.tkd-business-input:focus {
    outline: none;
    border-color: var(--tkd-accent-color);
}

.tkd-search-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tkd-toggle-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.tkd-toggle-option:hover {
    border-color: var(--tkd-accent-color);
    background: #FAFAFA;
}

.tkd-toggle-option input[type="checkbox"] {
    margin: 0;
    accent-color: var(--tkd-accent-color);
}

.tkd-toggle-option input[type="checkbox"]:checked + span {
    color: var(--tkd-accent-color);
    font-weight: 500;
}

.tkd-toggle-option span {
    font-size: 14px;
    color: #222;
    transition: color 0.2s;
}

.tkd-toggle-option i {
    font-size: 12px;
    width: 14px;
    text-align: center;
}

/* Distance & Service Section */
.tkd-distance-service {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tkd-distance-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tkd-distance-control label {
    font-size: 12.5px;
    color: #222;
    font-weight: 500;
}

.tkd-range-slider {
    width: 100%;
    height: 5px;
    border-radius: 2.5px;
    background: #E0E0E0;
    outline: none;
    -webkit-appearance: none;
}

.tkd-range-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tkd-accent-color);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.tkd-range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tkd-accent-color);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.tkd-service-select,
.tkd-sort-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #EBEBEB;
    border-radius: 7px;
    font-size: 12.5px;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.tkd-service-select:focus,
.tkd-sort-select:focus {
    outline: none;
    border-color: var(--tkd-accent-color);
}

/* Sort & Reviews Section */
.tkd-sort-reviews {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tkd-reviews-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tkd-reviews-control label {
    font-size: 12.5px;
    color: #222;
    font-weight: 500;
}

.tkd-reviews-control small {
    font-size: 10.5px;
    color: #999;
}

/* Enhanced Sort Options Cards */
.tkd-sort-options-enhanced {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tkd-sort-option-card {
    position: relative;
    display: block;
    cursor: pointer;
    background: white;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s;
}

.tkd-sort-option-card:hover {
    border-color: var(--tkd-accent-color);
    background: #FAFAFA;
}

.tkd-sort-option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tkd-sort-option-card input[type="radio"]:checked + .tkd-sort-content {
    color: var(--tkd-accent-color);
}

.tkd-sort-option-card input[type="radio"]:checked + .tkd-sort-content i {
    color: var(--tkd-accent-color);
}

.tkd-sort-content {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.tkd-sort-content i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: #666;
    transition: color 0.2s;
}

.tkd-sort-content span {
    font-size: 14px;
    color: #222;
    font-weight: 500;
}

/* Custom scrollbar */
.tkd-location-sections::-webkit-scrollbar,
.tkd-filters-content::-webkit-scrollbar {
    width: 6px;
}

.tkd-location-sections::-webkit-scrollbar-track,
.tkd-filters-content::-webkit-scrollbar-track {
    background: #F7F7F7;
}

.tkd-location-sections::-webkit-scrollbar-thumb,
.tkd-filters-content::-webkit-scrollbar-thumb {
    background: #DDDDDD;
    border-radius: 3px;
}

.tkd-location-sections::-webkit-scrollbar-thumb:hover,
.tkd-filters-content::-webkit-scrollbar-thumb:hover {
    background: #CCCCCC;
}

.tkd-search-submit {
    background: var(--tkd-primary);
    color: white;
    border: none;
    border-radius: 0 16px 16px 0;
    width: 56px;
    height: 100%;
    min-height: 44px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    flex-shrink: 0;
    align-self: stretch;
}

.tkd-search-submit:hover {
    background: var(--tkd-primary-dark);
    box-shadow: none;
}

.tkd-search-submit:active {
    background: var(--tkd-primary-dark);
    opacity: 0.9;
    box-shadow: none;
}

/* ===== COMPREHENSIVE MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* CRITICAL: Show dropdown headers on mobile - override desktop hide */
    .tkd-filters-dropdown .tkd-dropdown-header,
    .tkd-location-dropdown .tkd-dropdown-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* CRITICAL: Show location actions footer on mobile */
    .tkd-location-dropdown .tkd-location-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
    
    /* CRITICAL: Ensure close button is visible */
    .tkd-filters-dropdown .tkd-dropdown-close,
    .tkd-location-dropdown .tkd-dropdown-close {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hero Section */
    .tkd-hero-section {
        padding: 24px 0 !important;
        min-height: auto !important;
    }
    
    .tkd-hero-content {
        padding: 0 16px !important;
        max-width: 100% !important;
    }
    
    .tkd-hero-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }
    
    .tkd-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    /* Search Widget */
    .tkd-search-widget {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .tkd-search-form {
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        margin: 0 16px !important;
    }
    
    .tkd-search-inputs {
        flex-direction: column !important;
        gap: 0 !important;
        min-height: auto !important;
    }
    
    /* Search Fields */
    .tkd-search-field {
        width: 100% !important;
        min-height: 56px !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        border: none !important;
        background: #f7f7f7 !important;
    }
    
    .tkd-search-field:hover {
        background: #eeeeee !important;
    }
    
    .tkd-search-field::after {
        display: none !important;
    }
    
    .tkd-field-business,
    .tkd-field-filters,
    .tkd-field-location {
        width: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
    }
    
    .tkd-field-location {
        margin-bottom: 16px !important;
    }
    
    /* Inputs (exclude range sliders) */
    .tkd-search-field input:not([type="range"]) {
        font-size: 16px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    
    .tkd-search-field input::placeholder {
        font-size: 15px !important;
    }
    
    /* Search Submit Button */
    .tkd-search-submit {
        width: 100% !important;
        height: 56px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }
    
    /* Dropdowns - These styles are overridden by full-screen styles later */
    /* Keeping minimal base styles here */
    
    /* Filter Content */
    .tkd-filters-content {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        overflow-y: auto !important;
        padding: 0 20px 20px !important;
    }
    
    /* CRITICAL: When filters dropdown is active on mobile, MUST use flex, not grid */
    .tkd-filters-dropdown.active .tkd-filters-content {
        display: flex !important;
        flex-direction: column !important;
        grid: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    
    /* Rating buttons - more tasteful, thinner - ONLY when dropdown is active */
    .tkd-filters-dropdown.active .tkd-rating-btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        border-radius: 6px !important;
        font-weight: 500 !important;
        border-width: 1px !important;
    }
    
    .tkd-filters-dropdown.active .tkd-rating-selector {
        gap: 6px !important;
    }
    
    /* Open Now checkbox - smaller and more tasteful - ONLY when dropdown is active */
    .tkd-filters-dropdown.active .tkd-checkbox-option {
        width: fit-content !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        border-radius: 8px !important;
        border-width: 1px !important;
    }
    
    .tkd-filters-dropdown.active .tkd-checkbox-option input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }
    
    .tkd-quick-filters,
    .tkd-rating-selector,
    .tkd-distance-service,
    .tkd-sort-reviews {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    /* Filter Tabs */
    .tkd-filter-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .tkd-filter-tab {
        padding: 10px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    .tkd-filter-tab span {
        display: inline !important;
    }
    
    .tkd-filter-tab i {
        font-size: 14px !important;
    }
    
    /* Location Grid */
    .tkd-location-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .tkd-location-option {
        padding: 14px 16px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }
    
    .tkd-filter-content {
        padding: 20px !important;
        overflow-y: auto !important;
    }
    /* .tkd-location-content styles moved to full-screen section */
    
    /* Results Section */
    .tkd-main-content {
        padding: 0 !important;
    }
    
    .tkd-results-header {
        padding: 20px 16px !important;
        text-align: center !important;
    }
    
    .tkd-results-count h2 {
        font-size: 20px !important;
    }
    
    /* Layout */
    .tkd-zillow-layout {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        gap: 0 !important;
    }
    
    .tkd-map-panel {
        display: none !important;
    }
    
    .tkd-results-panel {
        min-width: 100% !important;
        border-left: none !important;
        order: 1 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Listings - 1 column on mobile (override ALL styles including inline) */
    .tkd-listings-grid,
    .tkd-search-results-grid,
    #tkd-business-listings-scrollable,
    div.tkd-listings-grid.tkd-search-results-grid,
    div#tkd-business-listings-scrollable.tkd-listings-grid.tkd-search-results-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 16px 16px 0 16px !important;
        margin-bottom: 0 !important;
    }
    
    /* Force override ANY inline style attribute on mobile */
    #tkd-business-listings-scrollable[style],
    .tkd-listings-grid[style],
    .tkd-search-results-grid[style] {
        grid-template-columns: 1fr !important;
    }
    
    .tkd-card-image {
        height: 140px !important;
    }
    
    /* Touch Optimization (exclude range sliders) */
    button, a, input:not([type="range"]):not([type="checkbox"]), select {
        min-height: 44px !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Prevent iOS zoom */
    input, select, textarea {
        font-size: 16px !important;
    }
}

@media (max-width: 1024px) {
    .tkd-location-dropdown {
        left: -100px;
        right: -100px;
        min-width: 600px;
    }
    
    .tkd-destination-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Zillow-Style Layout */
.tkd-zillow-layout {
    display: flex;
    height: calc(100vh - 200px);
    min-height: 600px;
    margin-top: 20px;
    border-radius: 12px;
    overflow: visible; /* FIXED: Allow content to be visible for scrollbar */
    overflow-x: hidden !important; /* CROSS-PLATFORM V4: Prevent horizontal scroll */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 100% !important; /* CROSS-PLATFORM V4: Prevent overflow */
    box-sizing: border-box !important;
}

.tkd-map-panel {
    flex: 1;
    min-width: 50%;
    position: relative;
    background: #f5f5f5;
}

.tkd-map-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.tkd-results-panel {
    flex: 1;
    min-width: 50%;
    background: white;
    /* FIXED: Don't scroll the panel - only the listings grid inside should scroll */
    overflow-y: visible !important;
    overflow-x: visible !important;
    /* FIXED: Remove max-height so pagination stays visible below scrollable grid */
    max-height: none !important;
    border-left: 1px solid #e0e0e0;
    contain: layout style !important; /* CSS containment for performance */
    height: auto;
    /* CROSS-PLATFORM V4: Column layout to stack grid + pagination vertically */
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

/* V22 FIX: FIXED HEIGHT SCROLLBAR - Consistent 600px */
/* Changed from calc(100vh - 320px) to fixed 600px for predictability */
.tkd-listings-grid,
.tkd-results-panel .tkd-listings-grid,
.tkd-search-results-grid,
div.tkd-listings-grid.tkd-search-results-grid,
div[class*="tkd-listings-grid"],
.tkd-results-panel div[class*="listings-grid"] {
    max-height: 600px !important;
    height: 600px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    padding: 20px !important;
    margin: 0 !important;
    /* V22: Firefox scrollbar */
    scrollbar-width: auto !important;
    scrollbar-color: #444444 #e8e8e8 !important;
}

/* CROSS-PLATFORM V9: MAXIMUM VISIBILITY WebKit scrollbar */
/* Using multiple selectors for maximum specificity */
.tkd-listings-grid::-webkit-scrollbar,
.tkd-search-results-grid::-webkit-scrollbar,
div.tkd-listings-grid::-webkit-scrollbar,
div.tkd-search-results-grid::-webkit-scrollbar,
.tkd-results-panel .tkd-listings-grid::-webkit-scrollbar {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    background: #e8e8e8 !important;
}

.tkd-listings-grid::-webkit-scrollbar-track,
.tkd-search-results-grid::-webkit-scrollbar-track,
div.tkd-listings-grid::-webkit-scrollbar-track,
div.tkd-search-results-grid::-webkit-scrollbar-track,
.tkd-results-panel .tkd-listings-grid::-webkit-scrollbar-track {
    background: #e8e8e8 !important;
    border-radius: 9px !important;
    border: 2px solid #f5f5f5 !important;
}

.tkd-listings-grid::-webkit-scrollbar-thumb,
.tkd-search-results-grid::-webkit-scrollbar-thumb,
div.tkd-listings-grid::-webkit-scrollbar-thumb,
div.tkd-search-results-grid::-webkit-scrollbar-thumb,
.tkd-results-panel .tkd-listings-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #666666 0%, #444444 100%) !important;
    border-radius: 9px !important;
    border: 3px solid #e8e8e8 !important;
    min-height: 60px !important;
    cursor: grab !important;
}

.tkd-listings-grid::-webkit-scrollbar-thumb:hover,
.tkd-search-results-grid::-webkit-scrollbar-thumb:hover,
div.tkd-listings-grid::-webkit-scrollbar-thumb:hover,
div.tkd-search-results-grid::-webkit-scrollbar-thumb:hover,
.tkd-results-panel .tkd-listings-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #555555 0%, #333333 100%) !important;
}

.tkd-listings-grid::-webkit-scrollbar-thumb:active,
.tkd-search-results-grid::-webkit-scrollbar-thumb:active,
div.tkd-listings-grid::-webkit-scrollbar-thumb:active,
div.tkd-search-results-grid::-webkit-scrollbar-thumb:active,
.tkd-results-panel .tkd-listings-grid::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #333333 0%, #111111 100%) !important;
    cursor: grabbing !important;
}

/* V9: Force scrollbar button visibility */
.tkd-listings-grid::-webkit-scrollbar-button,
.tkd-search-results-grid::-webkit-scrollbar-button {
    display: none !important;
}

/* CRITICAL: Hide infinite scroll sentinel to prevent freeze on staging */
.tkd-scroll-sentinel,
[class*="scroll-sentinel"],
[class*="load-more-trigger"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* PERFORMANCE: Limit visible cards rendering */
.tkd-listings-grid > *:nth-child(n+21) {
    /* Hide cards beyond the first 20 to prevent performance issues */
    /* This is a CSS fallback if JS fails */
    content-visibility: auto !important;
    contain-intrinsic-size: 0 500px !important;
}

/* Custom scrollbar for results grid - CROSS-PLATFORM VISIBLE */
.tkd-listings-grid::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
}
.tkd-listings-grid::-webkit-scrollbar-track {
    background: #e8e8e8 !important;
    border-radius: 5px !important;
}
.tkd-listings-grid::-webkit-scrollbar-thumb {
    background: #999999 !important;
    border-radius: 5px !important;
    min-height: 40px !important;
}
.tkd-listings-grid::-webkit-scrollbar-thumb:hover {
    background: #777777 !important;
}

/* CROSS-PLATFORM: Ensure scrollbar is always visible on all platforms */
@supports (-webkit-overflow-scrolling: touch) {
    /* iOS Safari */
    .tkd-listings-grid {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Firefox scrollbar */
@-moz-document url-prefix() {
    .tkd-listings-grid {
        scrollbar-width: thin !important;
        scrollbar-color: #999999 #e8e8e8 !important;
    }
}

/* CROSS-PLATFORM: Results list container - ensures pagination stays below scrollable grid */
.tkd-results-list {
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: calc(100vh - 150px) !important; /* Leave room for header */
    overflow: visible !important;
}

/* DISABLED - REPLACED WITH CLEAN GRID VERSION */

/* Business Card Content */
.tkd-card-header {
    margin-bottom: 12px;
}

.tkd-business-name {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.tkd-business-name a {
    color: inherit;
    text-decoration: none;
}

.tkd-business-name a:hover {
    color: #FF5A5F;
}

/* v2.14.33: column-flex left-align — see canonical rule near line 546. */
.tkd-rating-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.tkd-stars {
    display: flex;
    gap: 2px;
}

/* V32: Stars use accent color */
.tkd-stars i.filled {
    color: var(--tkd-accent-color);
}

.tkd-stars i.far {
    color: rgba(var(--tkd-text-rgb), 0.3);
}

.tkd-rating-text {
    font-size: 14px;
    color: #666;
}

.tkd-business-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
}

.tkd-business-location i {
    color: #999;
}

.tkd-business-description {
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.tkd-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tkd-view-details {
    background: #FF5A5F;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.tkd-view-details:hover {
    background: #e74c3c;
    color: white;
}

.tkd-visit-website {
    color: #666;
    font-size: 16px;
    text-decoration: none;
    padding: 8px;
    border-radius: 4px;
    transition: color 0.2s;
}

.tkd-visit-website:hover {
    color: #FF5A5F;
}

/* Featured Badge */
.tkd-featured-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

/* No Results */
.tkd-no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
}

.tkd-no-results-content {
    text-align: center;
    max-width: 300px;
}

.tkd-no-results i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 16px;
}

.tkd-no-results h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
}

.tkd-no-results p {
    color: #666;
    margin-bottom: 16px;
}

.tkd-btn-primary {
    background: var(--tkd-accent-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.tkd-btn-primary:hover {
    background: rgba(var(--tkd-accent-rgb), 0.8);
}

/* Pagination */
.tkd-pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #e0e0e0;
}

.tkd-page-btn,
.tkd-page-num {
    padding: 8px 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.tkd-page-btn:hover,
.tkd-page-num:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.tkd-page-num.active {
    background: var(--tkd-accent-color);
    color: white;
    border-color: var(--tkd-accent-color);
}

.tkd-page-dots {
    padding: 8px 4px;
    color: #999;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .tkd-zillow-layout {
        flex-direction: column;
        height: auto;
    }
    
    .tkd-map-panel {
        display: none !important;
    }
    
    .tkd-results-panel {
        min-width: 100%;
        border-left: none;
        border-top: none;
    }
    
    /* DISABLED - CONFLICTS WITH GRID LAYOUT */
    
    .tkd-business-name {
        font-size: 16px;
    }
}

/* REMOVED - WILL BE REPLACED WITH CLEAN VERSION */

/* DISABLED - CONFLICTS WITH GRID LAYOUT */

/* V57: Hover handled at top of file with translateY(-6px) */

/* Featured Image Styles */
.tkd-card-image {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    margin-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.tkd-business-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
    opacity: 0;
}

.tkd-business-image.loaded {
    opacity: 1;
}

.tkd-listing-card:hover .tkd-business-image {
    transform: scale(1.08);
}

.tkd-mapillary-embed {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    display: block;
}

/* V33: Street View badge - force white text */
.tkd-mapillary-badge {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    background: rgba(0, 0, 0, 0.85) !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    padding: 6px 10px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* V33: Force white text on all badge children - maximum specificity */
.tkd-mapillary-badge *,
.tkd-mapillary-badge i,
.tkd-mapillary-badge span,
.tkd-card-image .tkd-mapillary-badge,
.tkd-card-image .tkd-mapillary-badge *,
.tkd-card-image .tkd-mapillary-badge i,
.tkd-card-image .tkd-mapillary-badge span,
html body .tkd-mapillary-badge,
html body .tkd-mapillary-badge *,
html body .tkd-mapillary-badge i,
html body .tkd-mapillary-badge span {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

.tkd-card-header {
    margin-bottom: 8px;
    padding: 18px 18px 0;
}

.tkd-business-name {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
    color: #222222;
}

.tkd-business-name a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tkd-business-name a:hover {
    color: #FF5A5F;
}

/* v2.14.33: column-flex left-align — see canonical rule near line 546. */
.tkd-rating-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
}

.tkd-stars {
    display: flex;
    gap: 2px;
}

.tkd-stars i {
    font-size: 13px;
    color: rgba(var(--tkd-text-rgb), 0.3);
}

/* V32: Stars use accent color */
.tkd-stars i.filled {
    color: var(--tkd-accent-color);
}

.tkd-rating-text {
    font-size: 13px;
    color: var(--tkd-text-gray);
    font-weight: 500;
}

.tkd-card-body {
    margin-bottom: 0;
    padding: 8px 18px 14px;
}

.tkd-location-info,
.tkd-contact-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tkd-text-gray);
    margin-bottom: 6px;
    line-height: 1.4;
}

.tkd-location-info i {
    font-size: 11px;
    width: 14px;
    color: var(--tkd-text-gray);
}

/* V32: Phone icon uses accent color */
.tkd-contact-info i {
    font-size: 11px;
    width: 14px;
    color: var(--tkd-accent-color);
}

.tkd-business-description {
    font-size: 13px;
    color: var(--tkd-text-gray);
    line-height: 1.5;
    margin: 8px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tkd-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: none;
}

.tkd-view-details {
    flex: 1;
    background: #222222;
    color: white;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.tkd-view-details:hover {
    background: #FF5A5F;
    transform: translateY(-1px);
}

.tkd-visit-website {
    width: 36px;
    height: 36px;
    border: 1.5px solid #DDDDDD;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tkd-text-gray);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.tkd-visit-website:hover {
    border-color: var(--tkd-text-dark);
    color: #222222;
    transform: translateY(-1px);
}

.tkd-results-header {
    padding: 24px;
    border-bottom: 1px solid var(--tkd-border-light);
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 768px) {
    .tkd-search-inputs {
        flex-direction: column;
    }
    
    .tkd-search-field {
        width: 100%;
        border-bottom: 1px solid var(--tkd-border-light);
    }
    
    .tkd-search-field:not(:last-child)::after {
        display: none;
    }
    
    .tkd-search-submit {
        width: calc(100% - 8px);
        margin: 4px;
        justify-content: center;
    }
    
    /* REMOVED - WILL BE REPLACED WITH CLEAN VERSION */
    
    .tkd-card-image {
        height: 160px;
    }
    
    .tkd-card-header {
        padding: 12px 12px 0;
        margin-bottom: 4px;
    }
    
    .tkd-card-body {
        padding: 4px 12px 8px;
    }
    
    .tkd-card-footer {
        padding: 8px 12px 12px;
    }
    
    .tkd-results-header {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }
}

/* Additional styles for complete design */
.tkd-featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #FF5A5F;
    color: white;
    padding: 4px 12px;
    border-radius: 1000px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tkd-business-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
}

.tkd-business-name a {
    color: #222222;
    text-decoration: none;
}

.tkd-business-name a:hover {
    color: #FF5A5F;
}

/* v2.14.33: column-flex left-align — see canonical rule near line 546. */
.tkd-rating-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.tkd-stars {
    display: flex;
    gap: 2px;
}

.tkd-stars i {
    font-size: 14px;
    color: rgba(var(--tkd-text-rgb), 0.3);
}

/* V32: Stars use accent color */
.tkd-stars i.filled {
    color: var(--tkd-accent-color);
}

.tkd-rating-text {
    font-size: 14px;
    color: var(--tkd-text-gray);
}

.tkd-location-info,
.tkd-contact-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--tkd-text-gray);
    margin-bottom: 8px;
}

.tkd-business-description {
    font-size: 14px;
    color: var(--tkd-text-gray);
    line-height: 1.5;
    margin: 12px 0 0;
}

.tkd-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #EBEBEB;
}

.tkd-view-details {
    flex: 1;
    background: #FF5A5F;
    color: white;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tkd-view-details:hover {
    background: #E84B50;
}

.tkd-visit-website {
    width: 44px;
    height: 44px;
    border: 1px solid var(--tkd-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tkd-text-gray);
    text-decoration: none;
}

.tkd-visit-website:hover {
    background: #F7F7F7;
    color: #222222;
}

.tkd-view-toggles {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tkd-toggle-map {
    background: #FFFFFF;
    border: 1px solid var(--tkd-border);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    color: #222222;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tkd-toggle-map:hover {
    background: #F7F7F7;
}

.tkd-sort-dropdown select {
    padding: 8px 12px;
    border: 1px solid var(--tkd-border);
    border-radius: 8px;
    font-size: 14px;
    color: #222222;
    background: #FFFFFF;
    cursor: pointer;
}

.tkd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
    padding-bottom: 48px;
}

.tkd-page-btn,
.tkd-page-num {
    padding: 8px 16px;
    border: 1px solid var(--tkd-border);
    border-radius: 8px;
    font-size: 14px;
    color: #222222;
    text-decoration: none;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tkd-page-btn:hover,
.tkd-page-num:hover {
    background: #F7F7F7;
}

.tkd-page-num.active {
    background: #222222;
    color: white;
    border-color: var(--tkd-text-dark);
}

.tkd-no-results {
    text-align: center;
    padding: 80px 24px;
    max-width: 400px;
    margin: 0 auto;
}

.tkd-no-results i {
    font-size: 48px;
    color: #B0B0B0;
    margin-bottom: 16px;
}

.tkd-no-results h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 8px;
}

.tkd-no-results p {
    font-size: 14px;
    color: var(--tkd-text-gray);
    margin: 0 0 24px;
}

.tkd-reset-search {
    display: inline-block;
    background: var(--tkd-accent-color);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.tkd-reset-search:hover {
    background: rgba(var(--tkd-accent-rgb), 0.8);
}

/* Font Awesome icon display fix */
.fas, .far, .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900;
    font-style: normal;
}

.far {
    font-weight: 400;
}

/* Split view and map styles */
.tkd-split-view {
    display: flex;
    height: calc(100vh - 220px);
    position: relative;
}

.tkd-map-section {
    width: 50%;
    position: sticky;
    top: 0;
    height: 100%;
    display: none;
    border-right: 1px solid #DDDDDD;
}

.tkd-split-view.show-map .tkd-map-section {
    display: block;
}

.tkd-split-view.show-map .tkd-listings-section {
    width: 50%;
}

.tkd-map-container {
    height: 100%;
    background: #F7F7F7;
}

.tkd-interactive-map {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tkd-text-gray);
}

/* Results header specific styles */
.tkd-results-count h2 {
    font-size: 22px;
    font-weight: 600;
    color: #222222;
    margin: 0;
}

.tkd-results-count p {
    font-size: 14px;
    color: var(--tkd-text-gray);
    margin: 4px 0 0;
}

.tkd-page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tkd-page-dots {
    color: var(--tkd-text-gray);
    padding: 0 4px;
}

/* Card specific styles */
.tkd-card-header {
    margin-bottom: 12px;
}

.tkd-card-body {
    margin-bottom: 16px;
}

.tkd-location-info i,
.tkd-contact-info i {
    font-size: 12px;
    width: 16px;
}

/* Hide map on mobile */
@media (max-width: 768px) {
    .tkd-map-section {
        display: none !important;
    }
    
    .tkd-listings-section {
        width: 100% !important;
    }
}

    flex-wrap: wrap;
}

.tkd-chip-filter {
    background: white;
    border: 2px solid #e3f2fd;
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 14px;
    color: #0984e3;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tkd-chip-filter:hover {
    background: #e3f2fd;
    border-color: #0984e3;
}

.tkd-chip-filter.active {
    background: #0984e3;
    color: white;
    border-color: #0984e3;
}

.tkd-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.tkd-filter-column h3 {
    font-size: 13px;
    font-weight: 700;
    color: #666;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tkd-filter-column h3 i {
    color: #0984e3;
}

.tkd-search-box {
    position: relative;
}

.tkd-filter-search-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.tkd-filter-search-input:focus {
    border-color: #0984e3;
    outline: none;
}

.tkd-filter-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    cursor: pointer;
}

.tkd-filter-options {
    margin-top: 12px;
}

.tkd-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 14px;
}

.tkd-checkbox input {
    width: 18px;
    height: 18px;
}

.tkd-advanced-link {
    color: #0984e3;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.tkd-slider-container {
    margin-top: 12px;
}

.tkd-distance-slider,
.tkd-reviews-slider {
    width: 100%;
    height: 6px;
    background: #e1e8ed;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.tkd-distance-slider::-webkit-slider-thumb,
.tkd-reviews-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #0984e3;
    border-radius: 50%;
    cursor: pointer;
}

.tkd-slider-value {
    font-size: 14px;
    color: #222;
    margin-top: 8px;
}

.tkd-slider-max {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.tkd-filter-actions {
    text-align: center;
    margin-top: 32px;
}

.tkd-apply-filters-btn {
    background: #0984e3;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.tkd-apply-filters-btn:hover {
    background: #0770c5;
    transform: translateY(-1px);
}

/* ============================================================
 * Block 2 (search bar + filters + cards + map) (originally modern-niche.php lines 3908-4625)
 * ============================================================ */
/* CLEAN LISTINGS GRID - 2 COLUMNS LIKE ZILLOW - DESKTOP ONLY */
@media (min-width: 769px) {
    .tkd-listings-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* FIXED: Use auto instead of 1fr to allow content-based row heights with scroll */
        grid-auto-rows: auto !important;
        gap: 16px !important;
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: start !important; /* Changed from stretch to allow scroll */
        /* CROSS-PLATFORM V3: FORCE height AND max-height for scrollbar */
        height: calc(100vh - 300px) !important;
        max-height: calc(100vh - 300px) !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    /* FORCE GRID ITEMS TO STAY IN COLUMNS */
    .tkd-listings-grid > .tkd-listing-card {
        grid-column: auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: none !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    
    /* CROSS-PLATFORM V4: Force pagination BELOW listings grid on desktop */
    .tkd-results-panel .tkd-modern-pagination,
    .tkd-modern-pagination {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        flex-shrink: 0 !important;
        order: 99 !important; /* Ensure it comes last in flex container */
        margin-top: 20px !important;
        clear: both !important;
    }
}

/* GLASS CARD STYLING - Override old card styles */
.tkd-listing-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Ensure glass-card-wrapper also stretches */
.tkd-listing-card .glass-card-wrapper,
.glass-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
}

/* Ensure glass-card-top fills available space */
.tkd-listing-card .glass-card-top {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Desktop-specific override to ensure correct white/glass background */
@media (min-width: 769px) {
    .tkd-results-panel .tkd-listings-grid .tkd-listing-card .glass-card-top {
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.90) 0%, 
            rgba(255, 255, 255, 0.85) 100%) !important;
    }
}

/* Ensure glass-card-content fills space */
.tkd-listing-card .glass-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Make card body grow to fill space */
.tkd-listing-card .tkd-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

/* Ensure card footer stays at bottom */
.tkd-listing-card .tkd-card-footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* V57: Hover handled at top of file */

/* GLASS CARD IMAGE STYLING */
.glass-card-content .tkd-card-image {
    width: 100% !important;
    height: 160px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}

.glass-card-content .tkd-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* GLASS CARD CONTENT STYLING */
.glass-card-content .tkd-card-header {
    padding: 0 !important;
    margin-bottom: 12px !important;
}

.glass-card-content .tkd-card-body {
    padding: 0 !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
}

.glass-card-content .tkd-business-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    color: var(--tkd-text-color) !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.glass-card-content .tkd-business-name a {
    color: var(--tkd-text-color) !important;
    text-decoration: none !important;
}

.glass-card-content .tkd-business-name a:hover {
    color: var(--tkd-accent-color) !important;
}

.glass-card-content .tkd-rating-info {
    margin-bottom: 12px !important;
}

.glass-card-content .tkd-business-location,
.glass-card-content .tkd-business-phone {
    font-size: 14px !important;
    color: rgba(var(--tkd-text-rgb), 0.8) !important;
    margin-bottom: 6px !important;
}

.glass-card-content .tkd-business-description {
    color: rgba(var(--tkd-text-rgb), 0.7) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

/* GLASS PAGINATION STYLES - CROSS-PLATFORM FIX V4 */
.tkd-modern-pagination {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(255, 255, 255, 0.08) 100%) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    /* CROSS-PLATFORM FIX: Ensure pagination is always visible */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    /* CROSS-PLATFORM V4: Force pagination to be BELOW cards, not beside */
    width: 100% !important;
    max-width: calc(100vw - 40px) !important; /* Prevent overflow with margin */
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
    clear: both !important;
    margin-top: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
    margin-top: 20px !important;
    clear: both !important;
    margin-top: 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Eliminate gap between listings and pagination */
.tkd-listings-grid,
.tkd-search-results-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Eliminate gap after pagination - remove all bottom spacing */
.tkd-modern-pagination {
    margin-bottom: 0 !important;
}

.tkd-results-panel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.tkd-zillow-layout {
    margin-bottom: 0 !important;
}

.tkd-main-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100% !important; /* CROSS-PLATFORM V4: Prevent overflow */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.tkd-content-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100% !important; /* CROSS-PLATFORM V4: Prevent overflow */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure map panel doesn't create extra space */
.tkd-map-panel {
    margin-bottom: 0 !important;
}

/* Mobile: HIDE MAP PANEL AND ELIMINATE ALL GAPS */
@media (max-width: 768px) {
    /* CRITICAL: Hide map panel completely on mobile - this eliminates the grey gap */
    .tkd-map-panel {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Override base zillow-layout constraints */
    .tkd-zillow-layout {
        display: block !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .tkd-results-panel {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .tkd-results-list {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .tkd-listings-grid,
    .tkd-search-results-grid {
        margin-bottom: 0 !important;
        padding: 16px 16px 0 16px !important;
    }
    
    /* Pagination container styles moved to comprehensive mobile section below */
    
    .tkd-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .tkd-content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Remove min-height constraints that create gaps, but preserve layout functionality */
@media (min-width: 769px) {
    .tkd-zillow-layout {
        min-height: auto !important;
    }
    
    /* Only set height to auto if content is shorter than viewport */
    .tkd-results-panel {
        min-height: auto !important;
    }
    
    /* Ensure results list doesn't have extra bottom space */
    .tkd-results-list {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

.tkd-pagination-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e5e9;
    flex-wrap: wrap;
    gap: 8px;
}

.tkd-results-summary {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.tkd-per-page-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.tkd-per-page-select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    cursor: pointer;
    min-width: 50px;
}

.tkd-per-page-select:focus {
    outline: none;
    border-color: var(--tkd-accent-color);
    box-shadow: 0 0 0 2px rgba(var(--tkd-accent-rgb), 0.1);
}

.tkd-pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tkd-page-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    box-sizing: border-box;
}

.tkd-page-btn:hover {
    background: #f8f9fa;
    border-color: var(--tkd-accent-color) !important;
    color: var(--tkd-accent-color) !important;
    text-decoration: none;
}

.tkd-page-btn.tkd-first,
.tkd-page-btn.tkd-last {
    background: #f8f9fa;
    border-color: #ccc;
}

.tkd-page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 8px;
}

.tkd-page-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.tkd-page-num:hover {
    background: #f8f9fa;
    border-color: var(--tkd-accent-color) !important;
    color: var(--tkd-accent-color) !important;
    text-decoration: none;
}

.tkd-page-num.active {
    background: var(--tkd-accent-color) !important;
    border-color: var(--tkd-accent-color) !important;
    color: white;
    font-weight: 600;
}

.tkd-page-dots {
    padding: 0 8px;
    color: #999;
    font-weight: bold;
}

.tkd-jump-to-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #e1e5e9;
    flex-wrap: wrap;
    gap: 8px;
}

.tkd-jump-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tkd-jump-controls label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.tkd-jump-input {
    width: 60px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    background: white;
    height: 32px;
    box-sizing: border-box;
}

.tkd-jump-input:focus {
    outline: none;
    border-color: var(--tkd-accent-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--tkd-accent-rgb), 0.1) !important;
}

.tkd-jump-btn {
    padding: 5px 12px;
    background: var(--tkd-accent-color) !important;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    height: 32px;
    box-sizing: border-box;
    align-items: center;
    gap: 6px;
}

.tkd-jump-btn:hover {
    background: rgba(var(--tkd-accent-rgb), 0.8) !important;
    transform: translateY(-1px);
}

.tkd-page-total {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    /* ========================================
       MOBILE PAGINATION - COMPLETE REDESIGN
       Clean, touch-friendly, easy to use
       ======================================== */
    
    .tkd-modern-pagination {
        padding: 20px 16px !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        margin: 16px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Hide per-page selector on mobile - not useful */
    .tkd-per-page-selector {
        display: none !important;
    }
    
    /* Results summary - centered and clean */
    .tkd-pagination-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .tkd-results-summary {
        font-size: 13px !important;
        color: #666 !important;
        text-align: center !important;
    }
    
    /* Main pagination controls - redesigned */
    .tkd-pagination-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    
    /* Hide First/Last buttons on mobile - use Prev/Next */
    .tkd-page-btn.tkd-first,
    .tkd-page-btn.tkd-last {
        display: none !important;
    }
    
    /* Prev/Next buttons - compact */
    .tkd-page-btn.tkd-prev,
    .tkd-page-btn.tkd-next {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        min-height: 36px !important;
        background: var(--tkd-accent-color) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.2s ease !important;
        order: 1 !important;
    }
    
    .tkd-page-btn.tkd-prev:active,
    .tkd-page-btn.tkd-next:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
    
    /* Page numbers container - horizontal scroll */
    .tkd-page-numbers {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 0 !important;
        order: 0 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Page number buttons - compact for mobile */
    .tkd-page-num {
        min-width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border-radius: 6px !important;
        background: #f5f5f5 !important;
        color: #333 !important;
        border: 1px solid #e5e5e5 !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
    }
    
    .tkd-page-num.active {
        background: var(--tkd-accent-color) !important;
        color: white !important;
        border-color: var(--tkd-accent-color) !important;
        font-weight: 700 !important;
    }
    
    .tkd-page-num:not(.active):active {
        background: #e8e8e8 !important;
    }
    
    .tkd-page-dots {
        color: #999 !important;
        padding: 0 4px !important;
        font-size: 14px !important;
    }
    
    /* Jump to page - simplified and compact */
    .tkd-jump-to-page {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding-top: 10px !important;
        border-top: 1px solid #f0f0f0 !important;
        flex-wrap: wrap !important;
    }
    
    .tkd-jump-controls {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .tkd-jump-controls label {
        font-size: 13px !important;
        color: #666 !important;
        white-space: nowrap !important;
    }
    
    .tkd-jump-input {
        width: 50px !important;
        height: 36px !important;
        padding: 5px 8px !important;
        font-size: 13px !important;
        text-align: center !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        background: #f9f9f9 !important;
    }
    
    .tkd-jump-input:focus {
        outline: none !important;
        border-color: var(--tkd-accent-color) !important;
        background: white !important;
    }
    
    .tkd-jump-btn {
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        background: var(--tkd-accent-color) !important;
        color: white !important;
        border: none !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        cursor: pointer !important;
    }
    
    .tkd-jump-btn:active {
        opacity: 0.9 !important;
    }
    
    .tkd-page-total {
        font-size: 14px !important;
        color: #999 !important;
        white-space: nowrap !important;
    }
    
    /* Existing mobile styles */
    .tkd-listings-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }
}

/* ============================================================
 * Block 3 (mid-page layout + state + animation rules) (originally modern-niche.php lines 4629-7399)
 * ============================================================ */
/* CRITICAL OVERRIDE: Modern Airbnb-Style Search */
.tkd-hero-section {
    background: #ffffff !important;
    position: relative;
    border-bottom: 1px solid #e5e5e5 !important;
}
.tkd-hero-content {
    position: relative;
    z-index: 1;
}
.tkd-hero-title {
    color: #000000 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}
.tkd-hero-subtitle {
    color: #717171 !important;
}
.tkd-search-form {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #dddddd !important;
    padding: 8px !important;
    transition: box-shadow 0.2s ease !important;
}
.tkd-search-form:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
}
.tkd-search-field {
    border-radius: 12px !important;
}
.tkd-search-field:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: #dddddd !important;
    height: auto;
    transform: none;
    display: block !important;
}
/* CRITICAL: Hide separator lines on mobile */
@media (max-width: 768px) {
    .tkd-search-field::after,
    .tkd-search-field:not(:last-child)::after,
    .tkd-field-business::after,
    .tkd-field-filters::after,
    .tkd-field-location::after {
        display: none !important;
        content: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
}
.tkd-search-field:hover {
    background-color: #f7f7f7 !important;
}
/* Sticky Search Bar Styles - DESKTOP ONLY */
@media (min-width: 769px) {
    .tkd-search-widget.tkd-sticky-search {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 1200px !important;
        z-index: 1000 !important;
        padding: 12px 24px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border-bottom: none !important;
        margin: 0 !important;
    }
}

/* DISABLE sticky search on mobile */
@media (max-width: 768px) {
    .tkd-search-widget.tkd-sticky-search {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: auto !important;
    }
}
.admin-bar .tkd-search-widget.tkd-sticky-search {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    .admin-bar .tkd-search-widget.tkd-sticky-search {
        top: 46px !important;
    }
}
.tkd-sticky-search .tkd-search-form {
    background: #ffffff !important;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #dddddd !important;
}
.tkd-search-field label {
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
.tkd-search-field input:not([type="range"]) {
    color: #717171 !important;
    font-weight: 400 !important;
}
.tkd-search-field input::placeholder {
    color: #717171 !important;
}
.tkd-field-icon {
    display: none !important;
}
/* v2.14.32: button forced to a perfect square (56×56) and the magnifying-glass
   icon gets a 2px leftward nudge to compensate for FontAwesome's `fa-search`
   glyph having its lens in the upper-left and handle trailing lower-right —
   without the nudge the icon reads as left-of-center even though it's
   geometrically centered in its character box. */
.tkd-search-submit {
    background: var(--tkd-accent-color) !important;
    border-radius: 0 16px 16px 0 !important;
    box-shadow: none !important;
    color: var(--tkd-accent-contrast) !important;
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    min-width: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    line-height: 1 !important;
}
.tkd-search-submit span {
    display: none !important;
}
.tkd-search-submit i {
    font-size: 16px !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1 !important;
    transform: translateX(1px) !important;
}
.tkd-search-submit:hover {
    background: var(--tkd-accent-color) !important;
    opacity: 0.9 !important;
}
.tkd-search-submit:hover i {
    transform: translateX(1px) !important;
}

/* Desktop-only: Fix search button design - remove grey bar and improve appearance */
@media (min-width: 769px) {
    /* Hide the grey bar before the search button */
    .tkd-field-location::after {
        display: none !important;
    }
    
    /* Make search button fully rounded with better spacing and visual appeal */
    .tkd-search-submit {
        border-radius: 12px !important;
        margin-left: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.2s ease !important;
    }
    
    .tkd-search-submit:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-1px) !important;
    }
}
.tkd-filter-chip {
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    color: #000000 !important;
    border-radius: 7px !important;
    font-size: 12.5px !important;
    padding: 8px 11px !important;
}
.tkd-filter-chip:hover {
    border-color: #000000 !important;
}
.tkd-filter-chip.active {
    background: #f7f7f7 !important;
    color: #000000 !important;
    border-color: #000000 !important;
    border-width: 2px !important;
    padding: 7px 10px !important; /* Adjust for border width */
}
/* Fix for cut off dropdowns - CRITICAL but preserve layout */
.tkd-hero-section {
    overflow: visible !important;
    z-index: 100 !important;
}
.tkd-hero-content {
    overflow: visible !important;
}
.tkd-search-widget {
    position: relative !important;
    z-index: 1000 !important;
    overflow: visible !important;
}
.tkd-search-form {
    overflow: visible !important;
}
.tkd-search-inputs {
    overflow: visible !important;
}
.tkd-field-filters, 
.tkd-field-location {
    position: relative !important;
    overflow: visible !important;
}
.tkd-filters-selector,
.tkd-location-selector {
    position: relative !important;
    overflow: visible !important;
}
/* Dropdowns positioned absolutely but with high z-index to escape containers - FORCED to match Hostinger */
/* NOTE: JavaScript will override left/transform when dropdown opens to center on button */
.tkd-filters-dropdown {
    z-index: 99999 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    border-radius: 12px !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 12px !important;
    width: 980px !important;
    max-width: 95vw !important;
    padding: 0 !important;
}
.tkd-location-dropdown {
    z-index: 99999 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    border-radius: 12px !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 12px !important;
    width: 720px !important;
    max-width: 95vw !important;
    padding: 0 !important;
}
.tkd-filters-content {
    background: #ffffff !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: auto 1fr 1fr !important;
    gap: 14px !important;
    /* CROSS-PLATFORM FIX: Align all columns to top */
    align-items: start !important;
    overflow: visible !important;
    border-radius: 12px 12px 0 0 !important;
}
.tkd-location-content {
    background: #ffffff !important;
    padding: 14px 16px !important;
}
.tkd-filter-section {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: left !important; /* Explicit left alignment to prevent inheritance issues */
}
.tkd-filter-section h4 {
    color: #000000 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-align: left !important; /* Explicit left alignment */
}
.tkd-quick-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    text-align: left !important;
    /* FIXED: Stretch items to same width for consistent appearance */
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
}
.tkd-rating-selector {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important;
}
.tkd-rating-btn {
    padding: 8px 10px !important;
    border: 1px solid #dddddd !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}
.tkd-rating-btn:hover {
    border-color: #000000 !important;
}
.tkd-rating-btn[data-rating="0"]:checked,
.tkd-rating-btn.active {
    background: var(--tkd-accent-color) !important;
    border-color: var(--tkd-accent-color) !important;
    color: #ffffff !important;
}
.tkd-reviews-control,
.tkd-distance-control {
    margin-top: 8px !important;
}
.tkd-reviews-control label,
.tkd-distance-control label {
    display: block !important;
    font-size: 12.5px !important;
    color: #000000 !important;
    margin-bottom: 5px !important;
}
.tkd-range-slider {
    width: 100% !important;
    margin: 5px 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #e0e0e0 !important;
    border-radius: 3px !important;
    outline: none !important;
}
.tkd-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--tkd-accent-color, #1A5BFA) !important;
    cursor: pointer !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
.tkd-range-slider::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--tkd-accent-color, #1A5BFA) !important;
    cursor: pointer !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
.tkd-reviews-control label,
.tkd-distance-control label {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--tkd-text-color, #1a1a1a) !important;
    margin-bottom: 5px !important;
    text-align: left !important;
}
.tkd-reviews-control small,
.tkd-distance-control small {
    display: block !important;
    font-size: 11px !important;
    color: var(--tkd-text-gray, rgba(26, 26, 26, 0.7)) !important;
    margin-top: 4px !important;
    text-align: left !important;
}
/* Open Now Checkbox - Match Hostinger Design */
.tkd-checkbox-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 11px !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: white !important;
    width: fit-content !important;
    text-align: left !important;
}
.tkd-checkbox-option:hover {
    border-color: var(--tkd-accent-color, var(--tkd-accent-color)) !important;
    background: #FAFAFA !important;
}
.tkd-checkbox-option input[type="checkbox"] {
    margin: 0 !important;
    accent-color: var(--tkd-accent-color, var(--tkd-accent-color)) !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.tkd-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 12.5px !important;
    color: var(--tkd-text-color, #222) !important;
    cursor: pointer !important;
    text-align: left !important;
}
.tkd-checkbox-label i {
    color: var(--tkd-accent-color, var(--tkd-accent-color)) !important;
    width: 14px !important;
    font-size: 12px !important;
    text-align: center !important;
}
.tkd-checkbox-option input[type="checkbox"]:checked ~ .tkd-checkbox-label {
    color: var(--tkd-accent-color, var(--tkd-accent-color)) !important;
    font-weight: 500 !important;
}
/* Filter chips/text alignment */
.tkd-quick-filters {
    text-align: left !important;
    /* FIXED: Stretch items to uniform width for consistent filter button sizes */
    align-items: stretch !important;
    justify-content: flex-start !important;
}
.tkd-filter-chip {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
    /* FIXED: Full width for uniform button sizes in Popular Filters column */
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}
.tkd-filter-chip span {
    color: var(--tkd-text-color, #1a1a1a) !important;
    text-align: left !important;
}
.tkd-filter-chip i {
    margin-right: 0 !important;
}
    .tkd-filters-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 14px 16px !important;
        border-top: 1px solid #dddddd !important;
        background: white !important;
        border-radius: 0 0 12px 12px !important;
    }
.tkd-clear-filters,
.tkd-apply-filters {
    flex: 1 !important;
    padding: 8px 18px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.4 !important;
}
.tkd-clear-filters {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #dddddd !important;
}
.tkd-clear-filters:hover {
    border-color: #000000 !important;
}
.tkd-apply-filters {
    background: var(--tkd-accent-color) !important;
    color: #ffffff !important;
}
.tkd-apply-filters:hover {
    opacity: 0.9 !important;
}
.tkd-sort-options-enhanced {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}
.tkd-sort-option-card {
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
}
.tkd-sort-option-card:hover {
    border-color: #000000 !important;
}
.tkd-sort-option-card input[type="radio"]:checked + .tkd-sort-content,
.tkd-sort-option-card:has(input[type="radio"]:checked) {
    background: var(--tkd-accent-color) !important;
    color: #ffffff !important;
    border-color: var(--tkd-accent-color) !important;
}
/* Make sort section span full width in grid */
.tkd-filter-section:last-of-type {
    grid-column: 1 / -1 !important;
}
/* Ensure map and layout containers maintain proper sizing */
.tkd-modern-niche-container {
    position: relative !important;
}
.tkd-zillow-layout {
    position: relative !important;
    z-index: 1 !important;
}
.tkd-map-panel {
    position: sticky !important;
    overflow: hidden !important;
    z-index: 1 !important;
}
/* V22 FIX: Parent panel must NOT scroll - grid scrolls instead */
.tkd-results-panel {
    position: relative !important;
    overflow: visible !important;
    overflow-y: visible !important;
    z-index: 1 !important;
}

/* ===== CRITICAL MOBILE OVERRIDES - MUST BE LAST ===== */
@media (max-width: 768px) {
    /* Hero Section - COMPACT */
    .tkd-hero-section {
        padding: 16px 0 !important;
    }
    .tkd-hero-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        padding: 0 12px !important;
        margin-bottom: 8px !important;
        font-weight: 700 !important;
    }
    .tkd-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        padding: 0 12px !important;
        margin-bottom: 16px !important;
        color: #666 !important;
    }
    
    /* Search Form - SQUARE WITH ROUNDED EDGES */
    .tkd-search-form {
        border-radius: 16px !important;
        padding: 16px !important;
        margin: 0 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        background: white !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
    }
    .tkd-search-form *,
    .tkd-search-form *::before,
    .tkd-search-form *::after {
        box-sizing: border-box !important;
    }
    .tkd-search-inputs {
        flex-direction: column !important;
        gap: 0 !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .tkd-search-field {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
    }
    
    /* Individual Fields - COMPACT & CLEAN */
    .tkd-search-field {
        width: 100% !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        border: none !important;
        border-right: none !important;
        background: #f5f5f5 !important;
        transition: background 0.2s !important;
    }
    .tkd-search-field:active {
        background: #ebebeb !important;
    }
    /* CRITICAL: Remove all ::after pseudo-elements that create separator lines */
    .tkd-search-field::after,
    .tkd-search-field:not(:last-child)::after,
    .tkd-field-business::after,
    .tkd-field-filters::after,
    .tkd-field-location::after {
        display: none !important;
        content: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
    .tkd-field-business,
    .tkd-field-filters,
    .tkd-field-location {
        width: 100% !important;
        border-bottom: none !important;
        border-right: none !important;
        border-left: none !important;
    }
    /* Remove any border-right from all search fields on mobile */
    .tkd-search-field {
        border-right: none !important;
    }
    .tkd-field-location {
        margin-bottom: 10px !important;
    }
    
    /* Field Labels - SMALLER */
    .tkd-search-field label {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #666 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 3px !important;
        display: block !important;
    }
    
    /* Inputs - CLEAN (exclude range sliders) */
    .tkd-search-field input:not([type="range"]) {
        font-size: 15px !important;
        color: #222 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .tkd-search-field input::placeholder {
        color: #999 !important;
        font-size: 14px !important;
    }
    
    /* Selectors - Match filters-selector exactly */
    .tkd-filters-selector,
    .tkd-location-selector {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        cursor: pointer !important;
        width: 100% !important;
        min-height: auto !important;
        box-sizing: border-box !important;
    }
    
    .tkd-filters-text,
    .tkd-location-text {
        font-size: 15px !important;
        color: #222 !important;
        flex: 1 !important;
    }
    
    .tkd-filters-selector i,
    .tkd-location-selector i {
        color: #999 !important;
        font-size: 12px !important;
        margin-left: 8px !important;
        flex-shrink: 0 !important;
    }
    
    /* Submit Button - COMPACT */
    .tkd-search-submit {
        width: 100% !important;
        height: 48px !important;
        border-radius: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    .tkd-search-submit span {
        display: inline !important;
    }
    .tkd-search-submit i {
        font-size: 16px !important;
        margin: 0 !important;
    }
    
    /* Filter Pills - COMPACT */
    .tkd-filter-pills {
        padding: 10px 12px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tkd-filter-pill {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        border-radius: 16px !important;
        flex: 0 0 auto !important;
    }
    .tkd-filter-chip {
        padding: 6px 12px !important;
        font-size: 13px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        border-radius: 16px !important;
    }
    
    /* Extra small screens - make pills even more compact */
    @media (max-width: 480px) {
        .tkd-filter-pills {
            padding: 8px 10px !important;
            gap: 5px !important;
        }
        .tkd-filter-pill {
            padding: 5px 8px !important;
            font-size: 10px !important;
            border-radius: 14px !important;
            min-height: 28px !important;
        }
    }
    
    /* Filter Backdrop - Transparent */
    .tkd-filters-dropdown::after,
    .tkd-location-dropdown::after {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: transparent !important;
        z-index: -1 !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s !important;
    }
    .tkd-filters-dropdown.active::after,
    .tkd-location-dropdown.active::after {
        opacity: 1 !important;
    }
    
    /* Dropdowns - FULL SCREEN POPUP (matches location dropdown exactly) */
    .tkd-filters-dropdown,
    .tkd-location-dropdown {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 99999 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: white !important;
        flex-direction: column !important;
    }
    .tkd-filters-dropdown.active,
    .tkd-location-dropdown.active {
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        animation: none !important;
    }
    
    /* Prevent body scroll when filter open */
    body.tkd-filter-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* CRITICAL: Prevent horizontal scroll on body/html */
    html.tkd-filter-open,
    body.tkd-filter-open {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }
    
    /* Remove Gray Handle */
    .tkd-filters-dropdown::before,
    .tkd-location-dropdown::before {
        display: none !important;
    }
    
    /* Filter Dropdown Header - Close Button - Match Filters Dropdown */
    .tkd-filters-dropdown .tkd-dropdown-header,
    .tkd-location-dropdown .tkd-dropdown-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: white !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .tkd-filters-dropdown .tkd-dropdown-title,
    .tkd-location-dropdown .tkd-dropdown-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #222 !important;
        margin: 0 !important;
        display: block !important;
    }
    .tkd-filters-dropdown .tkd-dropdown-close,
    .tkd-location-dropdown .tkd-dropdown-close {
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 50% !important;
        border: none !important;
        background: #f5f5f5 !important;
        color: #666 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    .tkd-filters-dropdown .tkd-dropdown-close:active,
    .tkd-location-dropdown .tkd-dropdown-close:active {
        background: #e8e8e8 !important;
        transform: scale(0.95) !important;
    }
    .tkd-filters-dropdown .tkd-dropdown-close i,
    .tkd-location-dropdown .tkd-dropdown-close i {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Filter Dropdown - Flex Container */
    .tkd-filters-dropdown {
        flex-direction: column !important;
    }
    
    /* Filter Content - Flex Child - Match Location Content Exactly */
    .tkd-filters-content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 20px !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 300px !important;
        height: auto !important;
        max-height: calc(100vh - 180px) !important;
        background: white !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 20px !important;
    }
    
    /* CRITICAL: When filters dropdown is active, ensure content fills space and renders - Match Location Exactly */
    /* MUST override all grid display rules with higher specificity */
    .tkd-filters-dropdown.active .tkd-filters-content,
    .tkd-filters-dropdown.active .tkd-filters-content[style],
    .tkd-filters-dropdown.active .tkd-filters-content[style*="grid"] {
        /* CRITICAL: Override grid display - MUST come first */
        display: flex !important;
        flex-direction: column !important;
        grid: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        
        /* Layout properties */
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 20px !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 300px !important;
        height: auto !important;
        max-height: calc(100vh - 180px) !important;
        background: white !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 20px !important;
    }
    
    /* CRITICAL: Force all direct children of filters-content to be visible and have height */
    .tkd-filters-dropdown.active .tkd-filters-content > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 100px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* CRITICAL: Ensure filter sections have content that renders - Match Location Filter Content Pattern */
    .tkd-filters-dropdown.active .tkd-filter-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 100px !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        /* CRITICAL: Remove all grid properties on mobile */
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
    }
    
    /* CRITICAL: Ensure all children of filter sections are visible */
    .tkd-filters-dropdown.active .tkd-filter-section > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* CRITICAL: Force h4 headings to render with height */
    .tkd-filters-dropdown.active .tkd-filter-section h4 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 24px !important;
        line-height: 1.4 !important;
    }
    
    /* CRITICAL: Ensure h4 headings are visible */
    .tkd-filters-dropdown.active .tkd-filter-section h4 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 20px !important;
    }
    
    /* CRITICAL: Ensure quick-filters, rating-selector, etc. are visible */
    .tkd-filters-dropdown.active .tkd-quick-filters {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 80px !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .tkd-filters-dropdown.active .tkd-rating-selector {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 80px !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .tkd-filters-dropdown.active .tkd-reviews-control,
    .tkd-filters-dropdown.active .tkd-distance-control,
    .tkd-filters-dropdown.active .tkd-distance-service,
    .tkd-filters-dropdown.active .tkd-availability-options {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 50px !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    /* CRITICAL: Ensure all buttons, inputs, labels are visible */
    /* NOTE: .tkd-rating-btn and .tkd-checkbox-option are excluded - they have refined styles below */
    .tkd-filters-dropdown.active .tkd-filter-chip,
    .tkd-filters-dropdown.active button:not(.tkd-rating-btn):not(.tkd-checkbox-option),
    .tkd-filters-dropdown.active input,
    .tkd-filters-dropdown.active select,
    .tkd-filters-dropdown.active label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 44px !important;
    }
    
    .tkd-filters-dropdown.active .tkd-filter-chip {
        display: flex !important;
    }
    
    /* CRITICAL: Ensure buttons and inputs are visible */
    .tkd-filters-dropdown.active .tkd-range-slider,
    .tkd-filters-dropdown.active .tkd-service-select {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
    
    /* CRITICAL: Override inline styles on mobile - MUST override inline style attribute */
    .tkd-filters-dropdown.active .tkd-filters-content,
    .tkd-filters-dropdown .tkd-filters-content[style] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    
    /* Ensure filter sections are visible and stack vertically */
    .tkd-filters-dropdown.active .tkd-filter-section {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin-bottom: 16px !important;
        min-height: 50px !important;
        padding: 0 !important;
    }
    
    /* CRITICAL: Ensure all children of filter sections are visible */
    .tkd-filters-dropdown.active .tkd-filter-section * {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .tkd-filters-dropdown.active .tkd-filter-section h4 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #222 !important;
        height: auto !important;
        line-height: 1.4 !important;
    }
    
    .tkd-filters-dropdown.active .tkd-quick-filters,
    .tkd-filters-dropdown.active .tkd-rating-selector,
    .tkd-filters-dropdown.active .tkd-distance-service,
    .tkd-filters-dropdown.active .tkd-availability-options {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .tkd-filters-dropdown.active .tkd-filter-chip {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
    
    /* Rating buttons - thinner toggle bars - FINAL OVERRIDE */
    .tkd-filters-dropdown.active .tkd-rating-btn,
    .tkd-filters-dropdown.active .tkd-rating-selector .tkd-rating-btn,
    .tkd-filters-dropdown.active .tkd-filter-section .tkd-rating-btn {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 4px 12px !important;
        font-size: 11px !important;
        min-height: 28px !important;
        height: 28px !important;
        max-height: 28px !important;
        border-radius: 4px !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
        border-width: 1px !important;
        background: white !important;
        box-sizing: border-box !important;
    }
    
    .tkd-filters-dropdown.active .tkd-checkbox-option {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        width: fit-content !important;
        max-width: 100% !important;
    }
    
    /* CRITICAL: Make filters dropdown structure match location dropdown - flex layout */
    .tkd-filters-dropdown.active {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .tkd-filters-dropdown.active .tkd-dropdown-header {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }
    
    .tkd-filters-dropdown.active .tkd-filters-content {
        /* CRITICAL: Override ALL grid properties - highest priority */
        display: flex !important;
        flex-direction: column !important;
        grid: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        grid-auto-flow: unset !important;
        grid-auto-columns: unset !important;
        grid-auto-rows: unset !important;
        
        /* Layout properties */
        flex: 1 1 auto !important;
        min-height: 300px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100vh - 180px) !important;
        height: auto !important;
        padding: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 20px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* CRITICAL: Ensure filters dropdown header has proper height */
    .tkd-filters-dropdown.active .tkd-dropdown-header {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
    }
    
    /* NUCLEAR OPTION: Remove inline style attribute via CSS - override everything */
    /* REMOVED - consolidated into main rule above */
    
    .tkd-filters-dropdown.active .tkd-filters-actions {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }
    
    
    /* Filter Sections - CRITICAL: Must be visible when dropdown is active - Match Location Filter Content */
    .tkd-filters-dropdown.active .tkd-filter-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        flex-shrink: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: auto !important;
        height: auto !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    .tkd-filters-dropdown.active .tkd-filter-section h4 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #222 !important;
    }
    
    .tkd-filters-dropdown.active .tkd-quick-filters,
    .tkd-filters-dropdown.active .tkd-rating-selector,
    .tkd-filters-dropdown.active .tkd-distance-service,
    .tkd-filters-dropdown.active .tkd-availability-options,
    .tkd-filters-dropdown.active .tkd-reviews-control,
    .tkd-filters-dropdown.active .tkd-distance-control {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: 40px !important;
        height: auto !important;
        margin-bottom: 12px !important;
    }
    
    /* Quick filters and rating selector need flex display */
    .tkd-filters-dropdown.active .tkd-quick-filters,
    .tkd-filters-dropdown.active .tkd-rating-selector {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .tkd-filters-dropdown.active .tkd-rating-selector {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .tkd-filters-dropdown.active .tkd-filter-chip,
    .tkd-filters-dropdown.active .tkd-rating-btn,
    .tkd-filters-dropdown.active .tkd-checkbox-option {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* CRITICAL: Refined styling for rating buttons - must come after all other rules */
    .tkd-filters-dropdown.active .tkd-rating-btn {
        padding: 4px 12px !important;
        font-size: 11px !important;
        min-height: 28px !important;
        height: 28px !important;
        max-height: 28px !important;
        border-radius: 4px !important;
        font-weight: 500 !important;
        border-width: 1px !important;
        line-height: 1.1 !important;
        display: inline-block !important;
        background: white !important;
        box-sizing: border-box !important;
    }
    
    .tkd-filters-dropdown.active .tkd-rating-selector {
        gap: 6px !important;
    }
    
    /* CRITICAL: Refined styling for checkbox - must come after all other rules */
    .tkd-filters-dropdown.active .tkd-checkbox-option {
        width: fit-content !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        border-radius: 8px !important;
        border-width: 1px !important;
        display: inline-block !important;
    }
    
    .tkd-filters-dropdown.active .tkd-checkbox-option input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }
    /* Last section margin for spacing */
    .tkd-filter-section:last-child {
        margin-bottom: 16px !important;
    }

    /* Reviews & Distance Controls - Clean Layout */
    .tkd-reviews-control,
    .tkd-distance-control {
        margin-top: 12px !important;
        padding: 0 !important;
        background: transparent !important;
    }
    .tkd-reviews-control label,
    .tkd-distance-control label {
        display: block !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
        background: transparent !important;
    }
    .tkd-reviews-control small {
        display: block !important;
        font-size: 11px !important;
        color: #999 !important;
        margin-top: 6px !important;
        background: transparent !important;
    }

    /* Range Slider - Match Desktop Style */
    .tkd-range-slider,
    input.tkd-range-slider,
    input[type="range"].tkd-range-slider,
    #reviews-range,
    #distance-range {
        width: 100% !important;
        height: 5px !important;
        border-radius: 2.5px !important;
        background: #E0E0E0 !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        margin: 10px 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }
    .tkd-range-slider::-webkit-slider-runnable-track,
    input.tkd-range-slider::-webkit-slider-runnable-track,
    #reviews-range::-webkit-slider-runnable-track,
    #distance-range::-webkit-slider-runnable-track {
        height: 5px !important;
        background: #E0E0E0 !important;
        border-radius: 2.5px !important;
        border: none !important;
    }
    .tkd-range-slider::-webkit-slider-thumb,
    input.tkd-range-slider::-webkit-slider-thumb,
    #reviews-range::-webkit-slider-thumb,
    #distance-range::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        background: var(--tkd-accent-color) !important;
        cursor: pointer !important;
        border: 2px solid white !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        margin-top: -5.5px !important;
    }
    .tkd-range-slider::-moz-range-track,
    input.tkd-range-slider::-moz-range-track,
    #reviews-range::-moz-range-track,
    #distance-range::-moz-range-track {
        height: 5px !important;
        background: #E0E0E0 !important;
        border-radius: 2.5px !important;
        border: none !important;
    }
    .tkd-range-slider::-moz-range-thumb,
    input.tkd-range-slider::-moz-range-thumb,
    #reviews-range::-moz-range-thumb,
    #distance-range::-moz-range-thumb {
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        background: var(--tkd-accent-color) !important;
        cursor: pointer !important;
        border: 2px solid white !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }

    /* MOBILE ONLY: Minimalistic Modern Slider Design */
    @media (max-width: 768px) {
        /* Range Slider Container - Add wrapper styling for filled track effect */
        .tkd-reviews-control,
        .tkd-distance-control {
            position: relative !important;
        }
        
        /* Range Slider Track - Minimalistic Design */
        .tkd-range-slider,
        input.tkd-range-slider,
        input[type="range"].tkd-range-slider,
        #reviews-range,
        #distance-range {
            width: 100% !important;
            height: 2px !important;
            border-radius: 1px !important;
            background: transparent !important;
            outline: none !important;
            -webkit-appearance: none !important;
            appearance: none !important;
            margin: 12px 0 !important;
            padding: 0 !important;
            border: none !important;
            box-shadow: none !important;
            cursor: pointer !important;
            position: relative !important;
        }
        
        /* Webkit Track - Minimal line - very light, almost invisible */
        .tkd-range-slider::-webkit-slider-runnable-track,
        input.tkd-range-slider::-webkit-slider-runnable-track,
        #reviews-range::-webkit-slider-runnable-track,
        #distance-range::-webkit-slider-runnable-track {
            width: 100% !important;
            height: 2px !important;
            border-radius: 1px !important;
            background: rgba(0, 0, 0, 0.1) !important;
            border: none !important;
            box-shadow: none !important;
        }
        
        /* Webkit Thumb - Simple modern knob */
        .tkd-range-slider::-webkit-slider-thumb,
        input.tkd-range-slider::-webkit-slider-thumb,
        #reviews-range::-webkit-slider-thumb,
        #distance-range::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            appearance: none !important;
            width: 16px !important;
            height: 16px !important;
            border-radius: 50% !important;
            background: var(--tkd-accent-color) !important;
            cursor: pointer !important;
            border: 2px solid white !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
            margin-top: -7px !important;
            position: relative !important;
        }
        
        /* Mozilla Track - Minimal line - very light, almost invisible */
        .tkd-range-slider::-moz-range-track,
        input.tkd-range-slider::-moz-range-track,
        #reviews-range::-moz-range-track,
        #distance-range::-moz-range-track {
            width: 100% !important;
            height: 2px !important;
            border-radius: 1px !important;
            background: rgba(0, 0, 0, 0.1) !important;
            border: none !important;
            box-shadow: none !important;
        }
        
        /* Mozilla Thumb - Simple modern knob */
        .tkd-range-slider::-moz-range-thumb,
        input.tkd-range-slider::-moz-range-thumb,
        #reviews-range::-moz-range-thumb,
        #distance-range::-moz-range-thumb {
            width: 16px !important;
            height: 16px !important;
            border-radius: 50% !important;
            background: var(--tkd-accent-color) !important;
            cursor: pointer !important;
            border: 2px solid white !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
            position: relative !important;
        }
        
        /* Slider wrapper for filled track effect */
        .tkd-reviews-control,
        .tkd-distance-control {
            position: relative !important;
        }
        
        /* Filled track overlay - HIDDEN (removed per user request) */
        .tkd-slider-fill {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
        
        /* Ensure slider is above the fill and properly positioned */
        .tkd-range-slider,
        input.tkd-range-slider,
        input[type="range"].tkd-range-slider,
        #reviews-range,
        #distance-range {
            position: relative !important;
            z-index: 2 !important;
        }
    }

    /* Filter Actions - Static Flex Item (No Overlap) */
    .tkd-filters-actions {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        background: white !important;
        padding: 12px 16px !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #f0f0f0 !important;
        display: flex !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
        flex-shrink: 0 !important;
        z-index: 100 !important;
        margin-top: 0 !important; /* Remove auto margin to prevent gap */
    }
    
    /* Results Section */
    .tkd-results-header {
        padding: 24px 16px !important;
    }
    .tkd-results-count h2 {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    .tkd-results-count p {
        font-size: 15px !important;
        color: #666 !important;
    }
    
    /* Layout */
    .tkd-zillow-layout {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        gap: 0 !important;
    }
    .tkd-map-panel {
        display: none !important;
    }
    .tkd-results-panel {
        order: 1 !important;
        border-left: none !important;
        border-bottom: 1px solid #eee !important;
    }
    
    /* Listing Cards - FORCE SINGLE COLUMN */
    .tkd-listings-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        padding: 12px 12px 0 12px !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }
    .tkd-listing-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 0 14px 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        display: block !important;
        float: none !important;
    }
    .tkd-card-image {
        height: 140px !important;
        border-radius: 12px 12px 0 0 !important;
    }
    .tkd-card-header {
        padding: 14px 14px 6px !important;
    }
    .tkd-business-name {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
    .tkd-card-body {
        padding: 6px 14px !important;
    }
    .tkd-card-footer {
        padding: 10px 14px 14px !important;
    }
    
    /* Touch Targets (exclude range sliders) */
    button, a, input:not([type="range"]):not([type="checkbox"]), select, .tkd-filter-chip {
        min-height: 44px !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* iOS Zoom Prevention */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Sticky Search - SIMPLE & CLEAN */
    .tkd-sticky-search {
        padding: 8px 12px !important;
        background: white !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    .tkd-sticky-search .tkd-search-form {
        padding: 6px !important;
        border-radius: 14px !important;
        margin: 0 !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
        border: 1px solid #ddd !important;
        background: white !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }
    .tkd-sticky-search .tkd-search-inputs {
        flex-direction: row !important;
        gap: 4px !important;
        align-items: center !important;
        flex: 1 !important;
        height: 100% !important;
        padding-right: 44px !important;
    }
    
    /* Search field */
    .tkd-sticky-search .tkd-field-business {
        flex: 1 !important;
        height: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        overflow: visible !important;
        min-width: 0 !important;
    }
    .tkd-sticky-search .tkd-search-field label {
        display: none !important;
    }
    .tkd-sticky-search .tkd-field-business input {
        font-size: 14px !important;
        font-weight: 400 !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #222 !important;
        padding-right: 32px !important;
    }
    .tkd-sticky-search .tkd-field-business input::placeholder {
        font-size: 14px !important;
        color: #717171 !important;
    }
    
    /* Hide location in sticky mode */
    .tkd-sticky-search .tkd-field-location {
        display: none !important;
    }
    
    /* Show filters as compact chip in sticky mode */
    .tkd-sticky-search .tkd-field-filters {
        display: flex !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 4px !important;
        background: transparent !important;
        border: none !important;
        min-height: auto !important;
        width: auto !important;
        max-width: 120px !important;
    }
    .tkd-sticky-search .tkd-filters-selector {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: #f0f0f0 !important;
        border-radius: 16px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #333 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        cursor: pointer !important;
        border: none !important;
    }
    .tkd-sticky-search .tkd-filters-text {
        font-size: 11px !important;
        max-width: 70px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .tkd-sticky-search .tkd-filters-selector i {
        font-size: 10px !important;
        color: #666 !important;
        margin: 0 !important;
    }
    .tkd-sticky-search .tkd-filters-selector i.fa-sliders-h {
        display: none !important;
    }
    .tkd-sticky-search .tkd-filters-dropdown {
        display: none !important;
    }
    
    /* Reset X button - larger, red like desktop */
    .tkd-sticky-search .tkd-reset-search {
        all: unset !important;
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: #ff6b6b !important;
        border: none !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        z-index: 10 !important;
        box-shadow: none !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    .tkd-sticky-search .tkd-reset-search:hover {
        background: #e55555 !important;
    }
    .tkd-sticky-search .tkd-reset-search:active {
        transform: translateY(-50%) scale(0.95) !important;
        background: #d94444 !important;
    }
    .tkd-sticky-search .tkd-reset-search:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    .tkd-sticky-search .tkd-reset-search i {
        font-size: 11px !important;
        line-height: 1 !important;
        color: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Search button - Full right side green */
    .tkd-sticky-search .tkd-search-submit {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 48px !important;
        border-radius: 0 14px 14px 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        height: 100% !important;
    }
    .tkd-sticky-search .tkd-search-submit:hover {
        background: var(--tkd-primary-dark, #70c033) !important;
        box-shadow: none !important;
    }
    .tkd-sticky-search .tkd-search-submit:active {
        background: var(--tkd-primary-dark, #70c033) !important;
        opacity: 0.9 !important;
        box-shadow: none !important;
    }
    .tkd-sticky-search .tkd-search-submit span {
        display: none !important;
    }
    .tkd-sticky-search .tkd-search-submit i {
        font-size: 15px !important;
        margin: 0 !important;
        color: white !important;
    }
    
    /* ============================================
       COMPREHENSIVE MOBILE OPTIMIZATIONS
       ============================================ */
    
    /* Filter Section Headers */
    .tkd-filter-section h4 {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #333 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 10px !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    /* Quick Filter Chips - Grid Layout */
    .tkd-quick-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .tkd-filter-chip {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        border: 1px solid #e5e5e5 !important;
        background: white !important;
        color: #333 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        min-height: 48px !important;
        transition: all 0.2s ease !important;
    }
    .tkd-filter-chip i {
        font-size: 14px !important;
        color: #666 !important;
        width: 18px !important;
        text-align: center !important;
    }
    .tkd-filter-chip.active {
        background: var(--tkd-accent-color) !important;
        border-color: var(--tkd-accent-color) !important;
        color: white !important;
    }
    .tkd-filter-chip.active i {
        color: white !important;
    }
    
    /* Rating Buttons - 2x2 Grid */
    .tkd-rating-selector {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .tkd-rating-btn {
        padding: 4px 12px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        border-radius: 4px !important;
        border: 1px solid #e5e5e5 !important;
        background: white !important;
        color: #333 !important;
        text-align: center !important;
        min-height: 28px !important;
        height: 28px !important;
        max-height: 28px !important;
        line-height: 1.1 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }
    .tkd-rating-btn.active {
        background: var(--tkd-accent-color) !important;
        border-color: var(--tkd-accent-color) !important;
        color: white !important;
    }
    
    /* Service Select Dropdown */
    .tkd-service-select {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        border: 1px solid #e5e5e5 !important;
        background: white !important;
        color: #333 !important;
        min-height: 48px !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        padding-right: 40px !important;
    }
    
    /* Availability Checkbox */
    .tkd-availability-options {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    /* CRITICAL: Refined checkbox styling - must override all other rules */
    .tkd-filters-dropdown.active .tkd-availability-options {
        width: auto !important;
        max-width: 100% !important;
    }
    
    .tkd-filters-dropdown.active .tkd-checkbox-option {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        border: 1px solid #EBEBEB !important;
        background: white !important;
        cursor: pointer !important;
        min-height: 36px !important;
        width: fit-content !important;
        max-width: 100% !important;
        transition: all 0.2s ease !important;
        font-size: 13px !important;
    }
    
    /* Base checkbox option (when dropdown not active) */
    .tkd-checkbox-option {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        border-radius: 10px !important;
        border: 1px solid #e5e5e5 !important;
        background: white !important;
        cursor: pointer !important;
        min-height: 52px !important;
        transition: all 0.2s ease !important;
    }
    .tkd-checkbox-option input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        border-radius: 4px !important;
        border: 2px solid #ddd !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    
    /* ============================================
       FINAL OVERRIDE: Rating buttons (toggle bars) - thinner
       This must be the last rule to ensure it applies
       ============================================ */
    
    .tkd-filters-dropdown.active .tkd-rating-selector {
        gap: 6px !important;
    }
    
    .tkd-filters-dropdown.active .tkd-rating-btn,
    .tkd-filters-dropdown.active .tkd-rating-selector .tkd-rating-btn,
    .tkd-filters-dropdown.active .tkd-filter-section .tkd-rating-btn,
    .tkd-filters-dropdown.active .tkd-filter-section .tkd-rating-selector .tkd-rating-btn {
        padding: 4px 12px !important;
        font-size: 11px !important;
        min-height: 28px !important;
        height: 28px !important;
        max-height: 28px !important;
        border-radius: 4px !important;
        font-weight: 500 !important;
        border-width: 1px !important;
        line-height: 1.1 !important;
        display: inline-block !important;
        background: white !important;
        box-sizing: border-box !important;
    }
    .tkd-checkbox-label {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 14px !important;
        color: #333 !important;
    }
    .tkd-checkbox-label i {
        color: var(--tkd-accent-color) !important;
        font-size: 16px !important;
    }
    
    /* Filter Action Buttons */
    .tkd-clear-filters,
    .tkd-apply-filters {
        flex: 1 !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: none !important;
        cursor: pointer !important;
        min-height: 44px !important;
        transition: all 0.15s ease !important;
    }
    .tkd-clear-filters {
        background: #f5f5f5 !important;
        color: #333 !important;
    }
    .tkd-clear-filters:active {
        background: #e8e8e8 !important;
    }
    .tkd-apply-filters {
        background: var(--tkd-accent-color) !important;
        color: white !important;
    }
    .tkd-apply-filters:active {
        opacity: 0.9 !important;
    }
    
    /* ============================================
       LOCATION DROPDOWN - COMPACT MOBILE DESIGN
       Fits everything on one screen like Filters
       ============================================ */
    
    /* Location Dropdown - Exact Viewport Height - Override all parent constraints */
    .tkd-location-dropdown {
        flex-direction: column !important;
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 99999 !important;
    }
    
    /* CRITICAL: Prevent any child from causing horizontal overflow */
    .tkd-location-dropdown * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .tkd-location-dropdown.active {
        display: flex !important;
    }
    
    /* Hide search bar on mobile - not needed */
    .tkd-location-dropdown .tkd-location-search {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    /* Location Filter Tabs - Compact Horizontal - MUST FIT WIDTH */
    .tkd-location-dropdown .tkd-location-filters {
        display: flex !important;
        gap: 6px !important;
        padding: 8px 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        background: white !important;
        scrollbar-width: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .tkd-location-filters::-webkit-scrollbar {
        display: none !important;
    }
    .tkd-location-dropdown .tkd-filter-tab {
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 18px !important;
        border: none !important;
        background: #f0f0f0 !important;
        color: #666 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
    }
    .tkd-location-dropdown .tkd-filter-tab i {
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }
    .tkd-location-dropdown .tkd-filter-tab.active {
        background: var(--tkd-accent-color) !important;
        color: white !important;
    }
    
    /* Location Content - Force Visible and Scrollable - Must fill remaining space */
    .tkd-location-dropdown .tkd-location-content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 300px !important;
        height: auto !important;
        max-height: calc(100vh - 180px) !important;
        background: white !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* CRITICAL: When dropdown is active, ensure location-content has proper height */
    .tkd-location-dropdown.active .tkd-location-content {
        min-height: 300px !important;
        height: auto !important;
        flex: 1 1 auto !important;
    }
    
    /* Filter Content Sections - Tab Content */
    .tkd-location-dropdown .tkd-filter-content {
        display: none !important;
        width: 100% !important;
        min-height: 200px !important;
        visibility: hidden !important;
        opacity: 0 !important;
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100vh - 200px) !important;
        height: auto !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    .tkd-location-dropdown .tkd-filter-content.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 200px !important;
        height: auto !important;
        max-height: calc(100vh - 200px) !important;
        padding: 16px !important;
    }
    
    /* CRITICAL: Ensure content inside filter-content is visible */
    .tkd-location-dropdown .tkd-filter-content.active * {
        visibility: visible !important;
    }
    
    .tkd-location-dropdown .tkd-filter-content.active .tkd-near-me-option,
    .tkd-location-dropdown .tkd-filter-content.active .tkd-location-grid,
    .tkd-location-dropdown .tkd-filter-content.active .tkd-location-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Location Grid - Compact List */
    .tkd-location-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    /* Location Items - Compact Style */
    .tkd-location-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
        border: 1px solid #e8e8e8 !important;
        background: white !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        min-height: 44px !important;
    }
    .tkd-location-item:active {
        background: #f5f5f5 !important;
    }
    .tkd-location-item.selected {
        background: var(--tkd-accent-color) !important;
        border-color: var(--tkd-accent-color) !important;
        color: white !important;
    }
    .tkd-location-item.selected .tkd-location-name,
    .tkd-location-item.selected .tkd-location-info small,
    .tkd-location-item.selected .tkd-location-count {
        color: white !important;
    }
    .tkd-location-item.selected .tkd-location-count {
        background: rgba(255,255,255,0.2) !important;
    }
    .tkd-location-name {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #333 !important;
    }
    .tkd-location-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        flex: 1 !important;
    }
    .tkd-location-info small {
        font-size: 11px !important;
        color: #999 !important;
        display: block !important;
    }
    .tkd-location-count {
        font-size: 11px !important;
        color: #666 !important;
        background: #f0f0f0 !important;
        padding: 3px 8px !important;
        border-radius: 10px !important;
        font-weight: 500 !important;
        flex-shrink: 0 !important;
    }
    
    /* Near Me Option - Compact Featured Card */
    .tkd-near-me-option {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px !important;
        border-radius: 10px !important;
        background: rgba(129,215,66,0.08) !important;
        cursor: pointer !important;
        border: 1.5px solid var(--tkd-accent-color) !important;
        margin-bottom: 10px !important;
    }
    .tkd-near-me-option:active {
        background: rgba(129,215,66,0.15) !important;
    }
    .tkd-near-me-info h5 {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 0 2px 0 !important;
    }
    .tkd-near-me-info p {
        font-size: 12px !important;
        color: #666 !important;
        margin: 0 !important;
    }
    .tkd-near-me-option > i {
        font-size: 18px !important;
        color: var(--tkd-accent-color) !important;
    }
    
    /* Location Footer Actions - Fixed at Bottom - Match Filters Dropdown - MUST FIT */
    .tkd-location-dropdown .tkd-location-actions {
        position: relative !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        padding: 12px 16px !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #f0f0f0 !important;
        display: flex !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
        flex: 0 0 auto !important;
        z-index: 100 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .tkd-location-clear,
    .tkd-location-apply {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: 50% !important;
        padding: 12px 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: none !important;
        cursor: pointer !important;
        min-height: 44px !important;
        transition: all 0.15s ease !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        width: auto !important;
    }
    .tkd-location-clear {
        background: #f5f5f5 !important;
        color: #333 !important;
    }
    .tkd-location-clear:active {
        background: #e8e8e8 !important;
    }
    .tkd-location-apply {
        background: var(--tkd-accent-color) !important;
        color: white !important;
    }
    .tkd-location-apply:active {
        opacity: 0.9 !important;
    }

    /* Results Header */
    .tkd-results-header {
        padding: 20px 16px !important;
        background: white !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    .tkd-results-count {
        text-align: center !important;
    }
    .tkd-results-count h2 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #222 !important;
        margin: 0 0 4px 0 !important;
    }
    .tkd-results-count p {
        font-size: 14px !important;
        color: #666 !important;
        margin: 0 !important;
    }
    
    /* Active Filters Bar */
    .tkd-active-filters-bar {
        padding: 12px 16px !important;
        background: #fafafa !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .tkd-active-filters-label {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        color: #666 !important;
        font-weight: 500 !important;
    }
    .tkd-active-filter-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        flex: 1 !important;
    }
    .tkd-active-filter-chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        background: white !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 16px !important;
        font-size: 12px !important;
        color: #333 !important;
    }
    .tkd-remove-filter-chip {
        width: 16px !important;
        height: 16px !important;
        min-height: 16px !important;
        padding: 0 !important;
        border: none !important;
        background: #e5e5e5 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
    .tkd-remove-filter-chip i {
        font-size: 8px !important;
        color: #666 !important;
    }
    .tkd-clear-all-filters {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 6px 10px !important;
        background: transparent !important;
        border: none !important;
        font-size: 12px !important;
        color: #e74c3c !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        min-height: auto !important;
    }
    
    /* Listing Cards - Enhanced */
    .tkd-listing-card {
        background: white !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
        margin-bottom: 16px !important;
    }
    .tkd-card-image {
        height: 160px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .tkd-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .tkd-featured-badge {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        padding: 6px 10px !important;
        background: var(--tkd-accent-color) !important;
        color: white !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .tkd-mapillary-badge {
        position: absolute !important;
        bottom: 12px !important;
        left: 12px !important;
        padding: 6px 10px !important;
        background: rgba(0,0,0,0.7) !important;
        color: white !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .tkd-card-header {
        padding: 16px 16px 8px !important;
    }
    /* V50: Fixed - business name should NOT be flex, causes layout issues */
    .tkd-business-name {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #222 !important;
        line-height: 1.3 !important;
        margin: 0 0 8px 0 !important;
        display: block !important; /* NOT flex - causes badge alignment issues */
        width: 100% !important;
    }
    .tkd-business-name a {
        color: inherit !important;
        text-decoration: none !important;
    }
    .tkd-status-badge-inline {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
    }
    .tkd-status-open {
        background: #e8f5e9 !important;
        color: #2e7d32 !important;
    }
    .tkd-status-closed {
        background: #ffebee !important;
        color: #c62828 !important;
    }
    .tkd-rating-info {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }
    .tkd-stars {
        display: flex !important;
        gap: 2px !important;
    }
    /* V32: Stars use accent color */
    .tkd-stars i {
        font-size: 12px !important;
        color: var(--tkd-accent-color) !important;
    }
    .tkd-stars i.far {
        color: rgba(var(--tkd-text-rgb), 0.3) !important;
    }
    .tkd-rating-text {
        font-size: 13px !important;
        color: #666 !important;
    }
    .tkd-card-body {
        padding: 8px 16px !important;
    }
    .tkd-location-info,
    .tkd-hours-info-inline,
    .tkd-contact-info {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        color: #666 !important;
        margin-bottom: 6px !important;
    }
    .tkd-location-info i,
    .tkd-hours-info-inline i,
    .tkd-contact-info i {
        width: 16px !important;
        text-align: center !important;
        color: #999 !important;
        font-size: 12px !important;
    }
    .tkd-phone-link-inline {
        color: var(--tkd-accent-color) !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }
    .tkd-card-footer {
        padding: 8px 12px 12px !important;
        display: flex !important;
        gap: 6px !important;
    }
    .tkd-view-details,
    .tkd-call-btn {
        flex: 1 !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        transition: all 0.2s ease !important;
    }
    .tkd-view-details {
        background: var(--tkd-accent-color) !important;
        color: white !important;
    }
    .tkd-call-btn {
        background: rgba(var(--tkd-accent-rgb), 0.15) !important;
        color: var(--tkd-accent-color) !important;
        border: 1.5px solid var(--tkd-accent-color) !important;
    }
    .tkd-view-details:active,
    .tkd-call-btn:active {
        opacity: 0.9 !important;
        transform: scale(0.98) !important;
    }
    .tkd-view-details i,
    .tkd-call-btn i {
        font-size: 11px !important;
    }
    
    /* Map Panel - HIDDEN ON MOBILE */
    .tkd-map-panel {
        display: none !important;
    }
    .tkd-map-container {
        display: none !important;
    }
    
    /* Pagination */
    .tkd-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 20px 16px !important;
        flex-wrap: wrap !important;
    }
    .tkd-pagination a,
    .tkd-pagination span {
        min-width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }
    .tkd-pagination a {
        background: white !important;
        color: #333 !important;
        border: 1px solid #e5e5e5 !important;
    }
    .tkd-pagination a:active {
        background: #f5f5f5 !important;
    }
    .tkd-pagination span.current {
        background: var(--tkd-accent-color) !important;
        color: white !important;
        border: none !important;
    }
    
    /* No Results State */
    .tkd-no-results {
        padding: 40px 20px !important;
        text-align: center !important;
    }
    .tkd-no-results i {
        font-size: 48px !important;
        color: #ddd !important;
        margin-bottom: 16px !important;
    }
    .tkd-no-results h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 0 8px 0 !important;
    }
    .tkd-no-results p {
        font-size: 14px !important;
        color: #666 !important;
        margin: 0 !important;
    }
    
    /* Glass Card Wrapper - Mobile Simplification */
    .glass-card-wrapper {
        position: relative !important;
    }
    .glass-card-top {
        position: relative !important;
        transform: none !important;
    }
    .glass-card-content {
        background: white !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    
    /* Smooth Scrolling */
    .tkd-results-panel,
    .tkd-filters-content,
    .tkd-location-content {
        scroll-behavior: smooth !important;
    }
    
    /* Safe Area Padding for iOS */
    /* Hide Desktop-Only Elements */
    .tkd-desktop-only {
        display: none !important;
    }
}

/* ================================================================
   V9 FINAL OVERRIDE: SCROLLBAR VISIBILITY - LAST DECLARATION WINS
   This section MUST be at the end of all CSS to take priority
   ================================================================ */

/* Force scrollbar container */
.tkd-listings-grid[data-tkd-version],
div.tkd-listings-grid.tkd-search-results-grid[data-tkd-version] {
    overflow-y: scroll !important;
    scrollbar-width: auto !important;
    scrollbar-color: #444 #e8e8e8 !important;
}

/* V9: WebKit scrollbar - FINAL OVERRIDE with attribute selector for specificity */
.tkd-listings-grid[data-tkd-version]::-webkit-scrollbar {
    width: 20px !important;
    height: 20px !important;
    background-color: #e8e8e8 !important;
}

.tkd-listings-grid[data-tkd-version]::-webkit-scrollbar-track {
    background-color: #e8e8e8 !important;
    border-radius: 10px !important;
}

.tkd-listings-grid[data-tkd-version]::-webkit-scrollbar-thumb {
    background-color: #555555 !important;
    border-radius: 10px !important;
    border: 4px solid #e8e8e8 !important;
    min-height: 80px !important;
}

.tkd-listings-grid[data-tkd-version]::-webkit-scrollbar-thumb:hover {
    background-color: #333333 !important;
}

/* ============================================================
 * Block 5 (further-down responsive overrides) (originally modern-niche.php lines 11374-12104)
 * ============================================================ */
/* PHASE 2: Favorites Button */
.tkd-favorite-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
    z-index: 10 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    aspect-ratio: 1 / 1 !important;
    /* Fallback for older browsers - ensures square shape */
    line-height: 32px !important;
}

.tkd-favorite-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* V33: Active favorite button - red background and heart */
.tkd-favorite-btn.active,
.tkd-favorite-btn.active:hover {
    background: rgba(239, 68, 68, 0.95) !important;
    background-color: rgba(239, 68, 68, 0.95) !important;
    border-color: rgba(239, 68, 68, 1) !important;
    color: white !important;
}

.tkd-favorite-btn.active i,
.tkd-favorite-btn.active:hover i {
    color: white !important;
}

.tkd-favorite-btn i {
    transition: transform 0.2s ease;
}

/* Ensure button stays circular even when parent has flex properties */
.tkd-card-image .tkd-favorite-btn,
.glass-card-content .tkd-card-image .tkd-favorite-btn,
.tkd-listing-card .tkd-favorite-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .tkd-card-image .tkd-favorite-btn,
    .glass-card-content .tkd-card-image .tkd-favorite-btn,
    .tkd-listing-card .tkd-favorite-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }
}

.tkd-favorite-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: none;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.tkd-favorite-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* PHASE 2: Filter Pills */
.tkd-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
}

.tkd-filter-pill {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tkd-filter-pill:hover {
    border-color: var(--tkd-accent-color);
    background: rgba(var(--tkd-accent-rgb), 0.1);
    color: var(--tkd-accent-color);
    transform: translateY(-1px);
}

.tkd-filter-pill.active {
    background: var(--tkd-accent-color);
    border-color: var(--tkd-accent-color);
    color: white;
}

.tkd-filter-pill.active:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ============================================
   PHASE 3: Compare Checkbox
   ============================================ */

.tkd-compare-checkbox {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: none;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.tkd-compare-checkbox:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.tkd-compare-checkbox:checked {
    background: var(--tkd-accent-color);
    border-color: var(--tkd-accent-color);
}

/* ============================================
   PHASE 3: Multi-Select Toolbar
   ============================================ */

.tkd-multiselect-toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 20px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.3s ease;
}

.tkd-multiselect-toolbar.show {
    display: flex;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.tkd-toolbar-count {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-right: 8px;
}

.tkd-toolbar-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tkd-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.tkd-toolbar-btn.primary {
    background: var(--tkd-accent-color);
    color: white;
}

.tkd-toolbar-btn.primary:hover {
    opacity: 0.9;
}

.tkd-toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tkd-toolbar-close {
    margin-left: 8px;
    padding: 6px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
}

.tkd-toolbar-close:hover {
    color: white;
    transform: rotate(90deg);
}

/* ============================================
   PHASE 3: Compare Modal
   ============================================ */

.tkd-compare-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: none;
    z-index: 20000;
    overflow-y: auto;
    animation: fadeIn 0.3s ease;
}

.tkd-compare-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tkd-compare-modal-content {
    background: var(--tkd-main-bg-color);
    border-radius: 16px;
    max-width: 1400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tkd-compare-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tkd-compare-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--tkd-text-color);
    margin: 0;
}

/* v2.14.31: pinned the X color with !important on both base and :hover so
   it stays visible on the white modal panel. Changed the hover background
   from a near-invisible `rgba(255,255,255,0.1)` to a darker `rgba(0,0,0,0.08)`
   tint, and forced the icon color to the brand accent on hover so it pops. */
.tkd-compare-modal-close {
    background: transparent;
    border: none;
    color: var(--tkd-text-color) !important;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.tkd-compare-modal-close i {
    color: inherit !important;
}

.tkd-compare-modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--tkd-accent-color, #1A5BFA) !important;
    transform: rotate(90deg);
}

.tkd-compare-modal-close:hover i {
    color: var(--tkd-accent-color, #1A5BFA) !important;
}

.tkd-compare-modal-body {
    padding: 24px;
}

.tkd-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.tkd-compare-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.tkd-compare-item-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tkd-compare-item-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--tkd-text-color);
    margin: 0 0 8px 0;
}

.tkd-compare-item-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tkd-text-color);
    font-size: 14px;
}

/* v2.14.31: accent-tinted divider (was invisible white-on-white at 0.05 alpha)
   and label rows that flex an icon next to the uppercase label. */
.tkd-compare-item-detail {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--tkd-accent-rgb), 0.1);
}

.tkd-compare-item-detail:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.tkd-compare-item-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: rgba(var(--tkd-text-rgb), 0.65);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.tkd-compare-item-label i {
    color: var(--tkd-accent-color, #1A5BFA);
    font-size: 13px;
}

.tkd-compare-item-value {
    font-size: 14px;
    color: var(--tkd-text-color);
    line-height: 1.45;
}

/* v2.14.31: status pill — rounded badge tinted green for Open, red for Closed,
   grey for Unknown. Replaces the plain colored-bullet `●` we used before. */
.tkd-compare-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.tkd-compare-status-pill i {
    font-size: 8px;
}

.tkd-compare-status-pill.open {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.tkd-compare-status-pill.closed {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.tkd-compare-status-pill.unknown {
    background: rgba(var(--tkd-text-rgb), 0.08);
    color: rgba(var(--tkd-text-rgb), 0.6);
}

.tkd-compare-item-value a {
    color: var(--tkd-accent-color);
    text-decoration: none;
}

.tkd-compare-item-value a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .tkd-compare-grid {
        grid-template-columns: 1fr;
    }
    
    .tkd-multiselect-toolbar {
        bottom: 10px;
        left: 10px;
        right: 10px;
        transform: none;
        flex-wrap: wrap;
    }
    
    .tkd-toolbar-btn {
        flex: 1;
        min-width: 100px;
    }
    
    .tkd-favorite-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        aspect-ratio: 1 / 1 !important;
        /* Fallback for older browsers - ensures square shape */
        line-height: 28px !important;
    }
}

/* PHASE 4: Social Proof Badges */
.tkd-social-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.tkd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tkd-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tkd-badge i {
    font-size: 10px;
}

/* Badge Colors - FORCED with !important to override theme CSS */
.tkd-badge-top-rated {
    background: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107 !important;
    border: 1px solid rgba(255, 193, 7, 0.4) !important;
}

.tkd-badge-popular {
    background: rgba(33, 150, 243, 0.2) !important;
    color: #2196f3 !important;
    border: 1px solid rgba(33, 150, 243, 0.4) !important;
}

.tkd-badge-fast-response {
    background: rgba(76, 175, 80, 0.2) !important;
    color: #4caf50 !important;
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
}

.tkd-badge-verified,
.tkd-badge-claimed {
    background: rgba(33, 150, 243, 0.15) !important;
    color: #2196f3 !important;
    border: 1px solid rgba(33, 150, 243, 0.4) !important;
}

/* ========================================
   CROSS-PLATFORM BADGE VISIBILITY OVERRIDES
   Ensures all 6 badge types render consistently
   ======================================== */

/* Base badge visibility - CRITICAL: Force display on all platforms */
.tkd-badge,
.tkd-badge-top-rated,
.tkd-badge-popular,
.tkd-badge-fast-response,
.tkd-badge-verified,
.tkd-badge-claimed,
.tkd-badge-many-reviews,
.tkd-featured-badge,
.tkd-status-badge-inline,
[class*="badge-"],
[class*="tkd-badge"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Badge container should not hide badges */
.tkd-badges-container,
.tkd-card-badges,
.badge-wrapper,
[class*="badges"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* 100+ Reviews badge - Blue */
.tkd-badge-many-reviews,
[class*="100-reviews"],
[class*="reviews-badge"] {
    background: rgba(33, 150, 243, 0.2) !important;
    color: #2196f3 !important;
    border: 1px solid rgba(33, 150, 243, 0.4) !important;
}

/* Featured badge - Gold */
.tkd-featured-badge {
    background: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107 !important;
    border: 1px solid rgba(255, 193, 7, 0.4) !important;
}

/* V56: Street View / Mapillary badge - REMOVED [class*="street-view"] which was matching .fa-street-view icon
   and overriding white text with teal. Now only targets the old .mapillary-badge class if used elsewhere. */
.mapillary-badge:not(.tkd-mapillary-badge) {
    background: rgba(0, 150, 136, 0.2) !important;
    color: #009688 !important;
    border: 1px solid rgba(0, 150, 136, 0.4) !important;
}

/* V56: CRITICAL - .tkd-mapillary-badge MUST have white text - this rule comes LAST */
.tkd-mapillary-badge,
.tkd-mapillary-badge *,
.tkd-mapillary-badge i,
.tkd-mapillary-badge i.fa-street-view,
.tkd-mapillary-badge span,
.tkd-card-image .tkd-mapillary-badge,
.tkd-card-image .tkd-mapillary-badge * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    fill: #ffffff !important;
}

/* Open status badge - FORCED colors */
.tkd-status-badge-inline.tkd-status-open {
    color: rgb(34, 197, 94) !important;
    background: rgba(34, 197, 94, 0.1) !important;
}

/* Closed status badge */
.tkd-status-badge-inline.tkd-status-closed {
    color: rgb(239, 68, 68) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Badge icons - ensure they render with correct font */
.tkd-badge i,
.tkd-badge-top-rated i,
.tkd-badge-popular i,
.tkd-badge-fast-response i,
.tkd-badge-verified i,
.tkd-featured-badge i,
.tkd-status-badge-inline i,
[class*="badge"] i {
    font-family: "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* Smooth card hover effect - FIXED: No transform to prevent blur */
.tkd-listing-card:hover {
    z-index: 10 !important;
    position: relative !important;
}

.glass-card-top:hover {
    transform: none !important; /* No transform - prevents blur */
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    /* V55: Enhanced shadow on hover */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 16px 48px rgba(0, 0, 0, 0.10) !important;
    /* V55: Keep border but intensify the accent color on hover */
    border: 1px solid rgba(var(--tkd-accent-rgb), 0.6) !important;
}

/* Banner cards: Make outer wrapper transparent - only inner glass-ad-banner shows */
.glass-card-wrapper.banner-card .glass-card-top {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Banner cards: Disable hover transform on outer layer */
.glass-card-wrapper.banner-card .glass-card-top:hover {
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Prevent parent containers from moving */
.glass-card-wrapper:hover,
.glass-main-card:hover,
.glass-business-container:hover {
    transform: translateZ(0) !important;
    transition: none !important;
}

.tkd-listing-card,
.glass-card-wrapper {
    transition: transform 0.3s ease;
}

/* ============================================
   v2.16.20 — COMPARE CHECKBOX 20x20 (resilient copy)
   ============================================
   Duplicate of the v2.15.15 block in turnkeydir-search-enhancements.css.
   That file is enqueued mid-template, so it prints in the FOOTER —
   LiteSpeed "Load CSS Asynchronously"/UCSS setups can defer or strip
   it, which leaves the native mobile checkbox inflated (~24x44
   rectangle, §14 A8/A3). This stylesheet loads in the HEAD on niche
   pages, so the sizing survives even when the footer copy is
   deferred. Keep both in sync. */
@media (max-width: 768px) {
    html body .tkd-compare-checkbox {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 20px !important;
        max-height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        top: 10px !important;
        left: 10px !important;
    }
    /* v2.16.21: geometry only — all paint (colors, accent, checkmark) is
       inline on the element + turnkeydirPaintCompareBox() in modern-niche.php.
       See the matching note in turnkeydir-search-enhancements.css. */
}