/* ===== 管理者投稿の視覚強調（カード色・帯） ===== */
li.activity-item.kst-is-admin {
    background: #f6f7ff;
    border-radius: 10px;
    position: relative;
    overflow: visible;
}

li.activity-item.kst-is-admin::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 4px;
    background: #3a46c8;
}

/* バッジ */
.kst-badge-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    color: #fff;
    background: #e73f70;
    vertical-align: middle;
}

.kst-badge-admin::before {
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 16l-3-8 6 3 4-7 4 7 6-3-3 8H5zm-1 2h16v2H4v-2z'/%3E%3C/svg%3E") no-repeat center/14px 14px;
}

/* アバター重ね型 */
.kst-badge-admin--overlay {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #e73f70;
    text-indent: -9999px;
    overflow: hidden;
    box-shadow: 0 0 0 2px #fff;
}

.kst-badge-admin--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3C/svg%3E") no-repeat center/12px 12px;
}

.activity-avatar,
.yz-item-avatar,
.youzify-item .yz-avatar {
    position: relative;
}

/* ===== PC帯メニュー ===== */
@media (min-width:768px) {
    .kst-site-nav {
        background: #454a9d;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    }

    .kst-site-nav .menu,
    .kst-site-nav .youzify-navbar {
        display: flex;
        gap: 24px;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 8px 16px;
    }

    .kst-site-nav .menu > li > a,
    .kst-site-nav .youzify-navbar > li > a {
        display: block;
        color: #fff;
        padding: 10px 14px;
        border-radius: 6px;
    }

    .kst-site-nav .menu > li > a:hover,
    .kst-site-nav .menu > li.current-menu-item > a {
        background: rgba(255, 255, 255, .16);
    }

    .kst-site-nav .menu-utility {
        margin-left: auto;
        display: flex;
        gap: 14px;
        align-items: center;
    }
}

/* ドロップダウン */
@media (min-width:1024px) {
    .kst-site-nav .menu li {
        position: relative;
    }

    .kst-site-nav .menu li ul.sub-menu {
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 240px;
        padding: 8px;
        margin-top: 6px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        transition: .18s ease;
        z-index: 1000;
    }

    .kst-site-nav .menu li:hover > ul.sub-menu,
    .kst-site-nav .menu li:focus-within > ul.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .kst-site-nav .menu li ul.sub-menu a {
        color: #333;
        padding: 10px 12px;
        display: block;
        border-radius: 6px;
    }

    .kst-site-nav .menu li ul.sub-menu a:hover {
        background: #f3f5ff;
    }
}

/* ===== フィルタUI（検索／表示する記事／—すべて—） ===== */

/* 上部1行の外枠 */
.kst-filters-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 12px;
    flex-wrap: wrap;
}

/* 自作フィルタのラッパー */
#kst-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ラベル（独自クラスで誤爆防止） */
.kst-filter-label {
  background: #3e3cc7;
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  margin-right: 4px;
  white-space: nowrap;
  margin-left: 20px; /* ← 左に20pxの余白を追加 */
}

/* セレクト共通 */
#kst-filter-row select,
.kst-activity-filter select {
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

/* 後方互換：旧 .kst-activity-filter の余白のみ残す */
.kst-activity-filter {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 16px;
}

/* 旧実装の“ラベル風div”を無効化（青い小片の原因） */
.kst-activity-filter div {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
}

/* BuddyPress標準の .select-wrap をSPではblockに（詰まり回避） */
#activity-filter-select .select-wrap {
    display: block;
}

/* BuddyPress標準の .title は非表示（誤表示対策） */
#dir-filters .select-wrap .title {
    display: none !important;
}

/* スマホ最適化 */
@media (max-width:767px) {
    .kst-filters-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 8px 0 12px;
    }

    #kst-filter-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    #kst-filter-row > div {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .kst-filter-label {
        padding: 4px 8px;
        font-size: 12px;
        margin: 0;
    }

    #kst-filter-row select {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 36px;
    }

    /* 検索と既存セレクトも100%に */
    #dir-activity-search,
    #activity-dir-search,
    .dir-search {
        width: 100%;
    }

    #dir-activity-search input[type="search"],
    #activity-dir-search input[type="search"],
    .dir-search input[type="search"] {
        width: 100%;
    }

    #activity-filter-select,
    #activity-filter-select .select-wrap,
    .bp-dir-dropdown,
    .bp-dir-dropdown select,
    #activity-filter-by {
        width: 100%;
    }
}

/* 会員のみ時：管理者バッジ/帯を隠す（JSと二重で担保） */
.kst-filter-member .kst-badge-admin {
    display: none !important;
}

.kst-filter-member li.activity-item.kst-is-admin::before {
    display: none !important;
}



/* カテゴリ側のラッパーの並び調整（必要に応じて） */
.kst-category-labeled { align-items:center; gap:8px; }




/* ── ラベルの見た目を統一（表示する記事 / カテゴリ） ── */
.kst-label,
.kst-activity-filter > div,              /* 「表示する記事」用のラベル */
.kst-category-labeled .kst-filter-label  /* 「カテゴリ」用のラベル */
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;          /* セレクトと同じ高さ */
  padding: 0 10px;
  background: #3e3cc7;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 5px;
}

/* ── フィルタ行の並びと余白 ── */
.kst-filters-row {
  display: flex;
  align-items: center;
  gap: 12px;             /* 要素同士の基本間隔 */
  margin: 6px 0 12px;
  flex-wrap: wrap;
}

/* 「表示する記事」ブロック：検索との間に余白、内部はやや詰める */
.kst-activity-filter {
  display: flex;
  align-items: center;
  gap: 8px;              /* ラベルとセレクトの間隔 */
  margin-left: 20px;     /* 検索→表示する記事 の間隔（ご希望どおり20px） */
}

/* カテゴリ側もラベル手前に20pxの余白を入れて左右バランス */
.kst-category-labeled .kst-filter-label {
  margin-left: 20px;
}

/* セレクトの高さを統一（BuddyPressの select-wrap 内も含めて） */
.kst-filters-row select,
.kst-filters-row .select-wrap select,
#kst-filter-row select,
.kst-activity-filter select {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

/* select-wrap を横並び中央揃えに（環境差対策） */
#dir-filters .select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* スマホは縦並びで間延びしないように */
@media (max-width: 768px) {
  .kst-filters-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .kst-activity-filter { margin-left: 0; }
  .kst-category-labeled .kst-filter-label { margin-left: 0; }
}



/* ==== カテゴリラベルの角丸強調 ==== */
.kst-category-labeled .kst-filter-label {
  background: #3e3cc7;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px; /* 完全な丸み */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 表示する記事と高さ・位置を完全一致させる */
.kst-activity-filter > div,
.kst-category-labeled .kst-filter-label {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* セレクトボックスの角も少し丸める */
.kst-category-labeled select,
.kst-activity-filter select {
  border-radius: 8px;
}