@font-face {
    font-family: 'IRANYekan';
    src: url('http://shahijan.ir/shahijan/fonts/iranyekan/iranyekanweblight.woff2') format('woff2'),
         url('http://shahijan.ir/shahijan/fonts/iranyekan/iranyekanweblight.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANYekan';
    src: url('http://shahijan.ir/shahijan/fonts/iranyekanwebmedium.woff2') format('woff2'),
         url('http://shahijan.ir/shahijan/fonts/iranyekanwebmedium.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
#cart-link {
    font-family: 'IRANYekan', sans-serif;
    position: fixed; /* ثابت شدن در صفحه */
    font-size: x-large;
    font-weight: bold;
    color: white;
    bottom: 50px; /* چسبیدن به پایین صفحه */
    left: 5px;
    right:5px;
/*    width: 100%;*/
    background-color: #972933; /* رنگ پس‌زمینه نوار */
    display: flex; /* استفاده از فلکس‌باکس برای چیدمان آیتم‌ها */
    /*justify-content: space-around;  توزیع فضا بین آیتم‌ها */
    align-items: center; /* تراز عمودی آیتم‌ها */
    gap: 10px; /* فاصله بین اجزا */
    height: 90px; /* ارتفاع نوار ناوبری (قابل تنظیم) */
/*    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* سایه برای برجسته کردن */
    z-index: 1000; /* اطمینان از اینکه روی بقیه محتوا باشد */
    flex-wrap: nowrap; /* جلوگیری از رفتن آیتم‌ها به خط بعد */
    /*    box-sizing: border-box;*/
}
#cart-link-success {
    font-family: 'IRANYekan', sans-serif;
    position: fixed; /* ثابت شدن در صفحه */
    font-size: x-large;
    font-weight: bold;
    color: white;
    bottom: 50px; /* چسبیدن به پایین صفحه */
    left: 5px;
    right:5px;
/*    width: 100%;*/
    background-color: #972933; /* رنگ پس‌زمینه نوار */
    display: flex; /* استفاده از فلکس‌باکس برای چیدمان آیتم‌ها */
    /*justify-content: space-around;  توزیع فضا بین آیتم‌ها */
    align-items: center; /* تراز عمودی آیتم‌ها */
    gap: 10px; /* فاصله بین اجزا */
    height: 90px; /* ارتفاع نوار ناوبری (قابل تنظیم) */
/*    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* سایه برای برجسته کردن */
    z-index: 1000; /* اطمینان از اینکه روی بقیه محتوا باشد */
    flex-wrap: nowrap; /* جلوگیری از رفتن آیتم‌ها به خط بعد */
    /*    box-sizing: border-box;*/
}
.cart-icon {
    font-size: 70px;
}
.cart-badge {
    z-index: 10;
    position: absolute;
    top: 10px; /* این مقدار را ممکن است لازم باشد کمی تنظیم کنید */
    right: 10px; /* این مقدار را هم ممکن است لازم باشد کمی تنظیم کنید */
    /* ---- این بخش را با استایل زیر جایگزین کنید ---- */
    width: 28px;             /* عرض ثابت برای دایره */
    height: 28px;            /* ارتفاع ثابت برای دایره */
    padding: 0;              /* padding داخلی حذف شود */
    border-radius: 100%;      /* برای ایجاد دایره کامل */
    background: #007141;     /* رنگ پس‌زمینه قرمز */
    /* ---- پایان بخش جایگزین شده ---- */
    color: white;
    font-size: 28px;
    font-weight: bold;
    display: flex;
    align-items: center;
    text-align: center;
}
#cart-total-price{
  font-size: xx-large;  
  text-decoration: none; /* اطمینان از عدم وجود زیرخط */
  color: inherit; /* استفاده از رنگ متن والد */
}
#cart-count-pro {
  font-size: x-large;  
  text-decoration: none; /* اطمینان از عدم وجود زیرخط */
  color: inherit; /* استفاده از رنگ متن والد */
}
    /* دکمه را به انتهای ردیف می‌فرستیم */
