@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@font-face {
    font-family: 'Iransanse';
    src: url('../../dashboard/fonts/iransans/IRANSans-Light-web.woff')format('woff');
}
@font-face {
    font-family: 'Number';
    src: url('../../dashboard/fonts/number/Montserrat-Black.ttf')format('truetype');
}
/* Reseting */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #ecf0f3;
    font-family: 'Iransanse', serif !important;
    font-weight: bold;
}

.wrapper {
    max-width: 350px;
    font-family: 'Iransanse', serif !important;
    min-height: 500px;
    margin: 80px auto;
    padding: 40px 30px 30px 30px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.section-403{
    max-width: 650px;
    font-family: 'Iransanse', serif !important;
    margin: 80px auto;
    padding: 40px 30px 30px 30px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.logo {
    width: 150px;
    margin: 40px auto;
}

.logo img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0px 0px 3px #5f5f5f,
    0px 0px 0px 5px #ecf0f3,
    8px 8px 15px #a7aaa7,
    -8px -8px 15px #fff;
}
.form-select {
    background-color: transparent; /* تغییر رنگ پس‌زمینه */
    border-radius: 10px; /* گوشه‌های گرد */
    padding: 10px;
    font-family: 'Iransanse', serif !important;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;

}
.form-select option {
    font-family: 'Iransanse', serif !important;
    font-size: 16px;
}
.no-arrow {
    appearance: none;
    -webkit-appearance: none; /* برای مرورگرهای وب‌کیت */
    -moz-appearance: none; /* برای مرورگرهای موزیلا */
    background-image: none; /* حذف تصویر فلش */
    padding-right: 10px; /* فضای کافی در سمت راست */
}
.wrapper .name {
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 1.3px;
    padding-left: 10px;
    color: #555;
}

.wrapper .form-field input {
    width: 100%;
    display: block;
    border: none;
    direction: rtl;
    outline: none;
    background: none;
    font-size: 1.2rem;
    color: #666;
    padding: 10px 15px 10px 10px;
    /* border: 1px solid red; */
}

.wrapper .form-field {
    padding-left: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}

.wrapper .form-field .fas {
    color: #555;
}

.wrapper .btn {
    box-shadow: none;
    width: 100%;
    height: 40px;
    background-color: #03A9F4;
    color: #fff;
    border-radius: 25px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    letter-spacing: 1.3px;
}
.section-403 .btn {
    box-shadow: none;
    width: 100%;
    height: 40px;
    background-color: #03A9F4;
    color: #fff;
    border-radius: 25px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    letter-spacing: 1.3px;
}

.wrapper .btn:hover {
    background-color: #039BE5;
}

.wrapper a {
    text-decoration: none;
    font-size: 0.8rem;
    color: #03A9F4;
}

.wrapper a:hover {
    color: #039BE5;
}
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* تنظیم ارتفاع به 100% */
    padding-left: 100px; /* فاصله از چپ */
    padding-right: 100px; /* فاصله از راست */
    box-sizing: border-box;
}
/*///////*/
.wrapper-register{
    width: 1200px;
    font-family: 'Iransanse', serif !important;
    min-height: 500px;
    margin: 80px auto;
    padding: 40px 30px 30px 30px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.wrapper-register .form-field {
    padding-left: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}
.wrapper-register .form-field input {
    width: 100%;
    display: block;
    border: none;
    direction: rtl;
    outline: none;
    background: none;
    font-size: 1.2rem;
    color: #666;
    padding: 10px 15px 10px 10px;
    /* border: 1px solid red; */
}
.invalid-form {
    background-color: #fde6e6 !important;
}
.error-invoice-main{
    margin: 20px auto;
    width: 800px;
    height: 100px;
    min-height: 600px;
    font-family: 'Iransanse', serif !important;
    overflow-y: auto;
    padding: 10px 10px 10px 10px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.custom-primary{
    width: 60%;
    height: 40px;
    background-color: #96d7f4;
    color: #3a3939;
    border-radius: 25px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    letter-spacing: 1px;
}
.custom-label{
    background-color: #96d7f4;
    color: #3a3939;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    letter-spacing: 1px;
}
.w-lg-50{
    width: 50%;
}
.custom-green{
    width: 60%;
    height: 40px;
    background-color: #aef496;
    color: #3a3939;
    border-radius: 25px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    letter-spacing: 1px;
}
.custom-primary-label{
    width: 60%;
    height: 40px;
    padding: 20px;
    color: #6d6c6c;
    border-radius: 25px;
    font-size: 17px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
    letter-spacing: 1px;
}
.custom-primary:hover {
    background-color: #1ab1f4;
    color: #faf9f9;
}
#image-label {
    width: 100%;
    display: block;
    border: none;
    direction: rtl;
    outline: none;
    background: none;
    font-size: 1.2rem;
    color: #acaaaa;
    padding: 10px 15px 10px 10px;
}
#license-label {
    width: 100%;
    display: block;
    border: none;
    direction: rtl;
    outline: none;
    background: none;
    font-size: 1.2rem;
    color: #acaaaa;
    padding: 10px 15px 10px 10px;
}
.avatar{

    border-radius: 5px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;

}
.custom-card{
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    width: 100%;
    padding: 20px;
    background-color: #fbc17f;
    color: #f4f1f1;
    border-radius: 25px;
    letter-spacing: 0.5px;
}
.btn-custom-primary{
    background-color: #96d7f4;
    color: #3a3939;
    border-radius: 25px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
}
@keyframes shake-grow {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3); /* بزرگ شدن */
    }
    50% {
        transform: scale(0.8); /* کوچک شدن */
    }
    75% {
        transform: scale(1.1); /* دوباره بزرگتر شدن */
    }
    100% {
        transform: scale(1); /* بازگشت به اندازه عادی */
    }
}

