/* Style the main wrapper around the search component. */
.adv-wrap {
    width: 100%;
}

/* Style the search form layout. */
.adv-form {
    width: 100%;
}

/* Highlight matched text inside excerpts. */
.adv-highlight {
    background: #fff3a3;
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

/* Slight visual feedback while loading. */
.adv-form.is-loading {
    opacity: 0.85;
}

/* Style the row that holds the input and button. */
.adv-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

/* Let the search input take the available width. */
.adv-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.2;
}

/* Style the submit button. */
.adv-button {
    flex: 0 0 auto;
    padding: 12px 18px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.2;
}

/* Style the small status text. */
.adv-status {
    margin-top: 10px;
    font-size: 14px;
}

/* Add spacing above result areas. */
.adv-inline-results,
.adv-results {
    margin-top: 16px;
}

/* Style the list wrapper for results. */
.adv-results-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Style each result item card. */
.adv-result {
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Style the result title wrapper. */
.adv-result-title {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.3;
}

/* Style the result title link. */
.adv-result-title a {
    text-decoration: none;
}

/* Style the post type meta line. */
.adv-result-meta {
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.7;
}

/* Style the excerpt text. */
.adv-result-excerpt {
    font-size: 14px;
    line-height: 1.5;
}

/* Style the empty results message. */
.adv-empty {
    padding: 14px;
    border: 1px dashed #ccc;
    border-radius: 8px;
}

/* Style AJAX error messages. */
.adv-error {
    padding: 14px;
    border: 1px solid #d9a3a3;
    border-radius: 8px;
    font-size: 14px;
}

/* Stack the input and button on smaller screens. */
@media (max-width: 768px) {
    .adv-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .adv-button {
        width: 100%;
    }
}