#pay-btn {
    flex-wrap: nowrap; /* جلوگیری از رفتن آیتم‌ها به خط بعد */
    margin-left: auto;
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 120px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

#pay-btn:hover {
    background-color: #218838; /* سبز تیره‌تر هنگام هاور */
    transform: translateY(-2px);
}
.fixed-header {
    position: absolute;     /* باعث ثابت ماندن در صفحه می‌شود */
    top: 0;              /* در بالای صفحه */
    left:0px;
    right:0px;
/*    width: 100%;*/
    background-color: white;
}
.content {
    margin-top: 280px;    /* چون header ثابت است، محتوا را پایین می‌فرستیم */
    margin-left: 5px;
    margin-right: 5px;    
    background: white !important;
    overflow: auto;   /* باعث می‌شود ارتفاع والد به اندازه محصول شود */
}
.top-bar {
    position: relative;
    max-width: 100%;
    height: auto;
    display: flex;
    justify-content: center; /* مرکز افقی */
    align-items: center;      /* مرکز عمودی */
    z-index: 10;
}
.logo {
    height: auto; /*50px; /* یا اندازه دلخواه دیگر */
}

/* حالت هاور */
.cart-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.35);
}

/* فوکوس با کیبورد */
.cart-link:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35);
}

.empty-cart {
    display: flex;
    justify-content: center;   /* وسط افقی */
    align-items: center;       /* وسط عمودی */
 }
body {
    margin: center;
    padding: center;
    max-width: 100%;
    height: auto;
    padding-bottom: 80px; /* این مقدار باید حداقل برابر ارتفاع نوار ناوبری باشد */
    box-sizing: border-box;
    direction: rtl; /* برای زبان فارسی */
}

.main-content {
    /* استایل‌های دیگر محتوای اصلی شما */
    padding: 20px;
}
/* Header */
h1 {
    font-family: 'IRANYekan', sans-serif;
/*    font-size: clamp(16px, 4vw, 32px); 
    white-space: nowrap;    */
    background-color: #007141;
    color: white;
    text-align: center;
    padding: 7px 0;
    vertical-align: middle; /* هم‌ترازی عمودی */
}
/* Products container */
.product {
    color: white;
    margin-top: 5px;
    background-color: #972933;
    border: 2px solid #007141;
    border-radius: 8px;
    width: max-width/3;
    margin: 7px;
    padding: 7px;
    float: left;
    transition: transform 0.2s;
}
 .green-price {
        color: #96CA51; /* رنگ سبز روشن */
        font-weight: bold; /* اختیاری: برای پررنگ‌تر کردن قیمت */
    }
.single-product {
    background: white;
    width: 500px;
    margin: 5px auto;
    padding: 5px;
    border-radius: 10px;
}
/* Hover effect */
.product:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* Buttons */
button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

/* Clear floats */
body::after {
    content: "";
    display: block;
    clear: both;
}
.centered-form {
    margin: 50px auto; /* 50px از بالا و پایین، و auto برای وسط چین کردن افقی */
    width: 50%; /* عرض فرم را می‌توانید تنظیم کنید */
    max-width: max-content; /* حداکثر عرض فرم */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center; /* برای وسط چین کردن محتوای داخل فرم (مثل دکمه) */
}

.centered-form label {
    display: block; /* باعث می‌شود لیبل‌ها در خط خودشان باشند */
    margin-bottom: 5px;
    text-align: left; /* متن لیبل‌ها را به چپ تراز می‌کند */
    font-weight: bold;
}

.centered-form input[type="text"],
.centered-form input[type="insta"],
.centered-form textarea {
    width: calc(100% - 22px); /* عرض فیلدها را تنظیم می‌کند، 2px border + 20px padding */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* اطمینان از اینکه padding و border در عرض کلی محاسبه شوند */
}

.centered-form textarea {
    height: 100px; /* ارتفاع دلخواه برای textarea */
    resize: vertical; /* اجازه تغییر اندازه عمودی را می‌دهد */
}

