/**
 * TurnkeyDir City Pages - Mobile Optimization
 * 
 * Comprehensive mobile-first responsive design for city directory pages
 * Optimizes layout, touch targets, and user experience on mobile devices
 * Based on country and state mobile optimization patterns
 */

/* ============================================
   CRITICAL MOBILE LAYOUT FIXES
   ============================================ */

/* Mobile: 320px - 768px */
@media (max-width: 768px) {
    /* === CONTAINER & LAYOUT === */
    .tkd-city-page,
    .tkd-city-directory-container {
        padding: 1rem 0 !important;
        overflow-x: hidden;
    }

    /* === GLOBAL ICON ALIGNMENT === */
    .tkd-section-title i,
    .tkd-social-title i,
    .tkd-city-header h1 i,
    .tkd-stat-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
    }

    /* === CONTAINER OPTIMIZATION === */
    .glass-business-container {
        padding: 1rem 0.75rem !important; /* REDUCED: Less padding on mobile */
        min-height: auto !important;
    }

    .glass-main-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 0.75rem !important; /* REDUCED: Less padding */
        gap: 1rem !important; /* REDUCED: Tighter spacing */
        border-radius: 12px !important;
    }

    /* === BREADCRUMB - Mobile Optimized === */
    .tkd-breadcrumb {
        padding: 0.625rem 0.875rem !important; /* REDUCED: More compact */
        margin: 0 auto 1.25rem auto !important; /* REDUCED: Less bottom margin */
        font-size: 0.8rem !important; /* REDUCED: Smaller text */
        max-width: calc(100% - 1.5rem) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .tkd-breadcrumb ol {
        gap: 0.4rem !important; /* REDUCED: Tighter gap */
        font-size: 0.8rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .tkd-breadcrumb a,
    .tkd-breadcrumb span {
        font-size: 0.8rem !important;
    }

    .tkd-breadcrumb li {
        white-space: nowrap !important;
    }

    .tkd-breadcrumb .separator {
        margin: 0 0.35rem !important;
    }

    /* === HERO HEADER - Mobile Optimized === */
    .tkd-hero-header,
    .tkd-city-header {
        padding: 1.5rem 0.75rem !important; /* REDUCED: Less padding */
        margin: 0 auto 1.5rem auto !important; /* REDUCED: Less margin */
        text-align: center !important;
        border-radius: 12px !important;
    }

    .tkd-hero-header h1,
    .tkd-city-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important; /* RESPONSIVE: Scales with viewport */
        line-height: 1.2 !important;
        margin: 0 0 0.875rem 0 !important; /* REDUCED: Less margin */
        word-wrap: break-word !important;
        hyphens: auto !important;
        padding: 0 0.5rem !important; /* ADDED: Prevent edge touching */
    }

    .tkd-hero-subtitle,
    .tkd-hero-header p,
    .tkd-city-description {
        font-size: 0.9rem !important; /* REDUCED: Smaller subtitle */
        line-height: 1.5 !important;
        margin: 0 auto 1.5rem auto !important; /* REDUCED: Less margin */
        padding: 0 0.75rem !important; /* ADDED: Side padding */
        max-width: 100% !important;
        opacity: 0.85 !important;
    }

    /* === STATISTICS SECTION - Mobile Optimized === */
    .tkd-hero-header .tkd-hero-stats,
    .tkd-hero-stats,
    .tkd-city-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* TWO COLUMNS: Better for mobile */
        gap: 0.75rem !important; /* REDUCED: Tighter gap */
        margin: 1.5rem auto !important; /* REDUCED: Less margin */
        padding: 1rem 0.75rem !important; /* REDUCED: Less padding */
        border-radius: 12px !important;
        max-width: 100% !important;
    }

    .tkd-hero-header .tkd-hero-stats .tkd-stat-item,
    .tkd-hero-stats .tkd-stat-item,
    .tkd-city-stats .tkd-stat-item,
    .tkd-stat-item {
        padding: 0.875rem 0.625rem !important; /* REDUCED: More compact */
        min-width: auto !important;
        max-width: none !important;
        border-radius: 10px !important;
        display: flex !important;
        flex-direction: row !important; /* CHANGED: Horizontal layout for hero stats */
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        min-height: auto !important;
        overflow: visible !important;
        gap: 0.625rem !important; /* REDUCED: Tighter gap */
        flex: 0 0 auto !important;
    }

    /* 5th stat item - spans full width on mobile */
    .tkd-hero-header .tkd-hero-stats .tkd-stat-item:nth-child(5),
    .tkd-hero-stats .tkd-stat-item:nth-child(5) {
        grid-column: 1 / -1 !important; /* SPAN: Full width for 5th item */
        max-width: none !important;
        margin: 0 !important;
    }

    /* City stats keep column layout */
    .tkd-city-stats .tkd-stat-item {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .tkd-hero-stats .tkd-stat-icon,
    .tkd-stat-icon {
        font-size: 1.25rem !important; /* REDUCED: Smaller icon */
        margin: 0 !important;
        flex-shrink: 0 !important;
        display: block !important;
        width: auto !important;
    }

    .tkd-hero-stats .tkd-stat-text,
    .tkd-stat-text {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
        text-align: left !important; /* CHANGED: Left align for hero stats */
        display: flex !important;
        flex-direction: column !important;
        gap: 0.15rem !important;
        width: 100% !important;
        flex: 1 !important;
        min-width: 0 !important; /* ALLOW: Text to shrink */
    }

    .tkd-city-stats .tkd-stat-text {
        text-align: center !important; /* KEEP: Center for city stats */
    }

    .tkd-hero-stats .tkd-stat-number,
    .tkd-stat-text .tkd-stat-number,
    .tkd-stat-number {
        font-size: 1.1rem !important; /* REDUCED: Smaller number */
        margin: 0 0.25rem 0 0 !important; /* CHANGED: Right margin for inline */
        display: inline !important; /* CHANGED: Inline for horizontal layout */
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .tkd-hero-stats .tkd-stat-label,
    .tkd-hero-stats .tkd-stat-text > span:not(.tkd-stat-number),
    .tkd-stat-label {
        font-size: 0.7rem !important; /* REDUCED: Smaller label */
        line-height: 1.3 !important;
        opacity: 0.85 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-transform: none !important; /* REMOVED: No uppercase */
        letter-spacing: normal !important;
        max-width: 100%;
    }

    /* === SEARCH FILTER CARD - Mobile Optimized (Match Category Page Style) === */
    .tkd-search-card {
        padding: 1.25rem 0.875rem !important; /* REDUCED: Match category page */
        margin-bottom: 1.5rem !important; /* REDUCED: Less margin */
        border-radius: 12px !important; /* REDUCED: Smaller radius */
    }

    /* === SECTION HEADER === */
    .tkd-search-card .tkd-section-header {
        margin-bottom: 1rem !important; /* REDUCED: Less space */
    }

    .tkd-search-card .tkd-section-title {
        font-size: 1.1rem !important; /* REDUCED: Smaller title */
        margin-bottom: 0.375rem !important; /* REDUCED: Less margin */
        gap: 0.35rem !important;
    }

    .tkd-search-card .tkd-section-title i {
        font-size: 1rem !important; /* REDUCED: Smaller icon */
    }

    .tkd-search-card .tkd-section-subtitle {
        font-size: 0.8rem !important; /* REDUCED: Smaller subtitle */
        margin-bottom: 1rem !important; /* REDUCED: Less margin */
        padding: 0 0.25rem !important; /* ADDED: Side padding */
        line-height: 1.4 !important;
    }

    /* === QUICK FILTERS - Mobile Dropdown === */
    .tkd-quick-filters {
        margin-bottom: 1rem !important; /* REDUCED: Less margin */
    }

    .tkd-quick-filters-label {
        font-size: 0.75rem !important; /* REDUCED: Smaller label */
        margin-bottom: 0.5rem !important; /* REDUCED: Less margin */
        gap: 0.35rem !important;
        font-weight: 600 !important;
    }

    .tkd-quick-filters-label i {
        font-size: 0.7rem !important; /* REDUCED: Smaller icon */
    }

    /* Mobile Dropdown Toggle Button */
    .tkd-quick-filters-mobile-toggle {
        display: flex !important; /* SHOW: Mobile only */
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important; /* TOUCH-FRIENDLY: Good padding */
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.12) 0%, 
            rgba(0, 0, 0, 0.05) 100%) !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        border-radius: 10px !important;
        color: #333333 !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        margin-bottom: 0.5rem !important;
        min-height: 44px !important; /* TOUCH-FRIENDLY: Minimum touch target */
        box-sizing: border-box !important;
    }

    .tkd-quick-filters-mobile-toggle:hover {
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.18) 0%, 
            rgba(0, 0, 0, 0.08) 100%) !important;
        border-color: rgba(0, 0, 0, 0.25) !important;
    }

    .tkd-quick-filters-mobile-toggle i {
        font-size: 0.8rem !important;
        transition: transform 0.3s ease !important;
    }

    .tkd-quick-filters-mobile-toggle.active i {
        transform: rotate(180deg) !important;
    }

    /* Quick Filter Tags - Hidden on Mobile, Show as Dropdown */
    .tkd-quick-filter-tags {
        display: none !important; /* HIDDEN: Mobile default */
        flex-direction: column !important; /* STACK: Vertical when shown */
        gap: 0.5rem !important;
        padding: 0.75rem !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        border-radius: 10px !important;
        margin-top: 0.5rem !important;
        max-height: 0 !important; /* COLLAPSED: Default state */
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important; /* SMOOTH: Animation per Rule 3 */
    }

    /* Show dropdown when active */
    .tkd-quick-filters.active .tkd-quick-filter-tags {
        display: flex !important; /* SHOW: When active */
        max-height: 500px !important; /* EXPAND: Allow content */
        opacity: 1 !important;
        visibility: visible !important;
    }

    .tkd-quick-filter-tag {
        padding: 0.625rem 0.875rem !important; /* INCREASED: Better touch target */
        font-size: 0.8rem !important; /* INCREASED: More readable */
        border-radius: 8px !important;
        gap: 0.4rem !important;
        width: 100% !important; /* FULL WIDTH: Better for mobile */
        justify-content: flex-start !important;
        line-height: 1.3 !important;
        min-height: 44px !important; /* TOUCH-FRIENDLY: Minimum touch target */
        box-sizing: border-box !important;
    }

    .tkd-quick-filter-tag i {
        font-size: 0.75rem !important; /* INCREASED: More visible */
    }

    /* === SEARCH INPUT WRAPPER - Fix Width === */
    .tkd-search-input-wrapper {
        position: relative !important;
        width: 100% !important; /* ENSURE: Full width container */
        max-width: 100% !important; /* PREVENT: Overflow */
        box-sizing: border-box !important;
    }

    .tkd-search-input-wrapper input {
        width: 100% !important; /* FULL WIDTH: Fit container */
        max-width: 100% !important; /* PREVENT: Overflow */
        box-sizing: border-box !important; /* INCLUDE: Padding in width */
    }

    /* === ACTIVE FILTERS === */
    .tkd-active-filters {
        margin-bottom: 1rem !important; /* REDUCED: Less margin */
    }

    .tkd-active-filters-label {
        font-size: 0.75rem !important; /* REDUCED: Smaller */
        margin-bottom: 0.5rem !important; /* REDUCED: Less margin */
    }

    .tkd-filter-chip {
        padding: 0.35rem 0.625rem !important; /* REDUCED: More compact */
        font-size: 0.7rem !important; /* REDUCED: Smaller */
    }

    /* === FORM GRID === */
    .tkd-form-grid {
        grid-template-columns: 1fr !important; /* SINGLE COLUMN: Better for mobile */
        gap: 1rem !important; /* REDUCED: Tighter gap (match category page) */
        margin-bottom: 1.25rem !important; /* REDUCED: Less margin */
    }

    /* === FORM GROUPS === */
    .tkd-form-group {
        gap: 0.35rem !important; /* REDUCED: Tighter gap */
    }

    .tkd-form-group label {
        font-size: 0.75rem !important; /* REDUCED: Smaller label */
        gap: 0.35rem !important;
        font-weight: 600 !important;
    }

    .tkd-form-group label i {
        font-size: 0.7rem !important; /* REDUCED: Smaller icon */
    }

    .tkd-form-group input,
    .tkd-form-group select {
        padding: 0.75rem 0.875rem !important; /* REDUCED: Match category page */
        font-size: 16px !important; /* PREVENTS: iOS zoom on focus */
        border-radius: 10px !important; /* REDUCED: Smaller radius */
        min-height: 44px !important; /* TOUCH-FRIENDLY: Minimum touch target */
    }

    /* === SEARCH INPUT WRAPPER === */
    .tkd-search-input-wrapper {
        position: relative !important;
    }

    .tkd-search-input-wrapper input {
        padding-left: 2.5rem !important; /* REDUCED: Less left padding */
        padding-right: 2.5rem !important; /* ADDED: Right padding for clear icon */
    }

    .tkd-search-input-wrapper .search-icon {
        left: 0.875rem !important; /* ADJUSTED: Position */
        font-size: 0.9rem !important; /* REDUCED: Smaller icon */
    }

    .tkd-search-input-wrapper .clear-icon {
        right: 0.875rem !important; /* ADJUSTED: Position */
        font-size: 0.85rem !important; /* REDUCED: Smaller icon */
    }

    /* === SEARCH ACTIONS === */
    .tkd-search-actions {
        display: flex !important;
        flex-direction: column !important; /* STACK: Vertical on mobile */
        gap: 0.75rem !important; /* REDUCED: Match category page */
        margin-top: 1.25rem !important; /* REDUCED: Less margin */
    }

    .tkd-search-options {
        display: flex !important;
        flex-direction: column !important; /* STACK: Vertical */
        gap: 0.625rem !important; /* REDUCED: Tighter gap */
        width: 100% !important;
    }

    .tkd-checkbox-wrapper,
    .tkd-live-search-toggle {
        font-size: 0.8rem !important; /* REDUCED: Smaller */
        padding: 0.4rem 0 !important; /* REDUCED: Less padding */
    }

    .tkd-advanced-toggle {
        font-size: 0.8rem !important; /* REDUCED: Smaller */
        padding: 0.4rem 0 !important; /* REDUCED: Less padding */
    }

    .tkd-search-actions > div:last-child {
        display: flex !important;
        flex-direction: column !important; /* STACK: Buttons vertical */
        gap: 0.75rem !important; /* REDUCED: Match category page */
        width: 100% !important;
    }

    .tkd-clear-filters-btn,
    .tkd-search-btn {
        width: 100% !important; /* FULL WIDTH: Better for mobile */
        padding: 0.75rem 1.25rem !important; /* REDUCED: Match category page */
        font-size: 0.85rem !important; /* REDUCED: Smaller text */
        min-height: 44px !important; /* TOUCH-FRIENDLY: Minimum touch target */
        justify-content: center !important;
        border-radius: 10px !important;
    }

    /* === ADVANCED FILTERS === */
    .tkd-advanced-filters {
        margin-top: 1rem !important; /* REDUCED: Less margin */
        padding-top: 1rem !important; /* REDUCED: Less padding */
    }

    .tkd-advanced-grid {
        grid-template-columns: 1fr !important; /* SINGLE COLUMN */
        gap: 1rem !important; /* REDUCED: Tighter gap */
    }

    .tkd-range-group {
        gap: 0.4rem !important; /* REDUCED: Tighter gap */
    }

    .tkd-range-value {
        font-size: 0.8rem !important; /* REDUCED: Smaller */
    }

    /* === CONTROLS SECTION === */
    .tkd-city-controls {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem !important;
        margin: 0 8px 1.5rem 8px !important;
    }

    .tkd-search-bar {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
        min-width: auto !important;
    }

    .tkd-search-bar input {
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        flex: none !important;
    }

    .tkd-search-bar button {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        min-height: 48px !important;
    }

    .tkd-filter-controls {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .tkd-filter-controls select,
    .tkd-filter-controls button {
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 48px !important;
    }

    /* === SECTION TITLES === */
    .tkd-city-section {
        margin-bottom: 1.5rem !important;
        padding: 0 8px !important;
    }

    .tkd-section-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.875rem !important;
        padding-bottom: 0.5rem !important;
        display: inline-flex !important;
        gap: 0.4rem !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        width: auto !important;
    }

    .tkd-section-title i {
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    .tkd-section-title::after {
        width: 40px !important;
        height: 2px !important;
        bottom: 0 !important;
    }

    /* === TOP RATED GRID === */
    .tkd-top-rated-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* === BUSINESS GRID === */
    .tkd-businesses-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* === BUSINESS CARDS === */
    .tkd-business-card,
    .tkd-top-rated-card {
        margin-bottom: 10px !important;
        border-radius: 12px !important;
        padding: 0.875rem !important;
    }

    .tkd-card-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .tkd-business-image {
        width: 90px !important;
        height: 90px !important;
        margin: 0 auto !important;
    }

    .tkd-business-info {
        width: 100% !important;
    }

    .tkd-business-header {
        margin-bottom: 0.625rem !important;
    }

    .tkd-business-name {
        font-size: 1rem !important;
        text-align: center !important;
        margin: 0 0 0.5rem 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        line-height: 1.3 !important;
    }

    .tkd-business-name a {
        word-wrap: break-word;
        word-break: break-word;
    }

    .tkd-business-meta {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .tkd-business-rating,
    .tkd-rating-compact {
        margin-bottom: 0.375rem !important;
    }

    .tkd-stars {
        gap: 1px !important;
    }

    .tkd-star {
        font-size: 1em !important;
    }

    .tkd-rating-number {
        font-size: 0.95rem !important;
    }

    .tkd-review-count,
    .tkd-rating-text {
        font-size: 0.8rem !important;
    }

    /* === STATUS BADGES === */
    .tkd-status-sponsored,
    .tkd-status-verified,
    .tkd-status-claimed {
        padding: 4px 9px !important;
        font-size: 0.65rem !important;
        border-radius: 10px !important;
    }

    /* === BUSINESS DETAILS === */
    .tkd-business-details {
        text-align: center !important;
        margin-bottom: 0.875rem !important;
    }

    .tkd-business-address,
    .tkd-business-phone,
    .tkd-detail-item {
        justify-content: center !important;
        font-size: 0.8rem !important;
        margin-bottom: 0.375rem !important;
    }

    .tkd-detail-item i {
        font-size: 0.95rem !important;
    }

    .tkd-business-description {
        font-size: 0.8rem !important;
        margin-top: 0.625rem !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    /* === CARD ACTIONS === */
    .tkd-card-actions {
        flex-direction: column !important;
        gap: 0.625rem !important;
        margin-top: 0.875rem !important;
        padding-top: 0.875rem !important;
    }

    .tkd-btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.8rem !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tkd-btn-primary,
    .tkd-btn-secondary,
    .tkd-btn-call {
        padding: 0.75rem 1rem !important;
    }

    /* === DIRECTORY META === */
    .tkd-directory-meta {
        margin: 0 8px 1rem 8px !important;
        padding: 0.875rem 1rem !important;
        border-radius: 8px !important;
        font-size: 0.875rem !important;
    }

    .tkd-directory-meta p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    /* === PAGINATION === */
    .tkd-pagination {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin: 2rem 8px !important;
        padding: 0 0.5rem !important;
    }

    .tkd-page-link {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.875rem !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 6px !important;
    }

    .tkd-page-link.tkd-prev,
    .tkd-page-link.tkd-next {
        padding: 0.625rem 1rem !important;
    }

    .tkd-page-ellipsis {
        padding: 0.625rem 0.5rem !important;
    }

    /* === RELATED CITIES === */
    .tkd-related-cities,
    .tkd-related-cities-section {
        margin: 2rem 8px !important;
        padding: 1.5rem 1rem !important;
        border-radius: 12px !important;
    }

    .tkd-related-cities-container {
        padding: 0 !important;
    }

    .tkd-related-cities-grid {
        grid-template-columns: 1fr !important; /* SINGLE COLUMN: Better for mobile */
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .tkd-related-city-card {
        padding: 1rem !important; /* INCREASED: More padding for touch */
        border-radius: 12px !important;
        min-height: auto !important; /* REMOVED: Allow natural height */
        height: auto !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* LIGHTER: Less shadow on mobile */
    }

    .tkd-related-city-card:hover {
        transform: translateY(-2px) !important; /* REDUCED: Less movement on mobile */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    /* Card Header - Mobile */
    .tkd-city-card-header {
        margin-bottom: 0 !important;
        padding-bottom: 0.75rem !important; /* REDUCED: Less space on mobile */
    }

    .tkd-city-name {
        font-size: 1.05rem !important; /* REDUCED: Slightly smaller */
        margin: 0 0 0.3rem 0 !important;
        gap: 0.45rem !important;
        line-height: 1.25 !important;
    }

    .tkd-city-name i {
        font-size: 0.9rem !important;
        width: 15px !important;
    }

    .tkd-city-state {
        font-size: 0.8rem !important; /* REDUCED: Smaller on mobile */
        line-height: 1.3 !important;
    }

    /* Stats Section - Mobile */
    .tkd-city-stats {
        gap: 0.35rem !important; /* REDUCED: Tighter spacing */
        margin-bottom: 0.875rem !important; /* REDUCED: Less space before button */
        margin-top: 0.75rem !important; /* REDUCED: Less space after divider */
    }

    .tkd-city-stat {
        gap: 0.45rem !important; /* REDUCED: Tighter icon-text gap */
        font-size: 0.8rem !important; /* REDUCED: Smaller text */
        line-height: 1.35 !important;
    }

    .tkd-city-stat i {
        font-size: 0.8rem !important;
        width: 16px !important; /* REDUCED: Smaller icons */
    }

    /* Button - Touch-Friendly Mobile */
    .tkd-city-actions {
        margin-top: auto !important;
    }

    .tkd-city-explore-btn,
    .tkd-related-city-card .tkd-city-explore-btn {
        padding: 0.75rem 1rem !important; /* INCREASED: Larger touch target */
        font-size: 0.9rem !important; /* INCREASED: More readable */
        min-height: 44px !important; /* TOUCH-FRIENDLY: Minimum 44px for touch */
        border-radius: 10px !important;
        gap: 0.5rem !important;
    }

    .tkd-city-explore-btn i,
    .tkd-related-city-card .tkd-city-explore-btn i {
        font-size: 0.95rem !important; /* INCREASED: Larger icon */
    }

    .tkd-related-city-card h3 {
        font-size: 1.05rem !important;
        margin: 0 0 0.3rem 0 !important;
    }

    .tkd-related-city-card p {
        font-size: 0.8rem !important;
    }
}

/* ============================================
   EXTRA SMALL MOBILE: ≤480px
   ============================================ */

@media (max-width: 480px) {
    /* === ULTRA-COMPACT LAYOUT === */
    .glass-business-container {
        padding: 10px 5px !important;
    }

    .glass-main-card {
        padding: 12px 6px !important;
        gap: 12px !important;
        border-radius: 10px !important;
    }

    /* === BREADCRUMB === */
    .tkd-breadcrumb {
        padding: 0.625rem 0.875rem !important;
        margin: 0 6px 0.875rem 6px !important;
        font-size: 0.8rem !important;
    }

    .tkd-breadcrumb ol {
        gap: 0.35rem !important;
        font-size: 0.8rem !important;
    }

    .tkd-breadcrumb .separator {
        margin: 0 0.25rem !important;
    }

    /* === CITY HEADER === */
    .tkd-city-header {
        padding: 1.5rem 0.875rem !important;
        margin: 0 6px 1.25rem 6px !important;
    }

    .tkd-city-title {
        font-size: clamp(1.25rem, 5.5vw, 1.8rem) !important;
        margin: 0 0 0.75rem 0 !important;
    }

    .tkd-city-description {
        font-size: 0.875rem !important;
        margin: 0 0 1.25rem 0 !important;
        padding: 0 0.25rem;
    }

    /* === STATISTICS === */
    .tkd-city-stats {
        grid-template-columns: 1fr !important;
        gap: 0.625rem !important;
        margin-top: 1.25rem !important;
    }

    .tkd-stat-item {
        padding: 0.875rem 0.625rem !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
    }

    .tkd-stat-number {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
        margin-right: 0.5rem !important;
    }

    .tkd-stat-label {
        font-size: 0.7rem !important;
        text-align: right !important;
    }

    /* === SEARCH FILTER CARD === */
    .tkd-search-card {
        padding: 1rem 0.75rem !important; /* REDUCED: Even less padding */
        margin-bottom: 1.25rem !important; /* REDUCED: Less margin */
    }

    .tkd-search-card .tkd-section-title {
        font-size: 1rem !important; /* REDUCED: Smaller */
        margin-bottom: 0.25rem !important;
    }

    .tkd-search-card .tkd-section-subtitle {
        font-size: 0.75rem !important; /* REDUCED: Smaller */
        margin-bottom: 0.875rem !important; /* REDUCED: Less margin */
    }

    /* === QUICK FILTERS === */
    .tkd-quick-filters {
        margin-bottom: 0.875rem !important; /* REDUCED: Less margin */
    }

    .tkd-quick-filters-label {
        font-size: 0.7rem !important; /* REDUCED: Smaller */
        margin-bottom: 0.4rem !important;
    }

    .tkd-quick-filters-mobile-toggle {
        padding: 0.7rem 0.875rem !important; /* REDUCED: Slightly less */
        font-size: 0.8rem !important; /* REDUCED: Smaller */
        min-height: 42px !important; /* REDUCED: Slightly smaller but still touch-friendly */
    }

    .tkd-quick-filter-tags {
        gap: 0.4rem !important; /* REDUCED: Tighter gap */
        padding: 0.625rem !important; /* REDUCED: Less padding */
    }

    .tkd-quick-filter-tag {
        padding: 0.55rem 0.75rem !important; /* REDUCED: Slightly less */
        font-size: 0.75rem !important; /* REDUCED: Smaller */
        min-height: 42px !important; /* REDUCED: Slightly smaller but still touch-friendly */
    }

    /* === SEARCH INPUT WRAPPER - Fix Width === */
    .tkd-search-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tkd-search-input-wrapper input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* === FORM GRID === */
    .tkd-form-grid {
        gap: 0.875rem !important; /* REDUCED: Tighter gap */
        margin-bottom: 1rem !important; /* REDUCED: Less margin */
    }

    .tkd-form-group {
        gap: 0.3rem !important; /* REDUCED: Tighter gap */
    }

    .tkd-form-group label {
        font-size: 0.7rem !important; /* REDUCED: Smaller */
    }

    .tkd-form-group input,
    .tkd-form-group select {
        padding: 0.7rem 0.75rem !important; /* REDUCED: Slightly less */
        font-size: 16px !important; /* KEEP: Prevents iOS zoom */
        min-height: 42px !important; /* REDUCED: Slightly smaller but still touch-friendly */
    }

    .tkd-search-input-wrapper input {
        padding-left: 2rem !important; /* REDUCED: Less padding */
        padding-right: 2rem !important;
    }

    .tkd-search-input-wrapper .search-icon {
        left: 0.625rem !important; /* ADJUSTED: Position */
        font-size: 0.85rem !important; /* REDUCED: Smaller */
    }

    .tkd-search-input-wrapper .clear-icon {
        right: 0.625rem !important; /* ADJUSTED: Position */
        font-size: 0.8rem !important; /* REDUCED: Smaller */
    }

    /* === SEARCH ACTIONS === */
    .tkd-search-actions {
        gap: 0.625rem !important; /* REDUCED: Tighter gap */
        margin-top: 1rem !important; /* REDUCED: Less margin */
    }

    .tkd-search-options {
        gap: 0.5rem !important; /* REDUCED: Tighter gap */
    }

    .tkd-checkbox-wrapper,
    .tkd-live-search-toggle,
    .tkd-advanced-toggle {
        font-size: 0.75rem !important; /* REDUCED: Smaller */
        padding: 0.35rem 0 !important; /* REDUCED: Less padding */
    }

    .tkd-search-actions > div:last-child {
        gap: 0.625rem !important; /* REDUCED: Tighter gap */
    }

    .tkd-clear-filters-btn,
    .tkd-search-btn {
        padding: 0.7rem 1rem !important; /* REDUCED: Slightly less */
        font-size: 0.8rem !important; /* REDUCED: Smaller */
        min-height: 42px !important; /* REDUCED: Slightly smaller but still touch-friendly */
    }

    /* === ADVANCED FILTERS === */
    .tkd-advanced-filters {
        margin-top: 0.875rem !important;
        padding-top: 0.875rem !important;
    }

    .tkd-advanced-grid {
        gap: 0.875rem !important; /* REDUCED: Tighter gap */
    }

    .tkd-range-value {
        font-size: 0.75rem !important; /* REDUCED: Smaller */
    }

    /* === CONTROLS === */
    .tkd-city-controls {
        padding: 0.875rem !important;
        margin: 0 6px 1.25rem 6px !important;
        gap: 0.875rem !important;
    }

    .tkd-search-bar {
        gap: 0.625rem !important;
    }

    .tkd-search-bar input {
        padding: 0.75rem 0.875rem !important;
        min-height: 42px !important;
    }

    .tkd-search-bar button {
        padding: 0.75rem 1.25rem !important;
        min-height: 42px !important;
    }

    .tkd-filter-controls select,
    .tkd-filter-controls button {
        padding: 0.75rem 0.875rem !important;
        min-height: 42px !important;
    }

    /* === SECTIONS === */
    .tkd-city-section {
        margin-bottom: 1.5rem !important;
        padding: 0 6px !important;
    }

    .tkd-section-title {
        font-size: 1.375rem !important;
        margin-bottom: 0.875rem !important;
        padding-bottom: 0.625rem !important;
        gap: 0.45rem !important;
    }

    .tkd-section-title i {
        font-size: 1.125rem !important;
    }

    /* === BUSINESS CARDS === */
    .tkd-business-card,
    .tkd-top-rated-card {
        padding: 0.875rem !important;
    }

    .tkd-card-header {
        gap: 0.875rem !important;
        margin-bottom: 0.875rem !important;
    }

    .tkd-business-image {
        width: 80px !important;
        height: 80px !important;
    }

    .tkd-business-name {
        font-size: 1rem !important;
        margin: 0 0 0.375rem 0 !important;
    }

    .tkd-star {
        font-size: 1em !important;
    }

    .tkd-rating-number {
        font-size: 0.95rem !important;
    }

    .tkd-review-count {
        font-size: 0.8rem !important;
    }

    .tkd-status-sponsored,
    .tkd-status-verified,
    .tkd-status-claimed {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
    }

    .tkd-detail-item {
        font-size: 0.8rem !important;
    }

    .tkd-business-description {
        font-size: 0.8rem !important;
    }

    .tkd-btn {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.8rem !important;
        min-height: 42px !important;
    }

    /* === PAGINATION === */
    .tkd-pagination {
        gap: 0.375rem !important;
        margin: 1.5rem 6px !important;
    }

    .tkd-page-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    /* === RELATED CITIES === */
    .tkd-related-cities,
    .tkd-related-cities-section {
        margin: 1.5rem 6px !important;
        padding: 1.25rem 0.875rem !important;
        border-radius: 12px !important;
    }

    .tkd-related-cities-grid {
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important; /* REDUCED: Tighter gap */
        margin: 1.25rem 0 !important;
    }

    .tkd-related-city-card {
        padding: 0.875rem !important; /* REDUCED: Slightly less padding */
        border-radius: 10px !important;
    }

    /* Card Header */
    .tkd-city-card-header {
        padding-bottom: 0.625rem !important; /* REDUCED: Less space */
    }

    .tkd-city-name {
        font-size: 1rem !important; /* REDUCED: Smaller font */
        margin: 0 0 0.25rem 0 !important;
        gap: 0.4rem !important;
    }

    .tkd-city-name i {
        font-size: 0.85rem !important;
        width: 14px !important;
    }

    .tkd-city-state {
        font-size: 0.75rem !important; /* REDUCED: Smaller state text */
        line-height: 1.3 !important;
    }

    /* Stats Section */
    .tkd-city-stats {
        gap: 0.3rem !important; /* REDUCED: Even tighter */
        margin-bottom: 0.75rem !important;
        margin-top: 0.625rem !important;
    }

    .tkd-city-stat {
        gap: 0.4rem !important;
        font-size: 0.75rem !important; /* REDUCED: Smaller text */
        line-height: 1.3 !important;
    }

    .tkd-city-stat i {
        font-size: 0.75rem !important;
        width: 15px !important;
    }

    /* Button - Extra Small Mobile */
    .tkd-city-explore-btn,
    .tkd-related-city-card .tkd-city-explore-btn {
        padding: 0.7rem 0.875rem !important; /* REDUCED: Slightly less padding */
        font-size: 0.85rem !important; /* REDUCED: Smaller text */
        min-height: 42px !important; /* REDUCED: Slightly smaller but still touch-friendly */
        gap: 0.45rem !important;
    }

    .tkd-city-explore-btn i,
    .tkd-related-city-card .tkd-city-explore-btn i {
        font-size: 0.9rem !important;
    }

    .tkd-related-city-card h3 {
        font-size: 1rem !important;
        margin: 0 0 0.25rem 0 !important;
    }

    .tkd-related-city-card p {
        font-size: 0.75rem !important;
    }

    /* === DIRECTORY META === */
    .tkd-directory-meta {
        padding: 0.75rem 0.875rem !important;
        margin: 0 6px 0.875rem 6px !important;
    }

    .tkd-directory-meta p {
        font-size: 0.8rem !important;
    }
}

/* ============================================
   TABLET OPTIMIZATIONS: 481px - 768px
   ============================================ */

@media (min-width: 481px) and (max-width: 768px) {
    /* Two-column grids for tablets */
    .tkd-city-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tkd-top-rated-grid {
        grid-template-columns: 1fr !important;
    }

    .tkd-businesses-grid {
        grid-template-columns: 1fr !important;
    }

    .tkd-related-cities-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   LARGE MOBILE/SMALL TABLET: 481px - 640px
   ============================================ */

@media (min-width: 481px) and (max-width: 640px) {
    .tkd-city-title {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
    }

    .tkd-section-title {
        font-size: 1.625rem !important;
    }

    .tkd-related-cities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

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

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .tkd-btn,
    .tkd-search-bar button,
    .tkd-filter-controls button,
    .tkd-page-link {
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
    }

    /* Remove hover effects, use active states */
    .tkd-business-card:hover,
    .tkd-top-rated-card:hover,
    .tkd-related-city-card:hover,
    .tkd-btn:hover,
    .tkd-page-link:hover {
        transform: none !important;
    }

    .tkd-business-card:active,
    .tkd-top-rated-card:active,
    .tkd-related-city-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* Ensure touch-friendly button for city cards */
    .tkd-city-explore-btn,
    .tkd-related-city-card .tkd-city-explore-btn {
        min-height: 48px !important; /* TOUCH-FRIENDLY: 48px minimum for touch */
    }

    .tkd-city-explore-btn:active,
    .tkd-related-city-card .tkd-city-explore-btn:active {
        transform: translateY(1px) !important;
        transition: transform 0.1s ease !important;
    }

    .tkd-btn:active,
    .tkd-page-link:active {
        transform: translateY(1px) !important;
        transition: transform 0.1s ease !important;
    }

    /* Disable touch callout */
    * {
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Enable tap highlight for interactive elements */
    body.tkd-active a, body.tkd-active button, .tkd-business-card, .tkd-related-city-card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

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

@media (max-width: 768px) {
    /* Reduce animations for better performance */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }

    /* Simplify shadows on mobile */
    .tkd-city-header,
    .tkd-city-controls,
    .tkd-business-card,
    .tkd-related-cities {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    }

    .tkd-business-card::before,
    .tkd-top-rated-card::before {
        display: none !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion for accessibility */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .tkd-business-card:active,
    .tkd-btn:active {
        transform: none !important;
    }
}

/* High contrast mode */
@media (max-width: 768px) and (prefers-contrast: high) {
    .tkd-business-card,
    .tkd-city-controls,
    .tkd-city-header {
        border: 2px solid #000 !important;
    }
}

/* Dark mode considerations */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .tkd-business-card,
    .tkd-city-controls {
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .tkd-city-header {
        padding: 1.25rem 1rem !important;
    }

    .tkd-city-description {
        margin: 0 0 1rem 0 !important;
    }

    .tkd-city-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
    }

    .tkd-stat-item {
        padding: 0.75rem 0.5rem !important;
    }

    .tkd-stat-number {
        font-size: 1.5rem !important;
    }

    .tkd-stat-label {
        font-size: 0.65rem !important;
    }

    .tkd-related-cities-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* TWO COLUMNS: Use horizontal space */
        gap: 1rem !important;
    }

    .tkd-related-city-card {
        min-height: 200px !important; /* REDUCED: Less height in landscape */
    }
}

/* ============================================
   VERY SMALL SCREENS: ≤360px
   ============================================ */

@media (max-width: 360px) {
    /* === CONTAINER === */
    .glass-business-container {
        padding: 0.625rem 0.375rem !important;
    }

    .glass-main-card {
        padding: 0.625rem 0.375rem !important;
    }

    /* === BREADCRUMB === */
    .tkd-breadcrumb {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.7rem !important;
    }

    /* === HERO HEADER === */
    .tkd-hero-header h1,
    .tkd-city-title {
        font-size: clamp(1.25rem, 7vw, 1.75rem) !important;
    }

    .tkd-hero-subtitle,
    .tkd-hero-header p,
    .tkd-city-description {
        font-size: 0.8rem !important;
    }

    /* === HERO STATS === */
    .tkd-hero-stats,
    .tkd-city-stats {
        gap: 0.5rem !important;
        padding: 0.75rem 0.375rem !important;
    }

    .tkd-hero-stats .tkd-stat-item,
    .tkd-city-stats .tkd-stat-item {
        padding: 0.625rem 0.375rem !important;
        gap: 0.4rem !important;
    }

    .tkd-hero-stats .tkd-stat-icon,
    .tkd-stat-icon {
        font-size: 1rem !important;
    }

    .tkd-hero-stats .tkd-stat-number,
    .tkd-stat-number {
        font-size: 0.95rem !important;
    }

    .tkd-hero-stats .tkd-stat-label,
    .tkd-hero-stats .tkd-stat-text > span:not(.tkd-stat-number),
    .tkd-stat-label {
        font-size: 0.6rem !important;
    }

    /* Allow text wrapping on very small screens if needed */
    .tkd-section-title {
        white-space: normal !important;
        text-align: left;
        word-wrap: break-word;
        font-size: 1.25rem !important;
    }

    .tkd-business-name {
        font-size: 0.95rem !important;
    }

    .tkd-btn {
        font-size: 0.725rem !important;
        padding: 0.625rem 0.75rem !important;
    }

    /* Very Small Screens - Related Cities */
    .tkd-related-cities,
    .tkd-related-cities-section {
        padding: 1.25rem 0.625rem !important;
    }

    .tkd-related-cities-grid {
        gap: 0.75rem !important;
    }

    .tkd-related-city-card {
        padding: 0.75rem !important;
    }

    .tkd-city-name {
        font-size: 0.95rem !important;
    }

    .tkd-city-state {
        font-size: 0.7rem !important;
    }

    .tkd-city-stat {
        font-size: 0.7rem !important;
    }

    .tkd-city-explore-btn,
    .tkd-related-city-card .tkd-city-explore-btn {
        font-size: 0.8rem !important;
        padding: 0.65rem 0.75rem !important;
        min-height: 40px !important; /* MINIMUM: Still touch-friendly */
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .tkd-city-controls,
    .tkd-pagination {
        display: none !important;
    }

    .tkd-business-card,
    .tkd-related-city-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tkd-city-header {
        background: #f8f9fa !important;
        color: #000 !important;
    }
}

/* ============================================
   v2.15.2 — CITY PAGE MOBILE FIXES
   ============================================
   Targeted fixes for issues reported on Astra/OceanWP/Twenty Twenty-Five
   mobile testing of the city page. Each block addresses one symptom:
     A) section titles cut off (text overflows viewport)
     B) Quick Filters tags hidden by default — make them visible
     C) Quick Actions buttons invisible (white icon on white background)
     D) owner-pill overlap with floating filter FAB
   Scoped to body.tkd-listing-page where appropriate so it doesn't leak. */

@media (max-width: 768px) {

    /* (A) Section titles like "Explore Roofing Contractor in Nearby Cities"
       were rendered with white-space:nowrap + text-transform:uppercase,
       making them wider than the viewport so the start and end got clipped
       by the screen edge. Allow wrapping + lower the font size + dial back
       uppercase styling. */
    body.tkd-city-page .tkd-section-title,
    body.tkd-city-template .tkd-section-title,
    .tkd-city-page .tkd-section-title,
    .tkd-related-cities-section .tkd-section-title,
    .tkd-social-sharing-section .tkd-section-title,
    .tkd-section-title {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        text-transform: none !important;
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* Section subtitle should also wrap nicely. */
    .tkd-section-subtitle {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* (B) Quick Filter tags — multiple stylesheets set them to
       display:none/max-height:0/visibility:hidden as a "collapsed by
       default on mobile" pattern, but the toggle button affordance isn't
       obvious. Show them by default so users can see and tap them. */
    body.tkd-city-page .tkd-quick-filter-tags,
    body.tkd-city-template .tkd-quick-filter-tags,
    .tkd-quick-filter-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0 !important;
        background: transparent !important;
        border: 0 !important;
        margin-top: 0.5rem !important;
    }

    .tkd-quick-filter-tag {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 999px !important;
        padding: 0.5rem 0.9rem !important;
        font-size: 0.85rem !important;
        color: #333 !important;
        min-height: 36px !important;
        line-height: 1.2 !important;
    }

    /* Hide the redundant "Select Quick Filters" toggle button — tags are
       now always visible so the toggle isn't needed. */
    .tkd-quick-filters-mobile-toggle {
        display: none !important;
    }

    /* (C) Quick Actions — active buttons were rendering with
       background:white + icon/text color:white = invisible. Force the
       brand-colored backgrounds the existing CSS intends, with high
       specificity. */
    body.tkd-city-page a.glass-action-btn.call-btn,
    body.tkd-city-page .glass-action-btn.call-btn.active,
    body.tkd-city-template a.glass-action-btn.call-btn,
    body.tkd-city-template .glass-action-btn.call-btn.active {
        background: #22c55e !important;
        border-color: #22c55e !important;
        color: #fff !important;
    }
    body.tkd-city-page a.glass-action-btn.website-btn,
    body.tkd-city-page .glass-action-btn.website-btn.active,
    body.tkd-city-template a.glass-action-btn.website-btn,
    body.tkd-city-template .glass-action-btn.website-btn.active {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #fff !important;
    }
    body.tkd-city-page a.glass-action-btn.directions-btn,
    body.tkd-city-page .glass-action-btn.directions-btn.active,
    body.tkd-city-template a.glass-action-btn.directions-btn,
    body.tkd-city-template .glass-action-btn.directions-btn.active {
        background: var(--tkd-accent-color, #00c746) !important;
        border-color: var(--tkd-accent-color, #00c746) !important;
        color: #fff !important;
    }
    body.tkd-city-page a.glass-action-btn.book-btn:not(.disabled),
    body.tkd-city-page .glass-action-btn.book-btn.active,
    body.tkd-city-template a.glass-action-btn.book-btn:not(.disabled),
    body.tkd-city-template .glass-action-btn.book-btn.active {
        background: var(--tkd-accent-color, #00c746) !important;
        border-color: var(--tkd-accent-color, #00c746) !important;
        color: #fff !important;
    }

    /* Disabled state — gray bg, gray icon, dark-enough to be visible. */
    body.tkd-city-page .glass-action-btn.disabled,
    body.tkd-city-template .glass-action-btn.disabled {
        background: rgba(200, 200, 200, 0.25) !important;
        border-color: rgba(150, 150, 150, 0.3) !important;
        color: #6b7280 !important;
    }
    body.tkd-city-page .glass-action-btn.disabled i,
    body.tkd-city-page .glass-action-btn.disabled span,
    body.tkd-city-template .glass-action-btn.disabled i,
    body.tkd-city-template .glass-action-btn.disabled span {
        color: #6b7280 !important;
    }
}

/* v2.15.5: removed the body:has(.tkd-mobile-filter-toggle) rule that
   previously shifted the owner-login pill up by 88px when the filter
   FAB existed. With v2.14.51 + v2.15.4 hiding the FAB on all pages,
   the pill no longer needs to make room for it — and :has() cannot
   distinguish between an element that's display:none vs visible, so
   the rule was incorrectly keeping the pill shifted up. The pill now
   sits at its original bottom: 18px / right: 18px position. */

/* ============================================
   v2.15.3 — SEARCH FILTER CARD MOBILE CLEANUP
   ============================================
   The search card has a JS-injected Map button (doesn't function), a
   "QUICK FILTERS" label that's purely decorative, an overlong search
   placeholder that gets truncated on narrow viewports, oversized native
   checkbox squares, and range sliders whose tracks feel too thick.
   This block consolidates the cleanup so the card reads as a single
   tidy mobile component. All changes are scoped to @media (max-width:
   768px) so desktop is untouched. */
@media (max-width: 768px) {

    /* (E) Map button hide moved OUT of the @media block — see below.
       Kept this comment as a breadcrumb so future readers know the
       original v2.15.3 home of this rule. */

    /* (F) Hide the "QUICK FILTERS" decorative label — the chip row
       below it is self-explanatory once visible (per v2.15.2). The
       redundant mobile dropdown toggle is already hidden in v2.15.2. */
    body.tkd-city-page .tkd-quick-filters-label,
    body.tkd-city-template .tkd-quick-filters-label,
    .tkd-search-card .tkd-quick-filters-label {
        display: none !important;
    }

    /* (G) Clear the search placeholder. The full text
       "Search by name, service, or specialty" gets truncated to
       "...or sp" on phones, which looks broken. Setting the placeholder
       transparent visually clears it while preserving the attribute
       (semantics + autocomplete still work). */
    body.tkd-city-page .tkd-search-card #search-input::placeholder,
    body.tkd-city-template .tkd-search-card #search-input::placeholder,
    body.tkd-city-page .tkd-search-card #search-input::-webkit-input-placeholder,
    body.tkd-city-template .tkd-search-card #search-input::-webkit-input-placeholder,
    body.tkd-city-page .tkd-search-card #search-input::-moz-placeholder,
    body.tkd-city-template .tkd-search-card #search-input::-moz-placeholder {
        color: transparent !important;
        opacity: 0 !important;
    }

    /* (H) Shrink the checkboxes ("Open Now Only" / "Live Search").
       Native browser default for <input type="checkbox"> can balloon
       up to 44px+ on Android when zoom and accent-color are involved.
       Force a reasonable mobile-tap size that still meets a11y
       guidelines (~20-22px is fine for touch). */
    body.tkd-city-page .tkd-search-card input[type="checkbox"],
    body.tkd-city-template .tkd-search-card input[type="checkbox"],
    .tkd-search-card input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 0 8px 0 0 !important;
        padding: 0 !important;
        flex: 0 0 20px !important;
        accent-color: var(--tkd-accent-color, #00c746) !important;
        cursor: pointer !important;
        vertical-align: middle !important;
    }

    /* Make sure checkbox labels sit neatly inline with the box. */
    body.tkd-city-page .tkd-search-card label:has(> input[type="checkbox"]),
    body.tkd-city-template .tkd-search-card label:has(> input[type="checkbox"]),
    .tkd-search-card label:has(> input[type="checkbox"]) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 0 !important;
        font-size: 0.95rem !important;
        cursor: pointer !important;
    }

    /* (I) Range sliders — make the TRACK a slim line (3px) with a
       distinctly visible thumb circle. Existing .tkd-range-slider is
       6px on desktop; halve it on mobile and beef up the thumb so the
       UI reads as "slider with a dot you drag", not "thick green bar". */
    body.tkd-city-page .tkd-search-card .tkd-range-slider,
    body.tkd-city-template .tkd-search-card .tkd-range-slider,
    .tkd-search-card .tkd-range-slider {
        height: 3px !important;
        background: rgba(0, 0, 0, 0.12) !important;
        border-radius: 999px !important;
        margin: 1rem 0 !important;
        padding: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    .tkd-search-card .tkd-range-slider::-webkit-slider-runnable-track {
        height: 3px !important;
        background: transparent !important;
    }
    .tkd-search-card .tkd-range-slider::-moz-range-track {
        height: 3px !important;
        background: transparent !important;
    }
    .tkd-search-card .tkd-range-slider::-webkit-slider-thumb {
        width: 20px !important;
        height: 20px !important;
        margin-top: -8.5px !important; /* center 20px thumb on 3px track */
        background: var(--tkd-accent-color, #00c746) !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
    }
    .tkd-search-card .tkd-range-slider::-moz-range-thumb {
        width: 20px !important;
        height: 20px !important;
        background: var(--tkd-accent-color, #00c746) !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        cursor: pointer !important;
    }

    /* (J) Tighter overall card spacing on mobile so the whole search
       block reads as one coherent unit. */
    body.tkd-city-page .tkd-search-card,
    body.tkd-city-template .tkd-search-card,
    .tkd-search-card {
        padding: 16px !important;
        gap: 12px !important;
    }
    .tkd-search-card .tkd-form-group {
        margin-bottom: 12px !important;
    }
    .tkd-search-card .tkd-form-group label {
        font-size: 0.78rem !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 6px !important;
    }
    .tkd-search-card #search-input,
    .tkd-search-card select,
    .tkd-search-card .tkd-form-group input[type="text"],
    .tkd-search-card .tkd-form-group input[type="search"] {
        font-size: 16px !important; /* 16px prevents iOS auto-zoom on focus */
        padding: 10px 12px !important;
    }
}

/* ============================================
   v2.15.5 — TOP-RATED CARD MOBILE CLEANUP
   ============================================
   The three "TOP RATED" business cards on the city page use a
   different action-button class (.tkd-action-button) than the regular
   listing cards (.glass-action-btn), so v2.15.4's universal Quick
   Action color rules don't apply. This block gives those buttons the
   same colored-bg + white-icon treatment, plus tightens overall card
   spacing so the cards feel like a coherent tile, not a sprawl. */
@media (max-width: 768px) {

    /* Tighter padding on the top-rated card itself + collapse extra
       inner gaps that make the card feel too tall. */
    html body .tkd-top-rated-card {
        padding: 16px 14px !important;
    }
    html body .tkd-top-rated-card h3 {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        min-height: 0 !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    html body .tkd-top-rated-card .tkd-rating-display {
        margin: 6px 0 !important;
    }
    html body .tkd-top-rated-card .tkd-business-info {
        margin: 8px 0 !important;
    }
    html body .tkd-top-rated-card .tkd-location-info,
    html body .tkd-top-rated-card .tkd-specialties-section,
    html body .tkd-top-rated-card .tkd-status-grid {
        margin: 6px 0 !important;
    }
    html body .tkd-top-rated-card .tkd-actions-section {
        margin-top: 12px !important;
        gap: 8px !important;
    }
    html body .tkd-top-rated-card .tkd-secondary-actions {
        gap: 8px !important;
        margin-top: 8px !important;
    }

    /* Primary "Call Now" action — wide button, colored background. */
    html body .tkd-top-rated-card .tkd-action-button.call-btn,
    html body .tkd-top-rated-card .tkd-action-button.primary-wide.call-btn {
        background: #22c55e !important;
        border-color: #22c55e !important;
        color: #fff !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 44px !important;
        text-decoration: none !important;
    }
    /* Disabled Call Now (no phone number). */
    html body .tkd-top-rated-card .tkd-action-button.call-btn.disabled,
    html body .tkd-top-rated-card .tkd-action-button.primary-wide.call-btn.disabled {
        background: rgba(200, 200, 200, 0.25) !important;
        border-color: rgba(150, 150, 150, 0.3) !important;
        color: #6b7280 !important;
        cursor: not-allowed !important;
    }

    /* Secondary actions row: Website / Directions / Book Service.
       Same treatment as Quick Actions on the listing card — each
       button gets its own brand color so the row reads at a glance. */
    html body .tkd-top-rated-card .tkd-action-button.secondary.website-btn,
    html body .tkd-top-rated-card .tkd-action-button.website-btn {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #fff !important;
    }
    html body .tkd-top-rated-card .tkd-action-button.secondary.directions-btn,
    html body .tkd-top-rated-card .tkd-action-button.directions-btn {
        background: var(--tkd-accent-color, #00c746) !important;
        border-color: var(--tkd-accent-color, #00c746) !important;
        color: #fff !important;
    }
    html body .tkd-top-rated-card .tkd-action-button.secondary.book-btn:not(.disabled),
    html body .tkd-top-rated-card .tkd-action-button.book-btn:not(.disabled) {
        background: var(--tkd-accent-color, #00c746) !important;
        border-color: var(--tkd-accent-color, #00c746) !important;
        color: #fff !important;
    }
    /* Disabled secondary action (Book Service when no booking URL). */
    html body .tkd-top-rated-card .tkd-action-button.secondary.disabled,
    html body .tkd-top-rated-card .tkd-action-button.disabled {
        background: rgba(200, 200, 200, 0.25) !important;
        border-color: rgba(150, 150, 150, 0.3) !important;
        color: #6b7280 !important;
        cursor: not-allowed !important;
    }
    /* Common styling: ensure icons + text are visible on the colored
       background regardless of inline color attribute. */
    html body .tkd-top-rated-card .tkd-action-button {
        padding: 9px 12px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-height: 44px !important;
        text-decoration: none !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    html body .tkd-top-rated-card .tkd-action-button:not(.disabled) i,
    html body .tkd-top-rated-card .tkd-action-button:not(.disabled) span {
        color: #fff !important;
    }
    html body .tkd-top-rated-card .tkd-action-button.disabled i,
    html body .tkd-top-rated-card .tkd-action-button.disabled span {
        color: #6b7280 !important;
    }
}

/* v2.15.6: hide the TurnkeyDir-rendered "Street View & Map" badge overlay
   that sits at top-left of the Mapillary iframe on city-page business
   cards (dynamic-city.php:2402). It's a static label that obscures the
   actual Mapillary content rather than adding information — per user
   feedback the iframe already makes it obvious it's street view. Hidden
   on every viewport (not limited to mobile) because the user wants it
   gone everywhere. */
.tkd-mapillary-split-badge {
    display: none !important;
}

/* v2.15.12: hide the JS-injected "Map" pill button. turnkeydir-map-integration.js
   inserts this into any .tkd-section-header it finds — which means it
   appears on the Popular Cities card of state pages, country pages,
   and city pages. It has no working handler in this build and the
   user wants it gone everywhere (every viewport, every page type).
   This supersedes the body.tkd-city-page-scoped v2.15.3 rule that
   only covered city pages and only on mobile. */
.tkd-map-toggle-container,
.tkd-map-quick-toggle,
.tkd-map-toggle-btn {
    display: none !important;
}