@font-face {
    font-family: 'CyrillicRibbon';
    src: url('CyrillicRibbon.eot');
    src: url('CyrillicRibbon.eot?#iefix') format('embedded-opentype'), url('CyrillicRibbon.woff2') format('woff2'), url('CyrillicRibbon.woff') format('woff'), url('CyrillicRibbon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CenturyGothic';
    src: url('CenturyGothic.eot');
    src: url('CenturyGothic.eot?#iefix') format('embedded-opentype'), url('CenturyGothic.woff2') format('woff2'), url('CenturyGothic.woff') format('woff'), url('CenturyGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'dorodi';
    src: url('fonts/1-IranSansWeb/IranSansWeb.eot');
    src: url('fonts/1-IranSansWeb/IranSansWeb.eot?#iefix') format('embedded-opentype'), url('fonts/1-IranSansWeb/IranSansWeb.woff2') format('woff2'), url('fonts/1-IranSansWeb/IranSansWeb.woff') format('woff'), url('fonts/1-IranSansWeb/IranSansWeb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: dorodiragham;
    src: url(font/Farsi-Digits/Shabnam-Medium-FD.ttf);
}










/* دسته‌بندی‌ها */
.has-sub {
    position: relative;
}

.arrow-navbar {
    float: left;
}

.submenu {
    display: none;
    margin: 5px 15px;
    padding: 5px 0;
    border-right: 2px solid #4CAF50;
}

    .submenu a {
        font-size: 14px;
        padding: 8px 15px;
        color: #ccc;
    }

        .submenu a:hover {
            color: #fff;
        }

/* نمایش زیرمنو وقتی اکتیو شد */
.has-sub.active + .submenu {
    display: block;
}





a {
    text-decoration: none
}



/*css صفحه های index/header/footer*/

:root {
    --primary-color: #100E34;
    --secondary-color: #D32E36;
    --text-color: #333;
    --light-text: #777;
    --white: #fff;
    --light-gray: #f5f5f5;
    --dark-gray: #e0e0e0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Vazir', Tahoma, sans-serif;
    user-select: none;
}

body {
    background-color: var(--light-gray);
    color: var(--text-color);
    direction: rtl;
}

header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 2.5%;
    max-width: 1400px;
    margin: 0 auto;
}

.header-right .logo img {
    height: 80px;
    cursor: pointer;
}

nav ul {
    display: flex;
    list-style: none;
}

    nav ul li {
        margin-right: 20px;
    }

        nav ul li a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            transition: color 0.3s;
        }

            nav ul li a:hover {
                color: var(--secondary-color);
            }

.header-center {
    margin-bottom: -1rem;
}

    .header-center nav ul {
        display: flex;
        list-style: none;
    }

        .header-center nav ul li {
            margin: 0 15px;
            position: relative;
        }

            .header-center nav ul li a {
                text-decoration: none;
                color: var(--text-color);
                font-weight: 500;
                transition: color 0.3s;
                padding: 5px 0;
                display: block;
            }

                .header-center nav ul li a:hover {
                    color: var(--secondary-color);
                }

                .header-center nav ul li a::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 0;
                    height: 2px;
                    background-color: var(--secondary-color);
                    transition: width 0.3s;
                }

                .header-center nav ul li a:hover::after {
                    width: 100%;
                }

.header-left {
    display: flex;
    align-items: center;
}

    .header-left .cart {
        font-size: 1.5rem;
        color: var(--text-color);
        margin-left: 20px;
        position: relative;
    }

.cart img {
    height: 30px;
}

.header-left .login {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
}

    .header-left .login:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }


.phone-layout {
    color: #fff;
    text-decoration: none
}

