/* =========================
   MAIN WRAPPER
========================= */

.tbpl-wrap{

    background:#fff;

    border-radius:20px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    overflow:hidden;

    direction:rtl;
}

/* =========================
   HEADER
========================= */

.tbpl-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:25px;

    flex-wrap:wrap;
}

.tbpl-title{

    font-size:24px;

    font-weight:800;

    color:#111827;
}

.tbpl-date{

    background:linear-gradient(135deg,#00AEEF,#0084c7);

    color:#fff;

    padding:10px 18px;

    border-radius:14px;

    font-size:14px;

    font-weight:700;

    box-shadow:
    0 8px 18px rgba(0,174,239,.18);
}

/* =========================
   TOP FILTERS
========================= */

.tbpl-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr auto;

    gap:15px;

    margin-bottom:25px;
}

.tbpl-top input,
.tbpl-top select,
.tbpl-top a{

    height:50px;

    border-radius:14px;

    border:1px solid #dbe3ec;

    padding:0 15px;

    font-size:14px;
}

/* =========================
   INPUTS
========================= */

.tbpl-top input,
.tbpl-top select{

    background:#fff;

    outline:none;

    transition:all .25s ease;
}

.tbpl-top input:focus,
.tbpl-top select:focus{

    border-color:#00AEEF;

    box-shadow:
    0 0 0 4px rgba(0,174,239,.12);
}

/* =========================
   BUTTON
========================= */

.tbpl-action-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:linear-gradient(135deg,#00AEEF,#0084c7);

    color:#fff !important;

    font-weight:700;

    border:none;

    transition:all .25s ease;

    box-shadow:
    0 10px 20px rgba(0,174,239,.18);
}

.tbpl-action-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 14px 28px rgba(0,174,239,.25);
}

/* =========================
   LOADER
========================= */

.tbpl-loader{

    display:none;

    text-align:center;

    padding:20px;

    font-weight:700;

    color:#00AEEF;
}

/* =========================
   TABLE WRAP
========================= */

.tbpl-table-wrap{

    width:100%;
}

/* =========================
   TABLE
========================= */

.tbpl-table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:16px;
}

/* =========================
   TABLE HEAD
========================= */

.tbpl-table th{

    background:#00AEEF;

    color:#fff;

    padding:15px 10px;

    text-align:center;

    font-size:13px;

    font-weight:700;
}

/* =========================
   TABLE BODY
========================= */

.tbpl-table td{

    padding:14px 10px;

    border-bottom:1px solid #eef2f7;

    text-align:center;

    font-size:13px;

    transition:all .2s ease;
}

.tbpl-table tbody tr:hover{

    background:#f8fcff;
}

/* =========================
   PAGINATION
========================= */

#tbpl-pagination{

    margin-top:30px;

    text-align:center;
}

.tbpl-page{

    width:42px;

    height:42px;

    border:none;

    margin:0 5px;

    border-radius:12px;

    background:#f1f5f9;

    cursor:pointer;

    transition:all .25s ease;

    font-weight:700;
}

.tbpl-page:hover{

    background:#dbeafe;
}

.tbpl-page.active{

    background:#00AEEF;

    color:#fff;
}

/* =========================
   SOCIALS
========================= */

.tbpl-socials{

    margin-top:35px;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;
}

.social-item{

    min-width:120px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    text-decoration:none;

    color:#fff !important;

    font-weight:700;

    transition:all .25s ease;
}

.social-item:hover{

    transform:translateY(-3px) scale(1.03);
}

/* =========================
   SOCIAL COLORS
========================= */

.social-item.bale{

    background:#25d366;
}

.social-item.eitaa{

    background:#f57c00;
}

.social-item.rubika{

    background:#405de6;
}

.social-item.telegram{

    background:#27a5e7;
}

.social-item.instagram{

    background:linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
    );
}

