/*
 * Usha Water Heaters - Store Locator filter layout
 *
 * Desktop:
 *   Pincode / City | Store Type
 *   Category full width when enabled
 *
 * Mobile:
 *   All fields stack vertically.
 */

/* Category feature flag - hidden for now. */
.path-find-pin-store .locator-category-disabled,
.path-find-city-store .locator-category-disabled,
.path-find-store .locator-category-disabled,
.path-store-locator .locator-category-disabled {
  display: none !important;
}


/* =========================================================
   DESKTOP / TABLET
   ========================================================= */

.path-find-pin-store .store-container .select-store .form-fields-grid,
.path-find-city-store .store-container .select-store .form-fields-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 10px !important;
  row-gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: end !important;
  box-sizing: border-box !important;
}


/* Left column: Pincode / City */
.path-find-pin-store .store-container .select-store .form-fields-grid > #store_pin,
.path-find-city-store .store-container .select-store .form-fields-grid > #store_city {
  grid-column: 1 !important;
  grid-row: 1 !important;

  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  box-sizing: border-box !important;
}


/* Right column: Store Type */
.path-find-pin-store .store-container .select-store .form-fields-grid > .form-group-type,
.path-find-city-store .store-container .select-store .form-fields-grid > .form-group-type {
  grid-column: 2 !important;
  grid-row: 1 !important;

  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  box-sizing: border-box !important;
}


/* Future Category: full width below row 1 */
.path-find-pin-store .store-container .select-store .form-fields-grid > .form-group-subcategory,
.path-find-city-store .store-container .select-store .form-fields-grid > .form-group-subcategory {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  box-sizing: border-box !important;
}


/* Form controls fill their grid cells */
.path-find-pin-store .store-container .select-store #store_pin input[type="text"],
.path-find-city-store .store-container .city-combobox-field,
.path-find-city-store .store-container .city-combobox-trigger,
.path-find-pin-store .store-container .form-group-type select,
.path-find-city-store .store-container .form-group-type select,
.path-find-pin-store .store-container .form-group-subcategory select,
.path-find-city-store .store-container .form-group-subcategory select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 575px) {

  .path-find-pin-store .store-container .select-store .form-fields-grid,
  .path-find-city-store .store-container .select-store .form-fields-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .path-find-pin-store .store-container .select-store .form-fields-grid > #store_pin,
  .path-find-city-store .store-container .select-store .form-fields-grid > #store_city,
  .path-find-pin-store .store-container .select-store .form-fields-grid > .form-group-type,
  .path-find-city-store .store-container .select-store .form-fields-grid > .form-group-type,
  .path-find-pin-store .store-container .select-store .form-fields-grid > .form-group-subcategory,
  .path-find-city-store .store-container .select-store .form-fields-grid > .form-group-subcategory {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   Near Me layout - Store Type left
   ========================================================= */

/*
 * Near Me has no visible Pincode/City search field.
 * Keep Store Type in the left column instead of column 2.
 */
.path-find-store .store-container .select-store .form-fields-grid,
.path-store-locator .store-container .select-store .form-fields-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 10px !important;
  row-gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Store Type: left column on Near Me. */
.path-find-store .store-container .select-store .form-fields-grid > .form-group-type,
.path-store-locator .store-container .select-store .form-fields-grid > .form-group-type {
  grid-column: 1 !important;
  grid-row: 1 !important;

  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  box-sizing: border-box !important;
}

/*
 * Future Category:
 * when enabled, keep it full width below Store Type.
 */
.path-find-store .store-container .select-store .form-fields-grid > .form-group-subcategory,
.path-store-locator .store-container .select-store .form-fields-grid > .form-group-subcategory {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Mobile remains single-column. */
@media screen and (max-width: 575px) {
  .path-find-store .store-container .select-store .form-fields-grid,
  .path-store-locator .store-container .select-store .form-fields-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .path-find-store .store-container .select-store .form-fields-grid > .form-group-type,
  .path-store-locator .store-container .select-store .form-fields-grid > .form-group-type,
  .path-find-store .store-container .select-store .form-fields-grid > .form-group-subcategory,
  .path-store-locator .store-container .select-store .form-fields-grid > .form-group-subcategory {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}