.banner {
    padding: 20px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.banner-image {
    position: relative;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
}

    .banner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.view-products {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background-color: var(--secondary-color);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

    .view-products:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }

.search-section {
    padding: 30px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.search-container {
    background-color: var(--white);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

    .search-container label {
        display: block;
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 15px;
        color: var(--primary-color);
    }

.divider {
    height: 1px;
    background-color: var(--dark-gray);
    margin-bottom: 20px;
}

.search-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

    .search-fields select {
        flex: 1;
        min-width: 50px;
        padding: 12px;
        border: 1px solid var(--dark-gray);
        border-radius: 5px;
        font-size: 1rem;
        background-color: var(--light-gray);
    }

    .search-fields input {
        flex: 1;
        min-width: 200px;
        padding: 12px;
        border: 1px solid var(--dark-gray);
        border-radius: 5px;
        font-size: 1rem;
        background-color: var(--light-gray);
    }



.search-btn {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

    .search-btn:hover {
        background-color: var( --secondary-color);
        color: var(--white);
    }

.categories, .brands, .products {
    padding: 30px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

    .categories label, .brands label, .products label {
        display: block;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--primary-color);
        color: #b0aeec
    }

.category-items, .brand-items, .product-items {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) var(--light-gray);
}

    .category-items::-webkit-scrollbar,
    .brand-items::-webkit-scrollbar,
    .product-items::-webkit-scrollbar {
        height: 8px;
    }

    .category-items::-webkit-scrollbar-track,
    .brand-items::-webkit-scrollbar-track,
    .product-items::-webkit-scrollbar-track {
        background: var(--light-gray);
        border-radius: 10px;
    }

    .category-items::-webkit-scrollbar-thumb,
    .brand-items::-webkit-scrollbar-thumb,
    .product-items::-webkit-scrollbar-thumb {
        background-color: var(--secondary-color);
        border-radius: 10px;
    }

.category-item, .brand-item {
    min-width: 200px;
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    flex-shrink: 0;
}

    .category-item:hover, .brand-item:hover {
        transform: translateY(-5px);
    }

    .category-item img, .brand-item img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        margin-bottom: 15px;
    }

    .category-item span, .brand-item span {
        display: block;
        font-weight: 500;
        font-size: 1.1rem;
    }

.brand-item {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.product-item {
    flex: 0 0 250px; /* عرض پایه کارت */
    max-width: 250px; /* بیشتر نشه */
    min-width: 250px; /* کمتر هم نشه */
    background-color: var(--white);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    position: relative;
    flex-shrink: 0;
}

    .product-item:hover {
        transform: translateY(-5px);
    }

.wishlist {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 1.2rem;
    color: var(--light-text);
    cursor: pointer;
    transition: color 0.3s;
    z-index: 1;
}

    .wishlist:hover {
        color: red;
    }

.product-image {
    width: 100%;
    height: 180px;
    margin-bottom: 15px;
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }



.product-info h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--primary-color);
    text-align: center;
}

.product-info p {
    margin-bottom: 10px;
}

.price {
    display: flex;
    align-items: center;
    margin-top: -15px;
    text-align: center
}

.current-price {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
    margin-left: 10px;
}

.toman {
    font-family: 'Vazir FD';
    margin-top: 15px;
    font-size: 13px;
}

.old-price {
    font-size: 0.9rem;
    color: var(--light-text);
    text-decoration: line-through;
}

.discount {
    background-color: var(--secondary-color);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: auto;
}

.view-btn {
    display: inline-block;
    padding: 10px 85px;
    background-color: var(--primary-color); /* رنگ دکمه */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

    .view-btn:hover {
        background-color: var(--secondary-color); /* رنگ هاور */
    }

.features {
    padding: 50px 5%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    background-color: var(--white);
}

.feature-item {
    text-align: center;
    padding: 20px;
}

    .feature-item i {
        font-size: 2.5rem;
        color: var(--secondary-color);
        margin-bottom: 15px;
    }

    .feature-item h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: var(--primary-color);
    }

    .feature-item p {
        color: var(--light-text);
        font-size: 0.9rem;
    }

footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 50px 5% 20px;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.footer-section h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

    .footer-section h3::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50px;
        height: 2px;
        background-color: var(--secondary-color);
    }

.footer-section p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
}

    .footer-section ul li {
        margin-bottom: 10px;
    }

        .footer-section ul li a {
            color: var(--white);
            text-decoration: none;
            transition: color 0.3s;
        }

            .footer-section ul li a:hover {
                color: var(--secondary-color);
            }

