/**
 * TurnKey Directories 2.0 - Mobile Optimization for Single Business Listings
 * 
 * Comprehensive mobile-first responsive design for individual business listing pages
 * Target: /plumber/us/arizona/phoenix/1st-plumber-phoenix/ and similar pages
 * 
 * DEVELOPMENT NOTES:
 * - Uses visibility/opacity instead of display:none for animations (Rule 3)
 * - All selectors use maximum specificity to override inline styles
 * - Follows TurnkeyDir Development Guidelines
 */

/* ============================================
   CRITICAL MOBILE LAYOUT - Container Reset
   Maximum specificity to override inline styles
   ============================================ */

@media (max-width: 768px) {
    /* Body Reset */
    body.tkd-active,
    html body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* WordPress Wrapper Resets — v2.14.50: scoped to body.tkd-listing-page
       so we don't leak into other themes' homepages and non-listing routes.
       Same root cause as the wildcards in turnkeydir-mobile-critical.css. */
    body.tkd-listing-page #page,
    body.tkd-listing-page #content,
    body.tkd-listing-page .site-content,
    body.tkd-listing-page .content-area,
    body.tkd-listing-page main,
    body.tkd-listing-page article,
    body.tkd-listing-page .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ============================================
       MAIN CONTAINER - Full Width Mobile
       ============================================ */
    
    /* Force container to be full width - Override inline grid styles */
    html body div.glass-business-container,
    body div.glass-business-container,
    div.glass-business-container,
    .glass-business-container[style],
    .glass-business-container {
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 8px 0 16px 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        grid-template-columns: none !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    
    /* ============================================
       MAIN CARD CONTAINER - Full Width Mobile
       ============================================ */
    
    html body div.glass-main-card,
    body div.glass-main-card,
    div.glass-main-card,
    .glass-main-card[style],
    .glass-main-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 6px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        order: 1 !important;
        flex: none !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        background: transparent !important;
    }
    
    /* ============================================
       SIDEBAR HIDING - Maximum Specificity
       ============================================ */
    
    html body .glass-business-container .glass-ad-sidebar-left,
    html body .glass-business-container .glass-ad-sidebar-right,
    html body .glass-ad-sidebar-left,
    html body .glass-ad-sidebar-right,
    body .glass-ad-sidebar-left,
    body .glass-ad-sidebar-right,
    .glass-ad-sidebar-left,
    .glass-ad-sidebar-right,
    .glass-ad-sidebar-left[style],
    .glass-ad-sidebar-right[style],
    [class*="glass-ad-sidebar"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    
    /* Hide inline-style sidebar divs */
    .glass-business-container > div[style*="width: 300px"],
    .glass-business-container > div[style*="width:300px"],
    .glass-business-container > div[style*="width: 160px"],
    .glass-business-container > div[style*="width:160px"],
    .glass-business-container > div[style*="min-height: 600px"] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* ============================================
   GLASS CARD WRAPPERS - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    /* All Card Wrappers - Full Width with Margins */
    .glass-card-wrapper,
    .glass-card-wrapper.main-card,
    .glass-card-wrapper.compact-card,
    .glass-card-wrapper.wide-card,
    .glass-card-wrapper.banner-card,
    .glass-card-wrapper.tall-card,
    .glass-card-wrapper.image-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Glass Card Top - Mobile Border Radius */
    .glass-card-wrapper .glass-card-top,
    .glass-card-top {
        border-radius: 16px !important;
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important;
    }
    
    /* Main Card - Specific Heights */
    .glass-card-wrapper.main-card .glass-card-top,
    .main-card .glass-card-top {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Compact Cards */
    .glass-card-wrapper.compact-card .glass-card-top {
        min-height: auto !important;
    }
    
    /* Banner Cards - Reduced Height */
    .glass-card-wrapper.banner-card {
        min-height: 100px !important;
    }
    
    /* NUCLEAR OVERRIDE: Prevent position-center from centering content on mobile */
    html body .glass-card-wrapper.main-card.position-center,
    body .glass-card-wrapper.main-card.position-center,
    .glass-card-wrapper.main-card.position-center {
        display: block !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin: 0 0 12px 0 !important;
    }
    
    html body .glass-card-wrapper.main-card.position-center .glass-card-top,
    body .glass-card-wrapper.main-card.position-center .glass-card-top,
    .glass-card-wrapper.main-card.position-center .glass-card-top {
        display: block !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    /* Card Content Padding */
    html body .glass-card-wrapper.main-card .glass-card-content,
    body .glass-card-wrapper.main-card .glass-card-content,
    .glass-card-wrapper.main-card .glass-card-content,
    .glass-card-content {
        padding: 16px 14px !important;
        min-height: auto !important;
        height: auto !important;
        box-sizing: border-box !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
    }
    
    .compact-card .glass-card-content {
        padding: 14px 12px !important;
    }
}

/* ============================================
   BUSINESS HEADER - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    /* Business Name - Left Aligned */
    html body .glass-card-wrapper.main-card .glass-card-content .glass-business-name,
    body .glass-card-wrapper.main-card .glass-card-content .glass-business-name,
    .glass-card-wrapper.main-card .glass-card-content .glass-business-name,
    .glass-card-content .glass-business-name,
    .glass-business-name,
    .glass-business-name h1,
    h1.glass-business-name {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin: 0 0 10px 0 !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
        font-weight: 700 !important;
        max-height: none !important;
        -webkit-line-clamp: 3 !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Business Subtitle/Category - Left Aligned */
    html body .glass-card-wrapper.main-card .glass-card-content .glass-business-subtitle,
    body .glass-card-wrapper.main-card .glass-card-content .glass-business-subtitle,
    .glass-card-wrapper.main-card .glass-card-content .glass-business-subtitle,
    .glass-card-content .glass-business-subtitle,
    .glass-business-subtitle {
        font-size: 14px !important;
        line-height: 1.35 !important;
        margin: 0 0 12px 0 !important;
        max-height: none !important;
        -webkit-line-clamp: 2 !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Rating Section - Single Line Layout, Left Aligned - MAXIMUM SPECIFICITY */
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section,
    body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section,
    .glass-card-wrapper.main-card .glass-card-content .glass-rating-section,
    .glass-card-wrapper.main-card .glass-rating-section,
    .glass-card-content .glass-rating-section,
    .glass-rating-section {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin: 0 0 12px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
        width: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
        float: none !important;
        clear: none !important;
    }
    
    html body .glass-card-wrapper.main-card .glass-rating-section .glass-stars,
    body .glass-card-wrapper.main-card .glass-rating-section .glass-stars,
    .glass-card-wrapper.main-card .glass-rating-section .glass-stars,
    .glass-rating-section .glass-stars,
    .glass-stars {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        float: none !important;
    }
    
    html body .glass-card-wrapper.main-card .glass-rating-section .glass-star,
    body .glass-card-wrapper.main-card .glass-rating-section .glass-star,
    .glass-card-wrapper.main-card .glass-rating-section .glass-star,
    .glass-rating-section .glass-star,
    .glass-star {
        font-size: 14px !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: inline-block !important;
        float: none !important;
    }
    
    html body .glass-card-wrapper.main-card .glass-rating-section .glass-rating-number,
    body .glass-card-wrapper.main-card .glass-rating-section .glass-rating-number,
    .glass-card-wrapper.main-card .glass-rating-section .glass-rating-number,
    .glass-rating-section .glass-rating-number,
    .glass-rating-number {
        font-size: 14px !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        display: inline-block !important;
        float: none !important;
    }
    
    html body .glass-card-wrapper.main-card .glass-rating-section .glass-review-wrapper,
    body .glass-card-wrapper.main-card .glass-rating-section .glass-review-wrapper,
    .glass-card-wrapper.main-card .glass-rating-section .glass-review-wrapper,
    .glass-rating-section .glass-review-wrapper,
    .glass-review-wrapper {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        margin: 0 !important;
        float: none !important;
    }
    
    html body .glass-card-wrapper.main-card .glass-rating-section .glass-reviews-count,
    html body .glass-card-wrapper.main-card .glass-rating-section .glass-reviews-link,
    body .glass-card-wrapper.main-card .glass-rating-section .glass-reviews-count,
    body .glass-card-wrapper.main-card .glass-rating-section .glass-reviews-link,
    .glass-card-wrapper.main-card .glass-rating-section .glass-reviews-count,
    .glass-card-wrapper.main-card .glass-rating-section .glass-reviews-link,
    .glass-rating-section .glass-reviews-count,
    .glass-rating-section .glass-reviews-link,
    .glass-reviews-count,
    .glass-reviews-link {
        font-size: 13px !important;
        white-space: nowrap !important;
        margin: 0 !important;
        display: inline !important;
        float: none !important;
    }
    
    /* Status Badges Container */
    .glass-status-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 0 0 14px 0 !important;
    }
    
    /* Individual Status Badges */
    .glass-status-badge {
        display: inline-flex !important;
        align-items: center !important;
        padding: 5px 10px !important;
        border-radius: 16px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        gap: 4px !important;
    }
    
    .glass-status-badge i {
        font-size: 10px !important;
    }
    
    /* Hours Toggle - Touch Friendly */
    .glass-hours-container {
        position: relative !important;
    }
    
    .glass-status-badge.hours-clickable {
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .glass-hours-dropdown {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        min-width: 240px !important;
        max-width: 320px !important;
        z-index: 100 !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    }
    
    .glass-dropdown-arrow {
        font-size: 10px !important;
        margin-left: 4px !important;
        transition: transform 0.3s ease !important;
    }
}

/* ============================================
   FEATURED IMAGE / MAPILLARY - Mobile
   ============================================ */

@media (max-width: 768px) {
    .glass-featured-image-container {
        width: 100% !important;
        margin: 14px 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    .glass-featured-image {
        width: 100% !important;
        height: 220px !important;
        min-height: 180px !important;
        max-height: 280px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .glass-featured-image img,
    .glass-featured-image .mapillary-thumbnail,
    .glass-featured-image .mapillary-preview-thumb {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
    
    /* Mapillary Progressive Container */
    .mapillary-progressive-container {
        min-height: 200px !important;
        height: 220px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important;
        transition: height 0.3s ease !important;
    }
    
    /* Mapillary Interactive View - Increased Height for Better Control Access */
    /* On mobile, hide inline interactive view - use modal instead */
    .mapillary-progressive-container.mapillary-interactive-active {
        min-height: 200px !important;
        height: 220px !important;
    }
    
    /* Hide inline iframe wrapper on mobile - modal is used instead */
    .mapillary-progressive-container .mapillary-iframe-wrapper {
        display: none !important;
    }
    
    /* Only show inline iframe on mobile if modal doesn't exist (fallback) */
    .mapillary-progressive-container.mapillary-interactive-active .mapillary-iframe-wrapper {
        display: none !important;
    }
    
    /* Mapillary iframe wrapper - Completely hidden on mobile (modal is used instead) */
    .mapillary-progressive-container .mapillary-iframe-wrapper,
    .mapillary-progressive-container .mapillary-iframe-wrapper[data-mobile-hidden="true"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    
    /* Mapillary loading spinner - Hidden on mobile */
    .mapillary-progressive-container .mapillary-loading-spinner {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Mapillary iframe - Completely hidden on mobile */
    .mapillary-progressive-container .mapillary-embed-iframe {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    /* Prevent container from expanding on mobile when interactive */
    .mapillary-progressive-container.mapillary-interactive-active {
        min-height: 200px !important;
        height: 220px !important;
        max-height: 220px !important;
    }
    
    /* Hide overlays when interactive view is active to avoid blocking Mapillary controls */
    /* Target glass-mapillary-overlay when it's a sibling of the active container */
    .glass-featured-image:has(.mapillary-progressive-container.mapillary-interactive-active) .glass-mapillary-overlay,
    .glass-featured-image .mapillary-progressive-container.mapillary-interactive-active ~ .glass-mapillary-overlay,
    .mapillary-progressive-container.mapillary-interactive-active ~ .glass-mapillary-overlay {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 1 !important;
    }
    
    /* Hide image controls (photo author info) when interactive */
    .glass-featured-image-container:has(.mapillary-progressive-container.mapillary-interactive-active) .glass-image-controls,
    .glass-featured-image-container .mapillary-progressive-container.mapillary-interactive-active ~ .glass-image-controls,
    .glass-featured-image:has(.mapillary-progressive-container.mapillary-interactive-active) ~ .glass-image-controls,
    .glass-featured-image-container:has(.mapillary-progressive-container.mapillary-interactive-active) + .glass-image-controls {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Ensure click overlay is hidden when iframe is shown */
    .mapillary-progressive-container.mapillary-interactive-active .mapillary-click-overlay {
        display: none !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    /* Mapillary Click Overlay - Optimized for Mobile */
    .mapillary-click-overlay {
        border-radius: 12px !important;
        padding: 12px !important;
        gap: 8px !important;
    }
    
    /* Play Button - Smaller on Mobile */
    .mapillary-play-button {
        width: 56px !important;
        height: 56px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.25) !important;
    }
    
    .mapillary-play-button i {
        font-size: 22px !important;
        margin-left: 1px !important;
    }
    
    /* Overlay Text - Optimized Sizes */
    .mapillary-click-overlay p {
        margin-top: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        padding: 0 12px !important;
        word-wrap: break-word !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .mapillary-click-overlay p:first-of-type {
        margin-top: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    .mapillary-click-overlay p:last-of-type {
        margin-top: 4px !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        opacity: 0.9 !important;
    }
    
    /* Business Name/Location Overlay - Top of Image */
    .glass-mapillary-overlay {
        height: auto !important;
        min-height: 60px !important;
        max-height: 80px !important;
        padding: 10px 12px !important;
        background: linear-gradient(
            180deg, 
            rgba(0, 0, 0, 0.7) 0%, 
            rgba(0, 0, 0, 0.4) 60%,
            transparent 100%
        ) !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }
    
    /* Ensure overlay doesn't interfere with click */
    .glass-mapillary-overlay * {
        pointer-events: none !important;
    }
    
    .glass-overlay-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    
    .glass-overlay-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    
    .glass-overlay-location {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
        opacity: 0.95 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    
    /* Street View Badge - Bottom of Image */
    .glass-image-controls {
        padding: 8px 0 !important;
        margin-top: 8px !important;
    }
    
    .glass-image-info {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 12px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 16px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #fff !important;
    }
    
    .glass-image-info i {
        font-size: 14px !important;
        color: #4ade80 !important;
    }
    
    .glass-image-info span {
        font-size: 12px !important;
        color: #fff !important;
    }
    
    /* Street View Badge - Alternative positioning */
    .glass-mapillary-badge,
    .mapillary-badge,
    [class*="street-view-badge"] {
        position: absolute !important;
        bottom: 12px !important;
        left: 12px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 16px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: #fff !important;
    }
    
    /* Fallback Image States */
    .glass-image-fallback {
        min-height: 180px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }
    
    .glass-fallback-icon {
        font-size: 36px !important;
    }
    
    .glass-fallback-title {
        font-size: 14px !important;
    }
    
    .glass-fallback-subtitle {
        font-size: 12px !important;
    }
    
    /* ============================================
       FULLSCREEN MODAL FOR MAPILLARY STREET VIEW (Mobile Only)
       ============================================ */
    
    /* Fullscreen Modal Container */
    .mapillary-fullscreen-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        width: 100dvw !important; /* Dynamic viewport width for mobile */
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for mobile */
        max-width: 100vw !important;
        max-width: 100dvw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        min-width: 100vw !important;
        min-width: 100dvw !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        z-index: 99999 !important;
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        /* Break out of any parent constraints */
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
    }
    
    /* Hide any progress bars or loading indicators in modal */
    .mapillary-fullscreen-modal progress,
    .mapillary-fullscreen-modal .progress,
    .mapillary-fullscreen-modal [class*="progress"],
    .mapillary-fullscreen-modal [class*="loading"],
    .mapillary-fullscreen-modal [class*="loader"],
    .mapillary-fullscreen-modal [class*="loading-bar"],
    .mapillary-fullscreen-modal [id*="progress"],
    .mapillary-fullscreen-modal [id*="loading"],
    .mapillary-fullscreen-modal ::-webkit-progress-bar,
    .mapillary-fullscreen-modal ::-webkit-progress-value,
    /* Hide browser progress indicators */
    .mapillary-fullscreen-modal::before,
    .mapillary-fullscreen-modal::after {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        content: none !important;
    }
    
    /* Hide any top loading bars */
    body:has(.mapillary-fullscreen-modal.mapillary-modal-open) progress,
    body:has(.mapillary-fullscreen-modal[style*="display: block"]) progress,
    html:has(.mapillary-fullscreen-modal.mapillary-modal-open) progress {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
    }
    
    /* Modal when displayed - use class instead of attribute selector for better compatibility */
    .mapillary-fullscreen-modal.mapillary-modal-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Modal Backdrop */
    .mapillary-modal-backdrop {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        cursor: pointer !important;
        z-index: 0 !important;
    }
    
    /* Modal Content Container */
    .mapillary-modal-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
    }
    
    /* Close Button - Subtle and tasteful - positioned in top-right, below Mapillary author icon */
    .mapillary-fullscreen-modal .mapillary-modal-close,
    .mapillary-modal-close {
        position: fixed !important;
        top: 70px !important;
        right: 16px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 999999 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        /* Force it to be visible */
        clip: auto !important;
        clip-path: none !important;
    }
    
    .mapillary-modal-close:hover,
    .mapillary-modal-close:active {
        transform: scale(1.1) !important;
        background: rgba(0, 0, 0, 0.6) !important;
    }
    
    /* Custom CSS-based X icon - doesn't depend on Font Awesome */
    .mapillary-close-x {
        position: relative !important;
        width: 18px !important;
        height: 18px !important;
        display: block !important;
    }
    
    .mapillary-close-x span {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 1px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mapillary-close-x span:first-child {
        transform: translateY(-50%) rotate(45deg) !important;
    }
    
    .mapillary-close-x span:last-child {
        transform: translateY(-50%) rotate(-45deg) !important;
    }
    
    .mapillary-modal-close i,
    .mapillary-modal-close i::before {
        font-size: 28px !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        text-fill-color: #ffffff !important;
        fill: #ffffff !important;
        line-height: 1 !important;
        font-weight: bold !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure all children of close button have white color */
    .mapillary-modal-close *,
    .mapillary-modal-close i *,
    .mapillary-modal-close .fas,
    .mapillary-modal-close .fa-times {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        text-fill-color: #ffffff !important;
        fill: #ffffff !important;
    }
    
    /* Ensure close button is visible when modal is open */
    .mapillary-fullscreen-modal.mapillary-modal-open .mapillary-modal-close,
    .mapillary-fullscreen-modal[style*="display: block"] .mapillary-modal-close,
    .mapillary-fullscreen-modal[style*="display:block"] .mapillary-modal-close {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
    }
    
    /* Modal Iframe Wrapper */
    .mapillary-modal-iframe-wrapper {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        box-sizing: border-box !important;
    }
    
    /* Loading Spinner in Modal - Hidden by default */
    .mapillary-modal-loading-spinner {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    
    /* Modal Iframe */
    .mapillary-modal-iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100% !important;
        min-height: 100% !important;
        border: 0 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }
}

/* ============================================
   QUICK ACTION BUTTONS - Mobile Touch-Friendly
   ============================================ */

@media (max-width: 768px) {
    /* Section Header */
    .glass-section-header {
        margin-bottom: 12px !important;
    }
    
    .glass-section-header h3 {
        font-size: 16px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .glass-section-header h3 i {
        font-size: 16px !important;
    }
    
    /* Action Grid - 2x2 Layout */
    .glass-action-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Action Buttons */
    .glass-action-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 10px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        min-height: 72px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
        cursor: pointer !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .glass-action-btn i {
        font-size: 20px !important;
        line-height: 1 !important;
    }
    
    .glass-action-btn span {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }
    
    /* Active State Buttons - Solid Colored Backgrounds */
    .glass-action-btn.active.book-btn,
    .glass-action-btn.active.call-btn,
    a.glass-action-btn.book-btn,
    a.glass-action-btn.call-btn {
        background: #22c55e !important;
        color: #fff !important;
        border-color: #22c55e !important;
    }
    
    .glass-action-btn.active.book-btn i,
    .glass-action-btn.active.book-btn span,
    .glass-action-btn.active.call-btn i,
    .glass-action-btn.active.call-btn span,
    a.glass-action-btn.book-btn i,
    a.glass-action-btn.book-btn span,
    a.glass-action-btn.call-btn i,
    a.glass-action-btn.call-btn span {
        color: #fff !important;
    }
    
    .glass-action-btn.active.website-btn,
    a.glass-action-btn.website-btn {
        background: #3b82f6 !important;
        color: #fff !important;
        border-color: #3b82f6 !important;
    }
    
    .glass-action-btn.active.website-btn i,
    .glass-action-btn.active.website-btn span,
    a.glass-action-btn.website-btn i,
    a.glass-action-btn.website-btn span {
        color: #fff !important;
    }
    
    /* Phase 2-10: Directions button uses accent color from settings */
    .glass-action-btn.active.directions-btn,
    a.glass-action-btn.directions-btn {
        background: var(--tkd-primary, #10b981) !important;
        color: #fff !important;
        border-color: var(--tkd-primary, #10b981) !important;
    }
    
    .glass-action-btn.active.directions-btn i,
    .glass-action-btn.active.directions-btn span,
    a.glass-action-btn.directions-btn i,
    a.glass-action-btn.directions-btn span {
        color: #fff !important;
    }
    
    /* Disabled Buttons */
    .glass-action-btn.disabled {
        background: rgba(128, 128, 128, 0.1) !important;
        color: rgba(128, 128, 128, 0.5) !important;
        border-color: rgba(128, 128, 128, 0.2) !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }
    
    .glass-action-btn.disabled i,
    .glass-action-btn.disabled span {
        color: rgba(128, 128, 128, 0.5) !important;
    }
    
    /* Touch Feedback */
    .glass-action-btn:active:not(.disabled) {
        transform: scale(0.96) !important;
    }
}

/* ============================================
   BUSINESS SPECIALTIES - Mobile
   ============================================ */

@media (max-width: 768px) {
    .glass-specialties-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    
    .glass-specialty-tag {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
    }
    
    .glass-specialty-tag i {
        font-size: 10px !important;
    }
}

/* ============================================
   TWO-COLUMN LAYOUT - Stack on Mobile
   ============================================ */

@media (max-width: 768px) {
    /* Stack columns vertically */
    .glass-two-column-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }
    
    .glass-column,
    .glass-column-left,
    .glass-column-right {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Reset card heights in two-column layout */
    .glass-two-column-container .glass-card-wrapper {
        min-height: auto !important;
        height: auto !important;
    }
    
    .glass-two-column-container .glass-card-top {
        min-height: auto !important;
        height: auto !important;
    }
    
    .glass-two-column-container .glass-card-content {
        min-height: auto !important;
        height: auto !important;
    }
}

/* ============================================
   BUSINESS HOURS - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    .glass-hours-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }
    
    .glass-hours-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        font-size: 14px !important;
    }
    
    .glass-hours-item:last-child {
        border-bottom: none !important;
    }
    
    .glass-hours-item.today {
        background: rgba(59, 130, 246, 0.08) !important;
        border-radius: 8px !important;
        padding: 10px 12px !important;
        margin: -2px -12px !important;
    }
    
    .glass-day {
        font-weight: 600 !important;
        font-size: 14px !important;
        min-width: 90px !important;
    }
    
    .glass-hours {
        font-size: 14px !important;
        text-align: right !important;
    }
    
    /* Hours Dropdown List */
    .glass-hours-list {
        padding: 8px 0 !important;
    }
    
    .glass-hours-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    .glass-hours-row.glass-today {
        background: rgba(59, 130, 246, 0.1) !important;
        font-weight: 600 !important;
    }
    
    .glass-day-name {
        font-weight: 500 !important;
    }
    
    .glass-hours-time {
        text-align: right !important;
    }
}

/* ============================================
   CONTACT INFO - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    .glass-contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .glass-contact-item {
        display: flex !important;
        align-items: flex-start !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        font-size: 14px !important;
        gap: 12px !important;
    }
    
    .glass-contact-item:last-child {
        border-bottom: none !important;
    }
    
    .glass-contact-item i {
        font-size: 16px !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
        width: 20px !important;
        text-align: center !important;
    }
    
    .glass-contact-item a,
    .glass-contact-item span {
        flex: 1 !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Clickable Contact Links - Touch Friendly */
    .glass-contact-item a {
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .glass-contact-item a:active {
        opacity: 0.7 !important;
    }
    
    /* Phone Number - Prominent */
    .glass-contact-item.phone a {
        font-weight: 600 !important;
        font-size: 16px !important;
    }
    
    /* Distance Item */
    .glass-distance-item {
        background: rgba(245, 158, 11, 0.08) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        margin-top: 4px !important;
    }
    
    .glass-distance-main {
        font-weight: 600 !important;
        font-size: 14px !important;
    }
    
    .glass-distance-label {
        font-size: 12px !important;
        opacity: 0.7 !important;
    }
}

/* ============================================
   MAP SECTION - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    .glass-map-container {
        width: 100% !important;
        height: 220px !important;
        min-height: 180px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin: 12px 0 !important;
    }
    
    .glass-map-container iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        border-radius: 12px !important;
    }
    
    #tkd-map {
        height: 220px !important;
        border-radius: 12px !important;
    }
    
    .glass-map-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }
    
    .glass-address-info {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .glass-address-info i {
        font-size: 16px !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }
    
    .glass-status-indicator {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 6px 12px !important;
        border-radius: 16px !important;
        width: fit-content !important;
    }
    
    .glass-status-indicator.open {
        background: rgba(34, 197, 94, 0.12) !important;
        color: #22c55e !important;
    }
    
    .glass-status-indicator.closed {
        background: rgba(239, 68, 68, 0.12) !important;
        color: #ef4444 !important;
    }
}

/* ============================================
   ABOUT / DESCRIPTION SECTION - Mobile
   ============================================ */

@media (max-width: 768px) {
    .glass-about-section,
    .glass-about-text {
        padding: 0 !important;
    }
    
    .glass-about-text p {
        font-size: 14px !important;
        line-height: 1.65 !important;
        word-wrap: break-word !important;
    }
    
    .glass-read-more-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 10px !important;
        padding: 8px 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .glass-read-more-btn:active {
        opacity: 0.7 !important;
    }
}

/* ============================================
   SOCIAL MEDIA - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    .glass-social-grid-compact {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .glass-social-item-refined {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 8px !important;
        border-radius: 12px !important;
        min-height: 70px !important;
        gap: 6px !important;
        text-decoration: none !important;
        transition: transform 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .glass-social-item-refined i {
        font-size: 22px !important;
        line-height: 1 !important;
    }
    
    .glass-social-item-refined span {
        font-size: 11px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    
    .glass-social-item-refined.unavailable {
        opacity: 0.4 !important;
        pointer-events: none !important;
    }
    
    .glass-social-item-refined:active:not(.unavailable) {
        transform: scale(0.95) !important;
    }
}

/* ============================================
   RELATED BUSINESSES - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    /* HIGH SPECIFICITY: Override any left-alignment rules for similar businesses */
    html body .glass-card-wrapper.wide-card.position-center,
    html body .glass-card-wrapper.wide-card.position-center .glass-card-top,
    html body .glass-card-wrapper.wide-card.position-center .glass-card-content,
    html body .glass-card-wrapper.wide-card .glass-card-content,
    body .glass-card-wrapper.wide-card.position-center,
    body .glass-card-wrapper.wide-card.position-center .glass-card-top,
    body .glass-card-wrapper.wide-card.position-center .glass-card-content,
    .glass-card-wrapper.wide-card.position-center,
    .glass-card-wrapper.wide-card.position-center .glass-card-top,
    .glass-card-wrapper.wide-card.position-center .glass-card-content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .glass-related-grid-single-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        align-items: center !important;
    }
    
    html body .glass-related-item,
    body .glass-related-item,
    .glass-related-item {
        padding: 14px !important;
        border-radius: 12px !important;
        background: rgba(0,0,0,0.02) !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        text-align: center !important; /* Center all content */
    }
    
    html body .glass-related-header,
    body .glass-related-header,
    .glass-related-header {
        margin-bottom: 10px !important;
        text-align: center !important; /* Center header content */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Center items horizontally */
        justify-content: center !important;
    }
    
    html body .glass-related-business-name,
    body .glass-related-business-name,
    .glass-related-business-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.3 !important;
        text-align: center !important; /* Center business name */
        width: 100% !important;
    }
    
    html body .glass-related-business-name a,
    html body .glass-business-link,
    body .glass-related-business-name a,
    body .glass-business-link,
    .glass-related-business-name a,
    .glass-business-link {
        text-decoration: none !important;
        text-align: center !important; /* Center link text */
        display: block !important; /* Make link block-level for centering */
        margin: 0 auto !important;
    }
    
    html body .glass-related-rating,
    body .glass-related-rating,
    .glass-related-rating {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Center rating horizontally */
        gap: 6px !important;
        font-size: 13px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .glass-related-rating .glass-stars {
        padding: 2px 6px !important;
    }
    
    .glass-related-rating .glass-star {
        font-size: 13px !important;
    }
    
    .glass-related-info {
        margin-bottom: 10px !important;
    }
    
    html body .glass-related-category,
    body .glass-related-category,
    .glass-related-category {
        font-size: 13px !important;
        margin-bottom: 6px !important;
        opacity: 0.85 !important;
        text-align: center !important; /* Center category */
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    html body .glass-related-address,
    body .glass-related-address,
    .glass-related-address {
        font-size: 13px !important;
        display: flex !important;
        align-items: center !important; /* Center vertically */
        justify-content: center !important; /* Center horizontally */
        gap: 6px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
        text-align: center !important; /* Center address text */
        flex-wrap: wrap !important; /* Allow wrapping for long addresses */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .glass-related-address i {
        font-size: 12px !important;
        margin-top: 0 !important; /* Remove top margin for better centering */
        flex-shrink: 0 !important;
    }
    
    /* Related Actions - Touch Friendly */
    html body .glass-related-actions,
    body .glass-related-actions,
    .glass-related-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Center action buttons */
        gap: 10px !important;
        margin-bottom: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .glass-quick-action-btn-large {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        font-size: 18px !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .glass-quick-action-btn-large:active {
        transform: scale(0.92) !important;
    }
    
    /* Related Status Row */
    html body .glass-related-status-row,
    body .glass-related-status-row,
    .glass-related-status-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Center status badges */
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .glass-related-status-row .glass-status-badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    
    /* View Details Button */
    html body .glass-related-action,
    body .glass-related-action,
    .glass-related-action {
        margin-top: 10px !important;
        text-align: center !important; /* Center view details button */
        display: flex !important;
        justify-content: center !important; /* Center button container */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .glass-view-btn-small {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .glass-view-btn-small:active {
        transform: scale(0.98) !important;
    }
    
    .glass-view-btn-small i {
        font-size: 14px !important;
    }
}

/* ============================================
   AD BANNERS - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    .glass-ad-banner,
    .glass-ad-card {
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    .glass-ad-placeholder {
        padding: 16px !important;
        min-height: 100px !important;
    }
    
    .glass-ad-content {
        text-align: center !important;
    }
    
    .glass-ad-content h3 {
        font-size: 16px !important;
        margin: 8px 0 !important;
    }
    
    .glass-ad-content p {
        font-size: 13px !important;
        margin: 0 0 12px 0 !important;
    }
    
    .glass-ad-link {
        display: inline-block !important;
        padding: 10px 20px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    
    .glass-ad-icon {
        font-size: 28px !important;
    }
}

/* ============================================
   CUSTOMER REVIEWS - Mobile Optimized
   ============================================ */

@media (max-width: 768px) {
    .glass-reviews-section {
        padding: 0 !important;
    }
    
    .glass-reviews-header {
        margin-bottom: 14px !important;
    }
    
    .glass-reviews-summary {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 14px !important;
        background: rgba(0,0,0,0.02) !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }
    
    .glass-reviews-average {
        font-size: 32px !important;
        font-weight: 700 !important;
    }
    
    .glass-reviews-breakdown {
        flex: 1 !important;
    }
    
    /* Individual Review Card */
    .glass-review-card,
    .glass-review {
        padding: 14px !important;
        margin-bottom: 12px !important;
        background: rgba(0,0,0,0.02) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(0,0,0,0.04) !important;
    }
    
    .glass-review-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 10px !important;
    }
    
    .glass-reviewer-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }
    
    .glass-reviewer-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
    }
    
    .glass-review-date {
        font-size: 12px !important;
        opacity: 0.7 !important;
    }
    
    .glass-review-rating {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        margin-bottom: 10px !important;
    }
    
    .glass-review-rating .glass-star {
        font-size: 14px !important;
    }
    
    .glass-review-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* Write Review Button */
    .glass-write-review-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 14px 20px !important;
        margin: 14px 0 0 0 !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
}

/* ============================================
   SMALL MOBILE DEVICES (≤480px)
   ============================================ */

@media (max-width: 480px) {
    /* Reduce padding on very small screens */
    .glass-main-card {
        padding: 0 8px !important;
    }
    
    .glass-card-content {
        padding: 14px 12px !important;
    }
    
    /* Business Name - Slightly Smaller */
    .glass-business-name,
    .glass-business-name h1 {
        font-size: 20px !important;
    }
    
    /* Action Buttons - Still 2x2 but smaller */
    .glass-action-btn {
        min-height: 64px !important;
        padding: 12px 8px !important;
    }
    
    .glass-action-btn i {
        font-size: 18px !important;
    }
    
    .glass-action-btn span {
        font-size: 11px !important;
    }
    
    /* Social Grid - 3 columns still works */
    .glass-social-grid-compact {
        gap: 8px !important;
    }
    
    .glass-social-item-refined {
        padding: 10px 6px !important;
        min-height: 60px !important;
    }
    
    .glass-social-item-refined i {
        font-size: 20px !important;
    }
    
    .glass-social-item-refined span {
        font-size: 10px !important;
    }
    
    /* Featured Image - Shorter */
    .glass-featured-image {
        height: 180px !important;
    }
    
    .mapillary-progressive-container {
        height: 180px !important;
        min-height: 160px !important;
    }
    
    /* Interactive view on very small screens - still need good height */
    .mapillary-progressive-container.mapillary-interactive-active {
        min-height: 350px !important;
        height: 400px !important;
    }
    
    /* Smaller Play Button on Very Small Screens */
    .mapillary-play-button {
        width: 48px !important;
        height: 48px !important;
    }
    
    .mapillary-play-button i {
        font-size: 20px !important;
    }
    
    /* Smaller Overlay Text */
    .mapillary-click-overlay p:first-of-type {
        font-size: 13px !important;
        margin-top: 6px !important;
    }
    
    .mapillary-click-overlay p:last-of-type {
        font-size: 11px !important;
        margin-top: 3px !important;
    }
    
    /* Smaller Business Name Overlay */
    .glass-mapillary-overlay {
        min-height: 55px !important;
        max-height: 70px !important;
        padding: 8px 10px !important;
    }
    
    .glass-overlay-title {
        font-size: 13px !important;
    }
    
    .glass-overlay-location {
        font-size: 11px !important;
    }
    
    /* Map - Shorter */
    .glass-map-container,
    #tkd-map {
        height: 180px !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Reduce animation duration for snappier feel */
    .glass-card-wrapper,
    .glass-action-btn,
    .glass-social-item-refined,
    .glass-view-btn-small {
        transition-duration: 0.15s !important;
    }
    
    /* Optimize images */
    body.tkd-active img {
        image-rendering: -webkit-optimize-contrast;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Hardware acceleration for animations */
    .glass-action-btn:active,
    .glass-social-item-refined:active {
        will-change: transform !important;
    }
}

/* ============================================
   TOUCH OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure all interactive elements are touch-friendly (44px minimum) */
    body.tkd-active a, 
    body.tkd-active button, 
    .glass-action-btn,
    .glass-social-item-refined,
    .glass-quick-action-btn-large,
    .glass-view-btn-small,
    .glass-status-badge.hours-clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Prevent text selection on buttons */
    .glass-action-btn,
    .glass-social-item-refined,
    .glass-quick-action-btn-large {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   ============================================ */

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (max-width: 768px) and (prefers-contrast: high) {
    .glass-card-top {
        border: 2px solid currentColor !important;
    }
    
    .glass-action-btn,
    .glass-social-item-refined {
        border: 2px solid currentColor !important;
    }
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .glass-card-top {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }

    .glass-related-item,
    .glass-review-card {
        background: rgba(255,255,255,0.03) !important;
        border-color: rgba(255,255,255,0.08) !important;
    }
}

/* ====================================================================
   MOBILE LISTING PAGE FIXES
   Targets the eight regressions on the single business listing page
   at ≤768px. Placed at the end of the file so it wins the cascade
   against the earlier blocks without rewriting them in place.
   ==================================================================== */

@media (max-width: 768px) {

    /* --- Fix 1: Skip-to-main-content link — visually hidden on mobile,
       restored on focus so screen-reader / keyboard users still get it. */
    .tkd-skip-link {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        top: auto !important;
        left: auto !important;
    }
    .tkd-skip-link:focus,
    .tkd-skip-link:focus-visible {
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        clip: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        max-width: calc(100% - 16px) !important;
        border-radius: 6px !important;
    }

    /* --- Fix 2: Stars + rating number + "(N reviews)" must stay on one line.
       Specificity matched to the earlier `.glass-card-wrapper.main-card
       .glass-card-content .glass-rating-section` block in this file
       (lines ~277-373) so the cascade winner is this later rule. */
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section,
    body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section,
    .glass-card-wrapper.main-card .glass-card-content .glass-rating-section,
    .glass-card-wrapper.main-card .glass-rating-section,
    .glass-rating-section {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-rating-number,
    body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-rating-number,
    .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-rating-number,
    .glass-card-wrapper.main-card .glass-rating-section .glass-rating-number,
    .glass-rating-section .glass-rating-number,
    .glass-rating-number {
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-review-wrapper,
    body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-review-wrapper,
    .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-review-wrapper,
    .glass-card-wrapper.main-card .glass-rating-section .glass-review-wrapper,
    .glass-rating-section .glass-review-wrapper,
    .glass-review-wrapper {
        font-size: 12px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-reviews-link,
    body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-reviews-link,
    .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-reviews-link,
    .glass-card-wrapper.main-card .glass-rating-section .glass-reviews-link,
    .glass-rating-section .glass-reviews-link,
    .glass-reviews-link {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-star,
    .glass-card-wrapper.main-card .glass-rating-section .glass-star,
    .glass-rating-section .glass-star,
    .glass-star {
        font-size: 13px !important;
    }

    /* --- Fix 3: CLOSED status pill + CLAIM THIS LISTING share one row.
       NB: turnkeydir-listing-template.css:2787 sets `.glass-status-badges {
       flex-direction: column }` inside its own @media (max-width: 768px)
       block, and that file loads AFTER this one (it depends on
       turnkeydir-typography-unified which depends on this file). Without
       !important the column override wins and the buttons stack — so we
       force `flex-direction: row !important` here. */
    html body .glass-status-badges,
    body .glass-status-badges,
    .glass-status-badges {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
    }
    .glass-status-badges .glass-status-badge {
        padding: 6px 10px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        border-radius: 14px !important;
        min-height: 32px !important;
        min-width: 0 !important;
        /* 0 1 auto, NOT 1 1 0: badges must size to their content. With
           flex-grow, a lone hours badge (Free has no claim button in the
           row) stretched to the full card width while its drawer stayed
           240-320px. Badges still share one row and shrink when tight. */
        flex: 0 1 auto !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .glass-status-badges .glass-status-badge i,
    .glass-status-badges .glass-status-badge .fas {
        font-size: 9px !important;
        margin-right: 2px !important;
    }
    .glass-status-badges .glass-dropdown-arrow {
        font-size: 9px !important;
        margin-left: 3px !important;
    }
    /* Hours container should also flex inside the row (content-sized). */
    .glass-status-badges .glass-hours-container {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        position: relative !important;
    }
    .glass-status-badges .glass-hours-container .glass-status-badge {
        /* width:100% here UNDID the content-sizing above: the toggle
           filled the hours container, the container then grew to the
           full row, and the badge rendered image-wide while its
           dropdown stayed ~280px (§14 A2/A3 "open/close button as
           wide as the featured image"). The badge must size to its
           own label; the dropdown anchors to the container's
           position:relative regardless of badge width. */
        width: auto !important;
    }

    /* --- Fix 4: Featured image must fit inside its card, no right-edge cut. */
    .glass-featured-image-container,
    .glass-featured-image,
    .mapillary-progressive-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .glass-featured-image img,
    .glass-featured-image .mapillary-thumbnail,
    .glass-featured-image .mapillary-preview-thumb,
    .mapillary-progressive-container img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }
    .mapillary-progressive-container {
        display: block !important;
    }

    /* --- Fix 5: About-this-business text stays inside the card.
       Note: we deliberately do NOT set overflow:hidden on
       .glass-card-content here because the hours-toggle dropdown is
       position:absolute and must escape downward. The overflow-wrap
       on the text alone is enough to keep it inside. */
    .glass-about-text,
    .glass-about-text p,
    .glass-text-preview,
    .glass-text-full {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }
    .glass-about-text p,
    .glass-text-preview,
    .glass-text-full {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* --- Fix 6: Business Hours — uniform rows, aligned separators,
       today's highlight stays inside the column. */
    .glass-hours-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }
    .glass-hours-item,
    .glass-hours-item.today {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        border-radius: 6px !important;
        background: transparent !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }
    .glass-hours-item.today {
        background: rgba(59, 130, 246, 0.08) !important;
    }
    .glass-hours-item:last-child {
        border-bottom: none !important;
    }
    .glass-hours-item .glass-day,
    .glass-day {
        font-size: 13px !important;
        font-weight: 600 !important;
        min-width: 80px !important;
    }
    .glass-hours-item .glass-hours-time,
    .glass-hours-time {
        font-size: 13px !important;
        text-align: right !important;
    }

    /* --- Fix 8 (CSS portion): the side-ad sidebars are no longer rendered
       on mobile (wp_is_mobile() gate in single-listing.php). Adjust the
       parent container padding so the now-single-column layout sits well. */
    .glass-business-container {
        padding: 14px 12px 24px 12px !important;
        gap: 0 !important;
    }
    .glass-main-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        order: 1 !important;
    }
}

/* Very small phones — additional shrink on the tightest elements. */
@media (max-width: 480px) {
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-rating-number,
    .glass-card-wrapper.main-card .glass-rating-section .glass-rating-number,
    .glass-rating-section .glass-rating-number,
    .glass-rating-number {
        font-size: 12px !important;
    }
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-review-wrapper,
    .glass-card-wrapper.main-card .glass-rating-section .glass-review-wrapper,
    .glass-rating-section .glass-review-wrapper,
    .glass-review-wrapper,
    html body .glass-card-wrapper.main-card .glass-card-content .glass-rating-section .glass-reviews-link,
    .glass-card-wrapper.main-card .glass-rating-section .glass-reviews-link,
    .glass-rating-section .glass-reviews-link,
    .glass-reviews-link {
        font-size: 11px !important;
    }
    .glass-status-badges .glass-status-badge {
        padding: 5px 8px !important;
        font-size: 9px !important;
    }
    .glass-hours-item,
    .glass-hours-item.today,
    .glass-hours-item .glass-day,
    .glass-day,
    .glass-hours-item .glass-hours-time,
    .glass-hours-time {
        font-size: 12px !important;
    }
    .glass-hours-item,
    .glass-hours-item.today {
        padding: 7px 8px !important;
    }
}

/* ============================================
   v2.15.4 — LISTING CARD MOBILE CLEANUP (universal)
   ============================================
   Fixes for the full listing card (used on single-listing pages AND
   as embedded featured-business cards on city/state/country/niche
   directory pages):
     A) (retired) the mobile filter FAB hide — the FAB was removed from
        the plugin entirely (Phase 7 R2), so the defensive rule is gone.
     B) Quick Action buttons render with white-on-white icons on certain
        theme/builder combinations (Twenty Twenty-Five FSE for sure).
        Replaces v2.15.2's body-class-scoped rules with universal
        selectors of higher specificity (html body ...) so they apply
        regardless of which body classes were emitted for the page type.
     C) duplicate "Street View" pill below the Mapillary thumbnail —
        the badge inside .glass-image-controls > .glass-image-info is
        a static label that duplicates the click overlay's affordance.
     D) tighter spacing around the contact / quick actions area to
        eliminate the large white gaps users report on mobile. */
@media (max-width: 768px) {

    /* (B) Quick Action button colored backgrounds — universal selectors,
       no body-class scope. Higher specificity (html body ...) than the
       v2.15.2 body.tkd-city-page rules and any theme's defaults. */
    html body a.glass-action-btn.call-btn,
    html body a.glass-action-btn.call-btn.active,
    html body .glass-action-btn.call-btn.active {
        background: #22c55e !important;
        border-color: #22c55e !important;
        color: #fff !important;
    }
    html body a.glass-action-btn.website-btn,
    html body a.glass-action-btn.website-btn.active,
    html body .glass-action-btn.website-btn.active {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #fff !important;
    }
    html body a.glass-action-btn.directions-btn,
    html body a.glass-action-btn.directions-btn.active,
    html body .glass-action-btn.directions-btn.active {
        background: var(--tkd-accent-color, #00c746) !important;
        border-color: var(--tkd-accent-color, #00c746) !important;
        color: #fff !important;
    }
    html body a.glass-action-btn.book-btn:not(.disabled),
    html body .glass-action-btn.book-btn.active {
        background: var(--tkd-accent-color, #00c746) !important;
        border-color: var(--tkd-accent-color, #00c746) !important;
        color: #fff !important;
    }
    /* Force icon AND text color white on all active buttons so they
       contrast against the colored background regardless of inline
       style or per-icon color. */
    html body a.glass-action-btn.call-btn i,
    html body a.glass-action-btn.call-btn span,
    html body a.glass-action-btn.website-btn i,
    html body a.glass-action-btn.website-btn span,
    html body a.glass-action-btn.directions-btn i,
    html body a.glass-action-btn.directions-btn span,
    html body a.glass-action-btn.book-btn:not(.disabled) i,
    html body a.glass-action-btn.book-btn:not(.disabled) span,
    html body .glass-action-btn.active i,
    html body .glass-action-btn.active span {
        color: #fff !important;
    }
    /* Disabled state — gray bg, dark-gray text, clearly readable. */
    html body .glass-action-btn.disabled {
        background: rgba(200, 200, 200, 0.25) !important;
        border-color: rgba(150, 150, 150, 0.3) !important;
        color: #6b7280 !important;
    }
    html body .glass-action-btn.disabled i,
    html body .glass-action-btn.disabled span {
        color: #6b7280 !important;
    }

    /* (C) Hide the redundant Street View info pill below the featured
       image. The static label "Street View" inside .glass-image-info
       duplicates the click-overlay affordance on the image itself. */
    html body .glass-image-controls .glass-image-info,
    html body .glass-image-controls .glass-streetview-btn {
        display: none !important;
    }
    /* If .glass-image-controls ends up empty after hiding its child,
       collapse its margin so we don't leave a hollow gap. */
    html body .glass-image-controls:empty {
        display: none !important;
    }

    /* (D) Tighten white space around the listing card sections on
       mobile. The previous spacing assumed desktop card padding which
       reads as too airy on a 384px viewport. */
    html body .glass-card-content > .glass-business-header,
    html body .glass-card-content > .glass-rating-section,
    html body .glass-card-content > .glass-status-badges {
        margin-bottom: 10px !important;
    }
    html body .glass-featured-image-container {
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }
    html body .glass-contact-grid,
    html body .glass-contact-info {
        margin: 8px 0 !important;
        gap: 8px !important;
    }
    html body .glass-action-section,
    html body .glass-quick-actions {
        margin-top: 14px !important;
    }
    html body .glass-action-grid {
        gap: 10px !important;
    }
    /* Trim trailing empty bottom space before the next section. */
    html body .glass-main-card > section,
    html body .glass-main-card > .glass-card-wrapper {
        margin-bottom: 14px !important;
    }
}

/* ============================================
   v2.15.14 — NUCLEAR FORCE-WHITE ON MOBILE ACTION BUTTONS
   ============================================
   The earlier v2.15.4 rules (`html body a.glass-action-btn.directions-btn
   i { color: #fff }`, specificity 0,0,2,4) should have been winning over
   turnkeydir-brand-unification.css's outline rules (0,0,2,3), but empirically
   the Directions and Call buttons still showed accent-green icons/text
   on accent-green backgrounds (effectively invisible). LiteSpeed's CSS
   optimization is suspected to be reordering rules so the cascade falls
   to "later wins". This block uses a substantially higher-specificity
   selector (0,0,4,4 — adds `.glass-section-content .glass-action-grid`
   ancestors) so no plausible competing rule can outrank it. Mobile-only;
   desktop's outline style (now scoped to min-width: 769px in v2.15.13)
   is untouched. */
@media (max-width: 768px) {
    html body .glass-section-content .glass-action-grid a.glass-action-btn:not(.disabled),
    html body .glass-section-content .glass-action-grid a.glass-action-btn:not(.disabled) i,
    html body .glass-section-content .glass-action-grid a.glass-action-btn:not(.disabled) span,
    html body .glass-section-content .glass-action-grid a.glass-action-btn.active,
    html body .glass-section-content .glass-action-grid a.glass-action-btn.active i,
    html body .glass-section-content .glass-action-grid a.glass-action-btn.active span {
        color: #fff !important;
    }
}