.centered-form button {
    background-color: #4CAF50; /* رنگ دکمه */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

/* برای وسط چین کردن متن در داخل فرم */
.centered-form label, .centered-form input, .centered-form textarea, .centered-form button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* تنظیم مجدد برای لیبل‌ها که چپ چین باشند */
.centered-form label {
    text-align: right;
    width: calc(100% - 22px); /* عرض برابر با فیلدها */
}
.centered-form input[type="tel"] {
    /* می‌توانید استایل‌های دلخواه خود را اینجا اضافه کنید */
    /* مثلاً: */
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.bottom-nav {
    position: fixed; /* ثابت شدن در صفحه */
    bottom: 0; /* چسبیدن به پایین صفحه */
    left: 0px;
    right:0px;
/*    width: 100%;*/
    background-color: #007141; /* رنگ پس‌زمینه نوار */
    display: flex; /* استفاده از فلکس‌باکس برای چیدمان آیتم‌ها */
    /*justify-content: space-around;  توزیع فضا بین آیتم‌ها */
    align-items: center; /* تراز عمودی آیتم‌ها */
    height: 50px; /* ارتفاع نوار ناوبری (قابل تنظیم) */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* سایه برای برجسته کردن */
    z-index: 1000; /* اطمینان از اینکه روی بقیه محتوا باشد */
    box-sizing: border-box;
}
.nav-item {
    display: flex;
    flex-direction: column; /* آیکون بالا، متن پایین */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ecf0f1; /* رنگ متن و آیکون‌ها */
    flex-grow: 1; /* اجازه می‌دهد هر آیتم فضا را بگیرد */
    padding: 5px 0;
    transition: background-color 0.3s ease;
}
.nav-item:hover {
    background-color: #972933; /* تغییر رنگ در هاور */
}

.nav-icon {
    width: 24px; /* اندازه آیکون‌ها */
    height: 24px;
    margin-bottom: 5px; /* فاصله بین آیکون و متن */
    /* رنگ آیکون‌ها را می‌توان با filter یا mask در CSS تنظیم کرد،
       اما اگر آیکون‌ها رنگی هستند (مثل سبز خانه در عکس شما)
       باید تصاویر آیکون‌ها رنگی باشند.
       اگر آیکون‌ها سفید/خاکستری هستند و می‌خواهید سبز شوند:
       filter: invert(77%) sepia(99%) saturate(297%) hue-rotate(97deg) brightness(99%) contrast(95%);
    */
}

.nav-text {
    font-size: clamp(16px, 4vw, 18px); 
/*    font-size: 0.75em; /* اندازه متن */
    text-align: center;
}

/* استایل برای آیتم "خانه" که رنگ سبز دارد */
.bottom-nav .nav-item:nth-child(4) { /* آیتم چهارم (خانه) */
    color: #ecf0f1; /* رنگ سبز */
}

/* اگر آیکون خانه هم باید سبز باشد، باید فیلتر یا آیکون رنگی استفاده شود */
.bottom-nav .nav-item:nth-child(4) .nav-icon {
     /* فیلتر برای سبز کردن آیکون سفید/خاکستری */
     filter: invert(77%) sepia(99%) saturate(297%) hue-rotate(97deg) brightness(99%) contrast(95%);
}


/* پوشش پس‌زمینه تاریک */
#product-detail-overlay {
    display: none;   /* مهم‌ترین خط */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    overflow-y: auto; /* فعال کردن اسکرول عمودی در صورت نیاز */
    z-index: 9999;
}

/* جعبه اصلی جزئیات */
#product-detail-box {
  /* ... سایر استایل‌های موجود ... */
    max-height: 60vh; /* حداکثر ارتفاع 80 درصد صفحه نمایش */
    overflow-y: auto; /* فعال کردن اسکرول عمودی در صورت نیاز */
    position: fixed; /* برای موقعیت‌دهی دکمه بستن در صورت نیاز */
    /* اطمینان از اینکه مودال در مرکز صفحه قرار دارد */
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #972933; /* یا رنگ پس‌زمینه مودال شما */
    padding: 20px;
    border: 2px solid #007141;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 70%; /* عرض مودال */
    max-width: 420px; /* حداکثر عرض مودال */
    z-index: 1000; /* اطمینان از اینکه بالای همه عناصر دیگر است */
}
/* برای نام محصول */
#product-detail-name {
    color: white !important; /* یا هر رنگ سفیدی که می‌خواهید */
}
/* برای توضیحات محصول */
#product-detail-description {
    color: white !important; /* یا رنگ دلخواه */
    white-space: pre-wrap; /* حفظ فاصله‌ها و خطوط جدید */
    word-wrap: break-word; /* شکستن کلمات طولانی برای جلوگیری از سرریز شدن */
    text-align: right;     /* اگر محتوا راست به چپ است */
    direction: rtl;        /* اگر محتوا راست به چپ است */
}    
/* دکمه × بستن */
.close-btn {
    position: absolute;
    top: 10px; /* فاصله از بالا */
    right: 10px; /* فاصله از راست */
    font-size: 44px; /* اندازه فونت */
    color: black;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0 5px;
}

