@charset "UTF-8";
/* CSS Document */

/* Container for the whole interface */
#interacta-container {
	width: 90%;
    margin: 20px auto;
	background: #fff;
	border: 5px solid #ccc;
    border-radius: 10px;
	padding: 40px;
}

#interacta-container-heading {
	width: 90%!important;
    margin: 20px auto;
	padding: 0 60px;
}

#interacta-container-heading h2 {
	color:#fff!important;
	font-weight: 700;
}

/* Search area (left panel on desktop) */
#interacta-search {
    width:100%;
	margin: 10px;
}

#interacta-search h2 {
	color:#fff!important;
}

#interacta-search textarea {
    width: 100%;
    height: 50px;
    font-size: 16px;
    margin-bottom: 10px;
    padding: 0;
    border: 0px solid #ccc;
    border-radius: 5px;
}

#interacta-search button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#interacta-search button:hover {
    background-color: #333;
}

/* Results area (right panel on desktop) */
#interacta-results {
    width: 100%;
    border: 0px solid #ccc;
    border-radius: 5px;
	margin: 10px;
}

#interacta-results h2 {
    margin-top: 0;
	font-size:1.4em!important;
	font-weight: 700!important;
}

hr {
	border-top: 1px solid #ececec !important;
	color:transparent!important;
	margin: 20px 0!important;
}

#results-content {
    font-size: 0.95rem!important;
    line-height: 1.5;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    #interacta-container {
        flex-direction: column; /* Stack search and results */
    }
	
	#interacta-container-heading {
	padding: 0 20px;
}
	
	#interacta-container {
	width: 100%;
}
	
}