/* =====================================================
   CUSTOM SEARCH – FINAL VERSION FOR THIS HTML
   Desktop: δεξιά, input + button
   Mobile: κέντρο, μόνο input χωρίς button
   ===================================================== */


/* =====================================================
   LAYOUT BUILDER / BLOCK ALIGNMENT
   ===================================================== */

/* Region που περιέχει τη φόρμα */
.layout__region:has(form.custom-search),
.layout__region:has(.custom-search) {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
}

/* Block wrapper γύρω από τη φόρμα */
.layout__region:has(form.custom-search) .block,
.layout__region:has(.custom-search) .block {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
}


/* =====================================================
   FORM
   ===================================================== */

form.custom-search,
.custom-search {
  width: 100% !important;
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   SEARCH ROW
   ===================================================== */

form.custom-search .search-row,
.custom-search .search-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   INPUT
   ===================================================== */

form.custom-search input[type="text"],
form.custom-search input[type="search"],
.custom-search input[type="text"],
.custom-search input[type="search"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 36px !important;
  box-sizing: border-box !important;

  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  padding: 0 10px !important;

  font-size: 0.9rem !important;
  outline: none !important;
}

form.custom-search input[type="text"]:focus,
form.custom-search input[type="search"]:focus,
.custom-search input[type="text"]:focus,
.custom-search input[type="search"]:focus {
  border-color: #0d6efd !important;
}


/* =====================================================
   BUTTON - DESKTOP / TABLET
   ===================================================== */

form.custom-search button,
form.custom-search input[type="submit"],
.custom-search button,
.custom-search input[type="submit"] {
  flex: 0 0 auto !important;
  height: 36px !important;
  box-sizing: border-box !important;

  border-radius: 8px !important;
  background: #0d6efd !important;
  color: #fff !important;
  border: none !important;

  padding: 0 12px !important;
  white-space: nowrap !important;
  cursor: pointer !important;

  font-size: 1.1rem !important;
}

form.custom-search button:hover,
form.custom-search input[type="submit"]:hover,
.custom-search button:hover,
.custom-search input[type="submit"]:hover {
  background: #0b5ed7 !important;
}


/* =====================================================
   MOBILE - ONLY INPUT, NO BUTTON
   ===================================================== */

@media (max-width: 768px) {

  .layout__region:has(form.custom-search),
  .layout__region:has(.custom-search) {
    display: block !important;
    width: 100% !important;
  }

  .layout__region:has(form.custom-search) .block,
  .layout__region:has(.custom-search) .block {
    display: block !important;
    width: 100% !important;
  }

  form.custom-search,
.custom-search {
  width: 100% !important;
  max-width: 260px !important;
  margin: 8px auto 0 0 !important;
  padding: 0 !important;
  }

  form.custom-search .search-row,
  .custom-search .search-row {
    display: block !important;
    width: 100% !important;
  }

  form.custom-search button,
  form.custom-search input[type="submit"],
  .custom-search button,
  .custom-search input[type="submit"] {
    display: none !important;
  }

  form.custom-search input[type="text"],
  form.custom-search input[type="search"],
  .custom-search input[type="text"],
  .custom-search input[type="search"] {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;

    border-radius: 8px !important;
    font-size: 0.9rem !important;
  }
}

/* =====================================================
   MOBILE FIX - Bootstrap bs-ml-5 override μόνο για search
   ===================================================== */

@media (max-width: 768px) {

  .layout__region:has(form.custom-search),
  .layout__region:has(.custom-search) {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
  }

  .layout__region:has(form.custom-search) .block,
  .layout__region:has(.custom-search) .block {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .layout__region:has(form.custom-search) .bs-ml-5,
  .layout__region:has(.custom-search) .bs-ml-5,
  .bs-ml-5:has(form.custom-search),
  .bs-ml-5:has(.custom-search),
  form.custom-search.bs-ml-5,
  .custom-search.bs-ml-5 {
    margin-left: 0 !important;
  }

  form.custom-search,
  .custom-search {
    width: 100% !important;
    max-width: 260px !important;
    margin: 8px auto 0 0 !important;
    padding: 0 !important;
  }
}