.bfs-wrap{
    --bfs-accent:#1677ff;
    --bfs-border:#e2e8f0;
    --bfs-text:#1f2937;
    --bfs-muted:#64748b;
    --bfs-bg:#fff;
    --bfs-soft:#f8fafc;
    --bfs-height:44px;
    --bfs-radius:12px;
    --bfs-gap:8px;
    position:relative;
    width:100%;
    color:var(--bfs-text);
    font-family:inherit;
    box-sizing:border-box;
}
.bfs-wrap *{box-sizing:border-box}
.bfs-form{margin:0}
.bfs-main-row{display:flex;gap:var(--bfs-gap);align-items:center}
.bfs-input-wrap{
    min-width:0; flex:1; height:var(--bfs-height); display:flex; align-items:center;
    border:1px solid var(--bfs-border); border-radius:var(--bfs-radius);
    background:var(--bfs-bg); transition:.18s ease; overflow:hidden;
}
.bfs-input-wrap:focus-within{
    border-color:var(--bfs-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--bfs-accent) 12%, transparent);
}
.bfs-search-icon{
    width:38px; min-width:38px; height:100%; display:flex; align-items:center; justify-content:center;
    color:var(--bfs-muted);
}
.bfs-search-icon svg,.bfs-btn-icon svg,.bfs-filter-icon svg{fill:currentColor}
.bfs-query{
    width:100%; height:100%; border:0!important; outline:0!important; box-shadow:none!important;
    background:transparent!important; padding:0 8px 0 0!important; margin:0!important;
    font-size:14px!important; color:var(--bfs-text)!important;
}
.bfs-query::-webkit-search-cancel-button{display:none}
.bfs-clear{
    width:34px;height:34px;border:0;background:transparent;color:var(--bfs-muted);
    font-size:21px;line-height:1;cursor:pointer;padding:0;
}
.bfs-submit{
    height:var(--bfs-height); min-width:86px; border:0; border-radius:var(--bfs-radius);
    padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    background:var(--bfs-accent); color:#fff; font:inherit; font-size:13px; font-weight:600;
    cursor:pointer; white-space:nowrap; transition:.18s ease;
}
.bfs-submit:hover{filter:brightness(.96);transform:translateY(-1px)}
.bfs-btn-style-icon{min-width:var(--bfs-height);width:var(--bfs-height);padding:0}
.bfs-btn-style-icon .bfs-btn-text{display:none}
.bfs-btn-style-text .bfs-btn-icon{display:none}

.bfs-filter-row{
    display:flex; gap:var(--bfs-gap); margin-top:var(--bfs-gap); align-items:center; flex-wrap:wrap;
}
.bfs-select-wrap{
    height:36px; display:inline-flex; align-items:center; gap:6px; padding:0 8px;
    border:1px solid var(--bfs-border); border-radius:10px; background:var(--bfs-soft);
    color:var(--bfs-muted); max-width:100%;
}
.bfs-select-wrap select{
    border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important;
    color:var(--bfs-text)!important; font-size:12px!important; min-height:unset!important; height:34px!important;
    padding:0 24px 0 0!important; margin:0!important; max-width:190px;
}
.bfs-compact .bfs-filter-row{margin-top:6px}
.bfs-compact .bfs-select-wrap{height:32px}
.bfs-compact .bfs-select-wrap select{height:30px!important;font-size:12px!important}

