.f_center_center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.f_center_start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.f_center_end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.f_center_between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.f_center_around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.f_center_evenly {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

/*-------------------------*/
.f_start_center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.f_start_start {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.f_start_end {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.f_start_between {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.f_start_around {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

.f_start_evenly {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
}

/*-------------------------*/
.f_end_center {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.f_end_start {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.f_end_end {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.f_end_between {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.f_end_around {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
}

.f_end_evenly {
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
}

/*-------------------------*/
.f_col_center_center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.f_col_center_start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.f_col_center_end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.f_col_center_between {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.f_col_center_around {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.f_col_center_evenly {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

/*-------------------------*/
.f_col_start_center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.f_col_start_start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.f_col_start_end {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.f_col_start_between {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.f_col_start_around {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}

.f_col_start_evenly {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
}

/*-------------------------*/
.f_col_end_center {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.f_col_end_start {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.f_col_end_end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

.f_col_end_between {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.f_col_end_around {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
}

.f_col_end_evenly {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-evenly;
}

/*-------------------------*/

.p_absolute_center {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
    z-index: 99999;
}
.ellipsis {
    min-width: 10rem;
    max-width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*----------------*/
.primary {
    background-color: var(--primary) !important;
    transition: background-color 400ms;
}
.primary:hover {
    background-color: var(--primary-hover) !important;
}
.info {
    background-color: var(--info) !important;
    transition: background-color 400ms;
}
.info:hover {
    background-color: var(--info-hover) !important;
}
.success {
    background-color: var(--success) !important;
}

.danger {
    background-color: var(--error) !important;
}
.warning {
    background-color: var(--warning) !important;
}
.not-found{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 4rem;
    color: var(--text-4);
}
.not-found-small{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.6rem;
    color: var(--text-4);
}
/*-----------*/
.loader {
    width: 20px;
    height: 20px;
    border: 3px solid var(--border-6);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.sr-only {
    position: absolute ;
    width: 1px ;
    height: 1px ;
    padding: 0 ;
    margin: -1px ;
    overflow: hidden ;
    clip: rect(0, 0, 0, 0) ;
    white-space: nowrap ;
    border: 0 ;
}

@media (max-width: 8000px) {
    .container { max-width: 1420px; }
}

@media (max-width: 1500px) {
    .container { max-width: 1320px; }
}

@media (max-width: 1400px) {
    .container { max-width: 1260px; }
}

@media (max-width: 1300px) {
    .container { max-width: 1140px; }
}

@media (max-width: 1200px) {
    .service-ul {
        grid-template-columns: repeat(2, 1fr); /* دو ستون */
        grid-template-rows: repeat(2, auto); /* دو ردیف */
        gap: 1rem; /* فاصله بین کارت‌ها */
        overflow: visible; /* دیگه اسکرول افقی نداره */
    }

    .service-li {
        margin: auto;
    }
    .container {
        max-width: 960px;
    }
    .foot-grid {
        gap: 2rem;
    }
    .foot-col{
        max-width: 250px;
    }
    /*--------------------shop box*/
    .product-box {
        width: calc(100% / 4);
    }
    .filter-content{
        flex-wrap: wrap;
    }
    .product-shop-container .product-box,.product-bookmark-container .product-box{
        width: calc(100% / 4);
    }
    .product-profile-container .product-box{
        width: calc(100% / 3);
    }
}

@media (max-width: 992px) {
    /*------------------create product*/
    .rule-container{
        display: none;
    }
    .create-product--content,.form-container{
        width: 100%;
        margin: 0;
    }
    /*------------------*/

    .product-img-wrapper {
        width: 10rem;
        height: 10rem;
    }
    .table-list-container table,
    .table-list-container thead,
    .table-list-container tbody,
    .table-list-container th,
    .table-list-container td,
    .table-list-container tr {
        display: block;
    }
    .table-list-container thead tr {
        display: none;
    }
    .table-list-container tbody tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 1rem;
        background: var(--bg-1);
    }
    .table-list-container td {
        text-align: right;
        padding-right: 50%; /* تغییر به راست */
        padding-left: 1rem; /* کمش کن */
        position: relative;
        border: none;
        border-bottom: 1px solid #eee;
        direction: rtl; /* ✅ مهم */
    }
    .table-list-container td::before {
        content: attr(data-label);
        position: absolute;
        right: 1rem;   /* ✅ سمت راست باشه */
        top: 0.8rem;
        font-weight: 600;
        text-align: right;
        font-size: 1.2rem;
        color: var(--text-3);
    }
    .profile-content{
        flex-direction: column;
    }
    .profile-rgt{
        width: 100%;
        margin-left: 0;
    }
    .profile-lft{
        width: 100%;
    }
    .product-detail-container {
        flex-direction: column;
    }
    .detail-rgt,.detail-lft{
        width: 100%;
        margin: 0 auto;
    }
    .introduction-content,.support-content {
        flex-direction: column;
        height: auto;
    }
    .introduction-container{
        margin: 2rem auto;

    }
    .introduction-rgt,.support-rgt,.support-lft,.introduction-left{
        width: 100%;
        height: 100%;
    }
    .support-btn-container-large,.support-btn-container{
        flex-wrap: wrap;
    }
    .home-btn{
        margin-top: 1rem;
    }
    .cart {
        flex-direction: column;
        min-height: 100%;
    }
    .cart-rgt,.cart-lft{
        width: 100%;
        margin: 0 auto;
    }
    .cart-rgt{
        margin-bottom: 2rem;
    }
    .product-shop-container .product-box,.product-bookmark-container .product-box{
        width: calc(100% / 3);
    }
    .product-profile-container .product-box{
        width: calc(100% / 2);
    }
    .container {
        max-width: 720px;
        padding: 0 2rem;
    }
    .foot-grid {
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
    }
    .div-filler {
        display: none;
    }
    .foot-col {
        max-width: 100%;
    }
    .appLogo-cover {
        height: 3.5rem;
    }
    .nav-menu,.nav-menu-list,.nav-menu-list.show {
        display: none;
    }
    /*-----mobile------*/
    .nav-menu-icon{
        width: 3.5rem;
        height: 3.5rem;
        fill: var(--primary);
        margin-left: 1rem;
        cursor: pointer;
        display: inline-block;
    }
    .mobile-content {
        width: 300px;
        height: 100vh;
        padding: 2rem 0 10rem;
        background-color: #f6f9ff;
        border-top: 1px solid #dfdfdf;
        border-left: 1px solid #dfdfdf;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: fixed;
        top: 7rem;
        right: -300px;
        z-index: 9999;
        transition: 300ms;
        overflow-y: auto;
    }
    .mobile-content.show {
        right: 0;
    }
    .mobile-list {
        width: 100%;
        padding: 1rem ;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        border-left: 3px solid #f6f9ff;
    }
    .mobile-item {
        width: 100%;
        user-select: none;
        font-size: 1.8rem;
        font-weight: 600;
        text-wrap: nowrap;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .mobile-item-title {
        font-size: 1.4rem;
        text-wrap: nowrap;
        color: var(--tr-text);
        font-weight: 500;
        display: flex;
        align-items: center;
        text-transform: uppercase;
    }
    /*-----------------*/
    .mobile-icon, .mobile-icon-arrow {
        width: 20px;
        height: 20px;
        fill: var(--text-3);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-icon {
        margin-left: 1rem;
    }
    .mobile-icon-arrow {
        width: 10px;
        height: 10px;
        fill: var(--text-4);
        margin-right: 2rem;
        transition: all 300ms;
        transform: rotate(180deg);
    }
    /*--------item hover---------*/
    .mobile-list.activeMobileBtn{
        background-color: #fff;
    }
    .mobile-list.activeMobileBtn .mobile-item-title{
        color: var(--primary);
    }
    .mobile-list.activeMobileBtn .mobile-icon{
        fill: var(--primary);
    }
    .mobile-list.activeMobileBtn .mobile-icon-arrow{
        transform: rotate(0deg);
        fill: var(--primary);
    }
    .mobile-list.negativeMobileBtn{
        background-color: transparent;
    }
    .mobile-list.negativeMobileBtn .mobile-item-title{
        color: var(--tr-text);
    }
    .mobile-list.negativeMobileBtn .mobile-icon{
        fill: var(--text-3);
    }
    .mobile-list.negativeMobileBtn .mobile-icon-arrow{
        transform: rotate(180deg);
        fill: var(--text-4);
    }
    /*-----------------*/
    .mobile-menu-child {
        width: 100%;
        padding-top: 1.3rem;
        transition: all 300ms;
        display: none;
    }
    .mobile-menu-child.activeMobileMenu {
        display: block;
        background-color: #fff;
    }
    .mobile-menu-child.negativeMobileMenu {
        display: none;
    }
    .mobile-list-child {
        width: 100%;
        padding: 1.2rem ;
        font-weight: 400;
        margin-right: 3rem;
        cursor: pointer;
        display: none;
    }
    .mobile-list-child:first-child {
        border-top: 0.1rem solid var(--slider-border);
    }

    .mobile-list-child:last-child {
        padding-bottom: 0;
    }
    .mobile-list-child.activeMobileContent {
        display: block;
    }
    .mobile-item-child {

    }
    .mobile-title-wrapper-child {
        display: flex;
        align-items: center;
    }
    .mobile-title-child {
        font-size: 1.2rem;
        text-wrap: nowrap;
        color: var(--tr-text);
        font-weight: 500;
        text-transform: uppercase;
    }
    .mobile-title-child:hover {
        color: var(--text-2);
    }
    /*--------------------shop box*/
    .product-box {
        width: calc(100% / 3);
    }
    .product-img-container {
        display: none;
    }
    .product-img-container-mobile{
        display: block;
    }
    .shop-modal{
        display: none;
    }
    /*-----------------ticket*/
    .ticket-container{
        width: 100%;
    }
    .ticket-top-rgt{
        display: flex;
    }
    .ticket-info{
        display: none;
    }
    .ticket-top-inform{
        flex-direction: column;
        align-items: flex-start;
    }
    .ticket-name-wrapper{
        margin: 0;
        margin-top: 0.5rem;
    }
    .profile-more-container {
        display: flex;
    }
    .profile-detail-menu{
        display: none;
    }
    .profile-rgt .filter-dropdown.active .profile-detail-menu{
        display: block;
    }
    /*---------------------home platform*/
    .glow-on-hover {
        flex: 0 0 calc((100% - 6rem) / 4);
    }
}

@media (max-width: 768px) {
    .download-btn,.download-menu .download-btn {
        max-width: 100%;
    }
    .detail{
        transition: color 400ms;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary);
        color: var(--text-6);
        padding: 1rem;
        font-weight: 500;
        border-radius: 4px;
    }
    .download-container{
        max-width: 100%;
    }
    .table-list-container td:last-child::before {
        content: none !important;
    }
    .table-list-container td:last-child {
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /*---------------------home platform*/
    .glow-on-hover {
        flex: 0 0 calc((100% - 4rem) / 3);
    }
    .product-shop-container .product-box,.product-bookmark-container .product-box{
        width: calc(100% / 2);
    }
    .rules-container{
        flex-direction: column;
        align-items: center;
    }
    .rule-ul{
        width: 100%;
    }
    .service-ul{
        grid-template-columns: repeat(1, 1fr); /* دو ستون */
        grid-template-rows: repeat(4, auto);   /* دو ردیف */
    }
    .support-rgt-box{
        flex-direction: column;
    }
    .profile-banner {
        max-height: 25rem;
    }
    .container { max-width: 540px; }
    .foot-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .foot-col {
        align-items: center;
    }
    .foot-social {
        justify-content: center;
    }

    .foot-content {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .nav-search-box{
        display: none;
    }
    /*--------------------shop box*/
    .product-box {
        width: calc(100% / 2);
    }
    /*----------------------shop filter*/
    .filter-main-dropdown{
        max-width: 100%;
        min-width: 20rem;
    }
    /*--------------------------form*/
    .create-input-wrapper-row {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    .product-img-section {
        width: 33.333333%;
    }
}

@media (max-width: 576px) {
    /*---------------------home platform*/
    .glow-on-hover {
        flex: 0 0 calc((100% - 2rem) / 2);
    }
    /*-----------------------------*/
    .service-li{
        max-width: 100%;
    }
    .container { max-width: 100%; }
    .mobile-content{
        max-width: 95%;
    }
    .nav-username{
        display: none;
    }
    .title-h1 {
        font-size: 1.6rem;
        text-align: center;
        margin-top: 1.5rem;
    }
    /*----------------------shop filter*/
    .content-div{
        margin-inline-start: 0;
    }
    .filter-btn-wrapper {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    /*--------------------------form*/
    .create-input-wrapper-row {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    .product-img-section {
        width: 50%;
    }
}
@media (max-width: 420px) {
    /*---------------------home platform*/
    .glow-on-hover {
        flex: 0 0 100%;
    }
    /*-----------------------------*/
    .profile-tabs{
        flex-direction: column;
        align-items: flex-start;
    }
    .profile-tab.active{
        border-bottom: none;
    }
    .profile-tab-select {
        width: 25rem;
    }
    .product-box{
        width: 100% !important;
    }
    /*----------------------shop filter*/
    .filter-container {
        flex-direction: column-reverse;
    }

    .filter-main-dropdown{
        width: 100%;
        min-width: 15rem;
    }
    .filter-btn-wrapper {
        margin-bottom: 0.5rem;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
@media (max-width: 375px) {
    .container { padding: 0 1rem; }
}
@media (max-width: 320px) {
    .profile-menu{
        min-width: 10rem;
        max-width: 95%;
    }
    .nav-menu-icon{
        width: 3rem;
        height: 3rem;
    }
    .appLogo-cover{
        height: 3rem;
    }
    .user-picture-wrapper{
        width: 4rem;
        height: 4rem;
    }
    .nav-list-container{
        margin-left: 0;
    }
}
/*!*------------------- Responsive Breakpoints -------------------*!*/
/*!* مانیتور خیلی بزرگ / 4K (Ultra Large Screen) *!*/
/*@media (max-width: 3840px) {*/
/*    !* استایل برای مانیتورهای خیلی بزرگ (2K, 4K) *!*/
/*}*/
/*!* لپ‌تاپ بزرگ / دسکتاپ کوچک (Large Laptop / Small Desktop) *!*/
/*@media (max-width: 1920px) {*/
/*    !* استایل برای لپ‌تاپ بزرگ و دسکتاپ Full HD *!*/
/*}*/
/*!* لپ‌تاپ کوچک (Small Laptop) *!*/
/*@media (max-width: 1366px) {*/
/*    !* استایل برای لپ‌تاپ‌های کوچک و متوسط *!*/
/*}*/
/*!* تبلت کوچک (Small Tablet) *!*/
/*@media (max-width: 1024px) {*/
/*    !* استایل برای تبلت‌ها (مثل iPad portrait) *!*/
/*}*/
/*!* موبایل بزرگ / فبلت (Large Mobile / Tablet) *!*/
/*@media (max-width: 767px) {*/
/*    !* استایل برای موبایل بزرگ و فبلت‌ها *!*/
/*}*/
/*!* موبایل کوچک (Small Mobile) *!*/
/*@media (max-width: 480px) {*/
/*    !* استایل برای موبایل کوچک (مثل iPhone SE) *!*/
/*}*/
/*@media (max-width: 320px) {*/
/*    !* استایل برای موبایل کوچک (مثل iPhone SE) *!*/
/*}*/