.copyright {
    text-align: center;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Contact Page Styles */
.page-header {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 60px 5% 40px;
    text-align: center;
    margin-bottom: 40px;
}

    .page-header h1 {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }

.breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    .breadcrumb a {
        color: var(--secondary-color);
        text-decoration: none;
    }

    .breadcrumb span {
        color: var(--white);
    }

.contact-section {
    padding: 0 5% 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.contact-container {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
}

.contact-info {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.info-box {
    background-color: var(--white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    gap: 15px;
}

    .info-box i {
        font-size: 1.8rem;
        color: var(--secondary-color);
        margin-top: 5px;
    }

    .info-box h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: var(--primary-color);
    }

    .info-box p {
        color: var(--light-text);
        font-size: 0.95rem;
        line-height: 1.6;
    }

.contact-form {
    flex: 1;
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

    .contact-form h2 {
        font-size: 1.8rem;
        margin-bottom: 25px;
        color: var(--primary-color);
        text-align: center;
    }

.form-group {
    margin-bottom: 20px;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid var(--dark-gray);
        border-radius: 5px;
        font-size: 1rem;
        background-color: var(--light-gray);
    }

    .form-group textarea {
        resize: vertical;
    }

.submit-btn {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}

    .submit-btn:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }

.map-section {
    width: 100%;
    margin-bottom: -5px;
}

.login-mob {
    display: none;
}


.dashbord {
    display: none;
}



.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: var(--primary-color);
    opacity: 0.98;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

    .sidenav a {
        /*        padding: 8px 8px 8px 32px;*/
        text-decoration: none;
        color: #fff;
        display: block;
        transition: 0.3s;
        font-size: 17px;
    }

        .sidenav a:hover {
            color: var(--secondary-color);
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
        color: var(--secondary-color);
    }


.navbar {
    font-size: 20px;
}


.datsebandi-more {
    display: none;
}

.berand-more {
    display: none;
    font-size: 17px;
}


.login-navbar {
    text-align: center;
}

.arrow-navbar img {
    width: 15px;
    height: 15px;
    color: #fff;
    position: absolute;
    left: 10px;
    margin-top: 10px;
}


.item-more {
    font-size: 17px;
    margin-right: 20px;
}




.favorite-btn {
    background: none;
    border: none;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
    padding: 0;
}

.heart-icon {
    width: 24px;
    height: 24px;
}







.cart-icon {
    position: relative;
    display: inline-block;
}

    .cart-icon img {
        width: 30px;
        height: 30px;
    }

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}








/* دکمه بستن */
.sidenav .closebtn {
    position: absolute;
    top: 10px;
    left: 40px;
    font-size: 32px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* لوگو */

/* لینک‌ها */
.sidenav a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 15px;
    color: #eee;
    border-radius: 8px;
    margin: 4px 0px;
    transition: all 0.2s ease-in-out;
}

    .sidenav a:hover {
        background-color: #D02E36; /* سبز */
        color: #fff;
    }

/* دکمه‌های ویژه */
.admin-btn {
    background: #D32E36;
    color: #fff !important;
    text-align: center;
    margin: 10px 20px;
    border-radius: 8px;
    padding: 10px;
    font-weight: bold;
    display: block;
}

.logout-btn {
    background: transparent;
    border: 1px solid #D32E36;
    color: #D32E36 !important;
    text-align: center;
    margin: 15px 20px;
    border-radius: 8px;
    padding: 10px;
    transition: 0.2s;
}

    .logout-btn:hover {
    }

/* نام کاربر */
.user-info {
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
}

/* دسته‌بندی‌ها */
.has-sub {
    position: relative;
}

.arrow-navbar {
    float: left;
}

.submenu {
    display: none;
    margin: 5px 15px;
    padding: 5px 0;
    border-right: 2px solid #4CAF50;
}

    .submenu a {
        font-size: 14px;
        padding: 8px 15px;
        color: #ccc;
    }

        .submenu a:hover {
            color: #fff;
        }

/* نمایش زیرمنو وقتی اکتیو شد */
.has-sub.active + .submenu {
    display: block;
}



.checkremember {
    float: right;
    margin-left: 0.5em;
    width: 1em;
    height: 1em;
    margin-top: .25em;
}




























/* Responsive Styles */
@media (max-width: 1024px) {

    .list-category {
        display: none
    }


    .header-left .login {
        display: none;
    }

    .login-mob {
        display: block;
    }


        .login-mob img {
            height: 30px;
            margin-top: 0px;
        }

    .header-container {
        padding: 15px 3%;
    }

    .banner {
        display: block;
    }

    .banner-image {
        height: 250px;
    }

    .contact-container {
        flex-direction: column;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    .view-products {
        bottom: 15px;
        left: 15px;
        padding: 6px 15px;
    }
}

@media (max-width: 768px) {



    .header-container {
        justify-content: center;
        position: relative;
        padding: 30px;
    }

    .header-right {
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dashbord {
        height: 35px;
        position: absolute;
        right: 8%;
        transform: translateX(50%);
        display: flex;
        cursor: pointer;
    }

    .header-right img {
        max-height: 55px;
    }

    .header-center {
        display: none !important;
    }








    /* .menu-toggle {
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 100;
  }
   */
    .header-left {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 98;
    }

    .header-center.active + .overlay {
        display: block;
    }

    .header-center {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: var(--white);
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        transition: right 0.3s;
        z-index: 99;
        padding-top: 80px;
        overflow-y: auto;
    }

        .header-center.active {
            right: 0;
        }

        .header-center nav ul {
            flex-direction: column;
            padding: 20px;
        }

            .header-center nav ul li {
                margin: 15px 0;
            }

    nav {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 80%;
        height: calc(100vh - 80px);
        background-color: #fff;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 99;
    }

        nav.active {
            right: 0;
        }

        nav ul {
            flex-direction: column;
            padding: 20px;
        }

            nav ul li a {
                margin: 15px 0;
            }

    .banner-image {
        height: 200px;
    }

    .search-fields {
        flex-direction: column;
    }

        .search-fields select, .search-btn {
            width: 100%;
        }

        .search-fields input {
            width: 100%;
        }

    .category-item, .brand-item {
        min-width: 150px;
    }

    .brand-item {
        width: 120px;
        height: 120px;
    }

    .product-item {
        flex: 0 0 80%;
        max-width: 450px;
        min-width: unset; /* اجازه بده ریسپانسیو بشه */
    }

    .page-header {
        padding: 40px 5% 30px;
    }

        .page-header h1 {
            font-size: 2rem;
        }
}

@media (min-width: 768px) {
    .menu-toggle {
        display: none;
    }

    #prevBtn {
        display: none
    }

    #nextBtn {
        display: none
    }
}

@media (max-width: 480px) {

    .view-btn {
        width: 100%;
    }


    .banner-image {
        height: 180px;
    }

    .view-products {
        bottom: 15px;
        left: 15px;
        padding: 8px 15px;
    }

    .category-item, .brand-item {
        min-width: 120px;
        padding: 15px;
    }

    .brand-item {
        width: 100px;
        height: 100px;
    }

        .category-item img, .brand-item img {
            width: 60px;
            height: 60px;
        }

    .product-item {
        flex: 0 0 80%;
        max-width: 450px;
        min-width: unset; /* اجازه بده ریسپانسیو بشه */
        margin-right: 10px;
    }

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

    .page-header {
        padding: 30px 5% 20px;
    }

        .page-header h1 {
            font-size: 1.8rem;
        }

    .info-box {
        flex-direction: column;
        text-align: center;
    }

        .info-box i {
            margin-bottom: 10px;
        }
}


@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}






/* Style The Dropdown Button */
.dropbtn-pc {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
    display: block;
}


    .dropbtn-pc:hover {
        color: var(--secondary-color);
    }

/* The container <div> - needed to position the dropdown content */
.dropdown-pc {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-pc {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
    padding: 5px 0;
}

    /* Links inside the dropdown */
    .dropdown-content-pc a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content-pc a:hover {
        }

/* Show the dropdown menu on hover */
.dropdown-pc:hover .dropdown-content-pc {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown-pc:hover .dropbtn-pc {
}







/*جزئیات محصول*/
/* فونت و بدنه کلی */
body {
    font-family: "Segoe UI", Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fefefe;
}

.mobile-only {
    display: none !important;
}

.product-detail-container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
    color: #100E34;
}

.product-detail-main {
    display: flex;
    gap: 2rem;
}

.product-images {
    flex: 1;
}

    .product-images img#mainImage {
        width: 80%;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

.gallery-thumbnails {
    margin-top: 1rem;
    display: flex;
    gap: 10px;
}

    .gallery-thumbnails img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        cursor: pointer;
        border-radius: 6px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }

        .gallery-thumbnails img:hover {
            transform: scale(1.1);
        }

.product-info-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .product-info-detail h1 {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

.product-brand-model {
    color: #777;
    margin-bottom: 1rem;
}

.price-section {
    margin-bottom: 1rem;
}

.price, .discounted-price {
    font-size: 1.6rem;
    font-weight: bold;
    color: #D32E36;
}

.original-price, .mobile-price .original {
    text-decoration: line-through;
    color: gray;
    font-size: 1.2rem;
    margin-right: 10px;
}

.action-buttons .btn {
    margin-right: 10px;
    font-size: 1rem;
    padding: 10px 20px;
}

.product-description h3,
.product-specs h3 {
    margin-top: 2rem;
    font-weight: bold;
    border-bottom: 2px solid #D32E36;
    padding-bottom: 5px;
}

.product-description p {
    line-height: 1.6;
}

.product-specs table {
    width: 100%;
    font-size: 1rem;
}

.product-specs th, .product-specs td {
    padding: 10px;
    text-align: right;
}

.product-specs th {
    background-color: #f5f5f5;
    width: 150px;
}

/* موبایل */
@media (max-width: 768px) {

    .cart img {
        margin-left: -15px;
    }

    .btn-panel {
        display: none;
    }

    .Name-karbar-header {
        display: none;
    }


    .product-detail-main {
        flex-direction: column;
    }

    .mobile-only {
        display: block !important;
    }

    .price-section {
        display: none;
    }

    .add-to-cart {
        display: none;
    }

    .mobile-gallery-slider {
        display: flex;
        /*        overflow-x: auto;
        scroll-snap-type: x mandatory;*/
        gap: 10px;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

        .mobile-gallery-slider img {
            flex: 0 0 auto;
            width: 100%;
            max-width: 300px;
            border-radius: 8px;
            /*            scroll-snap-align: start;*/
            object-fit: cover;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }

    .mobile-fixed-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        z-index: 1000;
        border-top: 1px solid #eee;
    }

        .mobile-fixed-bar .mobile-price {
            font-size: 1.2rem;
            color: #D32E36;
            display: flex;
            flex-direction: column;
            float: right;
        }

    .add-to-cart-mobile {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 16px;
        font-size: 1rem;
        border-radius: 8px;
        float: right;
    }

    .mobile-price .discounted {
        position: absolute;
        font-size: 1rem;
        margin-top: 10px;
        left: 5px
    }

    .mobile-slider-container {
        overflow: hidden;
        position: relative;
        margin-bottom: 1rem;
    }

    .slider-track {
        display: flex;
        /*        scroll-snap-type: x mandatory;*/
        /*        overflow-x: auto;*/
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

        .slider-track img {
            flex: 0 0 100%;
            width: 100%;
            height: auto;
            scroll-snap-align: center;
            border-radius: 10px;
            object-fit: cover;
        }

    .slider-dots {
        display: flex;
        justify-content: center;
        margin-top: 8px;
        gap: 5px;
    }

        .slider-dots .dot {
            width: 10px;
            height: 10px;
            background: #ccc;
            border-radius: 50%;
            transition: background 0.3s;
        }

            .slider-dots .dot.active {
                background: #D32E36;
            }



    .Name-karbar-header {
        display: none
    }


    .logo-nav {
        width: 100%;
        text-align: center
    }


    .Name-navbar {
        width: 100%;
        text-align: center;
        color: #fff
    }
}


.setting-icon{
    width:30px;
    height:30px

}



/*--------------------------------------------------------*/
:root {
    --primary: #D32E36;
    --accent: #100E34;
    --bg: #ffffff;
    --surface: #f8fafc;
    --muted: #6b7280;
    --shadow: 0 12px 30px rgba(9, 30, 66, 0.12);
    --radius: 14px;
    --mobile-break: 720px;
    --transition: 240ms cubic-bezier(.2,.9,.3,1);
}

  

    .page-content { max-width: 980px; margin: 0 auto; }
    .demo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
    .card { background: var(--surface); padding: 18px; border-radius: 12px; box-shadow: var(--shadow); }

    @media (max-width: 720px) {
      .demo-cards { grid-template-columns: 1fr; }
    }


    /* Floating button */
.fcw-button {
    position: fixed;
    left: 20px;
    bottom: 40px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(180deg,var(--primary), #100E34);
    color: #fff;
    box-shadow: 0 12px 30px rgba(11,147,246,0.18);
    cursor: pointer;
    z-index: 9999;
    transition: transform var(--transition), box-shadow var(--transition);
    transform-origin: center;
    user-select: none;
}

    .fcw-button:active { transform: translateY(1px) scale(.98); }

    .fcw-button .icon { width: 28px; height: 28px; display: block; }

    .fcw-badge {
      position: absolute;
      left: 8px;
      top: 8px;
      min-width: 18px;
      height: 18px;
      border-radius: 10px;
      background: var(--accent);
      color: white;
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 6px;
      box-shadow: 0 6px 16px rgba(6,182,212,0.18);
    }

    /* subtle idle float */
    @keyframes floaty {
      0% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
      100% { transform: translateY(0); }
    }
    .fcw-button.idle { animation: floaty 3.6s ease-in-out infinite; }

    /* Panel */
    .fcw-panel {
      position: fixed;
      left: 20px;
      bottom: 96px;
      width: 340px;
      max-width: calc(100% - 40px);
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,252,0.96));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transform-origin: bottom right;
      transform: translateY(12px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition), transform var(--transition);
      z-index: 9998;
      overflow: hidden;
      border: 1px solid rgba(15,23,42,0.04);
      text-align:left;
    }

    /* When toggle checked, show panel */
    .fcw-toggle:checked ~ .fcw-panel {
      opacity: 1;
      pointer-events: auto;
    }

    .fcw-panel-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(15,23,42,0.04);
    }

    .fcw-panel-title { font-weight: 600; font-size: 15px;text-align:right;}
    .fcw-panel-sub { font-size: 13px; color: var(--muted); }
    .fcw-panel-close{width:125px;text-align:left}
    .fcw-panel-body { padding: 12px 12px 16px 12px; display: grid; gap: 10px; max-height: 56vh; overflow: auto; }
    .icon-tamas{width:36px;height:36px;margin-top:-40px}
    .icon-ertebatha{width:40px;height:40px;}
    .icon-ertebatha-2{width:25px;height:25px;}




    .fcw-contact {
      display: flex; gap: 10px; align-items: center; padding: 10px;
      background: linear-gradient(180deg, rgba(250,250,252,0.6), rgba(255,255,255,0.6));
      border-radius: 10px;
      transition: background var(--transition), transform var(--transition);
      text-decoration: none;
      color: inherit;
    }
    .fcw-contact:hover { transform: translateY(-3px); }

    .contact-icon {
      width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
      background: rgba(11,147,246,0.08); color: var(--primary); flex: 0 0 44px; font-size: 18px;
    }

    .contact-meta { display:flex; flex-direction: column; gap: 4px; flex: 1; }
    .contact-title { font-weight: 600; }
    .contact-sub { font-size: 13px; color: var(--muted);}

    .fcw-actions { display:flex; gap:8px; justify-content:flex-end; padding: 12px; border-top: 1px dashed rgba(15,23,42,0.04); }
    
    .btn.primary2 { background: var(--primary); color: white; box-shadow: 0 8px 22px rgba(11,147,246,0.12); }
    .btn.ghost { background: rgba(11,147,246,0.06); color: var(--primary); }

    .close-btn { margin-left: 8px; }

    /* Mobile: panel becomes full-screen from bottom */
/*    @media (max-width: 720px) {
      .fcw-button { right: 14px; bottom: 14px; width: 60px; height: 60px; }
      .fcw-panel {
        right: 0; left: 0; bottom: 0; top: auto; width: 100%;
        height: 0; max-height: 0; border-radius: 16px 16px 0 0;
        transform-origin: bottom center;
        transition: height var(--transition), max-height var(--transition), opacity var(--transition), transform var(--transition);
      }
      .fcw-toggle:checked ~ .fcw-panel {
        height: 100vh; max-height: 100vh; opacity: 1;
      }
      .fcw-panel-body { padding: 18px; }
      .fcw-panel-header { padding: 18px; }
      .fcw-actions { padding: 12px 18px 24px 18px; }
    }*/

    /* small helpers */
    .sr-only {
      position: absolute !important;
      height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; animation: none !important; }
    }