.bfs-results{
    position:absolute; z-index:99999; top:calc(100% + 8px); left:0; right:0;
    background:#fff; border:1px solid var(--bfs-border); border-radius:14px;
    box-shadow:0 18px 50px rgba(15,23,42,.14); overflow:hidden;
}
.bfs-results-head{
    min-height:38px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;
    background:#fbfdff;border-bottom:1px solid #eef2f7;font-size:11px;color:var(--bfs-muted);
    letter-spacing:.02em;text-transform:uppercase;
}
.bfs-result-item{
    display:flex;gap:10px;padding:10px 12px;text-decoration:none!important;color:inherit!important;
    border-bottom:1px solid #f0f3f6;transition:.15s ease;align-items:center;
}
.bfs-result-item:last-child{border-bottom:0}
.bfs-result-item:hover{background:#f8fafc}
.bfs-result-thumb{
    width:46px;height:46px;min-width:46px;object-fit:cover;border-radius:9px;background:#eef2f7;
}
.bfs-result-noimage{
    width:46px;height:46px;min-width:46px;border-radius:9px;background:#eef2f7;
    display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:18px;
}
.bfs-result-body{min-width:0;flex:1}
.bfs-result-title{
    font-size:13px;font-weight:650;color:#1e293b;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bfs-result-meta{display:flex;gap:8px;align-items:center;margin-top:3px;font-size:11px;color:#64748b}
.bfs-result-price{font-weight:600;color:var(--bfs-accent)}
.bfs-empty{padding:18px;text-align:center;color:#64748b;font-size:13px}
.bfs-loading{padding:16px;text-align:center;color:#64748b;font-size:12px}

@media (min-width:1025px){
    .bfs-filter-desktop-hide .bfs-filter-row{display:none}
}
@media (min-width:768px) and (max-width:1024px){
    .bfs-filter-tablet-hide .bfs-filter-row{display:none}
    .bfs-submit{min-width:78px;padding:0 13px}
}
@media (max-width:767px){
    .bfs-filter-mobile-hide .bfs-filter-row{display:none}
    .bfs-main-row{gap:6px}
    .bfs-search-icon{width:34px;min-width:34px}
    .bfs-query{font-size:13px!important}
    .bfs-submit{min-width:auto;padding:0 12px}
    .bfs-results{position:absolute}
    .bfs-result-item{padding:9px 10px}
    .bfs-result-thumb,.bfs-result-noimage{width:42px;height:42px;min-width:42px}
}
@media (max-width:430px){
    .bfs-submit .bfs-btn-text{display:none}
    .bfs-submit{width:var(--bfs-height);padding:0}
}


/* ===== Biizaa Flex Search v1.1 Responsive Refinement ===== */

/* Desktop: input + filters + button in one clean row */
@media (min-width:1025px){
    .bfs-form{
        display:flex;
        align-items:center;
        gap:var(--bfs-gap);
    }

    .bfs-main-row{
        display:flex;
        align-items:center;
        gap:var(--bfs-gap);
        flex:1 1 auto;
        min-width:0;
    }

    .bfs-input-wrap{
        flex:1 1 360px;
        min-width:220px;
    }

    .bfs-filter-row{
        display:flex;
        align-items:center;
        gap:var(--bfs-gap);
        margin-top:0;
        flex:0 0 auto;
        flex-wrap:nowrap;
        order:2;
    }

    .bfs-main-row{
        order:1;
    }

    .bfs-submit{
        order:3;
    }

    /* Move button visually after filters while keeping original markup */
    .bfs-main-row .bfs-submit{
        margin-left:auto;
    }

    .bfs-search-icon{
        width:44px;
        min-width:44px;
    }

    .bfs-search-icon svg{
        width:21px;
        height:21px;
    }

    .bfs-btn-icon svg{
        width:19px;
        height:19px;
    }

    .bfs-filter-icon svg{
        width:17px;
        height:17px;
    }

    .bfs-select-wrap{
        min-width:140px;
        max-width:190px;
        height:var(--bfs-height);
        border-radius:var(--bfs-radius);
        padding:0 10px;
        background:var(--bfs-bg);
    }

    .bfs-select-wrap select{
        height:calc(var(--bfs-height) - 2px)!important;
        max-width:160px;
        font-size:13px!important;
    }

    .bfs-compact .bfs-filter-row{
        margin-top:0;
    }

    .bfs-compact .bfs-select-wrap{
        height:var(--bfs-height);
    }

    .bfs-compact .bfs-select-wrap select{
        height:calc(var(--bfs-height) - 2px)!important;
        font-size:13px!important;
    }

    .bfs-filter-desktop-hide .bfs-filter-row{
        display:none;
    }
}

/* Tablet remains compact; filters can still be toggled */
@media (min-width:768px) and (max-width:1024px){
    .bfs-search-icon svg{
        width:19px;
        height:19px;
    }
}

/* Mobile: text-only search button, inset width, softer compact spacing */
@media (max-width:767px){
    .bfs-wrap{
        width:calc(100% - 24px);
        margin-left:auto;
        margin-right:auto;
    }

    .bfs-main-row{
        gap:7px;
    }

    .bfs-search-icon{
        width:32px;
        min-width:32px;
    }

    .bfs-search-icon svg{
        width:17px;
        height:17px;
    }

    .bfs-submit{
        width:auto;
        min-width:64px;
        padding:0 14px;
        border-radius:10px;
    }

    .bfs-submit .bfs-btn-icon{
        display:none!important;
    }

    .bfs-submit .bfs-btn-text{
        display:inline!important;
        font-size:12px;
        font-weight:600;
    }

    .bfs-filter-mobile-show .bfs-filter-row{
        margin-top:7px;
        gap:6px;
    }

    .bfs-filter-mobile-show .bfs-select-wrap{
        flex:1 1 calc(50% - 3px);
        min-width:0;
    }

    .bfs-filter-mobile-show .bfs-select-wrap select{
        width:100%;
        max-width:none;
    }

    .bfs-results{
        left:0;
        right:0;
    }
}

/* Very small phones: keep text button, slightly tighter inset */
@media (max-width:430px){
    .bfs-wrap{
        width:calc(100% - 20px);
    }

    .bfs-submit{
        width:auto;
        min-width:60px;
        padding:0 12px;
    }

    .bfs-submit .bfs-btn-text{
        display:inline!important;
        font-size:12px;
    }
}


/* ===== Biizaa Flex Search v1.2 Order Refinement ===== */
@media (min-width:1025px){
    .bfs-filter-row{
        order:1 !important;
        margin-top:0 !important;
    }
    .bfs-main-row{
        order:2 !important;
    }
}


/* v1.2.1: category/type filters precede the search field on desktop */
@media (min-width:1025px){
    .bfs-filter-row{order:1!important;}
    .bfs-main-row{order:2!important;}
}


/* ===== Biizaa Flex Search v1.3 Container Alignment ===== */
/* Mobile mengikuti lebar container parent/Elementor agar sejajar dengan banner, video, dll */
@media (max-width:767px){
    .bfs-wrap{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}

@media (max-width:430px){
    .bfs-wrap{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}


/* ===== Biizaa Flex Search v1.4 Layout Refinement ===== */

/* Desktop:
   Input pencarian → Filter kategori/jenis → Tombol ikon + teks Cari
*/
@media (min-width:1025px){
    .bfs-form{
        display:flex !important;
        align-items:center;
        gap:var(--bfs-gap);
        width:100%;
    }

    /* Pecah wrapper main-row agar input dan tombol dapat diposisikan terpisah */
    .bfs-main-row{
        display:contents !important;
    }

    .bfs-input-wrap{
        order:1 !important;
        flex:1 1 auto;
        min-width:260px;
    }

    .bfs-filter-row{
        order:2 !important;
        display:flex;
        align-items:center;
        flex-wrap:nowrap;
        gap:var(--bfs-gap);
        margin:0 !important;
        flex:0 0 auto;
    }

    .bfs-submit{
        order:3 !important;
        flex:0 0 auto;
        min-width:92px;
        width:auto;
        padding:0 16px;
    }

    .bfs-submit .bfs-btn-icon{
        display:inline-flex !important;
    }

    .bfs-submit .bfs-btn-text{
        display:inline !important;
    }

    .bfs-search-icon svg{
        width:21px;
        height:21px;
    }

    .bfs-btn-icon svg{
        width:19px;
        height:19px;
    }
}

/* Mobile: sedikit masuk dari tepi, namun tetap sejajar secara visual dengan container */
@media (max-width:767px){
    .bfs-wrap{
        width:calc(100% - 12px) !important;
        max-width:calc(100% - 12px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .bfs-submit .bfs-btn-icon{
        display:none !important;
    }

    .bfs-submit .bfs-btn-text{
        display:inline !important;
    }
}

@media (max-width:430px){
    .bfs-wrap{
        width:calc(100% - 12px) !important;
        max-width:calc(100% - 12px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}


/* ===== Biizaa Flex Search v1.5 Workshop / Container Safety ===== */

/* Pastikan widget tidak pernah melebar keluar dari container Elementor/WooCommerce */
.bfs-wrap{
    max-width:100%;
    min-width:0;
}
.bfs-form,
.bfs-main-row,
.bfs-input-wrap,
.bfs-filter-row{
    max-width:100%;
    min-width:0;
}

/* Tablet / layout workshop: masuk tipis seperti mobile agar tidak tampak keluar */
@media (min-width:768px) and (max-width:1024px){
    .bfs-wrap{
        width:calc(100% - 12px) !important;
        max-width:calc(100% - 12px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* Mobile tetap memakai inset tipis */
@media (max-width:767px){
    .bfs-wrap{
        width:calc(100% - 12px) !important;
        max-width:calc(100% - 12px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* Proteksi khusus ketika widget berada dalam area produk/workshop WooCommerce */
.single-product .bfs-wrap,
.post-type-archive-product .bfs-wrap,
.woocommerce .bfs-wrap{
    box-sizing:border-box;
}

@media (max-width:1024px){
    .single-product .bfs-wrap,
    .post-type-archive-product .bfs-wrap,
    .woocommerce .bfs-wrap{
        width:calc(100% - 12px) !important;
        max-width:calc(100% - 12px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}


/* ===== Biizaa Flex Search v1.6 Mobile Alignment ===== */
/* Mobile dibuat sedikit lebih masuk agar sejajar dengan banner/container umum Elementor */
@media (max-width:767px){
    .bfs-wrap{
        width:calc(100% - 24px) !important;
        max-width:calc(100% - 24px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

@media (max-width:430px){
    .bfs-wrap{
        width:calc(100% - 20px) !important;
        max-width:calc(100% - 20px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* Pastikan area WooCommerce/workshop mengikuti inset mobile yang sama */
@media (max-width:767px){
    .single-product .bfs-wrap,
    .post-type-archive-product .bfs-wrap,
    .woocommerce .bfs-wrap{
        width:calc(100% - 24px) !important;
        max-width:calc(100% - 24px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}


/* ===== Biizaa Flex Search v1.6.1 Desktop Alignment ===== */
/* Desktop dibuat sedikit lebih masuk agar sejajar dengan banner/container */
@media (min-width:1025px){
    .bfs-wrap{
        width:calc(100% - 24px) !important;
        max-width:calc(100% - 24px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .single-product .bfs-wrap,
    .post-type-archive-product .bfs-wrap,
    .woocommerce .bfs-wrap{
        width:calc(100% - 24px) !important;
        max-width:calc(100% - 24px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}