/* Layout affiancato */
.search-form {
	display: flex;
	align-items: stretch;
}

/* Stile Input */
.search-box {
	padding: 8px 15px;
	border: 1px solid #ddd;
	border-right: none; /* Rimuove bordo destro */
	border-radius: 4px 0 0 4px;
	width: 200px;
	outline: 0 none;
	font-family: inherit;
	font-size: 16px;
	color: #333;
}

/* Focus Input */
.search-box:focus {
	border-color: rgb(143 185 255);
	position: relative; /* Per sovrapporsi al bordo del bottone */
	z-index: 2;
	box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgb(36 71 129 / 42%);
}

/* Stile Bottone con SVG nel CSS */
.search-btn {
	width: 40px; 
	cursor: pointer;
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	border-left: none; /* Rimuove bordo sinistro */
	border-radius: 0 4px 4px 0;
	
	/* Il colore dell'icona è definito da stroke='%23555' (che significa #555) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px; /* Dimensione dell'icona */
	transition: background-color 0.2s;
}

/* Hover sul bottone */
.search-btn:hover {
	background-color: #eee;
}

/* Focus sul bottone */
.search-btn:focus {
	outline: none;
	background-color: #e2e6ea;
}

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

	.search-archive {
		width: 100%;
	}

}