body {
  font-family: Vazir, Tahoma;
  background:#f9fafc;
  direction:rtl;
  text-align:right;
}

.cart-container {
  width:100%;
  margin:40px auto;
  background:#fff;
  padding:20px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}

.cart-table {
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}

.cart-table th,
.cart-table td {
  padding:12px;
  text-align:center;
  border-bottom:1px solid #eee;
}

.cart-table img.thumb {
  width:60px;
  border-radius:8px;
}

button {
  padding:5px 10px;
  margin:0 2px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  background:#eee;
}

button:hover {
  background:#ddd;
}

.btn-remove {
  background:#ff4d4d;
  color:#fff;
}

.btn-checkout {
  background:#2196F3;
  color:white;
  padding:8px 15px;
  text-decoration:none;
  border-radius:6px;
  margin-left:5px;
}

.btn-back {
  background:#777;
  color:white;
  padding:8px 15px;
  border-radius:6px;
  text-decoration:none;
}
.cart-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  margin-left: 25px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cart-actions a.btn-back {
  order: 1;
}
.cart-actions a.btn-checkout {
  order: 2;
}
/* ---------- موبایل ---------- */
@media (max-width: 768px) {
  .cart-table, 
  .cart-table thead, 
  .cart-table tbody, 
  .cart-table th, 
  .cart-table td, 
  .cart-table tr {
    display: block;
    width: 100%;
  }

  /* مخفی کردن هدر جدول */
  .cart-table thead {
    display: none;
  }

  .cart-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

  .cart-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .cart-table td:last-child {
    border-bottom: none;
  }

  /* استفاده از data-label */
  .cart-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    padding-left: 10px;
  }

  /* تصویر جمع و جورتر */
  .cart-table img.thumb {
    max-width: 50px;
    height: auto;
    border-radius: 6px;
  }
  
  .btn-checkout,
  .btn-back {
    display: block;
    width: 100%;
    margin: 8px 0;   /* فاصله بین دکمه‌ها */
    text-align: center;
    font-size: 16px;
  }
  .cart-actions {
    flex-direction: column;
    align-items: stretch; /* دکمه‌ها پهنای کامل داشته باشن */
  }
  .cart-actions a.btn-back {
    order: 2; /* پایین */
  }
  .cart-actions a.btn-checkout {
    order: 1; /* بالا */
  }  
}