/* bankfinder.css – نسخه 4.0 */

/* Loader */
.bf2-loader{
    text-align:center;
    padding:40px;
    font-size:18px;
}

/* Toolbar */
.bf2-toolbar{
    display:flex;
    justify-content:flex-end;
    margin-bottom:15px;
}
.bf2-toolbar button{
    background:#0073aa;
    color:#fff;
    border:none;
    padding:8px 18px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
}

/* Modal */
.bf2-modal{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    backdrop-filter: blur(1px);
    height:100%;
    background: rgb(0 0 0 / 23%);
    opacity:0;
    pointer-events:none;
    transition:0.3s;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:10;
}
.bf2-modal.open{
    opacity:1;
    pointer-events:auto;
}
.bf2-modal-box{
    background:#fff;
    padding:20px;
    border-radius:12px;
    width:100%;
    max-width:420px;
    animation:bf2pop 0.35s ease;
    box-shadow:0 8px 25px rgba(0,0,0,0.12);
    max-height: 100%;
}
@keyframes bf2pop{
    from{transform:scale(0.8);opacity:0;}
    to{transform:scale(1);opacity:1;}
}
.bf2-modal-box h3{
    margin-top:0;
    margin-bottom:20px;
    font-size:18px;
}
.bf2-modal-box label{
    margin-top:10px;
    display:block;
    font-size:14px;
    font-weight:600;
}

/* Range numeric inputs row */
.bf2-range-row{
    display:flex;
    gap:10px;
    margin:8px 0 16px 0;
}
.bf2-range-row input[type=number]{
    flex:1;
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:13px;
}

/* Category pills */
.bf2-cat-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:6px 0 16px 0;
}
.bf2-cat-pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 8px;
    border-radius:99px;
    background:#f1f5f9;
    font-size:12px;
    cursor:pointer;
}
.bf2-cat-pill input{
    accent-color:#0073aa;
}

/* Selects in modal */
.bf2-modal-box select{
    width:100%;
    margin:6px 0 16px 0;
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:13px;
}

/* Modal button */
.bf2-modal-box button{
    width:100%;
    padding:10px;
    background: #ffffff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    color: var(--rahkar-primary-color);
    border: 1px solid;
}

/* Cards list */
.bf2-list{
    display:flex;
    gap: 15px;
    padding: 0 15px;
    flex-wrap: wrap;
}
.bf2-card{
    display:flex;
    align-items: flex-start;
    background:#fff;
    border-radius:12px;
    padding:15px;
    box-shadow:0 3px 15px rgba(0,0,0,0.07);
    position:relative;
    width: 32%;
}
.bf2-star{
    position:absolute;
    left:10px;
    top:10px;
    cursor:pointer;
    font-size:22px;
    color:#f6c200;
}
.bf2-logo img{
    width:60px;
    height:60px;
    border-radius:12px;
    margin-left:15px;
    object-fit:contain;
    background:#f8fafc;
}
.bf2-body{
    flex:1;
}
.bf2-title{
    font-size:17px;
    font-weight:bold;
    margin-bottom:5px;
}
.bf2-provider{
    font-size:13px;
    color:#777;
    margin-bottom:6px;
}
.bf2-meta{
    font-size:12px;
    color:#555;
    margin-bottom:10px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.bf2-btn{
    background:#0073aa;
    color:#fff;
    padding:7px 15px;
    border-radius:6px;
    font-size:12px;
    text-decoration:none;
}

/* More button */
.bf2-more{
    display:block;
    width:100%;
    padding:10px;
    margin-top:15px;
    background:#0073aa;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    text-align:center;
}

/* Responsive */
@media(max-width:600px){
    .bf2-card{
        width: 100%;
    }
    .bf2-logo img{
        width:50px;
        height:50px;
        margin-left:10px;
    }
}
/* =========================================
   FILTER BAR (Minimal + Premium Look)
========================================= */

.bf2-filter-bar{
    display:flex;
    gap:12px;
    padding: 13px 13px 0;
    margin-bottom: 20px;
    overflow-x:auto;
    scrollbar-width:none;
}

.bf2-filter-bar::-webkit-scrollbar{
    display:none;
}

.bf2-filter-item{
    background:#ffffff;
    border:1px solid #e6e8ec;
    border-radius:12px;
    padding:10px 14px;
    min-width:150px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:6px;
    transition:all 0.2s ease;
}

.bf2-filter-item:hover{
    border-color:#cbd5e1;
    box-shadow:0 3px 12px rgba(0,0,0,0.06);
}

.bf2-filter-title{
    font-size:11px;
    color:#6b7280;
    font-weight:500;
}

.bf2-filter-placeholder{
    font-size:13px;
    color:#9ca3af;
}

.bf2-filter-tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

/* =========================================
   ACTIVE TAGS (Professional Tag Design)
========================================= */

.bf2-tag{
    background:#f0f6ff;
    color:#005bbb;
    border-radius:50px;
    padding:3px 10px;
    font-size:11px;
    display:flex;
    align-items:center;
    gap:6px;
    border:1px solid #d6e3ff;
}

.bf2-tag-remove{
    cursor:pointer;
    font-weight:bold;
    font-size:13px;
    color:#005bbb;
    transition:0.2s;
}
.bf2-tag-remove:hover{
    color:#003e88;
}

/* =========================================
   MODAL (Glass + Minimal)
========================================= */

.bf2-modal-overlay{
    background:rgba(0,0,0,0.35) !important;
    backdrop-filter:blur(3px);
}


.bf2-modal-close{
    background:#f3f4f6 !important;
    border-radius:50% !important;
}

/* =========================================
   GRID ITEMS (Category / Guarantee)
========================================= */

.bf2-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.bf2-pill{
    border:1px solid #e6e9ef;
    background:#fafafa;
    padding:10px;
    border-radius:10px;
    text-align:center;
    cursor:pointer;
    transition:all 0.18s ease;
    font-size:13px;
}

.bf2-pill:hover{
    border-color: var(--rahkar-primary-color);
    background: #e9fff7;
}

.bf2-pill.active{
    box-shadow: 0 0 0 2px, 0 0 20px -10px inset;
}

/* =========================================
   BANK GRID (Icon Focused + Clean)
========================================= */

.bf2-bank-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    overflow: auto;
    height: 60%;
    padding-left: 8px;
    margin-left: -8px;
}

