/* 1. 移除搜索表單容器的默認背景 */
/* 
   Elementor 搜索表單通常有一個容器元素，可能帶有背景色。
   此規(guī)則將其背景設為透明，以融入父容器的背景。
*/
selector .elementor-search-form__container {
    background-color: transparent !important;
}

/* 2. 定制搜索輸入框的樣式 */
/* 
   此規(guī)則針對搜索輸入框（input[type="search"]）進行樣式重置和美化。
   - background-color: 設置輸入框的背景色。
   - border: none; 移除默認的邊框。
   - outline: none; 移除瀏覽器在元素獲得焦點時顯示的默認輪廓。
   - border-radius: 0px; 移除圓角，使輸入框呈現(xiàn)直角。
   - padding: 增加輸入框內(nèi)部的文字與邊框之間的距離。
   - width: 100%; 使輸入框填充其父容器的可用寬度。
   - box-sizing: border-box; 確保 padding 和 border 不會增加元素的總寬度。
*/
selector input[type="search"] {
    background-color: #fff; /* 輸入框背景色 */
    border: none; /* 移除默認邊框 */
    outline: none; /* 移除默認焦點輪廓 */
    border-radius: 0px; /* 移除圓角 */
    padding: 10px 15px; /* 增加內(nèi)邊距 */
    width: 100%; /* 填充可用寬度 */
    box-sizing: border-box; /* 盒模型調(diào)整 */
    /* margin-right: 20px; */ /* 如果需要輸入框與按鈕之間有間距，可取消注釋 */
}

/* 3. 移除輸入框在焦點（點擊）時的樣式 */
/* 
   此規(guī)則專門處理輸入框在被點擊或獲得焦點時的樣式，
   確保移除任何默認的邊框、輪廓或陰影效果，以保持樣式一致性。
*/
selector input[type="search"]:focus {
    border: none; /* 再次確保焦點時沒有邊框 */
    outline: none; /* 再次確保焦點時沒有輪廓 */
    box-shadow: none; /* 移除可能的陰影效果 */
}

/* 4. （可選）定制搜索按鈕樣式 */
/* 
   如果您的搜索表單包含提交按鈕，此規(guī)則可以對其進行樣式定制。
   您可以根據(jù)需要調(diào)整背景色、文字顏色、邊框等。
*/
selector .elementor-search-form__submit {
    background-color: #4CAF50; /* 按鈕背景色 */
    color: white; /* 按鈕文字顏色 */
    border: none;
    border-radius: 0px;
    padding: 10px 15px;
    cursor: pointer;
    /* 其他樣式如字體大小、懸停效果等 */
}

/* 5. （高級）將整個搜索表單小部件水平居中 */
/* 
   將小部件本身居中通常有兩種方法：
   a) 如果小部件是塊級元素且有固定寬度，可以使用 margin: 0 auto;
   b) 更靈活的方法是將其設為 Flex 容器，并使用 justify-content 屬性。

   請注意：此方法的效果取決于小部件的默認行為及其父容器（Elementor 列）的布局。
   在某些情況下，您可能需要在列設置中調(diào)整對齊方式。
*/
selector {
    /* 方法一：如果小部件有固定寬度，且是塊級元素 */
    /* max-width: 400px; */ /* 設置一個最大寬度 */
    /* margin: 0 auto; */ /* 水平居中 */

    /* 方法二：將小部件容器設為 Flex 容器，以居中其內(nèi)部內(nèi)容（輸入框和按鈕） */
    display: flex; /* 將小部件容器設為 Flex 容器 */
    justify-content: center; /* 水平居中其內(nèi)部內(nèi)容 */
    align-items: center; /* 垂直居中（如果需要，例如當輸入框和按鈕高度不同時） */
    width: 100%; /* 確保 Flex 容器占據(jù)足夠?qū)挾?*/
}