/* ======================================== */
/* CSS styles extracted from cars_sub_heading.php */
/* ======================================== */

/* Car-specific overrides for existing dropdown classes */
#carTypeDropdownToggle, #carRegionDropdownToggle, #carFiltersDropdownToggle {
    /* Ensure blue border like accom section */
    border: 1.5px solid #2196F3 !important;
    text-align: center !important; /* center label inside buttons */
}
#carTypeDropdownList, #carRegionDropdownList { text-align:left; }
#carTypeDropdownList .type-dropdown-item { display:block; padding:8px 18px; cursor:pointer; font-size:14px; transition: background 0.15s, color 0.15s; }
#carRegionDropdownList .type-dropdown-item { /*width: 100%;*/ max-width: 100%; display:block; padding:8px 18px; cursor:pointer; font-size:13px; transition: background 0.15s, color 0.15s; box-sizing: border-box; }
#carTypeDropdownList .type-dropdown-item:hover, #carRegionDropdownList .type-dropdown-item:hover { background:#E3F2FD; color:#1565C0; }
/* Desktop styles for dropdown headers */
@media (min-width: 769px) {
  #carTypeDropdownToggle { 
    font-size: 13px; 
    text-align: center !important;
  }
  #carRegionDropdownToggle { 
    font-size: 13px; 
    /*min-width: 10px !important; */
    /*padding: 8px 46px 8px 56px; */
    text-align: center !important;
  }
  #carFiltersDropdownToggle { 
    font-size: 13px; 
    min-width: 100px; 
    padding: 8px 56px 8px 46px; 
    text-align: center !important;
  }
  #carSearchSubmitBtn { 
    text-align: center; 
  }
  
  /* Hide the X button on desktop */
  #carFiltersDropdownList .mobile-close-btn {
    display: none !important;
  }
  
  /* Ensure region dropdown matches button width exactly */
  #carRegionDropdownList {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}
#carFiltersDropdownList { text-align:left; }
#carFiltersDropdownList .filters-heading { font-weight:bold; display:block; margin:0 0 6px 0; text-align:left; }
#carFiltersDropdownList .filters-sublabel { font-weight:normal; font-size:14px; }
.filters-row-between { display:flex; align-items:center; justify-content:space-between; }

/* Ensure car dropdowns have proper positioning and z-index */
#carTypeDropdownList, #carRegionDropdownList, #carFiltersDropdownList {
    z-index: 1001;
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Specific fix for region dropdown width constraint */
#carRegionDropdownList {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#carRegionDropdownList .type-dropdown-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Specific width for car filters dropdown on desktop */
@media (min-width: 1024px) {
    #carFiltersDropdownList {
        min-width: 400px !important;
        width: 400px !important;
    }
}

/* Override the general type-dropdown-list min-width for car filters */
#carFiltersDropdownList.type-dropdown-list {
    min-width: 400px !important;
    width: 400px !important;
}

/* Car-specific segmented control overrides (blue theme instead of green) */
#carFiltersDropdownList .segmented-control { 
    border-color: #1565C0; 
    /* Ensure proper sizing for car filters */
    font-size: 13px;
}
#carFiltersDropdownList .segmented-control .segment { 
    padding: 10px 16px; 
    font-size: 14px;
    line-height: 1.2;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#carFiltersDropdownList .segmented-control .segment:hover { background:#F6FAFF; }
#carFiltersDropdownList .segmented-control .segment.active { background:#E3F2FD; color:#1565C0; }

/* Car-specific switch overrides (blue theme instead of green) */
#carFiltersDropdownList .switch input:checked + .slider { background:#1565C0; }

