/**
 * DealerHub Vehicles Pro - Motors Theme (StyleMix) Compatibility
 * Fixes for dropdown, button, breadcrumb, and general style conflicts
 * 
 * This file contains aggressive CSS overrides to prevent Motors theme
 * from interfering with DealerHub functionality and styling.
 */

/* ========================================
   CRITICAL: FILTER & DROPDOWN FIXES
   ======================================== */

/* Override Motors theme select styling */
.dealerhub-vehicles-container .dh-filter-select,
.dealerhub-vehicles-container .dealerhub-filter,
.dealerhub-vehicle-detail .dh-filter-select,
.dealerhub-vehicle-detail .dealerhub-filter {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    padding-right: 36px !important;
    background-color: var(--dh-filter-field-bg, #ffffff) !important;
    border: 1px solid var(--dh-filter-field-border, #d1d5db) !important;
    border-radius: var(--dh-btn-radius, 8px) !important;
    font-size: var(--dh-font-size-base, 16px) !important;
    color: var(--dh-filter-field-text, #1f2937) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    transition: all var(--dh-transition-base, 0.3s ease) !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    display: block !important;
    height: auto !important;
    min-height: 44px !important;
}

/* Focus state for dropdowns */
.dealerhub-vehicles-container .dh-filter-select:focus,
.dealerhub-vehicles-container .dealerhub-filter:focus,
.dealerhub-vehicle-detail .dh-filter-select:focus,
.dealerhub-vehicle-detail .dealerhub-filter:focus {
    outline: none !important;
    border-color: var(--dh-primary-color, #f97316) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

/* Dropdown options styling */
.dealerhub-vehicles-container .dh-filter-select option,
.dealerhub-vehicles-container .dealerhub-filter option,
.dealerhub-vehicle-detail .dh-filter-select option,
.dealerhub-vehicle-detail .dealerhub-filter option {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    padding: 8px !important;
}

/* Disable Motors theme's select overrides */
select.dealerhub-filter,
select.dh-filter-select {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    background-color: #ffffff !important;
}

/* ========================================
   CRITICAL: BUTTON STYLE FIXES
   ======================================== */

/* Primary buttons - force DealerHub styling */
.dealerhub-vehicles-container .dh-btn-primary,
.dealerhub-vehicle-detail .dh-btn-primary,
.dh-filters .dh-btn-primary {
    background-color: var(--dh-btn-primary-bg, var(--dh-primary-color, #f97316)) !important;
    color: var(--dh-btn-primary-text, #ffffff) !important;
    border: 2px solid var(--dh-btn-primary-bg, var(--dh-primary-color, #f97316)) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-height: 44px !important;
    min-width: 120px !important;
    background-image: none !important;
    text-shadow: none !important;
}

.dealerhub-vehicles-container .dh-btn-primary:hover,
.dealerhub-vehicle-detail .dh-btn-primary:hover,
.dh-filters .dh-btn-primary:hover {
    background-color: var(--dh-primary-hover, #ea580c) !important;
    border-color: var(--dh-primary-hover, #ea580c) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Secondary buttons */
.dealerhub-vehicles-container .dh-btn-secondary,
.dealerhub-vehicle-detail .dh-btn-secondary,
.dh-filters .dh-btn-secondary {
    background-color: transparent !important;
    color: var(--dh-btn-secondary-text, var(--dh-text-primary, #1f2937)) !important;
    border: 2px solid var(--dh-primary-color, #f97316) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-height: 44px !important;
    min-width: 120px !important;
    background-image: none !important;
    text-shadow: none !important;
}

.dealerhub-vehicles-container .dh-btn-secondary:hover,
.dealerhub-vehicle-detail .dh-btn-secondary:hover,
.dh-filters .dh-btn-secondary:hover {
    background-color: var(--dh-secondary-color, #dc2626) !important;
    border-color: var(--dh-secondary-color, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Reset button */
.dealerhub-vehicles-container .dh-filters-reset,
.dealerhub-vehicle-detail .dh-filters-reset,
.dh-filters .dh-filters-reset {
    background-color: var(--dh-filter-button-bg, #dc2626) !important;
    color: var(--dh-filter-button-text, #ffffff) !important;
    border: 2px solid var(--dh-filter-button-bg, #dc2626) !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: none !important;
    text-shadow: none !important;
}

.dealerhub-vehicles-container .dh-filters-reset:hover,
.dealerhub-vehicle-detail .dh-filters-reset:hover,
.dh-filters .dh-filters-reset:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* All .dh-btn classes */
.dealerhub-vehicles-container .dh-btn,
.dealerhub-vehicle-detail .dh-btn,
.dh-filters .dh-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    background-image: none !important;
    text-shadow: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-height: 44px !important;
    padding: 12px 24px !important;
    box-sizing: border-box !important;
}

/* ========================================
   BREADCRUMB FIXES
   ======================================== */

/* DealerHub breadcrumb styling */
.dealerhub-vehicle-detail .dh-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.dealerhub-vehicle-detail .dh-breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dealerhub-vehicle-detail .dh-breadcrumb-item a {
    color: var(--dh-primary-color, #f97316) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.dealerhub-vehicle-detail .dh-breadcrumb-item a:hover {
    color: var(--dh-primary-hover, #ea580c) !important;
    text-decoration: underline !important;
}

.dealerhub-vehicle-detail .dh-breadcrumb-separator {
    color: #9ca3af !important;
    display: inline !important;
}

.dealerhub-vehicle-detail .dh-breadcrumb-current {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* ========================================
   FILTER CONTAINER FIXES
   ======================================== */

.dealerhub-vehicles-container .dh-filters,
.dealerhub-vehicle-detail .dh-filters {
    background-color: var(--dh-filter-bg, #f9fafb) !important;
    border: 1px solid var(--dh-filter-border, #e5e7eb) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

.dealerhub-vehicles-container .dh-filters-grid,
.dealerhub-vehicle-detail .dh-filters-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.dealerhub-vehicles-container .dh-filter-group,
.dealerhub-vehicle-detail .dh-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.dealerhub-vehicles-container .dh-filter-label,
.dealerhub-vehicle-detail .dh-filter-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--dh-filter-label-color, #1f2937) !important;
    margin: 0 !important;
    display: block !important;
}

/* ========================================
   INPUT FIELD FIXES
   ======================================== */

.dealerhub-vehicles-container .dh-filter-input,
.dealerhub-vehicle-detail .dh-filter-input {
    width: 100% !important;
    padding: 10px 12px !important;
    background-color: var(--dh-filter-field-bg, #ffffff) !important;
    border: 1px solid var(--dh-filter-field-border, #d1d5db) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    color: var(--dh-filter-field-text, #1f2937) !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.dealerhub-vehicles-container .dh-filter-input:focus,
.dealerhub-vehicle-detail .dh-filter-input:focus {
    outline: none !important;
    border-color: var(--dh-primary-color, #f97316) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

/* ========================================
   PAGINATION FIXES
   ======================================== */

.dealerhub-vehicles-container .dh-pagination,
.dealerhub-vehicle-detail .dh-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 30px !important;
    padding: 20px 0 !important;
    flex-wrap: wrap !important;
}

.dealerhub-vehicles-container .dh-pagination-item,
.dealerhub-vehicle-detail .dh-pagination-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    background-color: var(--dh-pagination-bg, #ffffff) !important;
    border: 1px solid var(--dh-pagination-border, #d1d5db) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--dh-text-primary, #1f2937) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.dealerhub-vehicles-container .dh-pagination-item:hover,
.dealerhub-vehicle-detail .dh-pagination-item:hover {
    background-color: var(--dh-pagination-hover-bg, #f3f4f6) !important;
    border-color: var(--dh-primary-color, #f97316) !important;
}

.dealerhub-vehicles-container .dh-pagination-item-active,
.dealerhub-vehicle-detail .dh-pagination-item-active {
    background-color: var(--dh-primary-color, #f97316) !important;
    border-color: var(--dh-primary-color, #f97316) !important;
    color: #ffffff !important;
}

/* ========================================
   GENERAL CONTAINER RESETS
   ======================================== */

/* Prevent Motors theme from affecting DealerHub containers */
.dealerhub-vehicles-container,
.dealerhub-vehicle-detail {
    box-sizing: border-box !important;
}

.dealerhub-vehicles-container *,
.dealerhub-vehicle-detail * {
    box-sizing: border-box !important;
}

/* Prevent theme link styling from affecting DealerHub */
.dealerhub-vehicles-container a,
.dealerhub-vehicle-detail a {
    color: inherit !important;
    text-decoration: none !important;
}

.dealerhub-vehicles-container a:hover,
.dealerhub-vehicle-detail a:hover {
    text-decoration: underline !important;
}

/* ========================================
   MOBILE RESPONSIVE FIXES
   ======================================== */

@media (max-width: 767px) {
    .dealerhub-vehicles-container .dh-filter-select,
    .dealerhub-vehicles-container .dealerhub-filter,
    .dealerhub-vehicle-detail .dh-filter-select,
    .dealerhub-vehicle-detail .dealerhub-filter {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    
    .dealerhub-vehicles-container .dh-filters-grid,
    .dealerhub-vehicle-detail .dh-filters-grid {
        grid-template-columns: 1fr !important;
    }
    
    .dealerhub-vehicles-container .dh-btn,
    .dealerhub-vehicle-detail .dh-btn {
        width: 100% !important;
        min-height: 48px !important;
    }
}

/* ========================================
   Z-INDEX MANAGEMENT
   ======================================== */

.dealerhub-vehicles-container {
    position: relative !important;
    z-index: 1 !important;
}

.dealerhub-vehicle-detail {
    position: relative !important;
    z-index: 1 !important;
}

.dh-filters {
    z-index: 10 !important;
}

.dh-filter-select,
.dealerhub-filter {
    z-index: 11 !important;
}