.bf2-bank-pill{
    cursor:pointer;
    background:#fafafa;
    border:1px solid #e6e9ef;
    padding:12px 6px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    transition:0.18s ease;
    font-size:12px;
}

.bf2-bank-pill:hover{
    border-color:#bcd3ff;
    background:#f4f7ff;
}

.bf2-bank-pill.active{
    background:#005bbb;
    border-color:#005bbb;
    color:white;
}

.bf2-bank-pill img{
    width:34px;
    height:34px;
    object-fit:contain;
}

/* =========================================
   RANGE SLIDER (Premium Look)
========================================= */

.bf2-range-wrapper{
    margin-top:15px;
}

.bf2-range-values{
    font-size:13px;
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
    color:#374151;
    font-weight:500;
}

.bf2-range-inputs{
    position:relative;
    height:34px;
}

.bf2-range-inputs input[type=range]{
    position:absolute;
    pointer-events:none;
    -webkit-appearance:none;
    width:100%;
}

.bf2-range-inputs input[type=range]::-webkit-slider-thumb{
    pointer-events:auto;
    width:19px;
    height:19px;
    background:var(--rahkar-primary-color);
    z-index:1;
    border-radius:50%;
    -webkit-appearance:none;
    cursor:pointer;
    position:relative;
    top:-6px;
    box-shadow:0 0 0 4px rgb(0 103 58 / 20%);
}

.bf2-range-inputs input[type=range]::-webkit-slider-runnable-track{
    height:7px;
    background:#d6dae3;
    border-radius:50px;
}

.bf2-range-inputs input[type=range]::-moz-range-thumb{
    width:18px;
    height:18px;
    border:none;
    background:#005bbb;
    border-radius:50%;
}

.bf2-range-inputs input[type=range]::-moz-range-track{
    height:7px;
    background:#d6dae3;
    border-radius:50px;
}

/* =========================================
   BUTTONS (Balanced + Friendly)
========================================= */

.bf2-modal-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
}

button.bf2-btn-primary{
    background: var(--rahkar-primary-color);
    color: white;
    border:none;
    padding:12px;
    border-radius:10px;
    transition:0.18s ease;
}

.bf2-btn-primary:hover{
    box-shadow: 0 0 30px 0px #ffffff1a inset;
}

.bf2-btn-secondary{
    background:#f3f4f6;
    border:none;
    padding:12px;
    border-radius:10px;
    font-size:14px;
    cursor:pointer;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:600px){

    .bf2-filter-item{
        min-width:130px;
    }

    .bf2-grid{
        grid-template-columns:1fr;
    }

    .bf2-bank-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


}