/* افکت ظاهر شدن */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

#add-to-cart-section {
    text-align: center; /* دکمه را وسط‌چین می‌کند */
    margin-top: 15px; /* فاصله از بالای مودال */
    margin-bottom: 10px; /* فاصله از پایین مودال */
    padding-top: 10px; /* فاصله بیشتر از توضیحات */
}

/* استایل خود دکمه */
.add-to-cart-button {
    background-color: #4CAF50; /* رنگ پس‌زمینه سبز */
    color: white; /* رنگ متن */
    padding: 12px 25px; /* فاصله داخلی دکمه */
    border: none; /* حذف حاشیه */
    border-radius: 8px; /* گرد کردن گوشه‌ها */
    font-size: 16px; /* اندازه فونت */
    cursor: pointer; /* تغییر نشانگر موس به دست */
    transition: background-color 0.3s ease, transform 0.2s ease; /* افکت نرم هنگام هاور و کلیک */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* سایه ملایم */
}

/* استایل دکمه هنگام هاور (وقتی موس روی آن می‌رود) */
.add-to-cart-button:hover {
    background-color: #45a049; /* رنگ تیره‌تر هنگام هاور */
    transform: translateY(-2px); /* کمی دکمه را بالا می‌برد */
}

/* استایل دکمه هنگام کلیک */
.add-to-cart-button:active {
    background-color: #3e8e41; /* رنگ تیره‌تر هنگام کلیک */
    transform: translateY(0); /* برگرداندن به حالت عادی */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* سایه کمتر هنگام کلیک */
}

.add-to-cart-button {
    background-color: #4CAF50; /* سبز */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

.add-to-cart-button:hover {
    background-color: #45a049;
}

#product-detail-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
}

.green-price {
    color: green;
    font-weight: bold;
}


/* مدیریت padding-bottom برای صفحه */
@media (max-width: 768px) {
    body {
        padding-bottom: 70px; /* تنظیم مجدد padding برای صفحه نمایش‌های کوچکتر */
    }
    .bottom-nav {
        height: 60px; /* ارتفاع کمتر در موبایل */
    }
    .nav-icon {
        width: 20px;
        height: 20px;
    }
    .nav-text {
        font-size: 0.7em;
    }
}

.heart {
  position: fixed;           /* مهم: fixed تا نسبت به صفحه باشد */
  width: 20px;
  height: 20px;
  background-color: #972933;
  transform: rotate(45deg);
  animation: explode 2.2s ease-out forwards;
  z-index: 9999;
}
.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #007141;
  border-radius: 50%;
}
.heart::before { top: -10px; left: 0; }
.heart::after { left: -10px; top: 0; }

@keyframes explode {
  from {
    transform: scale(0.5) rotate(45deg);
    opacity: 1;
  }
  to {
    transform: translate(var(--x), var(--y)) scale(1.5) rotate(45deg);
    opacity: 0;
  }
}