/* 全域搜尋樣式 - Global Search Styles */

/* 搜尋結果面板滑動動畫 */
.search-result {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    transform-origin: top;
}

.search-result.show,
.search-result.active {
    max-height: 600px;
    opacity: 1;
}

/* 搜尋框和按鈕樣式 */
.search-input-box {
    position: relative;
}

#txtAutoComplete {
    padding-right: 50px !important;
}

#btnSearch {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

#btnSearch:hover {
    color: #f08300;
}

#btnSearch:active {
    transform: translateY(-50%) scale(0.95);
}

/* 快速搜尋結果列表樣式 */
/*.result-list {
    list-style: none;
    padding: 0;
    margin: 0;
}*/

.result-list .result-item {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

.result-list .result-item:hover {
    background-color: #f5f5f5;
}

.result-list .result-item:last-child {
    border-bottom: none;
}

/* 產品圖片 */
.result-list .product-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-right: 15px;
    flex-shrink: 0;
}

/* 產品詳細資訊 */
.result-list .product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 產品標題 */
.result-list .product-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* 產品類型 */
.result-list .product-type {
    font-size: 14px;
    color: #666;
}

/* 產品連結群組 */
.result-list .product-links {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 5px;
}

.result-list .product-links a {
    color: #f08300;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.result-list .product-links a:hover {
    color: #d07200;
    text-decoration: underline;
}

.result-list .product-links span {
    color: #ccc;
    font-size: 13px;
}

/* 無結果訊息 */
.result-list .no-results {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* 蓋版搜尋介面樣式 */
#menu-search .search-overlay-container {
    padding: 20px;
    position: relative;
}

#menu-search .search-input-wrapper {
    /* position: relative;
    margin-bottom: 20px; */
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 1;
    font-size: 16px;
}

#menu-search .overlay-search-input {
    /* width: 100%;
    padding: 15px 60px 15px 20px;
    font-size: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease; */
    width: 100%;
    height: 60px;
    padding: 0 5em;
    font-size: 1em;
    border: 0;
    background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF7GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA4LTA3VDE3OjEyOjE0KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wOC0wN1QxNzozMzozMSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wOC0wN1QxNzozMzozMSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkZjZhYjYwZS1lY2U5LTA0NGUtOTMwYy03NmMxYWQ4YWM3YzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzhlNjA0NzQtYTIyMi02NTQ3LThjNmQtNTlmM2UzYzI5YTU4IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NzhlNjA0NzQtYTIyMi02NTQ3LThjNmQtNTlmM2UzYzI5YTU4Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3OGU2MDQ3NC1hMjIyLTY1NDctOGM2ZC01OWYzZTNjMjlhNTgiIHN0RXZ0OndoZW49IjIwMTktMDgtMDdUMTc6MTI6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZGY2YWI2MGUtZWNlOS0wNDRlLTkzMGMtNzZjMWFkOGFjN2M0IiBzdEV2dDp3aGVuPSIyMDE5LTA4LTA3VDE3OjMzOjMxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++7RUYAAAAfBJREFUOI2l1E9IVUEUx/HP00wkXn8g7I+7kJZFtCiKNoEXWgURUbYIaiP9oZZlQRARVBgStNRNYFC0aCM4bVoWRRS0KVdSQVS0CdHUtMWM8RrvBR/94HHvDOd+3zkzv3NqPT09KrQNW9CR1rP4jmeNQSGEJR+uKIGtwSPswgJa0v4C5jGHExityqYlW3fjK/ahhh8YwxOMo452jGAAa8ugjZl24zVW4inO4kMW344juIvzmMGlqkzreJWed3C8BAi/cB9H8RN9RVEsuZRF6FWswgRu4ltZWQ0aw6BY/mAV9AymcFk80+VoGJPYXBTF/hy6B9Np/XKZQPiIT2jFphxaT+8dKbAZjYs225FDZ9P7nHiuzWi1aL2ZHPpetNE0tjcJ3Z2eb3PoZ7wQj+FwE8Be0WJ1PM6h0C/67hgOLgO4XrReHbdDCHNl0OcYEvv+ASqnDDrFvu8S3TKQBzS26a0UeAgP8Q7XxEb4jXViySfRlr4ZFW//H9Wy0deB02KHSbBa+s2nyubTH21I5Q+jP4Twt2nyKTWVytmZsm0RndEq2ueNeJlbcU+00incKIqisyrTMm0Up9NEtt+G6ziXKhxazLhsSOf6UrE/i4viEV1IGXfhQF5+s1oIIfSL43ISe4ui6P1fKAghXBGz7QshjPwBJ7V2UeQkZYMAAAAASUVORK5CYII=) 1.5em center no-repeat;
    outline: 0;
    border-radius: 50px;
    box-shadow: none;
    -webkit-appearance: none;
}

#menu-search .overlay-search-input:focus {
    border-color: #f08300;
}

#menu-search .overlay-search-btn {
    /* position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: #f08300;
    color: white;
    cursor: pointer;
    font-size: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease; */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

#menu-search .overlay-search-btn:hover {
    /* background-color: #d07200; */
    color: #f08300;
}

#menu-search .overlay-search-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* 蓋版搜尋快速結果 */
#menu-search .overlay-search-result {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
}

#menu-search .overlay-search-result.active {
    max-height: 500px;
    opacity: 1;
    overflow-y: auto;
}

/* 響應式設計 */
@media screen and (max-width: 768px) {
    .result-list .product-image {
        width: 60px;
        height: 60px;
        margin-right: 10px;
    }
    
    .result-list .product-title {
        font-size: 14px;
    }
    
    .result-list .product-type {
        font-size: 12px;
    }
    
    .result-list .product-links a {
        font-size: 12px;
    }
    
    #menu-search .overlay-search-input {
        font-size: 16px;
        padding: 12px 50px 12px 15px;
    }
}
