/**
 * MKM Bix - Search
 * Search page styles
 * @package MKM_Bix
 */

/* ==================== SEARCH HEADER ==================== */
.mkm-search-header {
    background: var(--mkm-gray-900);
    color: var(--mkm-white);
    padding: var(--mkm-space-12) 0;
    margin-bottom: var(--mkm-space-8);
    text-align: center;
}

/* ==================== SEARCH TITLE ==================== */
.mkm-search-title {
    font-size: var(--mkm-fs-3xl);
    margin-bottom: var(--mkm-space-2);
}

.mkm-search-title span {
    color: var(--mkm-primary);
}

/* ==================== SEARCH QUERY ==================== */
.mkm-search-query {
    font-size: var(--mkm-fs-lg);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--mkm-space-6);
}

/* ==================== SEARCH FORM LARGE ==================== */
.mkm-search-form-large {
    max-width: 600px;
    margin: 0 auto;
}

.mkm-search-form-large form {
    display: flex;
    gap: var(--mkm-space-3);
}

.mkm-search-form-large input[type="search"] {
    flex: 1;
    padding: var(--mkm-space-4) var(--mkm-space-6);
    border: none;
    border-radius: var(--mkm-radius-full);
    font-size: var(--mkm-fs-base);
}

.mkm-search-form-large input[type="search"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--mkm-primary-rgb), 0.3);
}

.mkm-search-form-large button {
    padding: var(--mkm-space-4) var(--mkm-space-8);
    background: var(--mkm-primary);
    color: var(--mkm-white);
    border: none;
    border-radius: var(--mkm-radius-full);
    font-weight: var(--mkm-fw-semibold);
    cursor: pointer;
    transition: all var(--mkm-transition-fast);
}

.mkm-search-form-large button:hover {
    background: var(--mkm-primary-dark);
}

/* ==================== SEARCH RESULTS INFO ==================== */
.mkm-search-results-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mkm-space-6);
    padding: var(--mkm-space-4);
    background: var(--mkm-white);
    border-radius: var(--mkm-radius);
    box-shadow: var(--mkm-shadow-sm);
}

.mkm-search-results-count {
    font-size: var(--mkm-fs-sm);
    color: var(--mkm-gray-600);
}

.mkm-search-results-count strong {
    color: var(--mkm-gray-900);
}

/* ==================== SEARCH RESULT ITEM ==================== */
.mkm-search-result {
    display: flex;
    gap: var(--mkm-space-5);
    padding: var(--mkm-space-6);
    background: var(--mkm-white);
    border-radius: var(--mkm-radius-lg);
    margin-bottom: var(--mkm-space-4);
    box-shadow: var(--mkm-shadow);
    transition: all var(--mkm-transition);
}

.mkm-search-result:hover {
    transform: translateY(-2px);
    box-shadow: var(--mkm-shadow-lg);
}

.mkm-search-result-thumbnail {
    flex-shrink: 0;
    width: 200px;
    height: 140px;
    border-radius: var(--mkm-radius);
    overflow: hidden;
}

.mkm-search-result-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mkm-search-result-content {
    flex: 1;
    min-width: 0;
}

.mkm-search-result-type {
    display: inline-block;
    padding: 2px 8px;
    background: var(--mkm-gray-100);
    color: var(--mkm-gray-600);
    font-size: var(--mkm-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--mkm-radius-sm);
    margin-bottom: var(--mkm-space-2);
}

.mkm-search-result-title {
    font-size: var(--mkm-fs-lg);
    font-weight: var(--mkm-fw-semibold);
    margin-bottom: var(--mkm-space-2);
}

.mkm-search-result-title a {
    color: var(--mkm-gray-900);
}

.mkm-search-result-title a:hover {
    color: var(--mkm-primary);
}

/* Highlight search term */
.mkm-search-result-title mark,
.mkm-search-result-excerpt mark {
    background: var(--mkm-warning-light);
    color: inherit;
    padding: 0 2px;
}

