/****** Search ******/
.search-container {
  /*width: 100%;*/            /* container width */
  display: flex;          /* align children in a row */
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden; 
  margin-bottom: 4px;
}

.search-container:focus-within {
  border: 1px solid #999;
}

.search-container input {
  /*flex: 1 1 auto;*/         /* input grows and shrinks */
  width: 100%; 
  min-width: 0;           /* allow shrinking in flex container */
  border: none;
  outline: none;
  padding: 0.5rem; 
  font-size: 1.2rem;
}

.search-container button {
  /*flex: 0 0 auto;*/         /* buttons keep their width */
  border: none;
  background: #ffff; /*none;*/
  padding: 0.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  /*color: #333;*/
}

#searchClearBtn {
  display: none; /* hidden initially */
}


/******search suggestions*********/

.suggestions {
    /*position: absolute;*/
    /*top: 100%;*/
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 100;
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}

.suggestions.hidden {
    display: none;
}

.p-search-suggestions {
	margin: 0px;
	padding: 2px;
}

.p-search-suggestions a {
    display: flex;
    align-items: center;  /* Vertically center text with image */
    gap: 10px;            /* Space between image and text */
    text-decoration: none; /* optional: remove underline */
    /*color: inherit;*/       /* optional: keep text color */
}

.p-search-suggestions img {
    display: block;       /* remove inline spacing */
    height: 60px;         /* or whatever you want */
}


/****** buttons ******/
#searchSuggestions { 
    position: relative;      /* So buttons are positioned relative to this box */
    padding-top: 10px;       /* Space so text does not overlap buttons */
}

/* Close button: far right */
#snippetCloseBtn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 1.2rem;
}



/* Search button: left of close button */
#snippetSearchBtn {
    position: absolute;
    top: 5px;
    right: 40px;  /* space between search and close buttons */
    width: 30px;
    height: 30px;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 1.2rem;
}



#snippetBigCloseBtn {
  /*background: #0078e7;*/
  background: #d9534f; /*red*/
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  margin-bottom: 4px;
  cursor: pointer;
}

#snippetBigCloseBtn:hover {
  /*background: #005bb5;*/
  background: #c9302c; /*red*/
}


#snippetBigSearchBtn {
  background: #0078e7;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  margin-bottom: 4px;
  cursor: pointer;
}

#snippetBigSearchBtn:hover {
  background: #005bb5;
}




/*********** responsive 1076px **************/
@media (max-width: 1076px) {
	

	
}

/*********** responsive 768px **************/
@media (max-width: 768px) {
	
	
}

/*********** responsive 480px **************/
@media (max-width: 480px) {


	.search-container {
	  margin-bottom: 2px;
	}  
	

	.search-container input,
	#searchClearBtn i.ri-close-line,  
	#searchBtn i.ri-search-line {
	  font-size: 1.0rem;
	}
		
 	
			
}