/* 基础容器样式（移动端优先） */
.custom-search-container {
    width: 100%; /* 在手机上默认占满一行 */
    margin: 10px 0; /* 手机端上下留间距 */
    transition: all 0.4s ease;
}

/* 桌面端/iPad 横屏（992px 以上）开启拉伸动画 */
@media (min-width: 992px) {
    .custom-search-container {
        flex-grow: 0; /* 初始不占位 */
        width: auto; /* 宽度由内容决定 */
        min-width: 260px; /* 初始宽度 */
        margin: 0 1.5rem; /* 左右留空 */
    }

        /* 仅在桌面端实现点击拉伸 */
        .custom-search-container:focus-within {
            flex-grow: 1;
            max-width: 800px; /* 防止在超宽屏下无限制拉伸 */
        }
}

/* iPad/平板竖屏（768px - 991px） */
@media (min-width: 768px) and (max-width: 991px) {
    .custom-search-container {
        min-width: 200px;
        margin: 0 10px;
    }
}

/* 细节美化：圆角和边框逻辑 */
.search-group {
    display: flex;
    width: 100%;
    border-radius: 50px;
    overflow: hidden;
    background: #fff;
}

.search-input {
    border-radius: 50px 0 0 50px !important;
    border-right: none;
    padding-left: 1.2rem;
}

.btn-search {
    border-radius: 0 50px 50px 0 !important;
    background-color: transparent;
    padding-right: 1.2rem;
}

.search-input:focus {
    box-shadow: none;
    border-color: #6c757d;
}