/*==================================================
SHOP.CSS V1
Lahijan Marketplace
==================================================*/


/*==================================================
RESET
==================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}


*::before,
*::after {
    box-sizing: border-box;
}

a{

    text-decoration:none;

    color:inherit;

}

html {
    scroll-behavior: smooth;
}


body {

    direction: rtl;

    font-family: "Vazirmatn", sans-serif;

    background: #f4f8fd;

    color: #172133;

    min-height: 100vh;

    overflow-x: hidden;

}



button,
input {

    font-family: inherit;

    border: none;

    outline: none;

}


button {

    cursor: pointer;

    background: none;

}



img {

    width: 100%;

    display: block;

}







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


:root {


    --primary: #1976ff;

    --primary-light: #eef5ff;

    --green: #18c37e;

    --orange: #ff9800;

    --purple: #7367ff;

    --red: #ff5d73;

    --text: #172133;

    --muted: #73809a;

    --card: #ffffff;

    --border: #e8eef8;

    --shadow:
        0 6px 20px rgba(15, 23, 42, .05);


}








/*==================================================
BACKGROUND
==================================================*/


body::before {

    content: "";

    position: fixed;

    top: -120px;

    right: -120px;

    width: 300px;

    height: 300px;

    border-radius: 50%;


    background:
        radial-gradient(circle,
            rgba(25, 118, 255, .15),
            transparent 70%);


    z-index: -2;

}



body::after {

    content: "";

    position: fixed;

    bottom: -120px;

    left: -120px;

    width: 300px;

    height: 300px;

    border-radius: 50%;


    background:
        radial-gradient(circle,
            rgba(0, 188, 212, .12),
            transparent 70%);


    z-index: -2;

}









/*==================================================
PAGE
==================================================*/


.shop-page {

    width: 100%;

    max-width: 700px;

    margin: auto;

    padding-bottom: 80px;

}







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


.shop-header {

    padding: 14px;

}


.header-top {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}



.header-top h1 {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    margin: 0;

    font-size: 20px;

    font-weight: 900;

    color: var(--text);

    pointer-events: none;

}



.circle-btn {

    width: 44px;

    height: 44px;

    border-radius: 50%;


    background: #fff;


    display: flex;

    align-items: center;

    justify-content: center;


    font-size: 20px;


    color: var(--primary);


    box-shadow:

        0 6px 20px rgba(0, 0, 0, .08);


}

.logo-box {

    width: 44px;

    height: 44px;

    border-radius: 14px;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);

    overflow: hidden;

}

.logo-box img {

    width: 34px;

    height: 34px;

    object-fit: contain;

}

.menu-btn i {

    font-size: 24px;

}



.circle-btn:active {

    transform: scale(.92);

}







/*==================================================
SEARCH
==================================================*/


.search-box {


    height: 52px;


    background: #fff;


    border-radius: 18px;


    display: flex;

    align-items: center;


    padding: 0 15px;


    gap: 10px;


    box-shadow: var(--shadow);


    border: 1px solid var(--border);


}


.search-box i {


    font-size: 20px;

    color: var(--primary);

}



.search-box input {


    flex: 1;


    font-size: 13px;


    color: var(--text);


    background: none;


}



.search-box input::placeholder {

    color: #9aa8bc;

}









/*==================================================
CARDS
==================================================*/


.glass-card {


    margin-bottom: 12px;

    margin-left: 14px;

    margin-right: 14px;


    background: #fff;


    border-radius: 18px;


    padding: 12px;


    box-shadow: var(--shadow);


    border: 1px solid var(--border);


    animation: fadeUp .4s ease;


}









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


.section-head {


    display: flex;

    align-items: center;


    gap: 10px;


    margin-bottom: 14px;


}


.section-head h2 {


    font-size: 16px;


    font-weight: 900;


    color: var(--text);


}



.section-icon {


    width: 38px;

    height: 38px;


    border-radius: 12px;


    display: flex;

    align-items: center;

    justify-content: center;


    color: #fff;


    font-size: 17px;


}


.section-icon.blue1 {

    background: #1976ff;

}


.section-icon.green1 {

    background: #18c37e;

}


.section-icon.orange {

    background: #ff9800;

}


.section-icon.purple1 {

    background: #7367ff;

}
.section-icon.red1 {

    background: #f70f2e;

}