/* Mobile layout adjustments */
@media (max-width: 768px) {
  /* Keep all controls left-aligned inside the blue card */
  .cars-search-flex { align-items: flex-start !important; justify-content: flex-start !important; }
  .cars-search-flex > .w-full { width: 100% !important; }
  .cars-mobile-grid { margin-left: 0 !important; width: 100% !important; justify-content: flex-start !important; justify-items: stretch !important; }
  .cars-mobile-grid > div { width: 100% !important; }
  .cars-mobile-grid .type-dropdown-container { display:block !important; width:100% !important; }
  .cars-mobile-grid .type-dropdown-toggle { width:100% !important; display:block !important; margin-left:0 !important; margin-right:0 !important; }
  #carSearchSubmitBtn { width: 100% !important; }
  /* Two-row grid on mobile: row1 Type (full width), row2 Region + Filters */
  .cars-mobile-grid { display:grid !important; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; grid-column-gap:12px; grid-row-gap:12px; align-items:center; justify-items:stretch; }
  /* Make the first block (Type) span both columns */
  .cars-mobile-span-2 { grid-column:1 / span 2; }
  /* Ensure each dropdown container fills its grid cell */
  .cars-mobile-grid .type-dropdown-container { display:block !important; width:100% !important; }

  /* Mobile header styles - no min-width override */
  #carTypeDropdownToggle { 
    font-size: 14px; 
    text-align: center !important;
  }
  #carRegionDropdownToggle { 
    font-size: 14px; 
    padding: 6px 10px !important; 
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: auto !important;
    max-width: 100% !important;
  }
  #carFiltersDropdownToggle { 
    font-size: 14px; 
    padding: 6px 10px !important; 
    text-align: center !important;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: ellipsis;
    min-width: auto !important;
    max-width: 100% !important;
  }
  #carSearchSubmitBtn { 
    text-align: center; 
  }
  
  /* Ensure dropdowns maintain proper width on mobile */
  #carRegionDropdownList, #carFiltersDropdownList {
    min-width: 100% !important;
    width: 100% !important;
  }
  /* Allow long region names to wrap inside the menu */
  #carRegionDropdownList .type-dropdown-item { white-space: normal !important; text-overflow: unset !important; }

  /* On mobile, expand Region dropdown to span both columns for more room */
  .cars-mobile-grid #carRegionDropdownList { width: 120% !important; max-width: 120% !important; left: 0 !important; right: auto !important; }
  
  /* Show the X button on mobile */
  #carFiltersDropdownList .mobile-close-btn {
    display: flex !important;
  }
}

/* Mobile bottom drawer styles for car filters */
@media (max-width: 768px) {
  #carFiltersDropdownList.mobile-filters-drawer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 85vh !important;
    background: white !important;
    z-index: 1000 !important;
    padding: 0 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    margin: 0 !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    top: auto !important;
    min-width: auto !important;
    overflow-x: hidden !important;
  }

  #carFiltersDropdownList.mobile-filters-drawer.active {
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #carFiltersDropdownList.mobile-filters-drawer .p-4,
  #carFiltersDropdownList.mobile-filters-drawer .lg\:p-6 {
    padding: 1rem !important;
    height: calc(100% - 20px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 60px !important;
    padding-bottom: 1rem !important;
  }

  /* Add close button for mobile */
  #carFiltersDropdownList.mobile-filters-drawer .mobile-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    z-index: 1001;
    background: none;
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  /* Overlay for mobile drawer */
  .mobile-filters-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
  }

  .mobile-filters-overlay.active {
    display: block;
  }

  /* Reset button width on mobile */
  #carFiltersDropdownList.mobile-filters-drawer #carFiltersResetBtn {
    width: 40% !important;
    margin: 1rem auto 0 auto !important;
    display: block !important;
    text-align: center !important;
  }

  /* Larger toggles on mobile */
  #carFiltersDropdownList.mobile-filters-drawer .segmented-control .segment {
    padding: 12px 20px !important;
    font-size: 15px !important;
    min-height: 44px !important;
  }
}

/* ======================================== */
/* End of CSS styles from cars_sub_heading.php */
/* ======================================== */