@font-face { font-family: 'Vazir-Black-FD'; src: url('../fonts/Vazir-Black-FD.woff2') format('woff2'), url('../fonts/Vazir-Black-FD.woff') format('woff'), url('../fonts/Vazir-Black-FD.ttf') format('truetype'); font-weight: normal; font-style: normal; }
body { margin: 0; padding: 0; font-family: 'Vazir-Black-FD', sans-serif; direction: rtl; background: #f5f5f5; }
.header { position: relative; }
.header img.top-image { width: 100%; height: 35vh; object-fit: cover; filter: brightness(0.8); }
.header img.logo { position: absolute; top: 10px; left: 10px; width: 200px; height: 200px; object-fit: contain; }
.header img.translate { position: absolute; top: 240px; left: 53px; width: 100px; height: 100px; object-fit: contain; }

.lang-selector { position: absolute; top: 20px; right: 20px; }
.lang-selector button { background: rgba(255, 255, 255, 0.85); border: none; padding: 12px 20px; margin-left: 5px; cursor: pointer; border-radius: 5px; font-weight: bold; font-size: 32px; transition: background 0.3s; font-family: 'Vazir-Black-FD', sans-serif; }
.lang-selector button:hover { background: rgba(255, 120, 255, 1); }
.category-menu { display: flex; justify-content: center; align-items: center; margin: 20px 0; flex-wrap: wrap; gap: 10px; }
.category-menu button { background: #3498db; color: #fff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; transition: background 0.3s; font-size: 30px; font-family: 'Vazir-Black-FD', sans-serif; }
.category-menu button:hover { background: #298009; }
.edit-button {background: #e74c3c; color: #fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: transform 0.3s; font-size: 26px; font-family: 'Vazir-Black-FD', sans-serif; }
.edit-button:hover { transform: scale(1.1); }
.menu-container { display: flex; justify-content: center; padding: 20px; }
.menu-table {width: 95%; margin: 0 auto; border-collapse: collapse; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; overflow: hidden;}
.menu-table th, .menu-table td { padding: 5px; text-align: center; border-bottom: 1px solid #f0f0f0; font-size: 30px; font-weight: bold; font-family: 'Vazir-Black-FD', sans-serif; width: 33%; }
.menu-table th { background: #3498db; color: #fff; font-size: 32px; }
.menu-table tr:hover { background: #f9f9f9; }

.product-image img {
  width: 100%; /* عرض تصویر */
  height: auto; /* تنظیم ارتفاع متناسب با عرض */
  object-fit: contain; /* تناسب تصویر حفظ شود */
  aspect-ratio: 16 / 12; /* نسبت ابعاد افقی (16:9) */
  border-radius: 6px; /* گوشه‌های گرد تصویر */
  border: 3px solid #3498db; /* رنگ حاشیه */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* سایه */
  padding: 2px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-image img:hover {
  transform: scale(1.1); /* بزرگنمایی هنگام هاور */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* سایه عمیق‌تر هنگام هاور */
}


.product-price input { font-family: 'Vazir-Black-FD', sans-serif; font-size: 30px; font-weight: bold; text-align: center; width: 90px; }
.modal {
  display: none;
  position: fixed;
  top: 50%; /* مکان عمودی در مرکز صفحه */
  left: 50%; /* مکان افقی در مرکز صفحه */
  transform: translate(-50%, -50%); /* برای قرارگیری دقیق در مرکز */
  width: 75%; /* تنظیم عرض بیشتر */
  max-width: 750px; /* حداکثر عرض */
  height: auto; /* ارتفاع متناسب با محتوا */
  max-height: 80vh; /* محدود کردن ارتفاع به 80% ارتفاع صفحه نمایش */
  background: #fff; /* رنگ پس‌زمینه */
  border: 2px solid #666; /* حاشیه */
  padding: 20px; /* فاصله داخلی کادر */
  z-index: 1000; /* اولویت نمایش بالا */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* سایه زیبا */
  border-radius: 10px; /* گوشه‌های گرد */
  overflow-y: auto; /* امکان اسکرول عمودی در صورت طولانی بودن محتوا */
}

.modal img { max-width: 100%; max-height: 100%; border-radius: 5px; }
.modal .modal-content { margin-top: 10px; text-align: center; font-family: 'Vazir-Black-FD', sans-serif; }
.modal-close {
  font-size: 32px; /* اندازه متن (×) */
  width: 60px; /* عرض دکمه */
  height: 60px; /* ارتفاع دکمه */
  display: flex; /* برای مرکز کردن محتوا */
  justify-content: center; /* متن را در وسط دکمه قرار می‌دهد */
  align-items: center; /* متن را عمودی وسط‌چین می‌کند */
  border-radius: 50%; /* دکمه را دایره‌ای می‌کند */
  background: #e74c3c; /* رنگ پس‌زمینه */
  color: #fff; /* رنگ متن */
  border: none; /* بدون حاشیه */
  cursor: pointer; /* تغییر نشانگر موس */
  position: absolute; /* برای قرار دادن دقیق */
  top: 10px; /* فاصله از بالای کادر مدال */
  right: 10px; /* فاصله از سمت راست کادر مدال */
  transition: transform 0.3s, background 0.3s;
}

.modal-close:hover {
  transform: scale(1.2); /* بزرگ‌تر شدن هنگام هاور */
  background: #c0392b; /* تغییر رنگ پس‌زمینه در هاور */
}

@media only screen and (max-width: 768px) { .menu-table th, .menu-table td { padding: 30px; font-size: 60px; } .product-image img { width: 280px; height: 200px; } .product-price input { font-size: 60px; } }

 .Phone-icon           {position: fixed; left: 25px; z-index: 11;
 bottom: 220px; /* فاصله بیشتر از پایین برای جدا شدن از واتساپ آیکون */ border-radius: 85%; /* ایجاد دایره‌ای دور آیکون */ padding: 0px; /* فاصله بین آیکون و حلقه رنگی */ margin: 0px;  }
.Phone-icon img       {width: 100px; /* اندازه کوچکتر */ height: auto;}

.Whatsapp-icon          {position: fixed; left: 28px; z-index: 11; bottom: 100px; /* فاصله از پایین */ border-radius: 85%; /* ایجاد دایره‌ای دور آیکون */}
.Whatsapp-icon img       {width: 85px; /* اندازه کوچکتر */ height: auto;}

.navbar {
  display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around;
  background-color: rgba(255, 130, 203, 1);
  position: fixed; /* Set the navbar to fixed position */
  bottom: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */ 
  border-radius: 5px; z-index: 10; padding: 5px;}

/* Links inside the navbar */
.navbar a {color: #f2f2f2;   text-decoration: none; }
/* Change background on mouse-over */
.navbar a:hover { background: #ddd; color: black;}


.lang-selector button.active {
  background: #3498db; /* رنگ پیش‌فرض دکمه فعال (رنگی‌تر) */
  color: #fff;        /* رنگ متن */
  border: 2px solid #2980b9; /* ایجاد یک حاشیه زیبا */
}