.social-item.whatsapp{

    background:#1ebe5d;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .tbpl-wrap{

        padding:15px;
    }

    .tbpl-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .tbpl-title{

        font-size:20px;
    }

    .tbpl-date{

        width:100%;

        text-align:center;
    }

    .tbpl-top{

        display:grid;

        grid-template-columns:1fr;

        gap:12px;
    }

    .tbpl-top input,
    .tbpl-top select,
    .tbpl-action-btn{

        width:100%;
    }

    .tbpl-table{

        width:100%;

        table-layout:fixed;
    }

    .tbpl-table th,
    .tbpl-table td{

        font-size:11px;

        padding:10px 5px;

        white-space:normal;

        word-break:break-word;
    }

    /* مخفی کردن ستون ردیف */

    .tbpl-table th:nth-child(1),
    .tbpl-table td:nth-child(1){

        display:none;
    }

    /* مخفی کردن ستون موجودی */

    .tbpl-table th:nth-child(4),
    .tbpl-table td:nth-child(4){

        display:none;
    }

    /* مخفی کردن ستون کدفنی */

    .tbpl-table th:nth-child(5),
    .tbpl-table td:nth-child(5){

        display:none;
    }

    .tbpl-socials{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:10px;
    }

    .social-item{

        min-width:auto;

        font-size:12px;
    }

}

/* =========================
   OUT OF STOCK ROW
========================= */

.row-out td{

    color:#dc2626 !important;
}

/* =========================
   INQUIRY PRICE
========================= */

.price-inquiry{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:120px;

    height:38px;

    padding:0 14px;

    border-radius:10px;

    background:linear-gradient(135deg,#ef4444,#dc2626);

    color:#fff !important;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    transition:all .25s ease;
}

.price-inquiry:hover{

    transform:translateY(-2px);

    box-shadow:
    0 8px 18px rgba(220,38,38,.25);
}

/* =========================
   BOTTOM CTA
========================= */

.tbpl-bottom-cta{

    margin-top:35px;

    padding:22px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #f8fbff,
        #eef7ff
    );

    border:1px solid #dbeafe;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    flex-wrap:wrap;
}

.tbpl-bottom-cta-text{

    font-size:18px;

    font-weight:800;

    color:#111827;
}

.tbpl-bottom-cta-btn{

    min-width:180px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #00AEEF,
        #0084c7
    );

    color:#fff !important;

    text-decoration:none;

    font-weight:700;

    transition:all .25s ease;
}

.tbpl-bottom-cta-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 22px rgba(0,174,239,.25);
}

@media(max-width:768px){

    .tbpl-bottom-cta{

        flex-direction:column;

        text-align:center;
    }

    .tbpl-bottom-cta-btn{

        width:100%;
    }

}
.tbpl-wrap,
.tbpl-wrap *{

    font-family: IRANYekanX !important;

}

.tbpl-wrap,
.tbpl-wrap *{

    font-family:
    IRANYekanX,
    IRANYekan,
    Vazirmatn,
    sans-serif !important;

}

/* =========================
   PRICE TREND UI
========================= */

.price-wrap{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-weight:800;
}

/* =========================
   PRICE NUMBER
========================= */

.price-number{

    color:#111827;

    font-weight:800;

    letter-spacing:.3px;
}

/* =========================
   TREND ICON
========================= */

.price-trend{

    width:28px;

    height:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    font-weight:900;

    animation:pricePulse 1.8s infinite;

    position:relative;
}

/* =========================
   UP
========================= */

.price-trend.up{

    background:
    linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    color:#fff;

    box-shadow:
    0 0 0 4px rgba(34,197,94,.12),
    0 8px 18px rgba(34,197,94,.30);
}

/* =========================
   DOWN
========================= */

.price-trend.down{

    background:
    linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    color:#fff;

    box-shadow:
    0 0 0 4px rgba(239,68,68,.12),
    0 8px 18px rgba(239,68,68,.30);
}

/* =========================
   ANIMATION
========================= */

@keyframes pricePulse{

    0%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.12);
    }

    100%{

        transform:scale(1);
    }

}

/* =========================
   HOVER EFFECT
========================= */

.tbpl-table tbody tr:hover .price-trend.up{

    box-shadow:
    0 0 0 6px rgba(34,197,94,.16),
    0 12px 25px rgba(34,197,94,.35);
}

.tbpl-table tbody tr:hover .price-trend.down{

    box-shadow:
    0 0 0 6px rgba(239,68,68,.16),
    0 12px 25px rgba(239,68,68,.35);
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .price-wrap{

        flex-direction:column;

        gap:4px;
    }

    .price-number{

        font-size:11px;
    }

    .price-trend{

        width:24px;

        height:24px;

        font-size:13px;
    }

}


.tbpl-row-click{

    cursor:pointer;

    transition:all .25s ease;
}

.tbpl-row-click:hover{

    background:#f0f9ff !important;

    transform:scale(1.003);
}

.tbpl-row-click{
    cursor:pointer;
}

.tbpl-row-click:hover td{
    background:#f8fbff;
}