/*==================================================
PRODUCT HORIZONTAL
==================================================*/


.horizontal-products {


    display: flex;


    gap: 10px;


    overflow-x: auto;


    scrollbar-width: none;


    padding-bottom: 5px;


}



.horizontal-products::-webkit-scrollbar {

    display: none;

}



.product-item {


    width: 145px;


    flex: none;


    border-radius: 16px;


    overflow: hidden;


    border: 1px solid #e7eef8;


    background: #fff;


    box-shadow:

        0 3px 10px rgba(15, 23, 42, .05);


}




.product-image {

    position: relative;

}

.product-image img {

    width: 100%;

    height: 120px;

    object-fit: cover;

    background: #f4f8fd;

}

.discount-badge {

    position: absolute;

    top: 8px;

    left: 8px;

    min-width: 42px;

    height: 24px;

    padding: 0 8px;

    border-radius: 999px;

    background: #ff4d4f;

    color: #fff;

    font-size: 11px;

    font-weight: 900;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 10px rgba(255, 77, 79, .25);

}




.product-body {


    padding: 10px;


}




.product-body h3 {


    font-size: 13px;


    font-weight: 800;


    line-height: 1.7;


    height: 44px;


    overflow: hidden;


}


.product-old-price {

    margin-top: 8px;

    font-size: 11px;

    color: #9aa8bc;

    text-decoration: line-through;

}

.product-price {

    margin-top: 4px;

    font-size: 14px;

    font-weight: 900;

    color: var(--green);

}


.product-old-price {

    margin-top: 8px;

    font-size: 11px;

    color: #9aa8bc;

    text-decoration: line-through;

    min-height: 16px;
}

.product-old-price.empty-price {

    visibility: hidden;
}


/*==================================================
STORE LIST
==================================================*/


.store-list {

    display: flex;

    gap: 10px;

    overflow-x: auto;

    scrollbar-width: none;

    padding-bottom: 5px;

}

.store-list::-webkit-scrollbar {

    display: none;

}



.store-card {

    width: 145px;

    flex: none;

    overflow: hidden;

    border-radius: 16px;

    background: #fff;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    transition: .25s;

    cursor: pointer;

}



.store-logo {

    width: 100%;

    height: 120px;

    object-fit: cover;

    background: #f4f8fd;

    border-radius: 0;

    border: none;

}


.store-info {

    padding: 10px;

}



.store-info h3 {


    font-size: 15px;


    font-weight: 900;


    margin-bottom: 5px;


}



.store-info p {


    font-size: 12px;


    color: var(--muted);


}




.store-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 4px 9px;

    border-radius: 999px;

    background: #eafaf2;

    color: #18c37e;

    font-size: 11px;

    font-weight: 700;

}



.store-meta {

    margin-top: 8px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

}

.store-enter {

    height: 34px;

    padding: 0 14px;

    border-radius: 10px;

    background: var(--primary);

    color: #fff;

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    font-weight: 800;

    transition: .2s;

}

.store-enter:hover {

    opacity: .92;

}

.store-enter:active {

    transform: scale(.95);

}

.store-card {

    cursor: pointer;

    transition: .25s;

}

.store-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(25, 118, 255, .08);

}






/*==================================================
CATEGORY MODAL
==================================================*/

.category-modal {

    position: fixed;
    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 12px;

    background: rgba(18, 30, 49, .35);
    backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;

    transition: .25s;

    z-index: 9999;

}

.category-modal.show {

    opacity: 1;
    visibility: visible;

}

.category-modal-box {

    width: 100%;
    max-width: 700px;

    background: #fff;

    border-radius: 26px 26px 0 0;

    max-height: 82vh;

    overflow-y: auto;

    padding: 18px;

    box-shadow:
        0 -10px 35px rgba(15, 23, 42, .15);

    transform: translateY(60px);

    transition: .3s ease;

}

.category-modal.show .category-modal-box {

    transform: translateY(0);

}

.category-modal-box::-webkit-scrollbar {

    width: 6px;

}

.category-modal-box::-webkit-scrollbar-thumb {

    background: #d8e4f6;
    border-radius: 999px;

}

.category-modal-box::-webkit-scrollbar-track {

    background: transparent;

}


/* Handle */

