/**
 * Diesel Help Bulletin Search — Frontend Styles
 *
 * Filter interface only. No result card styles — Elementor handles
 * result display via the Loop Grid widget.
 *
 * Scoped to .dhbs-search-container. Uses CSS custom properties so the
 * theme/Elementor can override colours without touching plugin files.
 *
 * Design tokens match the DH brand:
 *   --dhbs-primary: #28B34B (green CTA)
 *   --dhbs-dark:    #15141C (headings)
 *   --dhbs-teal:    #003D3A (links)
 *   --dhbs-body:    #7A7A7A (body text)
 *   --dhbs-bg:      #F0F4F4 (page background)
 *   --dhbs-heading-font: 'Oswald', sans-serif
 *   --dhbs-body-font:    'Roboto', sans-serif
 */
.dhbs-search-container {
    --dhbs-primary: #28B34B;
    --dhbs-primary-hover: #22A043;
    --dhbs-dark: #15141C;
    --dhbs-teal: #003D3A;
    --dhbs-body: #7A7A7A;
    --dhbs-bg: #F0F4F4;
    --dhbs-border: #E0E5E5;
    --dhbs-radius: 6px;
    --dhbs-heading-font: 'Oswald', sans-serif;
    --dhbs-body-font: 'Roboto', sans-serif;

    font-family: var(--dhbs-body-font);
    color: var(--dhbs-body);
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* --- Search Input --- */
.dhbs-search-input-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.dhbs-search-input-row {
    display: flex;
    gap: 0;
    /* border: 2px solid var(--dhbs-border); */
    border-radius: var(--dhbs-radius);
    overflow: hidden;
    background: #efefef;
}

.dhbs-keyword-input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: 16px;
    font-family: var(--dhbs-body-font);
    color: var(--dhbs-dark);
    outline: none;
    background-color: transparent !important;
    border-width: 0 !important;
}

.dhbs-keyword-input::placeholder {
    color: #AAA;
}

.dhbs-filter-btn {
    border: none !important;
    background: var(--dhbs-primary);
    color: #fff;
    padding: 0 24px;
    cursor: pointer;
    font-family: var(--dhbs-body-font);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    white-space: nowrap !important;
    border-radius: 0 4px 4px 0 !important;
}

.dhbs-filter-btn:hover {
    background: var(--dhbs-primary-hover);
}

/* --- Tag Autocomplete Dropdown --- */
.dhbs-tag-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--dhbs-border);
    border-top: none;
    border-radius: 0 0 var(--dhbs-radius) var(--dhbs-radius);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow-y: auto;
}

.dhbs-tag-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 15px;
    color: var(--dhbs-dark);
    border-bottom: 1px solid #F5F5F5;
}

.dhbs-tag-dropdown-item:hover {
    background: var(--dhbs-bg);
    color: var(--dhbs-teal);
}

.dhbs-tag-dropdown-item:last-child {
    border-bottom: none;
}

/* --- Selected Tag Chips --- */
.dhbs-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.dhbs-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dhbs-bg);
    border: 1px solid var(--dhbs-border);
    border-radius: 6px;
    padding: 4px 8px 4px 12px;
    font-size: 14px;
    color: var(--dhbs-teal);
}

.dhbs-tag-chip__remove {
    background: none;
    border: none !important;    /* color: var(--dhbs-body) !important; */
    cursor: pointer;
    font-size: 18px !important;
    line-height: 1;
    padding: 2px 8px 2px 6px!important;
    transition: color 0.15s !important;
    text-align: center;
}

/* --- Filters Row --- */
.dhbs-filters-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dhbs-filter-group {
    flex: 1;
    min-width: 200px;
}

.dhbs-filter-label {
    display: block;
    font-family: var(--dhbs-heading-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--dhbs-dark);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dhbs-filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--dhbs-border);
    border-radius: var(--dhbs-radius);
    font-size: 16px;
    font-family: var(--dhbs-body-font);
    color: var(--dhbs-dark);
    background: #fff;
    cursor: pointer;
}

.dhbs-filter-select:focus {
    border-color: var(--dhbs-primary);
    outline: none;
}

.dhbs-filter-select:disabled {
    background: #F5F5F5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .dhbs-filters-row {
        flex-direction: column;
    }
}