.mkm-search-result-excerpt {
    font-size: var(--mkm-fs-sm);
    color: var(--mkm-gray-600);
    line-height: var(--mkm-lh-relaxed);
    margin-bottom: var(--mkm-space-3);
}

.mkm-search-result-meta {
    display: flex;
    align-items: center;
    gap: var(--mkm-space-4);
    font-size: var(--mkm-fs-xs);
    color: var(--mkm-gray-500);
}

.mkm-search-result-meta span {
    display: flex;
    align-items: center;
    gap: var(--mkm-space-1);
}

.mkm-search-result-meta svg {
    width: 14px;
    height: 14px;
}

/* ==================== NO RESULTS ==================== */
.mkm-no-results {
    text-align: center;
    padding: var(--mkm-space-16);
    background: var(--mkm-white);
    border-radius: var(--mkm-radius-lg);
}

.mkm-no-results-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--mkm-space-6);
    color: var(--mkm-gray-400);
}

.mkm-no-results-title {
    font-size: var(--mkm-fs-2xl);
    font-weight: var(--mkm-fw-semibold);
    color: var(--mkm-gray-700);
    margin-bottom: var(--mkm-space-2);
}

.mkm-no-results-text {
    font-size: var(--mkm-fs-base);
    color: var(--mkm-gray-500);
    margin-bottom: var(--mkm-space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.mkm-no-results-search {
    max-width: 400px;
    margin: 0 auto var(--mkm-space-6);
}

.mkm-no-results-search form {
    display: flex;
    gap: var(--mkm-space-2);
}

.mkm-no-results-search input {
    flex: 1;
    padding: var(--mkm-space-3) var(--mkm-space-4);
    border: 2px solid var(--mkm-gray-200);
    border-radius: var(--mkm-radius-full);
}

.mkm-no-results-search input:focus {
    outline: none;
    border-color: var(--mkm-primary);
}

.mkm-no-results-search button {
    padding: var(--mkm-space-3) var(--mkm-space-6);
    background: var(--mkm-primary);
    color: var(--mkm-white);
    border: none;
    border-radius: var(--mkm-radius-full);
    cursor: pointer;
}

/* ==================== SEARCH SUGGESTIONS ==================== */
.mkm-search-suggestions {
    margin-top: var(--mkm-space-8);
}

.mkm-search-suggestions-title {
    font-size: var(--mkm-fs-lg);
    font-weight: var(--mkm-fw-semibold);
    margin-bottom: var(--mkm-space-4);
}

.mkm-search-suggestions-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mkm-space-2);
}

.mkm-search-suggestion {
    padding: var(--mkm-space-2) var(--mkm-space-4);
    background: var(--mkm-gray-100);
    color: var(--mkm-gray-700);
    font-size: var(--mkm-fs-sm);
    border-radius: var(--mkm-radius-full);
    transition: all var(--mkm-transition-fast);
}

.mkm-search-suggestion:hover {
    background: var(--mkm-primary);
    color: var(--mkm-white);
}

/* ==================== SEARCH FILTERS ==================== */
.mkm-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mkm-space-3);
    margin-bottom: var(--mkm-space-6);
}

.mkm-search-filter {
    padding: var(--mkm-space-2) var(--mkm-space-4);
    background: var(--mkm-white);
    color: var(--mkm-gray-700);
    font-size: var(--mkm-fs-sm);
    border: 1px solid var(--mkm-gray-200);
    border-radius: var(--mkm-radius-full);
    cursor: pointer;
    transition: all var(--mkm-transition-fast);
}

.mkm-search-filter:hover {
    border-color: var(--mkm-primary);
    color: var(--mkm-primary);
}

.mkm-search-filter.is-active {
    background: var(--mkm-primary);
    color: var(--mkm-white);
    border-color: var(--mkm-primary);
}