.category-modal-box::before {

    content: "";

    display: block;

    width: 54px;
    height: 5px;

    margin: 0 auto 18px;

    border-radius: 999px;

    background: #d9e3f3;

}


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

.modal-head {

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 18px;

}

.modal-head h3 {

    font-size: 18px;
    font-weight: 900;

    color: var(--text);

}

.modal-head button {

    width: 42px;
    height: 42px;

    border-radius: 14px;

    background: #f4f8fd;

    color: #6b7a90;

    transition: .2s;

}

.modal-head button:hover {

    background: #eef5ff;
    color: var(--primary);

}

.modal-head button:active {

    transform: scale(.93);

}


/*==================================================
TREE
==================================================*/

.tree-item {

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 16px;

    overflow: hidden;

    margin-bottom: 10px;

    transition: .25s;

}

.tree-item:hover {

    border-color: #cfe0ff;

    box-shadow:
        0 6px 18px rgba(25, 118, 255, .05);

}

.tree-parent {

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px;

    cursor: pointer;

    font-size: 14px;
    font-weight: 800;

    color: var(--text);

}

.tree-parent>i:first-child {

    width: 36px;
    height: 36px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 16px;

}

.tree-parent>i:last-child {

    margin-right: auto;

    color: #7b8ba5;

    transition: .25s;

}

.tree-children {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .35s ease,
        opacity .25s ease,
        padding .25s ease;

    padding: 0 14px;

}

.tree-children.open {

    max-height: 900px;

    opacity: 1;

    padding-bottom: 14px;

}

.tree-children.open+.nothing {}

.tree-child {

    display: flex;
    align-items: center;

    min-height: 44px;

    margin-top: 8px;

    padding: 0 14px;

    border-radius: 12px;

    background: #f8fbff;

    border: 1px solid #e6eefb;

    font-size: 13px;
    font-weight: 700;

    color: #43526b;

    cursor: pointer;

    transition: .2s;

}

.tree-child:hover {

    background: var(--primary-light);

    border-color: #bfd6ff;

    color: var(--primary);

    transform: translateX(-2px);

}

.tree-child:active {

    transform: scale(.98);

}


/*==================================================
CATEGORY
==================================================*/
/*==================================================
CATEGORY COMPACT
==================================================*/
.category-grid {

    display: flex;

    gap: 8px;

    width: 100%;

    flex-wrap: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    justify-content: flex-start;

    scrollbar-width: none;

}


.category-grid::-webkit-scrollbar {
    display: none;
}



.category-item {

    flex: 0 0 72px;

    height: 72px;

    background: #f8fbff;

    border: 1px solid #e8eef8;

    border-radius: 14px;

    padding: 8px 3px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    transition: .25s;

    overflow: hidden;

}



.category-grid:has(.category-item:nth-child(4):last-child),
.category-grid:has(.category-item:nth-child(3):last-child),
.category-grid:has(.category-item:nth-child(2):last-child),
.category-grid:has(.category-item:nth-child(1):last-child) {

    justify-content: space-evenly;

}



.category-item:hover {

    transform: translateY(-3px);

}


.category-item:active {

    transform: scale(.95);

}


.category-icon {

    width: 34px;

    height: 34px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 16px;

}


.category-item span {

    font-size: 10px;

    font-weight: 800;

    text-align: center;

    color: #27364f;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    width: 100%;

}





/* همه دسته بندی ها */

/* 
.all-category {


    background:#eef5ff;


    border:1px solid #1976ff;


} */





.all-category .category-icon {


    background: #1976ff;


    color: #fff;


}





.category-search-btn {


    width: 100%;


    height: 40px;


    margin-top: 12px;


    border-radius: 13px;


    background: #1976ff;


    color: #fff;


    font-size: 12px;


    font-weight: 800;


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 7px;


}

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


@keyframes fadeUp {


    from {


        opacity: 0;


        transform: translateY(15px);


    }


    to {


        opacity: 1;


        transform: none;


    }


}







@media(max-width:500px) {


    .category-grid {

        grid-template-columns: repeat(3, 1fr);

    }



}


.horizontal-products,
.store-list,
.category-grid {

    cursor: grab;

}

.horizontal-products img,
.store-list img,
.category-grid img {

    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;

}

