/* 全站搜尋彈窗 — 前台樣式
   顏色與距頂高度由外掛依設定以 CSS 變數覆寫(見 .site-search-modal) */

.site-search-modal {
    --ssm-panel-bg: #0444a0; /* 藍色面板底色,後台可改 */
    --ssm-accent:   #ffffff; /* 強調色(多分頁時的高亮),後台可改 */
    --ssm-top:      0px;      /* 距頂高度,JS 會依 header 高度自動填 */
}

/* === 放大鏡按鈕:僅作用於內建 <button>。
       若改用 Elementor Icon widget,外觀由 Elementor 控制,本規則不影響它 === */
button.site-search-toggle {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
button.site-search-toggle:hover {
    opacity: .8;
}

/* === 外層:覆蓋 header 以下整個區域,僅作為「點外面關閉」的範圍 + 淡遮罩 ===
       (頁面只被淡淡遮住,不是整片藍色) */
.site-search-modal {
    position: fixed;
    top: var(--ssm-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .15); /* 淡遮罩;想完全不遮罩可改成 transparent */
    opacity: 0;
    transition: opacity .2s ease;
}
.site-search-modal.is-open {
    opacity: 1;
}

/* === 藍色面板:只在 header 下方一條(部分覆蓋) === */
.site-search-panel {
    background: var(--ssm-panel-bg);
    padding: 64px 0;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .18);
    transform: translateY(-12px);
    transition: transform .26s ease;
}
.site-search-modal.is-open .site-search-panel {
    transform: translateY(0);
}

/* 內容容器:置中、限制寬度 */
.site-search-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* === 分頁(僅在設定 2 個以上分頁時出現) === */
.site-search-tabs {
    display: flex;
    gap: 40px;
    margin-bottom: 22px;
}
.site-search-tab {
    background: none;
    border: 0;
    position: relative;
    color: rgba(255, 255, 255, .7);
    font-size: 20px;
    font-weight: 700;
    padding: 6px 4px 12px;
    cursor: pointer;
}
.site-search-tab:hover {
    color: #fff;
}
.site-search-tab.is-active {
    color: var(--ssm-accent);
}
.site-search-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--ssm-accent);
}

/* === 白色膠囊搜尋框,放大鏡在框內右側 === */
.site-search-field {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    height: 64px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    overflow: hidden;
}
.site-search-field:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 10px 30px rgba(0, 0, 0, .18);
}
.site-search-input {
    flex: 1;
    font-size: 19px;
    padding: 0 8px 0 30px;
    height: 100%;
}
.site-search-submit {
    cursor: pointer;
    height: 100%;
    padding: 0 26px 0 14px;
    display: inline-flex;
    align-items: center;
}

/* === 強制移除佈景主題/Elementor 為 input、button 加上的邊框等樣式 ===
       以 #id 提高優先序,確保蓋過佈景主題 */
#site-search-modal .site-search-form,
#site-search-modal .site-search-input,
#site-search-modal .site-search-submit {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
#site-search-modal .site-search-form {
    margin: 0 !important;
    padding: 0 !important;
}
#site-search-modal .site-search-input {
    color: #222 !important;
}
#site-search-modal .site-search-input::placeholder {
    color: #8a8f98 !important;
    opacity: 1;
}
#site-search-modal .site-search-submit {
    color: #555 !important;
}
#site-search-modal .site-search-submit:hover {
    color: var(--ssm-panel-bg) !important;
}

/* === 手機 === */
@media (max-width: 600px) {
    .site-search-panel { padding: 40px 0; }
    .site-search-inner { padding: 0 16px; }
    .site-search-field { height: 56px; }
    .site-search-input { font-size: 16px; padding-left: 22px; }
    .site-search-submit { padding: 0 18px 0 10px; }
    .site-search-tabs { gap: 24px; }
    .site-search-tab { font-size: 17px; }
}