/* ============================================================
   サイドバー検索窓：ダーク＆ピンクアイコン（最終ブラッシュアップ）
   ============================================================ */

/* 1. 外側の箱：ここで高さを固定し、1枚のシームレスな箱にする */
#kimoota-side-searchform .side-search-inner {
    display: flex !important;
    align-items: stretch !important;
    background-color: #2c313d !important; /* サイドバーの他ウィジェットと同一トーン */
    border-radius: 6px !important;
    height: 48px !important; /* MV下の高さに完全同期 */
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.08) !important; /* 薄い境界線を引く */
    margin: 10px 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* 2. 入力エリア：完全に透過させてシームレスにする */
#kimoota-side-searchform .side-search-input {
    flex: 1 !important;
    width: 0 !important; /* Flexboxに計算を任せる */
    min-width: 0 !important;
    
    /* 透過させることで、シームレスな「1つの箱」に見せる */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    color: #ffffff !important; /* 入力文字を白に */
    padding: 0 15px !important;
    font-size: 15px !important;
    height: 100% !important;
    outline: none !important;
}

/* 3. プレースホルダー（記事を探す…）の色 */
#kimoota-side-searchform .side-search-input::placeholder {
    color: rgba(255,255,255,0.3) !important;
}

/* 4. 検索ボタン：入力欄より少し暗い黒で、高級感を出す */
#kimoota-side-searchform .side-search-btn {
    flex: 0 0 54px !important;
    background-color: rgba(0,0,0,0.3) !important; /* 面倒なので透過黒 */
    border-radius: 0 !important; /* 物理的な丸角リセット */
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    border: none !important;
}

/* ホバー：ボタンが動いている感を出す */
#kimoota-side-searchform .side-search-btn:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

/* 5. 虫眼鏡アイコン（SVG）：純白で太めに */
#kimoota-side-searchform .side-search-btn svg {
    stroke: #ff8c69 !important; /* サーモンピンクを最優先適用 */
    stroke-width: 3 !important; /* 少し太くして視認性を確保 */
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}