/* فونت فارسی */
@font-face {
  font-family: 'my_font';
  src: url('/aparatlist/fonts/IRANSansWeb.woff') format('woff');
}

/* بدنه صفحه */
body {
  background: url("/aparatlist/images/back.png?v=1") repeat #f2f2f2; 
  font-family: 'my_font';
  margin: 0;
  background-color: #f5f5f5;
  color: #333;
   
   direction: rtl;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
           
    
}

/* سربرگ */
header {
  text-align: center;
  background: linear-gradient(135deg, #0000FF, #191970); /* گرادیان اولیه */
  color: white;
  padding: 5px 5px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  
  /* --- تنظیمات هدر ثابت --- */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500; /* اطمینان از قرار گرفتن هدر در بالاترین لایه */
  /* --- پایان تنظیمات هدر ثابت --- */

  /* استایل‌های دیگر که از بخش بعدی کپی شده‌اند */
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
  justify-content: space-between; /* فاصله بین عنوان و ناوبری */
  align-items: center; /* هم‌ترازی عمودی آیتم‌ها */
  flex-wrap: wrap; /* اجازه شکستن به خط بعد در صورت کمبود فضا */
}

header h1 {
  font-size: 1.8rem;
  margin: 0;
  padding-right: 20px;
  color: #fff; /* اطمینان از رنگ سفید برای عنوان */
  font-size: 24px; /* اندازه فونت بزرگتر */
}

/* استایل برای بخش ناوبری */
nav ul {
  list-style: none; /* حذف نشانه‌های لیست */
  padding: 0;
  margin: 0;
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان افقی آیتم‌های لیست */
  flex-wrap: fixed; /* اجازه شکستن به خط بعد */
}

nav ul li {
  margin-left: 7px; /* فاصله بین آیتم‌های منو */
  margin-bottom: 1px; /* فاصله در صورت شکستن به خط بعد */
  background: linear-gradient(135deg, #191970, #1919aa);
  border-radius: 4px;
  color:#F5F5F5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    
}

/* استایل برای لینک‌های ناوبری */
nav ul li a {
  text-decoration: none; /* حذف خط زیر لینک */
  color: #fff; /* رنگ لینک */
  font-weight: bold;
  font-size: 16px;
  padding: 5px 10px;
  transition: color 0.3s ease; /* افکت نرم برای تغییر رنگ */
}

nav ul li a:hover {
  color: #ffc303; /* رنگ لینک در حالت هاور (وقتی موس روی آن است) */
}






  .container {
            background: white;
            padding: 5px;
            margin-top: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 400px;
            text-align: center;
        }

        h2 {
            color: #333;
            margin-bottom: 5px;
            font-size: 20px;
        }

        /* استایل کارت‌های محصول */
        .product-card {
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 3px;
            margin-bottom: 3px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
             
        }

        .product-card:hover {
            border-color: #00b4d8;
            background-color: #f9fbfd;
        }

        /* وقتی یک محصول انتخاب می‌شود */
        .product-card.selected {
            border-color: #00b4d8;
            background-color: #e6f7ff;
            box-shadow: 0 4px 10px rgba(0, 180, 216, 0.2);
        }

        .product-info {
            text-align: right;
           
        }

        .product-title {
            font-weight: normal;
            font-size: 18px;
            color: #1E90FF;
            margin-bottom: 3px;
        }

        .product-price {
            color: #B22222;
            font-weight: normal;
            font-size: 16px;
        }

        /* دکمه پرداخت */
        .pay-btn {
            
            background: linear-gradient(135deg, #00b4d8, #0096c7);
            color: white;
            border: none;
            padding: 5px 10px;
            font-size: 16px;
            border-radius: 15px;
            cursor: pointer;
            width: 100%;
            margin-top: 2px;
            transition: transform 0.2s;
            font-family: 'my_font';
        }

        .pay-btn:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 15px rgba(0, 180, 216, 0.4);
        }

        .pay-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }






/* ریسپانسیو موبایل زیبا */

/* responsive design: برای صفحات نمایش کوچکتر */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* چیدمان ستونی در صفحات کوچک */
    text-align: center;
  }
  header h1 {
    margin-bottom: 5px;
  }
  nav ul {
    justify-content: center; /* وسط‌چین کردن منو */
  }
  nav ul li {
    margin: 5px 5px; /* تنظیم فاصله در حالت ستونی */
  }
}



@media (max-width: 600px) {
  header h1 {
    font-size: 20px;
  }
  nav ul li a {
    font-size: 14px;
  }
}



@media (max-width: 480px) {

  header h1 {
    font-size: 16px;
  }
  nav ul li a {
    font-size: 10px;
  }
}