/**
  CustomPostSearchStyle.css
  @author: Supersonique Studio
  @description: Custom styles for the Custom Post Search plugin
  @version: 1.1.4
*/

/* Services Grid */
#services-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  margin-top: 20px;
  width: 100%;
}

/* Service Border */
.service-border {
  display: flex;
  border: 1px solid #646464;
  border-radius: 0.75rem;
  border-top-right-radius: 2.5em;
  border-color: #efecf3;
  color: #7a7a7a;
  margin: 1%;
  width: 30%;
}

div#search-bar-container {
  width: 100%;
}

/* Ensure advanced search params stay below */
#advanced-search-params-container {
  display: block;
  margin-top: 20px;
  flex-direction: column;
  width: 100%;
}

#advanced-search-params-container dd {
  margin-left: 0;
}

#advanced-search-params-container input#submit-button-search-form {
  width: 100%;
}

form#services-search-form {
  display: block !important;
}

#advanced-search-params-container input#submit-button-search-form {
    width: 100%;
    margin-top: 20px;
}

.drop-down-order, .drop-down-result, .drop-down-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.drop-down-order .dropdown-content button, 
.drop-down-result .dropdown-content button, 
.drop-down-grid .dropdown-content button {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  border: 0;
}


/*
#services-search-form {
  display: flex !important;
  align-content: center;
  justify-content: center;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  display: flex !important;
}
#services-search-form *, #services-search-form *::before, #services-search-form *::after {
  box-sizing: border-box;
}
*/

/* Service Container */
.service-container {
  display: flex;
  flex-direction: column;
  flex: auto;
  color: #7a7a7a;
  padding: 5%;
}

.service-container p {
  font-family: var(--wp--preset--font-family--system-sans-serif);
  font-size: 100%;
  color: inherit;
  margin-left: 10px;
}

.service-container h4 {
  font-family: var(--wp--preset--font-family--system-sans-serif);
  font-weight: 500;
  font-size: calc(1.275rem + 0.3vw);
  color: inherit;
  text-align: left;
  line-height: 1.5em;
  margin-top: 10px;
}

/* Submit Select Container */
#sumbit-select-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 20px;
}

div#search-input-service-grp, 
#search-input-service {
    width: 400px;
}

div#search-input-service-grp{
  margin-right: .5rem !important;
}

/* Links */
a {
  color: #3993d5 !important;
}

/* Input Fields */
input {
  border-radius: 0.375rem !important;
}

select {
  border-radius: 0.375rem !important;
}

/* Buttons */
button {
  color: #3993d5 !important;
  border-color: #3993d5 !important;
  background-color: #ffffff !important;
  transition: background-color 0s, color 0s !important;
  border-radius: 0.375rem !important;
}

button:hover {
  color: #ffffff !important;
  background-color: #3993d5 !important;
}

/* Submit Button Search Form */
#submit-button-search-form {
  color: #3993d5 !important;
  border-color: #3993d5 !important;
  background-color: #ffffff !important;
  transition: background-color 0s, color 0s !important;
}

#submit-button-search-form:hover {
  color: #ffffff !important;
  background-color: #3993d5 !important;
}

/* Definition Term */
dl {
  padding-bottom: 10px;
}

dt {
  font-weight: 400;
}

/* Dashicons Admin Generic */
.dashicons-admin-generic:before {
  content: "\f111";
}

/* Advanced Search Params Container */
#advanced-search-params-container {
  padding: 2%;
  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.15) !important;
}

/* Suggestion Box */
.suggestion-box {
  position: absolute;
  z-index: 1000;
  border: 1px solid #efecf3;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: auto;
  max-height: 200px;
  overflow-y: hidden;
  margin-top: 2px;
  max-height: 200px; /* Limit the height to 200px and allow scrolling */
  overflow-y: auto; /* Enable vertical scrolling when there are many suggestions */
  background-color: white;
  border: 0;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  border-radius: 4px;
  width: 400px;
}


/* Suggestion Item */
.suggestion-item {
  padding: 10px;
  cursor: pointer;
  font-size: 100%;
  color: #333;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

/* Search Field */
.search-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #efecf3;
  border-radius: 4px;
  font-size: 100%;
  box-sizing: border-box;
}

/* Highlighted Text for Autocomplete */
.suggestion-item span.highlight {
  font-weight: bold;
  color: #0073aa;
}

/* Search Input Container */
#search-input-container {
  width: 50%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.alone-search-container div#search-bar-container {
  display: flex;
  justify-content: center;
}

#search-display-params-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#advanced-search-params-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Search Display Params Container */
#search-display-params-container {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Search Bar Container */
#search-bar-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Dropdown Content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.display-params-button {
  width: inherit;
}

dd {
  display: block;
  margin-inline-start: 0;
}

.service-border dd {
  width: 62%;
  float: left;
}

.service-border dt {
  float: left;
  width: 38%;
  text-align: right;
  padding-right: 1em;
  text-transform: capitalize;
  text-align: right;
}
.service-border dl {
  overflow: auto;
}


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

  div#search-input-service-grp, #search-input-service {
    width: 180px;
}
  #search-bar-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }

  #search-display-params-container {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
  }
}

/* Responsive Service Border */
@media screen and (max-width: 840px) {
  .service-border {
    width: 48%;
  }

  div#search-input-service-grp, #search-input-service {
    width: 180px;
}

  #search-bar-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }


  #search-display-params-container {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
  }
}

@media screen and (max-width: 768px) {
  .drop-down-grid {
    display: none;
  }

  .drop-down-grid {
    display: none;
  }

  .service-border {
    width: 98%;
  }

  div#search-input-service-grp, #search-input-service {
    width: 180px;
  }

  #search-bar-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }

  #search-display-params-container {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
  }

}