.error-message {
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.5s ease-in-out;
}

.error-message.show {
    opacity: 1;
    animation: shake-grow 0.6s ease-in-out infinite; /* اجرای انیمیشن برای 0.6 ثانیه */
}
/* نقاط توقف برای عرض‌های مختلف */
.sidebar-category{
    font-family: 'Iransanse', serif !important;
    min-height: 580px;
    max-height: 580px;
    margin: 20px auto 0px auto;
    padding: 15px 15px 15px 15px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
    overflow-y: auto;
}
.sidebar-basket{
    font-family: 'Iransanse', serif !important;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    height: 100vh; /* ارتفاع کل صفحه */
    overflow: hidden;
    max-height: 720px;
    overflow-y: auto;
    margin: 20px auto;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.basket-invoice{
    padding: 10px 10px 10px 10px;
}
.sidebar-profile{
    font-family: 'Iransanse', serif !important;
    min-height: 100px;
    margin: 20px auto 0px auto;
    padding: 20px 20px 20px 20px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.content-profile{
    font-family: 'Iransanse', serif !important;
    min-height: 100px;
    margin: 20px auto 0px auto;
    padding: 20px 20px 20px 20px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.content-profile input{

}
.content-profile input {
    width: 100%;
    display: block;
    border: none;
    direction: rtl;
    outline: none;
    background: none;
    font-size: 1rem;
    color: #666;
    padding: 5px 10px 5px 5px;
    /* border: 1px solid red; */
}
.content-profile label {
    font-size: 10px;
    border-radius: 25px;
    background-color: #5c99f4;
    color: #FFFFFF;
    width: 20vh;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
}
.content-profile .form-field {
    padding-left: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}
.span-custom{
    font-size: 10px;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
}
.span-primary{
    background-color: #5c99f4;
    color: #FFFFFF;
}
.shop-category{
    font-family: 'Iransanse', serif !important;
    min-height: 720px;
    max-height: 720px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 20px auto;
    padding: 10px 10px 10px 10px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.main-card{
    padding: 10px 10px 10px 10px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.c-shadow{
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.shadow-2{
    box-shadow: 10px 10px 10px #cbced1, -10px -10px 10px #fff;

}
.btn-shadow{
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
}
.bg-light-primary{
    background-color: #5c99f4;
}
.profile-container{
    margin: 10px 30px 40px 30px;
}
.shop-container {
    width: 100%;
    display: flex;
    min-height: 100vh; /* تنظیم ارتفاع به 100% */
    padding-left: 20px; /* فاصله از چپ */
    padding-right: 20px; /* فاصله از راست */
    box-sizing: border-box;
}
.header-basket{
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    width: 100%;
    border-radius: 25px;
    padding: 0.2rem;

}
#remaining-time{
    font-size: 30px;
    color: #848383;
    font-weight: bold;
    font-family: 'Number', serif;
}
.card-category{
    min-width: auto;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    width: 100%;
    border-radius: 10px;
}
.category-image{
    width: 100%;
    height: 104px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.w-80{
    width: 80%;
}
.card-category-title{
    font-size: 13px !important;
    background-color: #e6f4ff !important;
}
.card-product-details{
    font-size: 10px !important;
    background-color: #f8f7dd !important;
}
.card-product-title{
    font-size: 15px !important;
    background-color: #f1f3b5 !important;
}
.card-category-content{
    padding: 4px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-right: 5px;
}
.details-product{
    padding: 10px 5px 10px 5px;
    border-radius: 20px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}
.category-product{
    display: inline-block; /* یا از flexbox استفاده کنید */
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    padding: 5px 20px;
    border-radius: 15px;
    font-size: 10px;
    margin: 4px 1px;
    background-color: #f8ead0;
    color: #4a4949;
    text-align: center;
}
.basket-invoice {
    flex-grow: 1; /* اجازه می‌دهد این بخش بیشتر فضای ارتفاع را بگیرد */
    overflow-y: auto; /* اسکرول عمودی فعال */
}
.checkout-card {
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;

    position: sticky; /* برای ثابت کردن بخش */
    bottom: 0; /* چسباندن به پایین */
}
.checkout-button-basket {
    display: inline-block;
    color: #4a4949; /* رنگ متن */
    padding: 10px 20px; /* فاصله داخلی */
    text-align: center; /* وسط‌چین کردن متن */
    cursor: pointer; /* تغییر نشانگر به حالت کلیک */
    border-radius: 5px; /* گوشه‌های گرد */
    text-decoration: none;
}
.blink-button{
    animation: blink 1s infinite;

}
@keyframes blink-msg {
    0% { background-color: transparent; }
    50% { background-color: #f1f198; }
    100% { background-color: transparent; }
}
.message-blink {
    animation: blink-msg 1s ease-in-out infinite;
}
.total-factor{
    font-size: 13px;
}
.checkout-button-remove{
    margin-right: auto;
    background-color: rgb(251, 229, 229);
    cursor: pointer;
}

.checkout-button{
    margin-right: auto;
    background-color: #cefbe7;
    cursor: pointer;
}
.form-invoice input{
    width: 100%;
    display: block;
    border: none;
    direction: rtl;
    outline: none;
    background: none;
    font-size: 1.0rem;
    color: #666;
    border-radius: 15px;
    padding: 6px 6px 6px 6px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;

}
.checkout-button-basket{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right: auto;
    background-color: #adfdb4;
    padding: 10px;
    cursor: pointer;
    width: 100%;
}
@keyframes blink {
      0% { opacity: 1; }
      50% { background-color: #02da4e;color: white }
      100% { opacity: 1; }
  }
.error-invoice{
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    width: 100%;
    background-color: #fbe5e5;
    border-radius: 25px;
    padding: 5px 20px;
    font-size: 11px;
}
.w-lg-40{
    width: 40%
}
.invoices th{
    font-size: 14px;
}
.invoices td{
    font-size: 12px;
    color: #504f4f;
}
.invoices p{
    font-size: 15px;
}
.invoices span{
    font-size: 15px;
}
.label-input{
    background-color: #96d7f4;
    color: #686767;
    font-size: 12px;
    width: 30%;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    letter-spacing: 1px;
}
.btn-light-info{
    background-color: #b2d8ff;
    color: #2085f8;
}
.form-control-custom{
    padding: 15px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
    border-radius: 15px;
}
.btn-custom-primary-submit{
    background-color: #96d7f4;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;

}
.chat-page{
    min-height: 400px;
    overflow-y: auto;
    border-radius: 15px;
}
.products-wrapper {
    display: flex;
    flex-wrap: wrap; /* کارت‌ها به چند سطر تقسیم می‌شوند */
}
.message{
    max-width: 75%; display: inline-block; border-radius: 8px;
}
.footer-about{
    line-height: 28px;
    font-size: 12px;
}
.link-page{
    font-size: 12px;
    color: white;
    text-decoration: none;
}
.link-page:hover{
    color: #fa8a61;
}
.links{
    margin-right: 45px;
}
.footer{
    background-color: #245ab8;
    margin: 20px 40px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;

}
.header-main{
    margin: 20px 10px 10px 10px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
    background-image: url(../images/144339.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;

}
.align-center-btn {
    display: flex;
    align-items: center; /* وسط‌چین عمودی */
    /*justify-content: center; !* وسط‌چین افقی *!*/
    gap: 10px; /* فاصله بین آیکون و متن */
    border-radius: 8px; /* لبه‌های گرد */
    text-align: center;
}

.addcode{
    background-color: #ff571b;
    margin: 10px 40px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
}
.design{
    display: flex;
}
@media only screen and (max-width: 600px) {
    .footer{
        margin: 2px 10px;

    }
    .design{
        display: block;
        text-align: center;
    }

    .addcode{
        margin: 2px 10px;
    }
    .products-wrapper {
        display: flex;
        flex-wrap: nowrap; /* کارت‌ها در یک سطر قرار می‌گیرند */
        overflow-x: auto; /* اسکرول افقی فعال می‌شود */
    }
    .links{
        margin-right: 5px;

    }
    .label-input{
        width: 100%;
    }
    .shop-container{
        padding-left: 10px; /* فاصله از چپ */
        padding-right: 10px;
    }
    .padding-mobile-4{
        padding: 10px;
    }
    .wrapper-register {
        width: 100%; /* تنظیم برای موبایل‌ها */
        margin: 10px auto;
    }
    .form-container {
        padding: 0px;
        margin: 0px 15px;
    }
    .fs-sm-20{
        font-size: 15px;
    }
   .h-sm-50{
       /*height: 60px;*/
       font-size: 13px;
   }
.w-sm-50{
    width: 50%;
}
    .custom-card {
        text-align: center;
    }
    .wrapper-register .form-field  {
        margin-bottom: 40px;
    }
    .custom-primary{
        width: 100%;
    }
    .w-sm-100{
        width: 100%;
        text-align: center;

    }
    .w-sm-100 {
        width: 100%;
    }
    .error-invoice-main{
        margin: 20px auto;
        width: 400px;
        font-family: 'Iransanse', serif !important;
        padding: 10px 10px 10px 10px;
        background-color: #ecf0f3;
        border-radius: 15px;
        box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
    }
    .p-sm-4{
        padding: 20px;
        font-size: 15px;
    }
    .sidebar-category{
        font-family: 'Iransanse', serif !important;
        /*padding: 15px 15px 15px 15px;*/
        max-height: 150px;
        min-height: 400px;
        background-color: #ecf0f3;
        border-radius: 15px;
        box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
        overflow-y: auto;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto; /* فعال کردن اسکرول افقی */
        padding-bottom: 10px; /* فاصله برای اسکرول بار */
    }
    .shop-category{
        font-family: 'Iransanse', serif !important;
        min-height: 350px;
        max-height: 720px;
        overflow-y: auto;
        margin: 20px auto;
    }
    .category-image{
        height: 70px;
    }
    .card-category{
        min-width: 200px;
    }
    .category-product{
        font-size: 13px;
    }
    .shop-container{
        width: 100%;
        display: flex;
        min-height: 100vh; /* تنظیم ارتفاع به 100% */
    }
    .mobile-margin{
        margin-left: 0px;
        margin-right: 0px;
    }
    .message{
        max-width: 100%; display: inline-block; border-radius: 8px;
    }

}
.confirm-information{
    margin-top: 20px;
    line-height: 35px;
    padding: 10px;
    overflow-y: scroll;
    max-height: 300px;

}