/* ═══════════════════════════════════════════════════════════
   Dropdown Fix for Select Elements
   Ensures native select dropdowns are not clipped or hidden
   Covers both native selects and searchable wrapper selects
   ═══════════════════════════════════════════════════════════ */

/* Ensure all form selects can have their dropdowns visible */
.form-group select,
.form-control[type="select"],
select.form-control,
select.form-select {
  position: relative;
  z-index: 10;
}

/* SEARCHABLE SELECT WRAPPER FIX - for model selector on all devices */
.searchable-select-wrapper {
  position: relative;
  z-index: 10;
  overflow: visible !important;
}

.searchable-select-wrapper select {
  position: relative;
  z-index: 100;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  width: 100%;
}

.searchable-select-wrapper .searchable-select-input {
  position: relative;
  z-index: 99;
  width: 100%;
}

/* Ensure motor_change (transmission) is NOT wrapped */
#id_motor_change {
  /* Do not wrap this select - it should be clean native */
}

/* For Bootstrap grid columns containing selects */
.col-md-3 select.form-control,
.col-md-4 select.form-control,
.col-md-6 select.form-control,
.col-lg-3 select.form-control,
.col-lg-4 select.form-control,
.col-lg-6 select.form-control {
  position: relative;
  z-index: 10;
}

/* Ensure form-section rows allow dropdown overflow */
.form-section .row {
  position: relative;
  z-index: auto;
  overflow: visible;
}

/* Specific fix for motor_change (transmission) dropdown */
#id_motor_change {
  position: relative;
  z-index: 10;
}

/* Ensure the parent form-group doesn't clip */
.form-section .form-group {
  position: relative;
  overflow: visible;
}

/* Fix for col-md-3 to not clip dropdowns */
.col-md-3.form-group {
  overflow: visible;
}

/* Ensure containers don't create new stacking contexts that trap selects */
.form-section {
  overflow: visible;
  z-index: auto;
}

/* Make sure row doesn't create clipping issues */
.row {
  overflow: visible;
}

/* Fix for select inside form-group with specific width classes */
.col-md-3.form-group select,
.col-md-4.form-group select,
.col-md-6.form-group select {
  width: 100%;
  display: block;
}

/* Ensure focused state doesn't break dropdown */
.form-section select:focus,
#id_vehicle_model:focus {
  outline: none;
  border-color: #405FF2;
  box-shadow: 0 0 0 3px rgba(64, 95, 242, 0.1);
}

#id_motor_change:focus {
  outline: 2px solid #405FF2;
  outline-offset: 0px;
}

/* MOBILE/TABLET SPECIFIC FIXES */
@media (max-width: 768px) {
  /* Ensure selects work properly on touch devices */
  select,
  .form-control {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  
  /* Fix searchable wrapper on mobile */
  .searchable-select-wrapper {
    width: 100%;
    z-index: 50;
  }
  
  .searchable-select-wrapper select {
    z-index: 51;
  }
  
  /* Ensure dropdowns aren't cut off on narrow screens */
  .col-12.form-group,
  .col-12 .searchable-select-wrapper {
    overflow: visible;
  }
}

/* VERY SMALL SCREENS */
@media (max-width: 480px) {
  /* Ensure massive tap targets on mobile for selects */
  select.form-control,
  select.form-select,
  .searchable-select-wrapper select {
    min-height: 44px;
    font-size: 16px;
  }
  
  .searchable-select-input {
    min-height: 44px;
  }
}