.horizontal-products.dragging,
.store-list.dragging,
.category-grid.dragging {

    cursor: grabbing;

    user-select: none;

}


.search-box {
    position: relative;
}

.search-suggest {

    position: absolute;

    top: 100%;
    right: 0;
    left: 0;

    margin-top: 8px;

    background: #fff;

    border-radius: 18px;

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

    overflow: hidden;

    display: none;

    z-index: 1000;

    padding: 10px;

}

.search-item {

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 18px;

    cursor: pointer;

    transition: .2s;

}

.search-item:hover {

    background: #f5f7fb;

}

.search-item i {

    color: var(--primary);

}

.suggest-empty {

    padding: 14px 16px;

    text-align: center;

    color: #888;

    font-size: 14px;

}

.suggest-item {

    cursor: pointer;

}
/* ===========================
DRAWER
===========================*/
/*==================================================
DRAWER
==================================================*/

.drawer-overlay{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:flex-start;

    background:rgba(12,18,30,.45);

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.drawer-overlay.show{

    opacity:1;
    visibility:visible;

}

/*==================================================*/

.drawer{

    width:300px;
    max-width:85%;
    height:100%;

    background:#fff;

    border-radius:26px 0 0 26px;

    transform:translateX(100%);

    transition:.35s cubic-bezier(.22,.61,.36,1);

    display:flex;
    flex-direction:column;

    overflow:hidden;

    box-shadow:
        -12px 0 35px rgba(0,0,0,.18);

}

.drawer-overlay.show .drawer{

    transform:translateX(0);

}

/*==================================================*/

.drawer-header{

    height:84px;

    padding:0 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:linear-gradient(135deg,#1976ff,#4f9cff);

    color:#fff;

}

.drawer-header h3{

    font-size:19px;

    font-weight:900;

}

.drawer-close{

    width:42px;
    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.18);

    color:#fff;

    transition:.25s;

}

.drawer-close:hover{

    background:rgba(255,255,255,.28);

}

.drawer-close i{

    font-size:20px;

}

/*==================================================*/

.drawer-menu{

    flex:1;

    overflow:auto;

    padding:18px 14px;

}

/*==================================================*/

.drawer-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px;

    border-radius:18px;

    text-decoration:none;

    color:#23324d;

    transition:.25s;

    margin-bottom:8px;

}

.drawer-item:hover{

    background:#f5f9ff;

    transform:translateX(-4px);

}

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

.drawer-item i{

    width:44px;

    height:44px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    color:#fff;

    flex-shrink:0;

}

/* هر آیتم رنگ خودش */

.drawer-item:nth-child(1) i{

    background:#1976ff;

}

.drawer-item:nth-child(2) i{

    background:#00b894;

}

.drawer-item:nth-child(3) i{

    background:#ff4d6d;

}

.drawer-item:nth-child(4) i{

    background:#ff9800;

}

.drawer-item:nth-child(5) i{

    background:#6c63ff;

}

.drawer-item:nth-child(6) i{

    background:#26c6da;

}

.drawer-item:nth-child(7) i{

    background:#7cb342;

}

.drawer-item:nth-child(8) i{

    background:#546e7a;

}

.drawer-item:nth-child(9) i{

    background:#8e44ad;

}

.drawer-item span{

    font-size:14px;

    font-weight:800;

}

/*==================================================*/

.drawer-divider{

    height:1px;

    margin:14px 8px;

    background:#edf2f8;

}

/*==================================================*/

.drawer-menu::-webkit-scrollbar{

    width:5px;

}

.drawer-menu::-webkit-scrollbar-thumb{

    background:#d8e2f0;

    border-radius:20px;

}

.qr-modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:10000;

}


.qr-modal.show{

    display:flex;

}


.qr-box{

    width:90%;
    max-width:350px;

    background:#fff;

    border-radius:25px;

    padding:25px;

    text-align:center;

}


.qr-box img{

    width:220px;

    height:220px;

    margin:20px auto;

}


.qr-box p{

    font-size:13px;

    color:#64748b;

    word-break:break-all;

}


.qr-box button{

    width:100%;

    height:45px;

    margin-top:10px;

    border-radius:14px;

    background:#1976ff;

    color:white;

    font-weight:800;

}


#closeQr{

    width:40px;

    height:40px;

    background:#f1f5f9;

    color:#111;

    float:left;

}