/* "Mahsülü seç, sonuca geç." filtre kutusu (.zip-avantaj-search-container) - ortak tasarım
   Bu dosyayı kullanan sayfalar: Search, ZipAvantajlarıGör (UrunListesi), EnCokSatanlar, MarkaKampanyalar.
   Değişiklik burada yapılır, hepsine birden yansır. Bu dosyayı @section PageStyles'a eklemeyen
   bir sayfa bu tasarımdan etkilenmez. */

/* Arama input'unun içindeki büyüteç ikon butonu (bazı sayfalarda bu stil eksikti,
   buton varsayılan tarayıcı görünümüyle input'un ALTINDA ayrı bir "mini buton" gibi görünüyordu) */
.zip-avantaj-search-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

@media (max-width: 767.98px) {
    .zip-avantaj-search-container {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 10px;
        row-gap: 4px;
        border-radius: 35px !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

        .zip-avantaj-search-container[style*="display: none"],
        .zip-avantaj-search-container[style*="display:none"] {
            display: none !important;
        }

        .zip-avantaj-search-container > div:has(h2) {
            flex: 0 0 100% !important;
            width: 100% !important;
            margin-bottom: 0 !important;
            gap: 6px !important;
        }

            .zip-avantaj-search-container > div:has(h2) h2 {
                font-size: 22px !important;
            }

            .zip-avantaj-search-container > div:has(h2) p {
                font-size: 13px !important;
                margin: 0 !important;
                line-height: 1.3 !important;
            }

        .zip-avantaj-search-input-wrapper {
            flex: 1 1 auto !important;
            min-width: 120px;
            margin: 8px 0 !important;
        }

        .zip-avantaj-search-input {
            border: none !important;
            outline: none !important;
            background-color: #F5F5F7 !important;
        }

            .zip-avantaj-search-input:focus {
                outline: none !important;
                box-shadow: none !important;
            }

        .zip-avantaj-search-icon {
            width: 17px !important;
            height: 17px !important;
        }

        /* Ara butonu mobilde kaldırıldı: arama kutusundaki büyüteç ikonu zaten aynı işlevi görüyor (addTag + arama) */
        .zip-avantaj-search-container > div:has(#zipAvantajAraBtn) {
            display: none !important;
        }

        .selected-tags {
            flex: 0 0 100% !important;
            width: 100% !important;
            margin: 6px 0 0 0 !important;
            gap: 6px !important;
        }

            .selected-tags > div:first-child {
                margin: 0 !important;
                padding: 0 !important;
            }

            .selected-tags > div:first-child p {
                margin: 0 !important;
                line-height: 1 !important;
                font-size: 10px !important;
                font-weight: 600 !important;
                color: #000 !important;
            }

                .selected-tags > div:first-child p::after {
                    content: ":";
                }

        .tagLine {
            display: none !important;
        }

        .tags-container {
            gap: 8px !important;
        }

        .tag {
            max-width: none !important;
            width: auto !important;
            height: auto !important;
            padding: 5px 32px 5px 14px !important;
            border-radius: 10px !important;
            background: #F5F5F7 !important;
            position: relative !important;
        }

            .tag span {
                font-size: 12px !important;
            }

            .tag .tag-remove {
                position: absolute !important;
                top: 50% !important;
                bottom: auto !important;
                right: 10px !important;
                transform: translateY(-50%) !important;
                width: auto !important;
                height: auto !important;
                border-radius: 0 !important;
                background: transparent !important;
                padding: 0 !important;
            }

                .tag .tag-remove svg {
                    width: 14px !important;
                    height: 14px !important;
                }

                .tag .tag-remove svg text {
                    fill: #000 !important;
                }
}

@media (min-width: 768px) {
    .zip-avantaj-search-container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        column-gap: 24px;
        row-gap: 16px;
        border-radius: 35px !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

        .zip-avantaj-search-container[style*="display: none"],
        .zip-avantaj-search-container[style*="display:none"] {
            display: none !important;
        }

        .zip-avantaj-search-container > div:has(h2) {
            flex: 0 0 100% !important;
            width: 100% !important;
            margin-bottom: 0 !important;
        }

        .zip-avantaj-search-input-wrapper {
            flex: 0 1 705px !important;
            min-width: 240px;
            margin: 8px 0 0 0 !important;
        }

        .zip-avantaj-search-input {
            border: none !important;
            outline: none !important;
            background-color: #F5F5F7 !important;
        }

            .zip-avantaj-search-input:focus {
                outline: none !important;
                box-shadow: none !important;
            }

        .zip-avantaj-search-icon {
            width: 22px !important;
            height: 22px !important;
        }

        /* Ara butonu kaldırıldı: arama kutusundaki büyüteç ikonu aynı işlevi görüyor (addTag + arama) */
        .zip-avantaj-search-container > div:has(#zipAvantajAraBtn) {
            display: none !important;
        }

        .tagLine {
            display: none !important;
        }

        .selected-tags {
            flex: 0 0 100% !important;
            width: 100% !important;
            margin: 8px 0 0 0 !important;
            gap: 10px !important;
            align-items: center !important;
        }

            .selected-tags > div:first-child,
            .tags-container {
                display: flex !important;
                align-items: center !important;
            }

            .selected-tags > div:first-child p {
                margin: 0 !important;
                line-height: 1 !important;
                font-weight: 600 !important;
                color: #000 !important;
            }

                .selected-tags > div:first-child p::after {
                    content: ":";
                }

        .tags-container {
            gap: 10px !important;
        }

        .tag {
            max-width: none !important;
            width: auto !important;
            height: auto !important;
            padding: 7px 36px 7px 16px !important;
            border-radius: 10px !important;
            background: #F5F5F7 !important;
            position: relative !important;
        }

            .tag span {
                font-size: 14px !important;
            }

            .tag .tag-remove {
                position: absolute !important;
                top: 50% !important;
                bottom: auto !important;
                right: 12px !important;
                transform: translateY(-50%) !important;
                width: auto !important;
                height: auto !important;
                border-radius: 0 !important;
                background: transparent !important;
                padding: 0 !important;
            }

                .tag .tag-remove svg {
                    width: 16px !important;
                    height: 16px !important;
                }

                .tag .tag-remove svg text {
                    fill: #000 !important;
                }
}