/* ==========================================================
   Kanto AND Search - フィルターUI スタイル
   基調色: #008b93
   ========================================================== */

/* ---- フィルターリンク共通 --------------------------------- */
.rec_cat_list a.kanto-filter-link {
    display:     inline-block;
    padding:     4px 10px;
    border:      1px solid #ccc;
    border-radius: 3px;
    transition:  background 0.15s, color 0.15s, border-color 0.15s;
    cursor:      pointer;
    text-decoration: none;
}

.rec_cat_list a.kanto-filter-link:hover {
    border-color: #008b93;
    color:        #008b93;
}

/* ---- 選択中のフィルター ----------------------------------- */
.rec_cat_list li.kanto-filter-active a.kanto-filter-link {
    background-color: #008b93;
    border-color:     #008b93;
    color:            #fff !important;
    font-weight:      bold;
}

/* ---- AND検索バー ----------------------------------------- */
#kanto-and-search-bar {
    background:    #f0fafb;
    border:        2px solid #008b93;
    border-radius: 6px;
    padding:       12px 16px;
    margin:        12px 0 18px;
}

#kanto-and-search-bar .kanto-bar-inner {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         10px;
}

/* AND バッジ */
#kanto-and-search-bar .kanto-and-badge {
    display:       none; /* 2条件以上で JS が show() する */
    background:    #008b93;
    color:         #fff;
    font-size:     11px;
    font-weight:   bold;
    padding:       2px 8px;
    border-radius: 20px;
    white-space:   nowrap;
}

/* 選択中ラベル */
#kanto-and-search-bar .kanto-selected-labels {
    flex:      1;
    font-size: 14px;
    color:     #555;
    min-width: 120px;
}

#kanto-and-search-bar .kanto-selected-labels .kanto-cross {
    margin:      0 6px;
    color:       #008b93;
    font-weight: bold;
}

/* ボタン群 */
#kanto-and-search-bar .kanto-bar-actions {
    display: flex;
    gap:     8px;
}

#kanto-and-search-bar .kanto-search-btn {
    background:    #008b93;
    color:         #fff;
    border:        none;
    padding:       9px 18px;
    border-radius: 4px;
    font-size:     14px;
    font-weight:   bold;
    cursor:        pointer;
    transition:    background 0.15s;
    white-space:   nowrap;
}

#kanto-and-search-bar .kanto-search-btn:hover:not(:disabled) {
    background: #006b70;
}

#kanto-and-search-bar .kanto-search-btn:disabled {
    background: #ccc;
    cursor:     not-allowed;
}

#kanto-and-search-bar .kanto-reset-btn {
    background:    #888;
    color:         #fff;
    border:        none;
    padding:       9px 14px;
    border-radius: 4px;
    font-size:     13px;
    cursor:        pointer;
    transition:    background 0.15s;
    white-space:   nowrap;
}

#kanto-and-search-bar .kanto-reset-btn:hover {
    background: #555;
}

/* ---- 現在の絞り込み通知バー ------------------------------ */
.kanto-filter-notice {
    background:    #e6f7f8;
    border:        1px solid #008b93;
    border-radius: 5px;
    padding:       10px 16px;
    margin-bottom: 16px;
    font-size:     14px;
    color:         #555;
}

.kanto-filter-notice strong {
    color: #006b70;
}

/* ---- レスポンシブ ---------------------------------------- */
@media ( max-width: 600px ) {
    #kanto-and-search-bar .kanto-bar-inner {
        flex-direction: column;
        align-items:    flex-start;
    }

    #kanto-and-search-bar .kanto-bar-actions {
        width: 100%;
    }

    #kanto-and-search-bar .kanto-search-btn,
    #kanto-and-search-bar .kanto-reset-btn {
        flex:       1;
        text-align: center;
    }
}