/* ============================================================
   KK Search Bar (layout + controls)
   ============================================================ */

/* Layout */
.kk-search-bar-wrapper{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.kk-search-row{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  color: #000 !important;
}


.kk-search-bar-wrapper #kk-search-input{
  font-size: 14px !important;
}

.kk-search-bar-wrapper #kk-search-input::placeholder{
  font-size: 14px !important;  
}

.kk-search-row > *{
  flex: 1 1 0;
  min-width: 90px;
  box-sizing: border-box;
}

.kk-search-input-container{
  position: relative;
  flex: 2 1 0;
  box-sizing: border-box;
}

/* Shared control sizing */
.kk-search-input-container input[type="text"],
.kk-search-row select,
.kk-search-row button{
  height: 34px !important;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 0;
}

/* Input */
.kk-search-input-container input[type="text"]{
  width: 100%;
  background: #fff;
}

#kk-search-input{
  font: 400 15px/1 inherit !important; /* weight size/line-height family */
  color: #555 !important;
  padding: 0 8px 0 12px !important;   /* override left padding */
}

#kk-search-input::placeholder{
  font: 400 15px/1 inherit !important;
  color: #333 !important;
  opacity: 1 !important;
}

/* Select (optional) */
.kk-search-row select{
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #555 50%),
    linear-gradient(135deg, #555 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Button */
.kk-search-row button{
  background: rgba(255,255,255,0);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* Prevent “mousedown/drag-off” color changes */
.kk-search-row button:active,
.kk-search-row button:focus,
.kk-search-row button:focus-visible{
  background: rgba(255,255,255,0) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

.kk-search-row button:hover{
  background: #fff !important;
  color: #000;
}

/* Button width behavior */
#kk-search-btn{
  flex: 0 0 auto !important;
}


/* ------------------------------------------------------------
   3) AUTOCOMPLETE DROPDOWN
   ------------------------------------------------------------ */

#kk-autocomplete-results{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 2px;
  z-index: 9999;
}

.kk-autocomplete-dropdown{
  display: none;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.kk-autocomplete-item{
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kk-autocomplete-item:hover,
.kk-autocomplete-item.kk-active{
  background: #f2f2f2;
}

/* ============================================================
   Elementor Newsletter Form (Field + Submit equal height)
   ============================================================ */

.elementor-form .elementor-field,
.elementor-form .elementor-button{
  box-sizing: border-box;
  height: 42px;
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0;
}

.elementor-form .elementor-button{
  padding-left: 18px;
  padding-right: 18px;
}